39 lines
2.8 KiB
Markdown
39 lines
2.8 KiB
Markdown
# 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](../../.storybook/preview.tsx); не создавай второй 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](../../src/shared/ui/Button.stories.tsx) показывает themed control
|
||
без production wrapper; [LoadingSkeleton](../../packages/ui/src/LoadingSkeleton/LoadingSkeleton.stories.tsx)
|
||
— значимые busy states.
|
||
|
||
`npm run typecheck`, `npm run deps:storybook`, `npm run build:catalog` проверяют
|
||
типы, изоляцию и сборку. Build не выполняет `play` как CI interaction suite;
|
||
для проверки interaction открой story в браузере, для regression используй
|
||
существующий [Testing](testing.md). Визуальное соответствие задаче,
|
||
keyboard и узкий viewport проверяются отдельно от успешной сборки.
|