Skip to content

Commit 5dd4bb1

Browse files
joshblackjoshblack
authored
feat(project): update project to use React 18 (#2661)
* chore(project): add script to set react version * chore: add ci check for test and type-check * chore: update workflow syntax * chore: update install step * chore: add fail-fast option * chore: add types packages to set-react-version * refactor(project): update TypeScript definitions for React 18 * chore: update slots types * chore: add ts-ignore for package that needs to be updated for react 18 * chore: add changeset * chore: update ActionMenu story to use React.createElement * chore: update unused import * test(ThemeProvider): update test to use userEvents * test(helpers): add TextEncoder for useMedia * test(MarkdownEditor): update tests for MarkdownEditor * test: update TextInputWithTokens test * test(MarkdownEditor): enable skipped tests * chore: add spy for console.error() in test * chore: add globals for react version * chore: remove storybook-addon-html * chore: update storybook deps * chore: remove conditional install step from ci.yml * Revert "chore: remove conditional install step from ci.yml" This reverts commit c5778d8. * feat(project): update to React 18 for development * ci: update install step to use 18 by default * chore: update lockfile * chore: update eslint to warn on useSSRSafeId * feat(project): add useId hook * feat(project): update useSSRSafeId to useId * chore: disable eslint violations * test: map useId() to useSSRSafeId() in test * test(storybook): update interaction tests for UnderlineNav * chore: add changeset * fix(PageHeader): add PropsWithChildren to ParentLinkProps * chore: update workflow file * chore(eslint): remove inferred type annotation Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
1 parent db0db6e commit 5dd4bb1

44 files changed

Lines changed: 26953 additions & 29203 deletions

Some content is hidden

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

‎.changeset/eight-peas-tan.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Update to React.useId() when using React 18

‎.changeset/strong-dolls-divide.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Update types for components to work for React 17 and 18

‎.eslintrc.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,19 @@
104104
{
105105
"ts-ignore": "allow-with-description"
106106
}
107+
],
108+
"no-restricted-imports": [
109+
"error",
110+
{
111+
"paths": [
112+
{
113+
"name": "@react-aria/ssr",
114+
"importNames": ["useSSRSafeId"],
115+
"message": "Please use the `useId` hook from `src/hooks/useId.ts` instead"
116+
}
117+
],
118+
"patterns": []
119+
}
107120
]
108121
}
109122
},

‎.github/workflows/ci.yml‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ jobs:
2828
run: npm run lint
2929

3030
test:
31+
strategy:
32+
fail-fast: false
33+
matrix:
34+
react: [17, 18]
3135
runs-on: ubuntu-latest
3236
steps:
3337
- name: Checkout repository
@@ -38,16 +42,30 @@ jobs:
3842
with:
3943
node-version: 16
4044

45+
- name: Set React version
46+
run: node script/set-react-version.js ${{ matrix.react }}
47+
48+
- name: Install dependencies
49+
if: ${{ matrix.react == 17 }}
50+
run: npm install --legacy-peer-deps
51+
4152
- name: Install dependencies
53+
if: ${{ matrix.react == 18 }}
4254
run: npm ci
4355

4456
- name: Build
4557
run: npm run build
4658

4759
- name: Test
4860
run: npm run test -- --coverage
61+
env:
62+
REACT_VERSION_17: ${{ matrix.react == 17 }}
4963

5064
type-check:
65+
strategy:
66+
fail-fast: false
67+
matrix:
68+
react: [17, 18]
5169
runs-on: ubuntu-latest
5270
steps:
5371
- name: Checkout repository
@@ -58,7 +76,15 @@ jobs:
5876
with:
5977
node-version: 16
6078

79+
- name: Set React version
80+
run: node script/set-react-version.js ${{ matrix.react }}
81+
82+
- name: Install dependencies
83+
if: ${{ matrix.react == 17 }}
84+
run: npm install --legacy-peer-deps
85+
6186
- name: Install dependencies
87+
if: ${{ matrix.react != 17 }}
6288
run: npm ci
6389

6490
- name: Type check

‎.storybook/main.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,26 @@ module.exports = {
1212
{
1313
name: 'storybook-addon-turbo-build',
1414
options: {
15-
optimizationLevel: 2
16-
}
15+
optimizationLevel: 2,
16+
},
1717
},
18-
...(process.env.NODE_ENV === 'production' && process.env.GITHUB_JOB !== 'chromatic'
19-
? ['@whitespace/storybook-addon-html']
20-
: [])
2118
],
2219
core: {
2320
builder: {
2421
name: 'webpack5',
2522
options: {
26-
fsCache: true
27-
}
28-
}
23+
fsCache: true,
24+
},
25+
},
2926
},
3027
features: {
3128
interactionsDebugger: true,
3229
storyStoreV7: true,
33-
buildStoriesJson: true
30+
buildStoriesJson: true,
3431
},
3532
framework: '@storybook/react',
3633
reactOptions: {
3734
fastRefresh: true,
38-
strictMode: true
39-
}
35+
strictMode: true,
36+
},
4037
}

‎jest.config.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
/* eslint-disable github/unescaped-html-literal */
2+
3+
'use strict'
4+
5+
const {REACT_VERSION_17} = process.env
6+
7+
/**
8+
* @type {import('jest').Config}
9+
*/
210
module.exports = {
11+
globals: {
12+
REACT_VERSION_LATEST: REACT_VERSION_17 ? REACT_VERSION_17 !== 'true' : true,
13+
REACT_VERSION_17: REACT_VERSION_17 === 'true',
14+
},
315
testEnvironment: 'jsdom',
416
cacheDirectory: '.test',
517
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**', '!**/*.stories.{js,jsx,ts,tsx}'],

0 commit comments

Comments
 (0)