332 lines
15 KiB
TypeScript
332 lines
15 KiB
TypeScript
import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
|
||
import { applyNodedcTheme, type NodedcTheme, type RgbTuple } from "@nodedc/ui-core";
|
||
import {
|
||
AppHeader,
|
||
Button,
|
||
Checker,
|
||
ColorField,
|
||
ConfirmationModal,
|
||
ControlRow,
|
||
Dropdown,
|
||
FieldFrame,
|
||
GlassSurface,
|
||
HeaderProfile,
|
||
HeaderWorkspace,
|
||
IconButton,
|
||
Inspector,
|
||
RangeControl,
|
||
SegmentedControl,
|
||
Select,
|
||
StatusBadge,
|
||
TextAreaField,
|
||
TextField,
|
||
Window,
|
||
WindowFooterActions,
|
||
} from "@nodedc/ui-react";
|
||
|
||
type CatalogSection = "foundation" | "controls" | "windows" | "inspector";
|
||
|
||
const accents: Array<{ label: string; value: RgbTuple; hex: string }> = [
|
||
{ label: "Hub", value: [195, 255, 102], hex: "#c3ff66" },
|
||
{ label: "Engine", value: [148, 123, 219], hex: "#947bdb" },
|
||
{ label: "BIM", value: [78, 164, 255], hex: "#4ea4ff" },
|
||
{ label: "SEO", value: [32, 32, 34], hex: "#202022" },
|
||
];
|
||
|
||
const selectOptions = [
|
||
{ value: "active", label: "Активен", description: "Сервис доступен пользователям" },
|
||
{ value: "maintenance", label: "Техработы", description: "Временно недоступен" },
|
||
{ value: "disabled", label: "Отключён", description: "Запуск запрещён" },
|
||
] as const;
|
||
|
||
function rgbFromHex(hex: string): RgbTuple | null {
|
||
const normalized = hex.trim().replace(/^#/, "");
|
||
if (!/^[0-9a-f]{6}$/i.test(normalized)) return null;
|
||
return [
|
||
Number.parseInt(normalized.slice(0, 2), 16),
|
||
Number.parseInt(normalized.slice(2, 4), 16),
|
||
Number.parseInt(normalized.slice(4, 6), 16),
|
||
];
|
||
}
|
||
|
||
function Section({ id, eyebrow, title, description, children }: {
|
||
id: string;
|
||
eyebrow: string;
|
||
title: string;
|
||
description: string;
|
||
children: ReactNode;
|
||
}) {
|
||
return (
|
||
<section id={id} className="catalog-section">
|
||
<header className="catalog-section__head">
|
||
<span>{eyebrow}</span>
|
||
<h2>{title}</h2>
|
||
<p>{description}</p>
|
||
</header>
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function Preview({ title, note, children, className }: {
|
||
title: string;
|
||
note?: string;
|
||
children: ReactNode;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<GlassSurface className={`catalog-preview ${className ?? ""}`} padding="lg">
|
||
<div className="catalog-preview__head">
|
||
<strong>{title}</strong>
|
||
{note ? <span>{note}</span> : null}
|
||
</div>
|
||
<div className="catalog-preview__body">{children}</div>
|
||
</GlassSurface>
|
||
);
|
||
}
|
||
|
||
export function CatalogApp() {
|
||
const [theme, setTheme] = useState<NodedcTheme>("dark");
|
||
const [accentHex, setAccentHex] = useState("#c3ff66");
|
||
const [section, setSection] = useState<CatalogSection>("foundation");
|
||
const [selectedStatus, setSelectedStatus] = useState<(typeof selectOptions)[number]["value"]>("active");
|
||
const [checker, setChecker] = useState(true);
|
||
const [range, setRange] = useState(64);
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
const [inspectorOpen, setInspectorOpen] = useState(false);
|
||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||
const [projectName, setProjectName] = useState("NODE.DC Platform");
|
||
const [notes, setNotes] = useState("Общий контракт компонентов без доменной логики приложения.");
|
||
|
||
const accent = useMemo(() => rgbFromHex(accentHex) ?? accents[0].value, [accentHex]);
|
||
|
||
useEffect(() => {
|
||
applyNodedcTheme(document.documentElement, { theme, accent });
|
||
}, [accent, theme]);
|
||
|
||
const openSection = (next: CatalogSection) => {
|
||
setSection(next);
|
||
document.getElementById(next)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
};
|
||
|
||
const inspectorSections = [
|
||
{
|
||
id: "definition",
|
||
label: "Definition Control",
|
||
description: "Параметры агентной ноды",
|
||
content: (
|
||
<>
|
||
<ControlRow label="Активность"><Checker checked={checker} label="Агент активен" onChange={setChecker} /></ControlRow>
|
||
<ControlRow label="Модель">
|
||
<Select
|
||
label="Модель"
|
||
value="codex"
|
||
options={[
|
||
{ value: "codex", label: "Codex" },
|
||
{ value: "local", label: "Local executor" },
|
||
]}
|
||
onChange={() => undefined}
|
||
/>
|
||
</ControlRow>
|
||
<RangeControl label="Температура" value={range} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setRange} />
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
id: "appearance",
|
||
label: "Внешний вид",
|
||
description: "Тема и акцент",
|
||
content: (
|
||
<ControlRow label="Акцент"><ColorField value={accentHex} onChange={setAccentHex} /></ControlRow>
|
||
),
|
||
},
|
||
{
|
||
id: "runtime",
|
||
label: "Выполнение",
|
||
description: "Параметры запуска",
|
||
content: <Checker checked={false} label="Запускать автоматически" onChange={() => undefined} />,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="catalog-app nodedc-ui-root" style={{ "--catalog-accent": accentHex } as CSSProperties}>
|
||
<AppHeader
|
||
brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
|
||
center={
|
||
<>
|
||
<HeaderWorkspace label="UI" />
|
||
<SegmentedControl
|
||
label="Разделы каталога"
|
||
value={section}
|
||
items={[
|
||
{ value: "foundation", label: "Основа" },
|
||
{ value: "controls", label: "Контролы" },
|
||
{ value: "windows", label: "Окна" },
|
||
{ value: "inspector", label: "Инспектор" },
|
||
]}
|
||
onChange={openSection}
|
||
/>
|
||
</>
|
||
}
|
||
right={
|
||
<HeaderProfile>
|
||
<IconButton label="Сменить тему" onClick={() => setTheme((current) => current === "dark" ? "light" : "dark")}>
|
||
{theme === "dark" ? "☼" : "◐"}
|
||
</IconButton>
|
||
<span className="catalog-avatar">DC</span>
|
||
</HeaderProfile>
|
||
}
|
||
/>
|
||
|
||
<main className="catalog-main">
|
||
<div className="catalog-hero">
|
||
<StatusBadge tone="accent">baseline 0.1.0</StatusBadge>
|
||
<h1>Один UI-контракт.<br />Разные приложения.</h1>
|
||
<p>Геометрия, окна и поведение остаются общими. Приложение выбирает тему и акцент, затем использует готовые компоненты.</p>
|
||
</div>
|
||
|
||
<Section id="foundation" eyebrow="01 / Foundation" title="Материал и тема" description="Одинаковые поверхности проверяются в тёмной и светлой схеме без fork компонентов.">
|
||
<div className="catalog-grid catalog-grid--foundation">
|
||
<Preview title="Theme contract" note={theme === "dark" ? "dark glass" : "light glass"}>
|
||
<div className="catalog-theme-row">
|
||
<Button variant={theme === "dark" ? "accent" : "secondary"} onClick={() => setTheme("dark")}>Dark</Button>
|
||
<Button variant={theme === "light" ? "accent" : "secondary"} onClick={() => setTheme("light")}>Light</Button>
|
||
</div>
|
||
<div className="catalog-swatches">
|
||
{accents.map((item) => (
|
||
<button
|
||
key={item.label}
|
||
type="button"
|
||
className="catalog-swatch"
|
||
data-active={item.hex.toLowerCase() === accentHex.toLowerCase() ? "true" : undefined}
|
||
style={{ "--swatch": item.hex } as CSSProperties}
|
||
onClick={() => setAccentHex(item.hex)}
|
||
>
|
||
<span />{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<ColorField label="Свой accent" value={accentHex} onChange={setAccentHex} />
|
||
</Preview>
|
||
<Preview title="Glass hierarchy" note="default / strong / soft">
|
||
<div className="catalog-surface-stack">
|
||
<GlassSurface padding="md">Default surface</GlassSurface>
|
||
<GlassSurface tone="strong" padding="md">Strong floating surface</GlassSurface>
|
||
<GlassSurface tone="soft" padding="md">Soft nested surface</GlassSurface>
|
||
</div>
|
||
</Preview>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section id="controls" eyebrow="02 / Primitives" title="Контролы" description="Общие actions, fields и selection primitives для React и DOM consumers.">
|
||
<div className="catalog-grid">
|
||
<Preview title="Actions" note="shared geometry">
|
||
<div className="catalog-inline catalog-inline--wrap">
|
||
<Button variant="accent">Сохранить</Button>
|
||
<Button>Отмена</Button>
|
||
<Button variant="ghost">Подробнее</Button>
|
||
<Button variant="danger">Удалить</Button>
|
||
<IconButton label="Настройки">⚙</IconButton>
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Fields" note="label / hint / control">
|
||
<div className="catalog-form">
|
||
<TextField label="Название проекта" hint="обязательно" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
|
||
<TextAreaField label="Описание" value={notes} onChange={(event) => setNotes(event.target.value)} />
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Selection" note="portal dropdown">
|
||
<div className="catalog-form">
|
||
<FieldFrame label="Статус">
|
||
<Select label="Статус" value={selectedStatus} options={[...selectOptions]} searchable onChange={setSelectedStatus} />
|
||
</FieldFrame>
|
||
<Dropdown
|
||
trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
|
||
<Button ref={setTriggerRef} aria-expanded={open} aria-controls={surfaceId} onClick={toggle}>Действия</Button>
|
||
)}
|
||
>
|
||
{({ close }) => (
|
||
<>
|
||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Переименовать</span></button>
|
||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Дублировать</span></button>
|
||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Архивировать</span></button>
|
||
</>
|
||
)}
|
||
</Dropdown>
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Settings controls" note="new Engine generation">
|
||
<div className="catalog-form">
|
||
<Checker checked={checker} label="Автоматическое обновление" description="Применять изменения без перезапуска" onChange={setChecker} />
|
||
<RangeControl label="Интенсивность стекла" value={range} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setRange} />
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Semantic status" note="not tied to accent" className="catalog-preview--wide">
|
||
<div className="catalog-inline catalog-inline--wrap">
|
||
<StatusBadge>Черновик</StatusBadge>
|
||
<StatusBadge tone="success">Готово</StatusBadge>
|
||
<StatusBadge tone="warning">Нужна проверка</StatusBadge>
|
||
<StatusBadge tone="danger">Ошибка</StatusBadge>
|
||
<StatusBadge tone="accent">В работе</StatusBadge>
|
||
</div>
|
||
</Preview>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section id="windows" eyebrow="03 / Layers" title="Окна и подтверждения" description="Modal и side panel используют одну механику portal, Escape, focus trap и focus restore.">
|
||
<Preview title="Controlled windows" note="center / end / confirm">
|
||
<div className="catalog-inline catalog-inline--wrap">
|
||
<Button variant="accent" onClick={() => setModalOpen(true)}>Открыть окно</Button>
|
||
<Button onClick={() => setInspectorOpen(true)}>Открыть инспектор</Button>
|
||
<Button variant="danger" onClick={() => setConfirmOpen(true)}>Проверить удаление</Button>
|
||
</div>
|
||
</Preview>
|
||
</Section>
|
||
|
||
<Section id="inspector" eyebrow="04 / Pattern" title="Inspector / Settings" description="Канон основан только на новом Environment Settings и NDC Agent Inspector, без legacy-инспекторов Engine.">
|
||
<div className="catalog-inspector-stage">
|
||
<GlassSurface tone="strong" radius="panel" padding="md" className="catalog-inspector-card">
|
||
<div className="catalog-inspector-title"><strong>Инспектор</strong><span>Agent Definition</span></div>
|
||
<Inspector sections={inspectorSections} defaultOpen={["definition"]} activeId="definition" />
|
||
</GlassSurface>
|
||
</div>
|
||
</Section>
|
||
</main>
|
||
|
||
<Window
|
||
open={modalOpen}
|
||
title="Настройки сервиса"
|
||
subtitle="Единое окно Launcher / CMS / SEO"
|
||
onClose={() => setModalOpen(false)}
|
||
footer={
|
||
<>
|
||
<Button variant="ghost" onClick={() => setModalOpen(false)}>Отмена</Button>
|
||
<WindowFooterActions><Button variant="accent" onClick={() => setModalOpen(false)}>Сохранить</Button></WindowFooterActions>
|
||
</>
|
||
}
|
||
>
|
||
<div className="catalog-form">
|
||
<TextField label="Название" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
|
||
<FieldFrame label="Статус"><Select label="Статус" value={selectedStatus} options={[...selectOptions]} onChange={setSelectedStatus} /></FieldFrame>
|
||
<Checker checked={checker} label="Сервис активен" onChange={setChecker} />
|
||
</div>
|
||
</Window>
|
||
|
||
<Window open={inspectorOpen} title="Инспектор" subtitle="Agent Definition" placement="end" onClose={() => setInspectorOpen(false)}>
|
||
<Inspector sections={inspectorSections} defaultOpen={["definition"]} activeId="definition" />
|
||
</Window>
|
||
|
||
<ConfirmationModal
|
||
open={confirmOpen}
|
||
title="Удалить конфигурацию?"
|
||
description={<>Конфигурация будет удалена. Это действие нельзя отменить.</>}
|
||
confirmLabel="Удалить"
|
||
danger
|
||
onClose={() => setConfirmOpen(false)}
|
||
onConfirm={() => setConfirmOpen(false)}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|