95 lines
6.1 KiB
Markdown
95 lines
6.1 KiB
Markdown
# Broker Accounts Page — Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Migrate broker-accounts page area to use `@moex-vibe/design-system` components.
|
|
|
|
**Architecture:** Replace legacy CSS classes, inline styles, and shared/components with DS equivalents. Keep business logic and data layer unchanged. The hero gradient section is intentionally left as custom CSS.
|
|
|
|
**Tech Stack:** React 18, MUI 6.5, `@moex-vibe/design-system` 0.1.0
|
|
|
|
---
|
|
|
|
## Files
|
|
|
|
### Modify
|
|
- `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` — удалить осиротевшие классы
|
|
|
|
### No changes
|
|
- Entity layer (`entities/broker-account/`, `entities/broker-position/`) — бизнес-логика не меняется
|
|
- Shared formatters (`shared/lib/formatters.ts`) — используются для форматирования значений
|
|
- Shared API layer (`shared/api/`) — не меняется
|
|
|
|
---
|
|
|
|
## Task 1: BrokerAllocationBar
|
|
|
|
Replace inline HTML + CSS classes with `<Box>` + `<Text>`.
|
|
|
|
- Empty: `<p className="broker-allocation-bar__empty">` → `<Text tone="muted">`
|
|
- Track: `<div className="broker-allocation-bar__track">` → `<Box>` with `sx`
|
|
- Segment: `<span style={{ width, background }}>` → `<Box>` with `sx`
|
|
- Legend: `<ul>` / `<li>` → `<Box>` with `sx` flex layout
|
|
- Swatch: `<span>` with inline style → `<Box>` with `sx`
|
|
|
|
Segment width/background и swatch colors остаются как inline styles (dynamic per item, from ALLOCATION_CONFIG).
|
|
|
|
## Task 2: BrokerAccountCard
|
|
|
|
Replace legacy shared components and CSS with DS equivalents.
|
|
|
|
- Skeleton block: `<SkeletonBlock>` → `<Skeleton>` from DS
|
|
- Eyebrow: `<p className="broker-account-card__eyebrow">` → `<Text variant="label" tone="secondary">`
|
|
- Title: `<h2 className="broker-account-card__title">` → `<Heading level={2}>`
|
|
- Stat labels/values: `<span>` + `<strong>` → `<Text variant="label" tone="secondary">` + `<Text>`
|
|
- Card wrapper: `<article className="broker-account-card broker-account-card--link">` → `<Surface>` with `component={Link}` or `<Box>` with `sx`
|
|
- Error: `<article className="broker-account-card broker-account-card--error">` → `<Surface>` + `<Alert>` + `<Button>`
|
|
- Card header layout: `<div className="broker-account-card__header">` → `<Box>` with flex `sx`
|
|
- Card grid: `<div className="broker-account-card__grid">` → `<Box>` with grid `sx`
|
|
- Card stat: `<div className="broker-account-card__stat">` → `<Box>` with grid `sx`
|
|
|
|
## Task 3: BrokerAccountsSummary
|
|
|
|
Replace skeleton, stats, typography with DS equivalents.
|
|
|
|
- Skeleton: `<SkeletonBlock>` → `<Skeleton>`
|
|
- Eyebrow: `<p className="broker-accounts-summary__eyebrow">` → `<Text variant="label" tone="secondary">`
|
|
- Title (serif): keep as `<h2>` with CSS class (DS Heading не использует serif, теряется brand-стиль)
|
|
- Status counts: `<span>` → `<Text>`
|
|
- Currency label: `<p className="broker-accounts-summary__currency">` → `<Text variant="label" tone="secondary">`
|
|
- Currency totals: `<strong className="broker-accounts-summary__total">` — keep as `<strong>` with CSS (serif)
|
|
- Metrics: `<dl>`/`<dt>`/`<dd>` → `<Metric>` for each stat
|
|
- Metric layout grid: `<div className="broker-accounts-summary__metrics">` → `<Box>` with grid `sx`
|
|
|
|
The hero section (`broker-accounts-summary__hero`) keeps its CSS classes — custom gradient, not replaceable.
|
|
|
|
## Task 4: BrokerAccountsPage
|
|
|
|
Replace page-level layout, typography, empty/error states.
|
|
|
|
- Page grid: `<div className="broker-accounts-page">` → `<Box>` with grid `sx`
|
|
- Header: `<header className="broker-accounts-page__header">` → `<Box>` with flex `sx`
|
|
- Eyebrow: `<p className="broker-accounts-page__eyebrow">` → `<Text variant="label" tone="secondary">`
|
|
- Title: `<h1 className="broker-accounts-page__title">` → `<Heading level={1}>` (note: serif lost)
|
|
- Caption: `<p className="broker-accounts-page__caption">` → `<Text tone="secondary">`
|
|
- Cards grid: `<div className="broker-accounts-page__cards">` → `<Box>` with grid `sx`
|
|
- Empty: `<section className="broker-accounts-empty">` → `<EmptyState>`
|
|
- Error: `<p style={{ color: ... }}>` → `<Text tone="negative">`
|
|
|
|
## Task 5: Clean up orphaned CSS
|
|
|
|
After all migrations, remove from `styles.css`:
|
|
- `.broker-accounts-page`, `.broker-accounts-page__header`, `.broker-accounts-page__eyebrow`, `.broker-accounts-page__title`, `.broker-accounts-page__caption`, `.broker-accounts-page__cards`
|
|
- `.broker-accounts-empty`
|
|
- `.broker-account-card`, `.broker-account-card--link`, `.broker-account-card--loading`, `.broker-account-card--error`, `.broker-account-card__header`, `.broker-account-card__eyebrow`, `.broker-account-card__title`, `.broker-account-card__opened`, `.broker-account-card__grid`, `.broker-account-card__stat`, `.broker-account-card__stat--wide`, `.broker-account-card__alert`, `.broker-account-card__retry`
|
|
- `.broker-allocation-bar`, `.broker-allocation-bar__track`, `.broker-allocation-bar__segment`, `.broker-allocation-bar__legend`, `.broker-allocation-bar__legend-item`, `.broker-allocation-bar__swatch`, `.broker-allocation-bar__empty`
|
|
- `.broker-accounts-summary__eyebrow`, `.broker-accounts-summary__currency`, `.broker-accounts-summary__total`, `.broker-accounts-summary__metrics`, `.broker-accounts-summary__metric`
|
|
- `.broker-accounts-summary__currency-card` and its children (header, currency, total, metrics, metric)
|
|
- `.broker-accounts-summary__status` and children
|
|
|
|
Keep: `.broker-accounts-summary`, `.broker-accounts-summary--loading`, `.broker-accounts-summary__hero`, `.broker-accounts-summary__title` (serif), shared `.broker-accounts-summary__eyebrow` shared rule (hero-specific), `.broker-accounts-summary__currency-grid`
|