55 lines
3.1 KiB
Markdown
55 lines
3.1 KiB
Markdown
# Broker Accounts Page — Design System Migration
|
||
|
||
## Status
|
||
|
||
Implemented — 2026-06-21.
|
||
|
||
## Goal
|
||
|
||
Мигрировать BrokerAccountsPage, BrokerAccountsSummary, BrokerAccountCard и BrokerAllocationBar на компоненты `@moex-vibe/design-system`, заменив legacy CSS и inline-стили на DS-компоненты и MUI layout utilities.
|
||
|
||
## Scope
|
||
|
||
- `apps/frontend/src/pages/broker-accounts/ui/BrokerAccountsPage.tsx`
|
||
- `apps/frontend/src/widgets/broker-accounts-summary/ui/BrokerAccountsSummary.tsx`
|
||
- `apps/frontend/src/widgets/broker-account-card/ui/BrokerAccountCard.tsx`
|
||
- `apps/frontend/src/shared/ui/broker-allocation-bar/BrokerAllocationBar.tsx`
|
||
- `apps/frontend/src/styles.css` — удалить CSS-классы и переменные, оставшиеся без потребителей
|
||
|
||
### DS-компоненты для внедрения
|
||
|
||
| HTML / legacy | DS-компонент |
|
||
|-------------|-------------|
|
||
| `<h1>`, `<h2>` | `<Heading>` |
|
||
| `<p>`, `<span>` label | `<Text>` |
|
||
| `<span>` eyebrow | `<Text variant="label" tone="secondary">` |
|
||
| `<dl>`/`<dt>`/`<dd>` stat | `<Metric>` |
|
||
| `div.broker-accounts-empty` | `<EmptyState>` |
|
||
| `div.broker-account-card__alert` + button | `<Alert severity="error">` + `<Button variant="primary">` |
|
||
| `div.broker-accounts-summary__hero` title/text | `<Heading>` + `<Text>` |
|
||
| `.broker-account-card` card | `<Surface>` or `<Card>` |
|
||
| `<SkeletonBlock>` | `<Skeleton>` from DS |
|
||
| `div.broker-accounts-page` layout | `<Box>` with `sx` |
|
||
| `div.broker-accounts-page__header` | `<Box>` with flex |
|
||
| `div.broker-accounts-page__cards` | `<Box>` with grid |
|
||
| `p.broker-allocation-bar__empty` | `<Text tone="muted">` |
|
||
|
||
## Out of scope
|
||
|
||
- Hero gradient section visual identity (too custom, no DS equivalent)
|
||
- Serif font family on titles (DS uses Inter)
|
||
- Allocation bar colors from ALLOCATION_CONFIG (business config, not tokens)
|
||
- Добавление новых тестов (entity-тесты существуют, page-тесты — новая фича)
|
||
- Рекламные/декоративные элементы (градиенты, кастомные скругления)
|
||
|
||
## Acceptance Criteria
|
||
|
||
- [ ] BrokerAccountsPage не содержит CSS-классов из styles.css; `<h1>` / `<p>` заменены на `<Heading>` / `<Text>`
|
||
- [ ] BrokerAccountsPage empty state использует `<EmptyState>`, error — `<Text tone="negative">`
|
||
- [ ] BrokerAccountsSummary skeleton использует DS `<Skeleton>`, stats используют `<Metric>`, eyebrow/title используют `<Text>`/`<Heading>`
|
||
- [ ] BrokerAccountCard skeleton/error/success используют DS `<Skeleton>`, `<Alert>`, `<Button>`, `<Heading>`, `<Text>`, `<Metric>`, `<Surface>`
|
||
- [ ] BrokerAllocationBar использует `<Box>` + `<Text>` вместо div/p с CSS-классами
|
||
- [ ] ESLint allowlist не нарушен
|
||
- [ ] `npm run test:frontend && npm run lint -w apps/frontend && npm run build:frontend` проходят
|
||
- [ ] CSS-классы, оставшиеся без потребителей, удалены из styles.css
|