Scrittura di storie CSF3
Esporti un oggetto meta predefinito e storie nominate utilizzando il Component Story Format 3.
Scrittura di storie CSF3 è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Che cos'è CSF3
Component Story Format 3 (CSF3) è il formato attuale delle story di Storybook. Le story sono semplici oggetti JavaScript/TypeScript: per i casi più semplici non è necessaria alcuna funzione di rendering.
L'export Meta
Ogni file di story deve avere un export predefinito, l'oggetto Meta, che descrive il componente e imposta la configurazione condivisa delle 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;Export denominati delle story
Ogni export denominato del file è una story. In CSF3, una story è un oggetto con una proprietà args, cioè le props del componente.
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 },
};Ereditarietà delle story
Le story ereditano gli args dall'oggetto meta. Imposti i valori predefiniti condivisi in meta.args e li sovrascriva per ogni story secondo necessità.
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
};Override della funzione di rendering
Fornisca una funzione render in una story per i casi complessi che richiedono un wrapper JSX personalizzato o più istanze.
export const WithIcon: Story = {
render: (args) => (
<div style={{ display: 'flex', gap: 8 }}>
<Button {...args} icon={<StarIcon />} />
<Button {...args} icon={<HeartIcon />} />
</div>
),
args: { label: 'Action' },
};Decorator per singole story
Aggiunga un array decorators a una story per racchiuderla in provider aggiuntivi o in un layout specifico solo per quella story.
export const InsideCard: Story = {
decorators: [
(Story) => (
<div style={{ padding: 24, background: '#f5f5f5' }}>
<Story />
</div>
),
],
args: { label: 'Card Button' },
};Parametri nelle story
Utilizzi parameters per configurare gli addon per ogni story, ad esempio impostando lo sfondo o il viewport per uno stato specifico.
export const DarkMode: Story = {
parameters: {
backgrounds: { default: 'dark' },
},
args: { label: 'Dark Button', variant: 'primary' },
};Il tag autodocs
Aggiungendo tags: ['autodocs'] al meta, viene generata una pagina di documentazione automatica con una tabella delle props ed esempi interattivi derivati da tutte le story denominate.
Una story per ogni stato
Scriva una story per ogni stato significativo del componente: vuoto, caricamento, errore, un singolo elemento, molti elementi, layout RTL e così via.
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 } };Convenzioni di denominazione
Utilizzi nomi di story in PascalCase che descrivano lo stato. Eviti nomi generici come Default: sia specifico, ad esempio PrimaryDisabled o SecondaryWithIcon.
Raggruppare le story con title
La proprietà title nel meta utilizza la notazione con barre per creare gruppi nidificati nella barra laterale di Storybook: 'Forms/Input' crea un gruppo Forms con un sottogruppo Input.
const meta: Meta<typeof TextInput> = {
title: 'Forms/TextInput',
component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...Riutilizzare le story nei test
Le story CSF3 sono semplici oggetti, quindi può importarle e combinarle nei test unitari o in altre story.
import { Primary } from './Button.stories';
test('renders primary button', () => {
render(<Button {...Primary.args} />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});Verifica rapida
In CSF3, come si definiscono le props o lo stato di una story?
Riepilogo
Le story CSF3 sono oggetti tipizzati con args. Imposti i valori predefiniti condivisi in meta.args, li sovrascriva per ogni story, utilizzi render per JSX personalizzato e aggiunga tags: ['autodocs'] per generare automaticamente la documentazione. Scriva una story per ogni stato significativo del componente.
Domande Frequenti
La lezione «Scrittura di storie CSF3» è gratuita?
Sì — il testo completo di «Scrittura di storie CSF3» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Scrittura di storie CSF3»?
Esporti un oggetto meta predefinito e storie nominate utilizzando il Component Story Format 3. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Scrittura di storie CSF3»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione di Storybook in un progetto React
- Scrittura di storie CSF3
- Args, Controls e addon Actions
- Test di Storybook e regressione visiva