moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: mark broker-account-sections-ds-migration spec as implemented

Browse Source
This commit is contained in:
Sergey Krylov 2026-06-21 20:47:01 +03:00
parent 1cabe2d71e
commit 5ea1fcfe14
1 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/features/broker-account-sections-ds-migration/spec.md
View File

@ -1,7 +1,7 @@
# Дизайн-системный рефакторинг страниц брокерского счёта # Дизайн-системный рефакторинг страниц брокерского счёта
Дата: 2026-06-21 Дата: 2026-06-21
Статус: Draft Статус: реализовано
## Контекст ## Контекст
@ -55,15 +55,31 @@ Epic `Брокерский портфель` уже покрыт функцио
## Acceptance Criteria ## Acceptance Criteria
- [ ] `BrokerAccountLayout` не содержит CSS-классов из `styles.css`; используется `<Heading>`, `<Text>`, `<Box>`. - [x] `BrokerAccountLayout` не содержит CSS-классов из `styles.css`; используется `<Heading>`, `<Text>`, `<Box>`.
- [ ] `BrokerAccountOverviewPage` и содержащиеся в нём `BrokerSummary`, `BrokerAssetCards` переведены на DS-компоненты. - [x] `BrokerAccountOverviewPage` и содержащиеся в нём `BrokerSummary`, `BrokerAssetCards` переведены на DS-компоненты.
- [ ] `BrokerOverviewSkeleton` использует DS `<Skeleton>`. - [x] `BrokerOverviewSkeleton` использует DS `<Skeleton>`.
- [ ] `BrokerAllocationChart` обёртки (`<figure>`, `<figcaption>`) переведены на `<Box>`; текст легенды — на `<Text>`. - [x] `BrokerAllocationChart` обёртки (`<figure>`, `<figcaption>`) переведены на `<Box>`; текст легенды — на `<Text>`.
- [ ] `BrokerPositionTable` и `BrokerOperationsTable` используют `<Box>` для layout, `<Heading>` для заголовков, `<Button>` или `<Box>` для пагинации, пустые и loading-состояния — через DS. - [x] `BrokerPositionTable` и `BrokerOperationsTable` используют `<Box>` для layout, `<Heading>` для заголовков, `<Button>` или `<Box>` для пагинации, пустые и loading-состояния — через DS.
- [ ] `TableSkeleton` переведён на DS `<Skeleton>`. - [x] `TableSkeleton` переведён на DS `<Skeleton>`.
- [ ] `SkeletonBlock` удалён после замены всех потребителей. - [x] `SkeletonBlock` удалён после замены всех потребителей.
- [ ] `BrokerPositionsPage` и `BrokerOperationsPage` переведены на `<Box>`, `<Heading>`, `<Text>`. - [x] `BrokerPositionsPage` и `BrokerOperationsPage` переведены на `<Box>`, `<Heading>`, `<Text>`.
- [ ] `PositionTicker` — `<Link>` с `<Text>` (или оставляет `fontWeight: 700` если без `sx`). - [x] `PositionTicker` — `<Link>` с `<Box component="span" sx={{ fontWeight: 700 }}>`.
- [ ] ESLint allowlist не нарушен (`no-restricted-imports` разрешает `Box`, `Stack`, `Grid` из `@mui/material` barrel). - [x] ESLint allowlist не нарушен (`no-restricted-imports` разрешает `Box`, `Stack`, `Grid` из `@mui/material` barrel).
- [ ] `npm run test:frontend && npm run lint -w apps/frontend && npm run build:frontend` проходят. - [x] `npm run test:frontend && npm run lint -w apps/frontend && npm run build:frontend` проходят.
- [ ] CSS-классы, оставшиеся без потребителей, удалены из `styles.css` (но сохраняются градиенты hero-секций). - [x] CSS-классы, оставшиеся без потребителей, удалены из `styles.css` (но сохраняются градиенты hero-секций).
## Результаты реализации
Все 12 задач плана выполнены и закоммичены в ветку `codex/broker-accounts-page` (13 коммитов). Ключевые изменения:
- **Полностью мигрированы на DS:** `BrokerAccountLayout`, `BrokerAccountOverviewPage`, `BrokerSummary`, `BrokerAssetCards`, `BrokerOverviewSkeleton`, `BrokerAllocationChart`, `BrokerPositionTable`, `BrokerOperationsTable`, `BrokerPositionsPage`, `BrokerOperationsPage`, `PositionTicker`.
- **Удалён legacy:** `SkeletonBlock` удалён из `shared/ui/SkeletonBlock.tsx` и `shared/ui/index.ts`.
- **Очистка CSS:** все `broker-account__*`, `broker-overview__*`, `broker-allocation__*`, `broker-operations__toolbar*` классы и переменные удалены из `styles.css`. CSS уменьшился с 274 до 99 строк.
- Верификация: 111 тестов PASS, lint чистый, build проходит без ошибок.
### Отклонения от плана
- `PositionTicker`: использован `<Box component="span">` вместо DS `<Text>` с `sx`, так как DS `Text` не поддерживает кастомный `sx`.
- `TableSkeleton`: сохранён как shared компонент (вместо удаления), так как используется `BrokerOperationsTable`.
- `loading-spinner`: оставлен как глобальный CSS-класс (генерируется через `<Box className="loading-spinner">`). DS `Skeleton shape="circular"` использован для inline-спиннеров в пагинации.
- `TableSkeleton` type signature остался без изменений (все уже импортируют `Skeleton` из DS, не `SkeletonBlock`).