Skip to content

Commit a121cc6

Browse files
kasperpeulenkasperpeulen
committed
Use CSF factories
1 parent 76b53d1 commit a121cc6

File tree

50 files changed

+482
-636
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+482
-636
lines changed

‎.storybook/main.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { StorybookConfig } from '@storybook/react-vite'
1+
import { defineMain } from '@storybook/react-vite/node'
22

3-
const config: StorybookConfig = {
3+
export default defineMain({
44
stories: [
55
'../src/docs/Introduction.mdx',
66
'../src/docs/*.mdx',
@@ -19,5 +19,4 @@ const config: StorybookConfig = {
1919
},
2020
staticDirs: ['../public'],
2121
framework: '@storybook/react-vite',
22-
}
23-
export default config
22+
})

‎.storybook/preview.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Preview } from '@storybook/react-vite'
1+
import { definePreview } from '@storybook/react-vite'
22
import { INITIAL_VIEWPORTS } from 'storybook/viewport'
33
import { userEvent } from '@testing-library/user-event'
44
import { mswLoader, initialize } from 'msw-storybook-addon'
@@ -10,6 +10,10 @@ import { BrowserRouter } from 'react-router-dom'
1010
import React from 'react'
1111
import styled, { css, ThemeProvider } from 'styled-components'
1212

13+
import addonVitest from '@storybook/addon-vitest'
14+
import addonA11y from '@storybook/addon-a11y'
15+
import addonDocs from '@storybook/addon-docs'
16+
1317
import { demoModeLoader } from './demo-mode'
1418
import { rootReducer } from '../src/app-state'
1519
import { breakpoints } from '../src/styles/breakpoints'
@@ -206,7 +210,13 @@ const breakpointViewports = Object.keys(breakpoints).reduce(
206210
{} as typeof INITIAL_VIEWPORTS
207211
)
208212

209-
const preview: Preview = {
213+
declare module 'storybook/internal/csf' {
214+
interface StoryContext {
215+
userEvent: ReturnType<typeof userEvent.setup>
216+
}
217+
}
218+
export default definePreview({
219+
addons: [addonVitest(), addonA11y(), addonDocs()],
210220
parameters: {
211221
viewport: {
212222
viewports: {
@@ -252,11 +262,4 @@ const preview: Preview = {
252262
},
253263
decorators: [withRouter, withTheme, withStore],
254264
loaders: [mswLoader, demoModeLoader],
255-
}
256-
257-
declare module 'storybook/internal/csf' {
258-
interface StoryContext {
259-
userEvent: ReturnType<typeof userEvent.setup>
260-
}
261-
}
262-
export default preview
265+
})

‎.storybook/vitest.setup.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎package.json‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,13 @@
6868
"@babel/core": "^7.26.9",
6969
"@chromatic-com/storybook": "4.0.0-next.6",
7070
"@eslint/js": "^9.21.0",
71-
"@storybook/addon-a11y": "^9.0.0",
71+
"@storybook/addon-a11y": "0.0.0-pr-30601-sha-40d66b1f",
7272
"@storybook/addon-coverage": "^1.0.5",
73-
"@storybook/addon-designs": "9.0.0-next.3",
74-
"@storybook/addon-docs": "^9.0.0",
75-
"@storybook/addon-themes": "^9.0.0",
76-
"@storybook/addon-vitest": "^9.0.0",
77-
"@storybook/react-vite": "^9.0.0",
73+
"@storybook/addon-designs": "^10.0.1",
74+
"@storybook/addon-docs": "0.0.0-pr-30601-sha-40d66b1f",
75+
"@storybook/addon-themes": "0.0.0-pr-30601-sha-40d66b1f",
76+
"@storybook/addon-vitest": "0.0.0-pr-30601-sha-40d66b1f",
77+
"@storybook/react-vite": "0.0.0-pr-30601-sha-40d66b1f",
7878
"@storybook/test-runner": "^0.22.0",
7979
"@testing-library/jest-dom": "^6.6.3",
8080
"@testing-library/react": "^16.2.0",
@@ -103,7 +103,7 @@
103103
"eslint-plugin-jsx-a11y": "^6.10.2",
104104
"eslint-plugin-prettier": "^5.2.3",
105105
"eslint-plugin-react": "^7.37.4",
106-
"eslint-plugin-storybook": "^9.0.0",
106+
"eslint-plugin-storybook": "0.0.0-pr-30601-sha-40d66b1f",
107107
"eslint-plugin-unicorn": "^57.0.0",
108108
"globals": "^16.0.0",
109109
"happy-dom": "^17.1.8",
@@ -117,8 +117,8 @@
117117
"prettier": "^3.5.2",
118118
"react-is": "^19.0.0",
119119
"react-test-renderer": "^19.0.0",
120-
"storybook": "^9.0.0",
121-
"storybook-addon-test-codegen": "^1.3.4",
120+
"storybook": "0.0.0-pr-30601-sha-40d66b1f",
121+
"storybook-addon-test-codegen": "^2.0.0",
122122
"typescript-eslint": "^8.25.0",
123123
"vite": "^6.2.0",
124124
"vitest": "^3.0.7",
@@ -129,5 +129,14 @@
129129
"packageManager": "yarn@4.2.1",
130130
"msw": {
131131
"workerDirectory": "public"
132+
},
133+
"imports": {
134+
"#*": [
135+
"./*",
136+
"./*.ts",
137+
"./*.tsx",
138+
"./*.js",
139+
"./*.jsx"
140+
]
132141
}
133142
}

‎src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import type { Meta, StoryObj } from '@storybook/react-vite'
1+
import preview from '#.storybook/preview'
22

33
import { AnimatedIllustration } from './AnimatedIllustration'
44

5-
const meta = {
5+
const meta = preview.meta({
66
title: 'Components/AnimatedIllustration',
77
component: AnimatedIllustration,
88
parameters: {
@@ -17,19 +17,16 @@ const meta = {
1717
</div>
1818
),
1919
],
20-
} satisfies Meta<typeof AnimatedIllustration>
20+
})
2121

22-
export default meta
23-
type Story = StoryObj<typeof meta>
24-
25-
export const NotFound: Story = {
22+
export const NotFound = meta.story({
2623
args: {
2724
animation: 'NotFound',
2825
},
29-
}
26+
})
3027

31-
export const Error: Story = {
28+
export const Error = meta.story({
3229
args: {
3330
animation: 'Error',
3431
},
35-
}
32+
})

‎src/components/Badge/Badge.stories.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import type { Meta, StoryObj } from '@storybook/react-vite'
1+
import preview from '#.storybook/preview'
22

33
import { Badge } from './Badge'
44

5-
const meta = {
5+
const meta = preview.meta({
66
title: 'Components/Badge',
77
component: Badge,
88
parameters: {
@@ -11,13 +11,10 @@ const meta = {
1111
url: 'https://www.figma.com/file/XW4Bcjmj3JOILjKmZjjdQd/Mealdrop?node-id=780%3A2938',
1212
},
1313
},
14-
} satisfies Meta<typeof Badge>
14+
})
1515

16-
export default meta
17-
type Story = StoryObj<typeof meta>
18-
19-
export const Default: Story = {
16+
export const Default = meta.story({
2017
args: {
2118
text: 'Comfort food',
2219
},
23-
}
20+
})

‎src/components/Breadcrumb/Breadcrumb.stories.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1-
import { Meta, StoryObj } from '@storybook/react-vite'
1+
import preview from '#.storybook/preview'
22

33
import { Breadcrumb } from './Breadcrumb'
44

5-
const meta: Meta<typeof Breadcrumb> = {
5+
const meta = preview.meta({
66
title: 'Components/Breadcrumb',
77
component: Breadcrumb,
8-
}
8+
})
99

10-
export default meta
11-
type Story = StoryObj<typeof Breadcrumb>
12-
13-
export const SingleItem: Story = {
10+
export const SingleItem = meta.story({
1411
args: {
1512
items: [{ label: 'categories' }],
1613
},
17-
}
14+
})
1815

19-
export const MultipleItems: Story = {
16+
export const MultipleItems = meta.story({
2017
args: {
2118
items: [
2219
{ label: 'home', path: '/' },
2320
{ label: 'categories', path: '/categories' },
2421
{ label: 'sushi' },
2522
],
2623
},
27-
}
24+
})

‎src/components/Button/Button.stories.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import type { StoryObj, Meta } from '@storybook/react-vite'
1+
import preview from '#.storybook/preview'
22
import { expect } from 'storybook/test'
33

44
import { Button } from './Button'
55

6-
const meta = {
6+
const meta = preview.meta({
77
title: 'Components/Button',
88
component: Button,
99
args: {
@@ -15,37 +15,34 @@ const meta = {
1515
url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1005%3A2974&t=8pzYUq8GyzmMGjJ2-4',
1616
},
1717
},
18-
} satisfies Meta<typeof Button>
19-
export default meta
18+
})
2019

21-
type Story = StoryObj<typeof meta>
20+
export const Default = meta.story()
2221

23-
export const Default: Story = {}
24-
25-
export const Disabled: Story = {
22+
export const Disabled = meta.story({
2623
args: {
2724
disabled: true,
2825
},
2926
play: async ({ canvas }) => {
3027
const button = await canvas.findByRole('button')
3128
await expect(button).toBeDisabled()
3229
},
33-
}
30+
})
3431

35-
export const Clear: Story = {
32+
export const Clear = meta.story({
3633
args: {
3734
clear: true,
3835
},
39-
}
36+
})
4037

41-
export const Icon: Story = {
38+
export const Icon = meta.story({
4239
args: {
4340
icon: 'cart',
4441
'aria-label': 'cart',
4542
},
46-
}
43+
})
4744

48-
export const IconAndText: Story = {
45+
export const IconAndText = meta.story({
4946
args: {
5047
icon: 'cart',
5148
children: (
@@ -55,4 +52,4 @@ export const IconAndText: Story = {
5552
</div>
5653
),
5754
},
58-
}
55+
})

‎src/components/Button/Button.test.tsx‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import { vi, expect, test } from 'vitest'
22
import { axe } from 'vitest-axe'
3-
import { screen } from '@testing-library/react'
4-
import { composeStories } from '@storybook/react-vite'
3+
import { render, screen } from '@testing-library/react'
54

6-
import * as stories from './Button.stories'
5+
import { Default, Disabled } from './Button.stories'
76

8-
const { Default, Disabled } = composeStories(stories)
97
test('renders button with custom children', async () => {
108
await Default.run()
119
expect(screen.getByText(/Button/i)).toBeInTheDocument()
@@ -15,30 +13,30 @@ test('renders button with custom children', async () => {
1513

1614
test('onclick handler is called', async () => {
1715
const onClickSpy = vi.fn()
18-
await Default.run({ args: { ...Default.args, onClick: onClickSpy } })
16+
await Default.run({ args: { onClick: onClickSpy } })
1917
const buttonElement = screen.getByRole('button')
2018
buttonElement.click()
2119
expect(onClickSpy).toHaveBeenCalled()
2220
})
2321

2422
test('onclick handler is not called when disabled', async () => {
2523
const onClickSpy = vi.fn()
26-
await Disabled.run({ args: { ...Disabled.args, onClick: onClickSpy } })
24+
await Disabled.run({ args: { ...Disabled.input.args, onClick: onClickSpy } })
2725
screen.getByRole('button').click()
2826
expect(onClickSpy).not.toHaveBeenCalled()
2927
})
3028

31-
// test('onclick handler is called', async () => {
32-
// const onClickSpy = vi.fn()
33-
// render(<Default onClick={onClickSpy} />)
34-
// const buttonElement = screen.getByRole('button')
35-
// buttonElement.click()
36-
// expect(onClickSpy).toHaveBeenCalled()
37-
// })
29+
test('onclick handler is called', async () => {
30+
const onClickSpy = vi.fn()
31+
render(<Default.Component onClick={onClickSpy} />)
32+
const buttonElement = screen.getByRole('button')
33+
buttonElement.click()
34+
expect(onClickSpy).toHaveBeenCalled()
35+
})
3836

39-
// test('onclick handler is not called when disabled', async () => {
40-
// const onClickSpy = vi.fn()
41-
// render(<Disabled onClick={onClickSpy} />)
42-
// screen.getByRole('button').click()
43-
// expect(onClickSpy).not.toHaveBeenCalled()
44-
// })
37+
test('onclick handler is not called when disabled', async () => {
38+
const onClickSpy = vi.fn()
39+
render(<Disabled.Component onClick={onClickSpy} />)
40+
screen.getByRole('button').click()
41+
expect(onClickSpy).not.toHaveBeenCalled()
42+
})

‎src/components/Category/Category.stories.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import type { StoryObj, Meta } from '@storybook/react-vite'
1+
import preview from '#.storybook/preview'
22

33
import { Category } from './Category'
44

5-
const meta = {
5+
const meta = preview.meta({
66
title: 'Components/Category',
77
component: Category,
88
args: {
@@ -17,15 +17,12 @@ const meta = {
1717
url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1145-3681&mode=design&t=zmyrZnTzOLfLqBwr-4',
1818
},
1919
},
20-
} satisfies Meta<typeof Category>
21-
export default meta
20+
})
2221

23-
type Story = StoryObj<typeof meta>
22+
export const Default = meta.story()
2423

25-
export const Default: Story = {}
26-
27-
export const Rounded: Story = {
24+
export const Rounded = meta.story({
2825
args: {
2926
round: true,
3027
},
31-
}
28+
})

0 commit comments

Comments
 (0)