86 lines
7.4 KiB
Markdown
86 lines
7.4 KiB
Markdown
# Дизайн-системный рефакторинг страниц брокерского счёта
|
||
|
||
Дата: 2026-06-21
|
||
Статус: реализовано
|
||
|
||
## Контекст
|
||
|
||
Epic `Брокерский портфель` уже покрыт функциональной фичей `broker-account-sections` (реализовано 2026-06-18). Текущая цель — убрать legacy-стили (CSS-классы, inline-стили, `SkeletonBlock`, `loading-spinner`) из страниц и компонентов, относящихся к одному выбранному брокерскому счёту, и перевести их на `@moex-vibe/design-system`.
|
||
|
||
Страницы в области изменения:
|
||
|
||
- `BrokerAccountLayout` — навигация и заголовок счёта;
|
||
- `BrokerAccountOverviewPage` — карточки сводки, диаграмма, последние операции;
|
||
- `BrokerSummary` — текстовые показатели портфеля и денежных остатков;
|
||
- `BrokerAssetCards` — карточки акций и облигаций;
|
||
- `BrokerOverviewSkeleton` — loading-состояние overview;
|
||
- `BrokerAllocationChart` — SVG-диаграмма (диаграмма остаётся SVG, меняются обёртки);
|
||
- `BrokerPositionTable` — таблица позиций с пагинацией;
|
||
- `BrokerOperationsTable` — таблица операций с пагинацией;
|
||
- `PositionTicker` — кликабельный тикер в таблице позиций;
|
||
- `BrokerPositionsPage` — страница акций / облигаций;
|
||
- `BrokerOperationsPage` — страница истории операций с фильтром.
|
||
|
||
## Связанные фичи
|
||
|
||
- Epic: `docs/epics/BrokerPortfolio.md`
|
||
- Функциональная базовая фича: `docs/features/broker-account-sections/spec.md`
|
||
- DS-пакет: `packages/design-system/`
|
||
|
||
## Цель
|
||
|
||
Удалить все CSS-классы (кроме героических градиентов, где нет DS-эквивалента) и `SkeletonBlock` из страниц и компонентов, относящихся к одному брокерскому счёту. Перевести layout, typography, skeleton, метрики, алерты, кнопки, пустые состояния на `@moex-vibe/design-system`. Оставить нетронутыми бизнес-логику, контракты и схему маршрутизации.
|
||
|
||
## Out of scope
|
||
|
||
- Изменение бизнес-логики, контрактов API, entity-слоя;
|
||
- Изменение маршрутизации;
|
||
- Изменение SVG-диаграммы;
|
||
- Рефакторинг broker-accounts-page (список счетов) — отдельная фича;
|
||
- Изменение CSS-переменных `:root` и их использования за пределами страниц брокера;
|
||
- Добавление новых тестов (существующие тесты сохраняются, если их контракт не меняется).
|
||
|
||
## Принципы миграции
|
||
|
||
- `SkeletonBlock` → DS `Skeleton` (все потребители → удаление `SkeletonBlock` из `shared/ui`);
|
||
- `<h1>`/`<h2>` → `<Heading level={1|2}>`;
|
||
- `<p label>`, `<span>` → `<Text variant="label" tone="secondary">`;
|
||
- `<p>` статические тексты → `<Text variant="body">` или `<Box component="span">` с `sx` (если нужен кастомный размер/цвет);
|
||
- `<strong>` значения → `<Text variant="body" sx={{ fontWeight: 700 }}>`;
|
||
- Inline `<p role="alert">` → `<Text tone="negative">`;
|
||
- Стандартный `<section>` → `<Box component="section">`;
|
||
- Hero-gradient `broker-overview` → `<Box>` с кастомным `sx` (градиент остаётся как inline-стиль);
|
||
- `div.broker-operations__toolbar` → `<Box>` с flex-сеткой;
|
||
- `<select>` элемент — оставить как нативный `<select>`, обёрнуть в `<Box>`.
|
||
|
||
## Acceptance Criteria
|
||
|
||
- [x] `BrokerAccountLayout` не содержит CSS-классов из `styles.css`; используется `<Heading>`, `<Text>`, `<Box>`.
|
||
- [x] `BrokerAccountOverviewPage` и содержащиеся в нём `BrokerSummary`, `BrokerAssetCards` переведены на DS-компоненты.
|
||
- [x] `BrokerOverviewSkeleton` использует DS `<Skeleton>`.
|
||
- [x] `BrokerAllocationChart` обёртки (`<figure>`, `<figcaption>`) переведены на `<Box>`; текст легенды — на `<Text>`.
|
||
- [x] `BrokerPositionTable` и `BrokerOperationsTable` используют `<Box>` для layout, `<Heading>` для заголовков, `<Button>` или `<Box>` для пагинации, пустые и loading-состояния — через DS.
|
||
- [x] `TableSkeleton` переведён на DS `<Skeleton>`.
|
||
- [x] `SkeletonBlock` удалён после замены всех потребителей.
|
||
- [x] `BrokerPositionsPage` и `BrokerOperationsPage` переведены на `<Box>`, `<Heading>`, `<Text>`.
|
||
- [x] `PositionTicker` — `<Link>` с `<Box component="span" sx={{ fontWeight: 700 }}>`.
|
||
- [x] ESLint allowlist не нарушен (`no-restricted-imports` разрешает `Box`, `Stack`, `Grid` из `@mui/material` barrel).
|
||
- [x] `npm run test:frontend && npm run lint -w apps/frontend && npm run build:frontend` проходят.
|
||
- [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`).
|