Add Storybook

.github/workflows/test.yml → .github/workflows/codecov-coverage.yml

@@ -3,7 +3,6 @@ name: Run tests and upload coverage
 on:
     push:
         branches:
-            - develop
             - test
     pull_request:
         branches:
@@ -37,10 +36,14 @@ jobs:
             - name: Install dependencies
               run: pnpm install
 
-            - name: Run tests
+            - name: Run tests with coverage
               run: pnpm vitest run --coverage
 
-            - name: Upload results to Codecov
+            - name: Upload coverage to Codecov
               uses: codecov/codecov-action@v5
               with:
+                  working-directory: ../..
+                  files: coverage/apps-web/lcov.info
+                  fail_ci_if_error: false
+                  verbose: true
                   token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/codecov-test.yml

@@ -0,0 +1,56 @@
+name: Codecov Test Results
+
+on:
+    push:
+        branches:
+            - test
+    pull_request:
+        branches:
+            - develop
+            - staging
+    workflow_dispatch:
+
+jobs:
+    test:
+        name: Run tests and upload results to Codecov
+        runs-on: ubuntu-latest
+
+        defaults:
+            run:
+                working-directory: apps/web
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 2
+
+            - name: Set up Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+
+            - name: Install dependencies
+              run: pnpm install
+
+            - name: Run tests with coverage and junit output
+              run: pnpm vitest run --coverage --reporter=junit --outputFile=test-report.junit.xml
+
+            - name: Upload coverage to Codecov
+              uses: codecov/codecov-action@v5
+              with:
+                  working-directory: ../..
+                  files: coverage/apps-web/lcov.info
+                  fail_ci_if_error: false
+                  verbose: true
+                  token: ${{ secrets.CODECOV_TOKEN }}
+
+            - name: Upload test results to Codecov
+              if: ${{ !cancelled() }}
+              uses: codecov/test-results-action@v1
+              with:
+                  token: ${{ secrets.CODECOV_TOKEN }}
+                  working-directory: apps/web

.gitignore

@@ -43,3 +43,7 @@ next-env.d.ts
 
 # apps/web
 apps/web/.env.sentry-build-plugin
+apps/web/*.xml
+
+*storybook.log
+storybook-static

apps/web/.env.example

@@ -13,3 +13,4 @@ VITE_API_TIMEOUT=30000
 
 
 SENTRY_AUTH_TOKEN=
+CODECOV_TOKEN=

apps/web/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+import { dirname } from 'path'
+
+import { fileURLToPath } from 'url'
+
+/**
+ * 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(fileURLToPath(import.meta.resolve(`${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/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react-vite'
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+}
+
+export default preview

apps/web/eslint.config.js

@@ -1,4 +1,6 @@
-import { config } from "@workspace/eslint-config/react-internal"
-
-/** @type {import("eslint").Linter.Config} */
-export default config
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+
+import { config } from '@workspace/eslint-config/react-internal'
+
+/** @type {import("eslint").Linter.Config} */
+export default config

apps/web/package.json

@@ -6,7 +6,9 @@
         "dev": "vite",
         "build": "vite build && tsc --noEmit",
         "serve": "vite preview",
-        "start": "vite"
+        "start": "vite",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "@hookform/resolvers": "^5.2.2",
@@ -45,14 +47,28 @@
         "zod": "^4.1.12"
     },
     "devDependencies": {
+        "@chromatic-com/storybook": "^4.1.3",
+        "@codecov/vite-plugin": "^1.9.1",
+        "@storybook/addon-a11y": "^10.0.8",
+        "@storybook/addon-docs": "^10.0.8",
+        "@storybook/addon-vitest": "^10.0.8",
+        "@storybook/react-vite": "^10.0.8",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/js-cookie": "^3.0.6",
         "@types/node": "^24.10.0",
         "@types/react": "^19.1.9",
         "@types/react-dom": "^19.1.7",
         "@vitejs/plugin-react": "^4.3.4",
+        "@vitest/browser-playwright": "4.0.14",
         "@vitest/coverage-v8": "^4.0.14",
         "@workspace/eslint-config": "workspace:^",
         "@workspace/typescript-config": "workspace:*",
+        "eslint-plugin-storybook": "^10.0.8",
+        "jsdom": "^27.2.0",
+        "playwright": "^1.57.0",
+        "storybook": "^10.0.8",
         "typescript": "^5.9.2",
         "vite": "^7.1.7",
         "vitest": "^4.0.14"