Refactor to define a single wrap method

packages/lab-example/package.json

@@ -14,8 +14,7 @@
   },
   "license": "BSD-3-Clause",
   "author": {
-    "name": "Jupyter Developer Team",
-    "email": ""
+    "name": "Jupyter Developer Team"
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",

packages/react-components/src/accordion-item/index.tsx → packages/react-components/src/accordion-item/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpAccordionItem
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpAccordionItem } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const AccordionItem: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/accordion/index.tsx → packages/react-components/src/accordion/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpAccordion
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpAccordion } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Accordion: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/anchor/index.tsx → packages/react-components/src/anchor/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpAnchor } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpAnchor } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Anchor: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/anchored-region/index.tsx → packages/react-components/src/anchored-region/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpAnchoredRegion
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpAnchoredRegion } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const AnchoredRegion: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/avatar/index.tsx → packages/react-components/src/avatar/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpAvatar } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpAvatar } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Avatar: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/badge/index.tsx → packages/react-components/src/badge/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpBadge } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpBadge } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Badge: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/breadcrumb-item/index.tsx → packages/react-components/src/breadcrumb-item/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpBreadcrumbItem
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpBreadcrumbItem } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const BreadcrumbItem: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/breadcrumb/index.tsx → packages/react-components/src/breadcrumb/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpBreadcrumb
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpBreadcrumb } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Breadcrumb: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/button/index.tsx → packages/react-components/src/button/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpButton } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpButton } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Button: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/card/index.tsx → packages/react-components/src/card/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpCard } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpCard } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Card: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement>,

packages/react-components/src/checkbox/index.tsx → packages/react-components/src/checkbox/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpCheckbox
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpCheckbox } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Checkbox: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/combobox/index.tsx → packages/react-components/src/combobox/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpCombobox
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpCombobox } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Combobox: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/data-grid/index.tsx → packages/react-components/src/data-grid/index.ts

@@ -2,15 +2,12 @@
 // Distributed under the terms of the Modified BSD License.
 
 import {
-  provideJupyterDesignSystem,
   jpDataGrid,
   jpDataGridCell,
   jpDataGridRow
 } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import type React from 'react';
+import { wrap } from '../wrap';
 
 // WARNING The wrapping needs to be called in order (from bottom to top DOM elements)
 // Otherwise during the wrapping the tag for sub elements won't be resolved and this

packages/react-components/src/date-field/index.tsx → packages/react-components/src/date-field/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpDateField
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpDateField } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const DateField: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/design-system-provider/index.tsx → packages/react-components/src/design-system-provider/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpDesignSystemProvider
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpDesignSystemProvider } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const DesignSystemProvider: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/dialog/index.tsx → packages/react-components/src/dialog/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpDialog } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpDialog } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Dialog: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/disclosure/index.tsx → packages/react-components/src/disclosure/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpDisclosure
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpDisclosure } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Disclosure: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/divider/index.tsx → packages/react-components/src/divider/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpDivider } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpDivider } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Divider: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/drafts/picker/index.tsx → packages/react-components/src/drafts/picker/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpPicker } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpPicker } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../../wrap';
 
 /**
  * @alpha

packages/react-components/src/index.ts

@@ -1,6 +1,8 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+export * from './wrap';
+
 export * from './accordion';
 export * from './accordion-item';
 export * from './anchor';

packages/react-components/src/listbox/index.tsx → packages/react-components/src/listbox/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpListbox } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpListbox } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Listbox: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/menu-item/index.tsx → packages/react-components/src/menu-item/index.ts

@@ -1,14 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  provideJupyterDesignSystem,
-  jpMenuItem
-} from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpMenuItem } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const MenuItem: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement> & {

packages/react-components/src/menu/index.tsx → packages/react-components/src/menu/index.ts

@@ -1,11 +1,9 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { provideJupyterDesignSystem, jpMenu } from '@jupyter/web-components';
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
-import React from 'react';
-
-const { wrap } = provideReactWrapper(React, provideJupyterDesignSystem());
+import { jpMenu } from '@jupyter/web-components';
+import type React from 'react';
+import { wrap } from '../wrap';
 
 export const Menu: React.DetailedHTMLFactory<
   React.HTMLAttributes<HTMLElement>,