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]>
twilio-labs · Nov 30, 2022 · d390325 · d390325
1 parent 026bf7f
commit d390325
Show file tree

Hide file tree

Showing 433 changed files with 3,003 additions and 2,623 deletions.
diff --git a/.danger/__fixtures__/mock_package/package.json b/.danger/__fixtures__/mock_package/package.json
@@ -11,17 +11,17 @@
     "@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": "^16.8.6 || ^17.0.2 || ^18.0.0",
+    "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
   },
   "devDependencies": {
     "@twilio-paste/animation-library": "^0.3.7",
     "@twilio-paste/color-contrast-utils": "^3.0.0",
     "@twilio-paste/design-tokens": "^8.0.0",
     "@twilio-paste/styling-library": "^1.0.2",
     "@twilio-paste/types": "^3.1.8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0"
   }
 }
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -217,7 +217,7 @@ module.exports = {
   ],
   settings: {
     react: {
-      version: '17.0.2',
+      version: 'detect',
     },
   },
 };
diff --git a/.github/workflows/on_pull_request.yml b/.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:

diff --git a/package.json b/package.json
@@ -122,32 +122,33 @@
     "@netlify/functions": "^0.7.2",
     "@percy/cli": "^1.10.1",
     "@percy/cypress": "^3.1.2",
-    "@storybook/addon-a11y": "6.4.20",
-    "@storybook/addon-actions": "6.4.20",
-    "@storybook/addon-essentials": "6.4.20",
-    "@storybook/addon-interactions": "6.4.20",
-    "@storybook/addon-links": "6.4.20",
-    "@storybook/addon-viewport": "6.4.20",
-    "@storybook/addons": "6.4.20",
-    "@storybook/builder-webpack5": "6.4.20",
-    "@storybook/core": "6.4.20",
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/addon-viewport": "^6.5.12",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/core": "^6.5.12",
     "@storybook/jest": "0.0.10",
-    "@storybook/manager-webpack5": "6.4.20",
-    "@storybook/react": "6.4.20",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@storybook/test-runner": "0.3.0",
     "@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/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
     "@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": "^17.0.33",
-    "@types/react": "^17.0.31",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.6",
     "@types/react-github-button": "^0.1.1",
     "@types/react-helmet": "^5.0.14",
@@ -210,8 +211,8 @@
     "prettier": "^2.2.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",

diff --git a/packages/paste-core/components/alert-dialog/package.json b/packages/paste-core/components/alert-dialog/package.json
@@ -37,8 +37,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/animation-library": "^0.3.9",
@@ -53,7 +53,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"
   }
 }
diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx
@@ -51,7 +51,7 @@ AlertDialogWithTwoActionsStory.story = {
   },
 };
 
-export const DestructiveAlertDialog: React.FC = () => {
+export const DestructiveAlertDialog = (): JSX.Element => {
   return (
     <AlertDialog
       heading="Delete data"
@@ -78,7 +78,7 @@ DestructiveAlertDialogStory.story = {
   },
 };
 
-export const OpenAlertDialogFromButton: React.FC = () => {
+export const OpenAlertDialogFromButton = (): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState(false);
   const handleOpen = (): void => setIsOpen(true);
   const handleClose = (): void => setIsOpen(false);
@@ -113,7 +113,7 @@ OpenAlertDialogFromButtonStory.story = {
   },
 };
 
-export const OpenAlertDialogFromModal: React.FC = () => {
+export const OpenAlertDialogFromModal = (): JSX.Element => {
   const [isModalOpen, setIsModalOpen] = React.useState(true);
   const [isAlertDialogOpen, setIsAlertDialogOpen] = React.useState(true);
   const handleModalOpen = (): void => setIsModalOpen(true);
@@ -217,7 +217,7 @@ DestructiveAlertDialogVRT.story = {
   name: 'Destructive Alert Dialog for VRT',
 };
 
-export const CustomizedAlertDialog: React.FC = () => {
+export const CustomizedAlertDialog = (): JSX.Element => {
   const theme = useTheme();
   return (
     <CustomizationProvider
@@ -246,7 +246,7 @@ export const CustomizedAlertDialog: React.FC = () => {
   );
 };
 
-export const CustomizedDestructiveAlertDialog: React.FC = () => {
+export const CustomizedDestructiveAlertDialog = (): JSX.Element => {
   const currentTheme = useTheme();
   return (
     <CustomizationProvider

diff --git a/packages/paste-core/components/alert/package.json b/packages/paste-core/components/alert/package.json
@@ -38,8 +38,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/box": "^7.1.1",
@@ -55,7 +55,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"
   }
 }
diff --git a/packages/paste-core/components/anchor/package.json b/packages/paste-core/components/anchor/package.json
@@ -34,8 +34,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/box": "^7.1.1",
@@ -47,7 +47,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"
   }
 }
diff --git a/packages/paste-core/components/avatar/package.json b/packages/paste-core/components/avatar/package.json
@@ -38,8 +38,8 @@
     "@twilio-paste/theme": "^8.0.0",
     "@twilio-paste/types": "^3.1.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/box": "^7.1.1",
@@ -51,7 +51,7 @@
     "@twilio-paste/theme": "^8.0.3",
     "@twilio-paste/types": "^3.1.9",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }
diff --git a/packages/paste-core/components/avatar/src/index.tsx b/packages/paste-core/components/avatar/src/index.tsx
@@ -11,7 +11,12 @@ import type {AvatarProps, AvatarContentProps, ColorVariants, AvatarVariants} fro
 
 const DEFAULT_SIZE = 'sizeIcon70';
 
-const AvatarContents: React.FC<AvatarContentProps> = ({name, size = DEFAULT_SIZE, src, icon: Icon}) => {
+const AvatarContents: React.FC<React.PropsWithChildren<AvatarContentProps>> = ({
+  name,
+  size = DEFAULT_SIZE,
+  src,
+  icon: Icon,
+}) => {
   const computedTokenNames = getComputedTokenNames(size);
   if (src != null) {
     return <Box as="img" alt={name} maxWidth="100%" src={src} size={size} title={name} />;

diff --git a/packages/paste-core/components/avatar/src/types.ts b/packages/paste-core/components/avatar/src/types.ts
@@ -9,7 +9,7 @@ export type AvatarProps = React.HTMLAttributes<'div'> &
   Pick<BoxProps, 'element'> & {
     name: string;
     size?: IconSize;
-    icon?: React.FC<GenericIconProps>;
+    icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
     src?: string;
     color?: ColorVariants;
     variant?: AvatarVariants;
@@ -18,6 +18,6 @@ export type AvatarProps = React.HTMLAttributes<'div'> &
 export type AvatarContentProps = {
   name: string;
   size?: IconSize;
-  icon?: React.FC<GenericIconProps>;
+  icon?: React.FC<React.PropsWithChildren<GenericIconProps>>;
   src?: string;
 };
diff --git a/packages/paste-core/components/badge/package.json b/packages/paste-core/components/badge/package.json
@@ -38,8 +38,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.1",
@@ -55,7 +55,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"
   }
 }
diff --git a/packages/paste-core/components/badge/src/index.tsx b/packages/paste-core/components/badge/src/index.tsx
@@ -8,8 +8,6 @@ import type {BadgeProps, BadgeVariants} from './types';
 import {useResizeChildIcons} from './hooks';
 import {badgeVariantStyles, getBadgeAnchorStyles, getBadgeButtonStyles} from './styles';
 
-export type {BadgeProps};
-
 const handlePropValidation = ({as, href, onClick}: Partial<BadgeProps>): void => {
   if (as === 'a') {
     if (href === null || href === undefined)
@@ -95,8 +93,9 @@ Badge.propTypes = {
     'default',
     'info',
   ] as BadgeVariants[]).isRequired,
-  // @ts-expect-error type unions are a little too much for prop types inferred types to handle
   as: PropTypes.oneOf(['span', 'button', 'a']).isRequired,
   href: PropTypes.string,
   onClick: PropTypes.func,
 };
+
+export type {BadgeProps} from './types';
diff --git a/packages/paste-core/components/badge/stories/customization.stories.tsx b/packages/paste-core/components/badge/stories/customization.stories.tsx
@@ -37,7 +37,7 @@ export const getStyles = (element = 'BADGE'): {[key: string]: PasteCustomCSS} =>
   };
 };
 
-const CustomizationWrapper: React.FC<{variant: BadgeVariants; isTestEnvironment: boolean}> = ({
+const CustomizationWrapper: React.FC<React.PropsWithChildren<{variant: BadgeVariants; isTestEnvironment: boolean}>> = ({
   variant,
   isTestEnvironment,
 }): React.ReactElement => {