Storybook: UI в изоляции

Компонент удобно разрабатывать без запуска всего приложения: Storybook поднимает каталог, где каждая «история» рендерит компонент отдельно с нужными пропсами. Это и документация, и полигон, и база для визуальных тестов.

Истории и controls

// Button.stories.tsx
import { Button } from "./Button";

export default {
  title: "UI/Button",
  component: Button,
  args: { children: "Сохранить" }
};

export const Primary = { args: { variant: "primary" } };

// controls позволяют мышкой менять пропсы и смотреть варианты

Что это даёт

• разработка компонентов без данных и бэкенда — нужно только то, что принимает компонент;
• живая документация: дизайнеры и коллеги видят все состояния (loading, error, empty);
• визуальные (регрессионные) тесты: скриншот-сравнение ловит поломанный UI;
• дизайн-система: единая библиотека, переиспользуемая между проектами.