storybook作り直した

Author: gn-t-k

packages/react-components/.storybook/main.ts

@@ -1,6 +1,7 @@
-import { dirname, join } from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
+import { dirname, join } from "path";
+
 /**
  * この関数はパッケージの絶対パスを解決するために使用されます。
  * Yarn PnPを使用するプロジェクトやモノレポ内で設定されたプロジェクトで必要です。
@@ -10,14 +11,13 @@ const getAbsolutePath: GetAbsolutePath = (value) => {
 	return dirname(require.resolve(join(value, "package.json")));
 };
 
-/** @private */
 export default {
-	stories: ["../src/**/*.stories.tsx"],
+	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 	addons: [
+		getAbsolutePath("@storybook/addon-essentials"),
+		getAbsolutePath("@storybook/addon-onboarding"),
 		getAbsolutePath("@chromatic-com/storybook"),
-		getAbsolutePath("@storybook/addon-docs"),
-		getAbsolutePath("@storybook/addon-a11y"),
-		getAbsolutePath("@storybook/addon-vitest"),
+		getAbsolutePath("@storybook/experimental-addon-test"),
 		getAbsolutePath("storybook-dark-mode"),
 	],
 	framework: {

packages/react-components/.storybook/preview.ts

@@ -1,7 +1,6 @@
-import type { Preview } from "@storybook/react-vite";
+import type { Preview } from "@storybook/react";
 import "../src/globals.css";
 
-/** @private */
 export default {
 	parameters: {
 		darkMode: {

packages/react-components/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { setProjectAnnotations } from "@storybook/react";
+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);

packages/react-components/package.json

@@ -31,14 +31,16 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.0.6",
-		"@chromatic-com/storybook": "4.0.1",
+		"@chromatic-com/storybook": "^3.2.7",
 		"@configs/common": "workspace:*",
 		"@configs/react": "workspace:*",
-		"@storybook/addon-a11y": "8.6.14",
-		"@storybook/addon-docs": "8.6.14",
-		"@storybook/addon-vitest": "8.6.14",
+		"@storybook/addon-essentials": "^8.6.14",
+		"@storybook/addon-onboarding": "8.6.14",
+		"@storybook/blocks": "^8.6.14",
+		"@storybook/experimental-addon-test": "^8.6.14",
+		"@storybook/react": "8.6.14",
 		"@storybook/react-vite": "8.6.14",
-		"@storybook/types": "8.6.14",
+		"@storybook/test": "^8.6.14",
 		"@tsconfig/node-lts": "22.0.2",
 		"@types/react": "19.1.8",
 		"@types/react-dom": "19.1.6",

packages/react-components/src/components/button/button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { VariantProps } from "class-variance-authority";
 import { Button, type buttonVariants } from "./button";
 

packages/react-components/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />

packages/react-components/vitest.workspace.ts

@@ -0,0 +1,32 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
+import { defineWorkspace } from "vitest/config";
+
+const dirname =
+	typeof __dirname !== "undefined"
+		? __dirname
+		: path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export default defineWorkspace([
+	"vite.config.ts",
+	{
+		extends: "vite.config.ts",
+		plugins: [
+			// The plugin will run tests for the stories defined in your Storybook config
+			// See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+			storybookTest({ configDir: path.join(dirname, ".storybook") }),
+		],
+		test: {
+			name: "storybook",
+			browser: {
+				enabled: true,
+				headless: true,
+				provider: "playwright",
+				instances: [{ browser: "chromium" }],
+			},
+			setupFiles: [".storybook/vitest.setup.ts"],
+		},
+	},
+]);