Setup storybook (#2503)

.gitignore

@@ -108,3 +108,6 @@ userData/
 
 # Python
 __pycache__/
+
+# Storybook
+storybook-static/

.storybook/main.ts

+import type { StorybookConfig } from "@storybook/react-vite";
+import path from "path";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  viteFinal: async (config) => {
+    const tailwindcss = (await import("@tailwindcss/vite")).default;
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@": path.resolve(__dirname, "../src"),
+    };
+    config.plugins = config.plugins || [];
+    config.plugins.push(tailwindcss());
+    return config;
+  },
+};
+
+export default config;

.storybook/preview.ts

+import type { Preview } from "@storybook/react";
+import "../src/styles/globals.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -41,7 +41,9 @@
     "build": "npm run pre:e2e",
     "pre:e2e": "cross-env E2E_TEST_BUILD=true npm run package",
     "e2e": "playwright test",
-    "e2e:shard": "playwright test --shard"
+    "e2e:shard": "playwright test --shard",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@ai-sdk/amazon-bedrock": "^4.0.46",
@@ -135,6 +137,11 @@
     "@electron-forge/publisher-github": "^7.11.1",
     "@electron/fuses": "^1.8.0",
     "@playwright/test": "^1.52.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/test": "^8.6.15",
     "@testing-library/react": "^16.3.0",
     "@types/better-sqlite3": "^7.6.13",
     "@types/fs-extra": "^11.0.4",
@@ -160,6 +167,7 @@
     "oxfmt": "^0.26.0",
     "oxlint": "^1.41.0",
     "rimraf": "^6.0.1",
+    "storybook": "^8.6.15",
     "typescript": "^5.8.3",
     "vite": "^5.4.17",
     "vitest": "^3.1.1"

src/components/ui/button.stories.tsx

+import type { Meta, StoryObj } from "@storybook/react";
+import { Mail } from "lucide-react";
+import { Button } from "./button";
+
+const meta: Meta<typeof Button> = {
+  title: "UI/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+      ],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon", "sidebar"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    children: "Delete",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Outline",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: "link",
+    children: "Link",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large",
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    size: "icon",
+    children: <Mail className="size-4" />,
+  },
+};
+
+export const Sidebar: Story = {
+  args: {
+    size: "sidebar",
+    children: <Mail className="size-8" />,
+  },
+};