Frontend Academy · leksjon

Storybook: Stories, Controls og Docs

Skriv stories for hver komponenttilstand, bruk Controls til å justere props interaktivt, og generer Docs-sider fra JSDoc og argTypes.

Leksjon 1 av 414 trinn

Storybook: Stories, Controls og Docs er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er Storybook?

Storybook er en arbeidsbenk for UI-komponenter, isolert fra appen din. Du skriver «stories» — eksempler på bruk av hver komponent i ulike tilstander — og blar gjennom dem i en utviklingsserver. Uunnværlig for designsystemer.

Hvorfor bruke Storybook?

1) Utvikle komponenter isolert uten å sette opp en appkontekst. 2) Gå visuelt gjennom alle tilstander (lasting, feil, tom). 3) Designere og produkteiere kan bla gjennom katalogen. 4) Genererer dokumentasjon. 5) Automatiserer visuell regresjonstesting.

Installere Storybook

Bruk den offisielle initialisereren — den oppdager rammeverket ditt 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

Skrive en story (CSF 3.0)

Component Story Format 3: default export = metadata, named exports = 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 per komponent

Én story for hver viktig tilstand: standard, hover, lasting, feil, tom og utfylt. De som gjennomgår koden, kan klikke seg gjennom og se alle variantene med et øyekast.

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 } };

Kontroller (Args-tabell)

Storybooks Controls-tillegg gjør args-objektet om til interaktive skjemakontroller. Juster prop-verdier direkte i brukergrensesnittet for å teste spesialtilfeller.

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

Actions-tillegget

Bruk action() til å logge kall til event handlers i Actions-panelet. Det er utmerket for å teste callback-funksjoner uten å koble til faktisk tilstand.

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

Autodocs — automatisk generert dokumentasjon

Legg til tags: ['autodocs'] i metadataene; Storybook genererer en Docs-side med komponentens prop-tabell, beskrivelser og gjengivbare eksempler.

MDX for omfattende dokumentasjon

Skriv komponentdokumentasjon i MDX — Markdown pluss innebygd JSX. Bland brødtekst med eksempler på komponenter i sanntid.

{/* 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 — pakk stories inn med kontekst

Pakk stories inn i providers (Theme, Router, Redux) ved hjelp av dekoratorer.

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

Visuell regresjonstesting

Chromatic (fra Storybook-teamet) tar et skjermbilde av hver story ved hver commit og sammenligner det med referanseversjonen. Oppdager visuelle regresjoner automatisk.

Distribuere Storybook

npm run build-storybook produserer et statisk nettsted i storybook-static/. Distribuer det til Netlify, Vercel eller GitHub Pages — da får ikke-utviklere en katalog over komponentene som de kan bla gjennom.

Kort sjekk

Hva gjør det å legge til tags: ['autodocs'] i Storybook-metadataene til en komponent?

Besvar den i den interaktive leksjonen

Oppsummering: Storybook

Isolert arbeidsbenk for UI-komponenter. CSF 3.0: default export = meta, named exports = stories. argTypes for Controls. action() for logging av callbacks. tags: ['autodocs'] for automatisk generert dokumentasjon. MDX for omfattende brødtekst + JSX. Dekoratorer injiserer providers. Chromatic for visuell regresjon. Build-storybook for statisk hosting.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Storybook: Stories, Controls og Docs» gratis?

Ja – hele teksten i «Storybook: Stories, Controls og Docs» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Storybook: Stories, Controls og Docs»?

Skriv stories for hver komponenttilstand, bruk Controls til å justere props interaktivt, og generer Docs-sider fra JSDoc og argTypes. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Storybook: Stories, Controls og Docs»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy