Что это такое
Storybook — среда для разработки UI-компонентов в изоляции. Вместо поиска нужного состояния внутри большого приложения разработчик открывает story: кнопку, форму, карточку, модальное окно или страницу с заранее заданными props.
Проект стал стандартным инструментом для дизайн-систем и компонентных библиотек, потому что связывает разработку, документацию и тестирование. Компонент можно показать дизайнеру, QA и другой команде без поднятия всего продукта.
Что внутри и как используют
Внутри — core, renderers для React, Vue, Angular, Svelte и других стеков, addons, документация, тесты и примеры. Storybook расширяется через addons для accessibility, actions, controls, docs и testing.
Story для компонента
Пример показывает, как компонент получает видимое состояние в Storybook без запуска всего приложения.
import type { Meta, StoryObj } from '@storybook/react'
import { Button } from './Button'
const meta = { component: Button } satisfies Meta<typeof Button>
export default meta
export const Primary = {
args: { children: 'Save changes', variant: 'primary' },
}Типовой сценарий — описать story для каждого важного состояния компонента: обычное, пустое, загружается, ошибка, disabled, длинный текст. После этого UI становится видимым каталогом.
Сильные стороны и ограничения
Сильная сторона — изоляция и общая точка обсуждения интерфейса. Storybook помогает команде видеть, какие компоненты уже есть, как они выглядят и какие состояния поддерживают.
Ограничение — отдельная среда требует ухода. Если stories не обновлять вместе с продуктом, они быстро превращаются в музей старого интерфейса.