GovOPlaN/govoplan-core
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Centralize shared WebUI structural primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 13:17:31 +02:00
parent ee5c881df9
commit 7685a103e8
26 changed files with 767 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/ActionToolbar.tsx
+5 -1
View File
@@ -3,13 +3,15 @@ import { usePlatformLanguage } from "../i18n/LanguageContext";
import type { PlatformInterfaceIdentityProps } from "../types";
export type ActionToolbarDensity = "compact" | "default";
export type ActionToolbarSurface = "plain" | "subtle";
export type ActionToolbarSurface = "plain" | "subtle" | "panel-header" | "section-header";
export type ActionToolbarWrap = "responsive" | "always" | "never";
export type ActionToolbarJustify = "start" | "between" | "end";
export type ActionToolbarProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
children: ReactNode;
label?: string;
density?: ActionToolbarDensity;
justify?: ActionToolbarJustify;
surface?: ActionToolbarSurface;
wrap?: ActionToolbarWrap;
};
@@ -18,6 +20,7 @@ export default function ActionToolbar({
children,
label,
density = "default",
justify = "start",
surface = "plain",
wrap = "responsive",
className = "",
@@ -38,6 +41,7 @@ export default function ActionToolbar({
className={[
"action-toolbar",
`action-toolbar-density-${density}`,
`action-toolbar-justify-${justify}`,
`action-toolbar-surface-${surface}`,
`action-toolbar-wrap-${wrap}`,
className
webui/src/components/Card.tsx
+35 -10
View File
@@ -1,15 +1,20 @@
import { useEffect, useState, type ReactNode } from "react";
import { useEffect, useState, type HTMLAttributes, type ReactNode } from "react";
import { ChevronDown } from "lucide-react";
import { usePlatformLanguage } from "../i18n/LanguageContext";
import type { PlatformInterfaceIdentityProps } from "../types";
type CardProps = PlatformInterfaceIdentityProps & {
export type CardProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
title?: ReactNode;
children: ReactNode;
actions?: ReactNode;
afterBody?: ReactNode;
collapsible?: boolean;
collapseKey?: string;
persistCollapse?: boolean;
as?: "section" | "article";
headerClassName?: string;
bodyClassName?: string;
actionsClassName?: string;
};
function resolveCollapseStorageKey(collapsible: boolean, persistCollapse: boolean, collapseKey: string | undefined, title: ReactNode): string | null {
@@ -39,13 +44,32 @@ function writeCollapseState(storageKey: string | null, collapsed: boolean): void
// localStorage may be unavailable in private or restricted contexts.
}}
export default function Card({ title, children, actions, collapsible = false, collapseKey, persistCollapse = true, interfaceId, helpContextId, helpModuleId, helpTopicId }: CardProps) {
export default function Card({
title,
children,
actions,
afterBody,
collapsible = false,
collapseKey,
persistCollapse = true,
as = "section",
className = "",
headerClassName = "",
bodyClassName = "",
actionsClassName = "",
interfaceId,
helpContextId,
helpModuleId,
helpTopicId,
...props
}: CardProps) {
const { translateText } = usePlatformLanguage();
const Element = as;
const storageKey = resolveCollapseStorageKey(collapsible, persistCollapse, collapseKey, title);
const [collapseState, setCollapseState] = useState(() => ({ storageKey, collapsed: readCollapseState(storageKey) }));
const collapsed = collapseState.storageKey === storageKey ? collapseState.collapsed : readCollapseState(storageKey);
const hasHeader = Boolean(title || actions || collapsible);
const body = <div className="card-body">{children}</div>;
const body = <div className={["card-body", bodyClassName].filter(Boolean).join(" ")}>{children}</div>;
const shouldRenderBody = !collapsible || !collapsed;
const collapseLabel = translateText(collapsed ? "i18n:govoplan-core.show_content.0528d8d2" : "i18n:govoplan-core.show_header_only.24afefca");
@@ -60,8 +84,9 @@ export default function Card({ title, children, actions, collapsible = false, co
}
return (
<section
className={`card${collapsible ? " card-collapsible" : ""}${collapsed ? " is-collapsed" : ""}`}
<Element
{...props}
className={["card", collapsible ? "card-collapsible" : "", collapsed ? "is-collapsed" : "", className].filter(Boolean).join(" ")}
data-help-scope="interface"
data-interface-id={interfaceId}
data-help-context-id={helpContextId}
@@ -70,10 +95,10 @@ export default function Card({ title, children, actions, collapsible = false, co
data-help-key={typeof title === "string" ? title : undefined}
>
{hasHeader &&
<header className="card-header">
<header className={["card-header", headerClassName].filter(Boolean).join(" ")}>
{title && (typeof title === "string" ? <h2>{translateText(title)}</h2> : <div className="card-title-node">{title}</div>)}
{(actions || collapsible) &&
<div className="card-actions">
<div className={["card-actions", actionsClassName].filter(Boolean).join(" ")}>
{actions}
{collapsible &&
<button
@@ -91,7 +116,7 @@ export default function Card({ title, children, actions, collapsible = false, co
}
</header>
}
{shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}</div> : body)}
</section>);
{shouldRenderBody && (collapsible ? <div className="card-collapse-region">{body}{afterBody}</div> : <>{body}{afterBody}</>)}
</Element>);
}
webui/src/components/ContentGrid.tsx
+7
View File
@@ -2,12 +2,14 @@ import type { FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";
export type ContentGridColumns = 1 | 2 | 3 | 4;
export type ContentGridGap = "compact" | "small" | "default" | "loose";
export type ContentGridSpacing = "none" | "block";
export type ContentGridCollapseAt = "narrow" | "workspace" | "standard" | "wide" | "never";
export type ContentGridProps = HTMLAttributes<HTMLDivElement> & {
children: ReactNode;
columns?: ContentGridColumns;
gap?: ContentGridGap;
spacing?: ContentGridSpacing;
collapseAt?: ContentGridCollapseAt;
align?: "start" | "stretch";
};
@@ -16,6 +18,7 @@ export default function ContentGrid({
children,
columns = 2,
gap = "default",
spacing = "none",
collapseAt = "workspace",
align = "start",
className = "",
@@ -28,6 +31,7 @@ export default function ContentGrid({
"content-grid-layout",
`content-grid-columns-${columns}`,
`content-grid-gap-${gap}`,
`content-grid-spacing-${spacing}`,
`content-grid-collapse-${collapseAt}`,
`content-grid-align-${align}`,
className
@@ -66,6 +70,7 @@ export type FormLayoutProps = FormHTMLAttributes<HTMLFormElement> & {
children: ReactNode;
columns?: ContentGridColumns;
gap?: ContentGridGap;
spacing?: ContentGridSpacing;
collapseAt?: ContentGridCollapseAt;
};
@@ -73,6 +78,7 @@ export function FormLayout({
children,
columns = 1,
gap = "default",
spacing = "none",
collapseAt = "standard",
className = "",
...props
@@ -85,6 +91,7 @@ export function FormLayout({
"form-grid-layout",
`content-grid-columns-${columns}`,
`content-grid-gap-${gap}`,
`content-grid-spacing-${spacing}`,
`content-grid-collapse-${collapseAt}`,
"content-grid-align-start",
className
webui/src/components/ContentSection.tsx
+37
View File
@@ -0,0 +1,37 @@
import type { HTMLAttributes, ReactNode } from "react";
export type ContentSectionProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
as?: "section" | "article";
children: ReactNode;
density?: "none" | "compact" | "default";
layout?: "flow" | "stack";
spacing?: "none" | "block";
surface?: "panel" | "subtle";
};
export default function ContentSection({
as: Component = "section",
children,
density = "none",
layout = "flow",
spacing = "block",
surface = "panel",
className = "",
...props
}: ContentSectionProps) {
return (
<Component
{...props}
className={[
"content-section",
`content-section-density-${density}`,
`content-section-layout-${layout}`,
`content-section-spacing-${spacing}`,
`content-section-surface-${surface}`,
className
].filter(Boolean).join(" ")}
>
{children}
</Component>
);
}
webui/src/components/CountBadge.tsx
+29
View File
@@ -0,0 +1,29 @@
import type { HTMLAttributes, ReactNode } from "react";
export type CountBadgeProps = HTMLAttributes<HTMLSpanElement> & {
children: ReactNode;
tone?: "accent" | "neutral" | "danger";
size?: "compact" | "default";
};
export default function CountBadge({
children,
tone = "accent",
size = "default",
className = "",
...props
}: CountBadgeProps) {
return (
<span
{...props}
className={[
"count-badge",
`count-badge-${tone}`,
`count-badge-${size}`,
className
].filter(Boolean).join(" ")}
>
{children}
</span>
);
}
webui/src/components/DefinitionNodeIcon.tsx
+12
View File
@@ -0,0 +1,12 @@
import type { HTMLAttributes } from "react";
export type DefinitionNodeIconProps = HTMLAttributes<HTMLSpanElement>;
export default function DefinitionNodeIcon({ className = "", ...props }: DefinitionNodeIconProps) {
return (
<span
{...props}
className={["definition-node-icon", className].filter(Boolean).join(" ")}
/>
);
}
webui/src/components/DefinitionPalette.tsx
+53
View File
@@ -0,0 +1,53 @@
import { Plus } from "lucide-react";
import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";
import ActionToolbar from "./ActionToolbar";
export type DefinitionPaletteProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
label: ReactNode;
description?: ReactNode;
actions?: ReactNode;
children: ReactNode;
};
export default function DefinitionPalette({ label, description, actions, children, className = "", ...props }: DefinitionPaletteProps) {
const { translateText } = usePlatformLanguage();
return (
<aside {...props} className={["definition-palette", className].filter(Boolean).join(" ")}>
<ActionToolbar surface="section-header" className="definition-palette-header">
<span className="definition-palette-heading-copy">
<strong>{translateReactNode(label, translateText)}</strong>
{description ? <small>{translateReactNode(description, translateText)}</small> : null}
</span>
{actions}
</ActionToolbar>
<div className="definition-palette-items">{children}</div>
</aside>
);
}
export function DefinitionPaletteGroup({ label, children, className = "", ...props }: Omit<HTMLAttributes<HTMLElement>, "title"> & { label: ReactNode }) {
const { translateText } = usePlatformLanguage();
return (
<section {...props} className={["definition-palette-group", className].filter(Boolean).join(" ")}>
<h3>{translateReactNode(label, translateText)}</h3>
{children}
</section>
);
}
export type DefinitionPaletteItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
icon: ReactNode;
label: ReactNode;
};
export function DefinitionPaletteItem({ icon, label, className = "", type = "button", ...props }: DefinitionPaletteItemProps) {
const { translateText } = usePlatformLanguage();
return (
<button {...props} type={type} className={["definition-palette-item", className].filter(Boolean).join(" ")}>
<span className="definition-palette-item-icon" aria-hidden="true">{icon}</span>
<span>{translateReactNode(label, translateText)}</span>
<Plus size={14} className="definition-palette-item-add" aria-hidden="true" />
</button>
);
}
webui/src/components/FilterBar.tsx
+42
View File
@@ -0,0 +1,42 @@
import type { HTMLAttributes, ReactNode } from "react";
export type FilterBarLayout = "row" | "grid" | "stack";
export type FilterBarSurface = "plain" | "panel" | "control";
export type FilterBarWidth = "auto" | "compact" | "default" | "wide" | "full";
export type FilterBarProps = HTMLAttributes<HTMLElement> & {
children: ReactNode;
as?: "div" | "form";
layout?: FilterBarLayout;
surface?: FilterBarSurface;
width?: FilterBarWidth;
wrap?: "responsive" | "always" | "never";
};
export default function FilterBar({
children,
as = "div",
layout = "row",
surface = "plain",
width = "full",
wrap = "responsive",
className = "",
...props
}: FilterBarProps) {
const Element = as;
return (
<Element
{...props}
className={[
"filter-bar",
`filter-bar-layout-${layout}`,
`filter-bar-surface-${surface}`,
`filter-bar-width-${width}`,
`filter-bar-wrap-${wrap}`,
className
].filter(Boolean).join(" ")}
>
{children}
</Element>
);
}
webui/src/components/FloatingStatus.tsx
+20
View File
@@ -0,0 +1,20 @@
import type { HTMLAttributes, ReactNode } from "react";
import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";
export type FloatingStatusProps = HTMLAttributes<HTMLDivElement> & {
children: ReactNode;
};
export default function FloatingStatus({ children, className = "", role = "status", ...props }: FloatingStatusProps) {
const { translateText } = usePlatformLanguage();
return (
<div
{...props}
role={role}
className={["floating-status", className].filter(Boolean).join(" ")}
>
{translateReactNode(children, translateText)}
</div>
);
}
webui/src/components/MetricCard.tsx
+36 -7
View File
@@ -1,14 +1,43 @@
import { usePlatformLanguage } from "../i18n/LanguageContext";
import type { HTMLAttributes, ReactNode } from "react";
import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";
export default function MetricCard({ label, value, tone = "neutral", detail }: { label: string; value: string | number; tone?: "neutral" | "good" | "warning" | "danger" | "info"; detail?: string }) {
export type MetricCardProps = HTMLAttributes<HTMLDivElement> & {
label: ReactNode;
value: ReactNode;
tone?: "neutral" | "good" | "warning" | "danger" | "info";
detail?: ReactNode;
valueTitle?: string;
density?: "compact" | "default";
surface?: "card" | "subtle" | "flat";
};
export default function MetricCard({
label,
value,
tone = "neutral",
detail,
valueTitle,
density = "default",
surface = "card",
className = "",
...props
}: MetricCardProps) {
const { translateText } = usePlatformLanguage();
const renderedValue = typeof value === "string" ? translateText(value) : value;
const renderedLabel = translateReactNode(label, translateText);
const renderedValue = translateReactNode(value, translateText);
const renderedDetail = translateReactNode(detail, translateText);
return (
<div className={`metric-card metric-${tone}`}>
<div className="metric-label">{translateText(label)}</div>
<div className="metric-value">{renderedValue}</div>
{detail && <div className="metric-detail">{translateText(detail)}</div>}
<div {...props} className={[
"metric-card",
`metric-${tone}`,
`metric-card-density-${density}`,
`metric-card-surface-${surface}`,
className
].filter(Boolean).join(" ")}>
<div className="metric-label">{renderedLabel}</div>
<div className="metric-value" title={valueTitle}>{renderedValue}</div>
{renderedDetail ? <div className="metric-detail">{renderedDetail}</div> : null}
</div>
);
}
webui/src/components/PageLayout.tsx
+12 -8
View File
@@ -61,6 +61,7 @@ export type PageLayoutProps = PlatformInterfaceIdentityProps & {
mode?: PageLayoutMode;
scrollable?: boolean;
stickyHeader?: boolean;
showHeader?: boolean;
documentationType?: "user" | "admin";
className?: string;
viewportClassName?: string;
@@ -82,6 +83,7 @@ export default function PageLayout({
mode = "standalone",
scrollable,
stickyHeader = true,
showHeader = true,
documentationType = "user",
className = "",
viewportClassName = "",
@@ -112,14 +114,16 @@ export default function PageLayout({
data-help-documentation-type={documentationType}
data-help-key={typeof title === "string" ? title : undefined}
>
<PageHeader
title={title}
description={description}
actions={actions}
loading={headerLoading ?? loading}
sticky={stickyHeader}
className={headerClassName}
/>
{showHeader && (
<PageHeader
title={title}
description={description}
actions={actions}
loading={headerLoading ?? loading}
sticky={stickyHeader}
className={headerClassName}
/>
)}
{error && <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>}
{success && <DismissibleAlert tone="success" resetKey={success} floating>{success}</DismissibleAlert>}
{notices && <div className="page-layout-notices">{notices}</div>}
webui/src/components/PolicyTable.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
import type { ReactNode } from "react";
import FieldLabel from "./help/FieldLabel";
import ActionToolbar from "./ActionToolbar";
type PolicySectionProps = {
title?: ReactNode;
@@ -44,15 +45,15 @@ export function PolicySection({
actions,
children,
className = "",
headingClassName = "subsection-heading split"
headingClassName = ""
}: PolicySectionProps) {
return (
<section className={["policy-section", className].filter(Boolean).join(" ")}>
{(title || summary || actions) &&
<div className={headingClassName}>
<ActionToolbar surface="section-header" className={headingClassName}>
{title && <h3>{title}</h3>}
{actions ?? summary}
</div>
</ActionToolbar>
}
{children}
</section>);
webui/src/components/ResourceAccessExplanation.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { FormGrid } from "./ContentGrid";
import ContentGrid, { FormGrid } from "./ContentGrid";
import type { ResourceAccessExplanationResponse } from "../api/resourceAccessContracts";
export type ResourceAccessExplanationProps = {
@@ -33,7 +33,7 @@ export default function ResourceAccessExplanation({
{explanation.provenance.length === 0 ? (
<p className="muted small-note">i18n:govoplan-core.no_access_evidence_was_returned.84a21e4e</p>
) : (
<div className="admin-assignment-grid">
<ContentGrid columns={2} gap="default" spacing="block" collapseAt="wide">
{explanation.provenance.map((item, index) => (
<div key={`${item.kind}:${item.id ?? index}`}>
<strong>{resourceAccessProvenanceKindLabel(item.kind)}</strong>
@@ -47,7 +47,7 @@ export default function ResourceAccessExplanation({
)}
</div>
))}
</div>
</ContentGrid>
)}
</>
);
webui/src/components/SelectionList.tsx
+27 -1
View File
@@ -4,6 +4,7 @@ import { usePlatformLanguage } from "../i18n/LanguageContext";
export type SelectionListProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
children: ReactNode;
label?: string;
variant?: "plain" | "navigation";
};
export type SelectionListItemProps = Omit<
@@ -19,10 +20,11 @@ export default function SelectionList({
children,
className = "",
label,
variant = "plain",
...props
}: SelectionListProps) {
const { translateText } = usePlatformLanguage();
const rootClassName = ["selection-list", className].filter(Boolean).join(" ");
const rootClassName = ["selection-list", `selection-list-${variant}`, className].filter(Boolean).join(" ");
return (
<div
@@ -36,6 +38,30 @@ export default function SelectionList({
);
}
export type SelectionListItemContentProps = HTMLAttributes<HTMLSpanElement> & {
title: ReactNode;
description?: ReactNode;
leading?: ReactNode;
};
export function SelectionListItemContent({
title,
description,
leading,
className = "",
...props
}: SelectionListItemContentProps) {
return (
<span {...props} className={["selection-list-item-content", leading ? "has-leading" : "", className].filter(Boolean).join(" ")}>
{leading ? <span className="selection-list-item-leading" aria-hidden="true">{leading}</span> : null}
<span className="selection-list-item-copy">
<strong>{title}</strong>
{description ? <small>{description}</small> : null}
</span>
</span>
);
}
export function SelectionListItem({
children,
className = "",
webui/src/components/StatePanel.tsx
+55
View File
@@ -0,0 +1,55 @@
import type { HTMLAttributes, ReactNode } from "react";
import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";
export type StatePanelSize = "inline" | "compact" | "default" | "fill";
export type StatePanelSurface = "plain" | "subtle" | "dashed";
export type StatePanelTone = "neutral" | "info" | "warning" | "danger";
export type StatePanelProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
icon?: ReactNode;
title?: ReactNode;
description?: ReactNode;
actions?: ReactNode;
size?: StatePanelSize;
surface?: StatePanelSurface;
tone?: StatePanelTone;
align?: "start" | "center";
};
export default function StatePanel({
icon,
title,
description,
actions,
children,
size = "default",
surface = "plain",
tone = "neutral",
align = "center",
className = "",
...props
}: StatePanelProps) {
const { translateText } = usePlatformLanguage();
const translatedTitle = translateReactNode(title, translateText);
const translatedDescription = translateReactNode(description, translateText);
return (
<div
{...props}
className={[
"state-panel",
`state-panel-size-${size}`,
`state-panel-surface-${surface}`,
`state-panel-tone-${tone}`,
`state-panel-align-${align}`,
className
].filter(Boolean).join(" ")}
>
{icon ? <div className="state-panel-icon" aria-hidden="true">{icon}</div> : null}
{translatedTitle ? <h2 className="state-panel-title">{translatedTitle}</h2> : null}
{translatedDescription ? <div className="state-panel-description">{translatedDescription}</div> : null}
{children ? <div className="state-panel-content">{children}</div> : null}
{actions ? <div className="state-panel-actions">{actions}</div> : null}
</div>
);
}
webui/src/components/WorkspaceFrame.tsx
+45
View File
@@ -0,0 +1,45 @@
import type { HTMLAttributes, ReactNode } from "react";
import { usePlatformLanguage } from "../i18n/LanguageContext";
import type { PlatformInterfaceIdentityProps } from "../types";
export type WorkspaceFrameProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLElement>, "children"> & {
children: ReactNode;
as?: "div" | "main" | "section";
height?: "container" | "viewport";
label?: string;
surface?: "plain" | "panel";
documentationType?: "user" | "admin";
};
export default function WorkspaceFrame({
children,
as: Component = "div",
height = "container",
label,
surface = "panel",
documentationType = "user",
className = "",
interfaceId,
helpContextId,
helpModuleId,
helpTopicId,
...props
}: WorkspaceFrameProps) {
const { translateText } = usePlatformLanguage();
return (
<Component
{...props}
className={["workspace-frame", `workspace-frame-height-${height}`, `workspace-frame-surface-${surface}`, className].filter(Boolean).join(" ")}
role={label ? "region" : undefined}
aria-label={label ? translateText(label) : undefined}
data-help-scope="workspace"
data-interface-id={interfaceId}
data-help-context-id={helpContextId}
data-help-module-id={helpModuleId}
data-help-topic-id={helpTopicId}
data-help-documentation-type={documentationType}
>
{children}
</Component>
);
}
webui/src/components/WorkspaceLayout.tsx
+4
View File
@@ -4,6 +4,7 @@ import type { PlatformInterfaceIdentityProps } from "../types";
export type WorkspaceLayoutVariant = "navigation" | "split";
export type WorkspacePrimarySize = "compact" | "default" | "wide";
export type WorkspaceLayoutSurface = "plain" | "contained";
export type WorkspaceLayoutProps = PlatformInterfaceIdentityProps & {
primary: ReactNode;
@@ -15,6 +16,7 @@ export type WorkspaceLayoutProps = PlatformInterfaceIdentityProps & {
documentationType?: "user" | "admin";
primaryScrollable?: boolean;
contentScrollable?: boolean;
surface?: WorkspaceLayoutSurface;
className?: string;
primaryClassName?: string;
contentClassName?: string;
@@ -30,6 +32,7 @@ export default function WorkspaceLayout({
documentationType = "user",
primaryScrollable,
contentScrollable = true,
surface = "plain",
className = "",
primaryClassName = "",
contentClassName = "",
@@ -48,6 +51,7 @@ export default function WorkspaceLayout({
"workspace-layout",
`workspace-layout-${variant}`,
`workspace-layout-primary-${primarySize}`,
`workspace-layout-surface-${surface}`,
className
].filter(Boolean).join(" ")}
data-help-scope="workspace"