CSF4 support

.storybook/main.ts

@@ -1,6 +1,6 @@
-import { StorybookConfig } from '@storybook/react-vite'
+import { defineMain } from '@storybook/react-vite/node'
 
-const config: StorybookConfig = {
+export default defineMain({
   stories: [
     '../src/docs/Introduction.mdx',
     '../src/docs/*.mdx',
@@ -19,5 +19,4 @@ const config: StorybookConfig = {
   },
   staticDirs: ['../public'],
   framework: '@storybook/react-vite',
-}
-export default config
+})

.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react-vite'
+import { definePreview } from '@storybook/react-vite'
 import { INITIAL_VIEWPORTS } from 'storybook/viewport'
 import { userEvent } from '@testing-library/user-event'
 import { mswLoader, initialize } from 'msw-storybook-addon'
@@ -10,6 +10,10 @@ import { BrowserRouter } from 'react-router-dom'
 import React from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 
+import addonVitest from '@storybook/addon-vitest'
+import addonA11y from '@storybook/addon-a11y'
+import addonDocs from '@storybook/addon-docs'
+
 import { demoModeLoader } from './demo-mode'
 import { rootReducer } from '../src/app-state'
 import { breakpoints } from '../src/styles/breakpoints'
@@ -206,7 +210,13 @@ const breakpointViewports = Object.keys(breakpoints).reduce(
   {} as typeof INITIAL_VIEWPORTS
 )
 
-const preview: Preview = {
+declare module 'storybook/internal/csf' {
+  interface StoryContext {
+    userEvent: ReturnType<typeof userEvent.setup>
+  }
+}
+export default definePreview({
+  addons: [addonVitest(), addonA11y(), addonDocs()],
   parameters: {
     viewport: {
       viewports: {
@@ -252,11 +262,4 @@ const preview: Preview = {
   },
   decorators: [withRouter, withTheme, withStore],
   loaders: [mswLoader, demoModeLoader],
-}
-
-declare module 'storybook/internal/csf' {
-  interface StoryContext {
-    userEvent: ReturnType<typeof userEvent.setup>
-  }
-}
-export default preview
+})

package.json

@@ -68,13 +68,13 @@
     "@babel/core": "^7.26.9",
     "@chromatic-com/storybook": "4.0.0-next.6",
     "@eslint/js": "^9.21.0",
-    "@storybook/addon-a11y": "^9.0.0",
+    "@storybook/addon-a11y": "0.0.0-pr-30601-sha-40d66b1f",
     "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-designs": "9.0.0-next.3",
-    "@storybook/addon-docs": "^9.0.0",
-    "@storybook/addon-themes": "^9.0.0",
-    "@storybook/addon-vitest": "^9.0.0",
-    "@storybook/react-vite": "^9.0.0",
+    "@storybook/addon-designs": "^10.0.1",
+    "@storybook/addon-docs": "0.0.0-pr-30601-sha-40d66b1f",
+    "@storybook/addon-themes": "0.0.0-pr-30601-sha-40d66b1f",
+    "@storybook/addon-vitest": "0.0.0-pr-30601-sha-40d66b1f",
+    "@storybook/react-vite": "0.0.0-pr-30601-sha-40d66b1f",
     "@storybook/test-runner": "^0.22.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -103,7 +103,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^9.0.0",
+    "eslint-plugin-storybook": "0.0.0-pr-30601-sha-40d66b1f",
     "eslint-plugin-unicorn": "^57.0.0",
     "globals": "^16.0.0",
     "happy-dom": "^17.1.8",
@@ -117,8 +117,8 @@
     "prettier": "^3.5.2",
     "react-is": "^19.0.0",
     "react-test-renderer": "^19.0.0",
-    "storybook": "^9.0.0",
-    "storybook-addon-test-codegen": "^1.3.4",
+    "storybook": "0.0.0-pr-30601-sha-40d66b1f",
+    "storybook-addon-test-codegen": "^2.0.0",
     "typescript-eslint": "^8.25.0",
     "vite": "^6.2.0",
     "vitest": "^3.0.7",
@@ -129,5 +129,14 @@
   "packageManager": "yarn@4.2.1",
   "msw": {
     "workerDirectory": "public"
+  },
+  "imports": {
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx",
+      "./*.js",
+      "./*.jsx"
+    ]
   }
 }

src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { AnimatedIllustration } from './AnimatedIllustration'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/AnimatedIllustration',
   component: AnimatedIllustration,
   parameters: {
@@ -17,19 +17,16 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof AnimatedIllustration>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const NotFound: Story = {
+export const NotFound = meta.story({
   args: {
     animation: 'NotFound',
   },
-}
+})
 
-export const Error: Story = {
+export const Error = meta.story({
   args: {
     animation: 'Error',
   },
-}
+})

src/components/Badge/Badge.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Badge } from './Badge'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Badge',
   component: Badge,
   parameters: {
@@ -11,13 +11,10 @@ const meta = {
       url: 'https://www.figma.com/file/XW4Bcjmj3JOILjKmZjjdQd/Mealdrop?node-id=780%3A2938',
     },
   },
-} satisfies Meta<typeof Badge>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     text: 'Comfort food',
   },
-}
+})

src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,27 +1,24 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Breadcrumb } from './Breadcrumb'
 
-const meta: Meta<typeof Breadcrumb> = {
+const meta = preview.meta({
   title: 'Components/Breadcrumb',
   component: Breadcrumb,
-}
+})
 
-export default meta
-type Story = StoryObj<typeof Breadcrumb>
-
-export const SingleItem: Story = {
+export const SingleItem = meta.story({
   args: {
     items: [{ label: 'categories' }],
   },
-}
+})
 
-export const MultipleItems: Story = {
+export const MultipleItems = meta.story({
   args: {
     items: [
       { label: 'home', path: '/' },
       { label: 'categories', path: '/categories' },
       { label: 'sushi' },
     ],
   },
-}
+})

src/components/Button/Button.stories.tsx

@@ -1,9 +1,9 @@
-import type { StoryObj, Meta } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { expect } from 'storybook/test'
 
 import { Button } from './Button'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Button',
   component: Button,
   args: {
@@ -15,37 +15,34 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1005%3A2974&t=8pzYUq8GyzmMGjJ2-4',
     },
   },
-} satisfies Meta<typeof Button>
-export default meta
+})
 
-type Story = StoryObj<typeof meta>
+export const Default = meta.story()
 
-export const Default: Story = {}
-
-export const Disabled: Story = {
+export const Disabled = meta.story({
   args: {
     disabled: true,
   },
   play: async ({ canvas }) => {
     const button = await canvas.findByRole('button')
     await expect(button).toBeDisabled()
   },
-}
+})
 
-export const Clear: Story = {
+export const Clear = meta.story({
   args: {
     clear: true,
   },
-}
+})
 
-export const Icon: Story = {
+export const Icon = meta.story({
   args: {
     icon: 'cart',
     'aria-label': 'cart',
   },
-}
+})
 
-export const IconAndText: Story = {
+export const IconAndText = meta.story({
   args: {
     icon: 'cart',
     children: (
@@ -55,4 +52,4 @@ export const IconAndText: Story = {
       </div>
     ),
   },
-}
+})

src/components/Button/Button.test.tsx

@@ -1,11 +1,9 @@
 import { vi, expect, test } from 'vitest'
 import { axe } from 'vitest-axe'
-import { screen } from '@testing-library/react'
-import { composeStories } from '@storybook/react-vite'
+import { render, screen } from '@testing-library/react'
 
-import * as stories from './Button.stories'
+import { Default, Disabled } from './Button.stories'
 
-const { Default, Disabled } = composeStories(stories)
 test('renders button with custom children', async () => {
   await Default.run()
   expect(screen.getByText(/Button/i)).toBeInTheDocument()
@@ -15,30 +13,30 @@ test('renders button with custom children', async () => {
 
 test('onclick handler is called', async () => {
   const onClickSpy = vi.fn()
-  await Default.run({ args: { ...Default.args, onClick: onClickSpy } })
+  await Default.run({ args: { onClick: onClickSpy } })
   const buttonElement = screen.getByRole('button')
   buttonElement.click()
   expect(onClickSpy).toHaveBeenCalled()
 })
 
 test('onclick handler is not called when disabled', async () => {
   const onClickSpy = vi.fn()
-  await Disabled.run({ args: { ...Disabled.args, onClick: onClickSpy } })
+  await Disabled.run({ args: { ...Disabled.input.args, onClick: onClickSpy } })
   screen.getByRole('button').click()
   expect(onClickSpy).not.toHaveBeenCalled()
 })
 
-// test('onclick handler is called', async () => {
-//   const onClickSpy = vi.fn()
-//   render(<Default onClick={onClickSpy} />)
-//   const buttonElement = screen.getByRole('button')
-//   buttonElement.click()
-//   expect(onClickSpy).toHaveBeenCalled()
-// })
+test('onclick handler is called', async () => {
+  const onClickSpy = vi.fn()
+  render(<Default.Component onClick={onClickSpy} />)
+  const buttonElement = screen.getByRole('button')
+  buttonElement.click()
+  expect(onClickSpy).toHaveBeenCalled()
+})
 
-// test('onclick handler is not called when disabled', async () => {
-//   const onClickSpy = vi.fn()
-//   render(<Disabled onClick={onClickSpy} />)
-//   screen.getByRole('button').click()
-//   expect(onClickSpy).not.toHaveBeenCalled()
-// })
+test('onclick handler is not called when disabled', async () => {
+  const onClickSpy = vi.fn()
+  render(<Disabled.Component onClick={onClickSpy} />)
+  screen.getByRole('button').click()
+  expect(onClickSpy).not.toHaveBeenCalled()
+})

src/components/Category/Category.stories.tsx

@@ -1,8 +1,8 @@
-import type { StoryObj, Meta } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Category } from './Category'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Category',
   component: Category,
   args: {
@@ -17,15 +17,12 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1145-3681&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Category>
-export default meta
+})
 
-type Story = StoryObj<typeof meta>
+export const Default = meta.story()
 
-export const Default: Story = {}
-
-export const Rounded: Story = {
+export const Rounded = meta.story({
   args: {
     round: true,
   },
-}
+})