moex-vibe/docs/features/broker-account-sections-ds-migration/tasks.md

Дизайн-системный рефакторинг брокерских страниц — Tasks

Дата: 2026-06-21 Связанные документы:

• Spec
• Plan

Task 1: BrokerAccountLayout

• Заменить div.broker-account на <Box component="div">
• Перевести header + h1 на <Box> + <Heading level={1}>
• Перевести nav на <Box component="nav"> + <NavLink> (оставить className callback)
• Перевести div.broker-account__workspace на grid <Box>
• Перевести div.broker-account__content на <Box>
• Удалить соответствующие CSS-selectors из styles.css

Task 2: BrokerAccountOverviewPage + BrokerSummary + BrokerAssetCards

• Перевести BrokerSummary на <Box> + <Text>
• Перевести eyebrow/label на <Text variant="label" tone="secondary">
• Перевести <strong> значений на <Text sx={{ fontWeight: 700 }}>
• Перевести <ul> cash на <Box component="ul">
• Перевести BrokerAssetCards на <Box> + <Link> + <Text>
• Перевести BrokerAccountOverviewPage container на <Box component="div">
• Оставить hero-gradient без изменений (Out of scope)

Task 3: BrokerOverviewSkeleton

• Заменить импорт SkeletonBlock на DS <Skeleton>
• Перевести контейнеры на <Box>
• Сделать circular skeleton для портфельной карточки
• Сделать text skeleton для текстовых placeholder'ей

Task 4: BrokerAllocationChart (wrap only)

• Перевести <figure> на <Box component="figure">
• Перевести <figcaption> на <Box component="figcaption">
• Перевести <p> пустого состояния на <Text tone="muted">
• Перевести <ul> / <li> легенды на <Box component="ul"> + <Box component="li">
• Перевести swatch на <Box> с inline-цветом в sx
• Перевести тексты легенды на <Text> / <Box component="span">
• Перевести negative-список на <Box component="ul">
• Удалить CSS для .broker-allocation* (кроме inline SVG) в styles.css

Task 5: BrokerPositionTable + PositionTicker

• Перевести вспомогательные стили на <Box sx={{...}}>
• Перевести <h2> на <Heading level={2}> с кастомной sx
• Перевести alert-тексты на <Text tone="negative">
• Перевести пагинационные <button> на <Button variant="secondary">
• Перевести loading-overlay на <Box>
• Перевести PositionTicker ссылки на <Link> + <Text sx={{ fontWeight: 700 }}>
• Сохранить loading-spinner (глобальный класс, пока без замены)

Task 6: TableSkeleton (DS Skeleton)

• Убрать импорт SkeletonBlock
• Заменить на <Skeleton height={12} width={col.width} shape="text" />
• Сделать прогон тестов, убедиться что нет предупреждений

Task 7: BrokerOperationsTable

• Перевести вспомогательные стили на <Box sx={{...}}>
• Перевести <h2> на <Heading level={2}>
• Перевести headerAction container на <Box>
• Перевести пагинационные <button> на <Button variant="secondary">
• Перевести alert-тексты на <Text tone="negative">
• Перевести empty-тексты на <Text tone="muted">
• Перевести <label> + <select> на <Box component="label"> + <select>
• Оставить loading-spinner для overlay (глобальный класс)

Task 8: BrokerPositionsPage + BrokerOperationsPage

• Перевести BrokerPositionsPage на <Box component="section"> + <Heading> + <Text>
• Перевести BrokerOperationsPage на <Box> + <Heading> + <Box component="label"> + <select>
• Убедиться, что role="alert" сохраняется через <Text tone="negative">

Task 9: SkeletonBlock удаление

• Удалить apps/frontend/src/shared/ui/SkeletonBlock.tsx
• Удалить экспорт из apps/frontend/src/shared/ui/index.ts
• Проверить grep по SkeletonBlock — 0 совпадений

Task 10: Очистка styles.css

• Удалить блоки .broker-account__*
• Удалить блоки .broker-overview__* (кроме SVG-связанных)
• Удалить блоки .broker-allocation__* (кроме SVG-внутренних, если остались)
• Удалить блоки .broker-operations__toolbar*
• Оставить .loading-spinner и :root переменные

Task 11: Финальная проверка

• npm run test:frontend
• npm run lint -w apps/frontend
• npm run build:frontend
• grep по broker-(account|overview|allocation) в TSX — 0 совпадений
• grep по SkeletonBlock в TSX — 0 совпадений
• npm run format для форматирования