Что такое CSF3?

Component Story Format 3 — это последний стандарт для Storybook, использующий объектно-ориентированный экспорт вместо старых `storiesOf` или функциональных шаблонов. Он уменьшает шаблонный код и улучшает совместимость с инструментами тестирования.

Поддерживает ли этот инструмент TypeScript?

Да. Сгенерированный вывод включает стандартные интерфейсы TypeScript и определения типов для `Meta` и `StoryObj` для обеспечения безопасности типов в вашей IDE.

Могу ли я добавить несколько историй одновременно?

Этот инструмент генерирует базовый файл с основной историей. Вы можете вручную дублировать объект истории в вашем редакторе, чтобы создать варианты, такие как состояния 'Disabled' или 'Loading'.

Загружается ли мой код компонента?

Нет. Генератор работает, преобразуя предоставленные вами метаданные в строку; файлы не загружаются, и анализ кода на сервере не выполняется.

Форматтеры и код

Генератор историй 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

Примечание редактора

Understanding · One story per component state.

Эта углублённая глава пока доступна только на английском языке. Инструмент конвертации выше работает на вашем языке; развёрнутая статья ещё не переведена.

Часто задаваемые вопросы

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.

Люди также ищут

Связанные инструменты

More in this room.

Смотреть все в Форматтеры и код