upgrade react 18 & styled-componets 6 #616

naporin0624 · 2024-08-08T10:28:33Z

やったこと

react を 18 に upgrade
- peerDependencies も変更
  - react >= 18.0.0
  - react-dom >= 18.0.0
styled-components を 6 に upgrade
peerDependencies も変更 v6 から @types/styled-components 非依存になったため
- styled-components >= 6.0.0
react18 にあげたら props の問題で型エラーが発生したので追従して upgrade

動作確認環境

CI
storybook

チェックリスト

不要なチェック項目は消して構いません

破壊的変更がある場合には、対象のパッケージのメジャーバージョンが上がっていることを確認した
追加したコンポーネントが index.ts から再 export されている
README やドキュメントに影響があることを確認した

github-actions · 2024-08-08T10:37:03Z

Visit the preview URL for this PR (updated for commit 190e5d1):

https://pixiv-charcoal-web--pr616-chore-upgrade-react1-bwg5attx.web.app

_{(expires Wed, 01 Jan 2025 07:53:15 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0}

github-actions · 2024-08-08T10:37:59Z

Size Change: -7.57 kB (-1.37%)

Total Size: 544 kB

Filename	Size	Change
`./packages/react-sandbox/dist/_lib/ComponentAbstraction.d.ts`	967 B	+34 B (+3.64%)
`./packages/react-sandbox/dist/components/Carousel/index.d.ts`	1.38 kB	+28 B (+2.07%)
`./packages/react-sandbox/dist/components/CarouselButton/index.d.ts`	675 B	+56 B (+9.05%)	🔍
`./packages/react-sandbox/dist/components/Filter/index.d.ts`	1.15 kB	+34 B (+3.04%)
`./packages/react-sandbox/dist/components/HintText/index.d.ts`	326 B	+28 B (+9.4%)	🔍
`./packages/react-sandbox/dist/components/icons/Base.d.ts`	762 B	+56 B (+7.93%)	🔍
`./packages/react-sandbox/dist/components/icons/DotsIcon.d.ts`	310 B	+28 B (+9.93%)	⚠️
`./packages/react-sandbox/dist/components/icons/InfoIcon.d.ts`	115 B	+28 B (+32.18%)	🚨
`./packages/react-sandbox/dist/components/icons/NextIcon.d.ts`	309 B	+28 B (+9.96%)	⚠️
`./packages/react-sandbox/dist/components/icons/WedgeIcon.d.ts`	490 B	+28 B (+6.06%)	🔍
`./packages/react-sandbox/dist/components/Layout/index.d.ts`	2.39 kB	+324 B (+15.65%)	⚠️
`./packages/react-sandbox/dist/components/LeftMenu/index.d.ts`	438 B	+56 B (+14.66%)	⚠️
`./packages/react-sandbox/dist/components/MenuListItem/index.d.ts`	2.1 kB	+304 B (+16.9%)	⚠️
`./packages/react-sandbox/dist/components/Pager/index.d.ts`	589 B	+60 B (+11.34%)	⚠️
`./packages/react-sandbox/dist/components/TextEllipsis/index.d.ts`	832 B	+451 B (+118.37%)	🆘
`./packages/react-sandbox/dist/foundation/hooks.d.ts`	1.07 kB	+32 B (+3.09%)
`./packages/react-sandbox/dist/index.cjs.js`	63.4 kB	-20 B (-0.03%)
`./packages/react-sandbox/dist/index.esm.js`	53.6 kB	-20 B (-0.04%)
`./packages/react-sandbox/dist/misc/storybook-helper.d.ts`	404 B	+61 B (+17.78%)	⚠️
`./packages/react-sandbox/dist/styled.d.ts`	3.64 kB	-8.67 kB (-70.46%)	🏆
`./packages/react/dist/_lib/createDivComponent.d.ts`	455 B	-110 B (-19.47%)	👏
`./packages/react/dist/components/Button/index.d.ts`	727 B	+35 B (+5.06%)	🔍
`./packages/react/dist/components/Clickable/index.d.ts`	711 B	+35 B (+5.18%)	🔍
`./packages/react/dist/components/DropdownSelector/Divider/index.d.ts`	133 B	+28 B (+26.67%)	🚨
`./packages/react/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts`	341 B	+28 B (+8.95%)	🔍
`./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts`	514 B	+28 B (+5.76%)	🔍
`./packages/react/dist/components/DropdownSelector/index.d.ts`	731 B	+28 B (+3.98%)
`./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts`	535 B	+45 B (+9.18%)	🔍
`./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts`	639 B	-132 B (-17.12%)	👏
`./packages/react/dist/components/DropdownSelector/MenuItemGroup/index.d.ts`	442 B	+28 B (+6.76%)	🔍
`./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts`	568 B	+28 B (+5.19%)	🔍
`./packages/react/dist/components/DropdownSelector/Popover/index.d.ts`	658 B	+28 B (+4.44%)
`./packages/react/dist/components/IconButton/index.d.ts`	665 B	+35 B (+5.56%)	🔍
`./packages/react/dist/components/Modal/Dialog/index.d.ts`	373 B	-45 B (-10.77%)	👏
`./packages/react/dist/components/Modal/index.d.ts`	2.15 kB	+56 B (+2.68%)
`./packages/react/dist/components/Modal/ModalPlumbing.d.ts`	1.27 kB	-302 B (-19.17%)	👏
`./packages/react/dist/components/TagItem/index.d.ts`	765 B	+35 B (+4.79%)	🔍
`./packages/react/dist/components/TextArea/index.d.ts`	1.25 kB	-68 B (-5.15%)	✅
`./packages/react/dist/components/TextField/AssistiveText/index.d.ts`	433 B	-110 B (-20.26%)	🎉
`./packages/react/dist/components/TextField/index.d.ts`	1.38 kB	-52 B (-3.62%)
`./packages/react/dist/core/CharcoalProvider.d.ts`	270 B	+28 B (+11.57%)	⚠️
`./packages/react/dist/core/SSRProvider.d.ts`	323 B	+81 B (+33.47%)	🚨
`./packages/styled/dist/addThemeUtils.story.d.ts`	330 B	+28 B (+9.27%)	🔍
`./packages/styled/dist/index.cjs.js`	31 kB	-2 B (-0.01%)
`./packages/styled/dist/index.d.ts`	6.84 kB	-40 B (-0.58%)
`./packages/styled/dist/index.esm.js`	27.7 kB	-2 B (-0.01%)
`./packages/styled/dist/SetThemeScript.d.ts`	933 B	+28 B (+3.09%)
`./packages/styled/dist/styles/assertiveRingCss.d.ts`	130 B	-11 B (-7.8%)	✅
`./packages/styled/dist/styles/disabledCss.d.ts`	120 B	-11 B (-8.4%)	✅
`./packages/styled/dist/styles/focusVisibleFocusRingCss.d.ts`	307 B	-11 B (-3.46%)
`./packages/styled/dist/TokenInjector.d.ts`	533 B	+28 B (+5.54%)	🔍
`./packages/styled/dist/util.d.ts`	4.39 kB	+153 B (+3.61%)
`./packages/styled/dist/utils/gap.d.ts`	394 B	-79 B (-16.7%)	👏
`./packages/styled/dist/utils/margin.d.ts`	766 B	-139 B (-15.36%)	👏
`./packages/styled/dist/utils/padding.d.ts`	796 B	-139 B (-14.87%)	👏
`./packages/styled/dist/utils/typographyCss.d.ts`	284 B	-22 B (-7.19%)	✅

ℹ️ View Unchanged

Filename	Size
`./packages/foundation/dist/border-radius.d.ts`	692 B
`./packages/foundation/dist/breakpoint.d.ts`	225 B
`./packages/foundation/dist/color.d.ts`	171 B
`./packages/foundation/dist/effect.d.ts`	1.08 kB
`./packages/foundation/dist/grid.d.ts`	396 B
`./packages/foundation/dist/index.cjs.js`	2.82 kB
`./packages/foundation/dist/index.d.ts`	230 B
`./packages/foundation/dist/index.esm.js`	1.44 kB
`./packages/foundation/dist/spacing.d.ts`	305 B
`./packages/foundation/dist/typography.d.ts`	790 B
`./packages/icons-cli/dist/index.js`	20.3 kB
`./packages/icons/dist/charcoalIconFiles.d.ts`	4.74 kB
`./packages/icons/dist/index.cjs.js`	9.38 kB
`./packages/icons/dist/index.d.ts`	478 B
`./packages/icons/dist/index.esm.js`	7.93 kB
`./packages/icons/dist/loaders/CharcoalIconFilesLoader.d.ts`	7.49 kB
`./packages/icons/dist/loaders/CustomIconLoader.d.ts`	417 B
`./packages/icons/dist/loaders/index.d.ts`	181 B
`./packages/icons/dist/loaders/Loadable.d.ts`	98 B
`./packages/icons/dist/loaders/PixivIconLoadError.d.ts`	153 B
`./packages/icons/dist/PixivIcon.d.ts`	1.55 kB
`./packages/icons/dist/PixivIcon.story.d.ts`	428 B
`./packages/icons/dist/PixivIcon.test.d.ts`	55 B
`./packages/icons/dist/ssr.d.ts`	75 B
`./packages/pullrequest-cli/dist/index.js`	6.9 kB
`./packages/react-sandbox/dist/_lib/compat.d.ts`	427 B
`./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts`	340 B
`./packages/react-sandbox/dist/components/TextEllipsis/helper.d.ts`	235 B
`./packages/react-sandbox/dist/components/WithIcon/index.d.ts`	1.07 kB
`./packages/react-sandbox/dist/foundation/constants.d.ts`	208 B
`./packages/react-sandbox/dist/foundation/support.d.ts`	131 B
`./packages/react-sandbox/dist/foundation/utils.d.ts`	613 B
`./packages/react-sandbox/dist/hooks/index.d.ts`	148 B
`./packages/react-sandbox/dist/index.d.ts`	1.38 kB
`./packages/react/dist/_lib/compat.d.ts`	1.19 kB
`./packages/react/dist/_lib/index.d.ts`	1.02 kB
`./packages/react/dist/_lib/useClassNames.d.ts`	192 B
`./packages/react/dist/_lib/useForwardedRef.d.ts`	169 B
`./packages/react/dist/components/Checkbox/CheckboxInput/index.d.ts`	628 B
`./packages/react/dist/components/Checkbox/CheckboxWithLabel.d.ts`	307 B
`./packages/react/dist/components/Checkbox/index.d.ts`	668 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.d.ts`	373 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts`	480 B
`./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts`	412 B
`./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts`	405 B
`./packages/react/dist/components/DropdownSelector/Popover/usePreventScroll.d.ts`	140 B
`./packages/react/dist/components/DropdownSelector/utils/findPreviewRecursive.d.ts`	411 B
`./packages/react/dist/components/FieldLabel/index.d.ts`	492 B
`./packages/react/dist/components/Icon/index.d.ts`	498 B
`./packages/react/dist/components/LoadingSpinner/index.d.ts`	678 B
`./packages/react/dist/components/Modal/ModalBackgroundContext.d.ts`	231 B
`./packages/react/dist/components/Modal/useCustomModalOverlay.d.ts`	689 B
`./packages/react/dist/components/Radio/index.d.ts`	494 B
`./packages/react/dist/components/Radio/RadioGroup/index.d.ts`	699 B
`./packages/react/dist/components/Radio/RadioGroupContext.d.ts`	339 B
`./packages/react/dist/components/Radio/RadioInput/index.d.ts`	584 B
`./packages/react/dist/components/SegmentedControl/index.d.ts`	758 B
`./packages/react/dist/components/SegmentedControl/RadioGroupContext.d.ts`	362 B
`./packages/react/dist/components/Switch/index.d.ts`	452 B
`./packages/react/dist/components/Switch/SwitchInput/index.d.ts`	482 B
`./packages/react/dist/components/Switch/SwitchWithLabel.d.ts`	308 B
`./packages/react/dist/components/TextField/useFocusWithClick.d.ts`	242 B
`./packages/react/dist/core/OverlayProvider.d.ts`	101 B
`./packages/react/dist/index.cjs.js`	52.6 kB
`./packages/react/dist/index.d.ts`	1.86 kB
`./packages/react/dist/index.esm.js`	47.2 kB
`./packages/styled/dist/builders/border.d.ts`	685 B
`./packages/styled/dist/builders/borderRadius.d.ts`	440 B
`./packages/styled/dist/builders/colors.d.ts`	1.3 kB
`./packages/styled/dist/builders/elementEffect.d.ts`	533 B
`./packages/styled/dist/builders/o.d.ts`	5.91 kB
`./packages/styled/dist/builders/outline.d.ts`	638 B
`./packages/styled/dist/builders/size.d.ts`	1.19 kB
`./packages/styled/dist/builders/spacing.d.ts`	1.17 kB
`./packages/styled/dist/builders/transition.d.ts`	287 B
`./packages/styled/dist/builders/typography.d.ts`	624 B
`./packages/styled/dist/defineThemeVariables.test.d.ts`	66 B
`./packages/styled/dist/factories/lib.d.ts`	3.96 kB
`./packages/styled/dist/helper.d.ts`	2.05 kB
`./packages/styled/dist/index.test.d.ts`	204 B
`./packages/styled/dist/internals/index.d.ts`	1.6 kB
`./packages/styled/dist/storyHelper.d.ts`	386 B
`./packages/styled/dist/utils/addThemeUtils.d.ts`	383 B
`./packages/styled/dist/utils/CharcoalStyledTheme.d.ts`	1.43 kB
`./packages/styled/dist/utils/helpers/pxIfNum.d.ts`	99 B
`./packages/styled/dist/utils/helpers/SpacingType.d.ts`	137 B
`./packages/tailwind-config/dist/_lib/compat.d.ts`	423 B
`./packages/tailwind-config/dist/_lib/TailwindBuild.d.ts`	755 B
`./packages/tailwind-config/dist/colors/plugin.d.ts`	428 B
`./packages/tailwind-config/dist/colors/plugin.test.d.ts`	52 B
`./packages/tailwind-config/dist/colors/pluginTokenV1.d.ts`	1.48 kB
`./packages/tailwind-config/dist/colors/toTailwindConfig.d.ts`	399 B
`./packages/tailwind-config/dist/colors/toTailwindConfig.test.d.ts`	62 B
`./packages/tailwind-config/dist/colors/utils.d.ts`	347 B
`./packages/tailwind-config/dist/docs/borderRadius/BorderRadius.d.ts`	119 B
`./packages/tailwind-config/dist/docs/borderRadius/index.d.ts`	175 B
`./packages/tailwind-config/dist/docs/colors/Colors.d.ts`	107 B
`./packages/tailwind-config/dist/docs/colors/index.d.ts`	201 B
`./packages/tailwind-config/dist/docs/colors/TextBgColor.d.ts`	175 B
`./packages/tailwind-config/dist/docs/colors/TextBgColor.story.d.ts`	298 B
`./packages/tailwind-config/dist/docs/colors/TextColors.d.ts`	115 B
`./packages/tailwind-config/dist/docs/gradient/Gradients.d.ts`	113 B
`./packages/tailwind-config/dist/docs/gradient/index.d.ts`	433 B
`./packages/tailwind-config/dist/docs/gradient/utils.d.ts`	120 B
`./packages/tailwind-config/dist/docs/index.d.ts`	360 B
`./packages/tailwind-config/dist/docs/screens/index.d.ts`	160 B
`./packages/tailwind-config/dist/docs/screens/Screens.d.ts`	109 B
`./packages/tailwind-config/dist/docs/spacing/index.d.ts`	160 B
`./packages/tailwind-config/dist/docs/spacing/Spacing.d.ts`	109 B
`./packages/tailwind-config/dist/docs/typography/HalfLeading.d.ts`	117 B
`./packages/tailwind-config/dist/docs/typography/index.d.ts`	346 B
`./packages/tailwind-config/dist/docs/typography/Sizes.d.ts`	105 B
`./packages/tailwind-config/dist/foundation.d.ts`	360 B
`./packages/tailwind-config/dist/gradient/plugin.d.ts`	816 B
`./packages/tailwind-config/dist/gradient/plugin.test.d.ts`	52 B
`./packages/tailwind-config/dist/index.cjs.js`	15.9 kB
`./packages/tailwind-config/dist/index.d.ts`	576 B
`./packages/tailwind-config/dist/index.esm.js`	13.7 kB
`./packages/tailwind-config/dist/index.test.d.ts`	51 B
`./packages/tailwind-config/dist/tokenV2.d.ts`	179 B
`./packages/tailwind-config/dist/tokenV2.test.d.ts`	53 B
`./packages/tailwind-config/dist/types.d.ts`	855 B
`./packages/tailwind-config/dist/typography/plugin.d.ts`	146 B
`./packages/tailwind-config/dist/util.d.ts`	865 B
`./packages/tailwind-diff/dist/commands/check.d.ts`	296 B
`./packages/tailwind-diff/dist/commands/check.js`	4.37 kB
`./packages/tailwind-diff/dist/commands/dump.d.ts`	185 B
`./packages/tailwind-diff/dist/commands/dump.js`	1.26 kB
`./packages/tailwind-diff/dist/defer.d.ts`	164 B
`./packages/tailwind-diff/dist/defer.js`	792 B
`./packages/tailwind-diff/dist/index.d.ts`	46 B
`./packages/tailwind-diff/dist/index.js`	1.84 kB
`./packages/tailwind-diff/dist/packageManager.d.ts`	323 B
`./packages/tailwind-diff/dist/packageManager.js`	1.85 kB
`./packages/tailwind-diff/dist/style.d.ts`	436 B
`./packages/tailwind-diff/dist/style.js`	2.68 kB
`./packages/tailwind-diff/dist/withPackages.d.ts`	464 B
`./packages/tailwind-diff/dist/withPackages.js`	3.24 kB
`./packages/theme/dist/abstract-theme.d.ts`	1.19 kB
`./packages/theme/dist/default.d.ts`	163 B
`./packages/theme/dist/index.cjs.js`	5.49 kB
`./packages/theme/dist/index.d.ts`	121 B
`./packages/theme/dist/index.esm.js`	3.49 kB
`./packages/theme/dist/theme.d.ts`	2.87 kB
`./packages/theme/dist/unstable-css/_variables_dark.css.d.ts`	26 B
`./packages/theme/dist/unstable-css/_variables_light.css.d.ts`	26 B
`./packages/theme/dist/unstable-token-object/helpers/changecase-keys.d.ts`	554 B
`./packages/theme/dist/unstable-token-object/helpers/changecase-keys.test-d.d.ts`	63 B
`./packages/theme/dist/unstable-token-object/helpers/changecase-keys.test.d.ts`	61 B
`./packages/theme/dist/unstable-token-object/helpers/is-empty-array.d.ts`	119 B
`./packages/theme/dist/unstable-token-object/helpers/nest-object.d.ts`	397 B
`./packages/theme/dist/unstable-token-object/helpers/nest-object.test.d.ts`	57 B
`./packages/theme/dist/unstable-token-object/index.cjs.js`	5.01 kB
`./packages/theme/dist/unstable-token-object/index.d.ts`	2.15 kB
`./packages/theme/dist/unstable-token-object/index.esm.js`	3.38 kB
`./packages/theme/dist/unstable-token-object/reference-token.d.ts`	299 B
`./packages/theme/dist/unstable-token-object/reference-token.test.d.ts`	61 B
`./packages/theme/dist/unstable-token-object/to-token-object.d.ts`	828 B
`./packages/theme/dist/unstable-token-object/token-object.bench.d.ts`	59 B
`./packages/theme/dist/unstable-token-object/token-object.test.d.ts`	58 B
`./packages/theme/dist/unstable-token-object/types.d.ts`	614 B
`./packages/token-cli/dist/index.js`	7.2 kB
`./packages/utils/dist/index.cjs.js`	6.81 kB
`./packages/utils/dist/index.d.ts`	3.17 kB
`./packages/utils/dist/index.esm.js`	4.67 kB

_{compressed-size-action}

…pgrade-react18-1

…rade-react18-1

naporin0624 added 5 commits August 8, 2024 08:45

chore: remove unused dependencies for testing

605902b

chore: upgrade react, react-dom 18

303e2d3

chore(react): remove styled peer deps

c99828d

chore: upgrade styled-components

5154fa0

chore: fix styled-components upgrade types

cae19c2

naporin0624 added the major label Aug 8, 2024

naporin0624 self-assigned this Aug 8, 2024

naporin0624 changed the base branch from main to v4.0.0 August 8, 2024 10:28

chore: empty

0196a7d

naporin0624 temporarily deployed to preview-channel August 8, 2024 10:34 — with GitHub Actions Inactive

naporin0624 added the image snapshots update Pull requests that update image snapshots label Aug 8, 2024

chore: exclude bundlesize

188064b

naporin0624 temporarily deployed to preview-channel August 8, 2024 10:49 — with GitHub Actions Inactive

naporin0624 removed the image snapshots update Pull requests that update image snapshots label Aug 8, 2024

chore(styled): change ThemeProvider theme function

5c18afb

naporin0624 temporarily deployed to preview-channel August 8, 2024 11:03 — with GitHub Actions Inactive

chore(styled): add &

4231eb7

naporin0624 temporarily deployed to preview-channel August 8, 2024 11:20 — with GitHub Actions Inactive

chore(styled): update snapshot

f11a700

naporin0624 deployed to preview-channel August 8, 2024 11:25 — with GitHub Actions View deployment

naporin0624 marked this pull request as ready for review August 8, 2024 12:07

Merge branch 'v4.0.0' of ssh://github.com/pixiv/charcoal into chore/u…

c2f0941

…pgrade-react18-1

naporin0624 deployed to preview-channel August 28, 2024 07:57 — with GitHub Actions View deployment

Merge branch 'v4.0.0' of ssh://github.com/pixiv/charcoal into chore/u…

eb676bf

…pgrade-react18-1

naporin0624 deployed to preview-channel November 20, 2024 05:35 — with GitHub Actions View deployment

yue4u mentioned this pull request Nov 20, 2024

feat: react 19 codemod #654

Open

3 tasks

naporin0624 changed the base branch from v4.0.0 to main December 24, 2024 20:38

Merge branch 'main' of ssh://github.com/pixiv/charcoal into chore/upg…

4e2f7c3

…rade-react18-1

naporin0624 temporarily deployed to preview-channel December 24, 2024 20:40 — with GitHub Actions Inactive

chore(react): update snapshot

771093c

naporin0624 temporarily deployed to preview-channel December 24, 2024 20:55 — with GitHub Actions Inactive

Merge branch 'main' of ssh://github.com/pixiv/charcoal into chore/upg…

af1fa33

…rade-react18-1

naporin0624 temporarily deployed to preview-channel December 25, 2024 06:13 — with GitHub Actions Inactive

Merge branch 'main' of ssh://github.com/pixiv/charcoal into chore/upg…

190e5d1

…rade-react18-1

naporin0624 deployed to preview-channel December 25, 2024 07:50 — with GitHub Actions View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upgrade react 18 & styled-componets 6 #616

upgrade react 18 & styled-componets 6 #616

naporin0624 commented Aug 8, 2024 •

edited

Loading

github-actions bot commented Aug 8, 2024 •

edited

Loading

github-actions bot commented Aug 8, 2024 •

edited

Loading

upgrade react 18 & styled-componets 6 #616

Are you sure you want to change the base?

upgrade react 18 & styled-componets 6 #616

Conversation

naporin0624 commented Aug 8, 2024 • edited Loading

やったこと

動作確認環境

チェックリスト

github-actions bot commented Aug 8, 2024 • edited Loading

github-actions bot commented Aug 8, 2024 • edited Loading

naporin0624 commented Aug 8, 2024 •

edited

Loading

github-actions bot commented Aug 8, 2024 •

edited

Loading

github-actions bot commented Aug 8, 2024 •

edited

Loading