Skip to content

Commit 3c89fd8

Browse files
Niznikrandreasonny83espipjadamb-92eyerean
authored
feat: add support for React 18 (#2965)
* build: add React18 Support (#2682) * build: add React18 Support Update packages dependencies to include React v18 * refactor: add PropsWithChildren pros Add React.PropsWithChildren for compatibility with React v18 * chore: update React version on missing packages * fix: added newer proptypes types (react 18) (#3) * refactor(yarn.lock): update yarn.lock file * chore: update eslint and React versions * chore: fixing eslint issues * WIP: Fix react fc typings (#5) * fix: un-needed React.FC typing with no children * fix: removing unknown from interface PropsWithChildren as not needed * fix: types on the rest of the files * fix(components): radio and button-group React18 fix * fix: update React app tests Co-authored-by: Pablo Espinosa <[email protected]> * chore: upgrade react-helmet types * [AIONAPFMWK-174]: refactor react-uid & React 18 useId (#2903) * chore: added useUIDSeed custom using React useId method (cherry picked from commit d39cdc9) * fix: update yarn.lock file * fix: react type version and include prop-type types (#2913) * chore: upgraded @react-spring (#2914) * fix: fix functionality of useUIDSeed and update tests (#2917) * [AIONAPFMWK-170] Types Fix (#2915) * chore: WIP updates on react 18 (#2868) * chore: upgrade emotion libs * chore: upgrade react-spring for animation lib This reverts commit 62d59e8. * chore: remove obsolete react imports * chore: remove more react imports * chore: fix types in TableOfContentsList (Scrollspy) * chore: disable eslint rule for react imports * chore: fix lint error * chore: auto-fix lint warnings * chore: removing un-used imports Co-authored-by: Eirini Pappa <[email protected]> Co-authored-by: Eirini Pappa <[email protected]> * fix: added back missing import (#2921) * chore: update Storybook to v7 and use Vite (#2895) (#2922) * chore: update to Storybook v7 * chore: remove old babel plugins * chore: update to use vite * fix: address build issue * refactor: use TypeScript for SB files * fix: gets builds to work * fix: disable Chromatic on gatsby stories * fix: mock gatsby exports * refactor: output generic tokens as esm * chore: add changeset * ci: bump memory * fix: remove barrel imports of prop-types * fix: chat-log story structure * chore: update changeset * chore: update storybook * docs: add comments * fix: get env vars properly in vite * fix: set profiling alias properly * chore: update changeset * chore: use separate changeset for tokens * chore: include mainFields * fix: only set mainFields for dev * chore: remove flag * fix: adjust test-storybook * fix: wait for SB to load * chore: delete empty package.json * fix: don't use mainFields for test-runner Co-authored-by: Robert Niznik <[email protected]> * fix: react 18 - fix reakit ssr issues with portals (#2926) * fix: reakit ssr issues with portals * chore: more detailed comments at top of reakti Portal file * chore: remove unecessary exports from reakit library * feat/react 18 fix tests for 16 and 17 (#2929) * fix: broken tests with jest * fix: update all '@testing-library/react-hooks' imports * build: create new test directory with util methods to help with jest tests * chore: linting update on test files * chore: empty commit to test pipelines * chore: re-introduce button tests * chore: minor update to test pipelines * fix: remove cache from pipelines * fix: async issues with tooltip tests * fix: additional async tests added for updated userEvent methods * chore: trigger pipelines with empty commit * fix: resolve remaining tests for react 18 * fix: re-introduce react import on paste-website files * fix: increase timeout on failing test * chore: split composable cell test into smaller tests * fix: address issues with user event and fix root.render errors * fix: react-dom tests * chore: fix test using reactUID * chore: add react 17 tests to github workflow * chore: update comments and create react-dom monkey patch * fix: fix broken tests from react dom patch * chore: update react-dom helper method for tests * chore: remove async from synchronous test * chore: linting updates on tests * feat: add react 18 as dependency on new components (#2941) * fix: add react 18 as dependency on new packages * fix: add disclaimer at top of yarn lock * chore: upgrade react and react-router-dom in cra template (#2944) * chore: ignore tsx check on react imports marked as unused (#2945) * fix: AIONAPFMWK-171: fix Hydration issues SSR on Paste Remix (#2933) * fix: betaBadge to show modal on useEffect, fixes hydration problem * fix: storybook quiet mode script introduced here #230 * fix: prevent select showing options server-side which leads to hydration issues * fix: using styled on Nextjs Link component (hydration issue) * revert: adam fix reakit Portal #2926 * fix: use @niznikr/reakit for portal fix * chore: update prettier format * fix: get gatsby to build * fix: update lockfile * fix: delete old changesets * fix: address dep issue * fix: update snapshot * fix: update comment style * fix: ignore lint issues for patches * chore: updates from rebase * chore: upgrade to next 13 to fix hydration errors * chore: fix date rendering * chore: add changeset * chore: add sharp * chore: fix dep pins * chore: remove resolution * chore: pin versions * chore: undo mock changes * chore: update lock * chore: update changeset * chore: update forked reakit * ci: wait for docsearch render * fix: correct copy button double render * ci: bump wait for double render * chore: update reakit to include popover render fix * chore: add changeset * chore: switch to twilio namespaced reakit fork * chore: new website image fix to be updated to next 13 * chore: update upgrade-guide.mdx * fix: missing props with children type conversion --------- Co-authored-by: Andrea Z <[email protected]> Co-authored-by: Pablo Espinosa <[email protected]> Co-authored-by: Andrea Z <[email protected]> Co-authored-by: adamb-92 <[email protected]> Co-authored-by: Eirini Pappa <[email protected]> Co-authored-by: Eirini Pappa <[email protected]> Co-authored-by: Si Taggart <[email protected]> Co-authored-by: TheSisb <[email protected]>
1 parent dbd9bf9 commit 3c89fd8

File tree

480 files changed

+2894
-2093
lines changed

Some content is hidden

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

480 files changed

+2894
-2093
lines changed

‎.changeset/lucky-years-doubt.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
'@twilio-paste/alert': major
3+
'@twilio-paste/alert-dialog': major
4+
'@twilio-paste/anchor': major
5+
'@twilio-paste/avatar': major
6+
'@twilio-paste/badge': major
7+
'@twilio-paste/base-radio-checkbox': major
8+
'@twilio-paste/breadcrumb': major
9+
'@twilio-paste/button': major
10+
'@twilio-paste/button-group': major
11+
'@twilio-paste/callout': major
12+
'@twilio-paste/card': major
13+
'@twilio-paste/chat-composer': major
14+
'@twilio-paste/chat-log': major
15+
'@twilio-paste/checkbox': major
16+
'@twilio-paste/code-block': major
17+
'@twilio-paste/combobox': major
18+
'@twilio-paste/data-grid': major
19+
'@twilio-paste/date-picker': major
20+
'@twilio-paste/description-list': major
21+
'@twilio-paste/detail-text': major
22+
'@twilio-paste/disclosure': major
23+
'@twilio-paste/display-heading': major
24+
'@twilio-paste/display-pill-group': major
25+
'@twilio-paste/file-picker': major
26+
'@twilio-paste/file-uploader': major
27+
'@twilio-paste/form': major
28+
'@twilio-paste/form-pill-group': major
29+
'@twilio-paste/heading': major
30+
'@twilio-paste/help-text': major
31+
'@twilio-paste/in-page-navigation': major
32+
'@twilio-paste/inline-code': major
33+
'@twilio-paste/inline-control-group': major
34+
'@twilio-paste/input': major
35+
'@twilio-paste/input-box': major
36+
'@twilio-paste/label': major
37+
'@twilio-paste/list': major
38+
'@twilio-paste/menu': major
39+
'@twilio-paste/minimizable-dialog': major
40+
'@twilio-paste/modal': major
41+
'@twilio-paste/pagination': major
42+
'@twilio-paste/paragraph': major
43+
'@twilio-paste/popover': major
44+
'@twilio-paste/radio-button-group': major
45+
'@twilio-paste/radio-group': major
46+
'@twilio-paste/screen-reader-only': major
47+
'@twilio-paste/select': major
48+
'@twilio-paste/separator': major
49+
'@twilio-paste/side-modal': major
50+
'@twilio-paste/skeleton-loader': major
51+
'@twilio-paste/spinner': major
52+
'@twilio-paste/switch': major
53+
'@twilio-paste/table': major
54+
'@twilio-paste/tabs': major
55+
'@twilio-paste/textarea': major
56+
'@twilio-paste/time-picker': major
57+
'@twilio-paste/toast': major
58+
'@twilio-paste/tooltip': major
59+
'@twilio-paste/truncate': major
60+
'@twilio-paste/core': major
61+
'@twilio-paste/aspect-ratio': major
62+
'@twilio-paste/flex': major
63+
'@twilio-paste/grid': major
64+
'@twilio-paste/media-object': major
65+
'@twilio-paste/stack': major
66+
'@twilio-paste/box': major
67+
'@twilio-paste/combobox-primitive': major
68+
'@twilio-paste/disclosure-primitive': major
69+
'@twilio-paste/listbox-primitive': major
70+
'@twilio-paste/menu-primitive': major
71+
'@twilio-paste/modal-dialog-primitive': major
72+
'@twilio-paste/non-modal-dialog-primitive': major
73+
'@twilio-paste/sibling-box': major
74+
'@twilio-paste/tabs-primitive': major
75+
'@twilio-paste/text': major
76+
'@twilio-paste/tooltip-primitive': major
77+
'@twilio-paste/cra-template': major
78+
'@twilio-paste/customization': major
79+
'@twilio-paste/icons': major
80+
'@twilio-paste/animation-library': major
81+
'@twilio-paste/clipboard-copy-library': major
82+
'@twilio-paste/data-visualization-library': major
83+
'@twilio-paste/dropdown-library': major
84+
'@twilio-paste/lexical-library': major
85+
'@twilio-paste/react-textarea-autosize-library': major
86+
'@twilio-paste/reakit-library': major
87+
'@twilio-paste/styling-library': major
88+
'@twilio-paste/syntax-highlighter-library': major
89+
'@twilio-paste/uid-library': major
90+
'@twilio-paste/style-props': major
91+
'@twilio-paste/theme': major
92+
'@twilio-paste/types': major
93+
'@twilio-paste/utils': major
94+
---
95+
96+
Add support for React 18

‎.changeset/modern-countries-beg.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@twilio-paste/select': patch
3+
'@twilio-paste/core': patch
4+
---
5+
6+
[Select] Render options after mounted

‎.changeset/tender-rules-pretend.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@twilio-paste/code-block': patch
3+
'@twilio-paste/core': patch
4+
---
5+
6+
[CodeBlock] Fix concurrent render of copy button tooltip

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ module.exports = {
210210
],
211211
settings: {
212212
react: {
213-
version: '17.0.2',
213+
version: 'detect',
214214
},
215215
},
216216
};

‎.github/workflows/on_pull_request.yml‎

Lines changed: 54 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ jobs:
156156
run: yarn lint
157157

158158
tests:
159-
name: Test repository using React 17
159+
name: Test repository using React 18
160160
needs: build
161161
runs-on: ubuntu-latest
162162
steps:
@@ -203,6 +203,54 @@ jobs:
203203
- name: Run tests
204204
run: yarn test
205205

206+
react17_tests:
207+
name: Test repository using React 17
208+
needs: build
209+
runs-on: ubuntu-latest
210+
steps:
211+
- name: Checkout Repo
212+
uses: actions/checkout@v2
213+
214+
- name: Setup Node.js 16.13
215+
uses: actions/setup-node@v3
216+
with:
217+
node-version: 16.13.x
218+
219+
- name: Get yarn cache directory path
220+
id: yarn-cache-dir-path
221+
run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
222+
223+
- name: Load Yarn cache
224+
uses: actions/cache@v3
225+
id: yarn_cache_id
226+
with:
227+
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
228+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
229+
restore-keys: |
230+
${{ runner.os }}-yarn
231+
232+
# Note: Yarn cache has been removed from the following step
233+
# since we need to change the React version installed
234+
- name: Install Dependencies
235+
run: yarn install --immutable
236+
237+
- name: Install React 17
238+
run: |
239+
yarn add @types/react@^17.0.0 react@^17.0.2 react-dom@^17.0.2
240+
yarn set resolution react@npm:^18.0.0 ^17.0.2
241+
yarn set resolution @types/react@npm:^18.0.0 ^17.0.31
242+
yarn set resolution react-dom@npm:^18.0.0 ^17.0.2
243+
yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4
244+
245+
- name: Download build artifacts
246+
uses: actions/download-artifact@v3
247+
with:
248+
name: compiled-js-and-types
249+
path: packages/
250+
251+
- name: Run tests
252+
run: yarn test
253+
206254
react16_tests:
207255
name: Test repository using React 16
208256
needs: build
@@ -229,17 +277,18 @@ jobs:
229277
restore-keys: |
230278
${{ runner.os }}-yarn
231279
232-
# Note: Yarn cahce has been removed from the following step
280+
# Note: Yarn cache has been removed from the following step
233281
# since we need to change the React version installed
234282
- name: Install Dependencies
235283
run: yarn install --immutable
236284

237285
- name: Install React 16
238286
run: |
239287
yarn add @types/react@^16.0.0 react@^16.8.6 react-dom@^16.8.6
240-
yarn set resolution react@npm:^17.0.2 ^16.8.6
241-
yarn set resolution @types/react@npm:^17.0.31 ^16.0.0
242-
yarn set resolution react-dom@npm:^17.0.2 ^16.8.6
288+
yarn set resolution react@npm:^18.0.0 ^16.8.6
289+
yarn set resolution @types/react@npm:^18.0.0 ^16.0.0
290+
yarn set resolution react-dom@npm:^18.0.0 ^16.8.6
291+
yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4
243292
244293
- name: Download build artifacts
245294
uses: actions/download-artifact@v3

‎.prettierrc‎

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

‎.prettierrc.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
printWidth: 120,
3+
trailingComma: 'es5',
4+
bracketSpacing: false,
5+
singleQuote: true,
6+
tabWidth: 2,
7+
overrides: [
8+
{
9+
files: '*.yml',
10+
options: {
11+
parser: 'yaml',
12+
singleQuote: false,
13+
},
14+
},
15+
],
16+
};

‎.storybook/next.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
22

3-
const Link: React.FC = ({children, ...props}) => <a {...props}>{children}</a>;
3+
const Link: React.FC<React.PropsWithChildren> = ({children, ...props}) => <a {...props}>{children}</a>;
44

55
export default Link;

‎.vscode/component.code-snippets‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
" children: NonNullable<React.ReactNode>;",
4040
"}",
4141
"",
42-
"const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({children}) => {",
42+
"const ${1:ComponentName}: React.FC<React.PropsWithChildren<${1:ComponentName}Props>> = ({children}) => {",
4343
" return (",
4444
" ${2:<Box>{children\\}</Box>}",
4545
" );",
@@ -81,7 +81,7 @@
8181
"Paste React Function Component": {
8282
"prefix": "prfc",
8383
"body": [
84-
"export const ${1:ComponentName}: React.FC = ({children}) => {",
84+
"export const ${1:ComponentName}: React.FC<React.PropsWithChildren> = ({children}) => {",
8585
" return (",
8686
" ${2:<Box>{children\\}</Box>}",
8787
" );",

‎cypress/support/commands/parent-commands.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ Cypress.Commands.add('getInFixedContainer', (selector) => {
9898

9999
Cypress.Commands.add('visualRegressionTestUrl', ({url, testName}) => {
100100
cy.visit(url);
101-
cy.wait(1000);
101+
cy.wait(2000);
102102
cy.log('[VRT]: checking if VRT is enabled');
103103

104104
if (vrtIsEnabled()) {

0 commit comments

Comments
 (0)