2.8 KiB
Storybook
Единый каталог включает stories приложения и packages/*/src; общие
StateView/LoadingSkeleton и их stories принадлежат packages/ui.
Когда нужна story
- Shared UI/theme: показывай принятые visual roles и переиспользуемое поведение.
- Domain/page presentation: добавляй story, когда независимый visual state нужен для разработки/review или является устойчивым UI pattern.
- Выбирай значимые состояния: default, loading, disabled, error, empty, длинный контент и смысловые variants по применимости. Не строй декартово произведение props и story для каждого trivial wrapper/helper.
- Fetch/auth/router container и VM проверяй application tests; story получает synthetic props presentation component. Каталог не нужен каждому файлу.
Изоляция и interaction
Используй CSF, Meta/StoryObj, satisfies Meta, локальные fixtures и actions.
Общие Mantine/theme/i18n/Dates providers уже есть в
preview; не создавай второй theme source.
Stories не достигают application API, auth и query providers даже транзитивно.
Presentation VM с form-context/UI-only state допустима; data VM остаётся за
этой границей, которую проверяет полный reachable graph;
границу проверяет deps:storybook. Не добавляй MSW worker ради каталога.
play через storybook/test нужен, когда interaction иллюстрирует собственный
контракт: keyboard activation, доступность действия, local callback. Не повторяй
RTL suite и не тестируй внутренности Mantine. Существующий
Button показывает themed control
без production wrapper; LoadingSkeleton
— значимые busy states.
npm run typecheck, npm run deps:storybook, npm run build:catalog проверяют
типы, изоляцию и сборку. Build не выполняет play как CI interaction suite;
для проверки interaction открой story в браузере, для regression используй
существующий Testing. Визуальное соответствие задаче,
keyboard и узкий viewport проверяются отдельно от успешной сборки.