@ebrains/react 0.9.0-beta → 0.9.2-beta

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -4,4 +4,8 @@ React target wrappers for Stencil output, allowing for seamless integration of S
 
 ## Usage 
 
-More information about importing and using the package can be found currently in the WIP [https://design-dev.ebrains.eu/ui-components/](EBRAINS Design System).
+More information about importing and using the package can be found currently in the [https://design.ebrains.eu/ui-components/](EBRAINS Design System).
+
+## Licensing
+
+The contents of this package are licensed under `MIT`.

package/package.json

@@ -1,8 +1,4 @@
 {
   "name": "@ebrains/react",
-  "version": "0.9.0-beta",
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js",
-  "types": "./index.esm.d.ts"
-}
+  "version": "0.9.2-beta"
+}

package/project.json

@@ -0,0 +1,10 @@
+{
+  "name": "react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react/src",
+  "projectType": "library",
+  "tags": [],
+  "implicitDependencies": ["components"],
+  "// targets": "to see all targets run: nx show project react --web",
+  "targets": {}
+}

package/rollup.config.js

@@ -0,0 +1,43 @@
+const { withNx } = require('@nx/rollup/with-nx');
+const url = require('@rollup/plugin-url');
+const svg = require('@svgr/rollup');
+//const nodeResolve = require('@rollup/plugin-node-resolve');
+const alias = require('@rollup/plugin-alias');
+const path = require('path');
+//const commonjs = require('@rollup/plugin-commonjs');
+//const typescript = require('@rollup/plugin-typescript');
+
+module.exports = withNx(
+  {
+    main: './src/index.ts',
+    outputPath: '../../dist/packages/react',
+    tsConfig: './tsconfig.lib.json',
+    compiler: 'babel',
+    //external: ['react', 'react-dom', 'react/jsx-runtime', '@ebrains/components', '@ebrains/components/loader'], 
+    external: ['react', 'react-dom', 'react/jsx-runtime'], 
+    format: ['esm'],
+    assets: [{ input: 'packages/react', output: '.', glob: '{README.md,LICENSE}'}],
+  },
+  {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    plugins: [
+      //nodeResolve(),
+      //commonjs(), // Convert CommonJS to ES modules
+      //typescript(), // Support for TypeScript files
+      alias({
+        entries: [
+          { find: '@ebrains/components', replacement: path.resolve(__dirname, '../../dist/packages/components') },
+          { find: '@ebrains/components/loader', replacement: path.resolve(__dirname, '../../dist/packages/components/loader') }
+        ],
+      }),
+      svg({
+        svgo: false,
+        titleProp: true,
+        ref: true,
+      }),
+      url({
+        limit: 10000, // 10kB
+      }),
+    ],
+  },
+);

package/src/components.ts

@@ -0,0 +1,49 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from '@ebrains/components';
+
+import { defineCustomElements } from '@ebrains/components/loader';
+
+defineCustomElements();
+export const EdsAccordion = /*@__PURE__*/createReactComponent<JSX.EdsAccordion, HTMLEdsAccordionElement>('eds-accordion');
+export const EdsAlert = /*@__PURE__*/createReactComponent<JSX.EdsAlert, HTMLEdsAlertElement>('eds-alert');
+export const EdsAvatar = /*@__PURE__*/createReactComponent<JSX.EdsAvatar, HTMLEdsAvatarElement>('eds-avatar');
+export const EdsBlockBreak = /*@__PURE__*/createReactComponent<JSX.EdsBlockBreak, HTMLEdsBlockBreakElement>('eds-block-break');
+export const EdsBreadcrumb = /*@__PURE__*/createReactComponent<JSX.EdsBreadcrumb, HTMLEdsBreadcrumbElement>('eds-breadcrumb');
+export const EdsButton = /*@__PURE__*/createReactComponent<JSX.EdsButton, HTMLEdsButtonElement>('eds-button');
+export const EdsCardGeneric = /*@__PURE__*/createReactComponent<JSX.EdsCardGeneric, HTMLEdsCardGenericElement>('eds-card-generic');
+export const EdsCardSection = /*@__PURE__*/createReactComponent<JSX.EdsCardSection, HTMLEdsCardSectionElement>('eds-card-section');
+export const EdsCodeBlock = /*@__PURE__*/createReactComponent<JSX.EdsCodeBlock, HTMLEdsCodeBlockElement>('eds-code-block');
+export const EdsDropdown = /*@__PURE__*/createReactComponent<JSX.EdsDropdown, HTMLEdsDropdownElement>('eds-dropdown');
+export const EdsFeedback = /*@__PURE__*/createReactComponent<JSX.EdsFeedback, HTMLEdsFeedbackElement>('eds-feedback');
+export const EdsFooter = /*@__PURE__*/createReactComponent<JSX.EdsFooter, HTMLEdsFooterElement>('eds-footer');
+export const EdsForm = /*@__PURE__*/createReactComponent<JSX.EdsForm, HTMLEdsFormElement>('eds-form');
+export const EdsFullscreenMenu = /*@__PURE__*/createReactComponent<JSX.EdsFullscreenMenu, HTMLEdsFullscreenMenuElement>('eds-fullscreen-menu');
+export const EdsHeader = /*@__PURE__*/createReactComponent<JSX.EdsHeader, HTMLEdsHeaderElement>('eds-header');
+export const EdsIconWrapper = /*@__PURE__*/createReactComponent<JSX.EdsIconWrapper, HTMLEdsIconWrapperElement>('eds-icon-wrapper');
+export const EdsImg = /*@__PURE__*/createReactComponent<JSX.EdsImg, HTMLEdsImgElement>('eds-img');
+export const EdsInputField = /*@__PURE__*/createReactComponent<JSX.EdsInputField, HTMLEdsInputFieldElement>('eds-input-field');
+export const EdsLink = /*@__PURE__*/createReactComponent<JSX.EdsLink, HTMLEdsLinkElement>('eds-link');
+export const EdsLogo = /*@__PURE__*/createReactComponent<JSX.EdsLogo, HTMLEdsLogoElement>('eds-logo');
+export const EdsMatomoNotice = /*@__PURE__*/createReactComponent<JSX.EdsMatomoNotice, HTMLEdsMatomoNoticeElement>('eds-matomo-notice');
+export const EdsModal = /*@__PURE__*/createReactComponent<JSX.EdsModal, HTMLEdsModalElement>('eds-modal');
+export const EdsPagination = /*@__PURE__*/createReactComponent<JSX.EdsPagination, HTMLEdsPaginationElement>('eds-pagination');
+export const EdsProgressBar = /*@__PURE__*/createReactComponent<JSX.EdsProgressBar, HTMLEdsProgressBarElement>('eds-progress-bar');
+export const EdsRating = /*@__PURE__*/createReactComponent<JSX.EdsRating, HTMLEdsRatingElement>('eds-rating');
+export const EdsSectionCore = /*@__PURE__*/createReactComponent<JSX.EdsSectionCore, HTMLEdsSectionCoreElement>('eds-section-core');
+export const EdsSocialNetworks = /*@__PURE__*/createReactComponent<JSX.EdsSocialNetworks, HTMLEdsSocialNetworksElement>('eds-social-networks');
+export const EdsSpinner = /*@__PURE__*/createReactComponent<JSX.EdsSpinner, HTMLEdsSpinnerElement>('eds-spinner');
+export const EdsSplashScreen = /*@__PURE__*/createReactComponent<JSX.EdsSplashScreen, HTMLEdsSplashScreenElement>('eds-splash-screen');
+export const EdsSteps = /*@__PURE__*/createReactComponent<JSX.EdsSteps, HTMLEdsStepsElement>('eds-steps');
+export const EdsStepsV2 = /*@__PURE__*/createReactComponent<JSX.EdsStepsV2, HTMLEdsStepsV2Element>('eds-steps-v2');
+export const EdsSwitch = /*@__PURE__*/createReactComponent<JSX.EdsSwitch, HTMLEdsSwitchElement>('eds-switch');
+export const EdsTable = /*@__PURE__*/createReactComponent<JSX.EdsTable, HTMLEdsTableElement>('eds-table');
+export const EdsTabs = /*@__PURE__*/createReactComponent<JSX.EdsTabs, HTMLEdsTabsElement>('eds-tabs');
+export const EdsTag = /*@__PURE__*/createReactComponent<JSX.EdsTag, HTMLEdsTagElement>('eds-tag');
+export const EdsTimeline = /*@__PURE__*/createReactComponent<JSX.EdsTimeline, HTMLEdsTimelineElement>('eds-timeline');
+export const EdsToast = /*@__PURE__*/createReactComponent<JSX.EdsToast, HTMLEdsToastElement>('eds-toast');
+export const EdsTooltip = /*@__PURE__*/createReactComponent<JSX.EdsTooltip, HTMLEdsTooltipElement>('eds-tooltip');
+export const EdsUser = /*@__PURE__*/createReactComponent<JSX.EdsUser, HTMLEdsUserElement>('eds-user');

package/src/generated/components.ts

@@ -0,0 +1,47 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated react proxies */
+import { createReactComponent } from './react-component-lib';
+
+import type { JSX } from '@ebrains/components';
+
+import { defineCustomElements } from '@ebrains/components/loader';
+
+defineCustomElements();
+export const EdsAccordion = /*@__PURE__*/createReactComponent<JSX.EdsAccordion, HTMLEdsAccordionElement>('eds-accordion');
+export const EdsAlert = /*@__PURE__*/createReactComponent<JSX.EdsAlert, HTMLEdsAlertElement>('eds-alert');
+export const EdsAvatar = /*@__PURE__*/createReactComponent<JSX.EdsAvatar, HTMLEdsAvatarElement>('eds-avatar');
+export const EdsBlockBreak = /*@__PURE__*/createReactComponent<JSX.EdsBlockBreak, HTMLEdsBlockBreakElement>('eds-block-break');
+export const EdsBreadcrumb = /*@__PURE__*/createReactComponent<JSX.EdsBreadcrumb, HTMLEdsBreadcrumbElement>('eds-breadcrumb');
+export const EdsButton = /*@__PURE__*/createReactComponent<JSX.EdsButton, HTMLEdsButtonElement>('eds-button');
+export const EdsCardDesc = /*@__PURE__*/createReactComponent<JSX.EdsCardDesc, HTMLEdsCardDescElement>('eds-card-desc');
+export const EdsCardGeneric = /*@__PURE__*/createReactComponent<JSX.EdsCardGeneric, HTMLEdsCardGenericElement>('eds-card-generic');
+export const EdsCardSection = /*@__PURE__*/createReactComponent<JSX.EdsCardSection, HTMLEdsCardSectionElement>('eds-card-section');
+export const EdsCodeBlock = /*@__PURE__*/createReactComponent<JSX.EdsCodeBlock, HTMLEdsCodeBlockElement>('eds-code-block');
+export const EdsDropdown = /*@__PURE__*/createReactComponent<JSX.EdsDropdown, HTMLEdsDropdownElement>('eds-dropdown');
+export const EdsFooter = /*@__PURE__*/createReactComponent<JSX.EdsFooter, HTMLEdsFooterElement>('eds-footer');
+export const EdsForm = /*@__PURE__*/createReactComponent<JSX.EdsForm, HTMLEdsFormElement>('eds-form');
+export const EdsFrame = /*@__PURE__*/createReactComponent<JSX.EdsFrame, HTMLEdsFrameElement>('eds-frame');
+export const EdsFullscreenMenu = /*@__PURE__*/createReactComponent<JSX.EdsFullscreenMenu, HTMLEdsFullscreenMenuElement>('eds-fullscreen-menu');
+export const EdsHeader = /*@__PURE__*/createReactComponent<JSX.EdsHeader, HTMLEdsHeaderElement>('eds-header');
+export const EdsIconWrapper = /*@__PURE__*/createReactComponent<JSX.EdsIconWrapper, HTMLEdsIconWrapperElement>('eds-icon-wrapper');
+export const EdsImg = /*@__PURE__*/createReactComponent<JSX.EdsImg, HTMLEdsImgElement>('eds-img');
+export const EdsInputField = /*@__PURE__*/createReactComponent<JSX.EdsInputField, HTMLEdsInputFieldElement>('eds-input-field');
+export const EdsLink = /*@__PURE__*/createReactComponent<JSX.EdsLink, HTMLEdsLinkElement>('eds-link');
+export const EdsLogin = /*@__PURE__*/createReactComponent<JSX.EdsLogin, HTMLEdsLoginElement>('eds-login');
+export const EdsLogo = /*@__PURE__*/createReactComponent<JSX.EdsLogo, HTMLEdsLogoElement>('eds-logo');
+export const EdsMatomoNotice = /*@__PURE__*/createReactComponent<JSX.EdsMatomoNotice, HTMLEdsMatomoNoticeElement>('eds-matomo-notice');
+export const EdsModal = /*@__PURE__*/createReactComponent<JSX.EdsModal, HTMLEdsModalElement>('eds-modal');
+export const EdsPagination = /*@__PURE__*/createReactComponent<JSX.EdsPagination, HTMLEdsPaginationElement>('eds-pagination');
+export const EdsProgressBar = /*@__PURE__*/createReactComponent<JSX.EdsProgressBar, HTMLEdsProgressBarElement>('eds-progress-bar');
+export const EdsRating = /*@__PURE__*/createReactComponent<JSX.EdsRating, HTMLEdsRatingElement>('eds-rating');
+export const EdsSectionCore = /*@__PURE__*/createReactComponent<JSX.EdsSectionCore, HTMLEdsSectionCoreElement>('eds-section-core');
+export const EdsSectionHeading = /*@__PURE__*/createReactComponent<JSX.EdsSectionHeading, HTMLEdsSectionHeadingElement>('eds-section-heading');
+export const EdsSocialNetworks = /*@__PURE__*/createReactComponent<JSX.EdsSocialNetworks, HTMLEdsSocialNetworksElement>('eds-social-networks');
+export const EdsTable = /*@__PURE__*/createReactComponent<JSX.EdsTable, HTMLEdsTableElement>('eds-table');
+export const EdsTabs = /*@__PURE__*/createReactComponent<JSX.EdsTabs, HTMLEdsTabsElement>('eds-tabs');
+export const EdsTag = /*@__PURE__*/createReactComponent<JSX.EdsTag, HTMLEdsTagElement>('eds-tag');
+export const EdsToast = /*@__PURE__*/createReactComponent<JSX.EdsToast, HTMLEdsToastElement>('eds-toast');
+export const EdsToastManager = /*@__PURE__*/createReactComponent<JSX.EdsToastManager, HTMLEdsToastManagerElement>('eds-toast-manager');
+export const EdsTooltip = /*@__PURE__*/createReactComponent<JSX.EdsTooltip, HTMLEdsTooltipElement>('eds-tooltip');
+export const EdsUser = /*@__PURE__*/createReactComponent<JSX.EdsUser, HTMLEdsUserElement>('eds-user');

package/src/generated/react-component-lib/attachProps.ts

@@ -0,0 +1,125 @@
+import { camelToDashCase } from './case';
+
+export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
+  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
+  if (node instanceof Element) {
+    // add any classes in className to the class list
+    const className = getClassName(node.classList, newProps, oldProps);
+    if (className !== '') {
+      node.className = className;
+    }
+
+    Object.keys(newProps).forEach((name) => {
+      if (
+        name === 'children' ||
+        name === 'style' ||
+        name === 'ref' ||
+        name === 'class' ||
+        name === 'className' ||
+        name === 'forwardedRef'
+      ) {
+        return;
+      }
+      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+        const eventName = name.substring(2);
+        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+
+        if (!isCoveredByReact(eventNameLc)) {
+          syncEvent(node, eventNameLc, newProps[name]);
+        }
+      } else {
+        (node as any)[name] = newProps[name];
+        const propType = typeof newProps[name];
+        if (propType === 'string') {
+          node.setAttribute(camelToDashCase(name), newProps[name]);
+        }
+      }
+    });
+  }
+};
+
+export const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {
+  const newClassProp: string = newProps.className || newProps.class;
+  const oldClassProp: string = oldProps.className || oldProps.class;
+  // map the classes to Maps for performance
+  const currentClasses = arrayToMap(classList);
+  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
+  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
+  const finalClassNames: string[] = [];
+  // loop through each of the current classes on the component
+  // to see if it should be a part of the classNames added
+  currentClasses.forEach((currentClass) => {
+    if (incomingPropClasses.has(currentClass)) {
+      // add it as its already included in classnames coming in from newProps
+      finalClassNames.push(currentClass);
+      incomingPropClasses.delete(currentClass);
+    } else if (!oldPropClasses.has(currentClass)) {
+      // add it as it has NOT been removed by user
+      finalClassNames.push(currentClass);
+    }
+  });
+  incomingPropClasses.forEach((s) => finalClassNames.push(s));
+  return finalClassNames.join(' ');
+};
+
+/**
+ * Transforms a React event name to a browser event name.
+ */
+export const transformReactEventName = (eventNameSuffix: string) => {
+  switch (eventNameSuffix) {
+    case 'doubleclick':
+      return 'dblclick';
+  }
+  return eventNameSuffix;
+};
+
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+export const isCoveredByReact = (eventNameSuffix: string) => {
+  if (typeof document === 'undefined') {
+    return true;
+  } else {
+    const eventName = 'on' + transformReactEventName(eventNameSuffix);
+    let isSupported = eventName in document;
+
+    if (!isSupported) {
+      const element = document.createElement('div');
+      element.setAttribute(eventName, 'return;');
+      isSupported = typeof (element as any)[eventName] === 'function';
+    }
+
+    return isSupported;
+  }
+};
+
+export const syncEvent = (
+  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },
+  eventName: string,
+  newEventHandler?: (e: Event) => any
+) => {
+  const eventStore = node.__events || (node.__events = {});
+  const oldEventHandler = eventStore[eventName];
+
+  // Remove old listener so they don't double up.
+  if (oldEventHandler) {
+    node.removeEventListener(eventName, oldEventHandler);
+  }
+
+  // Bind new listener.
+  node.addEventListener(
+    eventName,
+    (eventStore[eventName] = function handler(e: Event) {
+      if (newEventHandler) {
+        newEventHandler.call(this, e);
+      }
+    })
+  );
+};
+
+const arrayToMap = (arr: string[] | DOMTokenList) => {
+  const map = new Map<string, string>();
+  (arr as string[]).forEach((s: string) => map.set(s, s));
+  return map;
+};

package/src/generated/react-component-lib/case.ts

@@ -0,0 +1,7 @@
+export const dashToPascalCase = (str: string) =>
+  str
+    .toLowerCase()
+    .split('-')
+    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join('');
+export const camelToDashCase = (str: string) => str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);

package/src/generated/react-component-lib/createComponent.tsx

@@ -0,0 +1,106 @@
+import React, { createElement } from 'react';
+
+import { attachProps, camelToDashCase, createForwardRef, dashToPascalCase, isCoveredByReact, mergeRefs } from './utils';
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+}
+
+interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
+  forwardedRef: React.RefObject<ElementType>;
+  ref?: React.Ref<any>;
+}
+
+export const createReactComponent = <
+  PropType,
+  ElementType extends HTMLStencilElement,
+  ContextStateType = {},
+  ExpandedPropsTypes = {}
+>(
+  tagName: string,
+  ReactComponentContext?: React.Context<ContextStateType>,
+  manipulatePropsFunction?: (
+    originalProps: StencilReactInternalProps<ElementType>,
+    propsToPass: any
+  ) => ExpandedPropsTypes,
+  defineCustomElement?: () => void
+) => {
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
+
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {
+    componentEl!: ElementType;
+
+    setComponentElRef = (element: ElementType) => {
+      this.componentEl = element;
+    };
+
+    constructor(props: StencilReactInternalProps<ElementType>) {
+      super(props);
+    }
+
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+    }
+
+    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {
+      attachProps(this.componentEl, this.props, prevProps);
+    }
+
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+
+      let propsToPass = Object.keys(cProps).reduce((acc: any, name) => {
+        const value = (cProps as any)[name];
+
+        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2).toLowerCase();
+          if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
+            acc[name] = value;
+          }
+        } else {
+          // we should only render strings, booleans, and numbers as attrs in html.
+          // objects, functions, arrays etc get synced via properties on mount.
+          const type = typeof value;
+
+          if (type === 'string' || type === 'boolean' || type === 'number') {
+            acc[camelToDashCase(name)] = value;
+          }
+        }
+        return acc;
+      }, {} as ExpandedPropsTypes);
+
+      if (manipulatePropsFunction) {
+        propsToPass = manipulatePropsFunction(this.props, propsToPass);
+      }
+
+      const newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {
+        ...propsToPass,
+        ref: mergeRefs(forwardedRef, this.setComponentElRef),
+        style,
+      };
+
+      /**
+       * We use createElement here instead of
+       * React.createElement to work around a
+       * bug in Vite (https://github.com/vitejs/vite/issues/6104).
+       * React.createElement causes all elements to be rendered
+       * as <tagname> instead of the actual Web Component.
+       */
+      return createElement(tagName, newProps, children);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+  };
+
+  // If context was passed to createReactComponent then conditionally add it to the Component Class
+  if (ReactComponentContext) {
+    ReactComponent.contextType = ReactComponentContext;
+  }
+
+  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
+};

package/src/generated/react-component-lib/createOverlayComponent.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { OverlayEventDetail } from './interfaces';
+import { StencilReactForwardedRef, attachProps, dashToPascalCase, defineCustomElement, setRef } from './utils';
+
+interface OverlayElement extends HTMLElement {
+  present: () => Promise<void>;
+  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+
+export interface ReactOverlayProps {
+  children?: React.ReactNode;
+  isOpen: boolean;
+  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+
+export const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(
+  tagName: string,
+  controller: { create: (options: any) => Promise<OverlayType> },
+  customElement?: any
+) => {
+  defineCustomElement(tagName, customElement);
+
+  const displayName = dashToPascalCase(tagName);
+  const didDismissEventName = `on${displayName}DidDismiss`;
+  const didPresentEventName = `on${displayName}DidPresent`;
+  const willDismissEventName = `on${displayName}WillDismiss`;
+  const willPresentEventName = `on${displayName}WillPresent`;
+
+  type Props = OverlayComponent &
+    ReactOverlayProps & {
+      forwardedRef?: StencilReactForwardedRef<OverlayType>;
+    };
+
+  let isDismissing = false;
+
+  class Overlay extends React.Component<Props> {
+    overlay?: OverlayType;
+    el!: HTMLDivElement;
+
+    constructor(props: Props) {
+      super(props);
+      if (typeof document !== 'undefined') {
+        this.el = document.createElement('div');
+      }
+      this.handleDismiss = this.handleDismiss.bind(this);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+
+    componentDidMount() {
+      if (this.props.isOpen) {
+        this.present();
+      }
+    }
+
+    componentWillUnmount() {
+      if (this.overlay) {
+        this.overlay.dismiss();
+      }
+    }
+
+    handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {
+      if (this.props.onDidDismiss) {
+        this.props.onDidDismiss(event);
+      }
+      setRef(this.props.forwardedRef, null);
+    }
+
+    shouldComponentUpdate(nextProps: Props) {
+      // Check if the overlay component is about to dismiss
+      if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+        isDismissing = true;
+      }
+
+      return true;
+    }
+
+    async componentDidUpdate(prevProps: Props) {
+      if (this.overlay) {
+        attachProps(this.overlay, this.props, prevProps);
+      }
+
+      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+        this.present(prevProps);
+      }
+      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+        await this.overlay.dismiss();
+        isDismissing = false;
+
+        /**
+         * Now that the overlay is dismissed
+         * we need to render again so that any
+         * inner components will be unmounted
+         */
+        this.forceUpdate();
+      }
+    }
+
+    async present(prevProps?: Props) {
+      const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+      const elementProps = {
+        ...cProps,
+        ref: this.props.forwardedRef,
+        [didDismissEventName]: this.handleDismiss,
+        [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
+        [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+        [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),
+      };
+
+      this.overlay = await controller.create({
+        ...elementProps,
+        component: this.el,
+        componentProps: {},
+      });
+
+      setRef(this.props.forwardedRef, this.overlay);
+      attachProps(this.overlay, elementProps, prevProps);
+
+      await this.overlay.present();
+    }
+
+    render() {
+      /**
+       * Continue to render the component even when
+       * overlay is dismissing otherwise component
+       * will be hidden before animation is done.
+       */
+      return ReactDOM.createPortal(this.props.isOpen || isDismissing ? this.props.children : null, this.el);
+    }
+  }
+
+  return React.forwardRef<OverlayType, Props>((props, ref) => {
+    return <Overlay {...props} forwardedRef={ref} />;
+  });
+};

package/src/generated/react-component-lib/dev.ts

@@ -0,0 +1,14 @@
+export const isDevMode = () => {
+  return process && process.env && process.env.NODE_ENV === 'development';
+};
+
+const warnings: { [key: string]: boolean } = {};
+
+export const deprecationWarning = (key: string, message: string) => {
+  if (isDevMode()) {
+    if (!warnings[key]) {
+      console.warn(message);
+      warnings[key] = true;
+    }
+  }
+};

package/src/generated/react-component-lib/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import type { StyleReactProps } from '../interfaces';
+
+export type StencilReactExternalProps<PropType, ElementType> = PropType &
+  Omit<React.HTMLAttributes<ElementType>, 'style'> &
+  StyleReactProps;
+
+// This will be replaced with React.ForwardedRef when react-output-target is upgraded to React v17
+export type StencilReactForwardedRef<T> = ((instance: T | null) => void) | React.MutableRefObject<T | null> | null;
+
+export const setRef = (ref: StencilReactForwardedRef<any> | React.Ref<any> | undefined, value: any) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref != null) {
+    // Cast as a MutableRef so we can assign current
+    (ref as React.MutableRefObject<any>).current = value;
+  }
+};
+
+export const mergeRefs = (
+  ...refs: (StencilReactForwardedRef<any> | React.Ref<any> | undefined)[]
+): React.RefCallback<any> => {
+  return (value: any) => {
+    refs.forEach((ref) => {
+      setRef(ref, value);
+    });
+  };
+};
+
+export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
+  const forwardRef = (
+    props: StencilReactExternalProps<PropType, ElementType>,
+    ref: StencilReactForwardedRef<ElementType>
+  ) => {
+    return <ReactComponent {...props} forwardedRef={ref} />;
+  };
+  forwardRef.displayName = displayName;
+
+  return React.forwardRef(forwardRef);
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+};
+
+export * from './attachProps';
+export * from './case';