Sergey Krylov
1b6fd39be3
- 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
61 lines
3.6 KiB
Markdown
61 lines
3.6 KiB
Markdown
# tasks.md - Фронтенд Инфраструктура - Современный стек
|
||
|
||
<details>
|
||
<summary>Общее описание</summary>
|
||
|
||
Этот документ описывает пошаговые задачи по серьёзному техническому обновлению инфраструктуры фронтенда MoexVibe — внедрение современных библиотек и паттернов. Все библиотеки установлены, инфраструктура настроена. Остаётся миграция компонентов.
|
||
|
||
## Цель
|
||
Перевести фронтенд на современный стек библиотек: ky (HTTP), Zustand (state), MUI (UI), dayjs (dates), react-hook-form+zod (forms), clsx (styles), @tanstack/react-table (tables).
|
||
</details>
|
||
|
||
## Базовая инфраструктура — ✅ Выполнено
|
||
|
||
### Начальная подготовка
|
||
- [x] Ветка `codex/frontend-libraries-setup` создана из `main`
|
||
- [x] Папка `docs/features/frontend-libraries/` создана
|
||
- [x] `spec.md`, `plan.md`, `tasks.md` созданы
|
||
- [x] `apps/docs/docs/adr/ADR-015-frontend-libraries-modernization.md` создан
|
||
|
||
### Установка зависимостей
|
||
- [x] `@mui/material`, `@emotion/react`, `@emotion/styled`
|
||
- [x] `@mui/icons-material`
|
||
- [x] `zustand`
|
||
- [x] `ky`
|
||
- [x] `dayjs`
|
||
- [x] `react-hook-form`, `zod`, `@hookform/resolvers`
|
||
- [x] `clsx`
|
||
- [x] `@tanstack/react-table`
|
||
- [x] `@fontsource/roboto`
|
||
- [x] `react-is@^18.3.1` (overrides в package.json)
|
||
- [x] `npm run lint` — чисто
|
||
- [x] `npm run build` — успешно
|
||
- [x] `npm run test` — 111/111 тестов проходят
|
||
|
||
### Созданные файлы (инфраструктура)
|
||
- [x] `src/shared/api/kyClient.ts` — ky с интерцепторами авторизации
|
||
- [x] `src/entities/session/model/useSessionStore.ts` — Zustand store сессии
|
||
- [x] `src/app/styles/theme.ts` — MUI тема с CSS-переменными
|
||
- [x] `src/app/providers/AppProviders.tsx` — обёрнут ThemeProvider + CssBaseline
|
||
- [x] `src/shared/lib/dates/index.ts` — dayjs утилиты (formatDate, formatRelative)
|
||
- [x] `src/shared/lib/styles/clsx.ts` — функция cn()
|
||
- [x] `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
|