chore(react): remove react wrappers (#11502)

* chore(react): remove react wrapper

* chore(deps): remove uneeded deps

* fix(react): remove more react stuff

packages/carbon-web-components/.eslintrc.js

@@ -57,56 +57,12 @@ module.exports = {
         'no-undef': 0,
       },
     },
-    {
-      files: ['**/*.tsx', '**/components-react/**/*-container.ts'],
-      parser: '@typescript-eslint/parser',
-      plugins: ['@typescript-eslint', 'react'],
-      rules: {
-        'no-unused-vars': 0,
-        // TODO: See why the ESLint plugin does not work with `.tsx`
-        '@carbon/react-prop-type-comments/require-proptype-comment': 0,
-        '@typescript-eslint/no-unused-vars': 2,
-        // 'import/no-unresolved': [
-        //   2,
-        //   {
-        //     ignore: ['^./'],
-        //   },
-        // ],
-        'jsdoc/require-param-type': 0,
-        'jsdoc/require-returns-type': 0,
-        'react/jsx-uses-react': 2,
-        'react/jsx-uses-vars': 2,
-      },
-    },
     {
       files: ['**/defs.ts'],
       rules: {
         'import/prefer-default-export': 0,
       },
     },
-    {
-      files: ['**/*.stories.react.tsx'],
-      parser: '@typescript-eslint/parser',
-      plugins: ['@typescript-eslint', 'react'],
-      rules: {
-        'no-unused-vars': 0,
-        '@typescript-eslint/no-unused-vars': 2,
-        // 'import/no-extraneous-dependencies': 0,
-        // 'import/no-unresolved': [
-        //   2,
-        //   {
-        //     ignore: [
-        //       '^carbon-web-components/es/(components-react|icons)/',
-        //       '^@carbon/ibmdotcom-web-components/es/(components-react|icons)/',
-        //       '/components-react/',
-        //     ],
-        //   },
-        // ],
-        'react/jsx-uses-react': 2,
-        'react/jsx-uses-vars': 2,
-        'react/prop-types': 0,
-      },
-    },
     {
       files: ['examples/codesandbox/**/*.js', 'examples/codesandbox/**/*.ts'],
       parserOptions: {
@@ -128,14 +84,6 @@ module.exports = {
         // 'import/no-unresolved': 0,
       },
     },
-    {
-      files: ['examples/codesandbox/{react,form/redux-form}/**/*.js'],
-      plugins: ['react'],
-      rules: {
-        'react/jsx-uses-react': 2,
-        'react/jsx-uses-vars': 2,
-      },
-    },
     {
       files: [
         'examples/codesandbox/**/*.config.js',

packages/carbon-web-components/README.md

@@ -260,15 +260,9 @@ same manner as native HTML tags, for example:
 
 ## JavaScript framework support
 
-In addition to the available Web Component versions of Carbon components, this
-library also supports usage with JavaScript frameworks like Angular, React, and
-Vue if the desire is to use instead of the pure framework versions of Carbon
-components. Specifically for React, this library comes with a wrapper
-implementation around the Carbon Web Components for more seamless integration
-with your React application.
-
-This is achievable since Web Components is the modern browser standard, and
-works well with other front-end frameworks that exist in the application. In
+This package can also be used within other JavaScript frameworks such as Angular and
+Vue. This is achievable since web components are the modern browser standard, and
+work well with other front-end frameworks that exist in the application. In
 turn, this also comes with the benefits of encapsulation within the Shadow DOM:
 
 ### Angular
@@ -306,48 +300,6 @@ application can use those `.d.ts` files:
   as follows:
   `window.__importDefault = mod => (mod?.__esModule ? mod : { default: mod })`
 
-### React
-
-[![Edit carbon-web-components with React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/react)
-
-You can use wrapper React components in
-`@carbon/web-components/es/components-react` generated
-[automatically from the custom elements](./src/globals/wrappers/createReactCustomElementType.ts)
-which allows you to use our components seamlessly in your React code. Here's an
-example:
-
-```javascript
-import React from 'react';
-import { render } from 'react-dom';
-import CDSDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
-import CDSDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
-
-const App = () => (
-  <CDSDropdown triggerContent="Select an item">
-    <CDSDropdownItem value="all">Option 1</CDSDropdownItem>
-    <CDSDropdownItem value="cloudFoundry">Option 2</CDSDropdownItem>
-    <CDSDropdownItem value="staging">Option 3</CDSDropdownItem>
-    <CDSDropdownItem value="dea">Option 4</CDSDropdownItem>
-    <CDSDropdownItem value="router">Option 5</CDSDropdownItem>
-  </CDSDropdown>
-);
-
-render(<App />, document.getElementById('root'));
-```
-
-Note: Using the React wrapper requires an additional dependency,
-[`prop-types`](https://www.npmjs.com/package/prop-types).
-
-To run the wrapper React components in SSR environment requires Node `12.16.3`
-or above that supports
-["conditional mapping" feature](https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping):
-
-[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/react-ssr)
-
-Same Node version requirement applies to Next.js:
-
-[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/next)
-
 ### Vue
 
 [![Edit carbon-web-components with Vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/vue)

packages/carbon-web-components/docs/form.md

@@ -26,38 +26,3 @@ button.addEventListener('click', () => {
 ```
 
 [![Edit carbon-web-components with formdata event](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/form/basic)
-
-## Redux Form
-
-You can use our form components with Redux Form by creating a React component that wraps our form components:
-
-```javascript
-import { Field } from 'redux-form';
-import CDSFormItem from '@carbon/web-components/es/components-react/form/form-item';
-import CDSTextInput from '@carbon/web-components/es/components-react/text-input/text-input';
-
-...
-
-// A React component that wraps form components from `@carbon/web-components`
-const FieldImpl = ({ input, label, type, meta: { touched, error } }) => {
-  const validityMessage = !touched ? undefined : error;
-  return (
-    <CDSFormItem>
-      <CDSTextInput
-        {...input}
-        invalid={Boolean(validityMessage)}
-        label-text={label}
-        type={type}
-        placeholder={label}
-        validityMessage={validityMessage}
-      />
-    </CDSFormItem>
-  );
-};
-
-...
-
-<Field name="username" type="text" component={FieldImpl} label="Username" />
-```
-
-[![Edit carbon-web-components with Redux Form](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/feat/cwc-v2/examples/codesandbox/form/redux-form)

packages/carbon-web-components/docs/form.mdx

@@ -34,7 +34,3 @@ button.addEventListener('click', () => {
   style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
   title="carbon-web-components-getting-started"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
-
-## Framework-specific approaches of form participation
-
-- [Redux form](https://web-components.carbondesignsystem.com/react/?path=/story/introduction-form-paticipation--page)

packages/carbon-web-components/docs/welcome.mdx

@@ -111,16 +111,10 @@ An alternative to using a bundler are CDN artifacts which can be added client si
 
 ### JavaScript framework integration
 
-In addition to the available Web Component versions of Carbon components, this
-library also supports usage with JavaScript frameworks like Angular, React,
-and Vue if the desire is to use instead of the pure framework versions of
-Carbon components. Specifically for React, this library comes with a wrapper
-implementation around the Carbon Web Components for more seamless integration
-with your React application.
-
-This is achievable since Web Components is the modern browser standard, and
-works well with other front-end frameworks that exist in the application. In
-turn, this also comes with the benefits of encapsulation within the Shadow DOM.
+This package can also be used within other JavaScript frameworks such as Angular and
+Vue. This is achievable since web components are the modern browser standard, and
+work well with other front-end frameworks that exist in the application. In
+turn, this also comes with the benefits of encapsulation within the Shadow DOM:
 
 ### Other usage guides
 

packages/carbon-web-components/gulp-tasks/build/modules.js

@@ -11,9 +11,6 @@ const gulp = require('gulp');
 require('./modules/css');
 require('./modules/icon-types');
 require('./modules/icons');
-require('./modules/react');
-require('./modules/react-defs');
-require('./modules/react-types');
 require('./modules/scripts');
 require('./modules/scripts-node');
 require('./modules/types');
@@ -24,9 +21,6 @@ gulp.task(
     gulp.task('build:modules:css'),
     gulp.task('build:modules:icon-types'),
     gulp.task('build:modules:icons'),
-    gulp.task('build:modules:react'),
-    gulp.task('build:modules:react-defs'),
-    gulp.task('build:modules:react-types'),
     gulp.task('build:modules:scripts'),
     gulp.task('build:modules:scripts-node'),
     gulp.task('build:modules:types')