timur.gorodetskiy/ct-forms-portal
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
chore/tansu-registry
ct-forms-portal/docs/REPAINT-MAP.md
T
Тимур Городецкий 109053e3af объединение CT, KPS, OID и дашборда в один портал 
Перенос, декомпозиция и перекраска форм CT/KPS/OID на @tnsu/ui-kit,
config-driven дашборд-реестр по трём типам документов. Из отслеживания
исключены артефакты сборки (lib-commonjs/jest-output/release) — забыты
в .gitignore ранее.
2026-08-28 16:21:34 +05:00

9.7 KiB
Raw Permalink Blame History

REPAINT-MAP — перекраска форм CT/OID/KPS на @tnsu/ui-kit

Живая карта работ по переводу форм портала на общий UI-пакет. Ведётся по ходу. Связано: docs/BEHAVIORS.md (инвентарь поведения форм).

Принцип

Красим один раз в ui-kit через токены, утверждаем в Storybook. В проекте — только композиция + узкодоменное. «Все цвета в ui-kit» = ui-kit это источник правды по токенам; потребитель (ct-forms-portal) держит зеркало src/styles/_design-tokens.scss (heft не резолвит scss из node_modules), формы красятся из него.

Компоненты не «для KPS», а «для семейства СТ-форм»: API проектируем сразу под 3 формы (CT/OID используют те же Fluent-примитивы). Правило аддитивности: не хватает пропа для CT/OID → добавляем опциональный (не ломает KPS, semver minor/patch). Escape hatch: не ложится на 3 формы без уродства → оставляем локальным.

Архитектура токенов

@tnsu/ui-kit  src/tokens/_tokens.scss         ← ИСТОЧНИК ПРАВДЫ (navy/gold, radius, shadow, bp, миксины)
      │  (копия при изменении)
      ▼
ct-forms-portal  src/styles/_design-tokens.scss ← зеркало для SPFx-сборки
      ▲                                            (импортят свои .scss: Dashboard, CtFormsPortal, …)
      │
forms/kps/components/common/_theme.scss          ← МОСТ: семантика формы ($accent,$ok,$supplier-bg…)
      ▲                                            → бренд-токены. Имена сохранены.
      │  @import '../common/theme'
12 доменных *.module.scss шагов                    ← перекрашиваются БЕЗ своих правок

Три корзины (по инвентарю KPS-формы)

A. Уже есть в ui-kit → заменить импорт (мгновенная перекраска)

Было (Fluent/локальное) Стало (ui-kit)
TextField TextInput / TextArea / MoneyInput (числа)
DefaultButton / PrimaryButton Button (variant secondary/primary)
низ StepShell (кнопки Назад/Далее) FormActions
MessageBar (+Type) Alert (map severity)
Icon Icon / IconSprite
локальный Pill Badge
локальный Breadcrumbs Stepper
локальный common/FormHeader FormHeader

B. Создать в ui-kit (нужны и CT/OID)

Новый компонент Драйвер / где нужен
Checkbox (+ строчный вариант) RequestRow, RequestLines, Step1ReadOnlyView (Шаг 1)
Spinner / Loader KpFileList, CurrencyRatesForm, AiCommentBlock, Step4Approval
IconButton UploadedKpList, AiCommentBlock, CurrencyRatesForm, Step4Approval
Dialog / Modal (generic, с телом+полями) Step3BuildCt, Step4Approval, InlineApprovalChain (ConfirmDialog не тянет)
Link UploadedKpList (скачать)

C. Доменное — остаётся в проекте (красим токенами + примитивами ui-kit)

  • Step3BuildCt/ComparisonMatrix, MatrixRowView, OfferCells — матрица сравнения СТ.
  • Step3BuildCt/CriteriaTable — таблица критериев.
  • common/ApprovalChain, Step4Approval/InlineApprovalChain — цепочки (пилюли из Badge).
  • Step2LoadKp/KpFileList, UploadedKpList — список файлов КП (статусы обработки Syntex/поток). Загрузку можно частично на FileDropzone + AttachmentList.

Семантические токены формы (мост _theme.scss)

Переменная Бренд-токен Было (Fluent)
$accent $navy-800 #0078d4
$accent-bg $navy-50 #eff6fc
$accent-border $navy-100 #c7e0f4
$accent-dark $navy-950 #004578
$accent-hover $navy-700 #106ebe
$ok / $ok-bg $green-600 / $green-50 #107c10 / #dff6dd
$danger / $danger-bg $red-500 / $red-50 #a4262c / #fde7e9
$warn-fg / $warn-bg $amber-700 / $amber-50 #7d5900 / —
$text / $muted / $muted-2 $gray-900 / $gray-500 / $gray-400 #323130 / #605e5c / #a19f9d
$border / $border-strong $gray-200 / $gray-300 #edebe9 / #c8c6c4
$head-bg / $hover / $surface $gray-50 / $gray-100 / $white #faf9f8 / #f3f2f1 / #fff
$supplier-bg / $supplier-border $gold-50 / $gold-100 #fffdf0 / #f2e9b8

Роадмап и статус

  • Фаза 0 — Токены. $amber-50 в ui-kit; зеркало src/styles/_design-tokens.scss; мост forms/kps/components/common/_theme.scss → бренд. heft build ок. Осталось в рамках гигиены: перевести Dashboard.module.scss/CtFormsPortal.module.scss (шелл) с хардкодов на зеркало — не блокер.
  • Фаза 1 — Примитивы (корзина B) собраны в ui-kit (build ок, 68 модулей): Checkbox (checked/indeterminate/disabled/readOnly/label/ariaLabel), Spinner (xSmall/small/medium/large, label, block), IconButton (icon: IconName, title, danger, size), Dialog (open/title/subText/onDismiss/footer/width, Esc+overlay close), Link (href/onClick/target/download). В спрайт добавлены иконки arrow-up, arrow-down, swap, refresh. Осталось: Storybook-утверждение дизайна → релиз ui-kit (skill publish-ui-kit) → npm i @tnsu/ui-kit@latest в ct-forms-portal.
  • [~] Фаза 2 — Перекраска KPS (по шагам; heft build после каждого):
    • Шаг 1 (Step1SelectPositions): Checkbox/Icon → ui-kit (+ariaLabel), Pill→адаптер над Badge (перекрасил все 6 мест сразу), #ffffff→$surface. build ок.
    • Шаг 2 (Step2LoadKp/*): MessageBar→Alert, Spinner/IconButton/Link/Icon→ui-kit, DefaultButton→Button, TextField→TextInput (в обёртке для className), литералы→токены. build ок. Косметика: TextInput без suffix/ariaLabel (KZT→placeholder); dropzone оставлен доменным. Долг: перед Шагом 4 добавить в Alert вариант info (MessageBarType.info) + переиздать ui-kit.
    • Шаг 3 (Step3BuildCt/*): AiCommentBlock (IconButton/Spinner/Alert), AddExtraRow + supplier toolbar (Button/TextInput), OfferCells/CriteriaTable (borderless TextInput/TextArea в обёртке .input), Dialog AI-промпта (ui-kit Dialog + footer). Матрица/критерии — домен, все литералы→токены ($accent-border/-bg/-dark/-hover, $supplier-bg, $warn-bg/-fg, $surface, $danger). Микро-кнопки в ячейках (×/+/удалить поставщика) оставлены доменными. build ок. Потребовало ui-kit 0.11.0: TextInput/TextArea borderless+ariaLabel+onKeyDown+autoFocus, Alert вариант info, иконка info.
    • Шаг 4 (Step4Approval.tsx + InlineApprovalChain.tsx): MessageBar→Alert (ok/err/info/warn), IconButton (arrow-up/down/trash/swap), Button (approve=primary, reject=danger, send/refresh с иконками), Dialog×2 (решение/замена) → ui-kit Dialog+footer, TextField→TextInput/TextArea, литералы→токены ($surface,$sh-2). Цепочки — домен, пилюли через Pill→Badge. build ок.
    • common: StepShell кнопки→Button (split-раскладка сохранена), common/FormHeader→адаптер над ui-kit FormHeader (right=Pill→Badge), Breadcrumbs→адаптер над Stepper (адаптивный), убран @fluentui References.scss из KpsCtForm.module.scss, #a4262c→$danger. Осиротевшие FormHeader.module.scss/Breadcrumbs.module.scss удалены.
    • ✅ Fluent полностью удалён из KPS-формы (0 импортов @fluentui). Фаза 2 завершена, build ок.
    • KPS = двойной эталон (структура + примитивы).
  • Фаза 3 — CT, затем OID. НЕ только перекраска: декомпозиция god-компонентов (Step3ComparisonTable.tsx ~2200–2500 стр) в структуру KPS + сборка из ui-kit + сохранить 100% поведения. Инвентарь поведения → резка → build/workbench на каждом шаге.

Заметки / риски

  • Декомпозиция CT/OID — самая рискованная часть; KPS = готовый чертёж (тот же скелет Step1→Step2→Step3 матрица→Step4; отличия доменные: CT disciplineCode/SMR/agskCode, OID parentGroup/priceSmeta).
  • При изменении токенов в ui-kit — синхронизировать зеркало src/styles/_design-tokens.scss.
Reference in New Issue View Git Blame Copy Permalink