Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(deps): react@18 support #981

Merged
merged 1 commit into from
Sep 27, 2022
Merged

feat(deps): react@18 support #981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions packages/big-design-icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
20 changes: 10 additions & 10 deletions packages/big-design-theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
38 changes: 19 additions & 19 deletions packages/big-design/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
4 changes: 2 additions & 2 deletions packages/big-design/src/components/Modal/spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since I bumped @testing-library/react, their unmount method completely wipes container.innerhtml so we just need to use render instead. rerender is really only useful for updates to props.

<Button data-testid="button" onClick={onClick}>
Test
</Button>,
Expand Down
8 changes: 4 additions & 4 deletions packages/big-design/src/components/Select/spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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);
Comment on lines +550 to +552
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test was failing with act so switched over to userEvent.


expect(onClose).toHaveBeenCalled();
});
Expand Down
2 changes: 1 addition & 1 deletion packages/big-design/src/components/Tree/hooks/spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
24 changes: 21 additions & 3 deletions packages/big-design/src/components/Worksheet/hooks/useUpdateItems/spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
},
});

Comment on lines +15 to 25
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When they ported over renderHook to v13 of @testing-library/react they shipped it with a leaner API. Now we don't get errors with this, but according to testing-library/react-testing-library#991 (comment) this is the best way to achieve the same thing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😵‍💫

expect(hook.error?.message).toContain('UpdateItemsProvider');
expect(error).toEqual(new Error('useUpdateItems must be used within an <UpdateItemsProvider>'));
});
9 changes: 6 additions & 3 deletions packages/docs/PropTables/AlertPropTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Comment on lines +21 to +25
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2022-09-20 at 12 36 52

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:cringe:

</>
),
},
Expand Down
9 changes: 6 additions & 3 deletions packages/docs/PropTables/BoxPropTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Comment on lines +67 to +71
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2022-09-20 at 12 38 51

</>
),
},
Expand Down
6 changes: 4 additions & 2 deletions packages/docs/components/CodePreview/CodePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
Expand Down Expand Up @@ -61,7 +63,7 @@ function transformCode(input: string): string {
}

export interface CodePreviewProps {
children?: React.ReactNode;
children?: CodePreviewChildren;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

scope?: { [key: string]: unknown };
}

Expand Down
4 changes: 3 additions & 1 deletion packages/docs/components/ColorCards/ColorCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Comment on lines +61 to +63
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen Shot 2022-09-20 at 12 28 14

</Link>
)}
</Small>
Expand Down
16 changes: 8 additions & 8 deletions packages/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
12 changes: 6 additions & 6 deletions packages/examples/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading