Pisanie stories w CSF3
Eksportowanie domyślnego obiektu meta i nazwanych stories za pomocą Component Story Format 3.
Pisanie stories w CSF3 to bezpłatna lekcja React Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Czym jest CSF3
Component Story Format 3 (CSF3) to aktualny format stories w Storybooku. Stories są zwykłymi obiektami JavaScript/TypeScript — w prostych przypadkach nie wymagają funkcji renderującej.
Eksport Meta
Każdy plik story musi zawierać eksport domyślny — obiekt Meta — który opisuje komponent i ustawia wspólną konfigurację story.
import type { Meta } from '@storybook/react';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
title: 'UI/Button', // Storybook sidebar path
component: Button,
tags: ['autodocs'], // enables auto-generated docs page
};
export default meta;Eksporty nazwane stories
Każdy eksport nazwany z pliku jest story. W CSF3 story jest obiektem z właściwością args zawierającą propsy komponentu.
import type { StoryObj } from '@storybook/react';
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
args: { label: 'Click me', variant: 'primary' },
};
export const Secondary: Story = {
args: { label: 'Cancel', variant: 'secondary' },
};
export const Disabled: Story = {
args: { label: 'Unavailable', disabled: true },
};Dziedziczenie stories
Stories dziedziczą args z obiektu meta. Należy ustawić wspólne wartości domyślne w meta.args i w razie potrzeby nadpisywać je dla poszczególnych stories.
const meta: Meta<typeof Button> = {
component: Button,
args: {
onClick: fn(), // from @storybook/test
disabled: false,
},
};
export const Large: Story = {
args: { size: 'large', label: 'Large Button' }, // merges with meta args
};Nadpisywanie funkcji renderującej
W przypadku złożonych scenariuszy wymagających niestandardowego opakowania JSX lub wielu instancji należy udostępnić funkcję render w story.
export const WithIcon: Story = {
render: (args) => (
<div style={{ display: 'flex', gap: 8 }}>
<Button {...args} icon={<StarIcon />} />
<Button {...args} icon={<HeartIcon />} />
</div>
),
args: { label: 'Action' },
};Dekoratory dla pojedynczych stories
Należy dodać tablicę decorators do story, aby opakować ją w dodatkowe providery lub układ dotyczący tylko tej story.
export const InsideCard: Story = {
decorators: [
(Story) => (
<div style={{ padding: 24, background: '#f5f5f5' }}>
<Story />
</div>
),
],
args: { label: 'Card Button' },
};Parametry stories
Należy używać parameters do konfigurowania addonów dla poszczególnych stories — na przykład do ustawiania tła lub viewportu dla określonego stanu.
export const DarkMode: Story = {
parameters: {
backgrounds: { default: 'dark' },
},
args: { label: 'Dark Button', variant: 'primary' },
};Tag autodocs
Dodanie tags: ['autodocs'] do meta generuje automatyczną stronę dokumentacji z tabelą propsów i działającymi przykładami ze wszystkich nazwanych stories.
Story dla każdego stanu
Należy napisać story dla każdego istotnego stanu komponentu: pustego, ładowania, błędu, pojedynczego elementu, wielu elementów, układu RTL itd.
export const Loading: Story = { args: { isLoading: true } };
export const Error: Story = { args: { error: 'Failed to load' } };
export const Empty: Story = { args: { items: [] } };
export const WithData: Story = { args: { items: mockUsers } };Konwencje nazewnictwa
Należy używać nazw stories w PascalCase, które opisują stan. Należy unikać ogólnych nazw, takich jak Default — powinny być konkretne, na przykład PrimaryDisabled lub SecondaryWithIcon.
Grupowanie stories za pomocą title
Właściwość title w meta używa notacji z ukośnikiem do tworzenia zagnieżdżonych grup na pasku bocznym Storybooka: 'Forms/Input' tworzy grupę Forms z podgrupą Input.
const meta: Meta<typeof TextInput> = {
title: 'Forms/TextInput',
component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...Ponowne używanie stories w testach
Stories CSF3 są zwykłymi obiektami, dlatego można je importować i składać w testach jednostkowych lub innych stories.
import { Primary } from './Button.stories';
test('renders primary button', () => {
render(<Button {...Primary.args} />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});Szybkie sprawdzenie
Jak w CSF3 definiuje się propsy lub stan story?
Podsumowanie
Stories CSF3 są typowanymi obiektami z właściwością args. Należy ustawiać wspólne wartości domyślne w meta.args, nadpisywać je dla poszczególnych stories, używać render do niestandardowego JSX oraz dodawać tags: ['autodocs'], aby generować dokumentację automatycznie. Należy napisać story dla każdego istotnego stanu komponentu.
Ucz się React dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 88
- Lekcje
- 324
Często zadawane pytania
Czy lekcja „Pisanie stories w CSF3” jest bezpłatna?
Tak — pełny tekst „Pisanie stories w CSF3” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pisanie stories w CSF3”?
Eksportowanie domyślnego obiektu meta i nazwanych stories za pomocą Component Story Format 3. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Pisanie stories w CSF3”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja Storybook w projekcie React
- Pisanie stories w CSF3
- Args, Controls i dodatek Actions
- Testowanie w Storybook i regresja wizualna