Skip to content

Commit f48211e

Browse files
PixeledCodekrisantrobusnkrantz
authored
Upgrade paste to react 19 (#4258)
* feat(core): update react version to 19 * feat(core): address TS errors * feat(core): update yarn lock * feat(core): update button tests * feat(core): format * feat(core): import JSX type * feat(core): format * feat(core): update type docs * feat(website): update to next 15 * feat(core): update package json of website * feat(core): run codemod * feat(core): update emotion * feat(core): replace ReactChild with ReactNode * feat(core): fix api path * feat(core): replace css with style * React 19 intersection (#4262) * feat(website): replace react-visibility-sensor with react-intersection-observer * feat(website): fix build * feat(core): fix biome * feat(core): fix tests * feat(core): fix styling * feat(core): update typedocs * feat(website): fix build * feat(button): fix reset button * feat(core): remove react 16 tests * feat(core): update doc * feat(core): update yarn file for tests * feat(core): update testing-library for react 18 tests * feat(core): update yarn file * feat(core): update importd * feat(storybook): working stories (#4265) * feat(storybook): working stories * feat(pr): polish for review * feat(ci): vix inherited versions for CI * fix(theme): fix broken storybook * fix(types): add correct types for react 19 codemod changes (#4266) * fix(types): add correct types for react 19 codemod changes * feat(progress-bar): add interval type --------- Co-authored-by: PixeledCode <[email protected]> * feat(core): remove react 16 from peer dependencies * feat(core): add changeset * Update changeset Co-authored-by: Nora Krantz <[email protected]> * feat(core): update changeset --------- Co-authored-by: krisantrobus <[email protected]> Co-authored-by: Nora Krantz <[email protected]>
1 parent c2c36b8 commit f48211e

File tree

502 files changed

+47281
-12722
lines changed

Some content is hidden

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

502 files changed

+47281
-12722
lines changed

‎.changeset/forty-planes-approve.md

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
---
2+
"@twilio-paste/account-switcher": major
3+
"@twilio-paste/ai-chat-log": major
4+
"@twilio-paste/alert": major
5+
"@twilio-paste/alert-dialog": major
6+
"@twilio-paste/anchor": major
7+
"@twilio-paste/avatar": major
8+
"@twilio-paste/badge": major
9+
"@twilio-paste/base-radio-checkbox": major
10+
"@twilio-paste/blockquote": major
11+
"@twilio-paste/breadcrumb": major
12+
"@twilio-paste/button": major
13+
"@twilio-paste/button-group": major
14+
"@twilio-paste/callout": major
15+
"@twilio-paste/card": major
16+
"@twilio-paste/chart-provider": major
17+
"@twilio-paste/chat-composer": major
18+
"@twilio-paste/chat-log": major
19+
"@twilio-paste/checkbox": major
20+
"@twilio-paste/code-block": major
21+
"@twilio-paste/combobox": major
22+
"@twilio-paste/corner-ornament": major
23+
"@twilio-paste/data-grid": major
24+
"@twilio-paste/date-picker": major
25+
"@twilio-paste/description-list": major
26+
"@twilio-paste/detail-text": major
27+
"@twilio-paste/disclosure": major
28+
"@twilio-paste/display-heading": major
29+
"@twilio-paste/display-pill-group": major
30+
"@twilio-paste/editable-code-block": major
31+
"@twilio-paste/example-text": major
32+
"@twilio-paste/file-picker": major
33+
"@twilio-paste/file-uploader": major
34+
"@twilio-paste/form": major
35+
"@twilio-paste/form-pill-group": major
36+
"@twilio-paste/heading": major
37+
"@twilio-paste/help-text": major
38+
"@twilio-paste/in-page-navigation": major
39+
"@twilio-paste/inline-code": major
40+
"@twilio-paste/inline-control-group": major
41+
"@twilio-paste/input": major
42+
"@twilio-paste/input-box": major
43+
"@twilio-paste/keyboard-key": major
44+
"@twilio-paste/label": major
45+
"@twilio-paste/list": major
46+
"@twilio-paste/menu": major
47+
"@twilio-paste/meter": major
48+
"@twilio-paste/minimizable-dialog": major
49+
"@twilio-paste/modal": major
50+
"@twilio-paste/page-header": major
51+
"@twilio-paste/pagination": major
52+
"@twilio-paste/paragraph": major
53+
"@twilio-paste/popover": major
54+
"@twilio-paste/product-switcher": major
55+
"@twilio-paste/progress-bar": major
56+
"@twilio-paste/progress-steps": major
57+
"@twilio-paste/radio-button-group": major
58+
"@twilio-paste/radio-group": major
59+
"@twilio-paste/screen-reader-only": major
60+
"@twilio-paste/select": major
61+
"@twilio-paste/separator": major
62+
"@twilio-paste/side-modal": major
63+
"@twilio-paste/side-panel": major
64+
"@twilio-paste/sidebar": major
65+
"@twilio-paste/skeleton-loader": major
66+
"@twilio-paste/slider": major
67+
"@twilio-paste/spinner": major
68+
"@twilio-paste/status": major
69+
"@twilio-paste/summary-detail": major
70+
"@twilio-paste/switch": major
71+
"@twilio-paste/table": major
72+
"@twilio-paste/tabs": major
73+
"@twilio-paste/textarea": major
74+
"@twilio-paste/time-picker": major
75+
"@twilio-paste/timeline": major
76+
"@twilio-paste/toast": major
77+
"@twilio-paste/tooltip": major
78+
"@twilio-paste/topbar": major
79+
"@twilio-paste/truncate": major
80+
"@twilio-paste/user-dialog": major
81+
"@twilio-paste/visual-picker": major
82+
"@twilio-paste/core": major
83+
"@twilio-paste/aspect-ratio": major
84+
"@twilio-paste/flex": major
85+
"@twilio-paste/grid": major
86+
"@twilio-paste/media-object": major
87+
"@twilio-paste/stack": major
88+
"@twilio-paste/box": major
89+
"@twilio-paste/combobox-primitive": major
90+
"@twilio-paste/disclosure-primitive": major
91+
"@twilio-paste/listbox-primitive": major
92+
"@twilio-paste/menu-primitive": major
93+
"@twilio-paste/modal-dialog-primitive": major
94+
"@twilio-paste/non-modal-dialog-primitive": major
95+
"@twilio-paste/sibling-box": major
96+
"@twilio-paste/tabs-primitive": major
97+
"@twilio-paste/text": major
98+
"@twilio-paste/tooltip-primitive": major
99+
"@twilio-paste/customization": major
100+
"@twilio-paste/icons": major
101+
"@twilio-paste/animation-library": major
102+
"@twilio-paste/clipboard-copy-library": major
103+
"@twilio-paste/code-editor-library": major
104+
"@twilio-paste/data-visualization-library": major
105+
"@twilio-paste/dropdown-library": major
106+
"@twilio-paste/lexical-library": major
107+
"@twilio-paste/react-spectrum-library": major
108+
"@twilio-paste/react-textarea-autosize-library": major
109+
"@twilio-paste/reakit-library": major
110+
"@twilio-paste/styling-library": major
111+
"@twilio-paste/syntax-highlighter-library": major
112+
"@twilio-paste/uid-library": major
113+
"@twilio-paste/style-props": major
114+
"@twilio-paste/theme": major
115+
"@twilio-paste/types": major
116+
"@twilio-paste/utils": major
117+
"@twilio-paste/token-contrast-checker": major
118+
---
119+
120+
[all packages]: Upgrade to React 19 and drop support for React 16. Paste only supports the three latest versions of React. If you're using Paste in a React 17, 18, or 19 app, you should be able to upgrade with full backwards compatibility. If you experience any issues, please let us know on Github.

‎.danger/__fixtures__/mock_package/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
"@twilio-paste/design-tokens": "^8.0.0",
1212
"@twilio-paste/styling-library": "^1.0.0",
1313
"@twilio-paste/types": "^3.1.1",
14-
"react": "^16.8.6 || ^17.0.2",
15-
"react-dom": "^16.8.6 || ^17.0.2"
14+
"react": "^17.0.2",
15+
"react-dom": "^17.0.2"
1616
},
1717
"devDependencies": {
1818
"@twilio-paste/animation-library": "^0.3.7",

‎.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ module.exports = {
55
parserOptions: {
66
project: "./tsconfig.json",
77
},
8-
plugins: ["eslint-comments", "jest", "unicorn", "promise", "@emotion/eslint-plugin", "paste-internal"],
8+
plugins: ["eslint-comments", "jest", "unicorn", "promise", "@emotion/eslint-plugin", "paste-internal", "storybook"],
99
extends: [
1010
"twilio-react",
1111
"twilio-ts",

‎.github/workflows/on_pull_request.yml

+16-17
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ jobs:
113113
run: yarn lint
114114

115115
tests:
116-
name: Test repository using React 18
116+
name: Test repository using React 19
117117
runs-on: ubuntu-latest
118118
steps:
119119
- name: Checkout Repo
@@ -162,8 +162,8 @@ jobs:
162162
- name: Run tests
163163
run: yarn test
164164

165-
react17_tests:
166-
name: Test repository using React 17
165+
react18_tests:
166+
name: Test repository using React 18
167167
runs-on: ubuntu-latest
168168
env:
169169
NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
@@ -202,19 +202,18 @@ jobs:
202202
- name: Build packages
203203
run: yarn build
204204

205-
- name: Install React 17
205+
- name: Install React 18
206206
run: |
207-
yarn add @types/react@^17.0.0 react@^17.0.2 react-dom@^17.0.2
208-
yarn set resolution react@npm:^18.0.0 ^17.0.2
209-
yarn set resolution @types/react@npm:^18.0.0 ^17.0.31
210-
yarn set resolution react-dom@npm:^18.0.0 ^17.0.2
211-
yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4
207+
yarn add @types/react@^18.0.27 react@^18.0.0 react-dom@^18.0.0
208+
yarn set resolution react@npm:^19.0.0 ^18.0.0
209+
yarn set resolution @types/react@npm:^19.0.0 ^18.0.27
210+
yarn set resolution react-dom@npm:^19.0.0 ^18.0.0
212211
213212
- name: Run tests
214213
run: yarn test
215214

216-
react16_tests:
217-
name: Test repository using React 16
215+
react17_tests:
216+
name: Test repository using React 17
218217
runs-on: ubuntu-latest
219218
env:
220219
NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
@@ -253,13 +252,13 @@ jobs:
253252
- name: Build packages
254253
run: yarn build
255254

256-
- name: Install React 16
255+
- name: Install React 17
257256
run: |
258-
yarn add @types/react@^16.0.0 react@^16.8.6 react-dom@^16.8.6
259-
yarn set resolution react@npm:^18.0.0 ^16.8.6
260-
yarn set resolution @types/react@npm:^18.0.0 ^16.0.0
261-
yarn set resolution react-dom@npm:^18.0.0 ^16.8.6
262-
yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4
257+
yarn add @types/react@^17.0.0 react@^17.0.2 react-dom@^17.0.2
258+
yarn set resolution react@npm:^19.0.0 ^17.0.2
259+
yarn set resolution @types/react@npm:^19.0.0 ^17.0.31
260+
yarn set resolution react-dom@npm:^19.0.0 ^17.0.2
261+
yarn set resolution @testing-library/react@npm:^16.2.0 ^12.1.4
263262
264263
- name: Run tests
265264
run: yarn test

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,4 +99,4 @@ cypress/downloads
9999
out
100100
.vscode-test
101101

102-
.nx/cache
102+
.nx

‎.storybook/addons/google-analytics/register.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
const { addons } = require("@storybook/addons");
1+
const { addons } = require("@storybook/manager-api");
2+
23
const isChromatic = require("chromatic/isChromatic").default;
34
const { STORY_ERRORED, STORY_MISSING, STORY_RENDERED } = require("@storybook/core-events");
45
const ReactGA = require("react-ga");

‎.storybook/main.ts

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import path from "path";
22
import type { StorybookConfig } from "@storybook/react-vite";
33
import { mergeConfig } from "vite";
44
import turbosnap from "vite-plugin-turbosnap";
5+
56
const config: StorybookConfig = {
67
stories: [
78
"../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
@@ -22,7 +23,9 @@ const config: StorybookConfig = {
2223
typescript: {
2324
// enable type checking
2425
check: true,
26+
reactDocgen: "react-docgen-typescript",
2527
},
28+
2629
async viteFinal(config, { configType }) {
2730
const isTest = process.env.NODE_ENV === "test";
2831
return mergeConfig(config, {
@@ -57,5 +60,9 @@ const config: StorybookConfig = {
5760
},
5861
});
5962
},
63+
64+
docs: {
65+
autodocs: false,
66+
},
6067
};
6168
export default config;

‎.storybook/preview.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,6 @@ export const decorators = [
281281

282282
export const parameters = {
283283
isTestEnvironment,
284-
actions: { argTypesRegex: "^on[A-Z].*" },
285284
viewport: {
286285
viewports: INITIAL_VIEWPORTS,
287286
},

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ When a package has a peer dependency on another internal package in the mono rep
8888
{
8989
"name": "button",
9090
"peerDependencies": {
91-
"react": "^16.8.6",
92-
"react-dom": "^16.8.6"
91+
"react": "^17.0.2",
92+
"react-dom": "^17.0.2"
9393
"@twilio-paste/box": "^0.0.1",
9494
"@twilio-paste/theme": "^0.0.1",
9595
"@twilio-paste/design-tokens": "^0.0.1",

‎internal-docs/engineering/ci.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
- [Build system packages](#build-system-packages)
66
- [Type Check](#type-check)
77
- [Lint](#lint)
8+
- [Test React 18](#test-react-18)
89
- [Test React 17](#test-react-17)
9-
- [Test React 16](#test-react-16)
1010
- [Code formatting checks](#code-formatting-checks)
1111
- [Categorize the PR using labels](#categorize-the-pr-using-labels)
1212
- [Danger checks](#danger-checks)
@@ -47,13 +47,13 @@ This job downloads the build cache of the monorepo, and then runs the Typescript
4747

4848
This job downloads the build cache of the monorepo, and then runs ESLint.
4949

50-
### Test React 17
50+
### Test React 18
5151

52-
This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 17.
52+
This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 18.
5353

54-
### Test React 16
54+
### Test React 17
5555

56-
This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 16.
56+
This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 17.
5757

5858
### Code formatting checks
5959

‎package.json

+17-18
Original file line numberDiff line numberDiff line change
@@ -121,29 +121,28 @@
121121
"@octokit/graphql-schema": "^14.39.1",
122122
"@percy/cli": "^1.10.1",
123123
"@percy/cypress": "^3.1.2",
124-
"@storybook/addon-a11y": "7.6.4",
125-
"@storybook/addon-actions": "7.6.4",
126-
"@storybook/addon-essentials": "7.6.4",
127-
"@storybook/addon-interactions": "7.6.4",
128-
"@storybook/addon-links": "7.6.4",
129-
"@storybook/addons": "7.6.4",
130-
"@storybook/cli": "7.6.4",
131-
"@storybook/react": "7.6.4",
132-
"@storybook/react-vite": "7.6.4",
133-
"@storybook/test-runner": "0.16.0",
134-
"@storybook/testing-library": "0.2.2",
124+
"@storybook/addon-a11y": "^8.6.4",
125+
"@storybook/addon-actions": "^8.6.4",
126+
"@storybook/addon-essentials": "^8.6.4",
127+
"@storybook/addon-interactions": "^8.6.4",
128+
"@storybook/addon-links": "^8.6.4",
129+
"@storybook/cli": "^8.6.4",
130+
"@storybook/manager-api": "^8.6.4",
131+
"@storybook/react": "^8.6.4",
132+
"@storybook/react-vite": "^8.6.4",
133+
"@storybook/test-runner": "^0.22.0",
135134
"@swc/core": "^1.2.160",
136135
"@swc/jest": "^0.2.20",
137136
"@testing-library/jest-dom": "^5.16.5",
138-
"@testing-library/react": "^13.4.0",
137+
"@testing-library/react": "^16.2.0",
139138
"@testing-library/react-hooks": "^8.0.1",
140139
"@testing-library/user-event": "^13.5.0",
141140
"@twilio-labs/svg-to-react": "^2.1.1",
142141
"@types/browser-sync": "^2.26.3",
143142
"@types/color": "^3.0.0",
144143
"@types/jest": "^24.0.18",
145144
"@types/node": "^20.0.0",
146-
"@types/react": "^18.0.27",
145+
"@types/react": "^19.0.8",
147146
"@types/react-color": "^3.0.6",
148147
"@types/react-github-button": "^0.1.1",
149148
"@types/react-helmet": "^6.1.6",
@@ -176,14 +175,14 @@
176175
"eslint-config-twilio-ts": "2.0.0",
177176
"eslint-plugin-cypress": "2.12.1",
178177
"eslint-plugin-eslint-comments": "3.2.0",
179-
"eslint-plugin-import": "2.26.0",
178+
"eslint-plugin-import": "2.27.2",
180179
"eslint-plugin-jest": "26.1.3",
181180
"eslint-plugin-jsx-a11y": "6.5.1",
182181
"eslint-plugin-prettier": "4.2.1",
183182
"eslint-plugin-promise": "6.0.0",
184183
"eslint-plugin-react": "7.29.4",
185184
"eslint-plugin-react-hooks": "4.4.0",
186-
"eslint-plugin-storybook": "^0.6.15",
185+
"eslint-plugin-storybook": "0.8.0",
187186
"eslint-plugin-unicorn": "40.1.0",
188187
"evergreen-ui": "^7.0.0",
189188
"git-branch-is": "^3.0.0",
@@ -205,15 +204,15 @@
205204
"plop": "^3.0.0",
206205
"precise-commits": "^1.0.2",
207206
"prettier": "^2.8.1",
208-
"react": "^18.0.0",
209-
"react-dom": "^18.0.0",
207+
"react": "^19.0.0",
208+
"react-dom": "^19.0.0",
210209
"react-ga": "^3.3.0",
211210
"react-helmet": "^6.1.0",
212211
"react-router-dom": "6.2.1",
213212
"search-in-file": "^1.2.2",
214213
"shelljs": "^0.8.5",
215214
"start-server-and-test": "^2.0.3",
216-
"storybook": "7.6.4",
215+
"storybook": "^8.6.4",
217216
"terser": "^5.14.2",
218217
"theo": "^8.1.5",
219218
"tslib": "^2.0.3",

0 commit comments

Comments
 (0)