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:
37
apps/app/src/stories/PrimeVueSmoke.stories.ts
Normal file
37
apps/app/src/stories/PrimeVueSmoke.stories.ts
Normal 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',
|
||||
},
|
||||
}
|
||||
18
apps/app/src/stories/TailwindSmoke.stories.ts
Normal file
18
apps/app/src/stories/TailwindSmoke.stories.ts
Normal 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 = {}
|
||||
Reference in New Issue
Block a user