feat: add storybook and fix docker bug

apps/web/.gitignore

@@ -24,4 +24,5 @@ dist-ssr
 *.sw?
 
 .env
-routeTree.gen.ts
+routeTree.gen.ts
+*storybook.log

apps/web/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/experimental-addon-test",
+    "@storybook/addon-styling-webpack",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

apps/web/.storybook/preview.ts

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

apps/web/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from "vitest";
+import { setProjectAnnotations } from "@storybook/react";
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

apps/web/Dockerfile.dev

@@ -1,16 +1,26 @@
 FROM node:22.15.0-slim AS base
 
+# Set environment variables
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 
+# Install pnpm globally
+RUN npm install -g pnpm
+
+# Copy package files
 COPY pnpm-lock.yaml package.json ./
 
+# Install dependencies using pnpm
 RUN pnpm install
 
+# Copy the rest of the project files
 COPY . .
 
+# Set working directory
 WORKDIR /app
 
+# Expose port
 EXPOSE 5173
 
+# Start the app
 CMD ["pnpm", "run", "dev"]

apps/web/package.json

@@ -9,7 +9,9 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "prepare": "cd ../.. && husky ./apps/web/.husky",
-    "format": "prettier --write . && git add --all"
+    "format": "prettier --write . && git add --all",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -28,25 +30,46 @@
     "react": "^19.1.0",
     "react-aria-components": "^1.8.0",
     "react-dom": "^19.1.0",
+    "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.1.5",
     "tailwindcss-react-aria-components": "^2.0.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^3",
     "@eslint/js": "^9.25.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@tanstack/router-plugin": "^1.120.2",
     "@types/node": "^22.15.15",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.3",
+    "@vitest/coverage-v8": "^3.1.3",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.2",
+    "playwright": "^1.52.0",
     "prettier": "3.5.3",
+    "storybook": "^8.6.12",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }