storybook

client/.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+name: Chromatic
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+        working-directory: client
+      - uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: client

client/.gitignore

@@ -25,3 +25,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log
+storybook-static

client/.storybook/main.ts

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

client/.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from '@storybook/nextjs-vite'
+import '../app/globals.css'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

client/components/pages/subscriptions.tsx

@@ -479,7 +479,7 @@ interface SubscriptionCardProps {
   guide?: CancellationGuide
 }
 
-function SubscriptionCard({
+export function SubscriptionCard({
   subscription: sub,
   onDelete,
   onManage,

client/package.json

@@ -7,6 +7,9 @@
     "dev": "next dev",
     "lint": "eslint .",
     "start": "next start",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+    "validate-env": "node scripts/validate-env.js"
     "generate-pwa-icons": "node scripts/generate-pwa-icons.js",
     "generate-pwa-screenshot": "node scripts/generate-pwa-screenshot.js",
     "generate-pwa-assets": "npm run generate-pwa-icons && npm run generate-pwa-screenshot"
@@ -79,6 +82,18 @@
     "sharp": "^0.34.5",
     "tailwindcss": "^4.1.9",
     "tw-animate-css": "1.3.3",
-    "typescript": "^5"
+    "typescript": "^5",
+    "storybook": "^10.3.3",
+    "@storybook/nextjs-vite": "^10.3.3",
+    "@chromatic-com/storybook": "^5.0.2",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "vite": "^8.0.2",
+    "vitest": "^4.1.1",
+    "playwright": "^1.58.2",
+    "@vitest/browser-playwright": "^4.1.1",
+    "@vitest/coverage-v8": "^4.1.1"
   }
 }