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 · Jan 20, 2023 · d4de851 · d4de851
1 parent b7e429e
commit d4de851
Show file tree

Hide file tree

Showing 430 changed files with 1,750 additions and 1,458 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
@@ -207,7 +207,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
@@ -139,16 +139,16 @@
     "@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": "^18.11.13",
-    "@types/react": "^17.0.31",
+    "@types/react": "^18.0.0",
     "@types/react-color": "^3.0.6",
     "@types/react-github-button": "^0.1.1",
     "@types/react-helmet": "^5.0.14",
@@ -209,8 +209,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",

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
@@ -50,7 +50,7 @@ AlertDialogWithTwoActionsStory.parameters = {
   chromatic: {disableSnapshot: true},
 };
 
-export const DestructiveAlertDialog: React.FC = () => {
+export const DestructiveAlertDialog = (): JSX.Element => {
   return (
     <AlertDialog
       heading="Delete data"
@@ -75,7 +75,7 @@ DestructiveAlertDialogStory.parameters = {
   chromatic: {disableSnapshot: true},
 };
 
-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);
@@ -108,7 +108,7 @@ OpenAlertDialogFromButtonStory.parameters = {
   chromatic: {disableSnapshot: true},
 };
 
-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);

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.2",
@@ -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.2",
@@ -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.2",
@@ -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.2",
@@ -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 => {

diff --git a/packages/paste-core/components/badge/stories/index.stories.tsx b/packages/paste-core/components/badge/stories/index.stories.tsx
@@ -26,7 +26,7 @@ const Wrapper = styled.div(
   })
 );
 
-export const AllBadges: React.FC = () => (
+export const AllBadges = (): JSX.Element => (
   <Wrapper>
     <Badge as="span" variant="neutral">
       Neutral
@@ -64,7 +64,7 @@ export const AllBadges: React.FC = () => (
   </Wrapper>
 );
 
-export const NeutralBadge: React.FC = () => (
+export const NeutralBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -121,7 +121,7 @@ export const NeutralBadge: React.FC = () => (
   </>
 );
 
-export const WarningBadge: React.FC = () => (
+export const WarningBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -174,7 +174,7 @@ export const WarningBadge: React.FC = () => (
   </>
 );
 
-export const ErrorBadge: React.FC = () => (
+export const ErrorBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -227,7 +227,7 @@ export const ErrorBadge: React.FC = () => (
   </>
 );
 
-export const SuccessBadge: React.FC = () => (
+export const SuccessBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -284,7 +284,7 @@ export const SuccessBadge: React.FC = () => (
   </>
 );
 
-export const NewBadge: React.FC = () => (
+export const NewBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -337,7 +337,7 @@ export const NewBadge: React.FC = () => (
   </>
 );
 
-export const Decorative10Badge: React.FC = () => (
+export const Decorative10Badge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -390,7 +390,7 @@ export const Decorative10Badge: React.FC = () => (
   </>
 );
 
-export const Decorative20Badge: React.FC = () => (
+export const Decorative20Badge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -443,7 +443,7 @@ export const Decorative20Badge: React.FC = () => (
   </>
 );
 
-export const Decorative30Badge: React.FC = () => (
+export const Decorative30Badge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -496,7 +496,7 @@ export const Decorative30Badge: React.FC = () => (
   </>
 );
 
-export const Decorative40Badge: React.FC = () => (
+export const Decorative40Badge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -549,7 +549,7 @@ export const Decorative40Badge: React.FC = () => (
   </>
 );
 
-export const NeutralCounterBadge: React.FC = () => (
+export const NeutralCounterBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -596,7 +596,7 @@ export const NeutralCounterBadge: React.FC = () => (
   </>
 );
 
-export const ErrorCounterBadge: React.FC = () => (
+export const ErrorCounterBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -643,7 +643,7 @@ export const ErrorCounterBadge: React.FC = () => (
   </>
 );
 
-export const DefaultBadge: React.FC = () => (
+export const DefaultBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -690,7 +690,7 @@ export const DefaultBadge: React.FC = () => (
   </>
 );
 
-export const InfoBadge: React.FC = () => (
+export const InfoBadge = (): JSX.Element => (
   <>
     <Heading as="h2" variant="heading40">
       Span
@@ -737,7 +737,7 @@ export const InfoBadge: React.FC = () => (
   </>
 );
 
-export const LongTextBadge: React.FC = () => (
+export const LongTextBadge = (): JSX.Element => (
   <Wrapper>
     <Badge as="a" href="#" variant="neutral">
       <InformationIcon decorative />