Skip to content

Continue migration to CSF Next format #2015

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
axelboc merged 1 commit into from
Apr 29, 2026
Merged

Continue migration to CSF Next format #2015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 17 additions & 27 deletions apps/storybook/src/Histogram.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand All @@ -14,12 +15,9 @@ const meta = {
onChangeMin: { control: false },
onChangeMax: { control: false },
},
} satisfies Meta<typeof Histogram>;

export default meta;
type Story = StoryObj<typeof meta>;
});

export const Default = {
export const Default = meta.story({
render: (args) => {
const { value, ...otherArgs } = args;
const [min, setMin] = useState(value[0]);
Expand All @@ -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;
});
21 changes: 9 additions & 12 deletions apps/storybook/src/Html.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand All @@ -28,12 +28,9 @@ const meta = {
),
FillHeight,
],
} satisfies Meta<typeof Html>;
});

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {
export const Default = meta.story({
render: () => (
<>
<Html>
Expand Down Expand Up @@ -67,7 +64,7 @@ export const Default = {
argTypes: {
overflowCanvas: { control: false },
},
} satisfies Story;
});

function MyHtml({ children }: PropsWithChildren<object>) {
const { canvasSize } = useVisCanvasContext();
Expand Down Expand Up @@ -127,7 +124,7 @@ function MyDiv() {
);
}

export const OverflowCanvas = {
export const OverflowCanvas = meta.story({
render: (args) => {
const { overflowCanvas } = args;
return (
Expand Down Expand Up @@ -167,9 +164,9 @@ export const OverflowCanvas = {
args: {
overflowCanvas: true,
},
} satisfies Story;
});

export const Portal = {
export const Portal = meta.story({
render: () => {
const { visCanvas } = useVisCanvasContext();

Expand Down Expand Up @@ -248,4 +245,4 @@ export const Portal = {
argTypes: {
overflowCanvas: { control: false },
},
} satisfies Story;
});
49 changes: 20 additions & 29 deletions apps/storybook/src/Line.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,29 @@ 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],
parameters: {
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<typeof Line>;

export default meta;
type Story = StoryObj<typeof meta>;
});

export const Default = {
export const Default = meta.story({
render: (args) => {
const { abscissas, ordinates, ignoreValue } = args;

Expand All @@ -58,40 +49,40 @@ export const Default = {
</VisCanvas>
);
},
} 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;
});
35 changes: 14 additions & 21 deletions apps/storybook/src/MatrixVis.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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<typeof MatrixVis>;
});

export default meta;
type Story = StoryObj<typeof meta>;

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;
});
14 changes: 6 additions & 8 deletions apps/storybook/src/Menu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<typeof Menu>;

export default meta;
type Story = StoryObj<typeof Menu>;
});

export const Default = {
export const Default = meta.story({
render: (args) => {
const [option, setOption] = useState<Option>('Bar');
const [checked, setChecked] = useState(true);
Expand Down Expand Up @@ -47,4 +45,4 @@ export const Default = {
label: 'Icecream',
Icon: MdIcecream,
},
} satisfies Story;
});
13 changes: 5 additions & 8 deletions apps/storybook/src/Overlay.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Overlay, Pan, ResetZoomButton, VisCanvas, Zoom } from '@h5web/lib';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import preview from '../.storybook/preview';
import FillHeight from './decorators/FillHeight';

const meta = {
const meta = preview.meta({
title: 'Building Blocks/Overlay',
component: Overlay,
decorators: [FillHeight],
Expand All @@ -12,12 +12,9 @@ const meta = {
className: { control: false },
style: { control: false },
},
} satisfies Meta<typeof Overlay>;
});

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {
export const Default = meta.story({
render: (args) => {
return (
<VisCanvas
Expand Down Expand Up @@ -50,4 +47,4 @@ export const Default = {
</VisCanvas>
);
},
} satisfies Story;
});
Loading
Loading