Added storybook

apps/web-tss/.gitignore

@@ -11,3 +11,5 @@ count.txt
 .vinxi
 todos.json
 mcp-todos.json
+*storybook.log
+storybook-static

apps/web-tss/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from "path"
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/react-vite'),
+    "options": {}
+  }
+};
+export default config;

apps/web-tss/.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import type { Preview } from "@storybook/react-vite";
+import "../src/styles/styles.css";
+import { BusterStyleProvider } from "../src/context/BusterStyles";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <BusterStyleProvider>
+          <Story />
+        </BusterStyleProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

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

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+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
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

apps/web-tss/package.json

@@ -10,7 +10,9 @@
     "serve": "vite preview",
     "test": "vitest run",
     "lint": "biome check --write",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@buster/server-shared": "workspace:*",
@@ -86,6 +88,11 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.1.4",
+    "@chromatic-com/storybook": "^4.1.0",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-vitest": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@tanstack/devtools-event-client": "^0.2.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
@@ -100,11 +107,15 @@
     "@vitest/ui": "3.2.4",
     "jsdom": "^26.1.0",
     "sass": "^1.90.0",
+    "storybook": "^9.1.2",
     "typescript": "^5.9.0",
     "vite": "^7.1.2",
     "vite-plugin-checker": "^0.10.2",
     "vite-tsconfig-paths": "catalog:",
     "vitest": "^3.2.4",
-    "web-vitals": "^5.1.0"
+    "web-vitals": "^5.1.0",
+    "@vitest/browser": "3.2.4",
+    "playwright": "^1.54.2",
+    "@vitest/coverage-v8": "3.2.4"
   }
 }

apps/web-tss/vitest.config.ts

@@ -1,69 +1,65 @@
+/// <reference types="vitest/config" />
 import { resolve } from 'node:path';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { defineConfig } from 'vitest/config';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [
-    tsconfigPaths({
+  plugins: [tsconfigPaths({
     root: resolve(__dirname),
-      projects: [resolve(__dirname, 'tsconfig.json')],
-    }) as unknown as Plugin,
-  ],
+    projects: [resolve(__dirname, 'tsconfig.json')]
+  }) as unknown as Plugin],
   esbuild: {
-    jsx: 'automatic',
+    jsx: 'automatic'
   },
   test: {
     globals: true,
-    environment: 'jsdom', // For React components
+    environment: 'jsdom',
+    // For React components
     setupFiles: ['./vitest.setup.ts'],
     pool: 'forks',
     poolOptions: {
       forks: {
         maxForks: process.env.CI ? 1 : 8,
-        minForks: process.env.CI ? 1 : 8,
-      },
+        minForks: process.env.CI ? 1 : 8
+      }
     },
     include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
-    exclude: [
-      '**/node_modules/**',
-      '**/dist/**',
-      '**/.next/**',
-      '**/playwright-tests/**',
-      '**/coverage/**',
-    ],
+    exclude: ['**/node_modules/**', '**/dist/**', '**/.next/**', '**/playwright-tests/**', '**/coverage/**'],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html'],
-      exclude: [
-        'coverage/**',
-        'dist/**',
-        '**/node_modules/**',
-        '**/[.]**',
-        'packages/*/test{,s}/**',
-        '**/*.d.ts',
-        '**/virtual:*',
-        '**/__x00__*',
-        '**/\x00*',
-        'cypress/**',
-        'test{,s}/**',
-        'test{,-*}.{js,cjs,mjs,ts,tsx,jsx}',
-        '**/*{.,-}test.{js,cjs,mjs,ts,tsx,jsx}',
-        '**/*{.,-}spec.{js,cjs,mjs,ts,tsx,jsx}',
-        '**/tests/**',
-        '**/__tests__/**',
-        '**/.{eslint,mocha,prettier}rc.{js,cjs,yml}',
-        '**/vitest.{workspace,projects}.[jt]s?(on)',
-        '**/vitest.config.[jt]s',
-        '**/playwright.config.[jt]s',
-        '**/.storybook/**',
-        '**/storybook-static/**',
-      ],
+      exclude: ['coverage/**', 'dist/**', '**/node_modules/**', '**/[.]**', 'packages/*/test{,s}/**', '**/*.d.ts', '**/virtual:*', '**/__x00__*', '**/\x00*', 'cypress/**', 'test{,s}/**', 'test{,-*}.{js,cjs,mjs,ts,tsx,jsx}', '**/*{.,-}test.{js,cjs,mjs,ts,tsx,jsx}', '**/*{.,-}spec.{js,cjs,mjs,ts,tsx,jsx}', '**/tests/**', '**/__tests__/**', '**/.{eslint,mocha,prettier}rc.{js,cjs,yml}', '**/vitest.{workspace,projects}.[jt]s?(on)', '**/vitest.config.[jt]s', '**/playwright.config.[jt]s', '**/.storybook/**', '**/storybook-static/**']
     },
+    projects: [{
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: 'playwright',
+          instances: [{
+            browser: 'chromium'
+          }]
+        },
+        setupFiles: ['.storybook/vitest.setup.ts']
+      }
+    }]
   },
-
   css: {
     postcss: {
-      plugins: [],
-    },
-  },
+      plugins: []
+    }
+  }
 });

apps/web-tss/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />