Upgrade pnpm to v7

.github/workflows/approve-snapshots.yml

@@ -30,15 +30,15 @@ jobs:
       - name: Cache pnpm modules 📌
         uses: actions/cache@v2
         with:
-          path: ~/.pnpm-store
+          path: ~/.local/share/pnpm/store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
 
       - name: Install ⚙️
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.x
+          version: 7.x
           run_install: |
             - args: [--frozen-lockfile]
 
@@ -49,10 +49,10 @@ jobs:
         run: pnpm build
 
       - name: Serve ⚡️
-        run: pnpm serve & pnpm dlx wait-on http://localhost:3000
+        run: pnpm serve & pnpx wait-on http://localhost:3000
 
       - name: Run Cypress 🌳
-        run: pnpm cypress:run -- --env updateSnapshots=true
+        run: pnpm cypress:run --env updateSnapshots=true
         env:
           CYPRESS_TAKE_SNAPSHOTS: true
 

.github/workflows/lint-test.yml

@@ -23,15 +23,15 @@ jobs:
       - name: Cache pnpm modules 📌
         uses: actions/cache@v2
         with:
-          path: ~/.pnpm-store
+          path: ~/.local/share/pnpm/store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
 
       - name: Install ⚙️
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.x
+          version: 7.x
           run_install: |
             - args: [--frozen-lockfile]
 
@@ -54,15 +54,15 @@ jobs:
       - name: Cache pnpm modules 📌
         uses: actions/cache@v2
         with:
-          path: ~/.pnpm-store
+          path: ~/.local/share/pnpm/store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
 
       - name: Install ⚙️
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.x
+          version: 7.x
           run_install: |
             - args: [--frozen-lockfile]
 
@@ -87,7 +87,7 @@ jobs:
       - name: Cache pnpm modules 📌
         uses: actions/cache@v2
         with:
-          path: ~/.pnpm-store
+          path: ~/.local/share/pnpm/store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
@@ -101,7 +101,7 @@ jobs:
       - name: Install ⚙️
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.x
+          version: 7.x
           run_install: |
             - args: [--frozen-lockfile]
 
@@ -112,7 +112,7 @@ jobs:
         run: pnpm build
 
       - name: Serve ⚡️
-        run: pnpm serve & pnpm dlx wait-on http://localhost:3000
+        run: pnpm serve & pnpx wait-on http://localhost:3000
 
       - name: Run Cypress 🌳
         run: pnpm cypress:run

.github/workflows/release.yml

@@ -27,15 +27,15 @@ jobs:
       - name: Cache pnpm modules 📌
         uses: actions/cache@v2
         with:
-          path: ~/.pnpm-store
+          path: ~/.local/share/pnpm/store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
 
       - name: Install ⚙️
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.x
+          version: 7.x
           run_install: |
             - args: [--frozen-lockfile]
 

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 - [Quick start](#quick-start-)
 - [Development](#development)
-  - [`pnpm` cheat sheet](#pnpm-cheat-sheet)
+  - [`pnpm` v7 cheat sheet](#pnpm-v7-cheat-sheet)
   - [Dependency management](#dependency-management)
   - [Workspace dependencies](#workspace-dependencies)
   - [Icon set](#icon-set)
@@ -30,20 +30,20 @@ pnpm start
   [Storybook](https://storybook.js.org/docs/react/get-started/introduction)
   documentation site at http://localhost:6006
 
-### `pnpm` cheat sheet
+### `pnpm` v7 cheat sheet
 
 - `pnpm install` - install the dependencies of every project in the workspace
   and of the workspace itself
-- `pnpm add [-D] <pkg-name> --filter <project-name>` -
+- `pnpm --filter <project-name> add [-D] <pkg-name>` -
   [add a dependency](https://pnpm.io/cli/add) to a project in the workspace
-- `pnpm [script] [-- --<arg>]` - run a workspace script
-- `pnpm [script] [--parallel] --filter {packages} [-- --<arg>]` -
+- `pnpm [run] <script> [--<arg>]` - run a workspace script
+- `pnpm [run] --filter {packages/*} [--parallel] <script> [--<arg>]` -
   [run a script](https://pnpm.io/cli/run) in every project in the `packages`
   folder
-- `pnpm dlx <pkg-name>` - fetch a package from the registry and run its default
+- `pnpm [exec] <binary>` - run a binary located in `node_modules/.bin`
+  (equivalent to `npx <pkg-name>` for a package installed in the workspace)
+- `pnpx <pkg-name>` - fetch a package from the registry and run its default
   command binary (equivalent to `npx <pkg-name>`)
-- `pnpm exec <binary>` - run a binary located in `node_modules/.bin` (equivalent
-  to `npx <pkg-name>` for a package installed in the workspace)
 - `pnpm why -r <pkg-name>` - show all project and packages that depend on the
   specified package
 - `pnpm outdated -r` - list outdated dependencies in the workspace
@@ -56,9 +56,9 @@ pnpm start
 1. Read the changelogs and release notes of the dependencies you'd like to
    upgrade. Look for potential breaking changes, and for bug fixes and new
    features that may help improve the codebase.
-1. Run `pnpm up -r -L <pkg-name>` to update a dependency to the latest version
-   in all projects. Alternatively, you can either replace `-r` with `--filter`
-   to target specific projects, or edit the relevant `package.json` file(s)
+1. Run `pnpm up -rL <pkg-name>` to update a dependency to the latest version in
+   all projects. Alternatively, you can either replace `-r` with `--filter` to
+   target specific projects, or edit the relevant `package.json` file(s)
    manually and run `pnpm install` (but make sure to specify an exact dependency
    version rather than a range - i.e. don't prefix the version with a caret or a
    tilde).
@@ -162,21 +162,21 @@ package does not include any styles, `vite build` does not generate a
 - `pnpm prettier` - check that all files in the workspace have been formatted
   with Prettier
 - `pnpm lint` - lint and type-check every project in the workspace with ESLint
-  and TypeScript
-- `pnpm lint:all:eslint` - lint every project with ESLint
-- `pnpm lint:all:tsc` - type-check every project with TypeScript
-- `pnpm lint:eslint [--filter <project-name|{folder}>]` - lint specific projects
-- `pnpm lint:tsc [--filter <project-name|{folder}>]` - type-check specific
+  and TypeScript, as well as the workspace root and `cypress` folder
+- `pnpm lint:eslint` - lint every project with ESLint
+- `pnpm lint:tsc` - type-check every project with TypeScript
+- `pnpm [--filter <project-name|{folder/*}>] lint:eslint` - lint specific
   projects
-- `pnpm analyze --filter @h5web/<lib|app>` - analyze a package's bundle (run
+- `pnpm [--filter <project-name|{folder/*}>] lint:tsc` - type-check specific
+  projects
+- `pnpm --filter @h5web/<lib|app> analyze` - analyze a package's bundle (run
   only after building the package)
 
 ### Fixing and formatting
 
-- `pnpm prettier -- --write` - format all files with Prettier
-- `pnpm lint:all:eslint -- -- --fix` - auto-fix linting issues in the entire
-  workspace
-- `pnpm lint:eslint [--filter <project-name|{folder}>] -- --fix` - auto-fix
+- `pnpm prettier --write` - format all files with Prettier
+- `pnpm lint:eslint --fix` - auto-fix linting issues in every project
+- `pnpm [--filter <project-name|{folder/*}>] lint:eslint --fix` - auto-fix
   linting issues in specific projects
 
 ### Editor integration
@@ -188,18 +188,17 @@ install the recommended extensions.
 ## Testing
 
 - `pnpm test` - run unit and feature tests with Jest
-- `pnpm test -- --watch` - run tests related to changed files in watch mode
-- `pnpm test -- --watchAll` - run all tests in watch mode
-- `pnpm test --filter <project-name>` - run Jest in a specific project
+- `pnpm test --watch` - run tests related to changed files in watch mode
+- `pnpm test --watchAll` - run all tests in watch mode
+- `pnpm --filter <project-name> test` - run Jest in a specific project
 - `pnpm cypress` - open the
   [Cypress](https://docs.cypress.io/guides/overview/why-cypress.html) end-to-end
   test runner (local dev server must be running in separate terminal)
 - `pnpm cypress:run` - run end-to-end tests once (local dev server must be
   running in separate terminal)
 
-> Note that, unlike `pnpm lint`, `pnpm test` (without `--filter`) doesn't
-> recursively run the `test` script in every project in the workspace (i.e. it
-> is not equivalent to `pnpm test --filter {apps} --filter {packages}`).
+> Note that the workspace's `test` script doesn't recursively run the `test`
+> script in every project like (i.e. it is not equivalent to `pnpm -r test`).
 > Instead, it runs Jest globally using a
 > [`projects` configuration](https://jestjs.io/docs/configuration#projects-arraystring--projectconfig)
 > located in `jest.config.json`. This results in a nicer terminal output when

apps/demo/package.json

@@ -11,7 +11,7 @@
   },
   "engines": {
     "node": "16.x",
-    "pnpm": "*"
+    "pnpm": "7.x"
   },
   "scripts": {
     "start": "vite",

apps/storybook/package.json

@@ -11,12 +11,12 @@
   },
   "engines": {
     "node": "16.x",
-    "pnpm": "*"
+    "pnpm": "7.x"
   },
   "scripts": {
     "start": "start-storybook -p 6006",
     "build": "build-storybook -o build",
-    "serve": "pnpm dlx http-server -p 6006 ./build",
+    "serve": "pnpx http-server -p 6006 ./build",
     "lint:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
     "lint:tsc": "tsc --noEmit"
   },
@@ -25,6 +25,8 @@
     "@h5web/shared": "workspace:*",
     "@react-hookz/web": "14.2.2",
     "@react-three/fiber": "7.0.26",
+    "d3-format": "3.1.0",
+    "lodash": "4.17.21",
     "ndarray": "1.0.19",
     "normalize.css": "8.0.1",
     "react": "17.0.2",
@@ -39,9 +41,12 @@
     "@storybook/addon-essentials": "6.4.19",
     "@storybook/addon-links": "6.4.19",
     "@storybook/react": "6.4.19",
+    "@types/d3-format": "3.0.1",
+    "@types/lodash": "4.14.178",
     "@types/ndarray": "1.0.11",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
+    "@types/three": "0.135.0",
     "babel-loader": "8.2.3",
     "eslint": "8.9.0",
     "eslint-config-galex": "3.6.5",

cypress/tsconfig.json

@@ -8,5 +8,5 @@
       "@types/cypress-image-snapshot"
     ]
   },
-  "include": ["specs", "*.ts"]
+  "include": ["*", "specs"]
 }

netlify.toml

@@ -7,4 +7,4 @@
 [build.environment]
   NPM_FLAGS = "--version"
 [build]
-  command = "npx pnpm@6 install --store=node_modules/.pnpm-store && npx pnpm@6 build"
+  command = "npx pnpm@7 install --store=node_modules/.pnpm-store && npx pnpm@7 build"

package.json

@@ -11,21 +11,21 @@
   },
   "engines": {
     "node": "16.x",
-    "pnpm": "*"
+    "pnpm": "7.x"
   },
   "scripts": {
-    "start": "pnpm start --filter demo",
-    "start:storybook": "pnpm start --filter storybook",
-    "build": "pnpm build --filter demo",
-    "build:storybook": "pnpm build --filter storybook",
-    "serve": "pnpm serve --filter demo",
-    "serve:storybook": "pnpm serve --filter storybook",
-    "packages": "pnpm build --filter {packages}",
-    "lint": "run-p lint:all:*",
-    "lint:all:eslint": "pnpm lint:eslint -r --parallel",
-    "lint:all:tsc": "pnpm lint:tsc -r --parallel",
-    "lint:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
-    "lint:tsc": "tsc --project tsconfig.lint.json  --noEmit && tsc --project cypress/tsconfig.json",
+    "start": "pnpm --filter demo start",
+    "start:storybook": "pnpm --filter storybook start",
+    "build": "pnpm --filter demo build",
+    "build:storybook": "pnpm --filter storybook build",
+    "serve": "pnpm --filter demo serve",
+    "serve:storybook": "pnpm --filter storybook serve",
+    "packages": "pnpm --filter {packages/*} build",
+    "lint": "run-p lint:**",
+    "lint:eslint": "pnpm -r --parallel lint:eslint",
+    "lint:tsc": "pnpm -r --parallel lint:tsc",
+    "lint:cypress:tsc": "tsc --project cypress/tsconfig.json",
+    "lint:root:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
     "prettier": "prettier . --check",
     "test": "jest",
     "cypress": "cypress open",
@@ -55,6 +55,12 @@
       "react-scripts>eslint-plugin-testing-library": ">=5",
       "react-scripts>@typescript-eslint/parser": ">=5",
       "react-scripts>@typescript-eslint/eslint-plugin": ">=5"
+    },
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "cypress": "*",
+        "jest": "*"
+      }
     }
   }
 }

packages/app/jest.config.js

@@ -17,7 +17,7 @@ const config = {
   preset: 'ts-jest/presets/js-with-ts',
   resetMocks: true,
   roots: ['<rootDir>/src'],
-  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
   testEnvironment: 'jsdom',
   testRegex: '\\.test\\.tsx?$',
   testTimeout: 10_000,

packages/app/package.json

@@ -35,7 +35,7 @@
     "lint:eslint": "eslint \"**/*.{js,cjs,ts,tsx}\" --max-warnings=0",
     "lint:tsc": "tsc --noEmit",
     "test": "jest",
-    "analyze": "pnpm dlx source-map-explorer dist/index.js --no-border-checks"
+    "analyze": "pnpx source-map-explorer dist/index.js --no-border-checks"
   },
   "peerDependencies": {
     "react": ">=16",
@@ -65,10 +65,13 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "14.2.0",
+    "@types/d3-format": "3.0.1",
     "@types/lodash": "4.14.182",
     "@types/ndarray": "1.0.11",
     "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.11",
     "@types/react-slider": "1.3.1",
+    "@types/testing-library__jest-dom": "5.14.3",
     "concat": "1.0.3",
     "eslint": "8.9.0",
     "eslint-config-galex": "3.6.5",