chore: add Storybook 10 setup with PrimeVue + Tailwind integration

Installs Storybook 10.4 in apps/app/ as a component-development and
autodoc tool. Configures viteFinal with all seven SPA aliases so
stories resolve imports identically to the dev/build pipeline.
preview.ts reuses @/plugins/primevue's installPrimeVue() so Storybook
stays in lock-step with main.ts whenever the PrimeVue config changes.

Only the addons we need are wired: addon-docs (autodocs) and
addon-a11y (axe-core checks). addon-interactions is intentionally
omitted — interaction testing stays in Playwright CT per the testing
architecture.

Seed stories: PrimeVue Button (Primary/Secondary/Danger), Tailwind
utility box, and FormField (Default/WithError/Disabled) wrapped in
@primevue/forms Form + Zod resolver.

Adds make storybook target alongside make app / make docs.

.gitignore

@@ -81,3 +81,6 @@ backups/
 # from dist/ before deploy. Defensive exclusion in case dist/ is ever
 # committed by mistake (it's already covered by `dist/` above).
 apps/app/dist/**/*.map
+
+*storybook.log
+storybook-static

Makefile

@@ -1,4 +1,4 @@
-.PHONY: help services services-stop services-glitchtip-status api app docs migrate fresh db-shell test test-db-create schema-dump
+.PHONY: help services services-stop services-glitchtip-status api app docs migrate fresh db-shell test test-db-create schema-dump storybook
 
 # Colors
 GREEN  := \033[0;32m
@@ -25,6 +25,7 @@ help:
 	@echo "    make api              Laravel API        → http://localhost:8000"
 	@echo "    make app              Organizer SPA      → http://localhost:5174"
 	@echo "    make docs             VitePress docs     → http://localhost:5176"
+	@echo "    make storybook        Storybook (apps/app) → http://localhost:6006"
 	@echo ""
 	@echo "  $(YELLOW)Database:$(NC)"
 	@echo "    make migrate          Run migrations"
@@ -102,3 +103,7 @@ schema-dump: test-db-create
 	@echo "$(GREEN)Regenerating api/database/schema/mysql-schema.sql...$(NC)"
 	@cd api && DB_DATABASE=crewli_test php artisan schema:dump --database=mysql
 	@echo "$(YELLOW)Note: Commit the updated schema dump alongside any new migrations.$(NC)"
+
+storybook:
+	@echo "$(GREEN)Starting Storybook → http://localhost:6006$(NC)"
+	@cd apps/app && pnpm storybook

apps/app/.storybook/main.ts

@@ -0,0 +1,31 @@
+import { fileURLToPath } from 'node:url'
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  framework: '@storybook/vue3-vite',
+  stories: ['../src/**/*.stories.ts'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+  ],
+  viteFinal: async (storybookViteConfig) => {
+    return mergeConfig(storybookViteConfig, {
+      resolve: {
+        alias: {
+          '@': fileURLToPath(new URL('../src', import.meta.url)),
+          '@themeConfig': fileURLToPath(new URL('../themeConfig.ts', import.meta.url)),
+          '@core': fileURLToPath(new URL('../src/@core', import.meta.url)),
+          '@layouts': fileURLToPath(new URL('../src/@layouts', import.meta.url)),
+          '@images': fileURLToPath(new URL('../src/assets/images/', import.meta.url)),
+          '@styles': fileURLToPath(new URL('../src/assets/styles/', import.meta.url)),
+          '@configured-variables': fileURLToPath(
+            new URL('../src/assets/styles/variables/_template.scss', import.meta.url),
+          ),
+        },
+      },
+    })
+  },
+}
+
+export default config

apps/app/.storybook/preview.ts

@@ -0,0 +1,29 @@
+import type { Preview } from '@storybook/vue3-vite'
+import { setup } from '@storybook/vue3-vite'
+
+import installPrimeVue from '../src/plugins/primevue'
+
+import '../src/assets/styles/tailwind.css'
+
+setup((app) => {
+  installPrimeVue(app)
+})
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: true,
+    },
+    a11y: {
+      test: 'todo',
+    },
+  },
+}
+
+export default preview

apps/app/package.json

@@ -18,7 +18,9 @@
     "test:component": "playwright test --config=playwright-ct.config.ts",
     "test:e2e": "playwright test --config=playwright.config.ts",
     "test:visual": "playwright test --config=playwright-ct.config.ts --grep @visual",
-    "test:visual:update": "playwright test --config=playwright-ct.config.ts --grep @visual --update-snapshots"
+    "test:visual:update": "playwright test --config=playwright-ct.config.ts --grep @visual --update-snapshots",
+    "storybook": "storybook dev --port 6006",
+    "build-storybook": "storybook build --output-dir storybook-static"
   },
   "dependencies": {
     "@casl/ability": "6.7.3",
@@ -96,6 +98,9 @@
     "@pinia/testing": "^1.0.3",
     "@playwright/experimental-ct-vue": "^1.59.1",
     "@playwright/test": "^1.59.1",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/vue3-vite": "^10.4.0",
     "@stylistic/eslint-plugin-js": "0.0.4",
     "@stylistic/eslint-plugin-ts": "0.0.4",
     "@stylistic/stylelint-config": "1.0.1",
@@ -150,6 +155,7 @@
     "postcss-scss": "4.0.9",
     "sass": "1.76.0",
     "shiki": "1.29.2",
+    "storybook": "^10.4.0",
     "stylelint": "16.8.0",
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-config-standard-scss": "13.1.0",
@@ -182,4 +188,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

apps/app/src/components/forms/FormField.stories.ts

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Form } from '@primevue/forms'
+import InputText from 'primevue/inputtext'
+import { h } from 'vue'
+import { z } from 'zod'
+import FormField from './FormField.vue'
+
+const emailSchema = z.object({
+  email: z.string().email('Ongeldig e-mailadres'),
+})
+
+function zodResolver(schema: typeof emailSchema) {
+  return ({ values }: { values: Record<string, unknown> }) => {
+    const result = schema.safeParse(values)
+    if (result.success)
+      return { values: result.data, errors: {} }
+    const errors: Record<string, { message: string }[]> = {}
+    for (const issue of result.error.issues) {
+      const key = String(issue.path[0])
+      errors[key] = [{ message: issue.message }]
+    }
+    return { values: {}, errors }
+  }
+}
+
+const meta: Meta<typeof FormField> = {
+  title: 'Forms/FormField',
+  component: FormField,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof FormField>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Form, FormField, InputText },
+    setup() {
+      return { args, resolver: zodResolver(emailSchema) }
+    },
+    template: `
+      <Form :resolver="resolver" :initialValues="{ email: '' }" class="max-w-sm">
+        <FormField v-bind="args">
+          <InputText name="email" placeholder="naam@voorbeeld.nl" class="w-full" />
+        </FormField>
+      </Form>
+    `,
+  }),
+  args: {
+    name: 'email',
+    label: 'E-mailadres',
+    required: true,
+  },
+}
+
+export const WithError: Story = {
+  render: (args) => ({
+    components: { Form, FormField, InputText },
+    setup() {
+      return { args, resolver: zodResolver(emailSchema) }
+    },
+    template: `
+      <Form :resolver="resolver" :initialValues="{ email: '' }" class="max-w-sm">
+        <FormField v-bind="args">
+          <InputText name="email" placeholder="naam@voorbeeld.nl" class="w-full" />
+        </FormField>
+      </Form>
+    `,
+  }),
+  args: {
+    name: 'email',
+    label: 'E-mailadres',
+    required: true,
+    apiError: 'Dit e-mailadres is al in gebruik.',
+  },
+}
+
+export const Disabled: Story = {
+  render: (args) => ({
+    components: { Form, FormField, InputText },
+    setup() {
+      return { args, resolver: zodResolver(emailSchema) }
+    },
+    template: `
+      <Form :resolver="resolver" :initialValues="{ email: 'vast@voorbeeld.nl' }" class="max-w-sm">
+        <FormField v-bind="args">
+          <InputText name="email" disabled class="w-full" />
+        </FormField>
+      </Form>
+    `,
+  }),
+  args: {
+    name: 'email',
+    label: 'E-mailadres',
+    hint: 'Dit veld kan niet gewijzigd worden.',
+  },
+}

apps/app/src/stories/PrimeVueSmoke.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Button from 'primevue/button'
+
+const meta: Meta = {
+  title: 'Smoke/PrimeVue Button',
+  tags: ['autodocs'],
+  render: (args) => ({
+    components: { Button },
+    setup() {
+      return { args }
+    },
+    template: '<Button v-bind="args" />',
+  }),
+}
+
+export default meta
+type Story = StoryObj
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary',
+    severity: 'secondary',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    label: 'Danger',
+    severity: 'danger',
+  },
+}

apps/app/src/stories/TailwindSmoke.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta: Meta = {
+  title: 'Smoke/Tailwind',
+  tags: ['autodocs'],
+  render: () => ({
+    template: `
+      <div class="flex gap-4 p-6 bg-primary-50 rounded-xl">
+        <span class="text-primary-700 font-semibold">Tailwind v4 utility classes render</span>
+      </div>
+    `,
+  }),
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {}