Upgrade dependencies and ESLint config

CONTRIBUTING.md

@@ -56,11 +56,12 @@ 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 -L <pkg-name> --filter <project-name>` to upgrade a dependency
-   to the latest version in a given project. Alternatively, you can also 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).
+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)
+   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).
 
 Beware of the following versioning requirements:
 
@@ -78,6 +79,12 @@ version conflicts and other package resolution issues:
 [`peerDependenciesMeta`](https://pnpm.io/package_json#peerdependenciesmeta),
 [`.pnpmfile.cjs`](https://pnpm.io/pnpmfile).
 
+If you update `eslint-config-galex` and encounter warnings in the
+Create-React-App `demo` app, try uninstalling and reinstalling `react-scripts`
+with `pnpm uninstall react-scripts && pnpm install -D react-scripts`. If you
+still get warnings, try to override the versions of CRA's culprit ESLint plugins
+with `pnpm.overrides` in the root `package.json` of the monorepo.
+
 ### Workspace dependencies
 
 To reference a workspace dependency, use pnpm's

apps/demo-cra-lib/package.json

@@ -20,22 +20,22 @@
   },
   "dependencies": {
     "@h5web/lib": "workspace:*",
-    "@react-three/fiber": "7.0.9",
+    "@react-three/fiber": "7.0.21",
     "normalize.css": "8.0.1",
     "react": "17.0.2",
     "react-app-polyfill": "2.0.0",
     "react-dom": "17.0.2",
-    "three": "0.132.2"
+    "three": "0.135.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.19",
-    "@types/react-dom": "17.0.9",
-    "eslint": "7.32.0",
-    "eslint-config-galex": "2.16.12",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "eslint": "8.4.1",
+    "eslint-config-galex": "3.3.5",
     "react-app-rewire-alias": "1.0.3",
     "react-app-rewired": "2.1.8",
     "react-scripts": "4.0.3",
-    "typescript": "4.4.3"
+    "typescript": "4.5.2"
   },
   "browserslist": {
     "production": [

apps/demo/package.json

@@ -24,18 +24,18 @@
     "react": "17.0.2",
     "react-app-polyfill": "2.0.0",
     "react-dom": "17.0.2",
-    "react-router-dom": "5.3.0"
+    "react-router-dom": "6.0.2"
   },
   "devDependencies": {
-    "@types/react": "17.0.19",
-    "@types/react-dom": "17.0.9",
-    "@types/react-router-dom": "5.3.0",
-    "eslint": "7.32.0",
-    "eslint-config-galex": "2.16.12",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "@types/react-router-dom": "5.3.2",
+    "eslint": "8.4.1",
+    "eslint-config-galex": "3.3.5",
     "react-app-rewire-alias": "1.0.3",
     "react-app-rewired": "2.1.8",
     "react-scripts": "4.0.3",
-    "typescript": "4.4.3"
+    "typescript": "4.5.2"
   },
   "browserslist": {
     "production": [

apps/demo/src/DemoApp.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import H5GroveApp from './H5GroveApp';
 import HsdsApp from './HsdsApp';
@@ -7,17 +7,11 @@ import MockApp from './MockApp';
 function DemoApp() {
   return (
     <Router>
-      <Switch>
-        <Route path="/mock">
-          <MockApp />
-        </Route>
-        <Route path="/hsds">
-          <HsdsApp />
-        </Route>
-        <Route path="/">
-          <H5GroveApp />
-        </Route>
-      </Switch>
+      <Routes>
+        <Route path="/" element={<H5GroveApp />} />
+        <Route path="mock" element={<MockApp />} />
+        <Route path="hsds" element={<HsdsApp />} />
+      </Routes>
     </Router>
   );
 }

apps/storybook/.storybook/main.js

@@ -1,6 +1,9 @@
 const path = require('path');
 
 module.exports = {
+  features: {
+    storyStoreV7: true, // https://storybook.js.org/blog/storybook-on-demand-architecture/
+  },
   stories: ['../src/**/*.stories.@(tsx|mdx)'],
   addons: [
     '@storybook/preset-create-react-app',

apps/storybook/package.json

@@ -22,26 +22,26 @@
     "@h5web/lib": "workspace:*",
     "@h5web/shared": "workspace:*",
     "@react-hookz/web": "12.0.0",
-    "@react-three/fiber": "7.0.9",
+    "@react-three/fiber": "7.0.21",
     "ndarray": "1.0.19",
     "normalize.css": "8.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-icons": "4.3.1",
-    "three": "0.132.2"
+    "three": "0.135.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "6.3.9",
-    "@storybook/addon-essentials": "6.3.9",
-    "@storybook/addon-links": "6.3.9",
+    "@storybook/addon-docs": "6.4.8",
+    "@storybook/addon-essentials": "6.4.8",
+    "@storybook/addon-links": "6.4.8",
     "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.3.9",
-    "@types/ndarray": "1.0.10",
-    "@types/react": "17.0.19",
-    "@types/react-dom": "17.0.9",
-    "eslint": "7.32.0",
-    "eslint-config-galex": "2.16.12",
-    "typescript": "4.4.3"
+    "@storybook/react": "6.4.8",
+    "@types/ndarray": "1.0.11",
+    "@types/react": "17.0.37",
+    "@types/react-dom": "17.0.11",
+    "eslint": "8.4.1",
+    "eslint-config-galex": "3.3.5",
+    "typescript": "4.5.2"
   },
   "browserslist": {
     "production": [

apps/storybook/src/ColorBar.stories.tsx

@@ -88,10 +88,8 @@ export default {
       control: { type: 'range', min: -10, max: 10, step: 0.1 },
     },
     scaleType: {
-      control: {
-        type: 'inline-radio',
-        options: [ScaleType.Linear, ScaleType.Log, ScaleType.SymLog],
-      },
+      control: { type: 'inline-radio' },
+      options: [ScaleType.Linear, ScaleType.Log, ScaleType.SymLog],
     },
   },
   excludeStories: ['ColorMapTemplate'],

apps/storybook/src/Customization.stories.mdx

@@ -1,4 +1,5 @@
 import LinkTo from '@storybook/addon-links/react';
+import { Meta } from '@storybook/react';
 
 <Meta title="Customization" />
 

apps/storybook/src/DomainSlider.stories.tsx

@@ -77,15 +77,13 @@ export default {
   },
   argTypes: {
     scaleType: {
-      control: {
-        type: 'inline-radio',
-        options: [
-          ScaleType.Linear,
-          ScaleType.SymLog,
-          ScaleType.Log,
-          ScaleType.Sqrt,
-        ],
-      },
+      control: { type: 'inline-radio' },
+      options: [
+        ScaleType.Linear,
+        ScaleType.SymLog,
+        ScaleType.Log,
+        ScaleType.Sqrt,
+      ],
     },
   },
 } as Meta;

apps/storybook/src/GettingStarted.stories.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/react';
+
 <Meta title="Getting started" />
 
 # H5Web Component Library
@@ -42,7 +44,7 @@ The components are organised in three categories:
    ];
 
    // Flatten source array
-   const flatValues: number[] = values.flat(Infinity);
+   const flatValues = values.flat(Infinity) as number[];
 
    // Convert to ndarray and get domain
    const dataArray = ndarray(flatValues, [2, 3]);

apps/storybook/src/HeatmapVis.stories.tsx

@@ -93,39 +93,31 @@ Alpha.args = {
 export default {
   title: 'Visualizations/HeatmapVis',
   component: HeatmapVis,
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'fullscreen', controls: { sort: 'requiredFirst' } },
   decorators: [FillHeight],
+  args: {
+    colorMap: 'Viridis',
+    scaleType: ScaleType.Linear,
+    layout: 'cover',
+    showGrid: true,
+  },
   argTypes: {
-    dataArray: {}, // To keep mandatory args above optional ones.
-    domain: {},
     colorMap: {
-      defaultValue: 'Viridis',
-      control: {
-        type: 'select',
-        options: Object.keys(INTERPOLATORS),
-      },
+      control: { type: 'select' },
+      options: Object.keys(INTERPOLATORS),
     },
     scaleType: {
-      defaultValue: ScaleType.Linear,
-      control: {
-        type: 'inline-radio',
-        options: [
-          ScaleType.Linear,
-          ScaleType.Log,
-          ScaleType.SymLog,
-          ScaleType.Sqrt,
-        ],
-      },
+      control: { type: 'inline-radio' },
+      options: [
+        ScaleType.Linear,
+        ScaleType.Log,
+        ScaleType.SymLog,
+        ScaleType.Sqrt,
+      ],
     },
     layout: {
-      defaultValue: 'cover',
-      control: {
-        type: 'inline-radio',
-        options: ['contain', 'cover', 'fill'],
-      },
-    },
-    showGrid: {
-      defaultValue: true,
+      control: { type: 'inline-radio' },
+      options: ['contain', 'cover', 'fill'],
     },
   },
 } as Meta;

apps/storybook/src/LineVis.stories.tsx

@@ -89,31 +89,25 @@ AuxiliaryArrays.args = {
 export default {
   title: 'Visualizations/LineVis',
   component: LineVis,
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'fullscreen', controls: { sort: 'requiredFirst' } },
   decorators: [FillHeight],
+  args: {
+    curveType: CurveType.LineOnly,
+    scaleType: ScaleType.Linear,
+    showGrid: true,
+  },
   argTypes: {
-    dataArray: {}, // to keep mandatory args above optional ones in controls add-on
-    domain: {},
     curveType: {
-      defaultValue: CurveType.LineOnly,
-      control: {
-        type: 'inline-radio',
-        options: [
-          CurveType.LineOnly,
-          CurveType.GlyphsOnly,
-          CurveType.LineAndGlyphs,
-        ],
-      },
+      control: { type: 'inline-radio' },
+      options: [
+        CurveType.LineOnly,
+        CurveType.GlyphsOnly,
+        CurveType.LineAndGlyphs,
+      ],
     },
     scaleType: {
-      defaultValue: ScaleType.Linear,
-      control: {
-        type: 'inline-radio',
-        options: [ScaleType.Linear, ScaleType.Log, ScaleType.SymLog],
-      },
-    },
-    showGrid: {
-      defaultValue: true,
+      control: { type: 'inline-radio' },
+      options: [ScaleType.Linear, ScaleType.Log, ScaleType.SymLog],
     },
   },
 } as Meta;

apps/storybook/src/Utilities.stories.mdx

@@ -1,3 +1,5 @@
+import { Meta } from '@storybook/react';
+
 <Meta title="Utilities" />
 
 ## Utilities

apps/storybook/src/VisCanvasInteraction.stories.tsx

@@ -78,10 +78,8 @@ export default {
   },
   argTypes: {
     guides: {
-      control: {
-        type: 'inline-radio',
-        options: ['horizontal', 'vertical', 'both'],
-      },
+      control: { type: 'inline-radio' },
+      options: ['horizontal', 'vertical', 'both'],
     },
   },
 } as Meta;

eslint.shared.js

@@ -24,12 +24,6 @@ const rules = {
   /* Forcing use of `else` for consistency with mandatory `default` clause in `switch` statements is unreasonable.
    * `if`/`else if` serves a different purpose than `switch`. */
   'sonarjs/elseif-without-else': 'off',
-
-  // zustand has `whitelist` option
-  'inclusive-language/use-inclusive-words': [
-    'error',
-    { allowedTerms: ['whitelist'] },
-  ],
 };
 
 const overrides = [
@@ -48,8 +42,7 @@ const overrides = [
       '@typescript-eslint/prefer-nullish-coalescing': 'off', // `||` is often conveninent and safe to use with TS
       '@typescript-eslint/explicit-module-boundary-types': 'off', // worsens readability sometimes (e.g. for React components)
 
-      // Galex expects TypeScript options `noUnusedLocals` and `noUnusedParameters` to be enabled,
-      // but those prevent compilation, which is bad for developer experience
+      // Allow removing properties with destructuring
       '@typescript-eslint/no-unused-vars': [
         'warn',
         { ignoreRestSiblings: true },