Component Story Format 3 est la dernière norme pour Storybook, utilisant des exportations basées sur des objets plutôt que les anciennes `storiesOf` ou les modèles fonctionnels. Il réduit le code passe-partout et améliore la compatibilité avec les outils de test.

Cet outil prend-il en charge TypeScript ?

Oui. La sortie générée inclut des interfaces TypeScript standard et des définitions de type pour `Meta` et `StoryObj` afin d'assurer la sécurité des types dans votre IDE.

Puis-je ajouter plusieurs stories à la fois ?

Cet outil génère un fichier de base avec une "Primary story". Vous pouvez dupliquer manuellement l'objet de la "story" dans votre éditeur pour créer des variations comme des états "Disabled" ou "Loading".

Mon code de composant est-il téléversé ?

Non. Le générateur fonctionne en prenant les métadonnées que vous fournissez et en les formatant en une chaîne de caractères ; aucun fichier n'est téléversé et aucune analyse de code n'est effectuée sur un serveur.

Formateurs & Code

Générateur d'Histoires Storybook

CSF3 .stories.tsx file from a component name and props.

Runs in your browser

ComponentDefault args (key: value, one per line)Variants (comma-separated)

Button.stories.tsx

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
  title: "Components/Button",
  args: {
  variant: 'primary',
  size: 'md',
  children: 'Click me',
  },
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary", "ghost"] },
  },
};
export default meta;

type Story = StoryObj<typeof Button>;

export const Default: Story = {};

export const Primary: Story = {
  args: { variant: "primary" },
};
export const Secondary: Story = {
  args: { variant: "secondary" },
};
export const Ghost: Story = {
  args: { variant: "ghost" },
};

lines: 31chars: 653size: 653 B

live

Note de la rédaction

Understanding · One story per component state.

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

Quick answers.

›What is CSF3?

Component Story Format 3 is the latest standard for Storybook, using object-based exports rather than the older `storiesOf` or functional templates. It reduces boilerplate and improves compatibility with testing tools.

›Does this tool support TypeScript?

Yes. The generated output includes standard TypeScript interfaces and type definitions for `Meta` and `StoryObj` to ensure type safety within your IDE.

›Can I add multiple stories at once?

This tool generates a base file with a Primary story. You can manually duplicate the story object in your editor to create variations like 'Disabled' or 'Loading' states.

›Is my component code uploaded?

No. The generator works by taking the metadata you provide and formatting it into a string; no files are uploaded and no code analysis is performed on a server.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Formateurs & Code