feat: add Storybook for visual component development

.gitignore

@@ -4,3 +4,4 @@ mcp/dist
 .DS_Store
 *.tgz
 /package/coverage
+storybook-static

package.json

@@ -11,7 +11,8 @@
     "mcp": "pnpm --filter agentation-mcp start",
     "publish:agentation": "pnpm --filter agentation publish --access public",
     "publish:mcp": "pnpm --filter agentation-mcp publish --access public",
-    "publish:all": "pnpm publish:agentation && pnpm publish:mcp"
+    "publish:all": "pnpm publish:agentation && pnpm publish:mcp",
+    "storybook": "pnpm --filter agentation storybook"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  framework: "@storybook/react-vite",
+  addons: [
+    "@alexgorbatchev/storybook-addon-localstorage",
+  ],
+  viteFinal: (config) => {
+    config.define = {
+      ...config.define,
+      __VERSION__: JSON.stringify("storybook"),
+    };
+    return config;
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,27 @@
+import type { Preview } from "@storybook/react";
+import React from "react";
+
+const preview: Preview = {
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) =>
+      React.createElement(
+        "div",
+        {
+          style: {
+            minHeight: "100vh",
+            background: "#1a1a2e",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 40,
+          },
+        },
+        React.createElement(Story)
+      ),
+  ],
+};
+
+export default preview;

package/package.json

@@ -29,7 +29,9 @@
     "dev": "pnpm build && pnpm watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "pnpm build"
+    "prepublishOnly": "pnpm build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -44,6 +46,9 @@
     }
   },
   "devDependencies": {
+    "@alexgorbatchev/storybook-addon-localstorage": "10.0.4",
+    "@storybook/react": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
@@ -57,6 +62,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.97.2",
+    "storybook": "^10.2.17",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^2.0.0"