ksv741
718365cd5a
Frontend security / security (push) Successful in 8s
Frontend verify / verify (push) Successful in 3m56s
Frontend security / security (pull_request) Successful in 9s
Frontend verify / verify (pull_request) Successful in 3m41s
Conventional commits / commits (pull_request) Successful in 19s
56 lines
4.0 KiB
Markdown
56 lines
4.0 KiB
Markdown
# Frontend architecture
|
||
|
||
## Выбор владельца
|
||
|
||
Сначала найди владельца поведения и ближайший пример. Расширяй existing slice,
|
||
если ответственность остаётся связной. Размер файла или возможный будущий reuse
|
||
не создают новую архитектурную границу.
|
||
|
||
| Ответственность | Размещение |
|
||
| --- | --- |
|
||
| Bootstrap, глобальные providers, routes | `app` |
|
||
| Композиция маршрута и поведение, нужное только этому экрану | `pages/<page>` |
|
||
| Самостоятельная пользовательская возможность с собственным смыслом | `features/<capability>` |
|
||
| Представление/поведение бизнес-сущности | `entities/<entity>` |
|
||
| Переиспользуемый код без WealthLedger domain meaning | `shared` |
|
||
|
||
Локальный FSD profile: `app → pages → features → entities → shared`, без `widgets`.
|
||
Крупный уникальный блок остаётся в своей page. Form, mutation или click handler
|
||
сами по себе не требуют feature. Два callers не делают domain helper generic shared.
|
||
Slice именуется по ответственности, а не `helpers`, `hooks` или `types`.
|
||
|
||
**Безопасный путь:** при сомнении оставь код у ближайшего допустимого owner.
|
||
Извлекай его, когда появилась самостоятельная ответственность или реальный reuse.
|
||
Не вводи новый layer и не обходи public API, чтобы устранить неудобный import.
|
||
|
||
## Imports и public API
|
||
|
||
Cross-slice consumer использует `@/` и `index.ts` владельца, например
|
||
`@/entities/portfolio`. Alias Vite и TypeScript согласован. Другой slice не
|
||
импортирует внутренний файл напрямую. Slices `pages`, `features`, `entities` не зависят от соседнего slice своего слоя;
|
||
композиция принадлежит вышележащему owner. Existing меж-slice исключения
|
||
не являются разрешением добавлять новые.
|
||
|
||
Направление зависимостей и public imports частично проверяет
|
||
`npm run deps`; Knip проверяет использование exports, а не смысл placement.
|
||
|
||
## UI foundation
|
||
|
||
Mental model, theme и data flow — в [architecture](../architecture.md).
|
||
При изменении foundation прочитай [design system](../../../docs/design/overview.md).
|
||
|
||
## Примеры
|
||
|
||
- Общая busy-область: существующий [LoadingSkeleton](../../src/shared/ui/LoadingSkeleton.tsx), а не domain widget в shared.
|
||
- Account-income state views: [страница](../../src/pages/account-income/ui/AccountIncomePage.tsx) и её flat `components/*.view.tsx`; новый page-local filter остаётся здесь.
|
||
- Portfolio query: [entity public API](../../src/entities/portfolio/index.ts); новая UI-сводка с бизнес-смыслом не становится shared только из-за нескольких экранов.
|
||
|
||
## Проверка
|
||
|
||
После placement/import change: `npm run deps`, `npm run typecheck`, `npm run knip`;
|
||
после собственного behavior — применимые tests. Финальный gate указан в AGENTS.
|
||
Existing dependency config не запрещает все same-layer imports: их и смысл
|
||
owner проверяет review. Не объявляй Steiger установленным; graph проверяет
|
||
текущий dependency-cruiser. Review отдельно проверяет смысл owner: разрешённый dependency graph не доказывает
|
||
правильный выбор слоя.
|