feat: use ogp design system

.eslintrc

@@ -64,10 +64,16 @@
         "typesafe/no-throw-sync-func": "error"
       }
     },
-    { "files": ["*.spec.ts"], "extends": ["plugin:jest/recommended"] },
+    {
+      "files": ["**/*.spec.ts", "**/__tests__/**/*.ts"],
+      "extends": ["plugin:jest/recommended"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    },
     {
       "files": ["*.ts", "*.js"],
-      "excludedFiles": ["**/*.spec.ts", "**/.spec.js", "**/__tests__/**/*.ts"],
+      "excludedFiles": ["**/*.spec.ts", "**/__tests__/**/*.ts"],
       "rules": {
         "@typescript-eslint/no-non-null-assertion": "error"
       }

.github/workflows/deploy-eb.yml

@@ -40,21 +40,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]

.github/workflows/playwright.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Build
         env:
           NODE_OPTIONS: '--max-old-space-size=4096 --openssl-legacy-provider'
-          REACT_APP_FORMSG_SDK_MODE: 'test'
+          VITE_APP_FORMSG_SDK_MODE: 'test'
         run: npm run build
       - name: Run Playwright tests (login)
         run: npx playwright test __tests__/e2e/login.spec.ts

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

__tests__/e2e/utils/field.ts

@@ -105,6 +105,9 @@ export const createMyInfoField = (
         ...fieldBase,
         ValidationOptions: { selectedValidation: null, customVal: null },
       }
+    default:
+      // eslint-disable-next-line typesafe/no-throw-sync-func
+      throw new Error(`Unimplemented MyInfo field type: ${fieldType}`)
   }
 }
 

docs/DEPLOYMENT_SETUP.md

@@ -92,7 +92,7 @@ There are also environment secrets for each environment (`staging`, `staging-alt
 |:---------|------------|
 |`APP_NAME`|Application name for the environment.|
 |`DEPLOY_ENV`|Deployment environment on elastic beanstalk.|
-|`REACT_APP_FORMSG_SDK_MODE`|Determines the keys used in the formsg SDK. Set either `production` or `staging`.|
+|`REACT_APP_FORMSG_SDK_MODE`| Determines the keys used in the formsg SDK. Set either `production` or `staging`.|
 
 ## Environment Variables
 
@@ -268,7 +268,7 @@ Forms can be protected with [recaptcha](https://www.google.com/recaptcha/about/)
 
 | Variable                   | Description                   |
 | :------------------------- | ----------------------------- |
-| `REACT_APP_GA_TRACKING_ID` | Google Analytics tracking ID. |
+| `VITE_APP_GA_TRACKING_ID` | Google Analytics tracking ID. |
 
 #### Sentry.io
 

frontend/.eslintignore

@@ -6,4 +6,6 @@
 
 node_modules
 
-CREDITS.md
+CREDITS.md
+
+!.storybook

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',
+  },
+}

frontend/.gitignore

@@ -28,5 +28,3 @@ build-storybook.log
 # Lint cache
 .eslintcache
 
-#Datadog chunk files
-datadog-chunk.*.js

frontend/.prettierignore

@@ -26,7 +26,6 @@ storybook-static
 build-storybook.log
 
 tsconfig.json
-tsconfig.dd.json
 
 # all asset json files
 **/assets/**/*.json

frontend/.storybook/foundations/Colours/ColourTable.tsx

@@ -1,7 +1,16 @@
-import { useTheme } from '@chakra-ui/react'
-import { Table, TableCaption, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/table'
+import {
+  Table,
+  TableCaption,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useTheme,
+} from '@chakra-ui/react'
+import { get } from 'lodash'
 
-interface ColourTableProps {
+export interface ColourTableProps {
   label: string
   colours: {
     palette: string
@@ -27,7 +36,12 @@ export const ColourTable = ({
       </Thead>
       <Tbody>
         {colours.map((d) => {
-          const hexCode = theme.colors[d.palette][d.shade]
+          const hexCode = get(
+            theme.colors,
+            [d.palette, d.shade].join('.'),
+            '',
+          ).toUpperCase()
+          if (!hexCode) return null
           return (
             <Tr key={d.shade}>
               <Td>