# Дизайн-системный рефакторинг страниц брокерского счёта

Дата: 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`).