- 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
6.4 KiB
6.4 KiB
spec.md - Фронтенд Инфраструктура - Современный стек
Цель
Перевести инфраструктуру фронтенда MoexVibe на современный, надежный стек современных JavaScript/TypeScript библиотек, объединяющих в себе возможность развиваться и масштабироваться без технического долга.
Область применения
Этот проект охватывает фундаментальный слой всех фронтенд-сервисов — все компонеты, формы, API-оболочки, работу с данными и UI-паттерны. Он лежит в основе каждого виджета, панели и пользовательского маршрута.
Реквизиты
Требования
- 📦 Базовый HTTP-клиент — современный HTTP-клиент с поддержкой автоматического повторного запроса на авторизацию и интерцепторов
- ⚡ Управление состоянием — реактивная stores архитектура для авторизации и глобальных конфигураций приложения
- 🎨 Компонентная библиотека — Material-UI компоненты на основе CSS-переменных, адаптированные к существующему дизайну
- 📅 Работа с датами — миниатюрная библиотека форматирования дат, соответствующая русскоязычной локализации
- 🧪 Валидация форм — типобезопасная библиотека форм с серверной валидацией
- 🧑💼 Утилита для классов — чистая, функциональная утилита для комбинирования CSS-классов
- 📋 Таблицы — высокоуровневый хуковный заново введенный реактивный набор инструментов для работы с данными в таблицах
Ограничения
- Должна поддерживаться существующая архитектура FSD и все текущие поверхности API
- Следует соблюдать обратную совместимость на уровне экспорта (т.е. утилитарные функции точно заменят существующие шаблоны, API-оболочка
request()может быть сохранена под капотом) - Предпочтителен код, дружественный к TypeScript, и четко разделенные слои в рамках FSD
- Нет изменений в архитектуре других слоев бэкенда (бэкенд предоставит необходимые DTO, спецификации API не будут изменены)
Приемлемость
✅ Встраиваемость — библиотеки small-затратные и не требуют переписывания больших частей кода ✅ Управляемость — архитектура позволяет поддерживать и тестировать каждый слой независимо ✅ Совместимость — используется с новой Rust-векторной архитектурой бэкенда, собранной в рамках проекта
Минимальная жизнеспособность / критерии приемки
- HTTP-клиент поддерживает GET, POST, PUT, DELETE, корректно перехватывает 401 и обновляет токен
- Хранилище данных Zustand обеспечивает complete состояние авторизации и отслеживает флаг монтирования
- MUI интегрирована с существующими CSS-переменными, поддерживает light/dark темы и темную тему по умолчанию, используется в примере формы (login/register)
- dayjs правильно форматирует дату согласно шаблону 'DD.MM.YYYY' и поддерживает русскоязычную локализацию
- Валидация форм ловит ошибки в реальном времени, отображает сообщения в правой части поля и заблокирует отправку при наличии ошибок
- Утилита clsx работает идентично существующим шаблонам связывания классов, поддерживает 2+ значения
- Таблица автоматически сортируется, пагинируется и фильтруется через TanStack Query и реализует переиспользуемый переиспользуемый компонент
tanstack-react-table - Все единицы измерения полностью покрыты тестами (используются существующие шаблоны тестирования)
- Сборка проходи успешно (
npm run build), линтер проходит (npm run lint)
Архитектурные инварианты
- Разделение слоев FSD остается неизменным (app, pages, widgets, features, entities, shared)
- Заключение: только усовершенствование реализации, без изменений контрактов API
- Преемственность UI-паттернов должна быть реализована между существующими компонентами и новыми шаблонами
- Тесты оказываются вдоль с соответствующим кодом без снятия состояния из памяти
- Отсутствие логических ошибок (в том числе рандомной, SR-CLP и страхования от утечек SSR)