# 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)