Merge branch 'main' into dependabot/npm_and_yarn/integration/app/test…

…-demo/terser-5.15.0

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.eslintrc.json

@@ -20,37 +20,61 @@
     "react",
     "@typescript-eslint",
     "simple-import-sort",
-    "prettier"
+    "prettier",
+    "react-hooks"
   ],
   "extends": [
     "plugin:@typescript-eslint/eslint-recommended",
     "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",
@@ -80,4 +104,4 @@
       }
     ]
   }
-}
+}

.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

.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;

.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',
+};