Merge pull request #23 from storybookjs/valentin/fix-optimize-dep-issue

fix: Optimize dependencies to fix hot reloading issues when switching between stories

Author: valentinpalkovic

example/.storybook/main.ts

@@ -7,7 +7,7 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    "@storybook/experimental-addon-test",
   ],
   framework: {
     name: "@storybook/experimental-nextjs-vite",

example/.storybook/preview.tsx

@@ -16,6 +16,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    react: { rsc: true },
   },
 };
 

example/.storybook/storybook.setup.ts

@@ -0,0 +1,9 @@
+import { setProjectAnnotations } from "@storybook/experimental-nextjs-vite";
+import { beforeAll } from "vitest";
+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
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

example/.storybook/vitest.config.mts

@@ -21,25 +21,24 @@
     "styled-jsx": "^5.1.6"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-actions": "^8.3.1",
-    "@storybook/addon-essentials": "^8.3.1",
-    "@storybook/addon-interactions": "^8.3.1",
-    "@storybook/addon-links": "^8.3.1",
-    "@storybook/addon-onboarding": "^8.3.1",
-    "@storybook/addon-toolbars": "^8.3.1",
-    "@storybook/blocks": "^8.3.1",
-    "@storybook/experimental-addon-test": "^8.3.1",
-    "@storybook/experimental-nextjs-vite": "^8.3.1",
-    "@storybook/react": "^8.3.1",
-    "@storybook/test": "^8.3.1",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-actions": "^8.4.1",
+    "@storybook/addon-essentials": "^8.4.1",
+    "@storybook/addon-links": "^8.4.1",
+    "@storybook/addon-onboarding": "^8.4.1",
+    "@storybook/addon-toolbars": "^8.4.1",
+    "@storybook/blocks": "^8.4.1",
+    "@storybook/experimental-addon-test": "^8.4.1",
+    "@storybook/experimental-nextjs-vite": "^8.4.1",
+    "@storybook/react": "^8.4.1",
+    "@storybook/test": "^8.4.1",
     "@testing-library/dom": "^10.3.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitest/browser": "^2.0.5",
+    "@vitest/browser": "^2.1.4",
     "autoprefixer": "^10.4.19",
     "bootstrap": "^5.3.3",
     "chromatic": "^11.7.0",
@@ -48,10 +47,10 @@
     "playwright": "^1.45.3",
     "postcss": "^8.4.38",
     "serve": "^14.2.3",
-    "storybook": "^8.3.1",
+    "storybook": "^8.4.1",
     "tailwindcss": "^3.4.4",
     "typescript": "^5",
     "vite-plugin-inspect": "^0.8.5",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.4"
   }
 }

example/.storybook/vitest.setup.ts

@@ -0,0 +1,24 @@
+import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
+import { storybookNextJsPlugin } from "@storybook/experimental-nextjs-vite/vite-plugin";
+import { defineConfig } from "vitest/config";
+
+// More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
+export default defineConfig({
+  plugins: [
+    // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
+    storybookTest({ configDir: ".storybook" }),
+    storybookNextJsPlugin(),
+  ],
+  test: {
+    name: "storybook",
+    browser: {
+      enabled: true,
+      headless: true,
+      name: "chromium",
+      provider: "playwright",
+    },
+    // Make sure to adjust this pattern to match your stories files.
+    include: ["**/*.stories.?(m)[jt]s?(x)"],
+    setupFiles: [".storybook/vitest.setup.ts"],
+  },
+});