Écrire des stories CSF3
Exportez un objet meta par défaut et des stories nommées avec le Component Story Format 3.
Écrire des stories CSF3 est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu’est-ce que CSF3 ?
Component Story Format 3 (CSF3) est le format actuel des scénarios Storybook. Les scénarios sont de simples objets JavaScript/TypeScript : aucune fonction de rendu n’est nécessaire dans les cas simples.
L’exportation Meta
Chaque fichier de scénarios doit contenir une exportation par défaut, l’objet Meta, qui décrit le composant et définit la configuration commune des scénarios.
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;Exportations nommées
Chaque exportation nommée du fichier est un scénario. Dans CSF3, un scénario est un objet doté d’une propriété args, qui contient les propriétés du composant.
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 },
};Héritage des scénarios
Les scénarios héritent des arguments de l’objet meta. Définissez les valeurs par défaut communes dans meta.args et remplacez-les pour chaque scénario si nécessaire.
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
};Remplacer la fonction de rendu
Fournissez une fonction render dans un scénario pour les cas complexes nécessitant un habillage JSX personnalisé ou plusieurs instances.
export const WithIcon: Story = {
render: (args) => (
<div style={{ display: 'flex', gap: 8 }}>
<Button {...args} icon={<StarIcon />} />
<Button {...args} icon={<HeartIcon />} />
</div>
),
args: { label: 'Action' },
};Décorateurs pour les scénarios individuels
Ajoutez un tableau decorators à un scénario pour l’envelopper dans des fournisseurs ou une mise en page supplémentaires propres à ce scénario.
export const InsideCard: Story = {
decorators: [
(Story) => (
<div style={{ padding: 24, background: '#f5f5f5' }}>
<Story />
</div>
),
],
args: { label: 'Card Button' },
};Paramètres des scénarios
Utilisez parameters pour configurer les extensions pour chaque scénario, par exemple en définissant l’arrière-plan ou la fenêtre d’affichage pour un état précis.
export const DarkMode: Story = {
parameters: {
backgrounds: { default: 'dark' },
},
args: { label: 'Dark Button', variant: 'primary' },
};L’étiquette de documentation automatique
Ajouter tags: ['autodocs'] à meta génère une page de documentation automatique avec un tableau de propriétés et des exemples interactifs issus de tous les scénarios nommés.
Un scénario pour chaque état
Écrivez un scénario pour chaque état significatif du composant : vide, chargement, erreur, élément unique, nombreux éléments, mise en page RTL, etc.
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 } };Conventions de nommage
Utilisez des noms de scénarios en PascalCase qui décrivent l’état. Évitez les noms génériques comme Default : soyez précis, par exemple PrimaryDisabled ou SecondaryWithIcon.
Regrouper les scénarios avec title
La propriété title de meta utilise la notation avec des barres obliques pour créer des groupes imbriqués dans la barre latérale de Storybook : 'Forms/Input' crée un groupe Forms contenant un sous-groupe Input.
const meta: Meta<typeof TextInput> = {
title: 'Forms/TextInput',
component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...Réutiliser les scénarios dans les tests
Les scénarios CSF3 sont de simples objets. Vous pouvez donc les importer et les combiner dans des tests unitaires ou d’autres scénarios.
import { Primary } from './Button.stories';
test('renders primary button', () => {
render(<Button {...Primary.args} />);
expect(screen.getByText('Click me')).toBeInTheDocument();
});Vérification rapide
Dans CSF3, comment définissez-vous les propriétés ou l’état d’un scénario ?
Récapitulatif
Les scénarios CSF3 sont des objets typés dotés de args. Définissez les valeurs par défaut communes dans meta.args, remplacez-les pour chaque scénario, utilisez render pour un JSX personnalisé et ajoutez tags: ['autodocs'] pour générer automatiquement la documentation. Écrivez un scénario pour chaque état significatif du composant.
Questions Fréquemment Posées
La leçon « Écrire des stories CSF3 » est-elle gratuite ?
Oui — le texte complet de « Écrire des stories CSF3 » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Écrire des stories CSF3 » ?
Exportez un objet meta par défaut et des stories nommées avec le Component Story Format 3. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Écrire des stories CSF3 » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer Storybook dans un projet React
- Écrire des stories CSF3
- Arguments, contrôles et module complémentaire Actions
- Tests Storybook et régression visuelle