React 18 migration (#895)

* Migrate stories of Badge, Button, Checkbox and FormField to addon-controls * Migrate from themeprovider-storybook to @storybook/addon-styling * Deprecate SFC * List children prop explicitly in type definition * Run linter to fix format issue * Fix type error in PopOver * Migrate integration test demo to react 18 * Migrate to storybook v7 * Rename *.stories.mdx files to *.mdx * Migrate stories for SDK Components * Migrate stories for Providers and Hooks * Export components from their declaration statement to be able to populate ArgTypes Check this storybook issue: storybookjs/storybook#13304 (comment). * Migrate stories of Badge, Button, Checkbox and FormField to storybook v7 style * Migrate Radio UI Component * Upgrade styled-components to latest version * Migrate stories for icons * Upgrade Flex component story * Fix flex stack story * Migrate stories for several components * Migrate stories for more components * Migrate more stories for components * Migrate stories for reset components * Add copyright and changelog * Add react 18 support in peerDependencies * Fix broken links in the storybook * Fix unit tests * Re-generate package-lock.json to mitigate "... when your package.json and package-lock.json or npm-shrinkwrap.json are in sync" error --------- Co-authored-by: Venkatesh Devale <[email protected]> Co-authored-by: Kyu Simm <[email protected]>
aws · May 31, 2023 · 01bca2b · 01bca2b
1 parent 6d91a9a
commit 01bca2b
Show file tree

Hide file tree

Showing 414 changed files with 31,501 additions and 26,519 deletions.
diff --git a/.babelrc.json b/.babelrc.json
@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -28,32 +28,53 @@
     "plugin:prettier/recommended",
     "eslint:recommended",
     "plugin:react/recommended",
-    "prettier"
+    "prettier",
+    "plugin:storybook/recommended"
   ],
   "rules": {
     // Best Practices
     "no-var": "error",
-    "prefer-const" : "error",
+    "prefer-const": "error",
     "no-eval": "error",
-    "max-len": ["error", { "code": 120 }],
-    "semi": ["error", "always"],
-    "eqeqeq": ["error", "always"],
-    "indent": ["error", 2, { "SwitchCase": 1 }],
+    "max-len": [
+      "error",
+      {
+        "code": 120
+      }
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "eqeqeq": [
+      "error",
+      "always"
+    ],
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
     "simple-import-sort/imports": "error",
-
     // Stylistic Issues
     "no-trailing-spaces": "error",
     "brace-style": "error",
-    "spaced-comment": ["error", "always"],
-    "eol-last": ["error", "always"],
-
+    "spaced-comment": [
+      "error",
+      "always"
+    ],
+    "eol-last": [
+      "error",
+      "always"
+    ],
     // React
     "react/prop-types": "off",
     "react/display-name": "off",
     "react/react-in-jsx-scope": "off",
     "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
     "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
-
     //TypeScript
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-empty-function": "off",
@@ -83,4 +104,4 @@
       }
     ]
   }
-}
+}
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yaml b/.github/ISSUE_TEMPLATE/bug-report.yaml
@@ -23,8 +23,6 @@ body:
         required: true
       - label: README [page](https://github.com/aws/amazon-chime-sdk-component-library-react#readme)
         required: true
-      - label: How-to [documentation](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/story/how-tos--page)
-        required: true
       - label: React SDK meeting [demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting#readme---react-meeting-demo)
         required: true
   - type: textarea

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  stories: ['../src/**/*.@(stories.tsx|mdx)'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false,
+      },
+    },
+    '@storybook/addon-storysource',
+    '@storybook/addon-styling',
+    '@storybook/addon-a11y',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+    // Storybook 7 appends "--page" to the URL of auto-generated documentation.
+    // By default, Storybook uses the "Docs" name that would break all our existing links.
+    defaultName: 'Page',
+  },
+};
+export default config;
diff --git a/.storybook/main.tsx b/.storybook/main.tsx
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,34 @@
+import { ThemeProvider } from 'styled-components';
+import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+
+import { GlobalStyles } from '../src/theme/GlobalStyles';
+import lightTheme from '../src/theme/light';
+import darkTheme from '../src/theme/dark';
+
+export const decorators = [
+  withThemeFromJSXProvider({
+    themes: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+    defaultTheme: 'light',
+    Provider: ThemeProvider,
+    GlobalStyles: GlobalStyles,
+  }),
+];
+
+export const argTypes = {
+  tag: { table: { disable: true } },
+  id: { table: { disable: true } },
+  className: { table: { disable: true } },
+  css: { table: { disable: true } },
+  testId: { table: { disable: true } },
+  viewBox: { table: { disable: true } },
+  height: { table: { disable: true } },
+  title: { table: { disable: true } },
+  children: { table: { disable: true } },
+};
+
+export const parameters = {
+  layout: 'centered',
+};
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - `startAudioInputDevice`, `startVideoInputDevice`, and `setupDeviceLabelTrigger` of `MeetingManager` now throw errors with the original error `name` returned by the `getUserMedia` call. See details in [issue #888](https://github.com/aws/amazon-chime-sdk-component-library-react/issues/888).
+- Migrate SDK to react 18 based.
+- Migrate storybook to v7.
+- Migrate stories to ArgTypes based.
+- Add support for react 18.
 
 ### Fixed