Broker Accounts Page — Design System Migration

Status

Draft

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

3.0 KiB Raw Blame History Unescape Escape