ksv741
f876411a37
Frontend security / security (push) Successful in 9s
Frontend verify / verify (push) Successful in 5m27s
Frontend security / security (pull_request) Successful in 10s
Frontend verify / verify (pull_request) Successful in 5m24s
Conventional commits / commits (pull_request) Failing after 26s
OpenSpec change: evolve-frontend-stack
37 lines
2.6 KiB
Markdown
37 lines
2.6 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, 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](../../packages/ui/src/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 проверяются отдельно от успешной сборки.
|