Upgrade paste to react 19

.changeset/forty-planes-approve.md

@@ -0,0 +1,120 @@
+---
+"@twilio-paste/account-switcher": major
+"@twilio-paste/ai-chat-log": major
+"@twilio-paste/alert": major
+"@twilio-paste/alert-dialog": major
+"@twilio-paste/anchor": major
+"@twilio-paste/avatar": major
+"@twilio-paste/badge": major
+"@twilio-paste/base-radio-checkbox": major
+"@twilio-paste/blockquote": major
+"@twilio-paste/breadcrumb": major
+"@twilio-paste/button": major
+"@twilio-paste/button-group": major
+"@twilio-paste/callout": major
+"@twilio-paste/card": major
+"@twilio-paste/chart-provider": major
+"@twilio-paste/chat-composer": major
+"@twilio-paste/chat-log": major
+"@twilio-paste/checkbox": major
+"@twilio-paste/code-block": major
+"@twilio-paste/combobox": major
+"@twilio-paste/corner-ornament": major
+"@twilio-paste/data-grid": major
+"@twilio-paste/date-picker": major
+"@twilio-paste/description-list": major
+"@twilio-paste/detail-text": major
+"@twilio-paste/disclosure": major
+"@twilio-paste/display-heading": major
+"@twilio-paste/display-pill-group": major
+"@twilio-paste/editable-code-block": major
+"@twilio-paste/example-text": major
+"@twilio-paste/file-picker": major
+"@twilio-paste/file-uploader": major
+"@twilio-paste/form": major
+"@twilio-paste/form-pill-group": major
+"@twilio-paste/heading": major
+"@twilio-paste/help-text": major
+"@twilio-paste/in-page-navigation": major
+"@twilio-paste/inline-code": major
+"@twilio-paste/inline-control-group": major
+"@twilio-paste/input": major
+"@twilio-paste/input-box": major
+"@twilio-paste/keyboard-key": major
+"@twilio-paste/label": major
+"@twilio-paste/list": major
+"@twilio-paste/menu": major
+"@twilio-paste/meter": major
+"@twilio-paste/minimizable-dialog": major
+"@twilio-paste/modal": major
+"@twilio-paste/page-header": major
+"@twilio-paste/pagination": major
+"@twilio-paste/paragraph": major
+"@twilio-paste/popover": major
+"@twilio-paste/product-switcher": major
+"@twilio-paste/progress-bar": major
+"@twilio-paste/progress-steps": major
+"@twilio-paste/radio-button-group": major
+"@twilio-paste/radio-group": major
+"@twilio-paste/screen-reader-only": major
+"@twilio-paste/select": major
+"@twilio-paste/separator": major
+"@twilio-paste/side-modal": major
+"@twilio-paste/side-panel": major
+"@twilio-paste/sidebar": major
+"@twilio-paste/skeleton-loader": major
+"@twilio-paste/slider": major
+"@twilio-paste/spinner": major
+"@twilio-paste/status": major
+"@twilio-paste/summary-detail": major
+"@twilio-paste/switch": major
+"@twilio-paste/table": major
+"@twilio-paste/tabs": major
+"@twilio-paste/textarea": major
+"@twilio-paste/time-picker": major
+"@twilio-paste/timeline": major
+"@twilio-paste/toast": major
+"@twilio-paste/tooltip": major
+"@twilio-paste/topbar": major
+"@twilio-paste/truncate": major
+"@twilio-paste/user-dialog": major
+"@twilio-paste/visual-picker": major
+"@twilio-paste/core": major
+"@twilio-paste/aspect-ratio": major
+"@twilio-paste/flex": major
+"@twilio-paste/grid": major
+"@twilio-paste/media-object": major
+"@twilio-paste/stack": major
+"@twilio-paste/box": major
+"@twilio-paste/combobox-primitive": major
+"@twilio-paste/disclosure-primitive": major
+"@twilio-paste/listbox-primitive": major
+"@twilio-paste/menu-primitive": major
+"@twilio-paste/modal-dialog-primitive": major
+"@twilio-paste/non-modal-dialog-primitive": major
+"@twilio-paste/sibling-box": major
+"@twilio-paste/tabs-primitive": major
+"@twilio-paste/text": major
+"@twilio-paste/tooltip-primitive": major
+"@twilio-paste/customization": major
+"@twilio-paste/icons": major
+"@twilio-paste/animation-library": major
+"@twilio-paste/clipboard-copy-library": major
+"@twilio-paste/code-editor-library": major
+"@twilio-paste/data-visualization-library": major
+"@twilio-paste/dropdown-library": major
+"@twilio-paste/lexical-library": major
+"@twilio-paste/react-spectrum-library": major
+"@twilio-paste/react-textarea-autosize-library": major
+"@twilio-paste/reakit-library": major
+"@twilio-paste/styling-library": major
+"@twilio-paste/syntax-highlighter-library": major
+"@twilio-paste/uid-library": major
+"@twilio-paste/style-props": major
+"@twilio-paste/theme": major
+"@twilio-paste/types": major
+"@twilio-paste/utils": major
+"@twilio-paste/token-contrast-checker": major
+---
+
+[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

@@ -11,8 +11,8 @@
     "@twilio-paste/design-tokens": "^8.0.0",
     "@twilio-paste/styling-library": "^1.0.0",
     "@twilio-paste/types": "^3.1.1",
-    "react": "^16.8.6 || ^17.0.2",
-    "react-dom": "^16.8.6 || ^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@twilio-paste/animation-library": "^0.3.7",

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
   parserOptions: {
     project: "./tsconfig.json",
   },
-  plugins: ["eslint-comments", "jest", "unicorn", "promise", "@emotion/eslint-plugin", "paste-internal"],
+  plugins: ["eslint-comments", "jest", "unicorn", "promise", "@emotion/eslint-plugin", "paste-internal", "storybook"],
   extends: [
     "twilio-react",
     "twilio-ts",

.github/workflows/on_pull_request.yml

@@ -113,7 +113,7 @@ jobs:
         run: yarn lint
 
   tests:
-    name: Test repository using React 18
+    name: Test repository using React 19
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
@@ -162,8 +162,8 @@ jobs:
       - name: Run tests
         run: yarn test
 
-  react17_tests:
-    name: Test repository using React 17
+  react18_tests:
+    name: Test repository using React 18
     runs-on: ubuntu-latest
     env:
       NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
@@ -202,19 +202,18 @@ jobs:
       - name: Build packages
         run: yarn build
 
-      - name: Install React 17
+      - name: Install React 18
         run: |
-          yarn add @types/react@^17.0.0 react@^17.0.2 react-dom@^17.0.2
-          yarn set resolution react@npm:^18.0.0 ^17.0.2
-          yarn set resolution @types/react@npm:^18.0.0 ^17.0.31
-          yarn set resolution react-dom@npm:^18.0.0 ^17.0.2
-          yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4
+          yarn add @types/react@^18.0.27 react@^18.0.0 react-dom@^18.0.0
+          yarn set resolution react@npm:^19.0.0 ^18.0.0
+          yarn set resolution @types/react@npm:^19.0.0 ^18.0.27
+          yarn set resolution react-dom@npm:^19.0.0 ^18.0.0
 
       - name: Run tests
         run: yarn test
 
-  react16_tests:
-    name: Test repository using React 16
+  react17_tests:
+    name: Test repository using React 17
     runs-on: ubuntu-latest
     env:
       NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
@@ -253,13 +252,13 @@ jobs:
       - name: Build packages
         run: yarn build
 
-      - name: Install React 16
+      - name: Install React 17
         run: |
-          yarn add @types/react@^16.0.0 react@^16.8.6 react-dom@^16.8.6
-          yarn set resolution react@npm:^18.0.0 ^16.8.6
-          yarn set resolution @types/react@npm:^18.0.0 ^16.0.0
-          yarn set resolution react-dom@npm:^18.0.0 ^16.8.6
-          yarn set resolution @testing-library/react@npm:^13.4.0 ^12.1.4
+          yarn add @types/react@^17.0.0 react@^17.0.2 react-dom@^17.0.2
+          yarn set resolution react@npm:^19.0.0 ^17.0.2
+          yarn set resolution @types/react@npm:^19.0.0 ^17.0.31
+          yarn set resolution react-dom@npm:^19.0.0 ^17.0.2
+          yarn set resolution @testing-library/react@npm:^16.2.0 ^12.1.4
 
       - name: Run tests
         run: yarn test

.gitignore

@@ -99,4 +99,4 @@ cypress/downloads
 out
 .vscode-test
 
-.nx/cache
+.nx

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

@@ -1,4 +1,5 @@
-const { addons } = require("@storybook/addons");
+const { addons } = require("@storybook/manager-api");
+
 const isChromatic = require("chromatic/isChromatic").default;
 const { STORY_ERRORED, STORY_MISSING, STORY_RENDERED } = require("@storybook/core-events");
 const ReactGA = require("react-ga");

.storybook/main.ts

@@ -2,6 +2,7 @@ import path from "path";
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 import turbosnap from "vite-plugin-turbosnap";
+
 const config: StorybookConfig = {
   stories: [
     "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)",
@@ -22,7 +23,9 @@ const config: StorybookConfig = {
   typescript: {
     // enable type checking
     check: true,
+    reactDocgen: "react-docgen-typescript",
   },
+
   async viteFinal(config, { configType }) {
     const isTest = process.env.NODE_ENV === "test";
     return mergeConfig(config, {
@@ -57,5 +60,9 @@ const config: StorybookConfig = {
       },
     });
   },
+
+  docs: {
+    autodocs: false,
+  },
 };
 export default config;

.storybook/preview.tsx

@@ -281,7 +281,6 @@ export const decorators = [
 
 export const parameters = {
   isTestEnvironment,
-  actions: { argTypesRegex: "^on[A-Z].*" },
   viewport: {
     viewports: INITIAL_VIEWPORTS,
   },

README.md

@@ -88,8 +88,8 @@ When a package has a peer dependency on another internal package in the mono rep
 {
   "name": "button",
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
     "@twilio-paste/box": "^0.0.1",
     "@twilio-paste/theme": "^0.0.1",
     "@twilio-paste/design-tokens": "^0.0.1",

internal-docs/engineering/ci.md

@@ -5,8 +5,8 @@
     - [Build system packages](#build-system-packages)
     - [Type Check](#type-check)
     - [Lint](#lint)
+    - [Test React 18](#test-react-18)
     - [Test React 17](#test-react-17)
-    - [Test React 16](#test-react-16)
     - [Code formatting checks](#code-formatting-checks)
     - [Categorize the PR using labels](#categorize-the-pr-using-labels)
     - [Danger checks](#danger-checks)
@@ -47,13 +47,13 @@ This job downloads the build cache of the monorepo, and then runs the Typescript
 
 This job downloads the build cache of the monorepo, and then runs ESLint.
 
-### Test React 17
+### Test React 18
 
-This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 17.
+This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 18.
 
-### Test React 16
+### Test React 17
 
-This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 16.
+This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 17.
 
 ### Code formatting checks
 

package.json

@@ -121,29 +121,28 @@
     "@octokit/graphql-schema": "^14.39.1",
     "@percy/cli": "^1.10.1",
     "@percy/cypress": "^3.1.2",
-    "@storybook/addon-a11y": "7.6.4",
-    "@storybook/addon-actions": "7.6.4",
-    "@storybook/addon-essentials": "7.6.4",
-    "@storybook/addon-interactions": "7.6.4",
-    "@storybook/addon-links": "7.6.4",
-    "@storybook/addons": "7.6.4",
-    "@storybook/cli": "7.6.4",
-    "@storybook/react": "7.6.4",
-    "@storybook/react-vite": "7.6.4",
-    "@storybook/test-runner": "0.16.0",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/addon-a11y": "^8.6.4",
+    "@storybook/addon-actions": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/cli": "^8.6.4",
+    "@storybook/manager-api": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test-runner": "^0.22.0",
     "@swc/core": "^1.2.160",
     "@swc/jest": "^0.2.20",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@twilio-labs/svg-to-react": "^2.1.1",
     "@types/browser-sync": "^2.26.3",
     "@types/color": "^3.0.0",
     "@types/jest": "^24.0.18",
     "@types/node": "^20.0.0",
-    "@types/react": "^18.0.27",
+    "@types/react": "^19.0.8",
     "@types/react-color": "^3.0.6",
     "@types/react-github-button": "^0.1.1",
     "@types/react-helmet": "^6.1.6",
@@ -176,14 +175,14 @@
     "eslint-config-twilio-ts": "2.0.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.27.2",
     "eslint-plugin-jest": "26.1.3",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.4.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-unicorn": "40.1.0",
     "evergreen-ui": "^7.0.0",
     "git-branch-is": "^3.0.0",
@@ -205,15 +204,15 @@
     "plop": "^3.0.0",
     "precise-commits": "^1.0.2",
     "prettier": "^2.8.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "6.2.1",
     "search-in-file": "^1.2.2",
     "shelljs": "^0.8.5",
     "start-server-and-test": "^2.0.3",
-    "storybook": "7.6.4",
+    "storybook": "^8.6.4",
     "terser": "^5.14.2",
     "theo": "^8.1.5",
     "tslib": "^2.0.3",