moex/moex-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
moex-vibe/docs/features/frontend-libraries/tasks.md
Sergey Krylov 1b6fd39be3
Some checks failed
CI / ci (pull_request) Failing after 2m55s
Details
CI / ci (push) Failing after 2m53s
Details
feat: add frontend infrastructure libraries (ky, Zustand, MUI, dayjs, clsx, tanstack-table, rhf, zod) 
- install ky, zustand, @mui/material, @fontsource/roboto, dayjs, clsx
- install @tanstack/react-table, react-hook-form, zod, @hookform/resolvers
- create kyClient.ts with auth interceptors
- create Zustand store for session (useSessionStore.ts)
- add MUI theming (theme.ts, ThemeProvider in AppProviders)
- add dayjs utils with ru locale (formatDate, formatRelative)
- add clsx cn() utility
- add base Table component using @tanstack/react-table
- create ADR-015 documenting architectural decisions
- create SDD artifacts: spec.md, plan.md, tasks.md
- build, lint, and 111 tests passing
2026-06-21 08:26:27 +03:00

3.6 KiB
Raw Permalink Blame History

tasks.md - Фронтенд Инфраструктура - Современный стек

Общее описание

Этот документ описывает пошаговые задачи по серьёзному техническому обновлению инфраструктуры фронтенда MoexVibe — внедрение современных библиотек и паттернов. Все библиотеки установлены, инфраструктура настроена. Остаётся миграция компонентов.

Цель

Перевести фронтенд на современный стек библиотек: ky (HTTP), Zustand (state), MUI (UI), dayjs (dates), react-hook-form+zod (forms), clsx (styles), @tanstack/react-table (tables).

Базовая инфраструктура — ✅ Выполнено

Начальная подготовка

  • Ветка codex/frontend-libraries-setup создана из main
  • Папка docs/features/frontend-libraries/ создана
  • spec.md, plan.md, tasks.md созданы
  • apps/docs/docs/adr/ADR-015-frontend-libraries-modernization.md создан

Установка зависимостей

  • @mui/material, @emotion/react, @emotion/styled
  • @mui/icons-material
  • zustand
  • ky
  • dayjs
  • react-hook-form, zod, @hookform/resolvers
  • clsx
  • @tanstack/react-table
  • @fontsource/roboto
  • react-is@^18.3.1 (overrides в package.json)
  • npm run lint — чисто
  • npm run build — успешно
  • npm run test — 111/111 тестов проходят

Созданные файлы (инфраструктура)

  • src/shared/api/kyClient.ts — ky с интерцепторами авторизации
  • src/entities/session/model/useSessionStore.ts — Zustand store сессии
  • src/app/styles/theme.ts — MUI тема с CSS-переменными
  • src/app/providers/AppProviders.tsx — обёрнут ThemeProvider + CssBaseline
  • src/shared/lib/dates/index.ts — dayjs утилиты (formatDate, formatRelative)
  • src/shared/lib/styles/clsx.ts — функция cn()
  • src/shared/ui/Table/Table.tsx — базовый компонент таблицы

Оставшиеся задачи — миграция компонентов

MID-приоритет (следующий спринт)

  • Zustand: переписать SessionProvider на useSessionStore, удалить ручной useState
  • MUI: преобразовать страницу логина на MUI TextField + Button
  • dayjs: заменить все new Date().toLocaleString() на formatDate() в виджетах
  • clsx: заменить шаблоны className="a b" + (c && "d") на cn()
  • TanStack Table: переписать таблицу позиций (PortfolioPositionsTable)

LOW-приоритет (по мере необходимости)

  • Form + Zod: добавить схемы в shared/lib/schema/, создать FormField
  • ky: интегрировать ky в request flow (замена fetch на kyApi)
  • MUI: полноценная реализация light/dark mode
  • MUI: преобразование остальных страниц и виджетов
  • CLSX: полный рефакторинг className по всему проекту
  • TanStack Table: пагинация через TanStack Query