feat: add Storybook 10 with stories + a11y test runner

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: [master]
   pull_request:
-    branches: [main]
+    branches: [master]
 
 jobs:
   lint:
@@ -41,6 +41,22 @@ jobs:
       - run: npx playwright install chromium
       - run: npm run e2e
 
+  storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: 'npm'
+      - run: npm ci
+      - run: npx playwright install chromium
+      - run: npm run build-storybook
+      - run: |
+          npx http-server dist/storybook/saas-business-app --port 6006 --silent &
+          npx wait-on http://localhost:6006
+          npx test-storybook --url http://localhost:6006
+
   build:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -5,6 +5,7 @@
 /tmp
 /out-tsc
 /bazel-out
+/storybook-static
 
 # Node
 /node_modules
@@ -38,6 +39,7 @@ yarn-error.log
 testem.log
 /typings
 __screenshots__/
+debug-storybook.log
 
 # System files
 .DS_Store

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/angular-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/angular-vite',
+    options: {},
+  },
+  stories: ['../src/**/*.stories.ts'],
+  addons: ['@storybook/addon-a11y'],
+  docs: { autodocs: 'tag' },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,23 @@
+import '../src/tailwind.css';
+import '../src/styles.scss';
+
+const preview = {
+  parameters: {
+    backgrounds: {
+      options: {
+        app: { name: 'app', value: 'var(--color-bg, #f8fafc)' },
+        surface: { name: 'surface', value: 'var(--color-surface, #ffffff)' },
+        dark: { name: 'dark', value: '#0f172a' },
+      },
+    },
+    controls: { expanded: true },
+  },
+
+  initialGlobals: {
+    backgrounds: {
+      value: 'app',
+    },
+  },
+};
+
+export default preview;

.storybook/test-runner.ts

@@ -0,0 +1,29 @@
+import type { TestRunnerConfig } from '@storybook/test-runner';
+
+const config: TestRunnerConfig = {
+  stories: ['../src/**/*.stories.ts'],
+  framework: 'playwright',
+  tags: {
+    exclude: ['skip'],
+  },
+  tests: {
+    a11y: {
+      parameters: {
+        a11y: {
+          config: {
+            rules: [
+              { id: 'color-contrast', enabled: true },
+              { id: 'aria-valid-attr', enabled: true },
+              { id: 'aria-roles', enabled: true },
+              { id: 'button-name', enabled: true },
+              { id: 'image-alt', enabled: true },
+              { id: 'label', enabled: true },
+            ],
+          },
+        },
+      },
+    },
+  },
+};
+
+export default config;

angular.json

@@ -70,6 +70,28 @@
         },
         "test": {
           "builder": "@angular/build:unit-test"
+        },
+        "storybook": {
+          "builder": "@storybook/angular-vite:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "port": 6006,
+            "tsConfig": "tsconfig.json",
+            "zoneless": true,
+            "compodoc": false,
+            "styles": ["src/tailwind.css", "src/styles.scss"]
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular-vite:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "outputDir": "dist/storybook/saas-business-app",
+            "tsConfig": "tsconfig.json",
+            "zoneless": true,
+            "compodoc": false,
+            "styles": ["src/tailwind.css", "src/styles.scss"]
+          }
         }
       }
     }

eslint.config.js

@@ -1,56 +1,53 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import tseslint from 'typescript-eslint';
 import prettierConfig from 'eslint-config-prettier';
 
-export default tseslint.config(
-  {
-    ignores: ['dist/**', 'node_modules/**', '.angular/**', '**/*.spec.ts'],
-  },
-  {
-    files: ['eslint.config.js'],
-    languageOptions: {
-      parserOptions: {
-        projectService: null,
-      },
-    },
-    rules: {
-      'no-unused-vars': 'off',
-      'no-undef': 'off',
-      '@typescript-eslint/no-unsafe-assignment': 'off',
-      '@typescript-eslint/prefer-nullish-coalescing': 'off',
-      '@typescript-eslint/prefer-optional-chain': 'off',
-      '@typescript-eslint/consistent-type-definitions': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/no-explicit-any': 'off',
+export default tseslint.config({
+  ignores: ['dist/**', 'node_modules/**', '.angular/**', 'storybook-static/**', '**/*.spec.ts'],
+}, {
+  files: ['eslint.config.js'],
+  languageOptions: {
+    parserOptions: {
+      projectService: null,
     },
   },
-  ...tseslint.configs.recommended,
-  {
-    files: ['src/**/*.ts'],
-    languageOptions: {
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-    rules: {
-      ...prettierConfig.rules,
-      '@typescript-eslint/no-explicit-any': 'error',
-      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-      '@typescript-eslint/prefer-nullish-coalescing': 'error',
-      '@typescript-eslint/prefer-optional-chain': 'error',
-      '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
-      '@typescript-eslint/no-non-null-assertion': 'warn',
-      'no-console': ['warn', { allow: ['warn', 'error'] }],
-      'prefer-const': 'error',
-      'no-var': 'error',
-      eqeqeq: ['error', 'always'],
-    },
+  rules: {
+    'no-unused-vars': 'off',
+    'no-undef': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/prefer-optional-chain': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
-  {
-    files: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
-    rules: {
-      '@typescript-eslint/no-non-null-assertion': 'off',
-      '@typescript-eslint/no-unsafe-assignment': 'off',
+}, ...tseslint.configs.recommended, {
+  files: ['src/**/*.ts'],
+  languageOptions: {
+    parserOptions: {
+      projectService: true,
+      tsconfigRootDir: import.meta.dirname,
     },
   },
-);
+  rules: {
+    ...prettierConfig.rules,
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/prefer-nullish-coalescing': 'error',
+    '@typescript-eslint/prefer-optional-chain': 'error',
+    '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
+    '@typescript-eslint/no-non-null-assertion': 'warn',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+    'prefer-const': 'error',
+    'no-var': 'error',
+    eqeqeq: ['error', 'always'],
+  },
+}, {
+  files: ['src/**/*.spec.ts', 'src/**/*.test.ts'],
+  rules: {
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+  },
+}, storybook.configs["flat/recommended"]);