Frontend Academy · Lektion

Storybook: Stories, Controls og Docs

Skriv stories for hver komponenttilstand, brug Controls til interaktiv justering af props, og generér Docs-sider fra JSDoc og argTypes.

Lektion 1 af 414 trin

Storybook: Stories, Controls og Docs er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er Storybook?

Storybook er et arbejdsområde til UI-komponenter, isoleret fra din app. Du skriver »stories« — eksempler på brug af hver komponent i forskellige tilstande — og gennemser dem på en udviklingsserver. Det er uundværligt til designsystemer.

Hvorfor bruge Storybook?

1) Udvikl komponenter isoleret uden at opsætte en appkontekst. 2) Gennemgå alle tilstande visuelt (indlæsning, fejl og tom). 3) Designere og produktansvarlige kan gennemse kataloget. 4) Generér dokumentation. 5) Automatisér visuel regressionstest.

Installation af Storybook

Brug det officielle initialiseringsværktøj — det registrerer dit framework og konfigurerer alt.

npx storybook@latest init

# Adds:
#  .storybook/        config
#  src/stories/       example stories
#  scripts: 'storybook' and 'build-storybook'

npm run storybook   # opens http://localhost:6006

Skriv en story (CSF 3.0)

Component Story Format 3: default export = metadata, navngivne eksporter = stories.

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Atoms/Button',
  component: Button,
  tags: ['autodocs']
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: { label: 'Save', variant: 'primary' }
};

export const Disabled: Story = {
  args: { label: 'Save', variant: 'primary', disabled: true }
};

Flere stories pr. komponent

Opret én story for hver vigtig tilstand: standard, hover, indlæsning, fejl, tom og udfyldt. Anmeldere kan klikke sig gennem dem og se alle variationer på én gang.

export const Loading: Story = { args: { state: 'loading' } };
export const Error: Story    = { args: { state: 'error', message: 'Network failed' } };
export const Empty: Story    = { args: { items: [] } };
export const Populated: Story = { args: { items: mockItems } };

Controls (Args-tabel)

Storybooks Controls-tilføjelse omdanner args-objektet til interaktive formularkontroller. Justér prop-værdier direkte i brugergrænsefladen for at teste grænsetilfælde.

const meta: Meta<typeof Button> = {
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger']
    },
    onClick: { action: 'clicked' }
  }
};

Actions-tilføjelsen

Brug action() til at logge kald til event handlers i Actions-panelet. Det er ideelt til at teste callbacks uden at forbinde en reel tilstand.

argTypes: {
  onClick: { action: 'clicked' },
  onChange: { action: 'changed' }
}

Autodocs — automatisk genereret dokumentation

Føj tags: ['autodocs'] til metadataene; Storybook genererer en Docs-side med komponentens prop-tabel, beskrivelser og eksempler, der kan gengives.

MDX til fyldestgørende dokumentation

Skriv komponentdokumentation i MDX — Markdown plus indlejret JSX. Bland brødtekst med levende komponenteksempler.

{/* Button.mdx */}
import { Meta, Story, Canvas } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';

<Meta of={ButtonStories} />

# Button

The primary action element.

## Variants
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.Secondary} />

Dekoratorer — omslut stories med kontekst

Omslut stories med providers (Theme, Router og Redux) ved hjælp af dekoratorer.

export const decorators = [
  (Story) => (
    <ThemeProvider theme={lightTheme}>
      <Story />
    </ThemeProvider>
  )
];

Visuel regressionstest

Chromatic (fra Storybook-teamet) tager et skærmbillede af hver story ved hver commit og sammenligner det med referenceversionen. Opdager automatisk visuelle regressioner.

Udrulning af Storybook

npm run build-storybook producerer et statisk websted i storybook-static/. Udrul det på Netlify, Vercel eller GitHub Pages — så får personer uden udviklerbaggrund et komponentkatalog, de kan gennemse.

Hurtigt tjek

Hvad gør det ved Storybooks metadata for en komponent at tilføje tags: ['autodocs']?

Besvar den i den interaktive lektion

Opsamling: Storybook

Isoleret arbejdsområde til UI-komponenter. CSF 3.0: default export = metadata, navngivne eksporter = stories. argTypes til Controls. action() til logning af callbacks. tags: ['autodocs'] til automatisk genereret dokumentation. MDX til fyldestgørende brødtekst og JSX. Dekoratorer tilføjer providers. Chromatic til visuel regression. Build-storybook til statisk hosting.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Storybook: Stories, Controls og Docs” gratis?

Ja — hele teksten til “Storybook: Stories, Controls og Docs” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Storybook: Stories, Controls og Docs”?

Skriv stories for hver komponenttilstand, brug Controls til interaktiv justering af props, og generér Docs-sider fra JSDoc og argTypes. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Storybook: Stories, Controls og Docs”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy