70 lines
5.6 KiB
Markdown
70 lines
5.6 KiB
Markdown
# Дизайн-системный рефакторинг страниц брокерского счёта
|
||
|
||
Дата: 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-секций).
|