Make application shell components package-native
This commit is contained in:
DCCONSTRUCTIONS
+4
-1
@@ -20,13 +20,14 @@
|
||||
- Window/Confirmation;
|
||||
- AppHeader.
|
||||
- ApplicationShell/ApplicationPanel;
|
||||
- useApplicationWorkspace;
|
||||
- Icon/IconButton.
|
||||
|
||||
Локальные реализации удаляются только после функционального и визуального сравнения.
|
||||
|
||||
### 3. CMS и SEO
|
||||
|
||||
Используют те же компоненты и механику окон. CMS подключает DOM-layer, SEO — React-layer. Цветовые различия оформляются theme overrides.
|
||||
Используют те же компоненты и механику окон. CMS подключает DOM-layer, SEO — React-layer. Первым общим admin pattern подключается `MediaSourceField`/`createMediaSourceController`; storage API остаётся в приложении. Цветовые различия оформляются theme overrides.
|
||||
|
||||
### 4. Engine
|
||||
|
||||
@@ -47,6 +48,8 @@
|
||||
- установить опубликованные NODE.DC UI packages;
|
||||
- выбрать theme и accent;
|
||||
- передать фиксированный AppHeader, stage, navigation и content;
|
||||
- управлять shell через `useApplicationWorkspace`, а не набор локально связанных boolean;
|
||||
- передавать storage/upload в `MediaSourceField` как adapter callback;
|
||||
- использовать Window/Dropdown и канонический Icon вместо локальных реализаций;
|
||||
- проверять registry перед созданием локального control;
|
||||
- хранить доменные компоненты у себя.
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
|
||||
## Состав
|
||||
|
||||
1. `AppHeader` — фиксированная трёхосевая шапка `logo / workspace + navigation / profile`.
|
||||
1. `AppHeader` — фиксированная трёхосевая шапка `logo / workspace + navigation / profile`; внешний toolbar `68 px`, видимая строка `48 px`.
|
||||
2. `stage` — главное медиа- или предметное окно приложения.
|
||||
3. `navigation` — левая панель шириной `clamp(332px, 19.5vw, 352px)`.
|
||||
4. `content` — отдельное рабочее окно справа от навигации.
|
||||
5. `ApplicationPanel` — заголовок, действия expand/close и независимо прокручиваемое тело контента.
|
||||
|
||||
Позиции шапки не пересчитываются под конкретное приложение. Меняются подписи, доступные navigation actions, профиль и содержимое stage.
|
||||
Позиции шапки не пересчитываются под конкретное приложение. Меняются подписи, доступные navigation actions, профиль и содержимое stage. `HeaderNavigation`, `HeaderWorkspace`, `HeaderProfile`, `HeaderProfileButton` и `HeaderAvatar` должны использоваться как готовые части пресета; consumer не назначает им собственные размеры и offsets.
|
||||
|
||||
## Состояния desktop
|
||||
|
||||
@@ -21,6 +21,8 @@
|
||||
| Оконный режим | слева | средняя колонка | остаётся видимым справа |
|
||||
| Развёрнутый режим | слева | до правого края | уезжает за viewport |
|
||||
|
||||
Эти переходы принадлежат `useApplicationWorkspace` в React и `createApplicationWorkspaceController` в DOM. Оба API реализуют одинаковые команды: `openNavigation`, `closeNavigation`, `toggleNavigation`, `openView`, `closeView`, `setContentExpanded`.
|
||||
|
||||
Между панелями используется page gap `20px`. На Guideline-главной нижней rail нет: она является продуктовым элементом витрины Launcher, а не частью общего shell.
|
||||
|
||||
## Узкий viewport
|
||||
@@ -37,4 +39,4 @@ Modal остаётся portal-слоем. Его тело прокручивае
|
||||
- пункты navigation;
|
||||
- предметное содержимое content window.
|
||||
|
||||
Shell владеет геометрией, слоями, переходами и breakpoint-поведением.
|
||||
Shell владеет геометрией, слоями, переходами и breakpoint-поведением. См. готовый путь подключения в `docs/CONSUMPTION.md`.
|
||||
|
||||
@@ -27,11 +27,11 @@ Core не зависит от React.
|
||||
|
||||
`@nodedc/ui-react` предоставляет компоненты для Launcher/Hub, Engine, Ops и React-модулей. Компоненты контролируемые: бизнес-состояние остаётся у приложения, а визуальное и базовое интерактивное поведение принадлежит библиотеке.
|
||||
|
||||
`ApplicationShell` и `ApplicationPanel` образуют готовый launcher-style шаблон нового React-приложения. `Icon` предоставляет ограниченный аудированный словарь glyph, чтобы приложения не импортировали vendor-наборы независимо.
|
||||
`ApplicationShell` и `ApplicationPanel` образуют готовый launcher-style шаблон нового React-приложения. `useApplicationWorkspace` задаёт единую механику открытия navigation/content/expanded состояний. `MediaSourceField` отделяет стабильный UI выбора файла/URL от upload/storage API приложения. `Icon` предоставляет ограниченный аудированный словарь glyph, чтобы приложения не импортировали vendor-наборы независимо.
|
||||
|
||||
### DOM
|
||||
|
||||
`@nodedc/ui-dom` предоставляет контроллеры для CMS, BIM Viewer и других приложений без React. DOM-слой не создаёт вторую стилизацию: он использует те же классы и токены `@nodedc/ui-core`.
|
||||
`@nodedc/ui-dom` предоставляет контроллеры для CMS, BIM Viewer и других приложений без React, включая те же workspace- и media-source state machines. DOM-слой не создаёт вторую стилизацию: он использует те же классы и токены `@nodedc/ui-core`.
|
||||
|
||||
### Catalog
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@ Baseline намеренно отделяет готовые exports от изв
|
||||
|
||||
- ServiceRailCard — зрелый Launcher pattern, пока связанный с service catalog data.
|
||||
- WorkItemCard — зрелый Ops pattern, который нужно разделить на общий card shell и task-domain content.
|
||||
- MediaSourceField — общий preview/picker, но storage adapter остаётся в приложении.
|
||||
- Toast.
|
||||
- Tooltip.
|
||||
- Empty/Loading/Error states.
|
||||
|
||||
+13
-1
@@ -91,7 +91,7 @@ Pill navigation для верхней панели и компактного п
|
||||
- по центру workspace/navigation;
|
||||
- справа actions/profile.
|
||||
|
||||
Компонент фиксирует положение логотипа, высоту и выравнивание, но не знает маршруты конкретного приложения.
|
||||
Компонент фиксирует положение логотипа, высоту и выравнивание, но не знает маршруты конкретного приложения. Launcher-пресет состоит из внешнего toolbar `68 px` и отдельной видимой строки `48 px`; логотип, центральный switcher и profile-group центрируются по строке `48 px`, а не по всей внешней высоте. Эта двухслойная геометрия закрыта внутри компонента и не переопределяется локальным `className/style`.
|
||||
|
||||
В Hub-форме центр состоит из круглого workspace trigger и segmented navigation. Справа используется единая profile-group поверхность с иконкой, подписью и круглым avatar. Эти элементы нельзя заменять случайными standalone-кнопками, сохраняя только приблизительную позицию.
|
||||
|
||||
@@ -108,8 +108,20 @@ Pill navigation для верхней панели и компактного п
|
||||
- на мобильном navigation и content используют всю область под шапкой последовательно;
|
||||
- нижняя service rail не входит в шаблон — это элемент витрины Launcher.
|
||||
|
||||
`useApplicationWorkspace` является каноническим контроллером этих состояний для React. Приложение не должно заново связывать набор локальных boolean-state для navigation/content/expand. DOM-проекты используют идентичный `createApplicationWorkspaceController`.
|
||||
|
||||
Точные состояния и размеры зафиксированы в `docs/APPLICATION_TEMPLATE.md`.
|
||||
|
||||
## MediaSourceField
|
||||
|
||||
Общий компонент Launcher/CMS для медиа-поля: file control, имя файла, URL input, переключатель `HD / URL`, круглое превью, path/hint/error. Публичный API контролируемый.
|
||||
|
||||
Компонент владеет геометрией, доступностью и выбором источника. Приложение владеет file picker/media library, загрузкой в storage, валидацией, разрешениями и сохраняемым URL. Поэтому один и тот же компонент подключается к разным backend без fork. Для Vanilla DOM используется `createMediaSourceController`.
|
||||
|
||||
## SettingsCard и Switch
|
||||
|
||||
`SettingsCard` фиксирует нейтральную структуру админской группы: eyebrow/title/description/actions/body. `Switch` покрывает компактное включение/видимость внутри таких групп. Данные секции, сохранение и права остаются в consumer.
|
||||
|
||||
## AdminNavigationPanel
|
||||
|
||||
Левая выезжающая панель Hub/Launcher. Библиотека владеет оболочкой `352 px`, радиусом `21.6 px`, внутренними отступами, full-bleed context/navigation pills, круглыми icon surfaces и анимацией появления. Приложение передаёт workspace/company, маршруты, active id и footer identity.
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
# Подключение дизайн-системы
|
||||
|
||||
## Главный принцип
|
||||
|
||||
Новый проект не копирует исходники компонентов из Launcher, CMS или этого репозитория. Он устанавливает версию пакетов NODE.DC, импортирует общий CSS и собирает интерфейс из публичных exports. Обновление пакета должно исправлять геометрию во всех подключённых приложениях без повторной ручной вёрстки.
|
||||
|
||||
`control-c / control-v` допустим только для короткой композиции приложения: какие routes и данные переданы готовым компонентам. CSS, DOM-анатомия header, оконные переходы, media control и accessibility не копируются.
|
||||
|
||||
## React consumer
|
||||
|
||||
Минимальный состав нового оконного приложения:
|
||||
|
||||
1. `@nodedc/tokens`, `@nodedc/ui-core` и `@nodedc/ui-react` фиксируются одной версией.
|
||||
2. Один раз подключаются `tokens.css`, `themes.css` и `@nodedc/ui-core/styles.css`.
|
||||
3. Theme/accent задаются через `applyNodedcTheme`.
|
||||
4. Приложение собирает `ApplicationShell` из `AppHeader`, `AdminNavigationPanel` и `ApplicationPanel`.
|
||||
5. Все состояния shell берутся из `useApplicationWorkspace`.
|
||||
6. Routes, profile, stage content и бизнес-данные передаются props.
|
||||
|
||||
Нельзя добавлять local CSS к `AppHeader`, `HeaderNavigation`, `HeaderWorkspace`, `HeaderProfile` и `HeaderAvatar`. Если production Launcher изменяет канон, исправляется preset здесь и выпускается новая версия.
|
||||
|
||||
## DOM consumer
|
||||
|
||||
CMS/BIM подключают те же tokens/core styles и `@nodedc/ui-dom`. `createApplicationWorkspaceController`, `createMediaSourceController`, `createFloatingLayer` и `createModalController` связывают стабильную DOM-анатомию с тем же поведением, не вводя React в приложение.
|
||||
|
||||
## Adapter boundary
|
||||
|
||||
Общие компоненты не импортируют API конкретного проекта.
|
||||
|
||||
| Библиотека владеет | Приложение владеет |
|
||||
| --- | --- |
|
||||
| размеры, радиусы, поверхности | маршруты и тексты |
|
||||
| header/window/media DOM anatomy | API, auth и permissions |
|
||||
| open/close/expand state machine | получение и сохранение данных |
|
||||
| file/URL selector и preview | file picker/media library/storage upload |
|
||||
| focus, Escape, portal, responsive flow | доменная валидация и ошибки backend |
|
||||
|
||||
Например, `MediaSourceField` получает `onFileChange`. Consumer загружает файл, получает URL и возвращает его в контролируемое состояние. Компонент не знает S3, локальный диск, CMS media library или endpoint Launcher.
|
||||
|
||||
## Definition of done для нового общего компонента
|
||||
|
||||
- экспортируется из React или DOM package;
|
||||
- использует tokens/core styles без screen-local geometry;
|
||||
- показан в живом каталоге в ключевых состояниях;
|
||||
- записан в `registry/components.json`;
|
||||
- имеет документированную adapter boundary;
|
||||
- проходит desktop/mobile visual QA;
|
||||
- версия пакета зафиксирована consumer-ом.
|
||||
+1
-1
@@ -7,7 +7,7 @@
|
||||
| Контекст | Размер glyph | Hit target |
|
||||
| --- | ---: | ---: |
|
||||
| Плотная строка/label | `16px` | задаёт строка |
|
||||
| Обычная кнопка | `18px` | `46.72px` круг или кнопка с текстом |
|
||||
| Обычная кнопка | `18px` | `46px` круг или кнопка с текстом |
|
||||
| Крупное оконное действие | `20px` | `46.72px` круг |
|
||||
|
||||
Базовый stroke — `1.8`. Иконка наследует `currentColor`. Фон и active/disabled/hover состояния принадлежат `IconButton`, `Button`, navigation item или другому компоненту поверхности.
|
||||
|
||||
@@ -17,6 +17,8 @@
|
||||
|
||||
`src/app/LauncherApp.tsx`, `src/widgets/service-stage/ServiceStage.tsx` и те же global styles подтверждают общий application shell: stage сдвигается при открытии navigation/content, а content разворачивается независимо. Нижняя ServiceRail исключена из общего шаблона как продуктовая часть витрины.
|
||||
|
||||
Точный header состоит из внешнего toolbar `68 px` и внутренней видимой строки `48 px`. Именно внутренняя строка задаёт вертикальный центр logo/workspace/navigation/profile. `AdminOverlay.tsx` также подтверждает media-source pattern: `3.35rem` control, `2.78rem` file/source/preview controls и разделение UI от storage handler.
|
||||
|
||||
Существовавший `dc-ui-guideline` использован как исходный инвентарь. Он больше не должен развиваться как независимая копия после подключения центрального репозитория.
|
||||
|
||||
## SEO и CMS
|
||||
@@ -25,7 +27,7 @@
|
||||
|
||||
SEO содержит большой объём накопленных локальных overrides. Они являются материалом аудита, но не переносятся автоматически. В библиотеку попадает очищенный общий контракт.
|
||||
|
||||
CMS подтверждает необходимость DOM-пакета без React.
|
||||
CMS подтверждает необходимость DOM-пакета без React. `admin/admin.js` и `admin/admin.css` независимо повторяют устойчивый media pattern с file/URL source, круглым preview, path и upload hint; поэтому он перенесён в baseline, а не оставлен product candidate.
|
||||
|
||||
## Engine
|
||||
|
||||
|
||||
Reference in New Issue
Block a user