feat(admin-ui): migrate from custom components to @nstart/ui design system

Свои Modal/Button/inputs выкинуты — берём nstart-ui v0.1.3 как в других corp
React приложениях. Установка через .npmrc → repo.nstart.cloud/repository/npm-hosted/.

Что сделано:
- .npmrc: scope @nstart на corp Nexus + min-release-age=7
- deps: @nstart/ui ^0.1.3, @phosphor-icons/react ^2.1.10
- bumped peer deps: i18next ^26 + react-i18next ^17 (требование nstart-ui)
- styles.css: импорт @nstart/ui/styles/{fonts,theme}.css + critical @source
  директива (без неё Tailwind v4 tree-shaking дропнул бы все классы из dist либы)
- main.tsx: <NStartUiProvider> на корне
- DROP src/components/ui/Modal.tsx (свой Modal больше не нужен)

Routes:
- __root: LanguageSwitch вместо двух кнопок RU/EN, токены ultramarain/regolith/carbon
- dictionaries.index: PageHeader + Badge для scope chip + Alert/EmptyState/LoadingBlock
- dictionaries.$name: PageHeader с actions, Modal/Panel/Table/TableRow/Cell,
  IconButton с Phosphor (PencilSimple, XCircle), Button variant=primary/danger/ghost

Form (SchemaDrivenForm):
- TextInput/TextArea/SingleSelect/Checkbox + FieldLabel/Hint/Error из @nstart/ui
- FormSection + FormGrid columns=1|2 для группировки
- FormActions align=end с Button loading state
- Alert variant=error для server-side ошибок (422 IdempotencyConflict / 409 InProgress)
- ajv валидация по schema_json остаётся такой же (Draft-07, как у backend)

Bundle: 192KB → 659KB gzip — тянет echarts/lottie/brand assets из nstart-ui,
для internal admin tool приемлемо (cached after first load).
This commit is contained in:
Zimin A.N.
2026-05-04 02:24:44 +03:00
parent 7593699990
commit ebf1b03863
11 changed files with 436 additions and 409 deletions
+5 -19
View File
@@ -1,26 +1,12 @@
@import 'tailwindcss';
@import "tailwindcss";
@import "@nstart/ui/styles/fonts.css";
@import "@nstart/ui/styles/theme.css";
@theme {
--color-brand-50: oklch(0.97 0.02 250);
--color-brand-100: oklch(0.93 0.04 250);
--color-brand-200: oklch(0.86 0.07 250);
--color-brand-300: oklch(0.77 0.10 250);
--color-brand-400: oklch(0.66 0.13 250);
--color-brand-500: oklch(0.55 0.16 250);
--color-brand-600: oklch(0.48 0.17 250);
--color-brand-700: oklch(0.42 0.18 250);
--color-brand-800: oklch(0.34 0.16 250);
--color-brand-900: oklch(0.26 0.13 250);
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
/* Без @source Tailwind v4 не сгенерирует CSS для классов внутри dist/@nstart/ui */
@source "../node_modules/@nstart/ui/dist";
html,
body,
#root {
height: 100%;
}
body {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}