moex-vibe/docs/features/table-migration/plan.md

Миграция таблиц на дизайн-систему — 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.