Первая история

Что делаем: открываем готовый файл с историей кнопки и меняем текст на кнопке. Storybook покажет правку сразу.

Слева — этот урок, справа — настоящий Storybook: список историй, холст с кнопкой и панели внизу. Всё это запущено в вашем браузере.

Что такое история

Компонент вроде кнопки зависит от пропсов, и у него есть много «состояний»: обычная, отключённая, с длинным текстом. История (story) — это одно такое состояние, записанное кодом. Storybook показывает каждую историю на отдельном холсте, поэтому компонент можно разглядывать вне приложения.

Истории лежат рядом с компонентом в файлах *.stories.tsx. Какие файлы искать, говорит .storybook/main.ts в поле stories.

Из чего состоит файл историй

Формат называется CSF (Component Story Format). В файле две части:

• метаданные — объект meta и export default meta: название раздела в боковой панели и сам компонент;
• истории — именованные экспорты. Имя Primary превращается в пункт «Primary» под разделом.

Оператор satisfies Meta<typeof Button> проверяет метаданные по типам, но не стирает из них точные значения. Поэтому StoryObj<typeof meta> дальше знает, что у кнопки обязателен пропс label.

Попробуйте

Замените Сохранить в args на любой другой текст. История перерисуется, а в боковой панели ничего не изменится: её название задаёт имя экспорта.