Establish NODE.DC design system baseline
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,127 @@
|
||||
{
|
||||
"schemaVersion": "1.0.0",
|
||||
"purpose": "Known reusable UI inventory that is recorded but not yet promised as a stable package export.",
|
||||
"candidates": [
|
||||
{
|
||||
"id": "calendar-popover",
|
||||
"classification": "planned-primitive",
|
||||
"priority": "P1",
|
||||
"referenceSources": ["launcher", "task-manager"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["dropdown", "button", "field"],
|
||||
"requiredBehavior": ["portal", "locale-aware labels", "single date", "date range", "keyboard navigation"],
|
||||
"reasonNotBaseline": "Current Launcher and Task Manager implementations must be reconciled before one API is declared canonical."
|
||||
},
|
||||
{
|
||||
"id": "profile-menu",
|
||||
"classification": "planned-pattern",
|
||||
"priority": "P1",
|
||||
"referenceSources": ["launcher", "task-manager"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["dropdown", "button", "status-badge"],
|
||||
"requiredBehavior": ["avatar trigger", "identity summary", "role/workspace switch", "logout action"],
|
||||
"reasonNotBaseline": "Identity and role data contracts differ between Hub and Ops and must remain application-owned."
|
||||
},
|
||||
{
|
||||
"id": "action-dropdown",
|
||||
"classification": "planned-pattern",
|
||||
"priority": "P1",
|
||||
"referenceSources": ["task-manager", "launcher"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["dropdown"],
|
||||
"requiredBehavior": ["commands", "disabled rows", "danger row", "optional groups", "keyboard navigation"],
|
||||
"reasonNotBaseline": "Floating behavior is stable; command-row API still needs validation against Ops consumers."
|
||||
},
|
||||
{
|
||||
"id": "data-table",
|
||||
"classification": "planned-pattern",
|
||||
"priority": "P1",
|
||||
"referenceSources": ["launcher", "task-manager"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["button", "select", "status-badge", "field"],
|
||||
"requiredBehavior": ["toolbar", "responsive overflow", "row actions", "editable cells", "loading", "empty state"],
|
||||
"reasonNotBaseline": "The library should own presentation and interaction slots, not adopt Launcher entity schemas or Plane table models."
|
||||
},
|
||||
{
|
||||
"id": "side-navigation",
|
||||
"classification": "planned-pattern",
|
||||
"priority": "P1",
|
||||
"referenceSources": ["launcher", "engine"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["glass-surface", "button", "status-badge"],
|
||||
"requiredBehavior": ["sections", "active item", "optional nested groups", "compact viewport"],
|
||||
"reasonNotBaseline": "Inspector accordion is implemented; application-level navigation requires a separate route-aware contract."
|
||||
},
|
||||
{
|
||||
"id": "avatar-stack",
|
||||
"classification": "planned-primitive",
|
||||
"priority": "P1",
|
||||
"referenceSources": ["engine", "task-manager"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["dropdown"],
|
||||
"requiredBehavior": ["overflow count", "presence", "picker mode", "fallback initials"],
|
||||
"reasonNotBaseline": "Engine picker behavior and Task Manager presence semantics must not be coupled accidentally."
|
||||
},
|
||||
{
|
||||
"id": "service-rail-card",
|
||||
"classification": "product-pattern",
|
||||
"priority": "P2",
|
||||
"referenceSources": ["launcher"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["glass-surface", "status-badge", "button"],
|
||||
"requiredBehavior": ["ambient media", "access status", "selected state", "open/request action"],
|
||||
"reasonNotBaseline": "Likely reusable for product catalogs, but current contract is tightly connected to Launcher service data."
|
||||
},
|
||||
{
|
||||
"id": "work-item-card",
|
||||
"classification": "product-pattern",
|
||||
"priority": "P2",
|
||||
"referenceSources": ["task-manager"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["glass-surface", "avatar-stack", "status-badge", "action-dropdown"],
|
||||
"requiredBehavior": ["selected state", "drag state", "assignees", "dates", "quick actions"],
|
||||
"reasonNotBaseline": "The visual pattern is mature, but task-domain fields must be separated from the reusable card shell."
|
||||
},
|
||||
{
|
||||
"id": "media-source-field",
|
||||
"classification": "planned-pattern",
|
||||
"priority": "P2",
|
||||
"referenceSources": ["launcher", "seo"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["field", "button", "glass-surface"],
|
||||
"requiredBehavior": ["preview", "source picker", "validation", "clear/replace"],
|
||||
"reasonNotBaseline": "File and storage integration remains application-specific and needs adapter slots."
|
||||
},
|
||||
{
|
||||
"id": "toast",
|
||||
"classification": "missing-primitive",
|
||||
"priority": "P2",
|
||||
"referenceSources": ["task-manager"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["status-badge", "button"],
|
||||
"requiredBehavior": ["stack", "timeout", "persistent error", "action", "screen-reader announcement"],
|
||||
"reasonNotBaseline": "No cross-application contract has been audited yet."
|
||||
},
|
||||
{
|
||||
"id": "tooltip",
|
||||
"classification": "missing-primitive",
|
||||
"priority": "P2",
|
||||
"referenceSources": ["launcher", "task-manager", "engine"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["dropdown"],
|
||||
"requiredBehavior": ["hover", "focus", "delay", "viewport placement"],
|
||||
"reasonNotBaseline": "Needs a small dedicated accessibility contract rather than reuse of an application tooltip."
|
||||
},
|
||||
{
|
||||
"id": "empty-loading-error",
|
||||
"classification": "planned-pattern",
|
||||
"priority": "P2",
|
||||
"referenceSources": ["launcher", "seo", "task-manager"],
|
||||
"expectedPackage": "@nodedc/ui-react",
|
||||
"dependsOn": ["button", "status-badge"],
|
||||
"requiredBehavior": ["empty message", "retry", "loading progress", "fatal error"],
|
||||
"reasonNotBaseline": "Copy and domain actions vary; the layout contract still needs examples from all product families."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
{
|
||||
"schemaVersion": "1.0.0",
|
||||
"components": [
|
||||
{
|
||||
"id": "glass-surface",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["GlassSurface"],
|
||||
"domContract": ["nodedc-glass", "nodedc-material-rim"],
|
||||
"summary": "Canonical matte/glossy glass surface for cards, panels and window shells.",
|
||||
"anatomy": ["theme-provided surface", "optional material rim", "backdrop blur", "content"],
|
||||
"variants": ["default", "strong", "soft"],
|
||||
"rules": [
|
||||
"Geometry is invariant across application themes.",
|
||||
"A material rim is a glass highlight, not a hard product-colored border.",
|
||||
"Nested surfaces must use a softer tone to avoid card-inside-card noise."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "button",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["Button", "IconButton"],
|
||||
"domContract": ["nodedc-button", "nodedc-icon-button"],
|
||||
"summary": "Text and icon actions with shared sizing, states and computed accent contrast.",
|
||||
"variants": ["primary", "secondary", "ghost", "danger", "accent"],
|
||||
"rules": [
|
||||
"Icon-only actions are circular by default.",
|
||||
"Filled accent actions derive foreground contrast from the actual accent.",
|
||||
"Destructive actions remain neutral until confirmation unless danger is the principal message."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "field",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["FieldFrame", "TextField", "TextAreaField"],
|
||||
"domContract": ["nodedc-field", "nodedc-field__control"],
|
||||
"summary": "Textual form controls with consistent labels, hints, geometry and focus surface.",
|
||||
"rules": [
|
||||
"Labels and validation copy are part of the field contract.",
|
||||
"Keyboard focus changes the surface and remains visible without a browser-blue outline."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "checker",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["Checker"],
|
||||
"domContract": ["nodedc-checker"],
|
||||
"summary": "Binary setting control derived from the redesigned Engine environment settings.",
|
||||
"rules": [
|
||||
"The visual anchor is circular, not a square native checkbox.",
|
||||
"The control exposes checkbox semantics through role and aria-checked."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "range-control",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["RangeControl"],
|
||||
"domContract": ["nodedc-range"],
|
||||
"summary": "Filled pill range control with embedded label and value from redesigned Engine settings.",
|
||||
"rules": [
|
||||
"The accent fill follows the active application theme.",
|
||||
"The native range remains the accessible input while its chrome is visually replaced."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "color-field",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["ColorField"],
|
||||
"domContract": ["nodedc-color-field"],
|
||||
"summary": "Combined color picker and textual value for settings/inspectors."
|
||||
},
|
||||
{
|
||||
"id": "dropdown",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["Dropdown"],
|
||||
"domPackage": "@nodedc/ui-dom",
|
||||
"domExports": ["createFloatingLayer"],
|
||||
"domContract": ["nodedc-dropdown-surface", "nodedc-dropdown-option"],
|
||||
"summary": "Shared portal/fixed floating layer for action and selection menus.",
|
||||
"behavior": ["portal to document body", "viewport clamp", "vertical flip", "outside pointer close", "Escape close", "scroll and resize reposition", "one open dropdown per window"],
|
||||
"rules": [
|
||||
"Never render a runtime dropdown as an absolute child of a card, sticky header or scroll container.",
|
||||
"Action menus and selection menus share floating behavior even when their row content differs."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "select",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["Select"],
|
||||
"domPackage": "@nodedc/ui-dom",
|
||||
"domExports": ["createSelectController"],
|
||||
"summary": "Theme-independent selection control using the canonical dropdown layer.",
|
||||
"behavior": ["controlled value", "optional search", "disabled options", "selected state", "portal menu"]
|
||||
},
|
||||
{
|
||||
"id": "window",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["Window", "WindowFooterActions"],
|
||||
"domPackage": "@nodedc/ui-dom",
|
||||
"domExports": ["createModalController"],
|
||||
"domContract": ["nodedc-overlay", "nodedc-window"],
|
||||
"summary": "Canonical controlled window for modal and right-side panel presentations.",
|
||||
"behavior": ["portal to body", "focus entry", "focus trap", "focus restore", "Escape close", "backdrop close policy", "body scroll lock"],
|
||||
"rules": [
|
||||
"Open state belongs to the application; focus/layer behavior belongs to the component.",
|
||||
"The same window contract is used by Launcher, CMS and SEO; theme variables supply color differences."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "confirmation-modal",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["ConfirmationModal"],
|
||||
"summary": "Async-safe confirmation window for destructive and consequential operations.",
|
||||
"behavior": ["pending state", "double-submit protection", "disabled close policy while pending"]
|
||||
},
|
||||
{
|
||||
"id": "segmented-control",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["SegmentedControl"],
|
||||
"domContract": ["nodedc-segmented"],
|
||||
"summary": "Pill navigation used in the shared top header and compact mode switches."
|
||||
},
|
||||
{
|
||||
"id": "app-header",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["AppHeader", "HeaderProfile", "HeaderWorkspace"],
|
||||
"domContract": ["nodedc-header-shell", "nodedc-header"],
|
||||
"summary": "Three-axis NODE.DC application header with fixed brand geometry and composable center/right slots.",
|
||||
"anatomy": ["left brand", "optional left context", "center navigation/workspace", "right actions/profile"],
|
||||
"rules": [
|
||||
"The logo occupies the same visual position and geometry across applications.",
|
||||
"Product routes and profile content are application data passed into stable slots."
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "status-badge",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["StatusBadge"],
|
||||
"domContract": ["nodedc-status"],
|
||||
"summary": "Semantic status pill whose tone is independent from the application accent."
|
||||
},
|
||||
{
|
||||
"id": "inspector",
|
||||
"status": "baseline",
|
||||
"package": "@nodedc/ui-react",
|
||||
"exports": ["Inspector", "ControlRow"],
|
||||
"domContract": ["nodedc-inspector", "nodedc-control-row"],
|
||||
"summary": "Accordion settings/definition inspector derived only from the redesigned Engine environment and NDC agent inspector.",
|
||||
"rules": [
|
||||
"Legacy Engine inspectors are not reference implementations.",
|
||||
"Domain-specific field definitions remain in Engine; reusable layout and controls live here."
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"schemaVersion": "1.0.0",
|
||||
"libraryVersion": "0.1.0",
|
||||
"name": "NODE.DC Design System",
|
||||
"purpose": "Canonical code-level UI system for current and future NODE.DC applications.",
|
||||
"packages": [
|
||||
{
|
||||
"name": "@nodedc/tokens",
|
||||
"path": "packages/tokens",
|
||||
"role": "portable tokens and theme variables"
|
||||
},
|
||||
{
|
||||
"name": "@nodedc/ui-core",
|
||||
"path": "packages/ui-core",
|
||||
"role": "framework-neutral styles, contrast and floating geometry"
|
||||
},
|
||||
{
|
||||
"name": "@nodedc/ui-react",
|
||||
"path": "packages/ui-react",
|
||||
"role": "React component implementation"
|
||||
},
|
||||
{
|
||||
"name": "@nodedc/ui-dom",
|
||||
"path": "packages/ui-dom",
|
||||
"role": "DOM controllers for non-React applications"
|
||||
}
|
||||
],
|
||||
"sourceRegistry": "sources.json",
|
||||
"componentRegistry": "components.json",
|
||||
"candidateRegistry": "candidates.json",
|
||||
"documentation": {
|
||||
"architecture": "../docs/ARCHITECTURE.md",
|
||||
"components": "../docs/COMPONENTS.md",
|
||||
"theming": "../docs/THEMING.md",
|
||||
"windows": "../docs/WINDOWS_AND_LAYERS.md",
|
||||
"baseline": "../docs/SOURCE_BASELINE.md",
|
||||
"governance": "../docs/GOVERNANCE.md",
|
||||
"adoption": "../docs/ADOPTION.md",
|
||||
"candidates": "../docs/CANDIDATES.md"
|
||||
},
|
||||
"operatingRule": "Check this registry before creating a NODE.DC interface element. Reuse or extend the canonical export instead of creating an application-local copy."
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
{
|
||||
"schemaVersion": "1.0.0",
|
||||
"auditedAt": "2026-07-10",
|
||||
"sources": [
|
||||
{
|
||||
"id": "launcher",
|
||||
"repository": "https://git.dcserve.ru/SILVER/NODEDC_LAUNCHER.git",
|
||||
"auditedRevision": "332e097",
|
||||
"role": "primary reference for Hub shell, header, glass surfaces, modal and shared controls",
|
||||
"approvedPaths": [
|
||||
"dc-ui-guideline",
|
||||
"src/shared/nodedc-ui",
|
||||
"src/shared/ui",
|
||||
"src/widgets/top-bar",
|
||||
"src/widgets/admin-overlay",
|
||||
"src/styles/globals.css"
|
||||
],
|
||||
"policy": "reference"
|
||||
},
|
||||
{
|
||||
"id": "seo",
|
||||
"repository": "https://git.dcserve.ru/SILVER/NODEDC_SEO.git",
|
||||
"auditedRevision": "bcc3d9e",
|
||||
"role": "same product family; confirms theme variation and common window/control mechanics",
|
||||
"approvedPaths": [
|
||||
"seo_mode/seo_mode/app/src/NdcGlassSelect.tsx",
|
||||
"seo_mode/seo_mode/app/src/styles.css",
|
||||
"seo_mode/seo_mode/SEO-farm/DESIGN_SYSTEM.md"
|
||||
],
|
||||
"policy": "reference-with-cleanup"
|
||||
},
|
||||
{
|
||||
"id": "cms",
|
||||
"repository": "https://git.dcserve.ru/SILVER/DC_CMS.git",
|
||||
"auditedRevision": "4c6f133",
|
||||
"role": "same product family; non-React consumer of header, window and control system",
|
||||
"approvedPaths": [
|
||||
"admin/admin.css",
|
||||
"admin/admin.js",
|
||||
"admin/nodedc-logo.svg"
|
||||
],
|
||||
"policy": "reference-with-cleanup"
|
||||
},
|
||||
{
|
||||
"id": "engine",
|
||||
"repository": "https://git.dcserve.ru/dctouch/NODEDC_ENGINE_INFRA.git",
|
||||
"auditedRevision": "d427272c7e",
|
||||
"role": "reference only for redesigned environment settings, glass controls and NDC agent inspector",
|
||||
"approvedPaths": [
|
||||
"nodedc-source/src/components/environment",
|
||||
"nodedc-source/src/components/ui/NdcGlassChecker.tsx",
|
||||
"nodedc-source/src/components/ui/NdcGlassModal.tsx",
|
||||
"nodedc-source/src/components/ui/NdcGlassSelect.tsx",
|
||||
"nodedc-source/src/driveinspector/NdcAgentInspector.tsx",
|
||||
"nodedc-source/src/style/menu.css",
|
||||
"nodedc-source/src/style/inspector.css"
|
||||
],
|
||||
"excludedPaths": [
|
||||
"all other legacy node inspectors",
|
||||
"legacy node plates and legacy controls not used by the environment settings or NDC agent inspector"
|
||||
],
|
||||
"policy": "strict-subset-reference"
|
||||
},
|
||||
{
|
||||
"id": "task-manager",
|
||||
"repository": "https://git.dcserve.ru/SILVER/NODEDC_TASKMANAGER.git",
|
||||
"auditedRevision": "43e5f57",
|
||||
"role": "behavior reference for already-standardized dropdowns, modal layers, headers and work-item patterns",
|
||||
"approvedPaths": [
|
||||
"HDESIGN-CODE.md",
|
||||
"HDROPDOWN-CANON.md",
|
||||
"design.config.json",
|
||||
"plane-src/packages/ui/src/dropdowns/action-dropdown.tsx",
|
||||
"plane-src/packages/ui/src/modals"
|
||||
],
|
||||
"excludedPaths": [
|
||||
"legacy CustomMenu implementations",
|
||||
"screen-local dropdown wrappers listed as technical debt"
|
||||
],
|
||||
"policy": "behavior-reference"
|
||||
},
|
||||
{
|
||||
"id": "bim-viewer",
|
||||
"repository": "https://git.dcserve.ru/SILVER/NODEDC_BIM_VIEWER.git",
|
||||
"auditedRevision": "1a78dd0",
|
||||
"role": "non-React integration reference and validation target",
|
||||
"approvedPaths": [
|
||||
"frontend/src/ui/glassSelect.js",
|
||||
"frontend/src/ui/settingsMenu.js",
|
||||
"frontend/src/ui/toolbar.js"
|
||||
],
|
||||
"policy": "integration-reference"
|
||||
},
|
||||
{
|
||||
"id": "platform",
|
||||
"repository": "https://git.dcserve.ru/SILVER/NODEDC_PLATFORM.git",
|
||||
"auditedRevision": "d196d4b",
|
||||
"role": "platform boundary reference; applications remain independent repositories",
|
||||
"approvedPaths": [
|
||||
"README.md",
|
||||
"docs/ARCHITECTURE.md"
|
||||
],
|
||||
"policy": "architecture-context"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user