re-add Storybook

Author: kylemh

.github/workflows/chromatic.yml

@@ -0,0 +1,33 @@
+name: Chromatic
+
+on: push
+
+jobs:
+  visual_regression_check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v5
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: main
+          token: ${{ secrets.GITHUB_TOKEN }}
+          buildScriptName: storybook:build

.gitignore

@@ -95,5 +95,8 @@ tsconfig.tsbuildinfo
 
 # MCP config (local tool settings)
 .mcp.json
+# Storybook
+storybook-static
+
 # next-agents-md
 .next-docs/

eslint.config.mjs

@@ -14,6 +14,7 @@ import eslintPluginLodash from 'eslint-plugin-lodash';
 import eslintPluginPlaywright from 'eslint-plugin-playwright';
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
 import reactYouMightNotNeedAnEffect from 'eslint-plugin-react-you-might-not-need-an-effect';
+import eslintPluginStorybook from 'eslint-plugin-storybook';
 
 
 const compat = new FlatCompat({
@@ -43,6 +44,7 @@ export default defineConfig(
     'playwright-report/**',
     'test-results/**',
     'public/**',
+    'src/.storybook/**',
     '*.svg',
     'prettier.config.js',
   ]),
@@ -412,6 +414,9 @@ export default defineConfig(
     },
   },
 
+  // ── Storybook stories ──
+  ...eslintPluginStorybook.configs['flat/recommended'],
+
   // ── Prettier (must be last) ──
   eslintPluginPrettierRecommended,
 );

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "next build",
     "build:analyze": "cross-env ANALYZE=true next build",
+    "chromatic": "chromatic --exit-zero-on-changes",
     "dev": "next -p 3000",
     "format": "prettier --write \"**/*\"",
     "format:md": "prettier --write \"**/*.md\"",
@@ -14,6 +15,8 @@
     "postbuild": "next-sitemap --config next-sitemap.config.ts",
     "prepare": "husky",
     "start": "next start -p 3000",
+    "storybook": "storybook dev -p 6006 -c src/.storybook",
+    "storybook:build": "storybook build -c src/.storybook",
     "test:e2e": "export LOCAL_PLAYWRIGHT=true && playwright test --headed",
     "test:e2e:debug": "pnpm test:e2e --debug",
     "test:e2e:dev": "export LOCAL_PLAYWRIGHT=true && playwright test --ui",
@@ -72,6 +75,8 @@
     "@faker-js/faker": "^10.4.0",
     "@next/eslint-plugin-next": "^16.2.3",
     "@playwright/test": "^1.59.1",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/nextjs": "^10.3.5",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4.2.2",
     "@testing-library/jest-dom": "^6.9.1",
@@ -90,6 +95,7 @@
     "@vitest/ui": "^4.1.4",
     "axios-mock-adapter": "^2.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
+    "chromatic": "^16.2.0",
     "cross-env": "^10.1.0",
     "dotenv": "^17.4.1",
     "eslint": "^10.2.0",
@@ -103,6 +109,7 @@
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-you-might-not-need-an-effect": "^0.9.3",
+    "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-unicorn": "^64.0.0",
     "husky": "^9.1.7",
     "jsdom": "^29.0.2",
@@ -111,6 +118,7 @@
     "prettier": "^3.8.2",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "shadcn": "^4.2.0",
+    "storybook": "^10.3.5",
     "tailwindcss": "^4.2.2",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.1",