Skip to content

Commit c6e4e6d

Browse files
axelbocaxelboc
committed
Upgrade stories to CSF Next format
1 parent 491983b commit c6e4e6d

16 files changed

Lines changed: 227 additions & 310 deletions

‎apps/storybook/.storybook/main.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { type StorybookConfig } from '@storybook/react-vite';
1+
import { defineMain } from '@storybook/react-vite/node';
22
import remarkGfm from 'remark-gfm';
33

4-
const config: StorybookConfig = {
4+
export default defineMain({
55
framework: '@storybook/react-vite',
66
stories: ['../src/**/*.mdx', '../src/**/*.stories.tsx'],
77
addons: [
@@ -14,7 +14,12 @@ const config: StorybookConfig = {
1414
},
1515
'@storybook/addon-links',
1616
],
17-
core: { disableTelemetry: true },
18-
};
19-
20-
export default config;
17+
core: {
18+
// Use Vite config from `@h5web/lib` instead of Storybook's default to fix CSS modules
19+
builder: {
20+
name: '@storybook/builder-vite',
21+
options: { viteConfigPath: '../../packages/lib/vite.config.js' },
22+
},
23+
disableTelemetry: true,
24+
},
25+
});

‎apps/storybook/.storybook/preview.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import '../src/styles.css';
22

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

5-
const preview: Preview = {
7+
export default definePreview({
68
tags: ['autodocs'],
9+
addons: [addonDocs(), addonLinks()],
710
parameters: {
811
actions: { argTypesRegex: '^on[A-Z].*' },
912
options: {
@@ -38,6 +41,4 @@ const preview: Preview = {
3841
},
3942
},
4043
},
41-
};
42-
43-
export default preview;
44+
});

‎apps/storybook/src/Annotation.stories.tsx‎

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import {
66
VisCanvas,
77
} from '@h5web/lib';
88
import { useRafState } from '@react-hookz/web';
9-
import { type Meta, type StoryObj } from '@storybook/react-vite';
109
import { type ReactNode } from 'react';
1110

11+
import preview from '../.storybook/preview';
1212
import FillHeight from './decorators/FillHeight';
1313
import { formatCoord } from './utils';
1414

15-
const meta = {
15+
const meta = preview.meta({
1616
title: 'Building Blocks/Annotation',
1717
component: Annotation,
1818
parameters: {
@@ -31,17 +31,9 @@ const meta = {
3131
),
3232
FillHeight,
3333
],
34-
args: {
35-
overflowCanvas: false,
36-
scaleOnZoom: false,
37-
center: false,
38-
},
39-
} satisfies Meta<typeof Annotation>;
40-
41-
export default meta;
42-
type Story = StoryObj<typeof meta>;
34+
});
4335

44-
export const Default = {
36+
export const Default = meta.story({
4537
render: (args) => {
4638
const { x, y, overflowCanvas, scaleOnZoom, center, style } = args;
4739

@@ -89,46 +81,42 @@ export const Default = {
8981
x: 10,
9082
y: 16,
9183
},
92-
} satisfies Story;
84+
});
9385

94-
export const OverflowCanvas = {
95-
...Default,
86+
export const OverflowCanvas = Default.extend({
9687
args: {
9788
x: 6,
9889
y: 16,
9990
overflowCanvas: true,
10091
},
101-
} satisfies Story;
92+
});
10293

103-
export const Centered = {
104-
...Default,
94+
export const Centered = Default.extend({
10595
args: {
10696
x: 5,
10797
y: 14,
10898
center: true,
10999
},
110-
} satisfies Story;
100+
});
111101

112-
export const ScaleOnZoom = {
113-
...Default,
102+
export const ScaleOnZoom = Default.extend({
114103
args: {
115104
x: 10,
116105
y: 16,
117106
scaleOnZoom: true,
118107
},
119-
} satisfies Story;
108+
});
120109

121-
export const ScaleOnZoomCentered = {
122-
...Default,
110+
export const ScaleOnZoomCentered = Default.extend({
123111
args: {
124112
x: 10,
125113
y: 16,
126114
scaleOnZoom: true,
127115
center: true,
128116
},
129-
} satisfies Story;
117+
});
130118

131-
export const FollowPointer = {
119+
export const FollowPointer = meta.story({
132120
render: (args) => (
133121
<PointerTracker>
134122
{(x, y) => (
@@ -149,7 +137,7 @@ export const FollowPointer = {
149137
x: { control: false },
150138
y: { control: false },
151139
},
152-
} satisfies Story;
140+
});
153141

154142
interface PointerTrackerProps {
155143
children: (x: number, y: number) => ReactNode;

‎apps/storybook/src/AxialSelectToZoom.stories.tsx‎

Lines changed: 26 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,34 @@ import {
1212
VisCanvas,
1313
Zoom,
1414
} from '@h5web/lib';
15-
import { type Meta, type StoryObj } from '@storybook/react-vite';
1615
import { range } from 'd3-array';
1716

17+
import preview from '../.storybook/preview';
1818
import FillHeight from './decorators/FillHeight';
1919

2020
const oneD = mockValues.oneD();
2121
const typedTwoD = toTypedNdArray(mockValues.twoD(), Float32Array);
2222

23-
const meta = {
23+
const meta = preview.meta({
2424
title: 'Building Blocks/Interactions/AxialSelectToZoom',
2525
component: AxialSelectToZoom,
2626
decorators: [FillHeight],
2727
parameters: { layout: 'fullscreen' },
28-
args: {
29-
axis: 'x',
30-
modifierKey: [],
31-
disabled: false,
32-
},
3328
argTypes: {
34-
axis: { control: { type: 'inline-radio' } },
29+
axis: {
30+
control: { type: 'inline-radio' },
31+
options: ['x', 'y'],
32+
},
3533
modifierKey: {
3634
control: { type: 'inline-check' },
3735
options: ['Alt', 'Control', 'Shift'],
3836
},
3937
},
40-
} satisfies Meta<typeof AxialSelectToZoom>;
41-
42-
export default meta;
43-
type Story = StoryObj<typeof meta>;
38+
});
4439

45-
const Default = {
40+
export const XAxis = meta.story({
4641
render: (args) => {
47-
const { modifierKey } = args;
42+
const { modifierKey = [] } = args;
4843
const domain = useDomain(oneD);
4944
assertDefined(domain);
5045

@@ -53,7 +48,7 @@ const Default = {
5348
abscissaConfig={{ visDomain: [0, oneD.size], showGrid: true }}
5449
ordinateConfig={{ visDomain: domain, showGrid: true }}
5550
>
56-
<Pan modifierKey={modifierKey?.length === 0 ? 'Control' : undefined} />
51+
<Pan modifierKey={modifierKey.length === 0 ? 'Control' : undefined} />
5752
<Zoom />
5853
<AxialSelectToZoom {...args} />
5954
<ResetZoomButton />
@@ -62,54 +57,45 @@ const Default = {
6257
</VisCanvas>
6358
);
6459
},
65-
} satisfies Story;
66-
67-
export const XAxis = {
68-
...Default,
6960
args: {
7061
axis: 'x',
7162
},
72-
} satisfies Story;
63+
});
7364

74-
export const YAxis = {
75-
...Default,
65+
export const YAxis = XAxis.extend({
7666
args: {
7767
axis: 'y',
7868
},
79-
} satisfies Story;
69+
});
8070

81-
export const ModifierKeyX = {
82-
...Default,
71+
export const ModifierKeyX = XAxis.extend({
8372
args: {
8473
axis: 'x',
8574
modifierKey: ['Alt'],
8675
},
87-
} satisfies Story;
76+
});
8877

89-
export const MultipleModifierKeysY = {
90-
...Default,
78+
export const MultipleModifierKeysY = XAxis.extend({
9179
args: {
9280
axis: 'y',
9381
modifierKey: ['Control', 'Shift'],
9482
},
95-
} satisfies Story;
83+
});
9684

97-
export const MinZoom = {
98-
...Default,
85+
export const MinZoom = XAxis.extend({
9986
args: {
10087
minZoom: 200,
10188
},
102-
} satisfies Story;
89+
});
10390

104-
export const Disabled = {
105-
...Default,
91+
export const Disabled = XAxis.extend({
10692
args: {
10793
axis: 'x',
10894
disabled: true,
10995
},
110-
} satisfies Story;
96+
});
11197

112-
export const DisabledInsideEqualAspectCanvas = {
98+
export const DisabledInsideEqualAspectCanvas = meta.story({
11399
render: (args) => {
114100
const [rows, cols] = typedTwoD.shape;
115101
const domain = useDomain(typedTwoD);
@@ -135,8 +121,11 @@ export const DisabledInsideEqualAspectCanvas = {
135121
</VisCanvas>
136122
);
137123
},
124+
args: {
125+
axis: 'x',
126+
},
138127
argTypes: {
139128
modifierKey: { control: false },
140129
disabled: { control: false },
141130
},
142-
} satisfies Story;
131+
});

‎apps/storybook/src/AxialSelectionTool.stories.tsx‎

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,16 @@ import {
1010
Zoom,
1111
} from '@h5web/lib';
1212
import { useThrottledState } from '@react-hookz/web';
13-
import { type Meta, type StoryObj } from '@storybook/react-vite';
1413

14+
import preview from '../.storybook/preview';
1515
import FillHeight from './decorators/FillHeight';
1616
import { getTitleForSelection } from './utils';
1717

18-
const meta = {
18+
const meta = preview.meta({
1919
title: 'Building Blocks/Interactions/AxialSelectionTool',
2020
component: AxialSelectionTool,
2121
decorators: [FillHeight],
2222
parameters: { layout: 'fullscreen' },
23-
args: {
24-
axis: 'x',
25-
disabled: false,
26-
modifierKey: undefined,
27-
children: undefined,
28-
},
2923
argTypes: {
3024
axis: {
3125
control: { type: 'inline-radio' },
@@ -36,12 +30,9 @@ const meta = {
3630
options: ['Alt', 'Control', 'Shift', undefined],
3731
},
3832
},
39-
} satisfies Meta<typeof AxialSelectionTool>;
33+
});
4034

41-
export default meta;
42-
type Story = StoryObj<typeof meta>;
43-
44-
const Default = {
35+
export const XAxis = meta.story({
4536
render: (args) => {
4637
const { modifierKey } = args;
4738

@@ -77,39 +68,31 @@ const Default = {
7768
</VisCanvas>
7869
);
7970
},
80-
} satisfies Story;
81-
82-
export const XAxis = {
83-
...Default,
8471
args: {
8572
axis: 'x',
8673
},
87-
} satisfies Story;
74+
});
8875

89-
export const YAxis = {
90-
...Default,
76+
export const YAxis = XAxis.extend({
9177
args: {
9278
axis: 'y',
9379
},
94-
} satisfies Story;
80+
});
9581

96-
export const Disabled = {
97-
...Default,
82+
export const Disabled = XAxis.extend({
9883
args: {
9984
disabled: true,
10085
},
101-
} satisfies Story;
86+
});
10287

103-
export const WithModifierKey = {
104-
...Default,
88+
export const WithModifierKey = XAxis.extend({
10589
args: {
10690
modifierKey: 'Control',
10791
},
108-
} satisfies Story;
92+
});
10993

110-
export const WithValidation = {
111-
...Default,
94+
export const WithValidation = XAxis.extend({
11295
args: {
11396
validate: ({ html }) => Box.fromPoints(...html).hasMinSize(200),
11497
},
115-
} satisfies Story;
98+
});

0 commit comments

Comments
 (0)