Skip to content

Upgrade stories to CSF Next format #2014

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 28, 2026
Merged

Upgrade stories to CSF Next format #2014

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
17 changes: 11 additions & 6 deletions apps/storybook/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type StorybookConfig } from '@storybook/react-vite';
import { defineMain } from '@storybook/react-vite/node';
import remarkGfm from 'remark-gfm';

const config: StorybookConfig = {
export default defineMain({
framework: '@storybook/react-vite',
stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
addons: [
Expand All @@ -14,7 +14,12 @@ const config: StorybookConfig = {
},
'@storybook/addon-links',
],
core: { disableTelemetry: true },
};

export default config;
core: {
// Use Vite config from `@h5web/lib` instead of Storybook's default to fix CSS modules
builder: {
name: '@storybook/builder-vite',
options: { viteConfigPath: '../../packages/lib/vite.config.js' },
Comment thread
loichuder marked this conversation as resolved.
},
disableTelemetry: true,
},
});
11 changes: 6 additions & 5 deletions apps/storybook/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import '../src/styles.css';

import { type Preview } from '@storybook/react-vite';
import addonDocs from '@storybook/addon-docs';
import addonLinks from '@storybook/addon-links';
import { definePreview } from '@storybook/react-vite';

const preview: Preview = {
export default definePreview({
tags: ['autodocs'],
addons: [addonDocs(), addonLinks()],
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
options: {
Expand Down Expand Up @@ -38,6 +41,4 @@ const preview: Preview = {
},
},
},
};

export default preview;
});
42 changes: 15 additions & 27 deletions apps/storybook/src/Annotation.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 { useRafState } from '@react-hookz/web';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { type ReactNode } from 'react';

import preview from '../.storybook/preview';
import FillHeight from './decorators/FillHeight';
import { formatCoord } from './utils';

const meta = {
const meta = preview.meta({
title: 'Building Blocks/Annotation',
component: Annotation,
parameters: {
Expand All @@ -31,17 +31,9 @@ const meta = {
),
FillHeight,
],
args: {
overflowCanvas: false,
scaleOnZoom: false,
center: false,
},
} satisfies Meta<typeof Annotation>;

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

export const Default = {
export const Default = meta.story({
render: (args) => {
const { x, y, overflowCanvas, scaleOnZoom, center, style } = args;

Expand Down Expand Up @@ -89,46 +81,42 @@ export const Default = {
x: 10,
y: 16,
},
} satisfies Story;
});

export const OverflowCanvas = {
...Default,
export const OverflowCanvas = Default.extend({
args: {
x: 6,
y: 16,
overflowCanvas: true,
},
} satisfies Story;
});

export const Centered = {
...Default,
export const Centered = Default.extend({
args: {
x: 5,
y: 14,
center: true,
},
} satisfies Story;
});

export const ScaleOnZoom = {
...Default,
export const ScaleOnZoom = Default.extend({
args: {
x: 10,
y: 16,
scaleOnZoom: true,
},
} satisfies Story;
});

export const ScaleOnZoomCentered = {
...Default,
export const ScaleOnZoomCentered = Default.extend({
args: {
x: 10,
y: 16,
scaleOnZoom: true,
center: true,
},
} satisfies Story;
});

export const FollowPointer = {
export const FollowPointer = meta.story({
render: (args) => (
<PointerTracker>
{(x, y) => (
Expand All @@ -149,7 +137,7 @@ export const FollowPointer = {
x: { control: false },
y: { control: false },
},
} satisfies Story;
});

interface PointerTrackerProps {
children: (x: number, y: number) => ReactNode;
Expand Down
63 changes: 26 additions & 37 deletions apps/storybook/src/AxialSelectToZoom.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,34 @@ import {
VisCanvas,
Zoom,
} from '@h5web/lib';
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 typedTwoD = toTypedNdArray(mockValues.twoD(), Float32Array);

const meta = {
const meta = preview.meta({
title: 'Building Blocks/Interactions/AxialSelectToZoom',
component: AxialSelectToZoom,
decorators: [FillHeight],
parameters: { layout: 'fullscreen' },
args: {
axis: 'x',
modifierKey: [],
disabled: false,
},
argTypes: {
axis: { control: { type: 'inline-radio' } },
axis: {
control: { type: 'inline-radio' },
options: ['x', 'y'],
Copy link
Copy Markdown
Contributor Author

@axelboc axelboc Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I improve things a bit as I go.

},
modifierKey: {
control: { type: 'inline-check' },
options: ['Alt', 'Control', 'Shift'],
},
},
} satisfies Meta<typeof AxialSelectToZoom>;

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

const Default = {
export const XAxis = meta.story({
render: (args) => {
const { modifierKey } = args;
const { modifierKey = [] } = args;
const domain = useDomain(oneD);
assertDefined(domain);

Expand All @@ -53,7 +48,7 @@ const Default = {
abscissaConfig={{ visDomain: [0, oneD.size], showGrid: true }}
ordinateConfig={{ visDomain: domain, showGrid: true }}
>
<Pan modifierKey={modifierKey?.length === 0 ? 'Control' : undefined} />
Copy link
Copy Markdown
Contributor Author

@axelboc axelboc Apr 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug fix for when modifierKey is left undefined.

<Pan modifierKey={modifierKey.length === 0 ? 'Control' : undefined} />
<Zoom />
<AxialSelectToZoom {...args} />
<ResetZoomButton />
Expand All @@ -62,54 +57,45 @@ const Default = {
</VisCanvas>
);
},
} satisfies Story;

export const XAxis = {
...Default,
args: {
axis: 'x',
},
} satisfies Story;
});

export const YAxis = {
...Default,
export const YAxis = XAxis.extend({
args: {
axis: 'y',
},
} satisfies Story;
});

export const ModifierKeyX = {
...Default,
export const ModifierKeyX = XAxis.extend({
args: {
axis: 'x',
modifierKey: ['Alt'],
},
} satisfies Story;
});

export const MultipleModifierKeysY = {
...Default,
export const MultipleModifierKeysY = XAxis.extend({
args: {
axis: 'y',
modifierKey: ['Control', 'Shift'],
},
} satisfies Story;
});

export const MinZoom = {
...Default,
export const MinZoom = XAxis.extend({
args: {
minZoom: 200,
},
} satisfies Story;
});

export const Disabled = {
...Default,
export const Disabled = XAxis.extend({
args: {
axis: 'x',
disabled: true,
},
} satisfies Story;
});

export const DisabledInsideEqualAspectCanvas = {
export const DisabledInsideEqualAspectCanvas = meta.story({
render: (args) => {
const [rows, cols] = typedTwoD.shape;
const domain = useDomain(typedTwoD);
Expand All @@ -135,8 +121,11 @@ export const DisabledInsideEqualAspectCanvas = {
</VisCanvas>
);
},
args: {
axis: 'x',
},
argTypes: {
modifierKey: { control: false },
disabled: { control: false },
},
} satisfies Story;
});
43 changes: 13 additions & 30 deletions apps/storybook/src/AxialSelectionTool.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,16 @@ import {
Zoom,
} from '@h5web/lib';
import { useThrottledState } from '@react-hookz/web';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import preview from '../.storybook/preview';
import FillHeight from './decorators/FillHeight';
import { getTitleForSelection } from './utils';

const meta = {
const meta = preview.meta({
title: 'Building Blocks/Interactions/AxialSelectionTool',
component: AxialSelectionTool,
decorators: [FillHeight],
parameters: { layout: 'fullscreen' },
args: {
axis: 'x',
disabled: false,
modifierKey: undefined,
children: undefined,
},
argTypes: {
axis: {
control: { type: 'inline-radio' },
Expand All @@ -36,12 +30,9 @@ const meta = {
options: ['Alt', 'Control', 'Shift', undefined],
},
},
} satisfies Meta<typeof AxialSelectionTool>;
});

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

const Default = {
export const XAxis = meta.story({
render: (args) => {
const { modifierKey } = args;

Expand Down Expand Up @@ -77,39 +68,31 @@ const Default = {
</VisCanvas>
);
},
} satisfies Story;

export const XAxis = {
...Default,
args: {
axis: 'x',
},
} satisfies Story;
});

export const YAxis = {
...Default,
export const YAxis = XAxis.extend({
args: {
axis: 'y',
},
} satisfies Story;
});

export const Disabled = {
...Default,
export const Disabled = XAxis.extend({
args: {
disabled: true,
},
} satisfies Story;
});

export const WithModifierKey = {
...Default,
export const WithModifierKey = XAxis.extend({
args: {
modifierKey: 'Control',
},
} satisfies Story;
});

export const WithValidation = {
...Default,
export const WithValidation = XAxis.extend({
args: {
validate: ({ html }) => Box.fromPoints(...html).hasMinSize(200),
},
} satisfies Story;
});
Loading
Loading