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