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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user