71 lines
4.7 KiB
Markdown
71 lines
4.7 KiB
Markdown
# Миграция таблиц на дизайн-систему
|
||
|
||
Дата: 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.
|