moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
moex-vibe/docs/features/broker-accounts-page-migration/plan.md

6.1 KiB
Raw Blame History

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