refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -76,8 +76,8 @@ Add/Edit/Delete; restore/category SVG остаются локальными.

 ## Примеры

- Общая busy-область: существующий [LoadingSkeleton](../packages/ui/src/LoadingSkeleton.tsx), а не domain widget в shared.
- Account-income state views: [страница](../src/pages/account-income/ui/AccountIncomePage.tsx) и её flat `components/*.view.tsx`; новый page-local filter остаётся здесь.
+- Общая busy-область: существующий [LoadingSkeleton](../packages/ui/src/LoadingSkeleton/LoadingSkeleton.tsx), а не domain widget в shared.
+- Account-income state views: [страница](../src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx) и её `components/`; новый page-local filter остаётся здесь. Комплекты файлов группируются по [UI convention](conventions/ui.md#размещение-файлов-компонента).
 - Portfolio query: [entity public API](../src/entities/portfolio/index.ts); новая UI-сводка с бизнес-смыслом не становится shared только из-за нескольких экранов.

 ## Проверка
@@ -26,7 +26,7 @@ Stories не достигают application API, auth, VM и query providers д
 контракт: 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)
+без production wrapper; [LoadingSkeleton](../../packages/ui/src/LoadingSkeleton/LoadingSkeleton.stories.tsx)
 — значимые busy states.

 `npm run typecheck`, `npm run deps:storybook`, `npm run build:catalog` проверяют
@@ -45,7 +45,7 @@ Finance: loading/error/empty/loaded, cached snapshot при refetch failure, ret
 отсутствие старых данных после session/connection switch. ErrorBoundary: test-only
 throwing route, безопасная ссылка и reset после navigation.

-Примеры: [AuthForm test](../../src/features/auth/ui/AuthForm.test.tsx),
+Примеры: [AuthForm test](../../src/features/auth/ui/AuthForm/AuthForm.test.tsx),
 [client test](../../src/shared/api/client.test.ts),
 [usePortfolio test](../../src/entities/portfolio/api/usePortfolio.test.tsx).
 Не копируй fixtures/сценарии целиком, если задача затрагивает один исход.
@@ -12,7 +12,7 @@ Mantine component и общую тему. Для выпадающего выбо
 Семантический HTML для структуры страницы остаётся уместным.

 Icons ищи у существующего owner (например,
-[BankOperationIcon](../../src/entities/bank-card/ui/BankOperationIcon.tsx));
+[BankOperationIcon](../../src/entities/bank-card/ui/BankOperationIcon/BankOperationIcon.tsx));
 статичные Add/Edit/Delete доступны в `@wealthledger/icons`. Их SVG декоративны
 по умолчанию; имя action принадлежит кнопке. Standalone meaningful icon получает
 `aria-hidden={false}`, `role="img"` и доступное имя. Category/kind mappings
@@ -56,11 +56,34 @@ retry callbacks, domain grouping и derived presentation data. View получа
 image fallback) и formatter одного переданного значения. Группировка/доли
 коллекции готовятся в VM. Перенос fetch во view ради меньшего container нарушает границу.

-Отдельный state/section с самостоятельной responsibility выноси в flat
-`components/*.view.tsx`. Небольшой tightly-coupled renderer оставляй рядом.
-Не создавай folder/barrel/test/CSS для каждого view и не дроби по line count.
-Пример: [AccountIncomePage](../../src/pages/account-income/ui/AccountIncomePage.tsx)
-и [его VM](../../src/pages/account-income/ui/AccountIncomePage.vm.ts).
+Отдельный state/section с самостоятельной responsibility выноси в
+`components/` своего component. Небольшой tightly-coupled renderer оставляй
+рядом; размер файла сам по себе не требует разделения.
+Пример: [AccountIncomePage](../../src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx)
+и [его VM](../../src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts).
+
+## Размещение файлов компонента
+
+Правило действует в `src` и `packages`: компонент с сопутствующими файлами
+(view, VM, types, CSS, tests, stories) размещай в папке `Component/`.
+Сохраняй полные имена файлов: `Component.tsx`, `Component.view.tsx`,
+`Component.test.tsx`. Создавай только нужные файлы; одиночный компонент
+оставляй непосредственно в `ui`, `components` или source-каталоге пакета.
+
+Внутренние части принадлежат папке родителя; для набора state/section views
+используй её `components/`. Внутри него действует то же правило: отдельная
+папка объединяет комплект файлов, одиночный view остаётся файлом.
+Стили и хуки нескольких соседних компонентов остаются у ближайшего общего
+владельца; не копируй их и не прячь внутрь одного потребителя.
+
+Папка компонента не создаёт новую FSD-границу. Публичные exports остаются в
+существующем `index.ts` slice/segment или entry пакета; внутри используй
+прямые относительные imports без дополнительных barrels на каждый компонент.
+При переносе обновляй imports, ссылки документации и проверки, зависящие от пути.
+
+Пример: [BankCardForm](../../src/entities/bank-card/ui/BankCardForm/BankCardForm.tsx)
+лежит рядом со своим view, тестом и story; общий `BankForms.module.css`
+остаётся в `bank-card/ui`.

 ## Формы