moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
moex-vibe/docs/features/design-system-foundation/tasks.md

4.0 KiB
Raw Permalink Blame History

Design System Foundation — Tasks

Исполнять по plan.md последовательно, используя TDD и отмечая checkbox только после успешной проверки соответствующего шага.

1. Pre-flight и workspace

  • Подтвердить ветку, чистый worktree и зелёные baseline tests/lint/build.
  • Добавить packages/design-system в npm workspaces и root scripts.
  • Создать package manifest, TypeScript/Vitest/ESLint configs и test setup.
  • Установить зависимости; проверить пустой package build/test/lint.
  • Закоммитить workspace shell.

2. Tokens

  • Написать RED-тесты alias resolver: chain, missing target, cycle, type mismatch.
  • Реализовать token schema и resolver; получить GREEN.
  • Написать RED-тесты целостности трёх token levels.
  • Добавить primitive/reference tokens.
  • Добавить light semantic tokens только через aliases.
  • Добавить component tokens только через semantic aliases.
  • Проверить guards, build и отсутствие hardcoded values вне primitives.
  • Закоммитить token foundation.

3. MUI adapter и Storybook

  • Написать RED-тесты MUI theme contract.
  • Реализовать createMoexVibeTheme, type augmentation и provider; получить GREEN.
  • Настроить Storybook React/Vite с общим theme decorator.
  • Подключить addon-a11y и Vitest browser project с Playwright Chromium.
  • Проверить package и static Storybook build.
  • Закоммитить theme adapter и Storybook workbench.

4. Core UI

  • Реализовать через TDD Text, Heading, Link, Button, IconButton.
  • Добавить их stories, type checks и a11y checks.
  • Реализовать через TDD TextField, Select, Checkbox.
  • Реализовать через TDD Surface, Card, Chip, Badge.
  • Реализовать через TDD Alert, Dialog, Skeleton, Progress.
  • Добавить обязательные states, responsive stories и visual baselines.
  • Проверить unit/story/a11y/build gates и закоммитить Core UI.

5. Product patterns

  • Реализовать через TDD DataTable, включая caption, sorting semantics и density variants.
  • Реализовать через TDD Metric, Money, PriceChange без color-only semantics.
  • Добавить financial stories и стабильные screenshot baselines.
  • Реализовать через TDD FormField и FilterBar.
  • Реализовать через TDD EmptyState, ErrorState, LoadingState.
  • Проверить unit/story/a11y/visual gates и закоммитить patterns.

6. Интеграция и governance

  • Написать RED-тест frontend provider integration.
  • Подключить workspace package и Inter во frontend shell; удалить локальную MUI theme.
  • Enforce ESLint allowlist для Box, Stack, Grid.
  • Подтвердить, что product pages и legacy CSS не мигрированы.
  • Создать Docusaurus-раздел с foundations, catalog, rules и accessibility.
  • Создать ADR-016 и changelog 0.1.0.
  • Обновить sidebar, styling docs и README; собрать docs.

7. CI и завершение

  • Добавить design-system, Storybook, Playwright, visual и docs gates в CI.
  • Запустить полный DoD из Task 12 plan.md.
  • Запросить code review и устранить подтверждённые scope issues.
  • Повторить полный DoD, отметить все tasks и сделать финальный commit.