UI/components

.github/workflows/storybook.yml

@@ -0,0 +1,40 @@
+name: Build Storybook
+
+on:
+  pull_request:
+  push:
+    branches: [ main ]
+
+jobs:
+  build-storybook:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: client
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: client/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint (optional)
+        run: npm run lint --if-present
+
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      # Optional: Upload the static build as an artifact for preview
+      - name: Upload storybook-static artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: storybook-static
+          path: client/storybook-static
+          if-no-files-found: ignore

client/.gitignore

@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env
+*storybook.log
+storybook-static

client/.storybook/main.ts

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

client/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react-vite'
+import '../src/index.css';
+import { ToastProvider } from '../src/ui';
+import React from 'react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story) => React.createElement(
+      ToastProvider,
+      null,
+      React.createElement(Story, null)
+    ),
+  ],
+};
+
+export default preview;

client/eslint.config.js

@@ -1,3 +1,6 @@
+// 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'
@@ -6,7 +9,7 @@ import tseslint from 'typescript-eslint'
 import { globalIgnores } from 'eslint/config'
 
 export default tseslint.config([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', 'storybook-static']),
   {
     files: ['**/*.{ts,tsx}'],
     extends: [
@@ -20,4 +23,17 @@ export default tseslint.config([
       globals: globals.browser,
     },
   },
-])
+  {
+    files: ['src/constants/*.tsx', 'src/ui/Toast.tsx'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+  {
+    files: ['src/ui/Tooltip.tsx'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+], storybook.configs["flat/recommended"]);