Миграция таблиц на дизайн-систему

Дата: 2026-06-21 Статус: запланировано

Контекст

Во frontend уже есть дизайн-система @moex-vibe/design-system и компонент DataTable, но часть экранов по-прежнему использует legacy-таблицы на сыром HTML и локальных helper-компонентах. Основные зоны миграции: DividendsTable, ScreenerTable, SharePositionTable, BondPositionTable, а также связанные legacy-элементы вроде shared/ui/Table и TableSkeleton.

При этом сложные таблицы проекта должны и дальше опираться на TanStack Table как на источник модели данных, сортировки и состояния. Цель фичи — не заменить TanStack Table, а стандартизировать табличный UI через единый дизайн-системный слой.

Связанные фичи

Базовая фича дизайн-системы: docs/features/design-system-foundation/spec.md
Связанная DS-миграция: docs/features/broker-account-sections-ds-migration/spec.md
Frontend styling docs: apps/docs/docs/frontend/styling.md
DS docs: apps/docs/docs/design-system/components.md

Цель

Перевести legacy-таблицы frontend на единый дизайн-системный табличный слой, построенный поверх TanStack Table, без изменения бизнес-логики, API-контрактов и доменной модели данных.

In scope

Уточнить и при необходимости расширить API DataTable в @moex-vibe/design-system под реальные сценарии проекта.
Мигрировать существующие таблицы frontend на DataTable.
Сохранить текущие сценарии сортировки, пагинации, кастомных ячеек и row actions.
Унифицировать loading / empty / error presentation вокруг дизайн-системных компонентов.
Сократить использование legacy table helpers в apps/frontend/src/shared/ui.

Out of scope

Изменение бизнес-логики портфелей, скринера, дивидендов, акций и облигаций.
Перенос предметно-специфичных row/cell-компонентов в дизайн-систему.
Изменение backend API, query-keys, маршрутизации или структуры доменных данных.
Замена TanStack Table на другой табличный движок.
Полная миграция всех форм и page sections вне областей, напрямую затронутых таблицами.

Требования

DataTable должен оставаться обёрткой над TanStack Table, а не отдельной несовместимой таблицей.
Табличный слой должен поддерживать:
- sortable columns;
- выравнивание ячеек;
- custom cell renderers;
- empty state;
- loading state / skeleton state;
- row actions;
- controlled pagination или pagination slot.
Доменные таблицы должны сохранять собственные описания колонок и кастомный рендеринг ячеек.
В приложении нельзя добавлять новые legacy table helpers взамен миграции на DS.
Во frontend не должны появляться новые прямые MUI table-компоненты.

Acceptance Criteria

DividendsTable, ScreenerTable, SharePositionTable и BondPositionTable используют дизайн-системный табличный слой.
Сортировка, пагинация и действия над строками работают так же, как до миграции.
DataTable документирован как компонент на базе TanStack Table.
Legacy table helpers не расширяются; после миграции их количество сокращается или они удаляются, если остаются без потребителей.
Изменение не требует корректировки backend-контрактов.
Для затронутых пакетов проходят тесты, lint и build.

4.7 KiB Raw Blame History Unescape Escape