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,5 +1,6 @@
|
||||
import { createFileRoute, Link } from '@tanstack/react-router'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Alert, Badge, EmptyState, LoadingBlock, PageHeader } from '@nstart/ui'
|
||||
import { useDictionaries } from '@/api/queries'
|
||||
|
||||
export const Route = createFileRoute('/dictionaries/')({
|
||||
@@ -10,34 +11,53 @@ function DictionariesPage() {
|
||||
const { t } = useTranslation()
|
||||
const { data, isLoading, error } = useDictionaries()
|
||||
|
||||
if (isLoading) return <p className="text-zinc-500">{t('loading')}</p>
|
||||
if (error) return <p className="text-red-600">{t('error.failed')}: {String(error)}</p>
|
||||
if (isLoading) {
|
||||
return <LoadingBlock size="md" label={t('loading')} />
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert variant="error" title={t('error.failed')}>
|
||||
{String(error)}
|
||||
</Alert>
|
||||
)
|
||||
}
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
return <EmptyState title={t('dict.empty')} />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{(data ?? []).map((d) => (
|
||||
<Link
|
||||
key={d.id}
|
||||
to="/dictionaries/$name"
|
||||
params={{ name: d.name }}
|
||||
className="border border-zinc-200 rounded-lg p-4 hover:border-brand-500 hover:shadow-sm transition bg-white"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h2 className="font-semibold text-zinc-900">{d.displayName ?? d.name}</h2>
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-brand-50 text-brand-700">
|
||||
{d.scope}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-600 line-clamp-2 mb-2">{d.description}</p>
|
||||
<div className="flex gap-2 text-xs text-zinc-400">
|
||||
<span>v{d.schemaVersion}</span>
|
||||
<span>·</span>
|
||||
<span>{d.bundle}</span>
|
||||
<span>·</span>
|
||||
<span>{d.supportedLocales.join(', ')}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<div className="space-y-6">
|
||||
<PageHeader title={t('nav.dictionaries')} description={t('dict.list.subtitle')} />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{data.map((d) => (
|
||||
<Link
|
||||
key={d.id}
|
||||
to="/dictionaries/$name"
|
||||
params={{ name: d.name }}
|
||||
className="block bg-white border border-regolith rounded-lg p-4 transition shadow-card hover:shadow-hover hover:border-ultramarain/40"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2 gap-2">
|
||||
<h2 className="font-primary text-base text-ultramarain">
|
||||
{d.displayName ?? d.name}
|
||||
</h2>
|
||||
<Badge variant="info">{d.scope}</Badge>
|
||||
</div>
|
||||
{d.description && (
|
||||
<p className="text-sm text-carbon line-clamp-2 mb-3">{d.description}</p>
|
||||
)}
|
||||
<div className="flex gap-2 text-2xs uppercase tracking-label text-carbon/60">
|
||||
<span>v{d.schemaVersion}</span>
|
||||
<span>·</span>
|
||||
<span>{d.bundle}</span>
|
||||
<span>·</span>
|
||||
<span>{d.supportedLocales.join(', ')}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user