feat: add Storybook stories for various UI components including NavTa…

console/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+import { mergeConfig } from "vite"
+import tailwindcss from "@tailwindcss/vite"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const config: StorybookConfig = {
+    stories: ["../src/components/**/*.stories.@(ts|tsx)"],
+    addons: [
+        "@chromatic-com/storybook",
+        "@storybook/addon-a11y",
+        "@storybook/addon-docs",
+        "@storybook/addon-onboarding",
+    ],
+    framework: "@storybook/react-vite",
+    viteFinal: async (config) => {
+        return mergeConfig(config, {
+            plugins: [tailwindcss()],
+            resolve: {
+                alias: { "@": path.resolve(__dirname, "../src") },
+            },
+        })
+    },
+}
+
+export default config

console/.storybook/preview.ts

@@ -0,0 +1,32 @@
+import "../src/index.css"
+import type { Preview } from "@storybook/react-vite"
+
+const preview: Preview = {
+    parameters: {
+        // Controls: smart matchers for color/date fields
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+
+        // Docs: enable autodocs globally (stories already tagged with "autodocs")
+        docs: {},
+
+        // A11y: report violations in the panel without failing CI
+        a11y: {
+            test: "todo",
+        },
+
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "light", value: "oklch(1 0 0)" },
+                { name: "dark", value: "oklch(0.145 0 0)" },
+            ],
+        },
+    },
+}
+
+export default preview

console/eslint.config.js

@@ -1,54 +1,54 @@
-import js from "@eslint/js"
-import globals from "globals"
-import reactHooks from "eslint-plugin-react-hooks"
-import reactRefresh from "eslint-plugin-react-refresh"
-import prettier from "eslint-plugin-prettier"
-import prettierConfig from "eslint-config-prettier"
-import tseslint from "typescript-eslint"
-import { defineConfig, globalIgnores } from "eslint/config"
-
-export default defineConfig([
-    globalIgnores(["dist", "src/oapi/management.generated.ts"]),
-    {
-        files: ["**/*.{ts,tsx}"],
-        extends: [
-            js.configs.recommended,
-            tseslint.configs.recommended,
-            reactHooks.configs.flat.recommended,
-            reactRefresh.configs.vite,
-            prettierConfig,
-        ],
-        plugins: {
-            prettier,
-        },
-        rules: {
-            "prettier/prettier": "warn",
-            "@typescript-eslint/consistent-type-imports": [
-                "error",
-                {
-                    prefer: "type-imports",
-                    fixStyle: "separate-type-imports",
-                },
-            ],
-
-            // 🧘 Relax noisy TS rules during migration
-            "@typescript-eslint/no-explicit-any": "warn",
-            "@typescript-eslint/no-empty-object-type": "off",
-            "@typescript-eslint/no-unsafe-function-type": "off",
-            "no-unused-vars": "off",
-            "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-            "react/react-in-jsx-scope": "off",
-            "react/prop-types": "off",
-
-            // Disable React 19 compiler preflight rules (React 18 doesn’t use them)
-            "react-hooks/immutability": "off",
-            "react-hooks/refs": "off",
-            "react-hooks/set-state-in-effect": "off",
-            "react-hooks/preserve-manual-memoization": "off",
-        },
-        languageOptions: {
-            ecmaVersion: 2020,
-            globals: globals.browser,
-        },
-    },
-])
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import prettier from "eslint-plugin-prettier"
+import prettierConfig from "eslint-config-prettier"
+import tseslint from "typescript-eslint"
+import { defineConfig, globalIgnores } from "eslint/config"
+
+export default defineConfig([globalIgnores(["dist", "src/oapi/management.generated.ts"]), {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+        js.configs.recommended,
+        tseslint.configs.recommended,
+        reactHooks.configs.flat.recommended,
+        reactRefresh.configs.vite,
+        prettierConfig,
+    ],
+    plugins: {
+        prettier,
+    },
+    rules: {
+        "prettier/prettier": "warn",
+        "@typescript-eslint/consistent-type-imports": [
+            "error",
+            {
+                prefer: "type-imports",
+                fixStyle: "separate-type-imports",
+            },
+        ],
+
+        // 🧘 Relax noisy TS rules during migration
+        "@typescript-eslint/no-explicit-any": "warn",
+        "@typescript-eslint/no-empty-object-type": "off",
+        "@typescript-eslint/no-unsafe-function-type": "off",
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+        "react/react-in-jsx-scope": "off",
+        "react/prop-types": "off",
+
+        // Disable React 19 compiler preflight rules (React 18 doesn’t use them)
+        "react-hooks/immutability": "off",
+        "react-hooks/refs": "off",
+        "react-hooks/set-state-in-effect": "off",
+        "react-hooks/preserve-manual-memoization": "off",
+    },
+    languageOptions: {
+        ecmaVersion: 2020,
+        globals: globals.browser,
+    },
+}, ...storybook.configs["flat/recommended"]])

console/package.json

@@ -119,7 +119,9 @@
         "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
         "analyze:bundle": "pnpm build && npx source-map-explorer './dist/assets/*.js'",
         "generate": "pnpm run /^generate:/",
-        "generate:oapi": "openapi-typescript ../internal/http/controllers/v1/management/oapi/resources.yml -o ./src/oapi/management.generated.ts"
+        "generate:oapi": "openapi-typescript ../internal/http/controllers/v1/management/oapi/resources.yml -o ./src/oapi/management.generated.ts",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "types": "./lib/cjs/mod.d.ts",
     "main": "./lib/cjs/mod.js",
@@ -168,7 +170,18 @@
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.54.0",
         "vite": "^7.3.1",
-        "vitest": "^4.0.18"
+        "vitest": "^4.0.18",
+        "storybook": "^10.3.4",
+        "@storybook/react-vite": "^10.3.4",
+        "@chromatic-com/storybook": "^5.1.1",
+        "@storybook/addon-vitest": "^10.3.4",
+        "@storybook/addon-a11y": "^10.3.4",
+        "@storybook/addon-docs": "^10.3.4",
+        "@storybook/addon-onboarding": "^10.3.4",
+        "eslint-plugin-storybook": "^10.3.4",
+        "playwright": "^1.59.1",
+        "@vitest/browser-playwright": "4.0.18",
+        "@vitest/coverage-v8": "4.0.18"
     },
     "files": [
         "lib"