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]>

.changeset/lucky-years-doubt.md

@@ -0,0 +1,96 @@
+---
+'@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/breadcrumb': major
+'@twilio-paste/button': major
+'@twilio-paste/button-group': major
+'@twilio-paste/callout': major
+'@twilio-paste/card': 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/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/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/label': major
+'@twilio-paste/list': major
+'@twilio-paste/menu': major
+'@twilio-paste/minimizable-dialog': major
+'@twilio-paste/modal': major
+'@twilio-paste/pagination': major
+'@twilio-paste/paragraph': major
+'@twilio-paste/popover': 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/skeleton-loader': major
+'@twilio-paste/spinner': major
+'@twilio-paste/switch': major
+'@twilio-paste/table': major
+'@twilio-paste/tabs': major
+'@twilio-paste/textarea': major
+'@twilio-paste/time-picker': major
+'@twilio-paste/toast': major
+'@twilio-paste/tooltip': major
+'@twilio-paste/truncate': 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/cra-template': major
+'@twilio-paste/customization': major
+'@twilio-paste/icons': major
+'@twilio-paste/animation-library': major
+'@twilio-paste/clipboard-copy-library': major
+'@twilio-paste/data-visualization-library': major
+'@twilio-paste/dropdown-library': major
+'@twilio-paste/lexical-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
+---
+
+Add support for React 18

.changeset/modern-countries-beg.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/select': patch
+'@twilio-paste/core': patch
+---
+
+[Select] Render options after mounted

.changeset/tender-rules-pretend.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/code-block': patch
+'@twilio-paste/core': patch
+---
+
+[CodeBlock] Fix concurrent render of copy button tooltip

.eslintrc.js

@@ -210,7 +210,7 @@ module.exports = {
   ],
   settings: {
     react: {
-      version: '17.0.2',
+      version: 'detect',
     },
   },
 };

.github/workflows/on_pull_request.yml

@@ -156,7 +156,7 @@ jobs:
         run: yarn lint
 
   tests:
-    name: Test repository using React 17
+    name: Test repository using React 18
     needs: build
     runs-on: ubuntu-latest
     steps:
@@ -203,6 +203,54 @@ jobs:
       - name: Run tests
         run: yarn test
 
+  react17_tests:
+    name: Test repository using React 17
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 16.13
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.13.x
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - name: Load Yarn cache
+        uses: actions/cache@v3
+        id: yarn_cache_id
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn
+
+      # Note: Yarn cache has been removed from the following step
+      # since we need to change the React version installed
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Install React 17
+        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
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: compiled-js-and-types
+          path: packages/
+
+      - name: Run tests
+        run: yarn test
+
   react16_tests:
     name: Test repository using React 16
     needs: build
@@ -229,17 +277,18 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn
 
-      # Note: Yarn cahce has been removed from the following step
+      # Note: Yarn cache has been removed from the following step
       # since we need to change the React version installed
       - name: Install Dependencies
         run: yarn install --immutable
 
       - name: Install React 16
         run: |
           yarn add @types/react@^16.0.0 react@^16.8.6 react-dom@^16.8.6
-          yarn set resolution react@npm:^17.0.2 ^16.8.6
-          yarn set resolution @types/react@npm:^17.0.31 ^16.0.0
-          yarn set resolution react-dom@npm:^17.0.2 ^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
 
       - name: Download build artifacts
         uses: actions/download-artifact@v3

.prettierrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  printWidth: 120,
+  trailingComma: 'es5',
+  bracketSpacing: false,
+  singleQuote: true,
+  tabWidth: 2,
+  overrides: [
+    {
+      files: '*.yml',
+      options: {
+        parser: 'yaml',
+        singleQuote: false,
+      },
+    },
+  ],
+};

.storybook/next.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
 
-const Link: React.FC = ({children, ...props}) => <a {...props}>{children}</a>;
+const Link: React.FC<React.PropsWithChildren> = ({children, ...props}) => <a {...props}>{children}</a>;
 
 export default Link;

.vscode/component.code-snippets

@@ -39,7 +39,7 @@
       "  children: NonNullable<React.ReactNode>;",
       "}",
       "",
-      "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({children}) => {",
+      "const ${1:ComponentName}: React.FC<React.PropsWithChildren<${1:ComponentName}Props>> = ({children}) => {",
       "  return (",
       "    ${2:<Box>{children\\}</Box>}",
       "  );",
@@ -81,7 +81,7 @@
   "Paste React Function Component": {
     "prefix": "prfc",
     "body": [
-      "export const ${1:ComponentName}: React.FC = ({children}) => {",
+      "export const ${1:ComponentName}: React.FC<React.PropsWithChildren> = ({children}) => {",
       "  return (",
       "    ${2:<Box>{children\\}</Box>}",
       "  );",

cypress/support/commands/parent-commands.ts

@@ -98,7 +98,7 @@ Cypress.Commands.add('getInFixedContainer', (selector) => {
 
 Cypress.Commands.add('visualRegressionTestUrl', ({url, testName}) => {
   cy.visit(url);
-  cy.wait(1000);
+  cy.wait(2000);
   cy.log('[VRT]: checking if VRT is enabled');
 
   if (vrtIsEnabled()) {

internal-docs/engineering/doc-site/images.md

@@ -3,7 +3,7 @@
 Use Next's [next/image](https://nextjs.org/docs/api-reference/next/image) component to render statically imported images:
 
 ```tsx
-import Image from 'next/future/image';
+import Image from 'next/image';
 import AwaitingData from '../../assets/images/patterns/empty-awaiting-data.png';
 
 export const AwaitingDataImage: React.FC = () => {

jest.config.js

@@ -12,6 +12,8 @@ module.exports = {
     '<rootDir>/cypress/',
     '<rootDir>/packages/paste-cra-template/',
     '<rootDir>/apps/',
+    '<rootDir>/packages/(?:.+?)/.next/',
+    '<rootDir>/packages/(?:.+?)/.netlify/',
   ],
   cacheDirectory: '.jest-cache',
   coverageDirectory: '.jest-coverage',
@@ -30,7 +32,19 @@ module.exports = {
       statements: 100,
     },
   },
-  moduleNameMapper: {'\\.css$': 'identity-obj-proxy'},
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy',
+    // monkey-patch introduced for @testing-library/user-event to improve asynchronous test readability
+    // taken from this github issue: https://github.com/testing-library/user-event/issues/938#issuecomment-1111976312
+    '^@testing-library/user-event$': '<rootDir>/tools/test/act-user-event.ts',
+    '^@testing-library/real-user-event$': require.resolve('@testing-library/user-event'),
+    // monkey-patch to help with @testing-library/reat-hooks being deprecated
+    // the render hook method is being exported from @testing-library/react in later versions
+    '^@testing-library/react$': '<rootDir>/tools/test/react-testing-library.ts',
+    '^@testing-library/real-react$': require.resolve('@testing-library/react'),
+    // helper method to handle the changes in the react-dom api for react 18
+    '^testing-tools/react-dom-create-root$': '<rootDir>/tools/test/react-dom-create-root.ts',
+  },
   transformIgnorePatterns: ['node_modules/'],
   transform: {
     '^.+\\.(js|jsx|ts|tsx)?$': '@swc/jest',

package.json

@@ -42,7 +42,7 @@
     "start": "yarn prestart && yarn build:tokens && concurrently \"yarn:start:tokens\" \"yarn:start:storybook\"",
     "start:all": "yarn build:tokens && concurrently \"yarn:start:tokens\" \"yarn:start:storybook:quiet\" \"yarn:start:website\"",
     "start:storybook": "sb dev -p 9001",
-    "start:storybook:quiet": "export DROP_PROGRESS=TRUE && yarn start:storybook",
+    "start:storybook:quiet": "yarn start:storybook --quiet",
     "start:tokens": "yarn workspace @twilio-paste/design-tokens build:watch",
     "start:website": "yarn workspace @twilio-paste/website netlify dev",
     "start:theme-designer": "yarn workspace @twilio-paste/theme-designer netlify dev",
@@ -139,19 +139,20 @@
     "@storybook/testing-library": "0.0.13",
     "@swc/core": "^1.2.160",
     "@swc/jest": "^0.2.20",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.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.1",
     "@types/color": "^3.0.0",
     "@types/jest": "^24.0.18",
     "@types/node": "^18.11.13",
-    "@types/react": "^17.0.31",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "18.0.27",
     "@types/react-color": "^3.0.6",
     "@types/react-github-button": "^0.1.1",
-    "@types/react-helmet": "^5.0.14",
+    "@types/react-helmet": "^6.1.6",
     "@types/react-scrollspy": "^3.3.1",
     "@types/shelljs": "^0.8.11",
     "@types/theo": "^8.1.3",
@@ -209,8 +210,8 @@
     "prettier": "^2.8.1",
     "prop-types": "^15.7.2",
     "puppeteer-core": "^10.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "6.2.1",
@@ -231,8 +232,7 @@
   },
   "resolutions": {
     "csstype": "3.0.11",
-    "playwright": "1.28.1",
-    "@types/react": "^17.0.31"
+    "playwright": "1.28.1"
   },
   "husky": {
     "hooks": {

packages/paste-core/components/alert-dialog/package.json

@@ -47,8 +47,8 @@
     "@twilio-paste/types": "^3.1.1",
     "@twilio-paste/uid-library": "^0.2.1",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6 || ^17.0.2",
-    "react-dom": "^16.8.6 || ^17.0.2"
+    "react": "^16.8.6 || ^17.0.2 || ^18.0.0",
+    "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
     "@twilio-paste/anchor": "^9.0.0",
@@ -73,7 +73,7 @@
     "@twilio-paste/types": "^3.1.9",
     "@twilio-paste/uid-library": "^0.2.6",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }