use CSF4 + storybook test syntax

yannbf · Feb 6, 2025 · 56cf0db · 56cf0db
1 parent 25a392e
commit 56cf0db
Show file tree

Hide file tree

Showing 45 changed files with 516 additions and 629 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,6 +1,5 @@
-import { StorybookConfig } from '@storybook/react-vite'
-
-const config: StorybookConfig = {
+import { defineMain } from "@storybook/react-vite/node";
+export default defineMain({
   stories: [
     '../src/docs/Introduction.mdx',
     '../src/docs/*.mdx',
@@ -19,5 +18,4 @@ const config: StorybookConfig = {
   },
   staticDirs: ['../public'],
   framework: '@storybook/react-vite',
-}
-export default config
+});
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,4 +1,7 @@
-import type { Preview } from '@storybook/react'
+import addonA11y from "@storybook/addon-a11y";
+import experimentalAddonTest from "@storybook/experimental-addon-test";
+import addonEssentials from "@storybook/addon-essentials";
+import { definePreview } from "@storybook/react-vite";
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { userEvent } from '@storybook/test'
 
@@ -24,7 +27,12 @@ const breakpointViewports = Object.keys(breakpoints).reduce((acc, key) => {
   return acc
 }, {} as typeof INITIAL_VIEWPORTS)
 
-const preview: Preview = {
+declare module '@storybook/csf' {
+  interface StoryContext {
+      userEvent: ReturnType<typeof userEvent.setup>;
+  }
+}
+export default definePreview({
   parameters: {
     viewport: {
       defaultViewport: 'responsive',
@@ -51,6 +59,7 @@ const preview: Preview = {
       ),
     },
   },
+
   globalTypes: {
     theme: {
       name: 'Theme',
@@ -66,13 +75,8 @@ const preview: Preview = {
       },
     },
   },
-  decorators: globalDecorators,
-  loaders: [mswLoader, demoModeLoader]
-}
 
-declare module '@storybook/csf' {
-  interface StoryContext {
-      userEvent: ReturnType<typeof userEvent.setup>;
-  }
-}
-export default preview
+  decorators: globalDecorators,
+  loaders: [mswLoader, demoModeLoader],
+  addons: [addonEssentials(), experimentalAddonTest(), addonA11y()]
+});
diff --git a/.storybook/vitest.setup.ts b/.storybook/vitest.setup.ts
@@ -1,8 +1,7 @@
-import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { beforeAll } from 'vitest';
 import { setProjectAnnotations } from '@storybook/react';
-import * as projectAnnotations from './preview';
+import projectAnnotations from './preview';
 
-const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+const project = setProjectAnnotations(projectAnnotations.input);
 
 beforeAll(project.beforeAll);
diff --git a/package.json b/package.json
@@ -56,19 +56,19 @@
     "@babel/core": "^7.14.6",
     "@chromatic-com/storybook": "^3.2.1",
     "@ladle/react": "^4.1.2",
-    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-a11y": "0.0.0-pr-30457-sha-ca5962ea",
     "@storybook/addon-coverage": "^1.0.4",
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-themes": "^8.5.0",
-    "@storybook/blocks": "^8.5.0",
-    "@storybook/experimental-addon-test": "^8.5.0",
-    "@storybook/manager-api": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-vite": "^8.5.0",
-    "@storybook/test": "^8.5.0",
+    "@storybook/addon-essentials": "0.0.0-pr-30457-sha-ca5962ea",
+    "@storybook/addon-themes": "0.0.0-pr-30457-sha-ca5962ea",
+    "@storybook/blocks": "0.0.0-pr-30457-sha-ca5962ea",
+    "@storybook/experimental-addon-test": "0.0.0-pr-30457-sha-ca5962ea",
+    "@storybook/manager-api": "0.0.0-pr-30457-sha-ca5962ea",
+    "@storybook/react": "0.0.0-pr-30457-sha-ca5962ea",
+    "@storybook/react-vite": "0.0.0-pr-30457-sha-ca5962ea",
+    "@storybook/test": "0.0.0-pr-30457-sha-ca5962ea",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.5.0",
+    "@storybook/theming": "0.0.0-pr-30457-sha-ca5962ea",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.1",
@@ -112,7 +112,7 @@
     "prettier": "^3.2.5",
     "react-is": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "storybook": "^8.5.0",
+    "storybook": "0.0.0-pr-30457-sha-ca5962ea",
     "vite": "^4.0.0",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "2.1.2",
@@ -130,5 +130,14 @@
   "packageManager": "yarn@4.2.1",
   "resolutions": {
     "@use-it/event-listener@npm:^0.1.2": "patch:@use-it/event-listener@npm%3A0.1.7#~/.yarn/patches/@use-it-event-listener-npm-0.1.7-56ef42a654.patch"
+  },
+  "imports": {
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx",
+      "./*.js",
+      "./*.jsx"
+    ]
   }
 }
diff --git a/src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx b/src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import preview from "../../../.storybook/preview";
 
 import { AnimatedIllustration } from './AnimatedIllustration'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/AnimatedIllustration',
   component: AnimatedIllustration,
   parameters: {
@@ -17,13 +17,10 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof AnimatedIllustration>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     animation: 'Error',
   },
-}
+})
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
+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',
   },
-}
+})
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -1,9 +1,9 @@
-import type { StoryObj, Meta } from '@storybook/react'
+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>
     ),
   },
-}
+})
diff --git a/src/components/Category/Category.stories.tsx b/src/components/Category/Category.stories.tsx
@@ -1,8 +1,8 @@
-import type { StoryObj, Meta } from '@storybook/react'
+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,
   },
-}
+})
diff --git a/src/components/ErrorBlock/ErrorBlock.stories.tsx b/src/components/ErrorBlock/ErrorBlock.stories.tsx
@@ -1,12 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import preview from "../../../.storybook/preview";
 import { fn } from '@storybook/test'
 
 import sushi from '../../assets/images/sushi.svg'
 import { AnimatedIllustration } from '../AnimatedIllustration'
 
 import { ErrorBlock } from './ErrorBlock'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/ErrorBlock',
   component: ErrorBlock,
   parameters: {
@@ -20,19 +20,16 @@ const meta = {
     */
     onButtonClick: fn(),
   },
-} satisfies Meta<typeof ErrorBlock>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     title: 'This is not the food you’re looking for.',
     body: 'There seems that there are no restaurants in this category yet. Try to come back later?',
     image: <img alt="no restaurants found" src={sushi} />,
     buttonText: 'See all restaurants',
   },
-}
+})
 
 /* export const Error500: Story = {
   args: {
@@ -43,11 +40,11 @@ export const Default: Story = {
   },
 } */
 
-export const Error404: Story = {
+export const Error404 = meta.story({
   args: {
     title: "We can't find this page",
     body: 'This page doesn’t exist, keep looking.',
     image: <AnimatedIllustration animation="NotFound" />,
     buttonText: 'Home',
   },
-}
+})
diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import preview from "../../../.storybook/preview";
 
 import { Footer } from './Footer'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Footer',
   component: Footer,
   parameters: {
@@ -12,9 +12,6 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1716-3158&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Footer>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+export const Default = meta.story({})
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import preview from "../../../.storybook/preview";
 
 import { Header } from './Header'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Header',
   component: Header,
   parameters: {
@@ -12,14 +12,11 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1690-4054&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Header>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
+export const Default = meta.story({})
 
-export const Default: Story = {}
-
-export const WithCartData: Story = {
+export const WithCartData = meta.story({
   parameters: {
     store: {
       initialState: {
@@ -45,4 +42,4 @@ export const WithCartData: Story = {
       },
     },
   },
-}
+})