test: added storybook, playwright and tests

.eslintrc.cjs

@@ -8,7 +8,8 @@ const config = {
 	extends: [
 		'plugin:@next/next/recommended',
 		'plugin:@typescript-eslint/recommended-type-checked',
-		'plugin:@typescript-eslint/stylistic-type-checked'
+		'plugin:@typescript-eslint/stylistic-type-checked',
+		'plugin:storybook/recommended'
 	],
 	rules: {
 		// These opinionated rules are enabled in stylistic-type-checked above.

.github/workflows/playwright-tests.yml

@@ -0,0 +1,23 @@
+name: Playwright Tests
+on: [push, pull_request]
+jobs:
+    test:
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '.nvmrc'
+            - name: Install dependencies
+              run: npm install -g pnpm && pnpm install
+            - name: Install Playwright Browsers
+              run: pnpm exec playwright install --with-deps
+            - name: Run Playwright tests
+              run: pnpm exec playwright test
+            - uses: actions/upload-artifact@v4
+              if: always()
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 30

.github/workflows/storybook-tests.yml

@@ -0,0 +1,22 @@
+name: Storybook Tests
+on: [push, pull_request]
+jobs:
+    test:
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version-file: '.nvmrc'
+            - name: Install dependencies
+              run: npm install -g pnpm && pnpm install
+            - name: Install Playwright Browsers
+              run: pnpm exec playwright install --with-deps
+            - name: Build Storybook
+              run: pnpm storybook:build --test --quiet
+            - name: Serve Storybook and run tests
+              run: |
+                  pnpx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+                    "pnpx http-server storybook-static --port 6006 --silent" \
+                    "pnpx wait-on tcp:6006 && pnpm storybook:test"

.gitignore

@@ -38,3 +38,7 @@ next-env.d.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# storyboook
+/storybook-static/
+*storybook.log

.storybook/constants.ts

@@ -0,0 +1,42 @@
+/**
+ * Tailwind CSS breakpoints.
+ *
+ * @see https://tailwindcss.com/docs/responsive-design
+ */
+export const TAILWIND_VIEWPORTS = {
+	sm: {
+		name: 'Small (sm)',
+		styles: {
+			width: '640px',
+			height: '100%'
+		}
+	},
+	md: {
+		name: 'Medium (md)',
+		styles: {
+			width: '768px',
+			height: '100%'
+		}
+	},
+	lg: {
+		name: 'Large (lg)',
+		styles: {
+			width: '1024px',
+			height: '100%'
+		}
+	},
+	xl: {
+		name: 'Extra Large (xl)',
+		styles: {
+			width: '1280px',
+			height: '100%'
+		}
+	},
+	'2xl': {
+		name: '2X Large (2xl)',
+		styles: {
+			width: '1536px',
+			height: '100%'
+		}
+	}
+} as const;

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+	stories: ['../src/components/**/*.stories.@(ts|tsx)'],
+	addons: [
+		'@storybook/addon-onboarding',
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@chromatic-com/storybook',
+		'@storybook/addon-interactions',
+		'storybook-addon-pseudo-states'
+	],
+	framework: {
+		name: '@storybook/nextjs',
+		options: {}
+	},
+	docs: {
+		autodocs: 'tag'
+	},
+	staticDirs: ['../public']
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<!-- in src/app/layout.tsx, the Inter font is loaded. With this preview-head.html file, the Inter font is applied to the Storybook preview. -->
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
+<style>
+    body {
+        font-family: "Inter", sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+</style>

.storybook/preview.ts

@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/react';
+
+import '~/styles/tailwind.css';
+import { TAILWIND_VIEWPORTS } from './constants';
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		},
+		viewport: {
+			viewports: TAILWIND_VIEWPORTS
+		}
+	}
+};
+
+export default preview;

package.json

@@ -10,27 +10,40 @@
     "lint": "next lint",
     "prepare": "husky install",
     "start": "next start",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:test": "test-storybook --browsers chromium firefox webkit",
     "test": "playwright test",
     "test:codegen": "playwright codegen",
     "test:debug": "playwright test --debug",
     "test:interactive": "playwright test --ui"
   },
   "dependencies": {
-    "@highlight-run/next": "^7.4.13",
+    "@highlight-run/next": "~7.4",
     "@t3-oss/env-nextjs": "~0.9",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "class-variance-authority": "~0.7",
+    "clsx": "~2.1",
     "next": "~14.2",
     "react": "~18.2",
     "react-dom": "~18.2",
-    "tailwind-merge": "^2.2.2",
+    "tailwind-merge": "~2.2",
     "zod": "~3.22"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "~1.3",
     "@commitlint/cli": "~19.2",
     "@commitlint/config-conventional": "~19.1",
     "@commitlint/types": "~19.0",
     "@playwright/test": "~1.43",
+    "@storybook/addon-essentials": "~8.0",
+    "@storybook/addon-interactions": "~8.0",
+    "@storybook/addon-links": "~8.0",
+    "@storybook/addon-onboarding": "~8.0",
+    "@storybook/blocks": "~8.0",
+    "@storybook/nextjs": "~8.0",
+    "@storybook/react": "~8.0",
+    "@storybook/test": "~8.0",
+    "@storybook/test-runner": "^0.17.0",
     "@types/eslint": "~8.56",
     "@types/lint-staged": "~13.3",
     "@types/node": "~20.12",
@@ -41,12 +54,15 @@
     "autoprefixer": "~10.4",
     "eslint": "~8.57",
     "eslint-config-next": "~14.2",
+    "eslint-plugin-storybook": "~0.8.0",
     "husky": "~9.0",
     "lint-staged": "~15.2",
     "postcss": "~8.4",
     "prettier": "~3.2",
     "prettier-plugin-organize-imports": "~3.2",
     "prettier-plugin-tailwindcss": "~0.5",
+    "storybook": "~8.0",
+    "storybook-addon-pseudo-states": "^3.0.1",
     "tailwindcss": "~3.4",
     "typescript": "~5.4"
   },

playwright.config.ts

@@ -10,7 +10,7 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-	testDir: './tests',
+	testMatch: '**/*.test.ts',
 	/* Run tests in files in parallel */
 	fullyParallel: true,
 	/* Fail the build on CI if you accidentally left test.only in the source code. */