feat(deps): react@18 support

bigcommerce · Sep 27, 2022 · 51c688b · 51c688b
1 parent f4a5fbe
commit 51c688b
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 700 deletions.
diff --git a/packages/big-design-icons/package.json b/packages/big-design-icons/package.json
@@ -38,9 +38,9 @@
     "react-uid": "^2.3.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "styled-components": "^5.3.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -54,10 +54,10 @@
     "@svgr/plugin-jsx": "^5.0.1",
     "@svgr/plugin-prettier": "^5.0.1",
     "@svgr/plugin-svgo": "^5.0.1",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "@types/styled-components": "^5.1.11",
-    "babel-plugin-styled-components": "^2.0.2",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
+    "babel-plugin-styled-components": "^2.0.7",
     "camelcase": "^6.2.0",
     "flag-icons": "^6.6.6",
     "fs-extra": "^10.0.1",
@@ -67,12 +67,13 @@
     "inquirer-autocomplete-prompt": "^2.0.0",
     "node-fetch": "^2.6.7",
     "prettier": "^2.4.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "tiny-async-pool": "^2.0.1",
     "typescript": "^4.4.3",
-    "typescript-styled-plugin": "^0.18.1"
+    "typescript-styled-plugin": "^0.18.2"
   }
 }
diff --git a/packages/big-design-theme/package.json b/packages/big-design-theme/package.json
@@ -36,9 +36,9 @@
     "polished": "^4.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "styled-components": "^5.3.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -50,17 +50,17 @@
     "@bigcommerce/configs": "^0.16.0",
     "@bigcommerce/pack": "^0.2.0",
     "@types/jest": "^29.0.3",
-    "@types/styled-components": "^5.1.11",
+    "@types/styled-components": "^5.1.26",
     "babel-jest": "^29.0.2",
-    "babel-plugin-styled-components": "^2.0.2",
+    "babel-plugin-styled-components": "^2.0.7",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.2",
-    "jest-styled-components": "^7.0.8",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "jest-styled-components": "^7.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "typescript": "^4.4.3",
-    "typescript-styled-plugin": "^0.18.1"
+    "typescript-styled-plugin": "^0.18.2"
   }
 }
diff --git a/packages/big-design/package.json b/packages/big-design/package.json
@@ -35,22 +35,22 @@
     "@babel/runtime": "^7.15.4",
     "@bigcommerce/big-design-icons": "^0.20.1",
     "@bigcommerce/big-design-theme": "^0.16.1",
-    "@popperjs/core": "^2.5.4",
+    "@popperjs/core": "^2.11.6",
     "@types/react-datepicker": "^4.4.2",
     "date-fns": "2.29.2",
     "downshift": "6.1.9",
     "focus-trap": "^7.0.0",
     "polished": "^4.0.0",
-    "react-beautiful-dnd": "^13.1.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.8.0",
-    "react-popper": "^2.2.4",
+    "react-popper": "^2.3.0",
     "react-uid": "^2.3.1",
     "zustand": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "styled-components": "^5.3.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.4",
@@ -63,27 +63,27 @@
     "@bigcommerce/pack": "^0.2.0",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.3.0",
     "@types/jest": "^29.0.3",
     "@types/node": "^16.0.0",
-    "@types/react": "^17.0.2",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.20",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/styled-components": "^5.1.11",
+    "@types/styled-components": "^5.1.26",
     "babel-jest": "^29.0.2",
-    "babel-plugin-styled-components": "^2.0.2",
+    "babel-plugin-styled-components": "^2.0.7",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.2",
-    "jest-styled-components": "^7.0.8",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1",
+    "jest-styled-components": "^7.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.5",
     "typescript": "^4.4.3",
-    "typescript-styled-plugin": "^0.18.1"
+    "typescript-styled-plugin": "^0.18.2"
   }
 }
diff --git a/packages/big-design/src/components/Modal/spec.tsx b/packages/big-design/src/components/Modal/spec.tsx
@@ -272,11 +272,11 @@ test('renders destructive action button', () => {
 
 test('unmounts appropriately', () => {
   const onClick = jest.fn();
-  const { getByTestId, rerender, unmount } = render(<Modal isOpen={true} />);
+  const { getByTestId, unmount } = render(<Modal isOpen={true} />);
 
   unmount();
 
-  rerender(
+  render(
     <Button data-testid="button" onClick={onClick}>
       Test
     </Button>,

diff --git a/packages/big-design/src/components/Select/spec.tsx b/packages/big-design/src/components/Select/spec.tsx
@@ -1,6 +1,7 @@
 import { ArrowBackIcon, ArrowForwardIcon, DeleteIcon } from '@bigcommerce/big-design-icons';
 import { remCalc } from '@bigcommerce/big-design-theme';
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import 'jest-styled-components';
 import React, { createRef } from 'react';
 
@@ -546,10 +547,9 @@ test('closing the Select triggers onClose', async () => {
 
   const button = await screen.findByLabelText('toggle menu');
 
-  await act(async () => {
-    await fireEvent.click(button);
-    await fireEvent.click(button);
-  });
+  await userEvent.click(button);
+
+  await userEvent.click(button);
 
   expect(onClose).toHaveBeenCalled();
 });

diff --git a/packages/big-design/src/components/Tree/hooks/spec.ts b/packages/big-design/src/components/Tree/hooks/spec.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions */
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import {
   NodeMap,

diff --git a/packages/big-design/src/components/Worksheet/hooks/useUpdateItems/spec.tsx b/packages/big-design/src/components/Worksheet/hooks/useUpdateItems/spec.tsx
@@ -1,9 +1,27 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
+import { Component, PropsWithChildren } from 'react';
 
 import { useUpdateItems } from './index';
 
+beforeEach(() => {
+  // We need to suppress console errors, otherwise we'll blow up the console.
+  // eslint-disable-next-line no-console
+  console.error = jest.fn();
+});
+
 test('throws if is not wrapped in UpdateItemsProvider', () => {
-  const { result: hook } = renderHook(() => useUpdateItems());
+  let error;
+
+  renderHook(() => useUpdateItems(), {
+    wrapper: class Wrapper extends Component<PropsWithChildren<unknown>> {
+      override componentDidCatch(err: unknown) {
+        error = err;
+      }
+      override render() {
+        return this.props.children;
+      }
+    },
+  });
 
-  expect(hook.error?.message).toContain('UpdateItemsProvider');
+  expect(error).toEqual(new Error('useUpdateItems must be used within an <UpdateItemsProvider>'));
 });
diff --git a/packages/docs/PropTables/AlertPropTable.tsx b/packages/docs/PropTables/AlertPropTable.tsx
@@ -1,4 +1,4 @@
-import { Small, Text } from '@bigcommerce/big-design';
+import { Small } from '@bigcommerce/big-design';
 import React from 'react';
 
 import { Prop, PropTable, PropTableWrapper } from '../components';
@@ -18,8 +18,11 @@ const alertProps: Prop[] = [
     defaultValue: 'false',
     description: (
       <>
-        <Text>Auto dismiss after 5 seconds.</Text>
-        <Small>Note: Only valid when used with AlertManager.</Small>
+        Auto dismiss after 5 seconds.
+        {/* I hate using a br but the as prop doesn't support div for now */}
+        {/* TODO: Support div for as prop */}
+        <br />
+        <Small as="span">Note: Only valid when used with AlertManager.</Small>
       </>
     ),
   },

diff --git a/packages/docs/PropTables/BoxPropTable.tsx b/packages/docs/PropTables/BoxPropTable.tsx
@@ -1,4 +1,4 @@
-import { Small, Text } from '@bigcommerce/big-design';
+import { Small } from '@bigcommerce/big-design';
 import React from 'react';
 
 import { NextLink, Prop, PropTable, PropTableWrapper } from '../components';
@@ -64,8 +64,11 @@ const boxProps: Prop[] = [
     types: ['sticky', 'fixed', 'modalBackdrop', 'modal', 'tooltip', 'popover'],
     description: (
       <>
-        <Text>Determines type of z-index to be applied.</Text>
-        <Small>Types are in order (sticky is low, popover is high).</Small>
+        Determines type of z-index to be applied.
+        {/* I hate using a br but the as prop doesn't support div for now */}
+        {/* TODO: Support div for as prop */}
+        <br />
+        <Small as="span">Types are in order (sticky is low, popover is high).</Small>
       </>
     ),
   },

diff --git a/packages/docs/components/CodePreview/CodePreview.tsx b/packages/docs/components/CodePreview/CodePreview.tsx
@@ -22,7 +22,9 @@ const defaultScope = {
   styled,
 };
 
-function getInitialCode(children: React.ReactNode, language: Language): string {
+type CodePreviewChildren = React.ReactNode | (() => JSX.Element);
+
+function getInitialCode(children: CodePreviewChildren, language: Language): string {
   if (typeof children !== 'string') {
     throw new Error('<CodePreview> children must be of type string');
   }
@@ -61,7 +63,7 @@ function transformCode(input: string): string {
 }
 
 export interface CodePreviewProps {
-  children?: React.ReactNode;
+  children?: CodePreviewChildren;
   scope?: { [key: string]: unknown };
 }
 

diff --git a/packages/docs/components/ColorCards/ColorCard.tsx b/packages/docs/components/ColorCards/ColorCard.tsx
@@ -58,7 +58,9 @@ const ColorCard: React.FC<ColorCardProps> = ({ colorCard }) => {
           {description.text}{' '}
           {Boolean(description.href) && (
             <Link href={description.href} target="_blank">
-              <Small color="inherit">Read more</Small>
+              <Small as="span" color="inherit">
+                Read more
+              </Small>
             </Link>
           )}
         </Small>

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -29,26 +29,26 @@
     "next-transpile-modules": "^9.0.0",
     "prettier": "^2.4.0",
     "prism-react-renderer": "^1.0.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-live": "^2.2.3",
     "react-uid": "^2.3.1",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@bigcommerce/configs": "^0.16.0",
     "@bigcommerce/examples": "^0.20.1",
     "@types/gtag.js": "^0.0.11",
     "@types/node": "^16.0.0",
     "@types/prettier": "^2.0.1",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "@types/styled-components": "^5.1.11",
-    "babel-plugin-styled-components": "^2.0.2",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
+    "babel-plugin-styled-components": "^2.0.7",
     "jsx-to-string-loader": "^1.2.0",
     "next": "^12.0.8",
     "push-dir": "^0.4.1",
     "typescript": "^4.4.3",
-    "typescript-styled-plugin": "^0.18.1"
+    "typescript-styled-plugin": "^0.18.2"
   }
 }
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -12,15 +12,15 @@
     "@bigcommerce/big-design-icons": "^0.20.1",
     "@bigcommerce/big-design-theme": "^0.16.1",
     "formik": "^2.0.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "styled-components": "^5.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.5",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "@types/styled-components": "^5.1.11",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^2.1.0",
     "typescript": "^4.4.3",
     "vite": "^3.0.3"