Feat: Upgrade major deps and to Webpack 5 (#1202)

* feat: update cypress to 12.8.0

* feat: add engines for node version

* feat: upgrade lockfile

* feat: upgrade chakra, sentry, design system, react, webpack

* feat: use yarn

* fix: remove old extends in eslint

* feat: use webpack 5 config for cypress

* feat: update eslint rule

* chore: add cypress env to gitignore

* chore: minor formatting on file

* fix: error on missing props in story file

* fix: enforce cookies to be string

* fix: type error for unresolved var

* feat: cypress utils resolution

* fix: app tsconfig utils resolution

* chore: add eslint plugin

* fix: comment out component from stories

* fix: update isFullWidth to use w for chakra 2

* feat: update react to use createRoot

* fix: add path alias for cypress tsconfig

* chore: upgrade chakra to latest

* chore: upgrade to react 18.2.0

* chore: upgrade storybook

* fix: use craco for jest tests

* fix: storybook config for wp 5

* chore: upgrade storybook to latest

* feat: update to use yarn

* fix: refactor util functions to allow specific imports in Cypress

* fix: disable sourcemap when building to avoid warnings

* fix: add names for steps

* fix: update ci-e2e to use yarn and latest packages

* fix: update chromatic workflow

* fix: allow ts-ignore in eslint

* chore: ts-ignore implicit any

* fix: cypress resolution for utils

* fix: use export default in cypress config

* chore: remove unused comment

* chore: refactor file name from legacyUtils to fileNameUtils

* chore: update craco, react-beautiful-dnd, eslint-plugin-react-hooks, react-test-renderer, remove babel-eslint

* fix: use new babel parser for eslint

* feat: upgrade to latest yarn version

* chore: revert back to use npm

* fix: npm build cmd in ci workflows

* chore: update deps for storybook

* chore: remove unneeded dependencies

* chore: pin chakra ui to 2.2.1 due to design system

* fix: uncomment story changes due to chakra mismatch

* fix: adding back num tests config for cypress

* chore: upgrade react mde editor

* fix: classname for mde editor table icon

* chore: recreate package-lock with new node version

* fix: update actions versions in chromatic workflow

* fix: pin chakra version

* fix: storybook build

* fix: run eslint fix

* fix: warn for vars use before define rule

* fix: warn for unused expression rule

* fix: add react-hooks plugin for eslint

* chore: run prettier eslint

* fix: warn for camelcase rule

* fix: update eslint config to use latest babel parser and fix lint errors

* fix: update value to be optional prop

* chore: remove yarn lock

* fix: add typescript extensions for lint scripts

* fix: lint fixes for import sorting

* chore: run lint fix

* fix: lint and build issues

* fix: lint and build

* feat: update h4 to h6

* feat: update h3 to h5

* feat: update h2 to h4

* fix: package-lock

* fix: margin bottom for comments

* fix: squished menu

* fix: dropdown colors

* fix: squished notification menu

* dummy commit

* Revert "dummy commit"

This reverts commit 67faf00.

* chore: update lock file

* chore: ignore eslint warning

* fix: imports for workspace e2e

* chore: update package-lock

* fix: remove yarn as package manager

* fix: update nvmrc to use node 18

* fix: add netlify build script

* fix: remove global eslint rule

* revert: changes on EditContactUs

* revert: changes on EditHomepage

* revert: changes on cypress html

.eslintrc.json

@@ -19,20 +19,24 @@
       }
     }
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    },
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 2020,
     "sourceType": "module"
   },
-  "plugins": ["react"],
+  "plugins": ["react", "react-hooks"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
-      "extends": ["react-app", "plugin:@typescript-eslint/recommended"]
+      "extends": ["plugin:@typescript-eslint/recommended"]
     }
   ],
   "rules": {
@@ -42,6 +46,12 @@
     "react/require-default-props": "off",
     "import/prefer-default-export": "off",
     "react/prop-types": "warn",
+    "no-param-reassign": "warn",
+    "no-use-before-define": "warn",
+    "no-unused-expressions": "warn",
+    "import/no-named-as-default": "warn",
+    "import/no-named-as-default-member": "warn",
+    "camelcase": "warn",
     "no-unused-vars": [
       "error",
       { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }

.github/workflows/chromatic.yml

@@ -24,7 +24,7 @@ jobs:
     outputs:
       frontend: ${{ steps.filter.outputs.frontend }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: dorny/paths-filter@v2
         id: filter
         with:
@@ -67,12 +67,13 @@ jobs:
       # This extra step is not in the original chromatic workflow.
       # This is to use a specific version of node (14.x), because the default is 16.x,
       # which is not compatible with sass
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Install dependencies
-        run: npm i
+        run: npm ci
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.github/workflows/ci-e2e.yml

@@ -22,60 +22,69 @@ jobs:
     # Hence, we default to the latest version.
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.OS }}-node-
             ${{ runner.OS }}-
-      - run: npm ci
+      - name: Install dependencies
+        run: npm ci
 
   lint:
     needs: install
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Load Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-      - run: npm ci
-      - run: npm run lint-fix
-      - run: npm run format-fix
+      - name: Install dependencies
+        run: npm ci
+      - name: Run eslint fix
+        run: npm run lint-fix
+      - name: Run prettier fix
+        run: npm run format-fix
 
   build:
     needs: lint
     runs-on: ubuntu-latest
     env:
       CI: false
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Load Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-      - run: npm ci
-      - run: npm run build
+      - name: Install dependencies
+        run: npm ci
+      - name: Run build
+        run: npm run build
 
   test:
     needs: build
@@ -93,13 +102,14 @@ jobs:
       GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Load Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
@@ -124,5 +134,7 @@ jobs:
         run: |
           echo "COMMIT_INFO_MESSAGE=${{ github.event.pull_request.title }}" >> $GITHUB_ENV
           echo "COMMIT_INFO_SHA=${{ github.event.pull_request.head.sha }}" >> $GITHUB_ENV
-      - run: npm ci
-      - run: npm run test:ci
+      - name: Install dependencies
+        run: npm ci
+      - name: Run test ci
+        run: npm run test:ci

.github/workflows/ci.yml

@@ -11,60 +11,69 @@ jobs:
     # Hence, we default to the latest version.
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.OS }}-node-
             ${{ runner.OS }}-
-      - run: npm ci
+      - name: Install dependencies
+        run: npm ci
 
   lint:
     needs: install
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Load Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-      - run: npm ci
-      - run: npm run lint-fix
-      - run: npm run format-fix
+      - name: Install dependencies
+        run: npm ci
+      - name: Run eslint fix
+        run: npm run lint-fix
+      - name: Run prettier fix
+        run: npm run format-fix
 
   build:
     needs: lint
     runs-on: ubuntu-latest
     env:
       CI: false
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Load Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-      - run: npm ci
-      - run: npm run build
+      - name: Install dependencies
+        run: npm ci
+      - name: Run build
+        run: npm run build
 
   test:
     needs: build
@@ -80,16 +89,19 @@ jobs:
       PERSONAL_ACCESS_TOKEN: ${{secrets.PERSONAL_ACCESS_TOKEN}}
       E2E_COMMIT_HASH: ${{secrets.E2E_COMMIT_HASH}}
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: "18.x"
+          cache: "npm"
       - name: Load Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           # npm cache files are stored in `~/.npm` on Linux/macOS
           path: ~/.npm
           key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-      - run: npm ci
-      - run: npm run test
+      - name: Install dependencies
+        run: npm ci
+      - name: Run tests
+        run: npm run test

.gitignore

@@ -27,5 +27,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn/
 
-build-storybook.log
+build-storybook.log
+storybook-static/
+
+# cypress
+cypress.env.json

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-14
+18

.storybook/main.js

@@ -10,35 +10,17 @@ module.exports = {
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "storybook-preset-craco",
+    "@storybook/preset-create-react-app",
   ],
   framework: "@storybook/react",
-  // webpackFinal setup retrieved from ChakraUI's own Storybook setup
-  // https://github.com/chakra-ui/chakra-ui/blob/main/.storybook/main.js
-  webpackFinal: async (storybookConfig) => {
-    // Required to sync aliases between storybook and overriden configs
-    return {
-      ...storybookConfig,
-      module: {
-        rules: [
-          ...storybookConfig.module.rules,
-          {
-            type: "javascript/auto",
-            test: /\.mjs$/,
-            include: /node_modules/,
-          },
-        ],
-      },
-      resolve: {
-        ...storybookConfig.resolve,
-        alias: {
-          ...storybookConfig.resolve.alias,
-          // Required so storybook knows where the npm package is to render ChakraUI components
-          // as this is not directly installed in package.json.
-          "@emotion/core": "@emotion/react",
-          "emotion-theming": "@emotion/react",
-        },
-      },
-    }
+  core: {
+    builder: "webpack5",
+  },
+  docs: {
+    autodocs: true,
+  },
+  features: {
+    storyStoreV7: true,
+    previewMdx2: true,
   },
 }