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

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

BrokerAccountLayout не содержит CSS-классов из styles.css; используется <Heading>, <Text>, <Box>.
BrokerAccountOverviewPage и содержащиеся в нём BrokerSummary, BrokerAssetCards переведены на DS-компоненты.
BrokerOverviewSkeleton использует DS <Skeleton>.
BrokerAllocationChart обёртки (<figure>, <figcaption>) переведены на <Box>; текст легенды — на <Text>.
BrokerPositionTable и BrokerOperationsTable используют <Box> для layout, <Heading> для заголовков, <Button> или <Box> для пагинации, пустые и loading-состояния — через DS.
TableSkeleton переведён на DS <Skeleton>.
SkeletonBlock удалён после замены всех потребителей.
BrokerPositionsPage и BrokerOperationsPage переведены на <Box>, <Heading>, <Text>.
PositionTicker — <Link> с <Box component="span" sx={{ fontWeight: 700 }}>.
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 проходят.
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).

7.4 KiB Raw Blame History Unescape Escape