UI Standard — MyHoreca Pay

Короткая точка входа в UI-систему. Полные правила: design-system.md, icon-system.md, ui-migration.md, ui-audit.md.

Источник правды

Слой	Путь	Назначение
Design system	frontend/src/shared/ui	Tokens, theme, layout, primitives, workflow widgets, icons, domain statuses

Canonical import: @/shared/ui

Структура страницы

import { PageShell, PageHeader, Card, AppDataTable, LoadingState, ErrorState } from '@/shared/ui';

export default function ExamplePage() {
  return (
    <PageShell>
      <PageHeader title="…" subtitle="…" actions={…} />
      <Card title="…">
        <AppDataTable columns={…} rows={…} />
      </Card>
    </PageShell>
  );
}

• Padding задаётся только в AppShellMain (.mainInner).
• PageShell = PageContainer + вертикальный Stack.
• Не создавать локальные .page-header / .btn / .data-table.

Ключевые компоненты

Группа	Компоненты
Actions	Button (primary / secondary / subtle / ghost / danger), IconButtonWithTooltip
Layout	PageShell, PageHeader, PageSection, Toolbar, FilterBar
Surfaces	Card, Panel, Surface
Feedback	LoadingState, ErrorState, EmptyState, NoPermissionState
Data	AppDataTable / DataTable, MoneyAmount, StatusBadge, domain *StatusBadge
Workflow	WorkflowStepper, StatusTabs, AdvancedDiagnosticsPanel, FileUploadDropzone
Icons	actionIcons, domainIcons, statusIcons, navIconMap

Запрещено

• Прямой import @mantine/core / @mantine/hooks вне shared/ui (ESLint).
• Прямой import @tabler/icons-react вне shared/ui (ESLint).
• Параллельный UI barrel (components/ui) — удалён; только @/shared/ui.
• Icon-only для posting / allocation / delete / retry без текста.
• Цвет как единственный носитель статуса.
• Page-local button/table systems.

Migration rule

Сначала контракт в shared/ui, затем страница на контракт. Матрица: ui-migration.md.