From 30afe6cccfebec49b54e2e3c517de1d84f9c9219 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Wed, 11 Jun 2025 15:54:06 +0200 Subject: [PATCH 1/6] chore: update storybook to v9 and fix linter errors --- .storybook/main.js | 13 +--------- .storybook/preview.js | 3 +++ eslint.config.js | 22 ++++++++++------ package.json | 10 +++---- src/components/Axis/HorizontalAxis.tsx | 4 ++- src/components/Axis/VerticalAxis.tsx | 4 ++- src/components/Legend.tsx | 4 +-- src/contexts/plotController/usePlotEvents.ts | 26 +++++++++---------- src/utils/usePlotSizes.ts | 5 +++- stories/annotations/arrow.stories.tsx | 2 +- stories/annotations/boxPlot.stories.tsx | 2 +- stories/annotations/circle.stories.tsx | 2 +- .../annotations/directedEllipse.stories.tsx | 2 +- stories/annotations/ellipse.stories.tsx | 2 +- stories/annotations/group.stories.tsx | 2 +- stories/annotations/line.stories.tsx | 2 +- stories/annotations/polygon.stories.tsx | 2 +- stories/annotations/polyline.stories.tsx | 2 +- stories/annotations/rectangle.stories.tsx | 2 +- stories/annotations/shape.stories.tsx | 2 +- stories/annotations/text.stories.tsx | 2 +- stories/axis-boundaries.stories.tsx | 2 +- stories/control/axis.stories.tsx | 2 +- stories/control/bar.stories.tsx | 2 +- stories/control/function.stories.tsx | 2 +- stories/control/heading.stories.tsx | 2 +- stories/control/legend.stories.tsx | 2 +- stories/control/line.stories.tsx | 2 +- stories/control/logaxis.stories.tsx | 2 +- stories/control/parallelaxis.stories.tsx | 2 +- stories/control/plot.stories.tsx | 2 +- stories/control/range.stories.tsx | 2 +- stories/control/scatter.stories.tsx | 2 +- stories/control/timeaxis.stories.tsx | 2 +- stories/control/tracking.stories.tsx | 2 +- stories/examples/absorbance.stories.tsx | 4 +-- stories/examples/axis.stories.tsx | 2 +- stories/examples/bed.stories.tsx | 2 +- stories/examples/bitcoin.stories.tsx | 4 +-- stories/examples/boxPlot.stories.tsx | 2 +- stories/examples/callback.stories.tsx | 2 +- stories/examples/color-serie.stories.tsx | 4 +-- stories/examples/covid-cases.stories.tsx | 4 +-- stories/examples/draw.stories.tsx | 2 +- stories/examples/iris-dataset.stories.tsx | 2 +- stories/examples/lassoselection.stories.tsx | 2 +- stories/examples/measurement.stories.tsx | 4 +-- stories/examples/mixed.stories.tsx | 2 +- stories/examples/nasdaq.stories.tsx | 4 +-- stories/examples/nested-zoom.stories.tsx | 2 +- stories/examples/parallel-zoom.stories.tsx | 2 +- stories/examples/pca.stories.tsx | 4 +-- stories/examples/sanplot-big-data.stories.tsx | 4 +-- stories/examples/shapes.stories.tsx | 2 +- stories/examples/shift.stories.tsx | 2 +- stories/examples/spectrum2d.stories.tsx | 4 +-- stories/examples/weatherchart.stories.tsx | 4 +-- stories/examples/zoom.stories.tsx | 2 +- stories/plot-object.stories.tsx | 2 +- stories/plot.stories.tsx | 2 +- stories/spectra/infrared.stories.tsx | 2 +- stories/spectra/iv.stories.tsx | 2 +- stories/spectra/mass.stories.tsx | 4 +-- stories/spectra/nmr.stories.tsx | 6 ++--- stories/spectra/raman.stories.tsx | 4 +-- stories/spectra/tga.stories.tsx | 6 ++--- stories/utils.tsx | 4 +-- tests/utils.tsx | 2 +- tsconfig.json | 2 +- 69 files changed, 124 insertions(+), 121 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 14101545..92f8381d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,18 +1,7 @@ export default { stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'], - addons: [ - { - name: '@storybook/addon-storysource', - options: { - loaderOptions: { - injectStoryParameters: false, - }, - }, - }, - '@storybook/addon-links', - '@storybook/addon-essentials', - ], + addons: ['@storybook/addon-links', '@storybook/addon-docs'], staticDirs: ['../stories/data'], diff --git a/.storybook/preview.js b/.storybook/preview.js index 5cec7488..7b5636bc 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,5 +3,8 @@ import './stories.css'; export const parameters = { controls: { expanded: true, hideNoControlsWarning: true }, + docs: { + codePanel: true, + }, }; export const tags = ['autodocs']; diff --git a/eslint.config.js b/eslint.config.js index 7e66236d..a5236cae 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,14 +1,19 @@ +import { defineConfig, globalIgnores } from 'eslint/config'; import react from 'eslint-config-zakodium/react'; import ts from 'eslint-config-zakodium/ts'; import unicorn from 'eslint-config-zakodium/unicorn'; +import storybook from 'eslint-plugin-storybook'; -export default [ - { - ignores: ['lib', 'node_modules', 'playwright/.cache', 'storybook-static'], - }, - ...ts, - ...react, - ...unicorn, +export default defineConfig( + globalIgnores([ + 'lib', + 'node_modules', + 'playwright/.cache', + 'storybook-static', + ]), + ts, + react, + unicorn, { rules: { '@typescript-eslint/no-dynamic-delete': 'off', @@ -21,4 +26,5 @@ export default [ '@typescript-eslint/unbound-method': 'off', }, }, -]; + ...storybook.configs['flat/recommended'], +); diff --git a/package.json b/package.json index 15742027..bc91c7a7 100644 --- a/package.json +++ b/package.json @@ -54,11 +54,9 @@ "devDependencies": { "@playwright/experimental-ct-react": "^1.48.0", "@simbathesailor/use-what-changed": "^2.0.0", - "@storybook/addon-essentials": "^8.3.5", - "@storybook/addon-links": "^8.3.5", - "@storybook/addon-storysource": "^8.3.5", - "@storybook/react": "^8.3.5", - "@storybook/react-vite": "^8.3.5", + "@storybook/addon-docs": "^9.0.8", + "@storybook/addon-links": "^9.0.8", + "@storybook/react-vite": "^9.0.8", "@types/d3-array": "^3.2.1", "@types/d3-scale": "^4.0.8", "@types/d3-scale-chromatic": "^3.0.3", @@ -69,6 +67,7 @@ "@types/react-dom": "^18.3.1", "eslint": "^9.12.0", "eslint-config-zakodium": "^13.0.0", + "eslint-plugin-storybook": "^9.0.8", "isotopic-distribution": "^3.3.2", "iv-analysis": "^0.4.0", "ml-dataset-iris": "^1.2.1", @@ -83,6 +82,7 @@ "react-dom": "^18.3.1", "react-error-boundary": "^4.0.13", "rimraf": "^6.0.1", + "storybook": "^9.0.8", "typescript": "^5.6.3" }, "dependencies": { diff --git a/src/components/Axis/HorizontalAxis.tsx b/src/components/Axis/HorizontalAxis.tsx index 01420630..c4978ad3 100644 --- a/src/components/Axis/HorizontalAxis.tsx +++ b/src/components/Axis/HorizontalAxis.tsx @@ -79,12 +79,14 @@ export default function HorizontalAxis(props: AxisRendererProps) { y2: y, textPosition: textOffset + tickLength, }; - default: + case undefined: return { y1: 0, y: 0, textPosition: 0, }; + default: + throw new Error(`Invalid tick position ${String(tickPosition)}`); } } const gridLinesElement = diff --git a/src/components/Axis/VerticalAxis.tsx b/src/components/Axis/VerticalAxis.tsx index b243e4a4..6454da03 100644 --- a/src/components/Axis/VerticalAxis.tsx +++ b/src/components/Axis/VerticalAxis.tsx @@ -76,12 +76,14 @@ export default function VerticalAxis(props: AxisRendererProps) { x2: x, textPosition: textOffset + tickLength, }; - default: + case undefined: return { x1: 0, x2: 0, textPosition: 3, }; + default: + throw new Error(`Invalid tick position ${String(tickPosition)}`); } } const gridLinesElement = diff --git a/src/components/Legend.tsx b/src/components/Legend.tsx index 59053bd9..0dca0fc3 100644 --- a/src/components/Legend.tsx +++ b/src/components/Legend.tsx @@ -13,7 +13,7 @@ import { functionalStyle } from '../utils.js'; import { markersMap } from './Markers.map.js'; -type Positions = { [K in Position]?: number }; +type Positions = Partial>; interface ValidatedPosition { key?: Position; @@ -121,7 +121,7 @@ export type LegendProps = { labelStyle?: CSSFuncProps<{ id: string }>; lineStyle?: CSSFuncProps<{ id: string }>; showHide?: boolean; -} & { [K in Position]?: number }; +} & Partial>; export function Legend(options: LegendProps) { const { diff --git a/src/contexts/plotController/usePlotEvents.ts b/src/contexts/plotController/usePlotEvents.ts index e267bb1c..96088a5c 100644 --- a/src/contexts/plotController/usePlotEvents.ts +++ b/src/contexts/plotController/usePlotEvents.ts @@ -16,24 +16,22 @@ type ClickEventName = 'onClick' | 'onDoubleClick'; type WheelEventName = 'onWheel'; export type EventName = PointerEventName | ClickEventName | WheelEventName; -type PointerEventHandlers = { - [key in PointerEventName]?: EventHandler; -}; -type ClickEventHandlers = { - [key in ClickEventName]?: EventHandler; -}; -type WheelEventHandlers = { - [key in WheelEventName]?: EventHandler; -}; +type PointerEventHandlers = Partial< + Record> +>; +type ClickEventHandlers = Partial< + Record> +>; +type WheelEventHandlers = Partial< + Record> +>; export type EventsHandlers = PointerEventHandlers & ClickEventHandlers & WheelEventHandlers; -type EventMap = { - [key in PointerEventName]: PointerEvent; -} & { [key in ClickEventName]: MouseEvent } & { - [key in WheelEventName]: WheelEvent; -}; +type EventMap = Record & + Record & + Record; export interface PlotEventsUserActions { registerHandlers: (handlersRef: RefObject) => void; diff --git a/src/utils/usePlotSizes.ts b/src/utils/usePlotSizes.ts index 984cbd83..badbb103 100644 --- a/src/utils/usePlotSizes.ts +++ b/src/utils/usePlotSizes.ts @@ -84,8 +84,11 @@ export function usePlotSizes({ leftOffset += totalLegendWidth; legendOffset = finalLeftAxisWidth + legendMargin; break; - default: + case 'embedded': + case null: break; + default: + throw new Error(`Invalid legendPosition: ${String(legendPosition)}`); } return { plotWidth, plotHeight, leftOffset, topOffset, legendOffset }; diff --git a/stories/annotations/arrow.stories.tsx b/stories/annotations/arrow.stories.tsx index bc8b586d..513e867f 100644 --- a/stories/annotations/arrow.stories.tsx +++ b/stories/annotations/arrow.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationArrowProps } from '../../src/index.js'; diff --git a/stories/annotations/boxPlot.stories.tsx b/stories/annotations/boxPlot.stories.tsx index 458dd169..5200f6f4 100644 --- a/stories/annotations/boxPlot.stories.tsx +++ b/stories/annotations/boxPlot.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationBoxPlotProps } from '../../src/index.js'; diff --git a/stories/annotations/circle.stories.tsx b/stories/annotations/circle.stories.tsx index 0ec0118e..1e2759df 100644 --- a/stories/annotations/circle.stories.tsx +++ b/stories/annotations/circle.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationCircleProps } from '../../src/index.js'; diff --git a/stories/annotations/directedEllipse.stories.tsx b/stories/annotations/directedEllipse.stories.tsx index 2a802e7e..a8022981 100644 --- a/stories/annotations/directedEllipse.stories.tsx +++ b/stories/annotations/directedEllipse.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, diff --git a/stories/annotations/ellipse.stories.tsx b/stories/annotations/ellipse.stories.tsx index 00564113..5ad0e1f4 100644 --- a/stories/annotations/ellipse.stories.tsx +++ b/stories/annotations/ellipse.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationEllipseProps } from '../../src/index.js'; diff --git a/stories/annotations/group.stories.tsx b/stories/annotations/group.stories.tsx index c3fbfb7c..ae6f16e5 100644 --- a/stories/annotations/group.stories.tsx +++ b/stories/annotations/group.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationGroupProps } from '../../src/index.js'; diff --git a/stories/annotations/line.stories.tsx b/stories/annotations/line.stories.tsx index e8e41f38..0ad659cb 100644 --- a/stories/annotations/line.stories.tsx +++ b/stories/annotations/line.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationLineProps } from '../../src/index.js'; diff --git a/stories/annotations/polygon.stories.tsx b/stories/annotations/polygon.stories.tsx index e3b0a734..6dc4f27a 100644 --- a/stories/annotations/polygon.stories.tsx +++ b/stories/annotations/polygon.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationPolygonProps } from '../../src/index.js'; diff --git a/stories/annotations/polyline.stories.tsx b/stories/annotations/polyline.stories.tsx index 0db3aad3..f8edbe5e 100644 --- a/stories/annotations/polyline.stories.tsx +++ b/stories/annotations/polyline.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationPolylineProps } from '../../src/index.js'; diff --git a/stories/annotations/rectangle.stories.tsx b/stories/annotations/rectangle.stories.tsx index ec135aee..9ec6bd9d 100644 --- a/stories/annotations/rectangle.stories.tsx +++ b/stories/annotations/rectangle.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationRectangleProps } from '../../src/index.js'; diff --git a/stories/annotations/shape.stories.tsx b/stories/annotations/shape.stories.tsx index 7780870a..af736072 100644 --- a/stories/annotations/shape.stories.tsx +++ b/stories/annotations/shape.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationShapeProps } from '../../src/index.js'; diff --git a/stories/annotations/text.stories.tsx b/stories/annotations/text.stories.tsx index 65bce5db..e7f027f2 100644 --- a/stories/annotations/text.stories.tsx +++ b/stories/annotations/text.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationTextProps } from '../../src/index.js'; diff --git a/stories/axis-boundaries.stories.tsx b/stories/axis-boundaries.stories.tsx index ed930c1c..3e9970eb 100644 --- a/stories/axis-boundaries.stories.tsx +++ b/stories/axis-boundaries.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, Heading, Legend, LineSeries, Plot } from '../src/index.js'; diff --git a/stories/control/axis.stories.tsx b/stories/control/axis.stories.tsx index e2a6e684..d1ec848f 100644 --- a/stories/control/axis.stories.tsx +++ b/stories/control/axis.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, type AxisProps, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils.js'; diff --git a/stories/control/bar.stories.tsx b/stories/control/bar.stories.tsx index 76973cbd..254a68bd 100644 --- a/stories/control/bar.stories.tsx +++ b/stories/control/bar.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, diff --git a/stories/control/function.stories.tsx b/stories/control/function.stories.tsx index a748cbb6..e25970ad 100644 --- a/stories/control/function.stories.tsx +++ b/stories/control/function.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotations, diff --git a/stories/control/heading.stories.tsx b/stories/control/heading.stories.tsx index 9efed785..8bf714b7 100644 --- a/stories/control/heading.stories.tsx +++ b/stories/control/heading.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, Heading, type HeadingProps, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils.js'; diff --git a/stories/control/legend.stories.tsx b/stories/control/legend.stories.tsx index ee0a7222..7d2299e8 100644 --- a/stories/control/legend.stories.tsx +++ b/stories/control/legend.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { useState } from 'react'; import { diff --git a/stories/control/line.stories.tsx b/stories/control/line.stories.tsx index c8013b9d..7cf1ec97 100644 --- a/stories/control/line.stories.tsx +++ b/stories/control/line.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, diff --git a/stories/control/logaxis.stories.tsx b/stories/control/logaxis.stories.tsx index a74ae7b0..b3acb082 100644 --- a/stories/control/logaxis.stories.tsx +++ b/stories/control/logaxis.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, LineSeries, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; diff --git a/stories/control/parallelaxis.stories.tsx b/stories/control/parallelaxis.stories.tsx index 69e3745f..b797e802 100644 --- a/stories/control/parallelaxis.stories.tsx +++ b/stories/control/parallelaxis.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, diff --git a/stories/control/plot.stories.tsx b/stories/control/plot.stories.tsx index 3d3bcaf0..8d111919 100644 --- a/stories/control/plot.stories.tsx +++ b/stories/control/plot.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, diff --git a/stories/control/range.stories.tsx b/stories/control/range.stories.tsx index a8e86cec..b5202aac 100644 --- a/stories/control/range.stories.tsx +++ b/stories/control/range.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, diff --git a/stories/control/scatter.stories.tsx b/stories/control/scatter.stories.tsx index 299746ab..4687bd0c 100644 --- a/stories/control/scatter.stories.tsx +++ b/stories/control/scatter.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, diff --git a/stories/control/timeaxis.stories.tsx b/stories/control/timeaxis.stories.tsx index db1a3d32..e744c840 100644 --- a/stories/control/timeaxis.stories.tsx +++ b/stories/control/timeaxis.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, LineSeries, Plot } from '../../src/index.js'; import { dataConvertDate } from '../../src/utils.js'; diff --git a/stories/control/tracking.stories.tsx b/stories/control/tracking.stories.tsx index a2622b69..b0c6e977 100644 --- a/stories/control/tracking.stories.tsx +++ b/stories/control/tracking.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { useState } from 'react'; import type { diff --git a/stories/examples/absorbance.stories.tsx b/stories/examples/absorbance.stories.tsx index f96e1abe..37db6e19 100644 --- a/stories/examples/absorbance.stories.tsx +++ b/stories/examples/absorbance.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, @@ -8,7 +8,7 @@ import { type RangeSeriesPoint, type SeriesPoint, } from '../../src/index.js'; -import data from '../data/absorb.json'; +import data from '../data/absorb.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/examples/axis.stories.tsx b/stories/examples/axis.stories.tsx index ba8d8c18..e0c6c010 100644 --- a/stories/examples/axis.stories.tsx +++ b/stories/examples/axis.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils.js'; diff --git a/stories/examples/bed.stories.tsx b/stories/examples/bed.stories.tsx index 21465bc5..88d55f9f 100644 --- a/stories/examples/bed.stories.tsx +++ b/stories/examples/bed.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Fragment } from 'react'; import { diff --git a/stories/examples/bitcoin.stories.tsx b/stories/examples/bitcoin.stories.tsx index f5584693..3e5e4df3 100644 --- a/stories/examples/bitcoin.stories.tsx +++ b/stories/examples/bitcoin.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, @@ -7,7 +7,7 @@ import { Plot, type SeriesPoint, } from '../../src/index.js'; -import data from '../data/bitcoin.json'; +import data from '../data/bitcoin.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/examples/boxPlot.stories.tsx b/stories/examples/boxPlot.stories.tsx index 65131a02..56b029d5 100644 --- a/stories/examples/boxPlot.stories.tsx +++ b/stories/examples/boxPlot.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, diff --git a/stories/examples/callback.stories.tsx b/stories/examples/callback.stories.tsx index 344ed66a..e1be7fc6 100644 --- a/stories/examples/callback.stories.tsx +++ b/stories/examples/callback.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { useState } from 'react'; import { Annotation, Annotations, Plot } from '../../src/index.js'; diff --git a/stories/examples/color-serie.stories.tsx b/stories/examples/color-serie.stories.tsx index 5be79afe..b265fbd1 100644 --- a/stories/examples/color-serie.stories.tsx +++ b/stories/examples/color-serie.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, @@ -7,7 +7,7 @@ import { ScatterSeries, type SeriesPoint, } from '../../src/index.js'; -import data from '../data/color-serie.json'; +import data from '../data/color-serie.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/examples/covid-cases.stories.tsx b/stories/examples/covid-cases.stories.tsx index fdd210f4..634de7d9 100644 --- a/stories/examples/covid-cases.stories.tsx +++ b/stories/examples/covid-cases.stories.tsx @@ -1,7 +1,7 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, Heading, LineSeries, Plot } from '../../src/index.js'; -import data from '../data/covid-cases.json'; +import data from '../data/covid-cases.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/examples/draw.stories.tsx b/stories/examples/draw.stories.tsx index b4fb3f6f..a39fe7cc 100644 --- a/stories/examples/draw.stories.tsx +++ b/stories/examples/draw.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotations, diff --git a/stories/examples/iris-dataset.stories.tsx b/stories/examples/iris-dataset.stories.tsx index 342764c1..9938982f 100644 --- a/stories/examples/iris-dataset.stories.tsx +++ b/stories/examples/iris-dataset.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { getClasses, getDistinctClasses, getNumbers } from 'ml-dataset-iris'; import { PCA as MlPCA } from 'ml-pca'; import { SimpleLinearRegression } from 'ml-regression-simple-linear'; diff --git a/stories/examples/lassoselection.stories.tsx b/stories/examples/lassoselection.stories.tsx index 395b319f..6189ad59 100644 --- a/stories/examples/lassoselection.stories.tsx +++ b/stories/examples/lassoselection.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import pointInPolygon from 'point-in-polygon'; import { useState } from 'react'; diff --git a/stories/examples/measurement.stories.tsx b/stories/examples/measurement.stories.tsx index 547c539b..ca0f2fa0 100644 --- a/stories/examples/measurement.stories.tsx +++ b/stories/examples/measurement.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { xyToXYObject } from 'ml-spectra-processing'; import { @@ -10,7 +10,7 @@ import { useCrossHair, useRectangularZoom, } from '../../src/index.js'; -import measurement from '../data/measurement.json'; +import measurement from '../data/measurement.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; interface MeasurementProps { diff --git a/stories/examples/mixed.stories.tsx b/stories/examples/mixed.stories.tsx index 4feecf3a..fcd03ab8 100644 --- a/stories/examples/mixed.stories.tsx +++ b/stories/examples/mixed.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, type AnnotationLineProps } from '../../src/index.js'; import { AnnotationPlot } from '../annotations/annotation.data.js'; diff --git a/stories/examples/nasdaq.stories.tsx b/stories/examples/nasdaq.stories.tsx index 4f91f898..93665484 100644 --- a/stories/examples/nasdaq.stories.tsx +++ b/stories/examples/nasdaq.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { useEffect, useState } from 'react'; import { @@ -8,7 +8,7 @@ import { Plot, type SeriesPoint, } from '../../src/index.js'; -import srcData from '../data/nasdaq.json'; +import srcData from '../data/nasdaq.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/examples/nested-zoom.stories.tsx b/stories/examples/nested-zoom.stories.tsx index 8bea3e3d..2a6e637b 100644 --- a/stories/examples/nested-zoom.stories.tsx +++ b/stories/examples/nested-zoom.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotations, diff --git a/stories/examples/parallel-zoom.stories.tsx b/stories/examples/parallel-zoom.stories.tsx index 2d044aed..123510d0 100644 --- a/stories/examples/parallel-zoom.stories.tsx +++ b/stories/examples/parallel-zoom.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotations, diff --git a/stories/examples/pca.stories.tsx b/stories/examples/pca.stories.tsx index 5bc8a17b..9faa5e79 100644 --- a/stories/examples/pca.stories.tsx +++ b/stories/examples/pca.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { getDirectionalEllipse } from 'ml-directional-distribution'; import { useMemo } from 'react'; @@ -11,7 +11,7 @@ import { ScatterSeries, useRectangularZoom, } from '../../src/index.js'; -import data from '../data/pca2.json'; +import data from '../data/pca2.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; export default { diff --git a/stories/examples/sanplot-big-data.stories.tsx b/stories/examples/sanplot-big-data.stories.tsx index 38604d18..f14667cf 100644 --- a/stories/examples/sanplot-big-data.stories.tsx +++ b/stories/examples/sanplot-big-data.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { xNoiseSanPlot } from 'ml-spectra-processing'; import { useMemo } from 'react'; @@ -10,7 +10,7 @@ import { Plot, type SeriesPoint, } from '../../src/index.js'; -import data from '../data/1h-spectrum.json'; +import data from '../data/1h-spectrum.json' with { type: 'json' }; export default { title: 'Examples/Sanplot', diff --git a/stories/examples/shapes.stories.tsx b/stories/examples/shapes.stories.tsx index 70d907c9..c0bc1795 100644 --- a/stories/examples/shapes.stories.tsx +++ b/stories/examples/shapes.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Circle, diff --git a/stories/examples/shift.stories.tsx b/stories/examples/shift.stories.tsx index 710d3d87..a0e1a37b 100644 --- a/stories/examples/shift.stories.tsx +++ b/stories/examples/shift.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, diff --git a/stories/examples/spectrum2d.stories.tsx b/stories/examples/spectrum2d.stories.tsx index 1f85418d..17b56a94 100644 --- a/stories/examples/spectrum2d.stories.tsx +++ b/stories/examples/spectrum2d.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { useMemo } from 'react'; import { @@ -9,7 +9,7 @@ import { useRectangularZoom, type UseRectangularZoomOptions, } from '../../src/index.js'; -import data from '../data/spectrum2d.json'; +import data from '../data/spectrum2d.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; export default { diff --git a/stories/examples/weatherchart.stories.tsx b/stories/examples/weatherchart.stories.tsx index bbd512a2..513b042c 100644 --- a/stories/examples/weatherchart.stories.tsx +++ b/stories/examples/weatherchart.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, @@ -9,7 +9,7 @@ import { type RangeSeriesPoint, type SeriesPoint, } from '../../src/index.js'; -import data from '../data/weather.json'; +import data from '../data/weather.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; export default { diff --git a/stories/examples/zoom.stories.tsx b/stories/examples/zoom.stories.tsx index 27c21339..936c317a 100644 --- a/stories/examples/zoom.stories.tsx +++ b/stories/examples/zoom.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, diff --git a/stories/plot-object.stories.tsx b/stories/plot-object.stories.tsx index 9c096efa..f41db6a8 100644 --- a/stories/plot-object.stories.tsx +++ b/stories/plot-object.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotation, PlotObject, type PlotObjectPlot } from '../src/index.js'; diff --git a/stories/plot.stories.tsx b/stories/plot.stories.tsx index 208a888f..d06923c6 100644 --- a/stories/plot.stories.tsx +++ b/stories/plot.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, diff --git a/stories/spectra/infrared.stories.tsx b/stories/spectra/infrared.stories.tsx index 6364219f..dd19d155 100644 --- a/stories/spectra/infrared.stories.tsx +++ b/stories/spectra/infrared.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Annotations, diff --git a/stories/spectra/iv.stories.tsx b/stories/spectra/iv.stories.tsx index e37f7716..54c8838f 100644 --- a/stories/spectra/iv.stories.tsx +++ b/stories/spectra/iv.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import type { MeasurementSelector } from 'base-analysis'; import { Analysis, fromBreakdown, fromTransfer } from 'iv-analysis'; import { xyToXYObject } from 'ml-spectra-processing'; diff --git a/stories/spectra/mass.stories.tsx b/stories/spectra/mass.stories.tsx index 8bc9e136..edfb5ab8 100644 --- a/stories/spectra/mass.stories.tsx +++ b/stories/spectra/mass.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { IsotopicDistribution } from 'isotopic-distribution'; import { xyToXYObject } from 'ml-spectra-processing'; import { getBestPeaks } from 'ms-spectrum'; @@ -16,7 +16,7 @@ import { usePan, usePlotControllerAxes, } from '../../src/index.js'; -import data from '../data/mass.json'; +import data from '../data/mass.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; export default { diff --git a/stories/spectra/nmr.stories.tsx b/stories/spectra/nmr.stories.tsx index 4a475d1a..516b46b7 100644 --- a/stories/spectra/nmr.stories.tsx +++ b/stories/spectra/nmr.stories.tsx @@ -1,9 +1,9 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { xyToXYObject } from 'ml-spectra-processing'; import { Axis, LineSeries, Plot } from '../../src/index.js'; -import data from '../data/nmr.json'; -import stackData from '../data/stack-spectra.json'; +import data from '../data/nmr.json' with { type: 'json' }; +import stackData from '../data/stack-spectra.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/spectra/raman.stories.tsx b/stories/spectra/raman.stories.tsx index b13ec356..766351a3 100644 --- a/stories/spectra/raman.stories.tsx +++ b/stories/spectra/raman.stories.tsx @@ -1,7 +1,7 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, LineSeries, Plot } from '../../src/index.js'; -import data from '../data/raman.json'; +import data from '../data/raman.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/spectra/tga.stories.tsx b/stories/spectra/tga.stories.tsx index 7b091a0a..fa9cb51c 100644 --- a/stories/spectra/tga.stories.tsx +++ b/stories/spectra/tga.stories.tsx @@ -1,8 +1,8 @@ -import type { Meta } from '@storybook/react'; +import type { Meta } from '@storybook/react-vite'; import { Axis, LineSeries, Plot } from '../../src/index.js'; -import data1 from '../data/tga1.json'; -import data2 from '../data/tga2.json'; +import data1 from '../data/tga1.json' with { type: 'json' }; +import data2 from '../data/tga2.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/utils.tsx b/stories/utils.tsx index 3e5c712f..a631a642 100644 --- a/stories/utils.tsx +++ b/stories/utils.tsx @@ -1,11 +1,11 @@ /* eslint-disable react-refresh/only-export-components */ -import type { Decorator } from '@storybook/react'; +import type { Decorator } from '@storybook/react-vite'; import type { ReactNode } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { LineSeries, PlotController } from '../src/index.js'; -import infrared from './data/infrared.json'; +import infrared from './data/infrared.json' with { type: 'json' }; export const DEFAULT_PLOT_CONFIG = { width: 900, diff --git a/tests/utils.tsx b/tests/utils.tsx index 155cd906..c3f708aa 100644 --- a/tests/utils.tsx +++ b/tests/utils.tsx @@ -2,7 +2,7 @@ import { type ReactNode, useState } from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; import { Annotation, Annotations, Plot, ScatterSeries } from '../src/index.js'; -import infrared from '../stories/data/infrared.json'; +import infrared from '../stories/data/infrared.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../stories/utils.js'; interface ChildrenProps { diff --git a/tsconfig.json b/tsconfig.json index d486fd4d..bff0703d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "lib": ["DOM", "ES2022"], - "types": [], + "types": ["node"], "target": "ES2022", "outDir": "lib", "jsx": "react-jsx", From 40d3d5e8feacf49dca8df960dd8415e1600e62d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Wed, 11 Jun 2025 16:13:50 +0200 Subject: [PATCH 2/6] feat: update react-d3-utils and devDeps --- package.json | 28 ++++++------- src/components/Annotations/Annotations.tsx | 2 +- src/components/Annotations/Group.tsx | 3 +- src/components/Axis/Axis.tsx | 3 +- .../Axis/HorizontalAxisGridLines.tsx | 3 +- src/components/Axis/HorizontalAxisLabel.tsx | 3 +- src/components/Axis/LinearAxis.tsx | 11 +++-- src/components/Axis/Ticks.tsx | 10 ++--- src/components/Axis/TimeAxis.tsx | 2 +- src/components/Axis/VerticalAxisGridLines.tsx | 3 +- src/components/Axis/VerticalAxisLabel.tsx | 3 +- src/components/Axis/types.ts | 8 +--- src/components/ErrorBars.tsx | 3 +- src/components/Heading.tsx | 3 +- src/components/Legend.tsx | 6 ++- src/components/Plot.tsx | 18 ++++---- src/components/PlotObject.tsx | 42 ++++++++++--------- src/components/Series/BarSeries.tsx | 3 +- src/components/Series/LineSeries.tsx | 6 ++- src/components/Series/RangeSeries.tsx | 3 +- src/components/Series/ScatterSeries.tsx | 3 +- src/components/Series/Series.tsx | 2 +- src/components/Tracking.tsx | 8 ++-- src/contexts/bboxContext.ts | 3 +- src/contexts/legendContext.provider.tsx | 10 ++--- src/contexts/legendContext.ts | 3 +- src/contexts/plotContext.ts | 20 ++++----- .../plotController/nestableContext.tsx | 3 +- .../plotController/plotControllerContext.ts | 7 +--- src/contexts/plotController/usePlotEvents.ts | 3 +- src/hooks/useAxisZoom.tsx | 12 ++---- src/hooks/useCrossHair.tsx | 15 +++---- src/utils.ts | 3 +- src/utils/splitChildren.tsx | 8 +--- stories/annotations/arrow.stories.tsx | 3 +- stories/annotations/boxPlot.stories.tsx | 3 +- stories/annotations/circle.stories.tsx | 3 +- .../annotations/directedEllipse.stories.tsx | 6 +-- stories/annotations/ellipse.stories.tsx | 3 +- stories/annotations/group.stories.tsx | 3 +- stories/annotations/line.stories.tsx | 3 +- stories/annotations/polygon.stories.tsx | 3 +- stories/annotations/polyline.stories.tsx | 3 +- stories/annotations/rectangle.stories.tsx | 3 +- stories/annotations/shape.stories.tsx | 3 +- stories/annotations/text.stories.tsx | 3 +- stories/control/axis.stories.tsx | 3 +- stories/control/bar.stories.tsx | 9 +--- stories/control/function.stories.tsx | 2 +- stories/control/heading.stories.tsx | 3 +- stories/control/legend.stories.tsx | 2 +- stories/control/line.stories.tsx | 10 +---- stories/control/parallelaxis.stories.tsx | 9 +--- stories/control/plot.stories.tsx | 9 +--- stories/control/range.stories.tsx | 3 +- stories/control/scatter.stories.tsx | 13 +++--- stories/control/tracking.stories.tsx | 2 +- stories/examples/absorbance.stories.tsx | 10 +---- stories/examples/bitcoin.stories.tsx | 9 +--- stories/examples/boxPlot.stories.tsx | 9 +--- stories/examples/color-serie.stories.tsx | 9 +--- stories/examples/draw.stories.tsx | 6 ++- stories/examples/iris-dataset.stories.tsx | 5 ++- stories/examples/lassoselection.stories.tsx | 3 +- stories/examples/mixed.stories.tsx | 3 +- stories/examples/nasdaq.stories.tsx | 9 +--- stories/examples/sanplot-big-data.stories.tsx | 10 +---- stories/examples/shift.stories.tsx | 2 +- stories/examples/spectrum2d.stories.tsx | 2 +- stories/examples/weatherchart.stories.tsx | 3 +- stories/examples/zoom.stories.tsx | 2 +- stories/plot-object.stories.tsx | 3 +- stories/plot.stories.tsx | 11 +---- stories/spectra/infrared.stories.tsx | 9 +--- stories/spectra/iv.stories.tsx | 6 ++- tests/utils.tsx | 3 +- 76 files changed, 215 insertions(+), 266 deletions(-) diff --git a/package.json b/package.json index bc91c7a7..7f429d89 100644 --- a/package.json +++ b/package.json @@ -52,38 +52,38 @@ "react": ">=18.0.0" }, "devDependencies": { - "@playwright/experimental-ct-react": "^1.48.0", + "@playwright/experimental-ct-react": "^1.53.0", "@simbathesailor/use-what-changed": "^2.0.0", "@storybook/addon-docs": "^9.0.8", "@storybook/addon-links": "^9.0.8", "@storybook/react-vite": "^9.0.8", "@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/d3-scale": "^4.0.9", + "@types/d3-scale-chromatic": "^3.1.0", + "@types/d3-shape": "^3.1.7", "@types/node": "^22.7.5", "@types/point-in-polygon": "^1.1.5", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.1", - "eslint": "^9.12.0", - "eslint-config-zakodium": "^13.0.0", + "eslint": "^9.28.0", + "eslint-config-zakodium": "^15.0.1", "eslint-plugin-storybook": "^9.0.8", - "isotopic-distribution": "^3.3.2", + "isotopic-distribution": "^3.4.14", "iv-analysis": "^0.4.0", "ml-dataset-iris": "^1.2.1", "ml-directional-distribution": "^0.1.1", "ml-pca": "^4.1.1", "ml-regression-simple-linear": "^3.0.1", - "ml-spectra-processing": "^14.6.0", - "ms-spectrum": "^3.6.7", + "ml-spectra-processing": "^14.12.0", + "ms-spectrum": "^3.9.0", "point-in-polygon": "^1.1.0", - "prettier": "^3.3.3", + "prettier": "^3.5.3", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-error-boundary": "^4.0.13", + "react-error-boundary": "^6.0.0", "rimraf": "^6.0.1", "storybook": "^9.0.8", - "typescript": "^5.6.3" + "typescript": "^5.8.3" }, "dependencies": { "d3-array": "^3.2.4", @@ -92,9 +92,9 @@ "d3-shape": "^3.2.0", "immer": "^10.1.1", "ml-distance-euclidean": "^2.0.0", - "react-d3-utils": "^2.0.0" + "react-d3-utils": "^3.0.0" }, "volta": { - "node": "22.9.0" + "node": "22.16.0" } } diff --git a/src/components/Annotations/Annotations.tsx b/src/components/Annotations/Annotations.tsx index b6f97775..f5b76f42 100644 --- a/src/components/Annotations/Annotations.tsx +++ b/src/components/Annotations/Annotations.tsx @@ -1,4 +1,4 @@ -import { type ReactElement, type ReactNode } from 'react'; +import type { ReactElement, ReactNode } from 'react'; export interface AnnotationsProps { children: ReactNode; diff --git a/src/components/Annotations/Group.tsx b/src/components/Annotations/Group.tsx index 18806788..de97bb23 100644 --- a/src/components/Annotations/Group.tsx +++ b/src/components/Annotations/Group.tsx @@ -1,5 +1,6 @@ import type { CSSProperties, ReactNode } from 'react'; -import { type Align, AlignGroup } from 'react-d3-utils'; +import type { Align } from 'react-d3-utils'; +import { AlignGroup } from 'react-d3-utils'; import { usePosition } from '../../hooks.js'; import type { ScalarValue } from '../../types.js'; diff --git a/src/components/Axis/Axis.tsx b/src/components/Axis/Axis.tsx index 6b0bbc44..2f8b8fdf 100644 --- a/src/components/Axis/Axis.tsx +++ b/src/components/Axis/Axis.tsx @@ -1,5 +1,6 @@ import type { ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3-scale'; -import { type CSSProperties, type ReactNode, useEffect } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; +import { useEffect } from 'react'; import { usePlotContext, diff --git a/src/components/Axis/HorizontalAxisGridLines.tsx b/src/components/Axis/HorizontalAxisGridLines.tsx index 06a1226c..a4b7202e 100644 --- a/src/components/Axis/HorizontalAxisGridLines.tsx +++ b/src/components/Axis/HorizontalAxisGridLines.tsx @@ -1,4 +1,5 @@ -import { type CSSProperties, type ReactElement, useMemo } from 'react'; +import type { CSSProperties, ReactElement } from 'react'; +import { useMemo } from 'react'; import type { Position } from '../../types.js'; diff --git a/src/components/Axis/HorizontalAxisLabel.tsx b/src/components/Axis/HorizontalAxisLabel.tsx index f652c146..8609f4bc 100644 --- a/src/components/Axis/HorizontalAxisLabel.tsx +++ b/src/components/Axis/HorizontalAxisLabel.tsx @@ -1,5 +1,6 @@ import type { CSSProperties, ReactNode } from 'react'; -import { type Align, AlignGroup } from 'react-d3-utils'; +import type { Align } from 'react-d3-utils'; +import { AlignGroup } from 'react-d3-utils'; interface HorizontalAxisLabelProps { plotWidth: number; diff --git a/src/components/Axis/LinearAxis.tsx b/src/components/Axis/LinearAxis.tsx index 87f21c35..0f1c32b2 100644 --- a/src/components/Axis/LinearAxis.tsx +++ b/src/components/Axis/LinearAxis.tsx @@ -18,9 +18,14 @@ function LinearAxis(props: LinearAxisProps) { const direction = position === 'left' || position === 'right' ? 'vertical' : 'horizontal'; - const primaryTicks = useLinearPrimaryTicks(scale, direction, axisRef, { - tickFormat: tickLabelFormat, - }); + const { ticks: primaryTicks } = useLinearPrimaryTicks( + scale, + direction, + axisRef, + { + tickFormat: tickLabelFormat, + }, + ); const AxisComponent = direction === 'vertical' ? VerticalAxis : HorizontalAxis; diff --git a/src/components/Axis/Ticks.tsx b/src/components/Axis/Ticks.tsx index 439ccd9f..625b80a2 100644 --- a/src/components/Axis/Ticks.tsx +++ b/src/components/Axis/Ticks.tsx @@ -1,8 +1,8 @@ -import { - type CSSProperties, - type ReactElement, - type ReactNode, - type SVGAttributes, +import type { + CSSProperties, + ReactElement, + ReactNode, + SVGAttributes, } from 'react'; import type { Scales, TicksType } from './types.js'; diff --git a/src/components/Axis/TimeAxis.tsx b/src/components/Axis/TimeAxis.tsx index f5f997b6..78d87aac 100644 --- a/src/components/Axis/TimeAxis.tsx +++ b/src/components/Axis/TimeAxis.tsx @@ -18,7 +18,7 @@ function TimeAxis(props: TimeAxisProps) { const direction = position === 'left' || position === 'right' ? 'vertical' : 'horizontal'; - const primaryTicks = useTimeTicks(scale, direction, axisRef, { + const { ticks: primaryTicks } = useTimeTicks(scale, direction, axisRef, { tickFormat: tickLabelFormat, }); diff --git a/src/components/Axis/VerticalAxisGridLines.tsx b/src/components/Axis/VerticalAxisGridLines.tsx index 98110034..6c352335 100644 --- a/src/components/Axis/VerticalAxisGridLines.tsx +++ b/src/components/Axis/VerticalAxisGridLines.tsx @@ -1,4 +1,5 @@ -import { type CSSProperties, type ReactElement, useMemo } from 'react'; +import type { CSSProperties, ReactElement } from 'react'; +import { useMemo } from 'react'; import type { Position } from '../../types.js'; diff --git a/src/components/Axis/VerticalAxisLabel.tsx b/src/components/Axis/VerticalAxisLabel.tsx index a14bbae2..6cbd8318 100644 --- a/src/components/Axis/VerticalAxisLabel.tsx +++ b/src/components/Axis/VerticalAxisLabel.tsx @@ -1,5 +1,6 @@ import type { CSSProperties, ReactNode } from 'react'; -import { type Align, AlignGroup } from 'react-d3-utils'; +import type { Align } from 'react-d3-utils'; +import { AlignGroup } from 'react-d3-utils'; import VerticalText from '../VerticalText.js'; diff --git a/src/components/Axis/types.ts b/src/components/Axis/types.ts index 848a3f8f..35fc45fe 100644 --- a/src/components/Axis/types.ts +++ b/src/components/Axis/types.ts @@ -1,10 +1,6 @@ import type { ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3-scale'; import type { CSSProperties, ReactNode, Ref } from 'react'; -import type { - PrimaryLinearTicks, - PrimaryLogTicks, - TimeTicks, -} from 'react-d3-utils'; +import type { Tick } from 'react-d3-utils'; import type { Position, TickLabelFormat, TickPosition } from '../../types.js'; @@ -44,4 +40,4 @@ export interface AxisChildProps extends AxisCommonProps { tickLabelFormat?: TickLabelFormat; } -export type TicksType = PrimaryLinearTicks | PrimaryLogTicks | TimeTicks; +export type TicksType = Tick | Tick; diff --git a/src/components/ErrorBars.tsx b/src/components/ErrorBars.tsx index a5b9029e..43951961 100644 --- a/src/components/ErrorBars.tsx +++ b/src/components/ErrorBars.tsx @@ -1,4 +1,5 @@ -import { type SVGAttributes, useMemo } from 'react'; +import type { SVGAttributes } from 'react'; +import { useMemo } from 'react'; import { usePlotContext } from '../contexts/plotContext.js'; import type { SeriesPointWithError } from '../types.js'; diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx index 8a05828d..d2631a5a 100644 --- a/src/components/Heading.tsx +++ b/src/components/Heading.tsx @@ -1,4 +1,5 @@ -import { type CSSProperties, useEffect } from 'react'; +import type { CSSProperties } from 'react'; +import { useEffect } from 'react'; import { AlignGroup, useBBoxObserver } from 'react-d3-utils'; import { diff --git a/src/components/Legend.tsx b/src/components/Legend.tsx index 0dca0fc3..4262271f 100644 --- a/src/components/Legend.tsx +++ b/src/components/Legend.tsx @@ -1,6 +1,8 @@ /* eslint-disable react/no-array-index-key */ -import { type CSSProperties, useContext, useEffect, useMemo } from 'react'; -import { AlignGroup, type AlignGroupProps } from 'react-d3-utils'; +import type { CSSProperties } from 'react'; +import { useContext, useEffect, useMemo } from 'react'; +import type { AlignGroupProps } from 'react-d3-utils'; +import { AlignGroup } from 'react-d3-utils'; import { useLegend } from '../contexts/legendContext.js'; import { legendOffsetContext } from '../contexts/legendOffsetContext.js'; diff --git a/src/components/Plot.tsx b/src/components/Plot.tsx index 07c2e6d0..bf868ac8 100644 --- a/src/components/Plot.tsx +++ b/src/components/Plot.tsx @@ -1,24 +1,20 @@ import { scaleOrdinal } from 'd3-scale'; import { schemeSet1 } from 'd3-scale-chromatic'; import { produce } from 'immer'; -import { - type CSSProperties, - type ReactNode, - type Reducer, - useEffect, - useMemo, - useReducer, -} from 'react'; +import type { CSSProperties, ReactNode, Reducer } from 'react'; +import { useEffect, useMemo, useReducer } from 'react'; import { useBBoxObserver } from 'react-d3-utils'; import { LegendProvider } from '../contexts/legendContext.provider.js'; +import type { + PlotContext, + PlotReducerActions, + PlotState, +} from '../contexts/plotContext.js'; import { - type PlotContext, plotContext, plotDispatchContext, plotReducer, - type PlotReducerActions, - type PlotState, useAxisContext, } from '../contexts/plotContext.js'; import { diff --git a/src/components/PlotObject.tsx b/src/components/PlotObject.tsx index e9e3c93c..008be5b3 100644 --- a/src/components/PlotObject.tsx +++ b/src/components/PlotObject.tsx @@ -3,27 +3,29 @@ import type { CSSProperties, ReactNode } from 'react'; import type { Margins } from '../types.js'; -import { - Annotation, - type AnnotationArrowProps, - type AnnotationCircleProps, - type AnnotationEllipseProps, - type AnnotationGroupProps, - type AnnotationLineProps, - type AnnotationRectangleProps, - Annotations, - type AnnotationShapeProps, - type AnnotationTextProps, +import type { + AnnotationArrowProps, + AnnotationCircleProps, + AnnotationEllipseProps, + AnnotationGroupProps, + AnnotationLineProps, + AnnotationRectangleProps, + AnnotationShapeProps, + AnnotationTextProps, } from './Annotations/index.js'; -import { Axis, type AxisProps } from './Axis/Axis.js'; -import { ParallelAxis, type ParallelAxisProps } from './Axis/ParallelAxis.js'; -import { Legend, type LegendProps } from './Legend.js'; -import { Plot, type PlotProps } from './Plot.js'; -import { LineSeries, type LineSeriesProps } from './Series/LineSeries.js'; -import { - ScatterSeries, - type ScatterSeriesProps, -} from './Series/ScatterSeries.js'; +import { Annotation, Annotations } from './Annotations/index.js'; +import type { AxisProps } from './Axis/Axis.js'; +import { Axis } from './Axis/Axis.js'; +import type { ParallelAxisProps } from './Axis/ParallelAxis.js'; +import { ParallelAxis } from './Axis/ParallelAxis.js'; +import type { LegendProps } from './Legend.js'; +import { Legend } from './Legend.js'; +import type { PlotProps } from './Plot.js'; +import { Plot } from './Plot.js'; +import type { LineSeriesProps } from './Series/LineSeries.js'; +import { LineSeries } from './Series/LineSeries.js'; +import type { ScatterSeriesProps } from './Series/ScatterSeries.js'; +import { ScatterSeries } from './Series/ScatterSeries.js'; export type PlotObjectAnnotations = // This for each annotation option diff --git a/src/components/Series/BarSeries.tsx b/src/components/Series/BarSeries.tsx index 117165dd..3dff4c42 100644 --- a/src/components/Series/BarSeries.tsx +++ b/src/components/Series/BarSeries.tsx @@ -1,4 +1,5 @@ -import { type CSSProperties, useEffect, useMemo } from 'react'; +import type { CSSProperties } from 'react'; +import { useEffect, useMemo } from 'react'; import { useLegend } from '../../contexts/legendContext.js'; import { usePlotContext } from '../../contexts/plotContext.js'; diff --git a/src/components/Series/LineSeries.tsx b/src/components/Series/LineSeries.tsx index 941d18c0..22e86726 100644 --- a/src/components/Series/LineSeries.tsx +++ b/src/components/Series/LineSeries.tsx @@ -1,5 +1,6 @@ import { line } from 'd3-shape'; -import { type CSSProperties, memo, useEffect, useMemo } from 'react'; +import type { CSSProperties } from 'react'; +import { memo, useEffect, useMemo } from 'react'; import { useLegend } from '../../contexts/legendContext.js'; import { usePlotContext } from '../../contexts/plotContext.js'; @@ -7,7 +8,8 @@ import { useIsSeriesVisible, useShift } from '../../hooks.js'; import type { CSSFuncProps, SeriesPoint, Shape } from '../../types.js'; import { functionalStyle, useId, validateAxis } from '../../utils.js'; -import { ScatterSeries, type ScatterSeriesProps } from './ScatterSeries.js'; +import type { ScatterSeriesProps } from './ScatterSeries.js'; +import { ScatterSeries } from './ScatterSeries.js'; export interface LineSeriesProps extends Omit< diff --git a/src/components/Series/RangeSeries.tsx b/src/components/Series/RangeSeries.tsx index be444462..30247fee 100644 --- a/src/components/Series/RangeSeries.tsx +++ b/src/components/Series/RangeSeries.tsx @@ -1,6 +1,7 @@ import { extent } from 'd3-array'; import { area } from 'd3-shape'; -import { type CSSProperties, memo, useEffect, useMemo } from 'react'; +import type { CSSProperties } from 'react'; +import { memo, useEffect, useMemo } from 'react'; import { useLegend } from '../../contexts/legendContext.js'; import { diff --git a/src/components/Series/ScatterSeries.tsx b/src/components/Series/ScatterSeries.tsx index 6d5101dd..bf72bd63 100644 --- a/src/components/Series/ScatterSeries.tsx +++ b/src/components/Series/ScatterSeries.tsx @@ -1,5 +1,6 @@ import { extent } from 'd3-array'; -import { type SVGAttributes, useEffect, useMemo } from 'react'; +import type { SVGAttributes } from 'react'; +import { useEffect, useMemo } from 'react'; import { useLegend } from '../../contexts/legendContext.js'; import { diff --git a/src/components/Series/Series.tsx b/src/components/Series/Series.tsx index 8eb1ea4e..ebea23df 100644 --- a/src/components/Series/Series.tsx +++ b/src/components/Series/Series.tsx @@ -1,4 +1,4 @@ -import { type ReactElement, type ReactNode } from 'react'; +import type { ReactElement, ReactNode } from 'react'; export interface SeriesProps { children: ReactNode; diff --git a/src/components/Tracking.tsx b/src/components/Tracking.tsx index 1c1e60d6..745f4d3e 100644 --- a/src/components/Tracking.tsx +++ b/src/components/Tracking.tsx @@ -5,11 +5,11 @@ import type { PlotAxisContext, PlotSeriesState, } from '../contexts/plotContext.js'; -import { - type EventName, - type PlotEventsPlotActions, +import type { + EventName, + PlotEventsPlotActions, } from '../contexts/plotController/usePlotEvents.js'; -import { type SeriesPoint } from '../types.js'; +import type { SeriesPoint } from '../types.js'; import { closestPoint, toNumber } from '../utils.js'; export interface ClosestInfo { diff --git a/src/contexts/bboxContext.ts b/src/contexts/bboxContext.ts index f5b61550..8ee0a570 100644 --- a/src/contexts/bboxContext.ts +++ b/src/contexts/bboxContext.ts @@ -1,3 +1,4 @@ -import { createContext, type Ref } from 'react'; +import type { Ref } from 'react'; +import { createContext } from 'react'; export const bboxContext = createContext>(null); diff --git a/src/contexts/legendContext.provider.tsx b/src/contexts/legendContext.provider.tsx index 7df7391f..8a0d19ee 100644 --- a/src/contexts/legendContext.provider.tsx +++ b/src/contexts/legendContext.provider.tsx @@ -1,11 +1,9 @@ import { produce } from 'immer'; -import { type ReactNode, type Reducer, useMemo, useReducer } from 'react'; +import type { ReactNode, Reducer } from 'react'; +import { useMemo, useReducer } from 'react'; -import { - type LegendActions, - legendContext, - type LegendState, -} from './legendContext.js'; +import type { LegendActions, LegendState } from './legendContext.js'; +import { legendContext } from './legendContext.js'; const legendReducer: Reducer = produce( (draft: LegendState, action: LegendActions) => { diff --git a/src/contexts/legendContext.ts b/src/contexts/legendContext.ts index 33bfc4dc..004765e0 100644 --- a/src/contexts/legendContext.ts +++ b/src/contexts/legendContext.ts @@ -1,4 +1,5 @@ -import { createContext, type Dispatch, useContext } from 'react'; +import type { Dispatch } from 'react'; +import { createContext, useContext } from 'react'; import type { ActionType, Shape } from '../types.js'; diff --git a/src/contexts/plotContext.ts b/src/contexts/plotContext.ts index 6ee42fee..b99240df 100644 --- a/src/contexts/plotContext.ts +++ b/src/contexts/plotContext.ts @@ -1,16 +1,14 @@ import { max, min } from 'd3-array'; -import { - type ScaleContinuousNumeric, - type ScaleLinear, - scaleLinear, - scaleLog, - type ScaleLogarithmic, - type ScaleOrdinal, - scaleOrdinal, - type ScaleTime, - scaleTime, +import type { + ScaleContinuousNumeric, + ScaleLinear, + ScaleLogarithmic, + ScaleOrdinal, + ScaleTime, } from 'd3-scale'; -import { createContext, type Dispatch, useContext, useMemo } from 'react'; +import { scaleLinear, scaleLog, scaleOrdinal, scaleTime } from 'd3-scale'; +import type { Dispatch } from 'react'; +import { createContext, useContext, useMemo } from 'react'; import type { AxisScale } from '../components/Axis/Axis.js'; import type { LegendPosition } from '../components/Legend.js'; diff --git a/src/contexts/plotController/nestableContext.tsx b/src/contexts/plotController/nestableContext.tsx index 7a3d7c8d..7688a52d 100644 --- a/src/contexts/plotController/nestableContext.tsx +++ b/src/contexts/plotController/nestableContext.tsx @@ -1,4 +1,5 @@ -import { createContext, type ReactNode, useContext, useMemo } from 'react'; +import type { ReactNode } from 'react'; +import { createContext, useContext, useMemo } from 'react'; export function createNestableContext(defaultValue: T) { const context = createContext>(new Map()); diff --git a/src/contexts/plotController/plotControllerContext.ts b/src/contexts/plotController/plotControllerContext.ts index 5efd58b9..e81b4639 100644 --- a/src/contexts/plotController/plotControllerContext.ts +++ b/src/contexts/plotController/plotControllerContext.ts @@ -8,11 +8,8 @@ import type { PlotEventsPlotActions, PlotEventsUserActions, } from './usePlotEvents.js'; -import { - initialPlotOverridesState, - type PlotControls, - type PlotOverridesState, -} from './usePlotOverrides.js'; +import type { PlotControls, PlotOverridesState } from './usePlotOverrides.js'; +import { initialPlotOverridesState } from './usePlotOverrides.js'; export const plotOverridesContext = createNestableContext( initialPlotOverridesState, diff --git a/src/contexts/plotController/usePlotEvents.ts b/src/contexts/plotController/usePlotEvents.ts index 96088a5c..9393972b 100644 --- a/src/contexts/plotController/usePlotEvents.ts +++ b/src/contexts/plotController/usePlotEvents.ts @@ -1,4 +1,5 @@ -import { type RefObject, useMemo, useRef } from 'react'; +import type { RefObject } from 'react'; +import { useMemo, useRef } from 'react'; import type { TrackingResult } from '../../components/Tracking.js'; diff --git a/src/hooks/useAxisZoom.tsx b/src/hooks/useAxisZoom.tsx index faeff10c..d3cc1f69 100644 --- a/src/hooks/useAxisZoom.tsx +++ b/src/hooks/useAxisZoom.tsx @@ -1,13 +1,9 @@ import type { CSSProperties } from 'react'; -import { - type AnnotationLineProps, - Line, -} from '../components/Annotations/Line.js'; -import { - type AnnotationRectangleProps, - Rectangle, -} from '../components/Annotations/Rectangle.js'; +import type { AnnotationLineProps } from '../components/Annotations/Line.js'; +import { Line } from '../components/Annotations/Line.js'; +import type { AnnotationRectangleProps } from '../components/Annotations/Rectangle.js'; +import { Rectangle } from '../components/Annotations/Rectangle.js'; import { usePlotControls, usePlotEvents, diff --git a/src/hooks/useCrossHair.tsx b/src/hooks/useCrossHair.tsx index ab111574..3c657534 100644 --- a/src/hooks/useCrossHair.tsx +++ b/src/hooks/useCrossHair.tsx @@ -1,13 +1,10 @@ -import { type CSSProperties, useState } from 'react'; +import type { CSSProperties } from 'react'; +import { useState } from 'react'; -import { - type AnnotationLineProps, - Line, -} from '../components/Annotations/Line.js'; -import { - type AnnotationTextProps, - Text, -} from '../components/Annotations/Text.js'; +import type { AnnotationLineProps } from '../components/Annotations/Line.js'; +import { Line } from '../components/Annotations/Line.js'; +import type { AnnotationTextProps } from '../components/Annotations/Text.js'; +import { Text } from '../components/Annotations/Text.js'; import { usePlotEvents } from '../contexts/plotController/plotControllerContext.js'; import type { ControllerHookOptions, DualAxisOptions } from './types.js'; diff --git a/src/utils.ts b/src/utils.ts index 98dbfb99..52eb8f1f 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,5 @@ -import { type CSSProperties, useMemo } from 'react'; +import type { CSSProperties } from 'react'; +import { useMemo } from 'react'; import type { Scales } from './components/Axis/types.js'; import type { PlotAxisContext } from './contexts/plotContext.js'; diff --git a/src/utils/splitChildren.tsx b/src/utils/splitChildren.tsx index 2ba97dff..9c641f32 100644 --- a/src/utils/splitChildren.tsx +++ b/src/utils/splitChildren.tsx @@ -1,9 +1,5 @@ -import { - Children, - isValidElement, - type ReactElement, - type ReactNode, -} from 'react'; +import type { ReactElement, ReactNode } from 'react'; +import { Children, isValidElement } from 'react'; import { Annotations } from '../components/Annotations/index.js'; import { Axis } from '../components/Axis/Axis.js'; diff --git a/stories/annotations/arrow.stories.tsx b/stories/annotations/arrow.stories.tsx index 513e867f..8eac1078 100644 --- a/stories/annotations/arrow.stories.tsx +++ b/stories/annotations/arrow.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationArrowProps } from '../../src/index.js'; +import type { AnnotationArrowProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/boxPlot.stories.tsx b/stories/annotations/boxPlot.stories.tsx index 5200f6f4..d4c7c68a 100644 --- a/stories/annotations/boxPlot.stories.tsx +++ b/stories/annotations/boxPlot.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationBoxPlotProps } from '../../src/index.js'; +import type { AnnotationBoxPlotProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/circle.stories.tsx b/stories/annotations/circle.stories.tsx index 1e2759df..aaa311a9 100644 --- a/stories/annotations/circle.stories.tsx +++ b/stories/annotations/circle.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationCircleProps } from '../../src/index.js'; +import type { AnnotationCircleProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/directedEllipse.stories.tsx b/stories/annotations/directedEllipse.stories.tsx index a8022981..a85e4ef8 100644 --- a/stories/annotations/directedEllipse.stories.tsx +++ b/stories/annotations/directedEllipse.stories.tsx @@ -1,9 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Annotation, - type AnnotationDirectedEllipseProps, -} from '../../src/index.js'; +import type { AnnotationDirectedEllipseProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/ellipse.stories.tsx b/stories/annotations/ellipse.stories.tsx index 5ad0e1f4..b0bebe0f 100644 --- a/stories/annotations/ellipse.stories.tsx +++ b/stories/annotations/ellipse.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationEllipseProps } from '../../src/index.js'; +import type { AnnotationEllipseProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/group.stories.tsx b/stories/annotations/group.stories.tsx index ae6f16e5..60f1e02d 100644 --- a/stories/annotations/group.stories.tsx +++ b/stories/annotations/group.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationGroupProps } from '../../src/index.js'; +import type { AnnotationGroupProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/line.stories.tsx b/stories/annotations/line.stories.tsx index 0ad659cb..d9cc39ab 100644 --- a/stories/annotations/line.stories.tsx +++ b/stories/annotations/line.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationLineProps } from '../../src/index.js'; +import type { AnnotationLineProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/polygon.stories.tsx b/stories/annotations/polygon.stories.tsx index 6dc4f27a..16b6780d 100644 --- a/stories/annotations/polygon.stories.tsx +++ b/stories/annotations/polygon.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationPolygonProps } from '../../src/index.js'; +import type { AnnotationPolygonProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/polyline.stories.tsx b/stories/annotations/polyline.stories.tsx index f8edbe5e..60d504a0 100644 --- a/stories/annotations/polyline.stories.tsx +++ b/stories/annotations/polyline.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationPolylineProps } from '../../src/index.js'; +import type { AnnotationPolylineProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/rectangle.stories.tsx b/stories/annotations/rectangle.stories.tsx index 9ec6bd9d..1e21caff 100644 --- a/stories/annotations/rectangle.stories.tsx +++ b/stories/annotations/rectangle.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationRectangleProps } from '../../src/index.js'; +import type { AnnotationRectangleProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/shape.stories.tsx b/stories/annotations/shape.stories.tsx index af736072..437280cc 100644 --- a/stories/annotations/shape.stories.tsx +++ b/stories/annotations/shape.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationShapeProps } from '../../src/index.js'; +import type { AnnotationShapeProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/annotations/text.stories.tsx b/stories/annotations/text.stories.tsx index e7f027f2..b5c0e5d9 100644 --- a/stories/annotations/text.stories.tsx +++ b/stories/annotations/text.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationTextProps } from '../../src/index.js'; +import type { AnnotationTextProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from './annotation.data.js'; diff --git a/stories/control/axis.stories.tsx b/stories/control/axis.stories.tsx index d1ec848f..21735021 100644 --- a/stories/control/axis.stories.tsx +++ b/stories/control/axis.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Axis, type AxisProps, Plot } from '../../src/index.js'; +import type { AxisProps } from '../../src/index.js'; +import { Axis, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils.js'; export default { diff --git a/stories/control/bar.stories.tsx b/stories/control/bar.stories.tsx index 254a68bd..ff2b5fc7 100644 --- a/stories/control/bar.stories.tsx +++ b/stories/control/bar.stories.tsx @@ -1,12 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - BarSeries, - type BarSeriesProps, - Legend, - Plot, -} from '../../src/index.js'; +import type { BarSeriesProps } from '../../src/index.js'; +import { Axis, BarSeries, Legend, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/control/function.stories.tsx b/stories/control/function.stories.tsx index e25970ad..25553ba1 100644 --- a/stories/control/function.stories.tsx +++ b/stories/control/function.stories.tsx @@ -1,10 +1,10 @@ import type { Meta } from '@storybook/react-vite'; +import type { FunctionSeriesProps } from '../../src/index.js'; import { Annotations, Axis, FunctionSeries, - type FunctionSeriesProps, Legend, LineSeries, Plot, diff --git a/stories/control/heading.stories.tsx b/stories/control/heading.stories.tsx index 8bf714b7..6717b16c 100644 --- a/stories/control/heading.stories.tsx +++ b/stories/control/heading.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Axis, Heading, type HeadingProps, Plot } from '../../src/index.js'; +import type { HeadingProps } from '../../src/index.js'; +import { Axis, Heading, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils.js'; enum Position { diff --git a/stories/control/legend.stories.tsx b/stories/control/legend.stories.tsx index 7d2299e8..1f0a2a4a 100644 --- a/stories/control/legend.stories.tsx +++ b/stories/control/legend.stories.tsx @@ -1,12 +1,12 @@ import type { Meta } from '@storybook/react-vite'; import { useState } from 'react'; +import type { LegendProps } from '../../src/index.js'; import { Axis, BarSeries, FunctionSeries, Legend, - type LegendProps, LineSeries, ParallelAxis, Plot, diff --git a/stories/control/line.stories.tsx b/stories/control/line.stories.tsx index 7cf1ec97..0110a2db 100644 --- a/stories/control/line.stories.tsx +++ b/stories/control/line.stories.tsx @@ -1,13 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - Legend, - LineSeries, - type LineSeriesProps, - Plot, - type SeriesPointWithError, -} from '../../src/index.js'; +import type { LineSeriesProps, SeriesPointWithError } from '../../src/index.js'; +import { Axis, Legend, LineSeries, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/control/parallelaxis.stories.tsx b/stories/control/parallelaxis.stories.tsx index b797e802..08c7f342 100644 --- a/stories/control/parallelaxis.stories.tsx +++ b/stories/control/parallelaxis.stories.tsx @@ -1,12 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - LineSeries, - ParallelAxis, - type ParallelAxisProps, - Plot, -} from '../../src/index.js'; +import type { ParallelAxisProps } from '../../src/index.js'; +import { Axis, LineSeries, ParallelAxis, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/control/plot.stories.tsx b/stories/control/plot.stories.tsx index 8d111919..0d9b1cae 100644 --- a/stories/control/plot.stories.tsx +++ b/stories/control/plot.stories.tsx @@ -1,12 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - Legend, - LineSeries, - Plot, - type PlotProps, -} from '../../src/index.js'; +import type { PlotProps } from '../../src/index.js'; +import { Axis, Legend, LineSeries, Plot } from '../../src/index.js'; export default { title: 'API/Plot', diff --git a/stories/control/range.stories.tsx b/stories/control/range.stories.tsx index b5202aac..d7119afb 100644 --- a/stories/control/range.stories.tsx +++ b/stories/control/range.stories.tsx @@ -1,13 +1,12 @@ import type { Meta } from '@storybook/react-vite'; +import type { RangeSeriesPoint, RangeSeriesProps } from '../../src/index.js'; import { Axis, Legend, LineSeries, Plot, RangeSeries, - type RangeSeriesPoint, - type RangeSeriesProps, } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; diff --git a/stories/control/scatter.stories.tsx b/stories/control/scatter.stories.tsx index 4687bd0c..6867354b 100644 --- a/stories/control/scatter.stories.tsx +++ b/stories/control/scatter.stories.tsx @@ -1,14 +1,11 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - Legend, - Plot, - ScatterSeries, - type ScatterSeriesProps, - type SeriesPoint, - type SeriesPointWithError, +import type { + ScatterSeriesProps, + SeriesPoint, + SeriesPointWithError, } from '../../src/index.js'; +import { Axis, Legend, Plot, ScatterSeries } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/control/tracking.stories.tsx b/stories/control/tracking.stories.tsx index b0c6e977..9b82fe80 100644 --- a/stories/control/tracking.stories.tsx +++ b/stories/control/tracking.stories.tsx @@ -5,6 +5,7 @@ import type { ClosestInfoResult, ClosestMethods, } from '../../src/components/Tracking.js'; +import type { SeriesPoint } from '../../src/index.js'; import { Annotation, Annotations, @@ -12,7 +13,6 @@ import { Legend, LineSeries, Plot, - type SeriesPoint, usePlotEvents, } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; diff --git a/stories/examples/absorbance.stories.tsx b/stories/examples/absorbance.stories.tsx index 37db6e19..65e3222d 100644 --- a/stories/examples/absorbance.stories.tsx +++ b/stories/examples/absorbance.stories.tsx @@ -1,13 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - LineSeries, - Plot, - RangeSeries, - type RangeSeriesPoint, - type SeriesPoint, -} from '../../src/index.js'; +import type { RangeSeriesPoint, SeriesPoint } from '../../src/index.js'; +import { Axis, LineSeries, Plot, RangeSeries } from '../../src/index.js'; import data from '../data/absorb.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; diff --git a/stories/examples/bitcoin.stories.tsx b/stories/examples/bitcoin.stories.tsx index 3e5e4df3..f648b09a 100644 --- a/stories/examples/bitcoin.stories.tsx +++ b/stories/examples/bitcoin.stories.tsx @@ -1,12 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - Heading, - LineSeries, - Plot, - type SeriesPoint, -} from '../../src/index.js'; +import type { SeriesPoint } from '../../src/index.js'; +import { Axis, Heading, LineSeries, Plot } from '../../src/index.js'; import data from '../data/bitcoin.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; diff --git a/stories/examples/boxPlot.stories.tsx b/stories/examples/boxPlot.stories.tsx index 56b029d5..33029ff7 100644 --- a/stories/examples/boxPlot.stories.tsx +++ b/stories/examples/boxPlot.stories.tsx @@ -1,12 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Annotation, - type AnnotationBoxPlotProps, - Annotations, - Axis, - Plot, -} from '../../src/index.js'; +import type { AnnotationBoxPlotProps } from '../../src/index.js'; +import { Annotation, Annotations, Axis, Plot } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; export default { diff --git a/stories/examples/color-serie.stories.tsx b/stories/examples/color-serie.stories.tsx index b265fbd1..ab43f8d7 100644 --- a/stories/examples/color-serie.stories.tsx +++ b/stories/examples/color-serie.stories.tsx @@ -1,12 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - Heading, - Plot, - ScatterSeries, - type SeriesPoint, -} from '../../src/index.js'; +import type { SeriesPoint } from '../../src/index.js'; +import { Axis, Heading, Plot, ScatterSeries } from '../../src/index.js'; import data from '../data/color-serie.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; diff --git a/stories/examples/draw.stories.tsx b/stories/examples/draw.stories.tsx index a39fe7cc..8098c6c5 100644 --- a/stories/examples/draw.stories.tsx +++ b/stories/examples/draw.stories.tsx @@ -1,14 +1,16 @@ import type { Meta } from '@storybook/react-vite'; +import type { + UseDrawPathOptions, + UseDrawRectangleOptions, +} from '../../src/index.js'; import { Annotations, Axis, LineSeries, Plot, useDrawPath, - type UseDrawPathOptions, useDrawRectangle, - type UseDrawRectangleOptions, } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; diff --git a/stories/examples/iris-dataset.stories.tsx b/stories/examples/iris-dataset.stories.tsx index 9938982f..532bf4a9 100644 --- a/stories/examples/iris-dataset.stories.tsx +++ b/stories/examples/iris-dataset.stories.tsx @@ -2,15 +2,16 @@ import type { Meta } from '@storybook/react-vite'; import { getClasses, getDistinctClasses, getNumbers } from 'ml-dataset-iris'; import { PCA as MlPCA } from 'ml-pca'; import { SimpleLinearRegression } from 'ml-regression-simple-linear'; -import { type ReactElement, useMemo } from 'react'; +import type { ReactElement } from 'react'; +import { useMemo } from 'react'; +import type { SeriesPoint } from '../../src/index.js'; import { Axis, FunctionSeries, Plot, ScatterSeries, Series, - type SeriesPoint, } from '../../src/index.js'; export default { diff --git a/stories/examples/lassoselection.stories.tsx b/stories/examples/lassoselection.stories.tsx index 6189ad59..ed4b753e 100644 --- a/stories/examples/lassoselection.stories.tsx +++ b/stories/examples/lassoselection.stories.tsx @@ -2,15 +2,14 @@ import type { Meta } from '@storybook/react-vite'; import pointInPolygon from 'point-in-polygon'; import { useState } from 'react'; +import type { SeriesPoint, UseDrawPathOptions } from '../../src/index.js'; import { Annotation, Annotations, Axis, Plot, ScatterSeries, - type SeriesPoint, useDrawPath, - type UseDrawPathOptions, } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; diff --git a/stories/examples/mixed.stories.tsx b/stories/examples/mixed.stories.tsx index fcd03ab8..d0db58f7 100644 --- a/stories/examples/mixed.stories.tsx +++ b/stories/examples/mixed.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, type AnnotationLineProps } from '../../src/index.js'; +import type { AnnotationLineProps } from '../../src/index.js'; +import { Annotation } from '../../src/index.js'; import { AnnotationPlot } from '../annotations/annotation.data.js'; export default { diff --git a/stories/examples/nasdaq.stories.tsx b/stories/examples/nasdaq.stories.tsx index 93665484..57b2373b 100644 --- a/stories/examples/nasdaq.stories.tsx +++ b/stories/examples/nasdaq.stories.tsx @@ -1,13 +1,8 @@ import type { Meta } from '@storybook/react-vite'; import { useEffect, useState } from 'react'; -import { - Axis, - Heading, - LineSeries, - Plot, - type SeriesPoint, -} from '../../src/index.js'; +import type { SeriesPoint } from '../../src/index.js'; +import { Axis, Heading, LineSeries, Plot } from '../../src/index.js'; import srcData from '../data/nasdaq.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; diff --git a/stories/examples/sanplot-big-data.stories.tsx b/stories/examples/sanplot-big-data.stories.tsx index f14667cf..48b189c2 100644 --- a/stories/examples/sanplot-big-data.stories.tsx +++ b/stories/examples/sanplot-big-data.stories.tsx @@ -2,14 +2,8 @@ import type { Meta } from '@storybook/react-vite'; import { xNoiseSanPlot } from 'ml-spectra-processing'; import { useMemo } from 'react'; -import { - Axis, - Heading, - Legend, - LineSeries, - Plot, - type SeriesPoint, -} from '../../src/index.js'; +import type { SeriesPoint } from '../../src/index.js'; +import { Axis, Heading, Legend, LineSeries, Plot } from '../../src/index.js'; import data from '../data/1h-spectrum.json' with { type: 'json' }; export default { diff --git a/stories/examples/shift.stories.tsx b/stories/examples/shift.stories.tsx index a0e1a37b..d3719e48 100644 --- a/stories/examples/shift.stories.tsx +++ b/stories/examples/shift.stories.tsx @@ -1,12 +1,12 @@ import type { Meta } from '@storybook/react-vite'; +import type { ScalarValue } from '../../src/index.js'; import { Annotation, Annotations, Axis, LineSeries, Plot, - type ScalarValue, } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG } from '../utils.js'; diff --git a/stories/examples/spectrum2d.stories.tsx b/stories/examples/spectrum2d.stories.tsx index 17b56a94..21595f76 100644 --- a/stories/examples/spectrum2d.stories.tsx +++ b/stories/examples/spectrum2d.stories.tsx @@ -1,13 +1,13 @@ import type { Meta } from '@storybook/react-vite'; import { useMemo } from 'react'; +import type { UseRectangularZoomOptions } from '../../src/index.js'; import { Annotations, Axis, LineSeries, Plot, useRectangularZoom, - type UseRectangularZoomOptions, } from '../../src/index.js'; import data from '../data/spectrum2d.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; diff --git a/stories/examples/weatherchart.stories.tsx b/stories/examples/weatherchart.stories.tsx index 513b042c..00fe0f48 100644 --- a/stories/examples/weatherchart.stories.tsx +++ b/stories/examples/weatherchart.stories.tsx @@ -1,13 +1,12 @@ import type { Meta } from '@storybook/react-vite'; +import type { RangeSeriesPoint, SeriesPoint } from '../../src/index.js'; import { Axis, BarSeries, LineSeries, Plot, RangeSeries, - type RangeSeriesPoint, - type SeriesPoint, } from '../../src/index.js'; import data from '../data/weather.json' with { type: 'json' }; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; diff --git a/stories/examples/zoom.stories.tsx b/stories/examples/zoom.stories.tsx index 936c317a..bdb11218 100644 --- a/stories/examples/zoom.stories.tsx +++ b/stories/examples/zoom.stories.tsx @@ -1,5 +1,6 @@ import type { Meta } from '@storybook/react-vite'; +import type { UseAxisZoomOptions } from '../../src/index.js'; import { Annotation, Annotations, @@ -8,7 +9,6 @@ import { Plot, ScatterSeries, useAxisZoom, - type UseAxisZoomOptions, useRectangularZoom, } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils.js'; diff --git a/stories/plot-object.stories.tsx b/stories/plot-object.stories.tsx index f41db6a8..80c3768a 100644 --- a/stories/plot-object.stories.tsx +++ b/stories/plot-object.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { Annotation, PlotObject, type PlotObjectPlot } from '../src/index.js'; +import type { PlotObjectPlot } from '../src/index.js'; +import { Annotation, PlotObject } from '../src/index.js'; export default { title: 'Plot/Plot object', diff --git a/stories/plot.stories.tsx b/stories/plot.stories.tsx index d06923c6..16ba0668 100644 --- a/stories/plot.stories.tsx +++ b/stories/plot.stories.tsx @@ -1,14 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Axis, - Heading, - Legend, - type LegendPosition, - LineSeries, - Plot, - type VerticalPosition, -} from '../src/index.js'; +import type { LegendPosition, VerticalPosition } from '../src/index.js'; +import { Axis, Heading, Legend, LineSeries, Plot } from '../src/index.js'; const args = { hiddenTicks: false, diff --git a/stories/spectra/infrared.stories.tsx b/stories/spectra/infrared.stories.tsx index dd19d155..070e77c3 100644 --- a/stories/spectra/infrared.stories.tsx +++ b/stories/spectra/infrared.stories.tsx @@ -1,12 +1,7 @@ import type { Meta } from '@storybook/react-vite'; -import { - Annotations, - Axis, - Plot, - useCrossHair, - type UseCrossHairOptions, -} from '../../src/index.js'; +import type { UseCrossHairOptions } from '../../src/index.js'; +import { Annotations, Axis, Plot, useCrossHair } from '../../src/index.js'; import { DEFAULT_PLOT_CONFIG, getInfraredSeries, diff --git a/stories/spectra/iv.stories.tsx b/stories/spectra/iv.stories.tsx index 54c8838f..9991a2ac 100644 --- a/stories/spectra/iv.stories.tsx +++ b/stories/spectra/iv.stories.tsx @@ -1,8 +1,10 @@ import type { Meta } from '@storybook/react-vite'; import type { MeasurementSelector } from 'base-analysis'; -import { Analysis, fromBreakdown, fromTransfer } from 'iv-analysis'; +import type { Analysis } from 'iv-analysis'; +import { fromBreakdown, fromTransfer } from 'iv-analysis'; import { xyToXYObject } from 'ml-spectra-processing'; -import { type ReactNode, useEffect, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useEffect, useState } from 'react'; import { Annotation, diff --git a/tests/utils.tsx b/tests/utils.tsx index c3f708aa..bcc9dead 100644 --- a/tests/utils.tsx +++ b/tests/utils.tsx @@ -1,4 +1,5 @@ -import { type ReactNode, useState } from 'react'; +import type { ReactNode } from 'react'; +import { useState } from 'react'; import { renderToStaticMarkup } from 'react-dom/server'; import { Annotation, Annotations, Plot, ScatterSeries } from '../src/index.js'; From 31d5f507b8f2577399b25a77c1dba7813a0c9e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Wed, 11 Jun 2025 16:22:42 +0200 Subject: [PATCH 3/6] chore: update readme layout --- README.md | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 5381a04e..e3259616 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,21 @@ -# react-plot - -Library of React components to render SVG 2D plots. - -Check our exhaustive [documentation here](https://react-plot.zakodium.com/). -

- Zakodium logo -

Maintained by Zakodium

+

+ +# react-plot -[![NPM version][npm-image]][npm-url] -[![npm download][download-image]][download-url] +[![NPM version](https://img.shields.io/npm/v/react-plot.svg)](https://www.npmjs.com/package/react-plot) +[![npm download](https://img.shields.io/npm/dm/react-plot.svg)](https://www.npmjs.com/package/react-plot) +[![license](https://img.shields.io/npm/l/react-plot.svg)](https://github.com/zakodium-oss/react-plot/blob/main/LICENSE) - +Library of React components to render SVG 2D plots. + +Check our exhaustive [documentation here](https://react-plot.zakodium.com/). ## [Storybook](https://react-plot.pages.dev/) @@ -111,8 +109,3 @@ function Example() { ## License [MIT](./LICENSE) - -[npm-image]: https://img.shields.io/npm/v/react-plot.svg?style=flat-square -[npm-url]: https://www.npmjs.com/package/react-plot -[download-image]: https://img.shields.io/npm/dm/react-plot.svg?style=flat-square -[download-url]: https://www.npmjs.com/package/react-plot From eb49489fb4f1496c2cbd76dfb3b310c7a71b3d60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Wed, 11 Jun 2025 16:26:34 +0200 Subject: [PATCH 4/6] chore: update tsconfig --- package.json | 1 + src/components/Series/BarSeries.tsx | 1 + src/components/Series/LineSeries.tsx | 1 + src/components/Series/RangeSeries.tsx | 1 + src/components/Series/ScatterSeries.tsx | 1 + .../plotController/plotControllerContext.ts | 1 + tsconfig.json | 16 ++-------------- 7 files changed, 8 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 7f429d89..cc7a4e64 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@types/point-in-polygon": "^1.1.5", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.1", + "@zakodium/tsconfig": "^1.0.1", "eslint": "^9.28.0", "eslint-config-zakodium": "^15.0.1", "eslint-plugin-storybook": "^9.0.8", diff --git a/src/components/Series/BarSeries.tsx b/src/components/Series/BarSeries.tsx index 3dff4c42..c31ae672 100644 --- a/src/components/Series/BarSeries.tsx +++ b/src/components/Series/BarSeries.tsx @@ -77,6 +77,7 @@ export function BarSeries(props: BarSeriesProps) { return () => legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } }); } + return undefined; }, [colorLine, legendDispatch, label, shape, id, hidden]); if (hidden) return null; return ( diff --git a/src/components/Series/LineSeries.tsx b/src/components/Series/LineSeries.tsx index 22e86726..a91e2cf9 100644 --- a/src/components/Series/LineSeries.tsx +++ b/src/components/Series/LineSeries.tsx @@ -71,6 +71,7 @@ function LineSeriesInner( return () => legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } }); } + return undefined; }, [ hidden, colorScaler, diff --git a/src/components/Series/RangeSeries.tsx b/src/components/Series/RangeSeries.tsx index 30247fee..45d58fd4 100644 --- a/src/components/Series/RangeSeries.tsx +++ b/src/components/Series/RangeSeries.tsx @@ -88,6 +88,7 @@ function RangeSeriesInner( payload: { id }, }); } + return undefined; }, [label, legendDispatch, lineStyle.fill, lineStyle.stroke, id, hidden]); if (hidden) return null; diff --git a/src/components/Series/ScatterSeries.tsx b/src/components/Series/ScatterSeries.tsx index bf72bd63..b0871d59 100644 --- a/src/components/Series/ScatterSeries.tsx +++ b/src/components/Series/ScatterSeries.tsx @@ -99,6 +99,7 @@ export function ScatterSeries( return () => legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } }); } + return undefined; }, [ colorScaler, hidden, diff --git a/src/contexts/plotController/plotControllerContext.ts b/src/contexts/plotController/plotControllerContext.ts index e81b4639..08ba37bf 100644 --- a/src/contexts/plotController/plotControllerContext.ts +++ b/src/contexts/plotController/plotControllerContext.ts @@ -67,6 +67,7 @@ export function usePlotEvents( userContext.registerHandlers(ref); return () => userContext.unregisterHandlers(ref); } + return undefined; }, [disabled, userContext]); } diff --git a/tsconfig.json b/tsconfig.json index bff0703d..e80c7e6f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,21 +1,9 @@ { + "extends": "@zakodium/tsconfig/jsx", "compilerOptions": { - "lib": ["DOM", "ES2022"], "types": ["node"], - "target": "ES2022", "outDir": "lib", - "jsx": "react-jsx", - "module": "NodeNext", - "strict": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "forceConsistentCasingInFileNames": true, - "allowJs": false, - "isolatedModules": true, - "verbatimModuleSyntax": true, - "sourceMap": true, - "declaration": true, - "declarationMap": true + "noUncheckedIndexedAccess": false }, "include": [ "playwright/index.tsx", From 0e9c6508fa87b4e2bc7e6bf1ec0d6eabdfef7543 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Wed, 11 Jun 2025 16:34:31 +0200 Subject: [PATCH 5/6] feat: add support for React 19 --- package.json | 8 ++++---- src/components/Plot.tsx | 2 +- src/utils/splitChildren.tsx | 34 +++++++++++++++++++--------------- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index cc7a4e64..7c0574b1 100644 --- a/package.json +++ b/package.json @@ -63,8 +63,8 @@ "@types/d3-shape": "^3.1.7", "@types/node": "^22.7.5", "@types/point-in-polygon": "^1.1.5", - "@types/react": "^18.3.11", - "@types/react-dom": "^18.3.1", + "@types/react": "^19.1.8", + "@types/react-dom": "^19.1.6", "@zakodium/tsconfig": "^1.0.1", "eslint": "^9.28.0", "eslint-config-zakodium": "^15.0.1", @@ -79,8 +79,8 @@ "ms-spectrum": "^3.9.0", "point-in-polygon": "^1.1.0", "prettier": "^3.5.3", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "react": "^19.1.0", + "react-dom": "^19.1.0", "react-error-boundary": "^6.0.0", "rimraf": "^6.0.1", "storybook": "^9.0.8", diff --git a/src/components/Plot.tsx b/src/components/Plot.tsx index bf868ac8..e61f40f2 100644 --- a/src/components/Plot.tsx +++ b/src/components/Plot.tsx @@ -118,7 +118,7 @@ export function Plot(props: PlotProps) { } = props; const plotId = useId(undefined, 'plot'); - const [state, dispatch] = useReducer(reducerCurr, initialState, undefined); + const [state, dispatch] = useReducer(reducerCurr, initialState); const { series, diff --git a/src/utils/splitChildren.tsx b/src/utils/splitChildren.tsx index 9c641f32..c3a62120 100644 --- a/src/utils/splitChildren.tsx +++ b/src/utils/splitChildren.tsx @@ -2,10 +2,14 @@ import type { ReactElement, ReactNode } from 'react'; import { Children, isValidElement } from 'react'; import { Annotations } from '../components/Annotations/index.js'; +import type { AxisProps } from '../components/Axis/Axis.js'; import { Axis } from '../components/Axis/Axis.js'; +import type { ParallelAxisProps } from '../components/Axis/ParallelAxis.js'; import { ParallelAxis } from '../components/Axis/ParallelAxis.js'; import { Heading } from '../components/Heading.js'; +import type { HeadingProps } from '../components/Heading.js'; import { Legend } from '../components/Legend.js'; +import type { LegendProps } from '../components/Legend.js'; import { BarSeries } from '../components/Series/BarSeries.js'; import { FunctionSeries } from '../components/Series/FunctionSeries.js'; import { LineSeries } from '../components/Series/LineSeries.js'; @@ -28,16 +32,16 @@ export interface PlotChildren { * Validates that all the children inside Plot are supported and organizes them by kind. */ export function splitChildren(children: ReactNode): PlotChildren { - let topAxis: ReactElement | null = null; - let rightAxis: ReactElement | null = null; - let bottomAxis: ReactElement | null = null; - let leftAxis: ReactElement | null = null; + let topAxis: ReactElement | null = null; + let rightAxis: ReactElement | null = null; + let bottomAxis: ReactElement | null = null; + let leftAxis: ReactElement | null = null; - const parallelAxes: ReactElement[] = []; + const parallelAxes: Array> = []; - let heading: ReactElement | null = null; + let heading: ReactElement | null = null; - let legend: ReactElement | null = null; + let legend: ReactElement | null = null; const series: ReactElement[] = []; @@ -60,33 +64,33 @@ export function splitChildren(children: ReactNode): PlotChildren { } else if (child.type === Annotations) { annotations.push(child); } else if (child.type === Axis) { - switch (child.props.position) { + switch ((child.props as AxisProps).position) { case 'top': { if (topAxis !== null) { throw new Error('Plot can only have one top axis'); } - topAxis = child; + topAxis = child as ReactElement; break; } case 'right': { if (rightAxis !== null) { throw new Error('Plot can only have one right axis'); } - rightAxis = child; + rightAxis = child as ReactElement; break; } case 'bottom': { if (bottomAxis !== null) { throw new Error('Plot can only have one bottom axis'); } - bottomAxis = child; + bottomAxis = child as ReactElement; break; } case 'left': { if (leftAxis !== null) { throw new Error('Plot can only have one left axis'); } - leftAxis = child; + leftAxis = child as ReactElement; break; } default: @@ -96,17 +100,17 @@ export function splitChildren(children: ReactNode): PlotChildren { if (parallelAxes.length === 2) { throw new Error('Plot can have at most two parallel axes'); } - parallelAxes.push(child); + parallelAxes.push(child as ReactElement); } else if (child.type === Heading) { if (heading !== null) { throw new Error('Plot can only have one Heading element'); } - heading = child; + heading = child as ReactElement; } else if (child.type === Legend) { if (legend !== null) { throw new Error('Plot can only have one Legend element'); } - legend = child; + legend = child as ReactElement; } else { // eslint-disable-next-line no-console console.error('Invalid Plot child:', child); From bd6d1f05dd3cc89864e60ce40a80abe36caa40e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= Date: Wed, 11 Jun 2025 16:44:12 +0200 Subject: [PATCH 6/6] chore: update react-d3-utils --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7c0574b1..e9f7d57a 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "d3-shape": "^3.2.0", "immer": "^10.1.1", "ml-distance-euclidean": "^2.0.0", - "react-d3-utils": "^3.0.0" + "react-d3-utils": "^3.1.0" }, "volta": { "node": "22.16.0"