feat(web-components): add React wrapper (#4678)

Adds React wrapper generator (`createReactCustomElementType`), based on
one in `carbon-web-components` to `@carbon/ibmdotcom-web-components`
codebase.

It helps our adoptors using React to use our components, with the
following support that React itself lacks for non-intrinsic elements:

* Element attributes mapping to non-string element property values
  (e.g. Boolean attributes)
* React props mapping to element properties instead of element
  attributes
* Event handlers

Also adds a Babel plugin that automatically creates React wrappers of
our components from our components' `@property()` annotations, as well
as the corresponding build process that generates the React wrappers to
`es/components-react` directory. So in the most typical scenario, our
users can use components in `es/components-react` directory in the same
manner as regular React components.

Also adds React stories so we can demonstrate the React integration.

Refs #4251.

Author: asudoh

.yarn/offline-mirror/@rollup-plugin-node-resolve-8.4.0.tgz

@@ -53,7 +53,7 @@
     "babel-eslint": "^10.1.0",
     "browserslist-config-carbon": "^10.3.0",
     "carbon-components": "10.17.0",
-    "carbon-web-components": "1.9.0",
+    "carbon-web-components": "1.10.0",
     "chalk": "^4.1.0",
     "commander": "^4.1.0",
     "cross-env": "^5.2.0",

.yarn/offline-mirror/@rollup-pluginutils-3.1.0.tgz

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import cx from 'classnames';
 import React, { Component } from 'react';
 import './_container.scss';
 import { settings } from 'carbon-components';
@@ -37,11 +38,14 @@ export default class Container extends Component {
   }
 
   render() {
-    const { story } = this.props;
+    const { parameters, story } = this.props;
+    const classes = cx({
+      'storybook-proxy-story': parameters.proxy,
+    });
 
     return (
       <React.StrictMode>
-        <div data-floating-menu-container="" role="main">
+        <div data-floating-menu-container="" role="main" className={classes}>
           {story()}
         </div>
         <input

.yarn/offline-mirror/@types-resolve-1.17.1.tgz

@@ -67,6 +67,10 @@ div[role='main'] {
   width: 100%;
 }
 
+.storybook-proxy-story {
+  padding: 1rem;
+}
+
 // hide the cookie button
 #teconsent {
   visibility: hidden;

.yarn/offline-mirror/carbon-web-components-1.9.0.tgz .yarn/offline-mirror/carbon-web-components-1.10.0.tgz

@@ -94,7 +94,9 @@ addDecorator((story, { parameters }) => {
   return story();
 });
 
-addDecorator(story => <Container story={story} />);
+addDecorator((story, { parameters }) => (
+  <Container story={story} parameters={parameters} />
+));
 
 addons.getChannel().on(CURRENT_THEME, theme => {
   document.documentElement.setAttribute(

.yarn/offline-mirror/deep-freeze-0.0.1.tgz

@@ -86,6 +86,7 @@
     "@percy/agent": "^0.26.0",
     "@percy/puppeteer": "^1.0.0",
     "@percy/storybook": "^3.3.0",
+    "@rollup/plugin-node-resolve": "^8.4.0",
     "@storybook/addon-a11y": "^5.3.0",
     "@storybook/addon-actions": "^5.3.0",
     "@storybook/addon-docs": "^5.3.0",
@@ -176,7 +177,6 @@
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-resolve": "^4.2.3",
     "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-scss": "^2.5.0",
     "rollup-plugin-sizes": "^0.5.0",

.yarn/offline-mirror/estree-walker-1.0.1.tgz

@@ -12,7 +12,7 @@ const Table = require('cli-table');
 const gzip = require('gzip-size');
 
 const commonjs = require('rollup-plugin-commonjs');
-const resolve = require('rollup-plugin-node-resolve');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const builtins = require('rollup-plugin-node-builtins');
 const babel = require('rollup-plugin-babel');
 const scss = require('rollup-plugin-scss');
@@ -73,7 +73,7 @@ process.env.BABEL_ENV = 'es';
 module.exports = {
   input: 'src/index.js',
   plugins: [
-    resolve({
+    nodeResolve({
       browser: true,
       mainFields: ['jsnext', 'module', 'main'],
     }),