Feat: add storybook setup

.eslintrc.json

@@ -2,7 +2,8 @@
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
-        "plugin:prettier/recommended"
+        "plugin:prettier/recommended",
+        "plugin:storybook/recommended"
     ],
     "plugins": [
         "react",
@@ -87,4 +88,4 @@
         "node/prefer-promises/dns": "error",
         "node/prefer-promises/fs": "error"
     }
-}
+}

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,49 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'src/frontend/**/*.stories.*'
+      - 'src/frontend/.storybook/**'
+      - 'src/frontend/package.json'
+      - '.github/workflows/deploy-storybook.yml'
+  workflow_dispatch: # Allow manual trigger
+
+jobs:
+  deploy:
+    name: Deploy Storybook
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: src/frontend/package-lock.json
+
+      - name: Install dependencies
+        run: cd src/frontend && npm ci
+
+      - name: Build Storybook
+        run: cd src/frontend && npm run build-storybook
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: src/frontend/storybook-static
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

Makefile.frontend

@@ -5,7 +5,7 @@
 FRONTEND_DIR = src/frontend
 NPM = npm
 
-.PHONY: install_frontend install_frontendci install_frontendc frontend_deps_check build_frontend run_frontend frontend frontendc format_frontend tests_frontend test_frontend test_frontend_watch test_frontend_coverage test_frontend_verbose test_frontend_ci test_frontend_clean test_frontend_file test_frontend_pattern test_frontend_snapshots test_frontend_config test_frontend_bail test_frontend_silent test_frontend_coverage_open help_frontend
+.PHONY: install_frontend install_frontendci install_frontendc frontend_deps_check build_frontend run_frontend frontend frontendc format_frontend tests_frontend test_frontend test_frontend_watch test_frontend_coverage test_frontend_verbose test_frontend_ci test_frontend_clean test_frontend_file test_frontend_pattern test_frontend_snapshots test_frontend_config test_frontend_bail test_frontend_silent test_frontend_coverage_open help_frontend storybook storybook_build storybook_network
 
 ######################
 # FRONTEND DEPENDENCIES
@@ -166,6 +166,23 @@ test_frontend_coverage_open: test_frontend_coverage ## run tests with coverage a
 		echo "Coverage report generated at: $(FRONTEND_DIR)/coverage/lcov-report/index.html"; \
 	fi
 
+######################
+# STORYBOOK
+######################
+
+storybook: frontend_deps_check ## run Storybook development server and open in browser
+	@echo "Starting Storybook development server on http://localhost:6006..."
+	@cd $(FRONTEND_DIR) && $(NPM) run storybook
+
+storybook_build: frontend_deps_check ## build static Storybook
+	@echo "Building static Storybook..."
+	@cd $(FRONTEND_DIR) && $(NPM) run build-storybook
+	@echo "Storybook built to $(FRONTEND_DIR)/storybook-static"
+
+storybook_network: frontend_deps_check ## run Storybook accessible on network (0.0.0.0:6006)
+	@echo "Starting Storybook development server accessible on network..."
+	@cd $(FRONTEND_DIR) && $(NPM) run storybook:network
+
 ######################
 # FRONTEND HELP
 ######################
@@ -212,5 +229,10 @@ help_frontend: ## show frontend help
 	@echo "  $(GREEN)make test_frontend_snapshots$(NC) - Update Jest snapshots"
 	@echo "  $(GREEN)make test_frontend_config$(NC) - Show Jest configuration"
 	@echo ''
+	@echo "$(GREEN)Storybook:$(NC)"
+	@echo "  $(GREEN)make storybook$(NC)            - Run Storybook dev server and open in browser"
+	@echo "  $(GREEN)make storybook_build$(NC)      - Build static Storybook"
+	@echo "  $(GREEN)make storybook_network$(NC)    - Run Storybook accessible on network"
+	@echo ''
 	@echo "$(GREEN)═══════════════════════════════════════════════════════════════════$(NC)"
 	@echo ''

pyproject.toml

@@ -135,7 +135,7 @@ dependencies = [
     "fastparquet>=2024.11.0,<2025.0.0",
     "traceloop-sdk>=0.43.1,<1.0.0",
     "vlmrun[all]>=0.2.0",
-    "cuga==0.1.11",
+    "cuga==0.1.10",
     "agent-lifecycle-toolkit~=0.4.1",
     "astrapy>=2.1.0,<3.0.0",
     "aioboto3>=15.2.0,<16.0.0"

src/frontend/.gitignore

@@ -11,6 +11,10 @@
 # production
 /build
 
+# storybook
+/storybook-static
+*storybook.log
+
 # misc
 .DS_Store
 .env.local

src/frontend/.storybook/css.d.ts

@@ -0,0 +1,5 @@
+// Type declarations for CSS imports in Storybook
+declare module "*.css" {
+  const content: Record<string, string>;
+  export default content;
+}

src/frontend/.storybook/main.ts

@@ -0,0 +1,41 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { fileURLToPath } from "node:url";
+import type { StorybookConfig } from "@storybook/react-vite";
+import path, { dirname } from "path";
+import { mergeConfig } from "vite";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-docs"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          "@": path.resolve(__dirname, "../src"),
+        },
+      },
+    });
+  },
+  typescript: {
+    check: false,
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => {
+        if (prop.parent) {
+          return !prop.parent.fileName.includes("node_modules");
+        }
+        return true;
+      },
+    },
+  },
+};
+
+export default config;

src/frontend/.storybook/preview.ts

@@ -0,0 +1,87 @@
+import type { Preview } from "@storybook/react-vite";
+import * as React from "react";
+import { useEffect } from "react";
+// Import all CSS files to match the app's styling
+import "../src/style/classes.css";
+import "../src/style/index.css";
+import "../src/App.css";
+import "../src/style/applies.css";
+import { TooltipProvider } from "../src/components/ui/tooltip";
+import { useDarkStore } from "../src/stores/darkStore";
+
+// Global decorator to provide TooltipProvider for all stories
+const withTooltipProvider = (Story: React.ComponentType) => {
+  const TooltipWrapper = (): React.ReactElement => {
+    const storyElement = React.createElement(Story);
+    return React.createElement(TooltipProvider, {
+      skipDelayDuration: 0,
+      children: storyElement,
+    });
+  };
+  return React.createElement(TooltipWrapper);
+};
+
+// Global decorator to handle dark mode for all stories
+const withTheme = (
+  Story: React.ComponentType,
+  context: {
+    args?: { darkMode?: boolean };
+    initialArgs?: { darkMode?: boolean };
+    parameters?: { darkMode?: boolean };
+    globals?: { theme?: string };
+  },
+) => {
+  const ThemeWrapper = (): React.ReactElement => {
+    // Check for dark mode in args, parameters, or globals
+    const dark =
+      context.args?.darkMode === true ||
+      context.initialArgs?.darkMode === true ||
+      context.parameters?.darkMode === true ||
+      context.globals?.theme === "dark";
+
+    useEffect(() => {
+      const bodyElement = document.getElementById("body") || document.body;
+      const htmlElement = document.documentElement;
+
+      if (dark) {
+        bodyElement.classList.add("dark");
+        htmlElement.classList.add("dark");
+        useDarkStore.setState({ dark: true });
+      } else {
+        bodyElement.classList.remove("dark");
+        htmlElement.classList.remove("dark");
+        useDarkStore.setState({ dark: false });
+      }
+    }, [dark]);
+
+    // Sync immediately on render
+    const bodyElement = document.getElementById("body") || document.body;
+    const htmlElement = document.documentElement;
+    if (dark) {
+      bodyElement.classList.add("dark");
+      htmlElement.classList.add("dark");
+    } else {
+      bodyElement.classList.remove("dark");
+      htmlElement.classList.remove("dark");
+    }
+
+    return React.createElement(Story);
+  };
+
+  return React.createElement(ThemeWrapper);
+};
+
+const preview: Preview = {
+  decorators: [withTooltipProvider, withTheme],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;