gui-react-spa

React SPA: 13 UI-компонентов, 3 лейаута, 57 страниц, 3 темы

Code

Source: IFCG/Reference

Files: 66

Stack:

ReactViteTailwindReact Query

Specification

gui-react-spa

Назначение

Полнофункциональный React SPA для enterprise-приложений: UI-компоненты, лейауты, темы, паттерны страниц (List+Table, Detail, Dashboard).

Стек

•React 19 + TypeScript

•Vite 7 (сборка, dev-сервер, SWC)

•Tailwind CSS v4 (утилити-классы, CSS-переменные для тем)

•TanStack React Query 5 (серверный стейт)

•React Router 7 (nested routes, lazy loading)

•Axios (HTTP-клиент с JWT interceptors)

•CVA (class-variance-authority) для вариантов компонентов

•Lucide React (иконки)

Контракты

UI-компоненты (components/ui/)

Компонент	Описание	Варианты (CVA)

|-----------|----------|----------------|

Button	Кнопка	6 variants (default, destructive, outline, secondary, ghost, link), 4 sizes (default, sm, lg, icon)
Badge	Статусные бейджи	5 variants (default, success, warning, destructive, secondary)
Dialog	Модальное окно	native HTML `<dialog>` API
Input	Текстовое поле	optional label
Select	Выпадающий список	options array
Textarea	Многострочное поле	—
Spinner	Индикатор загрузки	—
PhoneInput	Телефон	формат +7 XXX XXX-XX-XX

Layout-компоненты (components/layout/)

Компонент	Описание

|-----------|----------|

AppLayout	Обёртка: auth guard + sidebar + header + Outlet
Sidebar	Левая навигация: роль-фильтрация секций, мобильный overlay

Темы (index.css)

3 темы через `html[data-theme]` и CSS-переменные:

•light (default): белый фон, indigo primary (#6366f1)

•gray: серые тона (#2d3748)

•dark: тёмный (#151521, #1a1a2e)

Переменные: `--color-primary`, `--color-background`, `--color-foreground`, `--color-card`, `--color-sidebar`, `--color-border`, `--color-success`, `--color-warning`, `--color-destructive`.

Паттерны страниц

**List+Table**: Card-обёртка → строка фильтров (search debounced 300ms, select-фильтры) → таблица с hover → пагинация → Dialog для создания/редактирования.

**Detail**: Заголовок + статус Badge + кнопки действий → секции/табы вложенных сущностей.

**Dashboard**: Приветствие → сетка stat-карточек (1-2-4 колонки) → быстрые ссылки.

HTTP/Auth (lib/)

•`api.ts`: Axios instance с request interceptor (Bearer token) и response interceptor (401 → refresh → retry).

•`auth.ts`: localStorage (access + refresh tokens), `isLoggedIn()`, `setTokens()`, `clear()`.

•`utils.ts`: `cn()` (clsx + tailwind-merge), `formatDate()`, `formatMoney()`.

React Query хуки (lib/queries/)

Паттерн: `useEntities(params)` → `useQuery({ queryKey, queryFn })`, `useCreateEntity()` → `useMutation({ mutationFn, onSuccess: invalidate })`.

Зависимости

•Внешние: Node.js 20+

•npm: react, react-dom, react-router, @tanstack/react-query, axios, tailwindcss, lucide-react, class-variance-authority, clsx, tailwind-merge

•dev: vite, @vitejs/plugin-react-swc, typescript, @tailwindcss/vite

Реализации

Стек	Путь	Источник	Статус

|------|------|----------|--------|

React 19 + Vite + Tailwind v4	reference/	IFCG/Reference	проверен

Адаптация

При интеграции в новый проект:

•**Переименовать проект** — заменить "IFCG CRM" в sidebar.tsx, заголовках.

•**Навигация** — изменить navItems, directoryItems и т.д. в sidebar.tsx под свои разделы.

•**Темы** — при необходимости заменить primary color в index.css.

•**API URL** — настроить VITE_API_URL, изменить proxy в vite.config.ts.

•**Auth ключи** — заменить "ifcg_access"/"ifcg_refresh" в auth.ts на свои.

•**Queries** — заменить модули в lib/queries/ на свои сущности, сохраняя паттерн useQuery/useMutation.

•**Страницы** — заменить pages/ на свои, используя паттерны List+Table/Detail/Dashboard.

•**Шрифт** — Nunito установлен через fontsource, заменить при необходимости.