Add contract templates and onboarding functionality

.github/workflows/chromatic.yml

@@ -0,0 +1,57 @@
+name: Chromatic
+
+on:
+  pull_request:
+    branches: ['**']
+  push:
+    branches: ['main']
+
+jobs:
+  chromatic:
+    name: Visual Regression Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Required for Chromatic to detect changes
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.24.0
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Initialize MSW
+        run: pnpm msw init public --save=false
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: build-storybook
+          onlyChanged: true
+          autoAcceptChanges: main
+          exitOnceUploaded: true

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,81 @@
+name: Deploy Storybook
+
+on:
+  push:
+    branches: ['main']
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: Build Storybook
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.24.0
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Initialize MSW
+        run: pnpm msw init public --save=false
+
+      - name: Build Storybook
+        run: pnpm build-storybook
+
+      - name: Add CNAME file
+        run: echo "design.cloudnativedays.no" > storybook-static/CNAME
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: storybook-static
+
+  deploy:
+    name: Deploy to GitHub Pages
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/pr-checks.yml

@@ -92,6 +92,50 @@ jobs:
       - name: Run tests
         run: pnpm run test
 
+  storybook:
+    name: Storybook Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.24.0
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Initialize MSW
+        run: pnpm msw init public --save=false
+
+      - name: Run Storybook tests
+        run: pnpm run storybook:test-ci
+
   build:
     name: Build
     runs-on: ubuntu-latest

.gitignore

@@ -38,3 +38,9 @@ dist/
 
 # backups
 *.tar.gz
+storybook-static/*
+
+# msw
+public/mockServiceWorker.js
+# storybook local env
+.storybook/.env

.storybook/.env.example

@@ -0,0 +1,20 @@
+# Storybook Environment Variables (Example Template)
+# ---------------------------------------------------------------------------
+# This file is an example/template only. Do NOT put real secrets or production
+# configuration in this committed file.
+#
+# Recommended usage:
+#   1. Copy this file to `.storybook/.env` (which should be gitignored).
+#   2. Replace the example values in that copy with your real local values.
+#
+# The variables below are commented out so this example file does not define
+# any active environment variables when loaded.
+# ---------------------------------------------------------------------------
+
+# Sanity CMS
+# NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
+# NEXT_PUBLIC_SANITY_DATASET=production
+# NEXT_PUBLIC_SANITY_API_VERSION=2024-01-01
+
+# Base URL for stories
+# NEXT_PUBLIC_BASE_URL=http://localhost:6006

.storybook/decorators/TRPCDecorator.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { httpBatchLink } from '@trpc/client'
+import { api } from '@/lib/trpc/client'
+import type { Decorator } from '@storybook/nextjs-vite'
+
+// Create these outside the decorator to avoid recreating on every render
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+      staleTime: Infinity,
+    },
+  },
+})
+
+const trpcClient = api.createClient({
+  links: [
+    httpBatchLink({
+      url: '/api/trpc',
+      // MSW will intercept these requests (relative URL for cross-origin compatibility)
+    }),
+  ],
+})
+
+export const TRPCDecorator: Decorator = (Story) => {
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    </api.Provider>
+  )
+}

.storybook/main.ts

@@ -0,0 +1,36 @@
+import type { StorybookConfig } from '@storybook/nextjs-vite'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/nextjs-vite',
+    options: {
+      nextConfigPath: join(__dirname, '../next.config.ts'),
+    },
+  },
+  staticDirs: ['../public'],
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {},
+  features: {
+    sidebarOnboardingChecklist: false,
+  },
+}
+
+export default config

.storybook/preview-head.html

@@ -0,0 +1,19 @@
+<!-- Load Google Fonts for Storybook -->
+<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=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+  rel="stylesheet"
+/>
+
+<style>
+  :root {
+    --font-inter: 'Inter', sans-serif;
+    --font-jetbrains: 'JetBrains Mono', monospace;
+    --font-space-grotesk: 'Space Grotesk', sans-serif;
+    --font-ibm-plex-sans: 'IBM Plex Sans', sans-serif;
+    --font-ibm-plex-mono: 'IBM Plex Mono', monospace;
+    --font-bricolage: 'Bricolage Grotesque', sans-serif;
+    --font-atkinson: 'Atkinson Hyperlegible', sans-serif;
+  }
+</style>