Skip to content

Commit 01bca2b

Browse files
xuesichaodevalevenkateshsimmkyu
authored
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]>
1 parent 6d91a9a commit 01bca2b

File tree

414 files changed

+31501
-26519
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

414 files changed

+31501
-26519
lines changed

‎.babelrc.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"targets": {
8+
"chrome": 100
9+
}
10+
}
11+
],
12+
"@babel/preset-typescript",
13+
"@babel/preset-react"
14+
],
15+
"plugins": []
16+
}

‎.eslintrc.json

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,32 +28,53 @@
2828
"plugin:prettier/recommended",
2929
"eslint:recommended",
3030
"plugin:react/recommended",
31-
"prettier"
31+
"prettier",
32+
"plugin:storybook/recommended"
3233
],
3334
"rules": {
3435
// Best Practices
3536
"no-var": "error",
36-
"prefer-const" : "error",
37+
"prefer-const": "error",
3738
"no-eval": "error",
38-
"max-len": ["error", { "code": 120 }],
39-
"semi": ["error", "always"],
40-
"eqeqeq": ["error", "always"],
41-
"indent": ["error", 2, { "SwitchCase": 1 }],
39+
"max-len": [
40+
"error",
41+
{
42+
"code": 120
43+
}
44+
],
45+
"semi": [
46+
"error",
47+
"always"
48+
],
49+
"eqeqeq": [
50+
"error",
51+
"always"
52+
],
53+
"indent": [
54+
"error",
55+
2,
56+
{
57+
"SwitchCase": 1
58+
}
59+
],
4260
"simple-import-sort/imports": "error",
43-
4461
// Stylistic Issues
4562
"no-trailing-spaces": "error",
4663
"brace-style": "error",
47-
"spaced-comment": ["error", "always"],
48-
"eol-last": ["error", "always"],
49-
64+
"spaced-comment": [
65+
"error",
66+
"always"
67+
],
68+
"eol-last": [
69+
"error",
70+
"always"
71+
],
5072
// React
5173
"react/prop-types": "off",
5274
"react/display-name": "off",
5375
"react/react-in-jsx-scope": "off",
5476
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
5577
"react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
56-
5778
//TypeScript
5879
"@typescript-eslint/ban-ts-comment": "off",
5980
"@typescript-eslint/no-empty-function": "off",
@@ -83,4 +104,4 @@
83104
}
84105
]
85106
}
86-
}
107+
}

‎.github/ISSUE_TEMPLATE/bug-report.yaml

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ body:
2323
required: true
2424
- label: README [page](https://github.com/aws/amazon-chime-sdk-component-library-react#readme)
2525
required: true
26-
- label: How-to [documentation](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/story/how-tos--page)
27-
required: true
2826
- label: React SDK meeting [demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting#readme---react-meeting-demo)
2927
required: true
3028
- type: textarea

‎.storybook/main.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { StorybookConfig } from '@storybook/react-webpack5';
2+
3+
const config: StorybookConfig = {
4+
typescript: {
5+
check: false,
6+
checkOptions: {},
7+
reactDocgen: 'react-docgen-typescript',
8+
reactDocgenTypescriptOptions: {
9+
shouldExtractLiteralValuesFromEnum: true,
10+
propFilter: (prop) =>
11+
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
12+
},
13+
},
14+
stories: ['../src/**/*.@(stories.tsx|mdx)'],
15+
addons: [
16+
{
17+
name: '@storybook/addon-essentials',
18+
options: {
19+
actions: false,
20+
},
21+
},
22+
'@storybook/addon-storysource',
23+
'@storybook/addon-styling',
24+
'@storybook/addon-a11y',
25+
],
26+
framework: {
27+
name: '@storybook/react-webpack5',
28+
options: {},
29+
},
30+
docs: {
31+
autodocs: true,
32+
// Storybook 7 appends "--page" to the URL of auto-generated documentation.
33+
// By default, Storybook uses the "Docs" name that would break all our existing links.
34+
defaultName: 'Page',
35+
},
36+
};
37+
export default config;

‎.storybook/main.tsx

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎.storybook/preview.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { ThemeProvider } from 'styled-components';
2+
import { withThemeFromJSXProvider } from '@storybook/addon-styling';
3+
4+
import { GlobalStyles } from '../src/theme/GlobalStyles';
5+
import lightTheme from '../src/theme/light';
6+
import darkTheme from '../src/theme/dark';
7+
8+
export const decorators = [
9+
withThemeFromJSXProvider({
10+
themes: {
11+
light: lightTheme,
12+
dark: darkTheme,
13+
},
14+
defaultTheme: 'light',
15+
Provider: ThemeProvider,
16+
GlobalStyles: GlobalStyles,
17+
}),
18+
];
19+
20+
export const argTypes = {
21+
tag: { table: { disable: true } },
22+
id: { table: { disable: true } },
23+
className: { table: { disable: true } },
24+
css: { table: { disable: true } },
25+
testId: { table: { disable: true } },
26+
viewBox: { table: { disable: true } },
27+
height: { table: { disable: true } },
28+
title: { table: { disable: true } },
29+
children: { table: { disable: true } },
30+
};
31+
32+
export const parameters = {
33+
layout: 'centered',
34+
};

‎.storybook/preview.tsx

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎.storybook/webpack.config.js

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1818
### Changed
1919

2020
- `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).
21+
- Migrate SDK to react 18 based.
22+
- Migrate storybook to v7.
23+
- Migrate stories to ArgTypes based.
24+
- Add support for react 18.
2125

2226
### Fixed
2327

0 commit comments

Comments
 (0)