feat: migrate from CRA4 to Vite, Storybook to v8, jest to Vitest (#7285)

* 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]>
opengovsg · Oct 7, 2024 · d5d43d8 · d5d43d8
1 parent cb3cce5
commit d5d43d8
Show file tree

Hide file tree

Showing 398 changed files with 26,608 additions and 79,781 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -42,7 +42,9 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:

diff --git a/.github/workflows/deploy-eb.yml b/.github/workflows/deploy-eb.yml
@@ -42,21 +42,21 @@ jobs:
           echo "APP_VERSION=$(jq -r .version package.json)-$(echo ${GITHUB_REF##*/})-$(echo ${GITHUB_SHA} | cut -c1-8)" >> $GITHUB_ENV
       - name: Inject frontend build env vars
         env:
-          REACT_APP_DD_RUM_APP_ID: ${{ secrets.DD_RUM_APP_ID }}
-          REACT_APP_DD_RUM_CLIENT_TOKEN: ${{ secrets.DD_RUM_CLIENT_TOKEN }}
-          REACT_APP_DD_RUM_ENV: ${{ secrets.DD_ENV }}
-          REACT_APP_DD_SAMPLE_RATE: ${{ secrets.DD_SAMPLE_RATE }}
-          REACT_APP_GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
-          REACT_APP_FORMSG_SDK_MODE: ${{ secrets.REACT_APP_FORMSG_SDK_MODE }}
-          REACT_APP_URL: ${{ secrets.APP_URL }}
+          VITE_APP_DD_RUM_APP_ID: ${{ secrets.DD_RUM_APP_ID }}
+          VITE_APP_DD_RUM_CLIENT_TOKEN: ${{ secrets.DD_RUM_CLIENT_TOKEN }}
+          VITE_APP_DD_RUM_ENV: ${{ secrets.DD_ENV }}
+          VITE_APP_DD_SAMPLE_RATE: ${{ secrets.DD_SAMPLE_RATE }}
+          VITE_APP_GA_TRACKING_ID: ${{ secrets.GA_TRACKING_ID }}
+          VITE_APP_FORMSG_SDK_MODE: ${{ secrets.REACT_APP_FORMSG_SDK_MODE }}
+          VITE_APP_URL: ${{ secrets.APP_URL }}
         run: |
-          sed -i -e "s|@REACT_APP_URL|${{secrets.APP_URL}}|g" -e "s/@REACT_APP_DD_RUM_APP_ID/$REACT_APP_DD_RUM_APP_ID/g" -e "s/@REACT_APP_DD_RUM_CLIENT_TOKEN/$REACT_APP_DD_RUM_CLIENT_TOKEN/g" -e "s/@REACT_APP_DD_RUM_ENV/$REACT_APP_DD_RUM_ENV/g" -e "s/@REACT_APP_VERSION/${{env.APP_VERSION}}/g" -e "s/@REACT_APP_DD_SAMPLE_RATE/$REACT_APP_DD_SAMPLE_RATE/g" frontend/datadog-chunk.ts
-          echo REACT_APP_VERSION=${{env.APP_VERSION}} > frontend/.env
-          echo REACT_APP_URL=$REACT_APP_URL > frontend/.env
-          echo REACT_APP_GA_TRACKING_ID=$REACT_APP_GA_TRACKING_ID >> frontend/.env
-          echo REACT_APP_FORMSG_SDK_MODE=$REACT_APP_FORMSG_SDK_MODE >> frontend/.env
-          echo REACT_APP_DD_RUM_CLIENT_TOKEN=$REACT_APP_DD_RUM_CLIENT_TOKEN >> frontend/.env
-          echo REACT_APP_DD_RUM_ENV=$REACT_APP_DD_RUM_ENV >> frontend/.env
+          sed -i -e "s|@VITE_APP_URL|${{secrets.APP_URL}}|g" -e "s/@VITE_APP_DD_RUM_APP_ID/$VITE_APP_DD_RUM_APP_ID/g" -e "s/@VITE_APP_DD_RUM_CLIENT_TOKEN/$VITE_APP_DD_RUM_CLIENT_TOKEN/g" -e "s/@VITE_APP_DD_RUM_ENV/$VITE_APP_DD_RUM_ENV/g" -e "s/@VITE_APP_VERSION/${{env.APP_VERSION}}/g" -e "s/@VITE_APP_DD_SAMPLE_RATE/$VITE_APP_DD_SAMPLE_RATE/g" frontend/datadog-chunk.ts
+          echo VITE_APP_VERSION=${{env.APP_VERSION}} > frontend/.env
+          echo VITE_APP_URL=$VITE_APP_URL > frontend/.env
+          echo VITE_APP_GA_TRACKING_ID=$VITE_APP_GA_TRACKING_ID >> frontend/.env
+          echo VITE_APP_FORMSG_SDK_MODE=$VITE_APP_FORMSG_SDK_MODE >> frontend/.env
+          echo VITE_APP_DD_RUM_CLIENT_TOKEN=$VITE_APP_DD_RUM_CLIENT_TOKEN >> frontend/.env
+          echo VITE_APP_DD_RUM_ENV=$VITE_APP_DD_RUM_ENV >> frontend/.env
 
       - name: Configure AWS credentials
         uses: aws-actions/[email protected]

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Build
         env:
           NODE_OPTIONS: --max-old-space-size=4096 --openssl-legacy-provider -r ${{ env.DD_TRACE_PACKAGE }}
-          REACT_APP_FORMSG_SDK_MODE: 'test'
+          VITE_APP_FORMSG_SDK_MODE: 'test'
         run: npm run build
       - name: Run Playwright tests (login)
         env:

diff --git a/Dockerfile.production b/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

diff --git a/__tests__/e2e/email-submission.spec.ts b/__tests__/e2e/email-submission.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable playwright/expect-expect -- assertions are in helper */
 import mongoose from 'mongoose'
 import {
   BasicField,
@@ -55,6 +56,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with all fields', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -71,6 +73,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with all fields optional', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS.map((ff) =>
       createBlankVersion(createOptionalVersion(ff)),
@@ -148,6 +151,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with Singpass authentication', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -166,6 +170,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with Corppass authentication', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -184,6 +189,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with SGID authentication', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -231,6 +237,7 @@ test.describe('Email form submission', () => {
   test('Create and submit email mode form with all fields shown by logic', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const { formFields, formLogics } = TEST_ALL_FIELDS_SHOWN_BY_LOGIC
     const formSettings = getEmailSettings()

diff --git a/__tests__/e2e/encrypt-submission.spec.ts b/__tests__/e2e/encrypt-submission.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable playwright/expect-expect -- assertions are in helper */
 import mongoose from 'mongoose'
 import {
   BasicField,
@@ -58,6 +59,7 @@ test.describe('Storage form submission', () => {
   test('Create and submit storage mode form with all fields', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS
     const formLogics = NO_LOGIC
@@ -74,6 +76,7 @@ test.describe('Storage form submission', () => {
   test('Create and submit storage mode form with all fields optional', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const formFields = ALL_FIELDS.map((ff) =>
       createBlankVersion(createOptionalVersion(ff)),
@@ -92,6 +95,7 @@ test.describe('Storage form submission', () => {
   test('Create and submit storage mode form with all fields shown by logic', async ({
     page,
   }) => {
+    test.setTimeout(60 * 1000)
     // Define
     const { formFields, formLogics } = TEST_ALL_FIELDS_SHOWN_BY_LOGIC
     const formSettings = getEncryptSettings()

diff --git a/__tests__/e2e/helpers/createForm.ts b/__tests__/e2e/helpers/createForm.ts
@@ -178,7 +178,7 @@ const addSettings = async (
   // Open the form as the last thing to do!
   if (formSettings.status === FormStatus.Public) {
     // Go back to general settings, to open the form if necessary!
-    await page.getByRole('tab', { name: 'General' }).click()
+    await page.getByRole('tab', { name: 'General' }).dispatchEvent('click')
 
     // Ensure that we are on the general settings page
     await expect(

diff --git a/__tests__/e2e/helpers/submitForm.ts b/__tests__/e2e/helpers/submitForm.ts
@@ -111,8 +111,8 @@ const authForm = async (
         formSettings.authType === FormAuthType.CP
           ? ' (Corporate)'
           : formSettings.authType === FormAuthType.SGID
-          ? ' app'
-          : ''
+            ? ' app'
+            : ''
       }`,
     })
     .click()
@@ -235,7 +235,7 @@ const fillFields = async (
         for (let i = 0; i < vals.length; i++) {
           if (optionNums[i] === -1) {
             // Click and fill "Others", which is always the last element.
-            await options.last().click()
+            await options.last().dispatchEvent('click')
             await page
               .locator(`[name="${field._id}.othersInput"]`)
               .fill(vals[i])

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -122,7 +122,7 @@ services:
       # Bearer token API key format
       - API_KEY_VERSION=v1
       # env vars for growthbook
-      - GROWTHBOOK_CLIENT_KEY
+      - GROWTHBOOK_CLIENT_KEY=growthbook_client_key
       # env vars for virus scanner
       - VIRUS_SCANNER_LAMBDA_FUNCTION_NAME=function
       - WOGAA_SECRET_KEY

diff --git a/docs/DEPLOYMENT_SETUP.md b/docs/DEPLOYMENT_SETUP.md
@@ -265,9 +265,9 @@ Forms can be protected with [recaptcha](https://www.google.com/recaptcha/about/)
 
 [Google Analytics](https://analytics.google.com/analytics/web) is used to track website traffic. Examples of events include number of visits to various forms, number of successful submissions and number of submission failures.
 
-| Variable                   | Description                   |
-| :------------------------- | ----------------------------- |
-| `REACT_APP_GA_TRACKING_ID` | Google Analytics tracking ID. |
+| Variable                  | Description                   |
+| :------------------------ | ----------------------------- |
+| `VITE_APP_GA_TRACKING_ID` | Google Analytics tracking ID. |
 
 #### SMS with Twilio
 

diff --git a/frontend/.buildtime-env b/frontend/.buildtime-env
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
@@ -6,4 +6,6 @@
 
 node_modules
 
-CREDITS.md
+CREDITS.md
+
+!.storybook
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
@@ -0,0 +1,91 @@
+/* eslint-env node */
+
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  plugins: [
+    'import',
+    'simple-import-sort',
+    'prettier',
+    'testing-library',
+    'react-refresh',
+  ],
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      rules: {
+        '@typescript-eslint/no-unused-vars': 'warn',
+      },
+    },
+    {
+      files: ['*.stories.*'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+    {
+      files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react'],
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        'testing-library/no-unnecessary-act': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        'no-unsafe-optional-chaining': 'off',
+      },
+    },
+  ],
+  ignorePatterns: ['!.storybook'],
+  rules: {
+    // Rules for auto sort of imports
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          // Side effect imports.
+          ['^\\u0000'],
+          // Packages.
+          // Packages. `react` related packages come first.
+          // Things that start with a letter (or digit or underscore), or
+          // `@` followed by a letter.
+          ['^react', '^@?\\w'],
+          // Root imports
+          // Shared imports should be separate from application imports.
+          ['^(~shared)(/.*|$)'],
+          ['^(~)(/.*|$)'],
+          ['^(~typings)(/.*|$)'],
+          [
+            '^(~assets|~theme)(/.*|$)',
+            '^(~contexts)(/.*|$)',
+            '^(~constants)(/.*|$)',
+            '^(~hooks)(/.*|$)',
+            '^(~utils)(/.*|$)',
+            '^(~services)(/.*|$)',
+            '^(~components)(/.*|$)',
+            '^(~templates)(/.*|$)',
+          ],
+          ['^(~pages)(/.*|$)', '^(~features)(/.*|$)'],
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+        ],
+      },
+    ],
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'simple-import-sort/exports': 'error',
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+  },
+}