90 lines
5.1 KiB
Markdown
90 lines
5.1 KiB
Markdown
# Миграция таблиц на дизайн-систему — 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:** Перевести legacy-таблицы frontend на единый дизайн-системный слой без изменения бизнес-логики
|
||
и без отказа от `TanStack Table`.
|
||
|
||
**Architecture:** `packages/design-system/src/components/DataTable` становится общим UI-каркасом для
|
||
таблиц, а приложение продолжает владеть `TanStack Table` instance, колонками и доменными cell renderers.
|
||
Вся предметная логика остаётся в `apps/frontend`, а дизайн-система забирает только переиспользуемую
|
||
табличную оболочку и связанные presentation-состояния.
|
||
|
||
**Tech Stack:** React 18, TanStack Table, `@moex-vibe/design-system`, Vitest, Testing Library.
|
||
|
||
**Связанные документы:**
|
||
|
||
- Spec: `docs/features/table-migration/spec.md`
|
||
- DS foundation: `docs/features/design-system-foundation/spec.md`
|
||
- DS migration precedent: `docs/features/broker-account-sections-ds-migration/spec.md`
|
||
|
||
---
|
||
|
||
## Task 1: Уточнить API `DataTable`
|
||
|
||
Подготовить минимальное расширение API `DataTable`, которое покрывает реальные кейсы существующих таблиц.
|
||
|
||
- Проверить текущий `DataTable` в `packages/design-system/src/components/DataTable/DataTable.tsx`.
|
||
- Зафиксировать минимально необходимую поддержку:
|
||
- `table` / table model from `TanStack Table`;
|
||
- empty state;
|
||
- loading state / skeleton mode;
|
||
- row actions column or slot;
|
||
- controlled pagination / pagination slot;
|
||
- cell alignment.
|
||
- Не добавлять API, которое не подтверждено текущими 4 таблицами.
|
||
- Не добавлять MUI table-компоненты в код приложения.
|
||
|
||
## Task 2: Мигрировать `DividendsTable`
|
||
|
||
Сделать `DividendsTable` первым и самым простым потребителем общего DS-слоя.
|
||
|
||
- Перевести сырой HTML table на `DataTable`.
|
||
- Сохранить текущие колонки и форматирование.
|
||
- Убедиться, что пустое состояние и базовый layout совпадают по смыслу с текущим экраном.
|
||
|
||
## Task 3: Мигрировать `ScreenerTable`
|
||
|
||
Перевести табличную оболочку `ScreenerTable` на `DataTable`, сохранив текущее поведение.
|
||
|
||
- Оставить sorting и pagination под контролем существующей логики.
|
||
- Сохранить кастомные ячейки и действия над строками.
|
||
- Не менять query/data-flow скринера.
|
||
|
||
## Task 4: Мигрировать `SharePositionTable`
|
||
|
||
Заменить локальную табличную разметку на `DataTable`, не вынося доменную логику в DS.
|
||
|
||
- Сохранить row/cell renderers в приложении.
|
||
- Сохранить update/delete actions.
|
||
- Не менять вычисления и форматтеры, если это не требуется для миграции UI.
|
||
|
||
## Task 5: Мигрировать `BondPositionTable`
|
||
|
||
Перевести наиболее сложную таблицу позиций облигаций на DS-каркас.
|
||
|
||
- Сохранить предметно-специфичные bond columns и rendering.
|
||
- Сохранить все row actions.
|
||
- Не менять финансовую логику, сортировку и представление данных сверх UI-слоя.
|
||
|
||
## Task 6: Очистка legacy-слоя и документация
|
||
|
||
После миграции проверить связанные legacy-компоненты и документацию.
|
||
|
||
- Проверить судьбу `apps/frontend/src/shared/ui/Table/*` и `TableSkeleton`.
|
||
- Удалить или сократить helper-код, если он остаётся без потребителей.
|
||
- Обновить `apps/docs/docs/design-system/components.md` и `apps/docs/docs/frontend/styling.md`:
|
||
- явно зафиксировать, что `DataTable` построен на `TanStack Table`;
|
||
- отразить ожидаемый способ миграции legacy-таблиц.
|
||
|
||
## Task 7: Верификация
|
||
|
||
Подтвердить, что миграция не сломала текущие контракты frontend.
|
||
|
||
- Запустить frontend-тесты для затронутых областей.
|
||
- Запустить lint для frontend и design-system.
|
||
- Запустить build frontend и design-system.
|
||
- Проверить, что во frontend не появились новые запрещённые MUI table imports.
|