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>

Dockerfile.production

@@ -13,7 +13,6 @@ WORKDIR /build
 COPY package.json package-lock.json ./
 COPY shared/package.json shared/package-lock.json ./shared/
 COPY frontend/package.json frontend/package-lock.json ./frontend/
-COPY frontend/patches ./frontend/patches
 
 # Allow running of postinstall scripts
 # RUN npm config set unsafe-perm true

frontend/.storybook/preview.tsx

@@ -3,7 +3,6 @@
  * @see https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
  */
 import 'inter-ui/inter.css'
-import 'focus-visible/dist/focus-visible.min.js'
 
 import { HelmetProvider } from 'react-helmet-async'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -35,6 +34,8 @@ const withReactQuery: Decorator = (storyFn) => {
     },
   })
   return (
+    // FIXME: react 18 types
+    // @ts-expect-error missing FC type in old version
     <QueryClientProvider client={queryClient}>
       <AuthProvider>{storyFn()}</AuthProvider>
     </QueryClientProvider>

frontend/package.json

@@ -5,13 +5,14 @@
   "type": "module",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^1.8.6",
+    "@chakra-ui/react": "^2.8.2",
     "@datadog/browser-logs": "^4.50.1",
     "@datadog/browser-rum": "^4.34.1",
     "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
-    "@floating-ui/react-dom-interactions": "^0.9.3",
+    "@floating-ui/react": "^0.26.13",
     "@growthbook/growthbook-react": "^0.17.0",
+    "@hello-pangea/dnd": "^16.6.0",
     "@loadable/component": "^5.16.4",
     "@opengovsg/formsg-sdk": "^0.12.0-alpha.1",
     "@stablelib/base64": "^1.0.1",
@@ -32,8 +33,7 @@
     "dedent": "^0.7.0",
     "downshift": "^7.3.2",
     "file-saver": "^2.0.5",
-    "focus-visible": "^5.2.0",
-    "framer-motion": "^5.4.5",
+    "framer-motion": "^11.1.7",
     "fuzzysort": "^2.0.1",
     "http-status-codes": "^2.2.0",
     "i18next": "^21.6.16",
@@ -48,11 +48,10 @@
     "node-stdlib-browser": "^1.2.0",
     "p-queue": "^7.2.0",
     "polyfill-object.fromentries": "^1.0.1",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.0",
+    "react": "^18.3.0",
     "react-csv": "^2.2.2",
     "react-dev-inspector": "^1.8.6",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.0",
     "react-dropzone": "^11.4.2",
     "react-focus-lock": "^2.7.1",
     "react-google-charts": "^4.0.1",
@@ -61,8 +60,8 @@
     "react-i18next": "^11.16.7",
     "react-icons": "^4.3.1",
     "react-input-mask": "^3.0.0-alpha.2",
-    "react-joyride": "^2.4.0",
-    "react-markdown": "^8.0.3",
+    "react-joyride": "^2.8.1",
+    "react-markdown": "^9.0.1",
     "react-query": "^3.34.2",
     "react-router-dom": "^6.0.2",
     "react-roving-tabindex": "^3.2.0",
@@ -74,15 +73,15 @@
     "react-virtuoso": "^2.14.0",
     "react-waypoint": "^10.1.0",
     "react-wordcloud": "^1.2.7",
-    "remark-breaks": "^3.0.2",
-    "remark-gfm": "^3.0.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.0",
     "rooks": "^5.11.0",
     "simplur": "^3.0.1",
     "spark-md5": "^3.0.2",
     "stopword": "^2.0.8",
     "stripe": "^11.1.0",
     "timezone-mock": "^1.3.6",
-    "type-fest": "^2.8.0",
+    "type-fest": "^4.17.0",
     "typescript": "^4.5.3",
     "use-debounce": "^7.0.1",
     "use-draggable-scroll": "^0.1.0",
@@ -91,23 +90,9 @@
     "web-vitals": "^2.1.2",
     "zustand": "^4.1.1"
   },
-  "scriptComments": {
-    "clean:emotion-types": [
-      "Prevents injected emotion types from conflicting with ChakraUI types, such as `css`.",
-      "See https://github.com/emotion-js/emotion/issues/1800"
-    ],
-    "build": [
-      "The flags are required for the app to build successfully.",
-      "`CI=false` ensures that warnings in the app linter are not treated as errors (preventing a build)",
-      "`BUILD_PATH='../dist/frontend` ensures build output to be created in the root /dist folder",
-      "`INLINE_RUNTIME_CHUNK=false` prevents inline scripts from appearing in the build output. This is required due to our strict CSP rules on the backend that disallow inline scripts",
-      "`SKIP_PREFLIGHT_CHECK=true` skips node_module warnings that results from having a root node_module above this application"
-    ]
-  },
   "scripts": {
-    "gen:theme-typings": "chakra-cli tokens src/theme/index.ts --out node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts || true",
-    "clean:emotion-types": "rimraf node_modules/@emotion/core/types",
-    "postinstall": "patch-package && npm run gen:theme-typings && npm run clean:emotion-types && npm --prefix ../shared install",
+    "postinstall": "npm run gen:theme-typings && npm --prefix ../shared install",
+    "gen:theme-typings": "chakra-cli tokens --template augmentation src/theme/index.ts || true",
     "start": "vite",
     "build": "vite build",
     "test": "cross-env SKIP_PREFLIGHT_CHECK=true vitest",
@@ -134,32 +119,29 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
-    "@storybook/addon-a11y": "^8.0.9",
-    "@storybook/addon-actions": "^8.0.9",
-    "@storybook/addon-essentials": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/addon-themes": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/node-logger": "^8.0.9",
-    "@storybook/preset-create-react-app": "^8.0.9",
-    "@storybook/preview-api": "^8.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-vite": "^8.0.9",
-    "@storybook/test": "^8.0.9",
-    "@storybook/theming": "^8.0.9",
-    "@testing-library/dom": "^8.11.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^14.4.3",
+    "@storybook/addon-a11y": "8.0.9",
+    "@storybook/addon-actions": "8.0.9",
+    "@storybook/addon-essentials": "8.0.9",
+    "@storybook/addon-interactions": "8.0.9",
+    "@storybook/addon-links": "8.0.9",
+    "@storybook/addon-themes": "8.0.9",
+    "@storybook/blocks": "8.0.9",
+    "@storybook/node-logger": "8.0.9",
+    "@storybook/preset-create-react-app": "8.0.9",
+    "@storybook/preview-api": "8.0.9",
+    "@storybook/react": "8.0.9",
+    "@storybook/react-vite": "8.0.9",
+    "@storybook/test": "8.0.9",
+    "@storybook/theming": "8.0.9",
+    "@testing-library/react": "^15.0.5",
+    "@testing-library/user-event": "^14.5.2",
     "@types/dedent": "^0.7.0",
     "@types/file-saver": "^2.0.3",
     "@types/gtag.js": "0.0.10",
     "@types/loadable__component": "^5.13.9",
-    "@types/node": "^16.11.12",
-    "@types/react": "^17.0.80",
-    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react": "^18.3.0",
     "@types/react-csv": "^1.1.2",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.3.0",
     "@types/react-input-mask": "^3.0.1",
     "@types/react-router-dom": "^5.3.2",
     "@types/react-table": "^7.7.9",
@@ -186,13 +168,12 @@
     "mockdate": "^3.0.5",
     "msw": "^1.3.3",
     "msw-storybook-addon": "^1.10.0",
-    "patch-package": "^6.4.7",
     "prettier": "^3.2.5",
     "puppeteer": "^13.0.0",
     "react-refresh": "^0.14.0",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
-    "storybook": "^8.0.9",
+    "storybook": "8.0.9",
     "storybook-react-i18next": "^3.0.1",
     "vite": "^5.2.10",
     "vite-plugin-svgr": "^4.2.0",

frontend/src/app/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Inspector, InspectParams } from 'react-dev-inspector'
 import { HelmetProvider } from 'react-helmet-async'
 import { QueryClient, QueryClientProvider } from 'react-query'
@@ -65,6 +64,8 @@ export const App = (): JSX.Element => {
         />
       )}
       <HelmetProvider>
+        {/* FIXME: react 18 types */}
+        {/* @ts-expect-error missing FC type in old version */}
         <QueryClientProvider client={queryClient}>
           <ReactQueryDevtools initialIsOpen={false} />
           <AppHelmet />

frontend/src/assets/svgrs/singpass/SingpassFullLogoSvgr.tsx

@@ -10,7 +10,7 @@ const MemoSingpassFullLogoSvgr = memo(
       ref={ref}
       {...props}
     >
-      <g clip-path="url(#clip0_981_45529)">
+      <g clipPath="url(#clip0_981_45529)">
         <path
           d="M4.11846 13.1432C2.11097 13.1432 0.690398 12.4589 0.0683594 11.8831L1.40069 9.90323C2.23522 10.6231 3.26595 10.9835 4.11846 10.9835C4.84674 10.9835 5.16633 10.7673 5.16633 10.3713C5.16633 10.0656 4.91786 9.83115 4.13646 9.65141L2.55565 9.27365C1.00998 8.91241 0.281703 7.95805 0.281703 6.64418C0.281703 4.84402 1.70228 3.78198 3.816 3.78198C5.44992 3.78198 6.76427 4.28565 7.4043 4.86225L6.07196 6.84218C5.48591 6.30203 4.63339 5.90606 3.816 5.90606C3.14085 5.90606 2.83926 6.14052 2.83926 6.50003C2.83926 6.85953 3.15884 7.05841 3.76289 7.20168L5.34369 7.56206C6.95962 7.92244 7.74187 8.80385 7.74187 10.1004C7.74187 11.9544 6.37356 13.1432 4.11846 13.1432ZM13.6033 12.9626H16.2679V8.12044C16.2679 6.93248 16.836 6.19435 17.9378 6.19435C18.9857 6.19435 19.5367 6.80656 19.5367 8.12044V12.9634H22.2013V7.43615C22.2013 5.02377 21.0112 3.78198 18.9685 3.78198C17.7964 3.78198 16.9079 4.25004 16.2688 5.16792V4.59219C16.2688 4.1962 16.0383 3.96174 15.6467 3.96174H13.6041V12.9626H13.6033ZM33.0004 3.96174V11.7564C33.0004 15.1405 30.8335 16.4908 28.1689 16.4908C26.3927 16.4908 24.9181 16.0227 24.0305 15.2125L25.4159 13.1241C26.0021 13.6998 26.9436 14.2226 28.1689 14.2226C29.5364 14.2226 30.3358 13.3403 30.3358 12.1167V11.541C29.6965 12.3512 28.7729 12.7107 27.636 12.7107C25.4871 12.7107 23.6219 10.8029 23.6219 8.24635C23.6219 5.68982 25.4871 3.78198 27.636 3.78198C28.7729 3.78198 29.7316 4.21444 30.3358 5.13232V4.59219C30.3358 4.1962 30.5671 3.96174 30.9577 3.96174H33.0004ZM30.4248 8.24635C30.4248 7.07664 29.5543 6.15788 28.3471 6.15788C27.2282 6.15788 26.3224 7.07577 26.3224 8.24635C26.3224 9.41606 27.2282 10.3348 28.3471 10.3348C29.5543 10.3348 30.4248 9.41606 30.4248 8.24635ZM44.6521 8.46258C44.6521 11.2353 42.7867 13.1432 40.4776 13.1432C39.2696 13.1432 38.3109 12.7828 37.6177 11.9735V16.2763H34.9531V3.96174H36.9964C37.3872 3.96174 37.6185 4.1962 37.6185 4.59219V5.13232C38.2756 4.21444 39.2704 3.78198 40.4785 3.78198C42.7876 3.78198 44.6521 5.68982 44.6521 8.46258ZM41.9522 8.46258C41.9522 7.11224 41.0107 6.15788 39.7674 6.15788C38.5063 6.15788 37.5295 7.11224 37.5295 8.46258C37.5295 9.81291 38.5063 10.7673 39.7674 10.7673C41.0114 10.7664 41.9522 9.81206 41.9522 8.46258ZM55.4871 3.96174V12.9626H52.8225V11.7928C52.1654 12.7107 51.1706 13.1432 49.9625 13.1432C47.6535 13.1432 45.7881 11.2353 45.7881 8.46258C45.7881 5.68982 47.6535 3.78198 49.9625 3.78198C51.1706 3.78198 52.1654 4.21444 52.8225 5.13232V4.59219C52.8225 4.1962 53.0538 3.96174 53.4446 3.96174H55.4871ZM52.9115 8.46258C52.9115 7.11224 51.9348 6.15788 50.6736 6.15788C49.4303 6.15788 48.4888 7.11224 48.4888 8.46258C48.4888 9.81291 49.4303 10.7673 50.6736 10.7673C51.9348 10.7664 52.9115 9.81206 52.9115 8.46258ZM60.8876 13.1432C63.1436 13.1432 64.511 11.9552 64.511 10.1012C64.511 8.80473 63.7296 7.92332 62.1127 7.56294L60.5319 7.20256C59.9279 7.05841 59.6083 6.86041 59.6083 6.50089C59.6083 6.14138 59.91 5.90692 60.585 5.90692C61.4025 5.90692 62.255 6.30291 62.841 6.84303L64.1735 4.86312C63.5342 4.28738 62.2199 3.78285 60.585 3.78285C58.4714 3.78285 57.0507 4.84489 57.0507 6.64506C57.0507 7.95891 57.779 8.91327 59.3247 9.27365L60.9055 9.65141C61.6869 9.83115 61.9354 10.0656 61.9354 10.3713C61.9354 10.7673 61.6159 10.9835 60.8876 10.9835C60.035 10.9835 59.0051 10.6231 58.1698 9.90323L56.8375 11.8831C57.4595 12.4589 58.88 13.1432 60.8876 13.1432ZM69.3064 13.1432C71.5624 13.1432 72.9299 11.9552 72.9299 10.1012C72.9299 8.80473 72.1485 7.92332 70.5317 7.56294L68.9509 7.20256C68.3468 7.05841 68.0272 6.86041 68.0272 6.50089C68.0272 6.14138 68.3288 5.90692 69.004 5.90692C69.8214 5.90692 70.6739 6.30291 71.2599 6.84303L72.5924 4.86312C71.9531 4.28738 70.6389 3.78285 69.004 3.78285C66.8903 3.78285 65.4697 4.84489 65.4697 6.64506C65.4697 7.95891 66.1979 8.91327 67.7437 9.27365L69.3245 9.65141C70.1058 9.83115 70.3543 10.0656 70.3543 10.3713C70.3543 10.7673 70.0347 10.9835 69.3064 10.9835C68.4539 10.9835 67.424 10.6231 66.5887 9.90323L65.2564 11.8831C65.8785 12.4589 67.2998 13.1432 69.3064 13.1432Z"
           fill="#4A61C0"

frontend/src/components/Button/Button.tsx

@@ -5,17 +5,11 @@ import {
   IconProps,
 } from '@chakra-ui/react'
 
-import { ThemeButtonVariant } from '~theme/components/Button'
 import { ThemeColorScheme } from '~theme/foundations/colours'
 
 import Spinner from '../Spinner'
 
 export interface ButtonProps extends ChakraButtonProps {
-  /**
-   * The variant of the button.
-   */
-  variant?: ThemeButtonVariant
-
   /**
    * Loading spinner font size. Defaults to `1.5rem`.
    */
@@ -29,6 +23,11 @@ export interface ButtonProps extends ChakraButtonProps {
    * Base color intensity of button.
    */
   basecolorintensity?: 500 | 600
+
+  /**
+   * @note backwards compatibility with Chakra V1
+   */
+  isFullWidth?: boolean
 }
 
 export const Button = forwardRef<ButtonProps, 'button'>(
@@ -37,7 +36,7 @@ export const Button = forwardRef<ButtonProps, 'button'>(
       <ChakraButton
         ref={ref}
         spinner={<Spinner fontSize={spinnerFontSize ?? '1.5rem'} />}
-        isFullWidth={isFullWidth}
+        width={isFullWidth ? '100%' : undefined}
         {...props}
         {...(isFullWidth ? { minH: '3.5rem' } : {})}
       >

frontend/src/components/Calendar/Calendar.tsx

@@ -1,13 +1,13 @@
 import {
   Box,
   forwardRef,
-  StylesProvider,
   useControllableState,
   useMultiStyleConfig,
 } from '@chakra-ui/react'
 
 import { ThemeColorScheme } from '~theme/foundations/colours'
 
+import { CalendarStylesProvider } from './CalendarBase/CalendarStyleProvider'
 import {
   CalendarAria,
   CalendarBaseProps,
@@ -52,13 +52,13 @@ export const Calendar = forwardRef<CalendarProps, 'input'>(
         selectedDates={internalValue ?? undefined}
         onSelectDate={setInternalValue}
       >
-        <StylesProvider value={styles}>
+        <CalendarStylesProvider value={styles}>
           <CalendarAria />
           <Box sx={styles.container}>
             <CalendarPanel ref={initialFocusRef} />
             <CalendarTodayButton />
           </Box>
-        </StylesProvider>
+        </CalendarStylesProvider>
       </CalendarProvider>
     )
   },

frontend/src/components/Calendar/CalendarBase/CalendarContext.tsx

@@ -180,10 +180,6 @@ const useProvideCalendar = ({
         `.${generateClassNameForDate(classNameId, today)}`,
       ) as HTMLButtonElement | null
       elementToFocus?.focus()
-      // Workaround because for some reason the attributes do not
-      // get added automatically
-      elementToFocus?.classList.add('focus-visible')
-      elementToFocus?.setAttribute('data-focus-visible-added', 'true')
     })
   }, [classNameId])
 

frontend/src/components/Calendar/CalendarBase/CalendarHeader.tsx

@@ -6,14 +6,14 @@ import {
   SelectProps,
   Text,
   useBreakpointValue,
-  useStyles,
 } from '@chakra-ui/react'
 import { addMonths } from 'date-fns'
 
 import { BxChevronLeft, BxChevronRight } from '~assets/icons'
 import IconButton from '~components/IconButton'
 
 import { useCalendar } from './CalendarContext'
+import { useCalendarStyles } from './CalendarStyleProvider'
 import { MONTH_NAMES } from './utils'
 
 interface CalendarHeaderProps {
@@ -146,7 +146,7 @@ const MonthYear = memo(({ monthOffset }: CalendarHeaderProps) => {
 
 export const CalendarHeader = memo(
   ({ monthOffset }: CalendarHeaderProps): JSX.Element => {
-    const styles = useStyles()
+    const styles = useCalendarStyles()
     const {
       renderProps: { calendars, getBackProps, getForwardProps },
     } = useCalendar()

frontend/src/components/Calendar/CalendarBase/CalendarPanel.tsx

@@ -2,22 +2,21 @@ import {
   chakra,
   forwardRef,
   Stack,
-  Td,
   Text,
-  useStyles,
   VisuallyHidden,
 } from '@chakra-ui/react'
 import { isSameDay } from 'date-fns'
 
 import { useCalendar } from './CalendarContext'
 import { CalendarHeader } from './CalendarHeader'
+import { useCalendarStyles } from './CalendarStyleProvider'
 import { DayOfMonth } from './DayOfMonth'
 import { DAY_NAMES, generateClassNameForDate, MONTH_NAMES } from './utils'
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const CalendarPanel = forwardRef<{}, 'button'>(
   (_props, initialFocusRef): JSX.Element => {
-    const styles = useStyles()
+    const styles = useCalendarStyles()
     const {
       classNameId,
       dateToFocus,
@@ -59,7 +58,7 @@ export const CalendarPanel = forwardRef<{}, 'button'>(
                       {week.map((dateObj, index) => {
                         if (!dateObj) {
                           return (
-                            <Td
+                            <chakra.td
                               key={`${calendar.month}${calendar.year}${windex}${index}`}
                             />
                           )

frontend/src/components/Calendar/CalendarBase/CalendarStyleProvider.tsx

@@ -0,0 +1,6 @@
+import { createStylesContext } from '@chakra-ui/react'
+
+const [CalendarStylesProvider, useCalendarStyles] =
+  createStylesContext('Calendar')
+
+export { CalendarStylesProvider, useCalendarStyles }