chore: Add design system audit report (#6606)

.github/workflows/frontend-chromatic.yml

@@ -0,0 +1,45 @@
+name: Frontend Chromatic
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+    paths:
+      - frontend/**
+      - .github/workflows/frontend-chromatic.yml
+
+permissions:
+  contents: read
+
+jobs:
+  chromatic:
+    name: Chromatic
+    runs-on: ubuntu-latest
+    # if: github.event.pull_request.draft == false
+
+    defaults:
+      run:
+        working-directory: frontend
+
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: frontend/.nvmrc
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          workingDir: frontend
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true
+          exitOnceUploaded: true
+          onlyChanged: true

frontend/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
     'plugin:@dword-design/import-alias/recommended',
+    'plugin:storybook/recommended',
   ],
   'globals': {
     '$': true,

frontend/.gitignore

@@ -33,3 +33,6 @@ common/project.js
 # Playwright
 e2e/playwright-report/
 e2e/test-results/
+
+*storybook.log
+storybook-static/

frontend/.storybook/main.ts

@@ -0,0 +1,54 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+import path from 'path'
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic',
+        },
+      },
+      parser: {
+        syntax: 'typescript',
+        tsx: true,
+      },
+    },
+  }),
+  webpackFinal: async (config) => {
+    // Path aliases — match the project's webpack.config.js
+    config.resolve = config.resolve || {}
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      common: path.resolve(__dirname, '../common'),
+      components: path.resolve(__dirname, '../web/components'),
+      project: path.resolve(__dirname, '../web/project'),
+    }
+
+    // SCSS support
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        { loader: 'css-loader', options: { importLoaders: 1 } },
+        'sass-loader',
+      ],
+    })
+
+    return config
+  },
+}
+export default config

frontend/.storybook/preview.ts

@@ -0,0 +1,50 @@
+import type { Preview } from '@storybook/react'
+
+// Import the project's global styles (includes tokens)
+import '../web/styles/styles.scss'
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Dark mode toggle',
+      toolbar: {
+        title: 'Theme',
+        icon: 'moon',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: 'light',
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals.theme || 'light'
+      const isDark = theme === 'dark'
+
+      // Mirror the project's setDarkMode() logic
+      document.documentElement.setAttribute(
+        'data-bs-theme',
+        isDark ? 'dark' : 'light',
+      )
+      document.body.classList.toggle('dark', isDark)
+
+      return Story()
+    },
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: { disable: true },
+  },
+}
+
+export default preview