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.
2026-05-14 11:50:21 +02:00
parent e36f57b8e1
commit ebb8e3bcf6
9 changed files with 1489 additions and 6 deletions
--- a/apps/app/src/components/forms/FormField.stories.ts
+++ b/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.',
+  },
+}