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).
2026-05-04 02:24:44 +03:00
parent 7593699990
commit ebf1b03863
11 changed files with 436 additions and 409 deletions
@@ -1,42 +1,41 @@
 import { createRootRouteWithContext, Link, Outlet } from '@tanstack/react-router'
 import type { QueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import { LanguageSwitch } from '@nstart/ui'

 export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  component: RootLayout,
 })

+const LANG_OPTIONS = [
+  { id: 'ru-RU', label: 'RU' },
+  { id: 'en-US', label: 'EN' },
+]
+
 function RootLayout() {
  const { t, i18n } = useTranslation()
  return (
-    <div className="min-h-full flex flex-col">
-      <header className="border-b border-zinc-200 bg-white">
+    <div className="min-h-full flex flex-col bg-white">
+      <header className="border-b border-regolith bg-white">
        <div className="max-w-6xl mx-auto px-6 py-4 flex items-center gap-6">
-          <Link to="/" className="font-semibold text-lg text-brand-700">
+          <Link to="/" className="font-primary text-lg text-ultramarain">
            {t('app.title')}
          </Link>
          <nav className="flex gap-4 text-sm">
            <Link
              to="/dictionaries"
-              className="text-zinc-600 hover:text-brand-700"
-              activeProps={{ className: 'text-brand-700 font-medium' }}
+              className="text-carbon hover:text-ultramarain"
+              activeProps={{ className: 'text-ultramarain font-medium' }}
            >
              {t('nav.dictionaries')}
            </Link>
          </nav>
-          <div className="ml-auto flex items-center gap-2 text-sm">
-            <button
-              onClick={() => i18n.changeLanguage('ru-RU')}
-              className={`px-2 py-1 rounded ${i18n.language === 'ru-RU' ? 'bg-brand-50 text-brand-700' : 'text-zinc-500'}`}
-            >
-              RU
-            </button>
-            <button
-              onClick={() => i18n.changeLanguage('en-US')}
-              className={`px-2 py-1 rounded ${i18n.language === 'en-US' ? 'bg-brand-50 text-brand-700' : 'text-zinc-500'}`}
-            >
-              EN
-            </button>
+          <div className="ml-auto">
+            <LanguageSwitch
+              value={i18n.language}
+              options={LANG_OPTIONS}
+              onChange={(id) => i18n.changeLanguage(id)}
+            />
          </div>
        </div>
      </header>
@@ -2,10 +2,28 @@ import { useState } from 'react'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import axios from 'axios'
+import {
+  Alert,
+  Badge,
+  Button,
+  EmptyState,
+  IconButton,
+  LoadingBlock,
+  Modal,
+  PageHeader,
+  Panel,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TextInput,
+} from '@nstart/ui'
+import { PlusIcon, PencilSimpleIcon, XCircleIcon } from '@phosphor-icons/react'
 import { useDictionaryDetail, useRecords } from '@/api/queries'
 import { useCreateRecord, useUpdateRecord, useCloseRecord } from '@/api/mutations'
 import type { CreateRecordRequest, FlattenedRecord } from '@/api/client'
-import { Modal } from '@/components/ui/Modal'
 import { SchemaDrivenForm } from '@/components/form/SchemaDrivenForm'

 export const Route = createFileRoute('/dictionaries/$name')({
@@ -60,95 +78,106 @@ function DictionaryDetail() {
    edit.kind === 'create' ? createMut : edit.kind === 'edit' ? updateMut : null
  const serverError = serverErrorMessage(activeMutation?.error)

+  const totalRecords = recordsResult.data?.length ?? 0
+
  return (
-    <div>
-      <div className="flex items-center gap-2 mb-4">
-        <Link to="/dictionaries" className="text-sm text-zinc-500 hover:text-brand-700">
-          ← {t('nav.dictionaries')}
-        </Link>
-      </div>
+    <div className="space-y-6">
+      <PageHeader
+        breadcrumb={
+          <Link to="/dictionaries" className="text-sm text-carbon/70 hover:text-ultramarain">
+            ← {t('nav.dictionaries')}
+          </Link>
+        }
+        title={detailQuery.data?.displayName ?? name}
+        description={
+          detailQuery.data?.description
+            ? `${detailQuery.data.description} · ${totalRecords} ${t('dict.list.records')}`
+            : `${totalRecords} ${t('dict.list.records')}`
+        }
+        actions={
+          <Button
+            variant="primary"
+            leftIcon={<PlusIcon weight="bold" size={16} />}
+            disabled={!detailQuery.data}
+            onClick={() => setEdit({ kind: 'create' })}
+          >
+            {t('dict.action.create')}
+          </Button>
+        }
+      />

-      <div className="flex items-start justify-between mb-4">
-        <div>
-          <h1 className="text-2xl font-semibold mb-1">
-            {detailQuery.data?.displayName ?? name}
-          </h1>
-          {detailQuery.data?.description && (
-            <p className="text-sm text-zinc-500">{detailQuery.data.description}</p>
-          )}
-          <p className="text-sm text-zinc-500 mt-1">
-            {recordsResult.data?.length ?? 0} {t('dict.list.records')}
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => setEdit({ kind: 'create' })}
-          disabled={!detailQuery.data}
-          className="px-4 py-2 text-sm bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-50"
-        >
-          + {t('dict.action.create')}
-        </button>
-      </div>
+      {recordsResult.isLoading && <LoadingBlock size="md" label={t('loading')} />}

-      {recordsResult.isLoading && <p className="text-zinc-500">{t('loading')}</p>}
-      {recordsResult.error && <p className="text-red-600">{t('error.failed')}</p>}
+      {recordsResult.error && (
+        <Alert variant="error" title={t('error.failed')}>
+          {String(recordsResult.error)}
+        </Alert>
+      )}

      {recordsResult.data && recordsResult.data.length === 0 && (
-        <p className="text-zinc-500 italic">{t('dict.empty')}</p>
+        <EmptyState title={t('dict.empty')} />
      )}

      {recordsResult.data && recordsResult.data.length > 0 && (
-        <div className="overflow-x-auto bg-white border border-zinc-200 rounded-lg">
-          <table className="w-full text-sm">
-            <thead className="bg-zinc-50 text-zinc-600">
-              <tr>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.businessKey')}</th>
-                <th className="text-left px-4 py-2 font-medium">name / code</th>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.scope')}</th>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.locale')}</th>
-                <th className="text-left px-4 py-2 font-medium">{t('dict.col.validFrom')}</th>
-                <th className="text-right px-4 py-2 font-medium">{t('dict.col.actions')}</th>
-              </tr>
-            </thead>
-            <tbody>
+        <Panel>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeaderCell>{t('dict.col.businessKey')}</TableHeaderCell>
+                <TableHeaderCell>name / code</TableHeaderCell>
+                <TableHeaderCell>{t('dict.col.scope')}</TableHeaderCell>
+                <TableHeaderCell>{t('dict.col.locale')}</TableHeaderCell>
+                <TableHeaderCell>{t('dict.col.validFrom')}</TableHeaderCell>
+                <TableHeaderCell align="right">{t('dict.col.actions')}</TableHeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
              {recordsResult.data.map((r) => (
-                <tr key={r.id} className="border-t border-zinc-100 hover:bg-zinc-50">
-                  <td className="px-4 py-2 font-mono text-xs">{r.businessKey}</td>
-                  <td className="px-4 py-2">
+                <TableRow key={r.id}>
+                  <TableCell>
+                    <span className="font-mono text-2xs">{r.businessKey}</span>
+                  </TableCell>
+                  <TableCell>
                    {String(r.data.name ?? r.data.code ?? '—')}
-                  </td>
-                  <td className="px-4 py-2">
-                    <span className="text-xs px-2 py-0.5 rounded bg-zinc-100">{r.dataScope}</span>
-                  </td>
-                  <td className="px-4 py-2 text-zinc-500 text-xs">{r._meta?.locale ?? '—'}</td>
-                  <td className="px-4 py-2 text-zinc-500 text-xs">
-                    {new Date(r.validFrom).toLocaleDateString()}
-                  </td>
-                  <td className="px-4 py-2 text-right whitespace-nowrap">
-                    <button
-                      type="button"
-                      onClick={() => setEdit({ kind: 'edit', record: r })}
-                      className="text-xs text-brand-700 hover:underline mr-3"
-                    >
-                      {t('dict.action.edit')}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setEdit({ kind: 'close-confirm', record: r })}
-                      className="text-xs text-red-600 hover:underline"
-                    >
-                      {t('dict.action.close')}
-                    </button>
-                  </td>
-                </tr>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="info">{r.dataScope}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-2xs text-carbon/60">{r._meta?.locale ?? '—'}</span>
+                  </TableCell>
+                  <TableCell>
+                    <span className="text-2xs text-carbon/60">
+                      {new Date(r.validFrom).toLocaleDateString()}
+                    </span>
+                  </TableCell>
+                  <TableCell align="right">
+                    <div className="flex items-center justify-end gap-1">
+                      <IconButton
+                        label={t('dict.action.edit')}
+                        variant="default"
+                        onClick={() => setEdit({ kind: 'edit', record: r })}
+                      >
+                        <PencilSimpleIcon size={16} />
+                      </IconButton>
+                      <IconButton
+                        label={t('dict.action.close')}
+                        variant="danger"
+                        onClick={() => setEdit({ kind: 'close-confirm', record: r })}
+                      >
+                        <XCircleIcon size={16} />
+                      </IconButton>
+                    </div>
+                  </TableCell>
+                </TableRow>
              ))}
-            </tbody>
-          </table>
-        </div>
+            </TableBody>
+          </Table>
+        </Panel>
      )}

      <Modal
-        open={edit.kind === 'create' || edit.kind === 'edit'}
+        isOpen={edit.kind === 'create' || edit.kind === 'edit'}
        onClose={() => setEdit({ kind: 'closed' })}
        title={
          edit.kind === 'create'
@@ -157,6 +186,7 @@ function DictionaryDetail() {
              ? `${t('dict.action.edit')}: ${edit.record.businessKey}`
              : ''
        }
+        maxWidth="max-w-2xl"
      >
        {detailQuery.data && (edit.kind === 'create' || edit.kind === 'edit') && (
          <SchemaDrivenForm
@@ -183,50 +213,45 @@ function DictionaryDetail() {
      </Modal>

      <Modal
-        open={edit.kind === 'close-confirm'}
-        onClose={() => setEdit({ kind: 'closed' })}
+        isOpen={edit.kind === 'close-confirm'}
+        onClose={() => {
+          setEdit({ kind: 'closed' })
+          setCloseReason('')
+        }}
        title={t('dict.confirmClose.title')}
-        widthClass="max-w-md"
+        maxWidth="max-w-md"
      >
        {edit.kind === 'close-confirm' && (
          <div className="space-y-4">
-            <p className="text-sm text-zinc-600">
+            <p className="text-sm text-carbon">
              {t('dict.confirmClose.body', { key: edit.record.businessKey })}
            </p>
-            <div>
-              <label className="block text-sm font-medium text-zinc-700 mb-1">
-                {t('dict.confirmClose.reason')}
-              </label>
-              <input
-                type="text"
-                value={closeReason}
-                onChange={(e) => setCloseReason(e.target.value)}
-                className="w-full px-3 py-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
-                placeholder={t('dict.confirmClose.reasonPlaceholder')}
-              />
-            </div>
+            <TextInput
+              label={t('dict.confirmClose.reason')}
+              placeholder={t('dict.confirmClose.reasonPlaceholder')}
+              value={closeReason}
+              onChange={(e) => setCloseReason(e.target.value)}
+            />
            {serverErrorMessage(closeMut.error) && (
-              <div className="px-3 py-2 bg-red-50 border border-red-200 rounded text-sm text-red-700">
-                {serverErrorMessage(closeMut.error)}
-              </div>
+              <Alert variant="error">{serverErrorMessage(closeMut.error)}</Alert>
            )}
-            <div className="flex justify-end gap-2 pt-2">
-              <button
+            <div className="flex justify-end gap-2 pt-2 border-t border-regolith">
+              <Button
                type="button"
-                onClick={() => setEdit({ kind: 'closed' })}
+                variant="ghost"
                disabled={closeMut.isPending}
-                className="px-4 py-2 text-sm border border-zinc-300 rounded hover:bg-zinc-50 disabled:opacity-50"
+                onClick={() => setEdit({ kind: 'closed' })}
              >
                {t('form.cancel')}
-              </button>
-              <button
+              </Button>
+              <Button
                type="button"
+                variant="danger"
+                loading={closeMut.isPending}
                onClick={handleClose}
-                disabled={closeMut.isPending}
-                className="px-4 py-2 text-sm bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
              >
-                {closeMut.isPending ? t('form.saving') : t('dict.action.close')}
-              </button>
+                {t('dict.action.close')}
+              </Button>
            </div>
          </div>
        )}
@@ -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>
  )
 }