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
52 lines
6.4 KiB
Markdown
52 lines
6.4 KiB
Markdown
# spec.md - Фронтенд Инфраструктура - Современный стек
|
||
|
||
## Цель
|
||
Перевести инфраструктуру фронтенда MoexVibe на современный, надежный стек современных JavaScript/TypeScript библиотек, объединяющих в себе возможность развиваться и масштабироваться без технического долга.
|
||
|
||
## Область применения
|
||
Этот проект охватывает фундаментальный слой всех фронтенд-сервисов — все компонеты, формы, API-оболочки, работу с данными и UI-паттерны. Он лежит в основе каждого виджета, панели и пользовательского маршрута.
|
||
|
||
## Реквизиты
|
||
|
||
### Требования
|
||
|
||
1. **📦 Базовый HTTP-клиент** — современный HTTP-клиент с поддержкой автоматического повторного запроса на авторизацию и интерцепторов
|
||
2. **⚡ Управление состоянием** — реактивная stores архитектура для авторизации и глобальных конфигураций приложения
|
||
3. **🎨 Компонентная библиотека** — Material-UI компоненты на основе CSS-переменных, адаптированные к существующему дизайну
|
||
4. **📅 Работа с датами** — миниатюрная библиотека форматирования дат, соответствующая русскоязычной локализации
|
||
5. **🧪 Валидация форм** — типобезопасная библиотека форм с серверной валидацией
|
||
6. **🧑💼 Утилита для классов** — чистая, функциональная утилита для комбинирования CSS-классов
|
||
7. **📋 Таблицы** — высокоуровневый хуковный заново введенный реактивный набор инструментов для работы с данными в таблицах
|
||
|
||
### Ограничения
|
||
|
||
- Должна поддерживаться существующая архитектура 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) |