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/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/).
-
-
-
Maintained by Zakodium
+
+
+# react-plot
-[![NPM version][npm-image]][npm-url]
-[![npm download][download-image]][download-url]
+[](https://www.npmjs.com/package/react-plot)
+[](https://www.npmjs.com/package/react-plot)
+[](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
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..e9f7d57a 100644
--- a/package.json
+++ b/package.json
@@ -52,38 +52,39 @@
"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-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",
- "@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",
- "isotopic-distribution": "^3.3.2",
+ "@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",
+ "eslint-plugin-storybook": "^9.0.8",
+ "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",
- "react": "^18.3.1",
- "react-dom": "^18.3.1",
- "react-error-boundary": "^4.0.13",
+ "prettier": "^3.5.3",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "react-error-boundary": "^6.0.0",
"rimraf": "^6.0.1",
- "typescript": "^5.6.3"
+ "storybook": "^9.0.8",
+ "typescript": "^5.8.3"
},
"dependencies": {
"d3-array": "^3.2.4",
@@ -92,9 +93,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.1.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/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/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/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/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 59053bd9..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';
@@ -13,7 +15,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 +123,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/components/Plot.tsx b/src/components/Plot.tsx
index 07c2e6d0..e61f40f2 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 {
@@ -122,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/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..c31ae672 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';
@@ -76,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 941d18c0..a91e2cf9 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<
@@ -69,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 be444462..45d58fd4 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 {
@@ -87,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 6d5101dd..b0871d59 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 {
@@ -98,6 +99,7 @@ export function ScatterSeries(
return () =>
legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } });
}
+ return undefined;
}, [
colorScaler,
hidden,
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..08ba37bf 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,
@@ -70,6 +67,7 @@ export function usePlotEvents(
userContext.registerHandlers(ref);
return () => userContext.unregisterHandlers(ref);
}
+ return undefined;
}, [disabled, userContext]);
}
diff --git a/src/contexts/plotController/usePlotEvents.ts b/src/contexts/plotController/usePlotEvents.ts
index e267bb1c..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';
@@ -16,24 +17,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/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..c3a62120 100644
--- a/src/utils/splitChildren.tsx
+++ b/src/utils/splitChildren.tsx
@@ -1,15 +1,15 @@
-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 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';
@@ -32,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[] = [];
@@ -64,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:
@@ -100,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);
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..8eac1078 100644
--- a/stories/annotations/arrow.stories.tsx
+++ b/stories/annotations/arrow.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 458dd169..d4c7c68a 100644
--- a/stories/annotations/boxPlot.stories.tsx
+++ b/stories/annotations/boxPlot.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 0ec0118e..aaa311a9 100644
--- a/stories/annotations/circle.stories.tsx
+++ b/stories/annotations/circle.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 2a802e7e..a85e4ef8 100644
--- a/stories/annotations/directedEllipse.stories.tsx
+++ b/stories/annotations/directedEllipse.stories.tsx
@@ -1,9 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 00564113..b0bebe0f 100644
--- a/stories/annotations/ellipse.stories.tsx
+++ b/stories/annotations/ellipse.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 c3fbfb7c..60f1e02d 100644
--- a/stories/annotations/group.stories.tsx
+++ b/stories/annotations/group.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 e8e41f38..d9cc39ab 100644
--- a/stories/annotations/line.stories.tsx
+++ b/stories/annotations/line.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 e3b0a734..16b6780d 100644
--- a/stories/annotations/polygon.stories.tsx
+++ b/stories/annotations/polygon.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 0db3aad3..60d504a0 100644
--- a/stories/annotations/polyline.stories.tsx
+++ b/stories/annotations/polyline.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 ec135aee..1e21caff 100644
--- a/stories/annotations/rectangle.stories.tsx
+++ b/stories/annotations/rectangle.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 7780870a..437280cc 100644
--- a/stories/annotations/shape.stories.tsx
+++ b/stories/annotations/shape.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 65bce5db..b5c0e5d9 100644
--- a/stories/annotations/text.stories.tsx
+++ b/stories/annotations/text.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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/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..21735021 100644
--- a/stories/control/axis.stories.tsx
+++ b/stories/control/axis.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 76973cbd..ff2b5fc7 100644
--- a/stories/control/bar.stories.tsx
+++ b/stories/control/bar.stories.tsx
@@ -1,12 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 a748cbb6..25553ba1 100644
--- a/stories/control/function.stories.tsx
+++ b/stories/control/function.stories.tsx
@@ -1,10 +1,10 @@
-import type { Meta } from '@storybook/react';
+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 9efed785..6717b16c 100644
--- a/stories/control/heading.stories.tsx
+++ b/stories/control/heading.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 ee0a7222..1f0a2a4a 100644
--- a/stories/control/legend.stories.tsx
+++ b/stories/control/legend.stories.tsx
@@ -1,12 +1,12 @@
-import type { Meta } from '@storybook/react';
+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 c8013b9d..0110a2db 100644
--- a/stories/control/line.stories.tsx
+++ b/stories/control/line.stories.tsx
@@ -1,13 +1,7 @@
-import type { Meta } from '@storybook/react';
+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/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..08c7f342 100644
--- a/stories/control/parallelaxis.stories.tsx
+++ b/stories/control/parallelaxis.stories.tsx
@@ -1,12 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 3d3bcaf0..0d9b1cae 100644
--- a/stories/control/plot.stories.tsx
+++ b/stories/control/plot.stories.tsx
@@ -1,12 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 a8e86cec..d7119afb 100644
--- a/stories/control/range.stories.tsx
+++ b/stories/control/range.stories.tsx
@@ -1,13 +1,12 @@
-import type { Meta } from '@storybook/react';
+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 299746ab..6867354b 100644
--- a/stories/control/scatter.stories.tsx
+++ b/stories/control/scatter.stories.tsx
@@ -1,14 +1,11 @@
-import type { Meta } from '@storybook/react';
+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/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..9b82fe80 100644
--- a/stories/control/tracking.stories.tsx
+++ b/stories/control/tracking.stories.tsx
@@ -1,10 +1,11 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
import { useState } from 'react';
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 f96e1abe..65e3222d 100644
--- a/stories/examples/absorbance.stories.tsx
+++ b/stories/examples/absorbance.stories.tsx
@@ -1,14 +1,8 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
-import {
- Axis,
- LineSeries,
- Plot,
- RangeSeries,
- type RangeSeriesPoint,
- type SeriesPoint,
-} from '../../src/index.js';
-import data from '../data/absorb.json';
+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';
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..f648b09a 100644
--- a/stories/examples/bitcoin.stories.tsx
+++ b/stories/examples/bitcoin.stories.tsx
@@ -1,13 +1,8 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
-import {
- Axis,
- Heading,
- LineSeries,
- Plot,
- type SeriesPoint,
-} from '../../src/index.js';
-import data from '../data/bitcoin.json';
+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';
export default {
diff --git a/stories/examples/boxPlot.stories.tsx b/stories/examples/boxPlot.stories.tsx
index 65131a02..33029ff7 100644
--- a/stories/examples/boxPlot.stories.tsx
+++ b/stories/examples/boxPlot.stories.tsx
@@ -1,12 +1,7 @@
-import type { Meta } from '@storybook/react';
+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/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..ab43f8d7 100644
--- a/stories/examples/color-serie.stories.tsx
+++ b/stories/examples/color-serie.stories.tsx
@@ -1,13 +1,8 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
-import {
- Axis,
- Heading,
- Plot,
- ScatterSeries,
- type SeriesPoint,
-} from '../../src/index.js';
-import data from '../data/color-serie.json';
+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';
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..8098c6c5 100644
--- a/stories/examples/draw.stories.tsx
+++ b/stories/examples/draw.stories.tsx
@@ -1,14 +1,16 @@
-import type { Meta } from '@storybook/react';
+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 342764c1..532bf4a9 100644
--- a/stories/examples/iris-dataset.stories.tsx
+++ b/stories/examples/iris-dataset.stories.tsx
@@ -1,16 +1,17 @@
-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';
-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 395b319f..ed4b753e 100644
--- a/stories/examples/lassoselection.stories.tsx
+++ b/stories/examples/lassoselection.stories.tsx
@@ -1,16 +1,15 @@
-import type { Meta } from '@storybook/react';
+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/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..d0db58f7 100644
--- a/stories/examples/mixed.stories.tsx
+++ b/stories/examples/mixed.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 4f91f898..57b2373b 100644
--- a/stories/examples/nasdaq.stories.tsx
+++ b/stories/examples/nasdaq.stories.tsx
@@ -1,14 +1,9 @@
-import type { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react-vite';
import { useEffect, useState } from 'react';
-import {
- Axis,
- Heading,
- LineSeries,
- Plot,
- type SeriesPoint,
-} from '../../src/index.js';
-import srcData from '../data/nasdaq.json';
+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';
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..48b189c2 100644
--- a/stories/examples/sanplot-big-data.stories.tsx
+++ b/stories/examples/sanplot-big-data.stories.tsx
@@ -1,16 +1,10 @@
-import type { Meta } from '@storybook/react';
+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 data from '../data/1h-spectrum.json';
+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 {
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..d3719e48 100644
--- a/stories/examples/shift.stories.tsx
+++ b/stories/examples/shift.stories.tsx
@@ -1,12 +1,12 @@
-import type { Meta } from '@storybook/react';
+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 1f85418d..21595f76 100644
--- a/stories/examples/spectrum2d.stories.tsx
+++ b/stories/examples/spectrum2d.stories.tsx
@@ -1,15 +1,15 @@
-import type { Meta } from '@storybook/react';
+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';
+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..00fe0f48 100644
--- a/stories/examples/weatherchart.stories.tsx
+++ b/stories/examples/weatherchart.stories.tsx
@@ -1,15 +1,14 @@
-import type { Meta } from '@storybook/react';
+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';
+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..bdb11218 100644
--- a/stories/examples/zoom.stories.tsx
+++ b/stories/examples/zoom.stories.tsx
@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+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 9c096efa..80c3768a 100644
--- a/stories/plot-object.stories.tsx
+++ b/stories/plot-object.stories.tsx
@@ -1,6 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 208a888f..16ba0668 100644
--- a/stories/plot.stories.tsx
+++ b/stories/plot.stories.tsx
@@ -1,14 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 6364219f..070e77c3 100644
--- a/stories/spectra/infrared.stories.tsx
+++ b/stories/spectra/infrared.stories.tsx
@@ -1,12 +1,7 @@
-import type { Meta } from '@storybook/react';
+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 e37f7716..9991a2ac 100644
--- a/stories/spectra/iv.stories.tsx
+++ b/stories/spectra/iv.stories.tsx
@@ -1,8 +1,10 @@
-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 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/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..bcc9dead 100644
--- a/tests/utils.tsx
+++ b/tests/utils.tsx
@@ -1,8 +1,9 @@
-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';
-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..e80c7e6f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,21 +1,9 @@
{
+ "extends": "@zakodium/tsconfig/jsx",
"compilerOptions": {
- "lib": ["DOM", "ES2022"],
- "types": [],
- "target": "ES2022",
+ "types": ["node"],
"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",