fix: update dependencies (#464)

BREAKING CHANGE: Changed React peer dependency to >=18.0.0

.eslintrc.yml

@@ -1,6 +1,11 @@
 extends:
-  - '@zakodium/eslint-config/typescript-react'
-  - 'cheminfo/unicorn'
+  - zakodium/ts
+  - zakodium/react
+  - zakodium/unicorn
 rules:
   '@typescript-eslint/no-dynamic-delete': off
   'import/namespace': off
+overrides:
+  - files: ['tests/**/*.test.tsx']
+    rules:
+      '@typescript-eslint/unbound-method': off

.gitignore

@@ -3,4 +3,6 @@ lib/
 lib-esm/
 storybook-static/
 /playwright-report/
-/playwright/.cache/
+/playwright/.cache/
+/test-results/
+/blob-report/

.ncurc.json

@@ -1,3 +1,3 @@
 {
-  "reject": ["@types/react", "react", "react-dom"]
+  "reject": ["eslint"]
 }

.nvmrc

@@ -1 +1 @@
-16
+20

.storybook/main.js

@@ -1,15 +1,6 @@
 module.exports = {
-  stories: [
-    '../stories/**/*.stories.mdx',
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  core: {
-    builder: 'webpack5',
-  },
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: true,
-  },
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+
   addons: [
     {
       name: '@storybook/addon-storysource',
@@ -22,5 +13,21 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
   ],
+
   staticDirs: ['../stories/data'],
+
+  framework: {
+    name: '@storybook/react-vite',
+
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+    },
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };

.storybook/preview.js

@@ -1,6 +1,6 @@
 import './stories.css';
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: { expanded: true, hideNoControlsWarning: true },
 };
+export const tags = ['autodocs'];

.storybook/stories.css

@@ -1,4 +1,5 @@
-svg {
+#storybook-root svg,
+.docs-story svg {
   margin: 1em;
   border: 2px solid gold;
 }

package.json

@@ -12,14 +12,14 @@
   ],
   "scripts": {
     "build": "npm run clean && npm run build-ts",
-    "build-storybook": "build-storybook",
+    "build-storybook": "storybook build",
     "build-ts": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
     "check-types": "tsc --noEmit",
     "clean": "rimraf lib lib-esm",
-    "dev": "start-storybook -p 6006",
+    "dev": "storybook dev -p 6006",
     "eslint": "eslint .",
     "eslint-fix": "npm run eslint -- --fix",
-    "playwright": "playwright test -c playwright.config.ts",
+    "playwright": "playwright test -c playwright-ct.config.ts",
     "prepack": "npm run build",
     "prettier": "prettier --check .",
     "prettier-write": "prettier --write .",
@@ -51,51 +51,51 @@
   "homepage": "https://github.com/zakodium-oss/react-plot#readme",
   "peerDependencies": {
     "@types/react": "*",
-    "react": "*"
+    "react": ">=18.0.0"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "^1.28.1",
+    "@playwright/experimental-ct-react": "^1.45.3",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/addon-storysource": "^6.5.14",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.14",
-    "@types/d3-array": "^3.0.3",
-    "@types/d3-scale": "^4.0.2",
-    "@types/d3-scale-chromatic": "^3.0.0",
-    "@types/d3-shape": "^3.1.0",
-    "@types/point-in-polygon": "^1.1.1",
-    "@types/react": "^17.0.45",
-    "@types/react-dom": "^18.0.10",
-    "@zakodium/eslint-config": "^6.0.0",
-    "eslint": "^8.29.0",
-    "isotopic-distribution": "^1.4.15",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-storysource": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/react-vite": "^8.2.6",
+    "@types/d3-array": "^3.2.1",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-scale-chromatic": "^3.0.3",
+    "@types/d3-shape": "^3.1.6",
+    "@types/node": "^22.0.0",
+    "@types/point-in-polygon": "^1.1.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^8.57.0",
+    "eslint-config-zakodium": "^10.0.0",
+    "isotopic-distribution": "^3.2.1",
     "iv-analysis": "^0.3.0",
     "ml-dataset-iris": "^1.2.1",
-    "ml-directional-distribution": "^0.1.0",
+    "ml-directional-distribution": "^0.1.1",
     "ml-pca": "^4.1.1",
-    "ml-regression-simple-linear": "^2.0.3",
-    "ml-spectra-processing": "^11.14.0",
-    "ms-spectrum": "^1.6.15",
+    "ml-regression-simple-linear": "^3.0.1",
+    "ml-spectra-processing": "^14.5.1",
+    "ms-spectrum": "^3.6.2",
     "point-in-polygon": "^1.1.0",
-    "prettier": "^2.8.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "^4.9.3",
-    "webpack": "^5.75.0"
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.0.13",
+    "typescript": "^5.5.4"
   },
   "dependencies": {
-    "d3-array": "^3.2.1",
+    "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.0.0",
-    "d3-shape": "^3.1.0",
-    "immer": "^9.0.16",
+    "d3-scale-chromatic": "^3.1.0",
+    "d3-shape": "^3.2.0",
+    "immer": "^10.1.1",
     "ml-distance-euclidean": "^2.0.0",
     "react-d3-utils": "^1.0.0"
   },
   "volta": {
-    "node": "16.18.0"
+    "node": "20.16.0"
   }
 }

playwright.config.ts → playwright-ct.config.ts

@@ -1,11 +1,10 @@
-import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react';
-import { devices } from '@playwright/experimental-ct-react';
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-const config: PlaywrightTestConfig = {
-  testDir: './tests',
+export default defineConfig({
+  testDir: './tests/',
   /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
   snapshotDir: './__snapshots__',
   /* Maximum time one test can run for. */
@@ -20,13 +19,15 @@ const config: PlaywrightTestConfig = {
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI ? 'github' : [['list'], ['html']],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
 
     /* Port to use for Playwright component endpoint. */
     ctPort: 3100,
   },
+
   /* Configure projects for major browsers */
   projects: [
     {
@@ -42,6 +43,4 @@ const config: PlaywrightTestConfig = {
       use: { ...devices['Desktop Safari'] },
     },
   ],
-};
-
-export default config;
+});

playwright/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Test components</title>
+    <title>Testing Page</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/playwright/index.ts"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

playwright/index.tsx

@@ -0,0 +1,2 @@
+// Import styles, initialize component theme here.
+// import '../src/common.css';

scripts/mass/generate.mjs

@@ -2,7 +2,7 @@ import { writeFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import IsotopicDistribution from 'isotopic-distribution';
+import { IsotopicDistribution } from 'isotopic-distribution';
 import { xyToXYObject } from 'ml-spectra-processing';
 import { getBestPeaks } from 'ms-spectrum';
 

src/components/Annotations/Annotation.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactElement, ReactNode } from 'react';
 
 import { Arrow } from './Arrow';
 import { BoxPlot } from './BoxPlot';
@@ -44,6 +44,6 @@ export interface AnnotationsProps {
   children: ReactNode;
 }
 
-export function Annotations(props: AnnotationsProps): JSX.Element {
+export function Annotations(props: AnnotationsProps): ReactElement {
   return <>{props.children}</>;
 }

src/components/Annotations/Polygon.tsx

@@ -8,7 +8,7 @@ export interface AnnotationPolygonProps
     SVGProps<SVGPolygonElement>,
     'x1' | 'x2' | 'y1' | 'y2' | 'points'
   > {
-  points: { x: ScalarValue; y: ScalarValue }[];
+  points: Array<{ x: ScalarValue; y: ScalarValue }>;
   xAxis?: string;
   yAxis?: string;
 }

src/components/Annotations/Polyline.tsx

@@ -8,7 +8,7 @@ export interface AnnotationPolylineProps
     SVGProps<SVGPolylineElement>,
     'x1' | 'x2' | 'y1' | 'y2' | 'points'
   > {
-  points: { x: ScalarValue; y: ScalarValue }[];
+  points: Array<{ x: ScalarValue; y: ScalarValue }>;
   xAxis?: string;
   yAxis?: string;
   color?: string;

src/components/Axis/Axis.tsx

@@ -59,7 +59,7 @@ export interface AxisProps {
    * With time scale the default values is d3's smart tickFormat
    * With other types of scales the default is converting the value to a string
    */
-  tickLabelFormat?: TickLabelFormat<number> | TickLabelFormat<Date>;
+  tickLabelFormat?: TickLabelFormat | TickLabelFormat<Date>;
   tickLabelStyle?: CSSProperties;
 
   primaryTickLength?: number;
@@ -173,7 +173,7 @@ export function Axis({
     return (
       <LinearAxis
         {...childProps}
-        tickLabelFormat={tickLabelFormat as TickLabelFormat<number>}
+        tickLabelFormat={tickLabelFormat as TickLabelFormat}
         scale={currentAxis.scale as ScaleLinear<number, number>}
       />
     );
@@ -189,7 +189,7 @@ export function Axis({
     return (
       <LogAxis
         {...childProps}
-        tickLabelFormat={tickLabelFormat as TickLabelFormat<number>}
+        tickLabelFormat={tickLabelFormat as TickLabelFormat}
         scale={currentAxis.scale as ScaleLogarithmic<number, number>}
       />
     );

src/components/Axis/HorizontalAxisGridLines.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useMemo } from 'react';
+import { CSSProperties, type ReactElement, useMemo } from 'react';
 
 import { Position } from '../../types';
 
@@ -29,7 +29,7 @@ export default function HorizontalAxisGridLines(
     scale,
   } = props;
   const Grid = useMemo(() => {
-    const Grid: JSX.Element[] = [];
+    const Grid: ReactElement[] = [];
     if (primaryGrid) {
       for (const { position } of primaryTicks) {
         Grid.push(

src/components/Axis/ParallelAxis.tsx

@@ -95,7 +95,7 @@ export function ParallelAxis(props: ParallelAxisProps) {
     return (
       <LinearAxis
         {...childProps}
-        tickLabelFormat={tickLabelFormat as TickLabelFormat<number>}
+        tickLabelFormat={tickLabelFormat as TickLabelFormat}
         scale={scale as ScaleLinear<number, number>}
       />
     );
@@ -111,7 +111,7 @@ export function ParallelAxis(props: ParallelAxisProps) {
     return (
       <LogAxis
         {...childProps}
-        tickLabelFormat={tickLabelFormat as TickLabelFormat<number>}
+        tickLabelFormat={tickLabelFormat as TickLabelFormat}
         scale={scale as ScaleLogarithmic<number, number>}
       />
     );

src/components/Axis/Ticks.tsx

@@ -1,6 +1,11 @@
-import { CSSProperties, ReactNode, SVGAttributes } from 'react';
+import {
+  CSSProperties,
+  type ReactElement,
+  ReactNode,
+  SVGAttributes,
+} from 'react';
 
-import { TicksType, Scales } from './types';
+import { Scales, TicksType } from './types';
 
 interface CoordinatesXY {
   x1?: number;
@@ -63,7 +68,7 @@ export function Ticks(props: Omit<TicksProps, 'children'>) {
     );
   });
 
-  let secondaryTickElements: Array<JSX.Element | null> = [];
+  let secondaryTickElements: Array<ReactElement | null> = [];
   if (secondaryTickLength !== 0) {
     // generate secondaryTicks according to the density of primaryTicks
     const range = Math.abs(scale?.range()[1] - scale?.range()[0]) || 0;

src/components/Axis/VerticalAxisGridLines.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useMemo } from 'react';
+import { CSSProperties, type ReactElement, useMemo } from 'react';
 
 import { Position } from '../../types';
 
@@ -30,7 +30,7 @@ export default function VerticalAxisGridlines(
   } = props;
 
   const Grid = useMemo(() => {
-    const Grid: JSX.Element[] = [];
+    const Grid: ReactElement[] = [];
     if (primaryGrid) {
       for (const { position } of primaryTicks) {
         Grid.push(

src/components/ErrorBars.tsx

@@ -5,7 +5,7 @@ import type { SeriesPointWithError } from '../types';
 import { validateAxis, validateSeriesPointError } from '../utils';
 
 export interface ErrorBarsProps {
-  data: ReadonlyArray<SeriesPointWithError>;
+  data: readonly SeriesPointWithError[];
   transform?: string;
   xAxis?: string;
   yAxis?: string;