Skip to content

Commit f4f1be7

Browse files
chanceaclarkchanceaclark
committed
feat(deps): react@18 support
1 parent 9b8c62b commit f4f1be7

File tree

15 files changed

+204
-448
lines changed

15 files changed

+204
-448
lines changed

‎packages/big-design-icons/package.json‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@
3838
"react-uid": "^2.3.1"
3939
},
4040
"peerDependencies": {
41-
"react": "^16.8.0 || ^17.0.0",
42-
"react-dom": "^16.8.0 || ^17.0.0",
43-
"styled-components": "^5.3.0"
41+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
42+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
43+
"styled-components": "^5.3.5"
4444
},
4545
"devDependencies": {
4646
"@babel/cli": "^7.15.4",
@@ -55,10 +55,10 @@
5555
"@svgr/plugin-jsx": "^5.0.1",
5656
"@svgr/plugin-prettier": "^5.0.1",
5757
"@svgr/plugin-svgo": "^5.0.1",
58-
"@types/react": "^17.0.2",
59-
"@types/react-dom": "^17.0.1",
60-
"@types/styled-components": "^5.1.11",
61-
"babel-plugin-styled-components": "^2.0.2",
58+
"@types/react": "^18.0.20",
59+
"@types/react-dom": "^18.0.6",
60+
"@types/styled-components": "^5.1.26",
61+
"babel-plugin-styled-components": "^2.0.7",
6262
"camelcase": "^6.2.0",
6363
"fs-extra": "^10.0.1",
6464
"glob": "^8.0.1",
@@ -67,12 +67,13 @@
6767
"inquirer-autocomplete-prompt": "^2.0.0",
6868
"node-fetch": "^2.6.7",
6969
"prettier": "^2.4.0",
70-
"react": "^17.0.1",
71-
"react-dom": "^17.0.1",
70+
"react": "^18.2.0",
71+
"react-dom": "^18.2.0",
72+
"react-is": "^18.2.0",
7273
"rimraf": "^3.0.2",
73-
"styled-components": "^5.3.0",
74+
"styled-components": "^5.3.5",
7475
"tiny-async-pool": "^2.0.1",
7576
"typescript": "^4.4.3",
76-
"typescript-styled-plugin": "^0.18.1"
77+
"typescript-styled-plugin": "^0.18.2"
7778
}
7879
}

‎packages/big-design-theme/package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@
3636
"polished": "^4.0.0"
3737
},
3838
"peerDependencies": {
39-
"react": "^16.8.0 || ^17.0.0",
40-
"react-dom": "^16.8.0 || ^17.0.0",
41-
"styled-components": "^5.3.0"
39+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
40+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
41+
"styled-components": "^5.3.5"
4242
},
4343
"devDependencies": {
4444
"@babel/cli": "^7.15.4",
@@ -50,17 +50,17 @@
5050
"@bigcommerce/configs": "^0.16.0",
5151
"@bigcommerce/pack": "^0.2.0",
5252
"@types/jest": "^28.1.6",
53-
"@types/styled-components": "^5.1.11",
53+
"@types/styled-components": "^5.1.26",
5454
"babel-jest": "^29.0.2",
55-
"babel-plugin-styled-components": "^2.0.2",
55+
"babel-plugin-styled-components": "^2.0.7",
5656
"jest": "^28.1.0",
5757
"jest-environment-jsdom": "^29.0.2",
58-
"jest-styled-components": "^7.0.8",
59-
"react": "^17.0.1",
60-
"react-dom": "^17.0.1",
58+
"jest-styled-components": "^7.1.1",
59+
"react": "^18.2.0",
60+
"react-dom": "^18.2.0",
6161
"rimraf": "^3.0.2",
62-
"styled-components": "^5.3.0",
62+
"styled-components": "^5.3.5",
6363
"typescript": "^4.4.3",
64-
"typescript-styled-plugin": "^0.18.1"
64+
"typescript-styled-plugin": "^0.18.2"
6565
}
6666
}

‎packages/big-design/package.json‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,22 @@
3535
"@babel/runtime": "^7.15.4",
3636
"@bigcommerce/big-design-icons": "^0.20.0",
3737
"@bigcommerce/big-design-theme": "^0.16.0",
38-
"@popperjs/core": "^2.5.4",
38+
"@popperjs/core": "^2.11.6",
3939
"@types/react-datepicker": "^4.4.2",
4040
"date-fns": "2.29.2",
4141
"downshift": "6.1.9",
4242
"focus-trap": "^7.0.0",
4343
"polished": "^4.0.0",
44-
"react-beautiful-dnd": "^13.1.0",
44+
"react-beautiful-dnd": "^13.1.1",
4545
"react-datepicker": "^4.8.0",
46-
"react-popper": "^2.2.4",
46+
"react-popper": "^2.3.0",
4747
"react-uid": "^2.3.1",
4848
"zustand": "^4.1.1"
4949
},
5050
"peerDependencies": {
51-
"react": "^16.8.0 || ^17.0.0",
52-
"react-dom": "^16.8.0 || ^17.0.0",
53-
"styled-components": "^5.3.0"
51+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
52+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
53+
"styled-components": "^5.3.5"
5454
},
5555
"devDependencies": {
5656
"@babel/cli": "^7.15.4",
@@ -63,27 +63,27 @@
6363
"@bigcommerce/pack": "^0.2.0",
6464
"@testing-library/dom": "^8.11.1",
6565
"@testing-library/jest-dom": "^5.14.1",
66-
"@testing-library/react": "^12.1.2",
67-
"@testing-library/react-hooks": "^8.0.0",
66+
"@testing-library/react": "^13.4.0",
67+
"@testing-library/react-hooks": "^8.0.1",
6868
"@testing-library/user-event": "^14.3.0",
6969
"@types/jest": "^28.1.6",
7070
"@types/node": "^16.0.0",
71-
"@types/react": "^17.0.2",
72-
"@types/react-beautiful-dnd": "^13.0.0",
73-
"@types/react-dom": "^17.0.1",
71+
"@types/react": "^18.0.20",
72+
"@types/react-beautiful-dnd": "^13.1.2",
73+
"@types/react-dom": "^18.0.6",
7474
"@types/react-test-renderer": "^17.0.1",
75-
"@types/styled-components": "^5.1.11",
75+
"@types/styled-components": "^5.1.26",
7676
"babel-jest": "^29.0.2",
77-
"babel-plugin-styled-components": "^2.0.2",
77+
"babel-plugin-styled-components": "^2.0.7",
7878
"jest": "^28.1.0",
7979
"jest-environment-jsdom": "^29.0.2",
80-
"jest-styled-components": "^7.0.8",
81-
"react": "^17.0.1",
82-
"react-dom": "^17.0.1",
83-
"react-test-renderer": "^17.0.1",
80+
"jest-styled-components": "^7.1.1",
81+
"react": "^18.2.0",
82+
"react-dom": "^18.2.0",
83+
"react-test-renderer": "^18.2.0",
8484
"rimraf": "^3.0.2",
85-
"styled-components": "^5.3.0",
85+
"styled-components": "^5.3.5",
8686
"typescript": "^4.4.3",
87-
"typescript-styled-plugin": "^0.18.1"
87+
"typescript-styled-plugin": "^0.18.2"
8888
}
8989
}

‎packages/big-design/src/components/Modal/spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -272,11 +272,11 @@ test('renders destructive action button', () => {
272272

273273
test('unmounts appropriately', () => {
274274
const onClick = jest.fn();
275-
const { getByTestId, rerender, unmount } = render(<Modal isOpen={true} />);
275+
const { getByTestId, unmount } = render(<Modal isOpen={true} />);
276276

277277
unmount();
278278

279-
rerender(
279+
render(
280280
<Button data-testid="button" onClick={onClick}>
281281
Test
282282
</Button>,

‎packages/big-design/src/components/Select/spec.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ArrowBackIcon, ArrowForwardIcon, DeleteIcon } from '@bigcommerce/big-design-icons';
22
import { remCalc } from '@bigcommerce/big-design-theme';
33
import { act, fireEvent, render, screen } from '@testing-library/react';
4+
import userEvent from '@testing-library/user-event';
45
import 'jest-styled-components';
56
import React, { createRef } from 'react';
67

@@ -546,10 +547,9 @@ test('closing the Select triggers onClose', async () => {
546547

547548
const button = await screen.findByLabelText('toggle menu');
548549

549-
await act(async () => {
550-
await fireEvent.click(button);
551-
await fireEvent.click(button);
552-
});
550+
await userEvent.click(button);
551+
552+
await userEvent.click(button);
553553

554554
expect(onClose).toHaveBeenCalled();
555555
});

‎packages/big-design/src/components/Switch/spec.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1+
import userEvent from '@testing-library/user-event';
12
import React, { createRef } from 'react';
23
import 'jest-styled-components';
34

45
import { render, screen } from '@test/utils';
56

6-
import userEvent from '@testing-library/user-event';
7-
87
import { Switch } from './index';
98

109
describe('render Switch', () => {

‎packages/big-design/src/components/Tree/hooks/spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable @typescript-eslint/consistent-type-assertions */
2-
import { renderHook } from '@testing-library/react-hooks';
2+
import { renderHook } from '@testing-library/react';
33

44
import {
55
NodeMap,

‎packages/big-design/src/components/Worksheet/hooks/useUpdateItems/spec.tsx‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
1-
import { renderHook } from '@testing-library/react-hooks';
1+
import { renderHook } from '@testing-library/react';
2+
import { Component, PropsWithChildren } from 'react';
23

34
import { useUpdateItems } from './index';
45

6+
beforeEach(() => {
7+
// We need to suppress console errors, otherwise we'll blow up the console.
8+
// eslint-disable-next-line no-console
9+
console.error = jest.fn();
10+
});
11+
512
test('throws if is not wrapped in UpdateItemsProvider', () => {
6-
const { result: hook } = renderHook(() => useUpdateItems());
13+
let error;
14+
15+
renderHook(() => useUpdateItems(), {
16+
wrapper: class Wrapper extends Component<PropsWithChildren<unknown>> {
17+
override componentDidCatch(err: unknown) {
18+
error = err;
19+
}
20+
override render() {
21+
return this.props.children;
22+
}
23+
},
24+
});
725

8-
expect(hook.error?.message).toContain('UpdateItemsProvider');
26+
expect(error).toEqual(new Error('useUpdateItems must be used within an <UpdateItemsProvider>'));
927
});

‎packages/docs/PropTables/AlertPropTable.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Small, Text } from '@bigcommerce/big-design';
1+
import { Small } from '@bigcommerce/big-design';
22
import React from 'react';
33

44
import { Prop, PropTable, PropTableWrapper } from '../components';
@@ -18,8 +18,11 @@ const alertProps: Prop[] = [
1818
defaultValue: 'false',
1919
description: (
2020
<>
21-
<Text>Auto dismiss after 5 seconds.</Text>
22-
<Small>Note: Only valid when used with AlertManager.</Small>
21+
Auto dismiss after 5 seconds.
22+
{/* I hate using a br but the as prop doesn't support div for now */}
23+
{/* TODO: Support div for as prop */}
24+
<br />
25+
<Small as="span">Note: Only valid when used with AlertManager.</Small>
2326
</>
2427
),
2528
},

‎packages/docs/PropTables/BoxPropTable.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Small, Text } from '@bigcommerce/big-design';
1+
import { Small } from '@bigcommerce/big-design';
22
import React from 'react';
33

44
import { NextLink, Prop, PropTable, PropTableWrapper } from '../components';
@@ -64,8 +64,11 @@ const boxProps: Prop[] = [
6464
types: ['sticky', 'fixed', 'modalBackdrop', 'modal', 'tooltip', 'popover'],
6565
description: (
6666
<>
67-
<Text>Determines type of z-index to be applied.</Text>
68-
<Small>Types are in order (sticky is low, popover is high).</Small>
67+
Determines type of z-index to be applied.
68+
{/* I hate using a br but the as prop doesn't support div for now */}
69+
{/* TODO: Support div for as prop */}
70+
<br />
71+
<Small as="span">Types are in order (sticky is low, popover is high).</Small>
6972
</>
7073
),
7174
},

0 commit comments

Comments
 (0)