Frontend
UI Kit, компоненты, хуки, сторы и state management
UI Kit — src/components/ui/
Для новых элементов интерфейса обязательно использовать UI Kit, а не писать кастомные стили:
import { Button, IconButton, Pagination } from "@/components/ui";
<Button variant="primary">Сохранить</Button>
<Button variant="secondary">Отмена</Button>
<Button variant="danger">Удалить</Button>
<IconButton icon={<Settings size={18} />} variant="ghost" label="Настройки" />
<Pagination {...pagination} isLoading={isFetching} />| Компонент | Назначение |
|---|---|
Button, IconButton | Кнопки (variants: primary, secondary, danger, ghost) |
Pagination | Пагинация (страницы, стрелки, размер) |
AdaptiveImage, AdaptiveVideo | Адаптивные медиа |
ReferenceVideoCard | Карточка референса |
AiBadge, CopyButton | Бейдж AI-контента, копирование |
calendar, date-picker, popover | Дата и попапы (react-day-picker, Radix) |
StubPage | Заглушка для недоделанных страниц |
Живое демо всех компонентов: страница /ui-kit.
Доменные компоненты — src/components/
25+ папок по доменам: admin/, calendar/, new-task/, ready/, references/, tasks/, safebot/, smart-selector/, content-maker/, notifications/, uploads/, sidebar/, layout/, modal/, toast/, theme/, login/, auth/.
Навигация сайдбара конфигурируется в src/components/sidebar/nav-config.ts — массивы пунктов по ролям (NAV_CLIENT, NAV_TEAM, NAV_ADMIN_BASE, NAV_SUPER_ADMIN) с привязкой к permissions.
Данные: TanStack Query
Серверное состояние — только через TanStack Query. Хуки в src/lib/api/hooks/:
| Хук | Назначение |
|---|---|
use-tasks.ts, use-tasks-ui.ts, use-task-stats.ts | Задачи: данные, UI-состояние, статистика |
use-ready-content.ts, use-ready-ui.ts | Готовый контент |
use-references.ts, use-references-ui.ts, use-reference-categories.ts, use-reference-upload.ts | Референсы и категории |
use-calendar.ts, use-calendar-ui.ts | Календарь |
use-companies.ts | Компании (админ) |
use-ai-admin.ts | AI-панель |
use-uploads.ts | Presigned-загрузки |
Прикладные хуки — src/hooks/
| Хук | Назначение |
|---|---|
use-pagination.ts | Пагинация с синхронизацией в URL (page, pageSize) |
use-responsive-page-size.ts | Размер страницы по ширине экрана |
useNotifications.ts | Polling in-app уведомлений (30s) |
usePushNotifications.ts | Регистрация Service Worker + push-подписка |
useAutoRequestPush.ts | Автозапрос разрешения на push |
useTaskCatalog.ts | Каталог Smart Selector с кэшем |
use-ai-prompt.ts | Мутация генерации AI-промпта |
Zustand — src/stores/
Локальное клиентское состояние, где Query не подходит: safebot-status.ts (статусы скачиваний в реальном времени).
Пагинация (паттерн)
Единая система (подробно — docs/PAGINATION.md в репо):
const pagination = usePagination(); // page/pageSize из URL
const { data, isFetching } = useTasksUi(); // хук учитывает пагинацию
<Pagination {...pagination} isLoading={isFetching} />