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.
This commit is contained in:
2026-05-14 11:50:21 +02:00
parent e36f57b8e1
commit ebb8e3bcf6
9 changed files with 1489 additions and 6 deletions

View File

@@ -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',
},
}

View File

@@ -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 = {}