Storybook

Documentație vizuală a componentelor UI în izolare, cu Storybook 9 și integrare Nuxt.

Stack

• Storybook 9 (~9.0.5)
• @nuxtjs/storybook + @storybook-vue/nuxt
• Addons: @storybook/addon-docs, @storybook/addon-links
• Autodocs via tag autodocs

Configurare

• .storybook/main.ts — stories din components/**/*.stories.ts
• .storybook/preview.ts — decorator cu bg-surface-page, data-color-scheme="paper"
• Nuxt module: storybook.enabled: false — rulează standalone, nu în dev Nuxt

Comenzi

npm run storybook        # Dev server port 6006
npm run build-storybook   # Static build → storybook-static/

Convenții stories

• Colocate: Component.vue + Component.stories.ts
• CSF3 cu satisfies Meta<typeof Component>
• Ierarhie titluri: UI/…, Carousel/…, etc.
• Acoperă: Default, stări edge (loading, empty, disabled), Interactive când e cazul

Stories existente

• DS: DsBanner, DsEmpty, DsFleuron, DsSheet, DsTabs
• UI: PoetryCard, TagBadge, AppNav, PaginationNav, Alert
• Buttons, ColorSchemeSwitch, CloseButton

Workflow

1. Pornește Nuxt: npm run dev (port 3000)
2. Pornește Storybook: npm run storybook (port 6006)
3. Storybook proxy-uiește asset-uri Nuxt pentru context complet