moex-vibe/docs/features/broker-account-sections-ds-migration/spec.md

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

Дата: 2026-06-21 Статус: Draft

Контекст

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> с <Text> (или оставляет fontWeight: 700 если без sx).
• 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-секций).