From 67adbb78f3dad192a2064f7530450267c2b4bfcc Mon Sep 17 00:00:00 2001 From: Axel Bocciarelli Date: Tue, 28 Apr 2026 11:28:15 +0200 Subject: [PATCH] Continue migration to CSF Next format --- apps/storybook/src/Histogram.stories.tsx | 44 ++++++-------- apps/storybook/src/Html.stories.tsx | 21 +++---- apps/storybook/src/Line.stories.tsx | 49 +++++++--------- apps/storybook/src/MatrixVis.stories.tsx | 35 +++++------- apps/storybook/src/Menu.stories.tsx | 14 ++--- apps/storybook/src/Overlay.stories.tsx | 13 ++--- apps/storybook/src/Pan.stories.tsx | 57 ++++++++----------- .../src/PreventDefaultContextMenu.stories.tsx | 28 ++++----- apps/storybook/src/styles.css | 1 + packages/app/src/App.module.css | 1 + 10 files changed, 106 insertions(+), 157 deletions(-) diff --git a/apps/storybook/src/Histogram.stories.tsx b/apps/storybook/src/Histogram.stories.tsx index eba3d6078..40d7af4ce 100644 --- a/apps/storybook/src/Histogram.stories.tsx +++ b/apps/storybook/src/Histogram.stories.tsx @@ -1,9 +1,10 @@ import { Histogram, ScaleType } from '@h5web/lib'; import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils'; -import { type Meta, type StoryObj } from '@storybook/react-vite'; import { useState } from 'react'; -const meta = { +import preview from '../.storybook/preview'; + +const meta = preview.meta({ title: 'Toolbar/Histogram', component: Histogram, argTypes: { @@ -14,12 +15,9 @@ const meta = { onChangeMin: { control: false }, onChangeMax: { control: false }, }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; +}); -export const Default = { +export const Default = meta.story({ render: (args) => { const { value, ...otherArgs } = args; const [min, setMin] = useState(value[0]); @@ -46,46 +44,38 @@ export const Default = { bins: [4, 53.5, 103, 152.5, 202, 251.5, 301, 350.5], scaleType: ScaleType.Linear, }, -} satisfies Story; +}); -export const SmallDataDomain = { - ...Default, +export const SmallDataDomain = Default.extend({ args: { - ...Default.args, dataDomain: [100, 300], }, -} satisfies Story; +}); -export const WithColorMap = { - ...Default, +export const WithColorMap = Default.extend({ args: { - ...Default.args, colorMap: 'Blues', invertColorMap: true, }, -} satisfies Story; +}); -export const TypedValues = { - ...Default, +export const TypedValues = Default.extend({ args: { - ...Default.args, values: new Int32Array([26, 50, 52, 60, 68, 76, 92, 130]), bins: new Float32Array([4, 53.5, 103, 152.5, 202, 251.5, 301, 350.5]), }, -} satisfies Story; +}); -export const HideLeftAxis = { - ...Default, +export const HideLeftAxis = Default.extend({ args: { - ...Default.args, showLeftAxis: false, }, -} satisfies Story; +}); -export const NonInteractive = { +export const NonInteractive = meta.story({ args: { - ...Default.args, + ...Default.composed.args, onChangeMin: undefined, // explicitely set to `undefined`, as Storybook seems to register default event handlers onChangeMax: undefined, // explicitely set to `undefined`, as Storybook seems to register default event handlers }, -} satisfies Story; +}); diff --git a/apps/storybook/src/Html.stories.tsx b/apps/storybook/src/Html.stories.tsx index 7dc4a0800..5d3ca143f 100644 --- a/apps/storybook/src/Html.stories.tsx +++ b/apps/storybook/src/Html.stories.tsx @@ -6,13 +6,13 @@ import { VisCanvas, } from '@h5web/lib'; import { useToggle } from '@react-hookz/web'; -import { type Meta, type StoryObj } from '@storybook/react-vite'; import { type PropsWithChildren, useState } from 'react'; import { createPortal } from 'react-dom'; +import preview from '../.storybook/preview'; import FillHeight from './decorators/FillHeight'; -const meta = { +const meta = preview.meta({ title: 'Building Blocks/Html', component: Html, parameters: { layout: 'fullscreen' }, @@ -28,12 +28,9 @@ const meta = { ), FillHeight, ], -} satisfies Meta; +}); -export default meta; -type Story = StoryObj; - -export const Default = { +export const Default = meta.story({ render: () => ( <> @@ -67,7 +64,7 @@ export const Default = { argTypes: { overflowCanvas: { control: false }, }, -} satisfies Story; +}); function MyHtml({ children }: PropsWithChildren) { const { canvasSize } = useVisCanvasContext(); @@ -127,7 +124,7 @@ function MyDiv() { ); } -export const OverflowCanvas = { +export const OverflowCanvas = meta.story({ render: (args) => { const { overflowCanvas } = args; return ( @@ -167,9 +164,9 @@ export const OverflowCanvas = { args: { overflowCanvas: true, }, -} satisfies Story; +}); -export const Portal = { +export const Portal = meta.story({ render: () => { const { visCanvas } = useVisCanvasContext(); @@ -248,4 +245,4 @@ export const Portal = { argTypes: { overflowCanvas: { control: false }, }, -} satisfies Story; +}); diff --git a/apps/storybook/src/Line.stories.tsx b/apps/storybook/src/Line.stories.tsx index 4e7014ec9..2edebf95b 100644 --- a/apps/storybook/src/Line.stories.tsx +++ b/apps/storybook/src/Line.stories.tsx @@ -7,14 +7,14 @@ import { VisCanvas, } from '@h5web/lib'; import { assertDefined } from '@h5web/shared/guards'; -import { type Meta, type StoryObj } from '@storybook/react-vite'; import { range } from 'd3-array'; +import preview from '../.storybook/preview'; import FillHeight from './decorators/FillHeight'; const oneD = mockValues.oneD(); -const meta = { +const meta = preview.meta({ title: 'Building Blocks/Line', component: Line, decorators: [FillHeight], @@ -22,23 +22,14 @@ const meta = { layout: 'fullscreen', controls: { sort: 'requiredFirst' }, }, - args: { - abscissas: range(oneD.size), - ordinates: oneD.data, - color: 'blue', - visible: true, - }, argTypes: { abscissas: { control: false }, ordinates: { control: false }, color: { control: { type: 'color' } }, }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; +}); -export const Default = { +export const Default = meta.story({ render: (args) => { const { abscissas, ordinates, ignoreValue } = args; @@ -58,40 +49,40 @@ export const Default = { ); }, -} satisfies Story; + args: { + abscissas: range(oneD.size), + ordinates: oneD.data, + color: 'blue', + }, +}); -export const Color = { - ...Default, +export const Color = Default.extend({ args: { color: 'purple', }, -} satisfies Story; +}); -export const Width = { - ...Default, +export const Width = Default.extend({ args: { width: 3, }, -} satisfies Story; +}); -export const ConstantInterpolation = { - ...Default, +export const ConstantInterpolation = Default.extend({ args: { interpolation: Interpolation.Constant, }, -} satisfies Story; +}); -export const ConstantWithWidth = { - ...Default, +export const ConstantWithWidth = Default.extend({ args: { width: 3, interpolation: Interpolation.Constant, }, -} satisfies Story; +}); -export const IgnoreValue = { - ...Default, +export const IgnoreValue = Default.extend({ args: { ignoreValue: (val) => val % 5 === 0, }, -} satisfies Story; +}); diff --git a/apps/storybook/src/MatrixVis.stories.tsx b/apps/storybook/src/MatrixVis.stories.tsx index 24f927f1c..b789382cc 100644 --- a/apps/storybook/src/MatrixVis.stories.tsx +++ b/apps/storybook/src/MatrixVis.stories.tsx @@ -3,9 +3,9 @@ import { createComplexFormatter, toTypedNdArray, } from '@h5web/shared/vis-utils'; -import { type Meta, type StoryObj } from '@storybook/react-vite'; import { format } from 'd3-format'; +import preview from '../.storybook/preview'; import FillHeight from './decorators/FillHeight'; const twoD = mockValues.twoD(); @@ -15,51 +15,44 @@ const cplxTwoD = mockValues.twoD_complex(); const formatNum = format('.3e'); const formatCplx = createComplexFormatter(format('.2e')); -const meta = { +const meta = preview.meta({ title: 'Visualizations/MatrixVis', component: MatrixVis, decorators: [FillHeight], parameters: { layout: 'fullscreen' }, - args: { - cellWidth: 120, - }, -} satisfies Meta; +}); -export default meta; -type Story = StoryObj; - -export const Default = { +export const Default = meta.story({ args: { dims: twoD.shape, cellFormatter: (row, col) => formatNum(twoD.get(row, col)), + cellWidth: 120, }, -} satisfies Story; +}); -export const CellWidth = { +export const CellWidth = Default.extend({ args: { - ...Default.args, cellWidth: 250, }, -} satisfies Story; +}); -export const Complex = { +export const Complex = Default.extend({ args: { dims: cplxTwoD.shape, cellFormatter: (row, col) => formatCplx(cplxTwoD.get(row, col)), cellWidth: 232, }, -} satisfies Story; +}); -export const TypedArray = { +export const TypedArray = Default.extend({ args: { dims: typedTwoD.shape, cellFormatter: (row, col) => formatNum(typedTwoD.get(row, col)), }, -} satisfies Story; +}); -export const ColumnHeaders = { +export const ColumnHeaders = Default.extend({ args: { - ...Default.args, columnHeaders: ['Column 1', 'Column 2'], }, -} satisfies Story; +}); diff --git a/apps/storybook/src/Menu.stories.tsx b/apps/storybook/src/Menu.stories.tsx index c2cb8bf8b..77f4ae43a 100644 --- a/apps/storybook/src/Menu.stories.tsx +++ b/apps/storybook/src/Menu.stories.tsx @@ -1,20 +1,18 @@ import { Checkbox, Menu, MenuSeparator, RadioGroup } from '@h5web/lib'; -import { type Meta, type StoryObj } from '@storybook/react-vite'; import { useState } from 'react'; import { MdIcecream } from 'react-icons/md'; +import preview from '../.storybook/preview'; + type Option = 'Bar' | 'Baz'; const OPTIONS: Option[] = ['Bar', 'Baz']; -const meta = { +const meta = preview.meta({ title: 'Toolbar/Menu', component: Menu, -} satisfies Meta; - -export default meta; -type Story = StoryObj; +}); -export const Default = { +export const Default = meta.story({ render: (args) => { const [option, setOption] = useState