moex-vibe/docs/features/frontend-infrastructure-tooling/tasks.md

Frontend Infrastructure Tooling — Tasks

Phase 1: ky Migration

• Доработать shared/api/kyClient.ts: добавить normalizeEnvelope, request, kyApi, configureKyAuth
• Экспортировать kyApi (create экземпляр) и configureKyAuth из kyClient
• Перевести entities/session/api/sessionApi.ts на kyApi
• Перевести entities/stock/api/stockApi.ts на kyApi
• Перевести entities/bond/api/bondApi.ts на kyApi
• Перевести entities/search/api/searchApi.ts на kyApi
• Перевести entities/portfolio/api/portfolioApi.ts на kyApi
• Перевести entities/broker-account/api/brokerAccountApi.ts на kyApi
• Перевести entities/broker-position/api/brokerPositionApi.ts на kyApi
• Перевести entities/broker-operation/api/brokerOperationApi.ts на kyApi
• Перевести entities/broker-event/api/brokerEventApi.ts на kyApi
• Перевести features/screener/api/screenerApi.ts на kyApi
• Удалить shared/api/client.ts
• Заменить configureAuth() на configureKyAuth() в SessionProvider
• npm run test — все тесты проходят
• npm run build — сборка проходит

Phase 2: Biome Migration

• Research: проверить Biome plugin system на поддержку FSD/import-no-restricted-paths
• Установить @biomejs/biome (devDependency)
• Запустить npx @biomejs/biome migrate eslint --write
• Создать и настроить biome.json под проект
• ESLint оставлен только для FSD-правил (.eslintrc.cjs)
• Удалить зависимости: prettier, @typescript-eslint/, eslint-plugin- (ESLint core пока нужен для FSD)
• Удалить .prettierrc и .prettierignore — форматирование перешло к Biome
• Обновить package.json: lint → biome check src/
• Обновить .gitea/workflows/ci.yml: заменить eslint на biome для frontend
• Обновить pre-commit hook (lint-staged → biome + prettier)
• Прогнать biome check --write src/
• npm run test — все тесты проходят
• npm run build — сборка проходит

Phase 3: Unify API Types

• Аудит импортов: entity API используют types.ts (codegen) или responses.ts?
• Переключить все импорты с responses.ts на types.ts (если типы есть в codegen)
• Удалить shared/api/responses.ts (после переключения)
• normalizeEnvelope перенесён в shared/api/kyClient.ts
• npm run build — сборка проходит

Phase 4: MSW Browser

• Создать shared/lib/test/browser.ts (setupWorker из msw/browser)
• Установить и прокинуть mockServiceWorker.js: npx msw init public/
• Создать shared/config/env.ts с чтением и экспортом VITE_API_MOCK + VITE_API_URL
• В main.tsx: при VITE_API_MOCK === 'true' запускать worker.start()
• Проверить: VITE_API_MOCK=true npm run dev без бэкенда — приложение работает
• Проверить: VITE_API_MOCK=false npm run dev — запросы идут на бэкенд

Phase 5: Env Validation

• Разработать Zod-схему в shared/config/env.ts для всех VITE_* переменных
• Валидация env выполняется при импорте (safeParse в модуле env.ts)
• Проверить: при отсутствии обязательной переменной — понятная ошибка

Phase 6: TanStack Router

Setup

• Установить @tanstack/react-router, @tanstack/router-devtools
• Установить @tanstack/router-plugin (решение: code-first, без плагина)

Route files

• Создать src/app/routing/routeTree.tsx — все маршруты (code-first)
  • root route + AppLayout
  • index → HomePage
  • stocks/$secid → StockPage
  • bonds/$secid → BondPage
  • screener → ScreenerPage
  • login → LoginPage
  • register → RegisterPage
  • profile → ProfilePage (guard)
  • portfolios → PortfoliosListPage (guard)
  • portfolios/$id → PortfolioDetailPage (guard)
  • broker → BrokerAccountsPage (guard)
  • broker/$accountId → BrokerAccountOverviewPage (guard)
  • broker/$accountId/shares → BrokerPositionsPage (guard)
  • broker/$accountId/bonds → BrokerPositionsPage (guard)
  • broker/$accountId/operations → BrokerOperationsPage (guard)
  • broker/$accountId/events → BrokerEventsPage (guard)

Router integration

• Создать app/routing/router.ts: createRouter() с Route Tree
• Настроить beforeLoad для guard'ов (requireAuth)
• Настроить loaders для предзагрузки (TanStack Query) — отложено
• Заменить <BrowserRouter> + <Routes> → <RouterProvider> в App.tsx

Replace imports

• Заменить Link → @tanstack/react-router Link по всему проекту
• Заменить useNavigate → @tanstack/react-router
• Заменить useParams → @tanstack/react-router
• Заменить useSearchParams → useSearchParamsCompat (временная обёртка)
• Заменить useLocation → @tanstack/react-router

Tests

• Заменить MemoryRouter в тестах на createMemoryHistory + RouterProvider
• Обновить тестовые утилиты (test-utils.tsx)
• npm run test — все тесты проходят (125)
• npm run build — сборка проходит

Devtools

• Настроить @tanstack/router-devtools в dev-режиме
• Проверить навигацию по всем страницам вручную — отложено