Storybook 8 i Component-Driven Development

Co to jest Storybook 8 i co nowego wprowadza?

Storybook 8 (2024): major release z nowymi funkcjami. Component Driven Development (CDD) — buduj UI izolowanie. Nowe w v8: Vitest addon — testy w Storybook. First-class Vite support. Improved RSC support. Visual tests integracja. Snappy dev server. Instalacja: npx storybook@latest init. Automatyczna detekcja frameworka. Konfiguracja Vite + React: .storybook/main.ts. framework: '@storybook/react-vite'. addons: ['@storybook/addon-essentials']. Vite config — używa vite.config.ts. CSF 3 (Component Story Format 3): import type {Meta, StoryObj} from '@storybook/react'. const meta = {component: Button, title: 'UI/Button'} satisfies Meta(typeof Button). export default meta. type Story = StoryObj(typeof meta). export const Primary: Story = {args: {label: 'Click me', variant: 'primary'}}. args — reusable, composable. Brak template — args wystarczy. Dekoartory: decorators: [(Story) => div style={{padding: '1rem'}} Story() /div]. Global decorators w preview.tsx. Parameters: parameters: {backgrounds: {default: 'dark'}}. layout: 'centered'. viewport. a11y: wyłącz/włącz. Play functions (interaction testing): play: async ({canvasElement}) => { const canvas = within(canvasElement). await userEvent.click(canvas.getByRole('button')). await expect(canvas.getByText('Clicked!')).toBeInTheDocument() }. Automatyczne testy w Storybook UI. Run tests w CI bez browser.

Storybook addons — essentials, a11y, interactions i visual tests?

@storybook/addon-essentials: paczka głównych addonów. Controls — args editing w UI. Actions — event logging. Viewport — device sizes. Backgrounds — background colors. Docs — auto-generated docs. Outline — layout debugging. Toolbars & Globals. @storybook/addon-a11y: accessibility testing. axe-core pod spodem. A11y panel w Storybook. Violations, incomplete, passes. Automatycznie dla każdej stories. Integracja z play functions. @storybook/addon-interactions: visual debugger dla play functions. Step przez step. Pause, rewind. Timeline UI. Krok debugowania jak DevTools. @storybook/test (Vitest integration): run stories jako Vitest tests. Portable stories — stories w Vitest. import {composeStories} from '@storybook/react'. const {Primary} = composeStories(stories). renderStory(Primary) — w Vitest. Visual regression z Chromatic: npm install chromatic. npx chromatic --project-token=xxx. Upload Storybook. Pixel-by-pixel comparison. PR checks. Automatyczna detekcja zmian UI. Storybook Test Runner: npm install @storybook/test-runner. npx test-storybook. Uruchamia play functions w Playwright. Headless CI. Snapshot testing: @storybook/addon-storyshots (legacy). Teraz: Vitest snapshot + portable stories. @storybook/addon-themes: dark/light mode toggle. Theme switching w UI. Integration z ThemeProvider. MSW addon: msw-storybook-addon. Mockowanie API w Storybook. initialize(worker) w preview.ts. handlers per story.

Storybook — autodocs i dokumentacja komponentów?

Autodocs: automatyczna dokumentacja z TypeScript. tags: ['autodocs'] w meta. Generuje Docs page ze stories. Props table z TypeScript inference. JSDoc komentarze = opisy props. Argstypes: argTypes: {variant: {control: 'select', options: ['primary', 'secondary']}. description: 'Visual style'. table: {defaultValue: {summary: 'primary'}}}. Kontrolki UI dla props. Dokumentacja składni: JSDoc: /** @param variant - Visual style of button */. TypeScript interface — auto-parse. Storybook rozumie PropTypes (legacy). MDX docs: Button.mdx: import {Canvas, Story, Controls} from '@storybook/blocks'. Mieszaj prose z stories. # Button. Canvas story='Primary'. Controls. Stories hierarchy: title: 'Components/Forms/Button' — grupy. Brak title = auto-naming (CSF 3). Folder structure = hierarchy. Docs tylko mode: npm run storybook -- --docs. Tylko docs mode, nie dev. Deploy: npm run build-storybook. Statyczny HTML. Chromatic hosting. GitHub Pages. Storybook native dark mode: @storybook/addon-themes. ThemeProvider wrapper. useGlobals hook. Iframe isolation: każda story w iframe. Brak global CSS leak. CSS modules automatyczne. Storybook + TypeScript strict: tsconfig storybook. Extends główny tsconfig. JSX: 'react-jsx'. Strict: true. Storybook 8 performance: Lazy story loading. Vite HMR — szybkie przeładowanie. Leniwy bundle. Dev server szybki start.

Component-Driven Development (CDD) — metodologia?

Component-Driven Development: buduj od dołu do góry. Atoms -> Molecules -> Organisms -> Pages. Brad Frost Atomic Design. Izolacja komponentów: brak kontekstu aplikacji. Tylko props i state. Mocking external dependencies. Story-first approach: zanim feature — story. Edge cases jako stories. Loading states. Error states. Empty states. Success states. Design tokens: Figma tokens + Storybook. @storybook/addon-design — Figma embed w Storybook. Token z design system. CSS custom properties. Design System workflow: Figma -> Tokens -> Storybook. Chromatic dla visual review. Projektant + developer workflow. Storybook jako living documentation: zawsze aktualne (z kodem). Single source of truth. Onboarding nowych devów. Nie PowerPoint — kod. Wspólny language z designem. Testing pyramid w CDD: Component unit tests (Vitest). Component integration (play functions). E2E (Playwright) — rzadko per component. Visual regression (Chromatic). CI workflow: build Storybook -> test-storybook (play functions) -> Chromatic (visual). Storybook z Next.js App Router: @storybook/nextjs framework. next/image, next/font, next/navigation mocked. RSC support (preview). Experimental RSC mode. Storybook + Tailwind: postcss configuration. Full Tailwind support. cn() utility. Dark mode class. viewport breakpoints. Composite stories: spread args z innych stories. const Disabled: Story = {args: {...Primary.args, disabled: true}}. Reuse bez powtarzania.

Storybook w Next.js, monorepo i design system?

Storybook w Next.js: @storybook/nextjs. Automatyczna konfiguracja. next/image — lokalny provider. next/link — in-memory router. useRouter mock. next/font — self-hosted. next/navigation — mock. Importy @/ — aliasy jak w aplikacji. Monorepo (Turborepo/Nx): packages/ui — component library. apps/web — main app. apps/storybook — lub w packages/ui. .storybook/main.ts stories: ['../packages/ui/src/**/*.stories.tsx']. Shared design tokens. Storybook Composition: combineConfigs — merge multiple Storybook instances. Micro-frontend Storybooks. Jeden root Storybook. Design System package: packages/design-system. Button, Input, Card, Modal. TypeScript + Storybook. Publish do npm lub GitHub Packages. Chromatic Design System mode. Accessibility workflow: Run @storybook/addon-a11y na każdej PR. Fix violations. WCAG 2.1 AA baseline. Color contrast checks. Focus management stories. Screen reader stories. Keyboard navigation stories. Storybook Figma integration: @storybook/addon-designs. Figma embed w addon panel. Link Figma frame per story. Design-to-code comparison. Token pipeline: Figma Tokens plugin -> tokens.json -> CSS vars -> Storybook. Versioning design system: Chromatic snapshot history. Storybook changelog. Storybook jako E2E target: Playwright navigate do Storybook URL. Test rendered stories. Dobra izolacja. Szybsze niż full app. Continuous deployment Storybook: GitHub Actions -> Chromatic. PR status check. Design review step.

Wyślij zapytanie