Merge pull request #414 from ixartz/storybook9

Storybook9

Author: ixartz

.github/workflows/CI.yml

@@ -99,7 +99,7 @@ jobs:
           fail-on-cache-miss: true
 
       - name: Run unit tests
-        uses: docker://mcr.microsoft.com/playwright:v1.53.0
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1
         with:
           args: npm run test -- --coverage
 
@@ -134,9 +134,9 @@ jobs:
           fail-on-cache-miss: true
 
       - name: Run storybook tests
-        uses: docker://mcr.microsoft.com/playwright:v1.53.0
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1
         with:
-          args: npm run test-storybook:ci
+          args: npm run storybook:test
 
   e2e:
     strategy:
@@ -166,7 +166,7 @@ jobs:
           fail-on-cache-miss: true
 
       - name: Run E2E tests
-        uses: docker://mcr.microsoft.com/playwright:v1.53.0
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1
         with:
           args: sh -c "HOME=/root npm run test:e2e" # Set HOME to /root to avoid Playwright error with Firebox
         env:

.storybook/main.ts

@@ -1,21 +1,26 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
-    '@storybook/addon-onboarding',
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
   ],
   framework: {
-    name: '@storybook/nextjs',
+    name: '@storybook/nextjs-vite',
     options: {},
   },
-  staticDirs: ['../public'],
+  staticDirs: [
+    '../public',
+  ],
+  features: {
+    experimentalRSC: true,
+  },
   core: {
     disableTelemetry: true,
   },
 };
-
 export default config;

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/nextjs-vite';
 import '../src/styles/global.css';
 
 const preview: Preview = {
@@ -10,9 +10,16 @@ const preview: Preview = {
       },
     },
     nextjs: {
-      appDirectory: true,
+      appDirectory: true, // Enable App Router support
+    },
+    docs: {
+      toc: true, // Enable table of contents
+    },
+    a11y: {
+      test: 'todo', // Make a11y tests optional
     },
   },
+  tags: ['autodocs'],
 };
 
 export default preview;

.storybook/vitest.config.mts

@@ -0,0 +1,27 @@
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [
+    // The plugin will run tests for the stories defined in your Storybook config
+    // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+    storybookTest(),
+  ],
+  test: {
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: 'playwright',
+            instances: [{ browser: 'chromium' }],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
+  },
+});

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

eslint.config.mjs

@@ -3,6 +3,7 @@ import nextPlugin from '@next/eslint-plugin-next';
 import jestDom from 'eslint-plugin-jest-dom';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
 import playwright from 'eslint-plugin-playwright';
+import storybook from 'eslint-plugin-storybook';
 
 export default antfu(
   {
@@ -55,6 +56,8 @@ export default antfu(
     ],
     ...playwright.configs['flat/recommended'],
   },
+  // --- Storybook Rules ---
+  ...storybook.configs['flat/recommended'],
   // --- Custom Rule Overrides ---
   {
     rules: {