ksv741
9f7e342333
Frontend security / security (pull_request) Successful in 8s
Frontend verify / verify (pull_request) Successful in 3m53s
Conventional commits / commits (pull_request) Successful in 19s
Frontend security / security (push) Successful in 8s
Frontend verify / verify (push) Successful in 3m53s
34 lines
2.4 KiB
Markdown
34 lines
2.4 KiB
Markdown
# Storybook
|
|
|
|
## Когда нужна 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, VM и query providers даже транзитивно;
|
|
границу проверяет `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](../../src/shared/ui/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 проверяются отдельно от успешной сборки.
|