React Academy · Урок

Написание историй CSF3

Экспортируйте объект метаданных по умолчанию и именованные истории с помощью Component Story Format 3.

«Написание историй CSF3» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое CSF3

Формат историй компонентов 3 (CSF3) — это текущий формат историй Storybook. Истории представляют собой обычные объекты JavaScript/TypeScript — для простых случаев функция отрисовки не нужна.

Экспорт Meta

Каждый файл историй должен иметь экспорт по умолчанию — объект Meta, который описывает компонент и задает общую конфигурацию истории.

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;

Именованные экспорты историй

Каждый именованный экспорт из файла является историей. В CSF3 история — это объект со свойством args, содержащим свойства компонента.

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 },
};

Наследование историй

Истории наследуют аргументы из объекта meta. Задайте общие значения по умолчанию в meta.args и при необходимости переопределяйте их для отдельных историй.

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
};

Переопределение функции отрисовки

Добавьте в историю функцию render для сложных случаев, требующих пользовательской JSX-обертки или нескольких экземпляров.

export const WithIcon: Story = {
  render: (args) => (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button {...args} icon={<StarIcon />} />
      <Button {...args} icon={<HeartIcon />} />
    </div>
  ),
  args: { label: 'Action' },
};

Декораторы отдельных историй

Добавьте к истории массив decorators, чтобы обернуть только эту историю в дополнительные провайдеры или макет.

export const InsideCard: Story = {
  decorators: [
    (Story) => (
      <div style={{ padding: 24, background: '#f5f5f5' }}>
        <Story />
      </div>
    ),
  ],
  args: { label: 'Card Button' },
};

Параметры историй

Используйте parameters, чтобы настроить дополнения для отдельной истории, например задать фон или область просмотра для определенного состояния.

export const DarkMode: Story = {
  parameters: {
    backgrounds: { default: 'dark' },
  },
  args: { label: 'Dark Button', variant: 'primary' },
};

Тег autodocs

Добавление tags: ['autodocs'] в meta создает автоматическую страницу документации с таблицей свойств и интерактивными примерами всех именованных историй.

История для каждого состояния

Создайте историю для каждого значимого состояния компонента: пустое состояние, загрузка, ошибка, один элемент, множество элементов, макет RTL и т. д.

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 } };

Соглашения об именовании

Используйте имена историй в PascalCase, описывающие состояние. Избегайте общих имен вроде Default — будьте конкретны: PrimaryDisabled, SecondaryWithIcon.

Группировка историй с помощью title

Свойство title в meta использует обозначение через косую черту для создания вложенных групп в боковой панели Storybook: 'Forms/Input' создает группу Forms с подгруппой Input.

const meta: Meta<typeof TextInput> = {
  title: 'Forms/TextInput',
  component: TextInput,
};
// Sidebar: Forms → TextInput → Primary, Error, Disabled...

Повторное использование историй в тестах

Истории CSF3 являются обычными объектами, поэтому их можно импортировать и комбинировать в модульных тестах или других историях.

import { Primary } from './Button.stories';

test('renders primary button', () => {
  render(<Button {...Primary.args} />);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

Быстрая проверка

Как в CSF3 определить свойства или состояние истории?

Итоги

Истории CSF3 — это типизированные объекты с args. Задавайте общие значения по умолчанию в meta.args, переопределяйте их для отдельных историй, используйте render для пользовательского JSX и добавляйте tags: ['autodocs'] для автоматически создаваемой документации. Создавайте историю для каждого значимого состояния компонента.

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

Урок «Написание историй CSF3» бесплатный?

Да — полный текст урока «Написание историй CSF3» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Написание историй CSF3»?

Экспортируйте объект метаданных по умолчанию и именованные истории с помощью Component Story Format 3. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Написание историй CSF3»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Настройка Storybook в проекте React
Написание историй CSF3
Аргументы, элементы управления и дополнение Actions
Тестирование Storybook и визуальная регрессия

← Назад к React Academy