Skip to content

Commit 883f173

Browse files
sungik-choisungik-choi
authored
Merge pull request #771 from sungik-choi/enhance/react-v18
React v18 마이그레이션
2 parents 9905b65 + bbaaa00 commit 883f173

File tree

21 files changed

+3121
-3271
lines changed

21 files changed

+3121
-3271
lines changed

‎package-lock.json

Lines changed: 2955 additions & 3147 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -74,30 +74,30 @@
7474
"@channel.io/stylelint-config": "^1.2.0",
7575
"@commitlint/cli": "^13.1.0",
7676
"@commitlint/config-conventional": "^13.1.0",
77+
"@mdx-js/react": "^1.6.22",
7778
"@rollup/plugin-babel": "^5.3.0",
7879
"@rollup/plugin-commonjs": "^19.0.0",
7980
"@rollup/plugin-node-resolve": "^13.0.0",
8081
"@rollup/plugin-url": "^6.0.0",
8182
"@semantic-release/git": "^9.0.0",
82-
"@storybook/addon-a11y": "^6.4.18",
83-
"@storybook/addon-actions": "^6.4.18",
84-
"@storybook/addon-backgrounds": "^6.4.18",
85-
"@storybook/addon-controls": "^6.4.18",
86-
"@storybook/addon-docs": "^6.4.18",
87-
"@storybook/addon-toolbars": "^6.4.18",
88-
"@storybook/react": "^6.4.18",
89-
"@storybook/storybook-deployer": "^2.8.10",
83+
"@storybook/addon-a11y": "^6.5.0-beta.1",
84+
"@storybook/addon-actions": "^6.5.0-beta.1",
85+
"@storybook/addon-backgrounds": "^6.5.0-beta.1",
86+
"@storybook/addon-controls": "^6.5.0-beta.1",
87+
"@storybook/addon-docs": "^6.5.0-beta.1",
88+
"@storybook/addon-toolbars": "^6.5.0-beta.1",
89+
"@storybook/react": "^6.5.0-beta.1",
90+
"@storybook/storybook-deployer": "^2.8.11",
9091
"@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
9192
"@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
9293
"@svgr/cli": "^6.2.1",
9394
"@testing-library/jest-dom": "^5.11.6",
94-
"@testing-library/react": "^11.2.6",
95-
"@testing-library/react-hooks": "^7.0.0",
96-
"@testing-library/user-event": "^13.1.9",
95+
"@testing-library/react": "^13.1.1",
96+
"@testing-library/user-event": "^14.1.1",
9797
"@types/jest": "^25.2.3",
9898
"@types/lodash-es": "^4.17.4",
99-
"@types/react": "^16.14.2",
100-
"@types/react-dom": "^17.0.3",
99+
"@types/react": "^18.0.8",
100+
"@types/react-dom": "^18.0.3",
101101
"@types/styled-components": "^5.1.5",
102102
"@types/uuid": "^8.3.0",
103103
"@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -119,22 +119,22 @@
119119
"eslint-plugin-jsx-a11y": "^6.4.1",
120120
"eslint-plugin-react": "^7.26.1",
121121
"eslint-plugin-react-hooks": "^4.2.0",
122-
"eslint-plugin-storybook": "^0.5.6",
122+
"eslint-plugin-storybook": "^0.5.11",
123123
"husky": "^6.0.0",
124124
"identity-obj-proxy": "^3.0.0",
125125
"jest": "^26.6.3",
126126
"jest-styled-components": "^7.0.4",
127127
"lint-staged": "^11.0.0",
128128
"paths.macro": "^3.0.1",
129-
"react": "^16.14.0",
130-
"react-dom": "^16.14.0",
129+
"react": "^18.1.0",
130+
"react-dom": "^18.1.0",
131131
"regenerator-runtime": "^0.13.7",
132132
"rollup": "^2.50.5",
133133
"rollup-plugin-peer-deps-external": "^2.2.4",
134134
"rollup-plugin-typescript2": "^0.31.1",
135135
"rollup-plugin-visualizer": "^5.5.2",
136136
"semantic-release": "^17.4.3",
137-
"styled-components": "^5.2.1",
137+
"styled-components": "^5.3.5",
138138
"stylelint": "^13.8.0",
139139
"ts-node": "^8.10.2",
140140
"ts-prune": "^0.9.1",
@@ -146,14 +146,15 @@
146146
"typescript-transform-paths": "^3.3.1"
147147
},
148148
"peerDependencies": {
149-
"react": ">=16.8.0",
150-
"react-dom": ">=16.8.0",
149+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
150+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
151151
"styled-components": ">=5"
152152
},
153153
"dependencies": {
154154
"@babel/runtime": "^7.12.13",
155155
"lodash-es": "^4.17.15",
156156
"react-resize-detector": "^6.7.4",
157+
"react-textarea-autosize": "^8.3.3",
157158
"ssr-window": "^3.0.0",
158159
"typesafe-actions": "^5.1.0",
159160
"uuid": "^8.3.2"

‎src/components/Avatars/Avatar/useProgressiveImage.test.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
/* External dependencies */
2-
import { renderHook } from '@testing-library/react-hooks'
3-
41
/* Internal dependencies */
2+
import { renderHook } from 'Utils/testUtils'
53
import useProgressiveImage, { CachedImage } from './useProgressiveImage'
64

75
describe('useProgressiveImage >', () => {

‎src/components/Button/__snapshots__/Button.test.tsx.snap

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1621,9 +1621,7 @@ exports[`Button Test > Size Test > without text > Size L 1`] = `
16211621
<div
16221622
class="c1"
16231623
data-testid="bezier-react-button-inner-content"
1624-
>
1625-
1626-
</div>
1624+
/>
16271625
</button>
16281626
`;
16291627

@@ -1693,9 +1691,7 @@ exports[`Button Test > Size Test > without text > Size M 1`] = `
16931691
<div
16941692
class="c1"
16951693
data-testid="bezier-react-button-inner-content"
1696-
>
1697-
1698-
</div>
1694+
/>
16991695
</button>
17001696
`;
17011697

@@ -1765,9 +1761,7 @@ exports[`Button Test > Size Test > without text > Size S 1`] = `
17651761
<div
17661762
class="c1"
17671763
data-testid="bezier-react-button-inner-content"
1768-
>
1769-
1770-
</div>
1764+
/>
17711765
</button>
17721766
`;
17731767

@@ -1837,9 +1831,7 @@ exports[`Button Test > Size Test > without text > Size XL 1`] = `
18371831
<div
18381832
class="c1"
18391833
data-testid="bezier-react-button-inner-content"
1840-
>
1841-
1842-
</div>
1834+
/>
18431835
</button>
18441836
`;
18451837

@@ -1909,9 +1901,7 @@ exports[`Button Test > Size Test > without text > Size XS 1`] = `
19091901
<div
19101902
class="c1"
19111903
data-testid="bezier-react-button-inner-content"
1912-
>
1913-
1914-
</div>
1904+
/>
19151905
</button>
19161906
`;
19171907

‎src/components/Forms/FormControl/FormControl.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export interface FormControlAriaProps {
1515
}
1616

1717
interface WrapperProps {
18-
Wrapper: React.FunctionComponent
18+
Wrapper: React.FunctionComponent<ChildrenProps>
1919
}
2020

2121
interface SetRenderedProps {

‎src/components/Forms/FormControl/__snapshots__/FormControl.test.tsx.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -206,8 +206,8 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
206206
class="c2 c3"
207207
color="txt-black-darkest"
208208
data-testid="bezier-react-form-label"
209-
for="field-1"
210-
id="field-1-label"
209+
for="field-:r3:"
210+
id="field-:r3:-label"
211211
>
212212
First Inner Label
213213
</label>
@@ -220,7 +220,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
220220
<input
221221
autocomplete="off"
222222
class="c6"
223-
id="field-1"
223+
id="field-:r3:"
224224
size="36"
225225
value=""
226226
/>
@@ -237,8 +237,8 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
237237
class="c2 c3"
238238
color="txt-black-darkest"
239239
data-testid="bezier-react-form-label"
240-
for="field-2"
241-
id="field-2-label"
240+
for="field-:r4:"
241+
id="field-:r4:-label"
242242
>
243243
Second Inner Label
244244
</label>
@@ -252,7 +252,7 @@ exports[`FormControl > Snapshot > With multiple field 1`] = `
252252
aria-invalid="true"
253253
autocomplete="off"
254254
class="c6"
255-
id="field-2"
255+
id="field-:r4:"
256256
size="36"
257257
value=""
258258
/>
@@ -532,8 +532,8 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
532532
class="c7 c4"
533533
color="txt-black-darkest"
534534
data-testid="bezier-react-form-label"
535-
for="field-3"
536-
id="field-3-label"
535+
for="field-:r6:"
536+
id="field-:r6:-label"
537537
>
538538
First Inner Label
539539
</label>
@@ -546,7 +546,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
546546
<input
547547
autocomplete="off"
548548
class="c9"
549-
id="field-3"
549+
id="field-:r6:"
550550
size="36"
551551
value=""
552552
/>
@@ -563,8 +563,8 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
563563
class="c7 c4"
564564
color="txt-black-darkest"
565565
data-testid="bezier-react-form-label"
566-
for="field-4"
567-
id="field-4-label"
566+
for="field-:r7:"
567+
id="field-:r7:-label"
568568
>
569569
Second Inner Label
570570
</label>
@@ -578,7 +578,7 @@ exports[`FormControl > Snapshot > With multiple field and left label position 1`
578578
aria-invalid="true"
579579
autocomplete="off"
580580
class="c9"
581-
id="field-4"
581+
id="field-:r7:"
582582
size="36"
583583
value=""
584584
/>

‎src/components/Forms/Inputs/Select/Select.test.tsx

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,12 @@ describe('Select Test >', () => {
8080
expect(defaultSelectTrigger).toHaveStyle('cursor: pointer;')
8181
})
8282

83-
it('Dropdown >', () => {
83+
it('Dropdown >', async () => {
84+
const user = userEvent.setup()
8485
const { getByTestId } = renderSelect()
8586

8687
const defaultSelectTrigger = getByTestId(SELECT_TRIGGER_TEST_ID)
87-
userEvent.click(defaultSelectTrigger)
88+
await user.click(defaultSelectTrigger)
8889

8990
const defaultSelectDropdown = getByTestId(SELECT_DROPDOWN_TEST_ID)
9091

@@ -96,7 +97,8 @@ describe('Select Test >', () => {
9697
})
9798

9899
describe('SelectSize >', () => {
99-
it('Size only effects to trigger style >', () => {
100+
it('Size only effects to trigger style >', async () => {
101+
const user = userEvent.setup()
100102
const XL_CONTAINER_TEST_ID = `${SELECT_CONTAINER_TEST_ID}_XL`
101103
const XL_TRIGGER_TEST_ID = `${SELECT_TRIGGER_TEST_ID}_XL`
102104
const XL_DROPDOWN_TEST_ID = `${SELECT_DROPDOWN_TEST_ID}_XL`
@@ -121,21 +123,21 @@ describe('Select Test >', () => {
121123
const xlSelectContainer = getByTestIdForXL(XL_CONTAINER_TEST_ID)
122124
const xlSelectTrigger = getByTestIdForXL(XL_TRIGGER_TEST_ID)
123125
// Open Dropdown
124-
userEvent.click(xlSelectTrigger)
126+
await user.click(xlSelectTrigger)
125127
const xlSelectDropdown = getByTestIdForXL(XL_DROPDOWN_TEST_ID)
126128
// Close Dropdown
127-
userEvent.click(xlSelectTrigger)
129+
await user.click(xlSelectTrigger)
128130
const xlContainerStyle = window.getComputedStyle(xlSelectContainer)
129131
const xlDropdownStyle = window.getComputedStyle(xlSelectDropdown)
130132

131133
// Select Size.L
132134
const lSelectContainer = getByTestIdForL(L_CONTAINER_TEST_ID)
133135
const lSelectTrigger = getByTestIdForL(L_TRIGGER_TEST_ID)
134136
// Open Dropdown
135-
userEvent.click(lSelectTrigger)
137+
await user.click(lSelectTrigger)
136138
const lSelectDropdown = getByTestIdForL(L_DROPDOWN_TEST_ID)
137139
// Close Dropdown
138-
userEvent.click(lSelectTrigger)
140+
await user.click(lSelectTrigger)
139141
const lContainerStyle = window.getComputedStyle(lSelectContainer)
140142
const lDropdownStyle = window.getComputedStyle(lSelectDropdown)
141143

@@ -216,11 +218,12 @@ describe('Select Test >', () => {
216218
expect(trigger).toHaveStyle('cursor: not-allowed')
217219
})
218220

219-
it('should not show dropdown when clicked', () => {
221+
it('should not show dropdown when clicked', async () => {
222+
const user = userEvent.setup()
220223
const { getByTestId } = renderSelect({ disabled: true })
221224
const trigger = getByTestId(SELECT_TRIGGER_TEST_ID)
222225

223-
userEvent.click(trigger)
226+
await user.click(trigger)
224227

225228
expect(() => getByTestId(SELECT_DROPDOWN_TEST_ID)).toThrow() // element should not exist
226229
})
@@ -257,11 +260,12 @@ describe('Select Test >', () => {
257260
expect(trigger).toHaveStyle('cursor: initial')
258261
})
259262

260-
it('should not show dropdown when clicked', () => {
263+
it('should not show dropdown when clicked', async () => {
264+
const user = userEvent.setup()
261265
const { getByTestId } = renderSelect({ readOnly: true })
262266
const trigger = getByTestId(SELECT_TRIGGER_TEST_ID)
263267

264-
userEvent.click(trigger)
268+
await user.click(trigger)
265269

266270
expect(() => getByTestId(SELECT_DROPDOWN_TEST_ID)).toThrow() // element should not exist
267271
})
@@ -289,13 +293,14 @@ describe('Select Test >', () => {
289293
expect(dropdown).toBeVisible()
290294
})
291295

292-
it('should disappear dropdown when the other elements clicked >', () => {
296+
it('should disappear dropdown when the other elements clicked >', async () => {
293297
const { body } = document
298+
const user = userEvent.setup()
294299

295300
const { getByTestId } = renderSelect({ defaultFocus: true })
296301
const dropdown = getByTestId(SELECT_DROPDOWN_TEST_ID)
297302

298-
userEvent.click(body)
303+
await user.click(body)
299304

300305
expect(dropdown).not.toBeVisible()
301306
})

‎src/components/Forms/Inputs/TextArea/TextArea.styled.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const Wrapper = styled.div<WrapperProps>`
4040
${({ interpolation }) => interpolation}
4141
`
4242

43-
interface TextAreaAutoSizeBaseProps extends InterpolationProps{
43+
interface TextAreaAutoSizeBaseProps extends InterpolationProps {
4444
disabled: boolean
4545
readOnly: boolean
4646
}

0 commit comments

Comments
 (0)