feat: Upgrade to Node 18 [Feature Branch][JOB-62820] (#1141)

* build: update nvmrc to use 18

* build: repackage package locks

* build: temporarily set legacy-peer-deps to true

* build: Use NPM Workspace instead of Lerna to bootstrap (#1142)

* build: use NPM workspace instead of Lerna

* fix: workaround npm's lack of topological oder

Basically, npm would run `prepare` on each packages in alphabetical order but components need design to be built first.

This works around that limitation by firing the scripts manually through `npm run [script] -w` which respects the order under `workspaces`

npm/rfcs#548

* fix: reorder scripts for my own sanity

* build: update circle to not look for lock files

* build: use node 18 image on circle ci

* fix: js and css linters

* build: use -omit=optional

* fix: update time test work on node 18

* fix: don't update snaps

* fix: update some snaps

* build: make storybook run on node 18

Thanks @rodrigoeidelvein for the workaround!

* fix: reinstall ts-node

* chore: use lerna recommended setting for symlink

* fix: refix storybook by using js file

* fix: match * on preventManualRelease check

* docs: Node 18 update readme (#1149)

* Update versions in readme

* Update engines in package.json

* fix: reset package-lock

* chore: strict engine and package lock

* docs: Fix cloudflare Pages deploy (#1150)

* Trying build

* Correcting variables

* Removed resource class

Co-authored-by: Darryl Tec <darryl.t@getjobber.com>

---------

Co-authored-by: Kingston Fung <kingstonfung@gmail.com>
Co-authored-by: Darryl Tec <darryl.t@getjobber.com>

* fix: update package-lock.json

---------

Co-authored-by: Michael Paradis <michael.p@getjobber.com>
Co-authored-by: Kingston Fung <kingstonfung@gmail.com>

.circleci/config.yml

@@ -9,7 +9,7 @@ orbs:
 references:
   container_config: &container_config
     docker:
-      - image: circleci/node:14
+      - image: cimg/node:18.15.0
     working_directory: ~/atlantis
 
   restore_repo: &restore_repo
@@ -19,16 +19,10 @@ references:
         - v1-repo-{{ .Branch }}
         - v1-repo
 
-  sum_lockfiles: &sum_lockfiles
-    run:
-      name: Sum Lockfiles
-      command: md5sum package-lock.json packages/*/package-lock.json > /tmp/lock-sums
-
   restore_npm_cache: &restore_npm_cache
     restore_cache:
       name: Restore npm cache
       keys:
-        - npm-cache-v1-{{ arch }}-{{ checksum "/tmp/lock-sums" }}
         - npm-cache-v1
 
   attach_workspace: &attach_workspace
@@ -44,7 +38,7 @@ references:
   npm_install: &npm_install
     run:
       name: Install Dependencies
-      command: export IGNORE_OPTIONAL_DEPENDENCIES=true; npm ci --no-optional
+      command: export IGNORE_OPTIONAL_DEPENDENCIES=true; npm ci -omit=optional --legacy-peer-deps
 
   github_authenticity: &github_authenticity
     run:
@@ -74,18 +68,12 @@ jobs:
     <<: *container_config
     steps:
       - *attach_workspace
-      - *sum_lockfiles
       - *restore_npm_cache
       - run:
           name: Authenticate with npm
           command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > ~/atlantis/.npmrc
       - *npm_install
       - *persist_to_workspace
-      - save_cache:
-          name: Save npm cache
-          key: npm-cache-v1-{{ arch }}-{{ checksum "/tmp/lock-sums" }}
-          paths:
-            - ~/.npm
 
   check_for_manual_release:
     <<: *container_config
@@ -147,6 +135,22 @@ jobs:
       - *generate_base_path
       - run:
           command: npm run build
+      - *persist_to_workspace
+
+  upload_to_cloudflare:
+    <<: *container_config
+    environment:
+      ATLANTIS_BRANCH: << pipeline.git.branch >>
+    steps:
+      - *attach_workspace
+      - *generate_base_path
+      - run:
+          command: |
+            if [ "$ATLANTIS_BRANCH" = "master" ]; then
+              npx wrangler pages publish storybook-static --project-name=atlantis
+            else
+              npx wrangler pages publish storybook-static --project-name=atlantis --branch=$ATLANTIS_BRANCH
+            fi
 
   release:
     <<: *container_config
@@ -189,6 +193,9 @@ workflows:
       - build_docs:
           requires:
             - check_for_manual_release
+      - upload_to_cloudflare:
+          requires:
+            - build_docs
       - release:
           filters:
             branches:

.npmrc.pages

@@ -1 +1,2 @@
 //registry.npmjs.org/:_authToken=${JOBBER_NPM_TOKEN}
+legacy-peer-deps=true

.nvmrc

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

.storybook/main.ts → .storybook/main.js

@@ -1,8 +1,6 @@
-import type { StorybookConfig } from "@storybook/react/types";
-import * as webpack from "webpack";
 const path = require("path");
 
-const config: StorybookConfig = {
+const config = {
   stories: [
     "../packages/**/*.stories.mdx",
     "../packages/**/*.stories.@(js|jsx|ts|tsx)",
@@ -26,7 +24,7 @@ const config: StorybookConfig = {
      * Separate existing rules for CSS files
      */
     if (config.module?.rules) {
-      const matcher = (rule: webpack.RuleSetRule): boolean =>
+      const matcher = (rule) =>
         rule.test?.toString() === "/\\.css$/";
       const existingRule = config.module.rules.find(matcher);
 
@@ -37,15 +35,15 @@ const config: StorybookConfig = {
       const atlantisCssRule = {
         ...existingRule,
         exclude: /node_modules/,
-        use: (existingRule?.use as webpack.RuleSetLoader[])?.map(item => {
+        use: existingRule?.use?.map(item => {
           let newItem = item;
           if (newItem.loader?.includes("/css-loader/")) {
             const modules = {
               localIdentName: "[name]__[local]--[hash:base64:5]",
             };
             newItem = {
               ...newItem,
-              options: { ...(newItem.options as Record<any, any>), modules },
+              options: { ...newItem.options, modules },
             };
           }
           return newItem;

docs/README.md

@@ -18,8 +18,8 @@ developers to quickly build beautiful and consistent interfaces for our users.
 
 ### Prerequisites
 
-- `node@14`
-- `npm@6`
+- `node@18`
+- `npm@9`
 
 To install Atlantis locally for development:
 

lerna.json

@@ -1,11 +1,15 @@
 {
   "version": "independent",
-  "packages": ["packages/*"],
+  "packages": [
+    "packages/*"
+  ],
   "command": {
     "version": {
       "conventionalCommits": true,
       "message": "chore(release): Publish",
-      "allowBranch": ["master"]
+      "allowBranch": [
+        "master"
+      ]
     },
     "publish": {
       "ignoreChanges": [
@@ -15,5 +19,6 @@
         "CHANGELOG.md"
       ]
     }
-  }
+  },
+  "useWorkspaces": true
 }