feat: upgrade to react 18 and chakra v2 #7292
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced Apr 29, 2024
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
4 tasks
karrui
force-pushed
the
04-26-feat_upgrade_react_and_chakra-ui_react_v17_-_react_v18_chakra_v1_-_chakra_v2
branch
from
46b2d11
to
3351110
Compare
|
almost there, all the regressions are hopefully caught by frontend tests. thanks @opengovsg/formsg-engineers for the upkeep of tests! it's coming in super handy now :) |
|
Daaaaaang, great upgrades FTW @karrui 💪 !! What noticeable improvements from the upgrade can the team expect, and should be monitored? |
karrui
force-pushed
the
04-26-feat_upgrade_react_and_chakra-ui_react_v17_-_react_v18_chakra_v1_-_chakra_v2
branch
2 times, most recently
from
ecbc1d6
to
72d78b4
Compare
I think improvements are not noticeable to the public haha. This one just foundation to allow FormSG to use OGPDS (and not have upgrade path to react 19 get blocked when that comes out this year) Developer experience wise, should be must faster to start up. Tests also run faster. |
karrui
force-pushed
the
04-23-feat_add_initial_vite_config_and_new_eslint_rules
branch
from
2c7a9e4
to
9177241
Compare
karrui
force-pushed
the
04-26-feat_upgrade_react_and_chakra-ui_react_v17_-_react_v18_chakra_v1_-_chakra_v2
branch
from
72d78b4
to
8e5511e
Compare
karrui
commented
May 2, 2024
KenLSM
force-pushed
the
04-23-feat_add_initial_vite_config_and_new_eslint_rules
branch
from
2856457
to
f2a558a
Compare
react v17 -> react v18 chakra v1 -> chakra v2
new implementation doesn't work lol
really need to go to OGPDS soon lol
instead of following button's height
so the border won't look janky
KenLSM
force-pushed
the
04-26-feat_upgrade_react_and_chakra-ui_react_v17_-_react_v18_chakra_v1_-_chakra_v2
branch
from
f663c06
to
6d16f3c
Compare
KenLSM
approved these changes
Jun 11, 2024
KenLSM
merged commit 2db7cf4
into
04-23-feat_add_initial_vite_config_and_new_eslint_rules
18 of 19 checks passed
KenLSM
deleted the
04-26-feat_upgrade_react_and_chakra-ui_react_v17_-_react_v18_chakra_v1_-_chakra_v2
branch
KenLSM
added a commit
that referenced
this pull request
Oct 7, 2024
* feat: add initial vite config and new eslint rules * feat: replace CRA variables with Vite variables * feat: update ts-config * feat: remove craco, fix webpack -> esbuild errors * feat: update vite config for proxy and node polyfills * feat: make decryption workers work on Vite * fix: theme typing generation script * fix: bundle worker as es * fix: update storybook to work with vite * feat: upgrade to storybook v8 package with vite builder * fix: remove deprecated turbo-build storybook addon * fix: add missing node-stdlib-browser package * feat: switch to vitest, fix storybook test invocations * feat: format and lint * feat: update msw package (to v1 latest, not v2 yet) v2 requires more changes, not worth it for now * fix: set svgr loader to not inject default dimensions * fix: regression in storybook 7 that removes 100% height from stories * fix: remove preview changes from `.storybook/main.ts` actually good to snapshot full page instead of just fixed pages * fix(test): use expect instead of just awaiting canvas.findByText * fix: flakey toast test due to multiple tests running at the same time hypothesis is that multiple toasts are rendering??? * fix: modal bounding box for chromatic stories * feat: reuse old github secret env var instead of renaming to VITE_APP * feat: remove unused .builtime-env does not seem to be needed now that we use vite * fix: misrenamed import * feat: load datadog-chunk as separate script from main react app * chore: remove unused cmds, update cmds * feat: upgrade to react 18 and chakra v2 (#7292) * feat: upgrade react and chakra-ui react v17 -> react v18 chakra v1 -> chakra v2 * fix: breaking changes from Chakra v2 * fix: use React 18 * feat: update framer-motion, MotionBox instantiation * feat: update changed React.FC to FCC prop type * fix: sync all type-fest package types * fix: remove unnecessary package patches * feat: remove unnecessary scripts and script comments * fix: correctly generate chakra theme types * fix: revert motionbox back to old implementation new implementation doesn't work lol * fix: upgrade serverless type-fest to sync with rest of app * fix: use updated useToken call signature * fix: update react-joyride for React 18 compat * fix: types for allowed MyInfo types * fix: broken types assertions or code raised by linter * fix: invalid React SVG prop clip-path -> clipPath * fix: replace dnd package with React 18 compatible package * fix: update package to remove console warning about deprecated calls ReactMarkdown: Support for defaultProps will be removed from function components in a future major release. * fix: temporary fix for menu focus color desync final fix is to move to OGPDS * feat: update `@testing-library/*` packages remove unused testing-library/dom package * feat: lock storybook packages * fix: correctly upgrade virus-scanner type-fest package * fix: use `isDisabled` prop over disabled will not correctly set state if isDisabled is used instead * fix: test assertions due to RTL changes * fix: upgrade floating-ui package for compatibility * fix: compat issues in ChakraUI v2 * feat: update input theming for ChakraUI v2 * fix: NumberInput render * feat: update Drawer and Modal themes to have background using cssVars * fix: use explicit style context required by Chakra V2 * fix: correctly import from component Button * fix: update margin due to flex using `gap` now instead of the margin-top previously, which allowed for margin collapse * fix: update Rating component spacing due to flex gap change in chakra * fix: update YesNo field margins due to Flex gap change * fix: weird margins with collaborator menu, match width * fix: use __css instead of sx for FeatureBanner or text will be space-betweened * fix: button spacing for CreateWorkspaceModal * fix: button spacing for DeleteWorkspaceModal * fix: button spacing for RenameWorkspaceModal * fix: spacing on LandingPage sections * feat: update ParagraphField story to catch multiline changes too * feat: remove unnecessary focus-visible package * feat: update `isTruncated` -> `noOfLines` * feat: fix width of PermissionDropdown for consistent widths * fix: align ViewOnlyPermission row margins * fix: SingleSelect theme breaking because of Menu really need to go to OGPDS soon lol * fix: add padding to prefill lock icon * fix: add correct msw handlers for workspace page * fix: add back missing margins * fix: make AvatarMenu have automatic height instead of following button's height * fix: add back missing menuitem padding for SingleSelect * fix: update imported lottie file type * fix: correct modal story color scheme for cancel button * fix: set minH of TagInput to input's var * fix: use input exported css variables for styling TagInput * fix: move combobox input to the top when focused so the border won't look janky * feat: use mockdate decorator so skeleton width fixed in snapshot * fix: spacing of collaborator list view again * fix: landing page margins * fix: avatarmenudivider margins * fix: remove removed patches copy in dockerfile * remove ineffective white bg on style header --------- Co-authored-by: Ken <ken@open.gov.sg> * feat: upgrade typescript to 5.4.5 across app (#7305) * feat: upgrade react and chakra-ui react v17 -> react v18 chakra v1 -> chakra v2 * fix: breaking changes from Chakra v2 * fix: use React 18 * feat: update framer-motion, MotionBox instantiation * feat: update changed React.FC to FCC prop type * fix: sync all type-fest package types * fix: remove unnecessary package patches * feat: remove unnecessary scripts and script comments * fix: correctly generate chakra theme types * fix: revert motionbox back to old implementation new implementation doesn't work lol * fix: upgrade serverless type-fest to sync with rest of app * fix: use updated useToken call signature * fix: update react-joyride for React 18 compat * fix: types for allowed MyInfo types * fix: broken types assertions or code raised by linter * fix: invalid React SVG prop clip-path -> clipPath * fix: replace dnd package with React 18 compatible package * fix: update package to remove console warning about deprecated calls ReactMarkdown: Support for defaultProps will be removed from function components in a future major release. * fix: temporary fix for menu focus color desync final fix is to move to OGPDS * feat: update `@testing-library/*` packages remove unused testing-library/dom package * feat: lock storybook packages * fix: correctly upgrade virus-scanner type-fest package * fix: use `isDisabled` prop over disabled will not correctly set state if isDisabled is used instead * fix: test assertions due to RTL changes * fix: upgrade floating-ui package for compatibility * fix: compat issues in ChakraUI v2 * feat: update input theming for ChakraUI v2 * fix: NumberInput render * feat: update Drawer and Modal themes to have background using cssVars * fix: use explicit style context required by Chakra V2 * fix: correctly import from component Button * fix: update margin due to flex using `gap` now instead of the margin-top previously, which allowed for margin collapse * fix: update Rating component spacing due to flex gap change in chakra * fix: update YesNo field margins due to Flex gap change * fix: weird margins with collaborator menu, match width * fix: use __css instead of sx for FeatureBanner or text will be space-betweened * fix: button spacing for CreateWorkspaceModal * fix: button spacing for DeleteWorkspaceModal * fix: button spacing for RenameWorkspaceModal * fix: spacing on LandingPage sections * feat: update ParagraphField story to catch multiline changes too * feat: remove unnecessary focus-visible package * feat: update `isTruncated` -> `noOfLines` * feat: fix width of PermissionDropdown for consistent widths * fix: align ViewOnlyPermission row margins * fix: SingleSelect theme breaking because of Menu really need to go to OGPDS soon lol * fix: add padding to prefill lock icon * fix: add correct msw handlers for workspace page * fix: add back missing margins * fix: make AvatarMenu have automatic height instead of following button's height * fix: add back missing menuitem padding for SingleSelect * fix: update imported lottie file type * fix: correct modal story color scheme for cancel button * fix: set minH of TagInput to input's var * fix: use input exported css variables for styling TagInput * fix: move combobox input to the top when focused so the border won't look janky * feat: use mockdate decorator so skeleton width fixed in snapshot * fix: spacing of collaborator list view again * fix: landing page margins * fix: avatarmenudivider margins * fix: remove removed patches copy in dockerfile * remove ineffective white bg on style header * feat: upgrade typescript to 5.4.5 across app * fix: all frontend type errors after typescript upgrade * fix: backend type errors after upgrading typescript --------- Co-authored-by: Ken <ken@open.gov.sg> * fix: typing errors on setHasSingleSubmissionValidationError for preview * fix: add partialdeep typing on non-en i18n * fix: additional typing errors on stories * test: remove global playwright timeout, use individual test timeouts * fix: inifite mounting for StripePaymentContainer * refactor: remove unrendered text * fix: frm-1818 scroll lock trapping * fix: frm-1821 folder icon focus border clashing with folder text * fix: frm-1820 sharpen focus border n calendar * fix: frm-1817 insufficient padding between charts and icon * fix: ts typing, ts config, test config * fix: missing variable post-merge conflict resolution * fix: fe lint-sort * fix: circular deps warning by rollup * fix: FRM-1819 add custom detection element addon flag * try no logs * mute all logs * add missing tweetnacl module * revert test code * fix: old imports to beautiful-dnd, outdated package-lock * fix: linting issues from updated ts lib * fix: additional typing issues * fix: envvars not readable on vite builds --------- Co-authored-by: Ken <ken@open.gov.sg>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR upgrades React from React 17 to React 18, as well as ChakraUI v1 to v2. This is necessary due to ChakraUI V2 only being compatible with React 18.
In addition, a bunch of packages are upgraded too to allow for compatibility with React 18.
list of changed deps required to make the app work lol:
refrained from upgrading some packages that are not super required, will do it in later PRs.
This includes:
@tanstack/react-query
react-hook-form, etc