@scalio-cloud/ui 0.32.0 → 0.33.0

package/README.md

@@ -151,6 +151,33 @@ Only actions that start something or lead away go there (Neu …, Import, Scanne
 Labels without "Neu"/"New": the + icon says it ("+ Kontakt", not "+ Neuer Kontakt").
 Filters, search, tabs and Speichern stay on the page. Apps with their own sidebar place `<ActionSlot />` themselves.
 
+## Page templates (React, from 0.33.0)
+
+UISPEC section 2 «Page templates» (`nav/N10` B): every page is an overview, a list, a detail or the settings
+(`SettingsLayout`, below). The templates draw the header, put `actions` into `<PageActions>` (sidebar slot from
+768px), and show `Loading` or `EmptyState` where the content would be.
+
+```jsx
+<OverviewPage title="Übersicht" kpis={[{ label: "Tenants", value: 3 }, { label: "Abweichungen", value: 2, tone: "error" }]}>
+  <Panel title="Letzte Scans" showAll={<Link to="/scans">Alle anzeigen</Link>}>…</Panel>
+</OverviewPage>
+<ListPage title="Kontakte" actions={<Button><Plus /> Kontakt</Button>} loading={loading} empty={!rows.length}
+  emptyText="Noch keine Kontakte." emptyAction={<Button>Ersten Kontakt erfassen</Button>}
+  toolbar={<Toolbar search={q} onSearch={setQ} filters={[{ id: "open", label: "Offen", active, count: 4 }]} onFilter={toggle} menu={<ExportMenu />} />}>
+  <Table>…</Table>
+</ListPage>
+<DetailPage title={t.name} status={{ tone: "ok", label: "Verbunden" }} back={<Link to="/tenants">Zurück</Link>}
+  pageActions={<Button><Upload /> Hochladen</Button>} actions={<Button>Freigeben</Button>}
+  tabs={[{ id: "info", label: "Info" }, { id: "log", label: "Protokoll" }]} tab={tab} onTab={setTab}
+  facts={[{ label: "Tenant-ID", value: t.id }]}>…</DetailPage>
+```
+
+On a detail page `back` and `pageActions` (start something, lead away) go to the sidebar slot; `actions` are the
+record's own actions (Freigeben, Stornieren) and stay in the header. `badge` takes an app's own status badge.
+
+Panels sit in a grid with one column, two from 1024px and three from 1536px; key facts of a detail page move to
+a right column from 1024px and leave no gap when there are none.
+
 ## Settings page (React)
 
 Every area of the settings has its own address (`/settings/<area>`); the app's router picks the area, the

package/nav.css

@@ -777,3 +777,39 @@
 .scalio-mail-preview-subject { padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); font-size: 0.875rem; }
 .scalio-mail-preview-subject span { font-weight: 600; }
 .scalio-mail-preview iframe { flex: 1; width: 100%; min-height: 16rem; border: 0; background: #fff; }
+/* Page templates (pages.js, 0.33.0): Overview, List, Detail. Full width (ADR 0024), grids add columns. */
+.scalio-template { display: flex; flex-direction: column; gap: 1.5rem; }
+.scalio-template > .scalio-page-header { margin-bottom: 0; }
+.scalio-kpi-row { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 768px) { .scalio-kpi-row { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } }
+.scalio-panels { display: grid; gap: 1rem; grid-template-columns: 1fr; }
+@media (min-width: 1024px) { .scalio-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (min-width: 1536px) { .scalio-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+.scalio-panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); color: hsl(var(--card-foreground)); }
+.scalio-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); }
+.scalio-panel-title { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--muted-foreground)); }
+.scalio-panel-more, .scalio-panel-more a, .scalio-panel-more button { border: 0; background: none; padding: 0; font: inherit; font-size: 0.8125rem; font-weight: 600; color: hsl(var(--primary)); text-decoration: none; cursor: pointer; }
+.scalio-panel-more:hover, .scalio-panel-more a:hover, .scalio-panel-more button:hover { text-decoration: underline; }
+.scalio-panel-body { padding: 1rem 1.25rem; min-width: 0; }
+.scalio-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
+.scalio-toolbar-search { width: 100%; max-width: 20rem; margin: 0; }
+.scalio-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+.scalio-chip {
+  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.75rem; border: 1px solid hsl(var(--border));
+  border-radius: 999px; background: hsl(var(--background)); color: hsl(var(--muted-foreground)); font: inherit; font-size: 0.8125rem; cursor: pointer;
+}
+.scalio-chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--foreground) / 0.4); }
+.scalio-chip.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.12); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-chip:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-chip-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
+.scalio-toolbar-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-toolbar-menu { margin-left: auto; }
+.scalio-list-body { min-width: 0; overflow-x: auto; }
+.scalio-detail-body { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 1024px) { .scalio-detail-body.has-facts { grid-template-columns: minmax(0, 1fr) 18rem; } }
+.scalio-detail-main { min-width: 0; }
+.scalio-facts { align-self: start; padding: 1rem 1.25rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card)); }
+.scalio-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0.75rem 0 0; font-size: 0.875rem; }
+.scalio-facts dt { color: hsl(var(--muted-foreground)); }
+.scalio-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.scalio-page-title .scalio-badge { vertical-align: middle; margin-left: 0.25rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/index.js

@@ -378,6 +378,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"), require("./saas_updates"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"), require("./saas_updates"), require("./pages"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -385,6 +385,7 @@ const LABELS = {
     // States
     loading: "Wird geladen …",
     empty: "Noch keine Einträge.",
+    pages: { showAll: "Alle anzeigen", filter: "Filter", sections: "Bereiche" },
     sections: {
       account: "Konto",
       appearance: "Darstellung",
@@ -795,6 +796,7 @@ const LABELS = {
     },
     loading: "Loading …",
     empty: "No entries yet.",
+    pages: { showAll: "Show all", filter: "Filter", sections: "Sections" },
     sections: {
       account: "Account",
       appearance: "Appearance",

package/react/pages.js

@@ -0,0 +1,191 @@
+"use strict";
+// Page templates (UISPEC section 2 «Page templates», nav/N10 B, from 0.33.0): Overview, List and Detail. The
+// Settings template is SettingsLayout (settings.js). A page passes its data; header, page actions in the sidebar
+// slot, grids, toolbar, loading and empty state look the same in every app.
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+const { KpiTile, EmptyState, Loading, StatusBadge } = require("./blocks");
+const { PageActions } = require("./actions");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+// Same layout as PageHeader in index.js (not required from there: index.js requires this module).
+function Header({ title, subtitle, eyebrow, back, actions, extra }) {
+  const right = actions || extra ? h(React.Fragment, null, extra || null, actions ? h(PageActions, null, actions) : null) : null;
+  return h(
+    "div",
+    { className: "scalio-page-header", "data-testid": "page-header" },
+    h(
+      "div",
+      { className: "scalio-page-header-text" },
+      back ? h("div", { className: "scalio-page-back" }, back) : null,
+      eyebrow ? h("div", { className: "scalio-eyebrow" }, eyebrow) : null,
+      h("h1", { className: "scalio-page-title" }, title),
+      subtitle ? h("p", { className: "scalio-page-subtitle" }, subtitle) : null
+    ),
+    right ? h("div", { className: "scalio-page-actions" }, right) : null
+  );
+}
+
+// Box on an overview page: title, optional «Alle anzeigen» (link element or onShowAll), content or empty text.
+function Panel({ title, showAll, onShowAll, empty, emptyText, children, lang, labels, testId, className }) {
+  const L = labelsFor(lang, labels);
+  let more = null;
+  if (showAll) more = h("span", { className: "scalio-panel-more" }, showAll);
+  else if (onShowAll) more = h("button", { type: "button", className: "scalio-panel-more", onClick: onShowAll }, L.pages.showAll);
+  return h(
+    "section",
+    { className: cx("scalio-panel", className), "data-testid": testId },
+    title || more
+      ? h("div", { className: "scalio-panel-head" }, title ? h("h2", { className: "scalio-panel-title" }, title) : h("span"), more)
+      : null,
+    h("div", { className: "scalio-panel-body" }, empty ? h(EmptyState, { text: emptyText, lang, labels }) : children)
+  );
+}
+
+// Overview: header, row of KPI tiles (tone "error" = needs attention), panels in a grid that adds columns.
+function OverviewPage({ title, subtitle, actions, kpis, loading, children, lang, labels, testId }) {
+  const tiles = (kpis || []).filter(Boolean);
+  return h(
+    "div",
+    { className: "scalio-template is-overview", "data-testid": testId || "overview-page" },
+    h(Header, { title, subtitle, actions }),
+    loading ? h(Loading, { lang, labels }) : null,
+    tiles.length
+      ? h("div", { className: "scalio-kpi-row", "data-testid": "kpi-row" }, tiles.map((k, i) => h(KpiTile, Object.assign({ key: k.key || k.testId || i }, k))))
+      : null,
+    children ? h("div", { className: "scalio-panels" }, children) : null
+  );
+}
+
+// Toolbar of a list: search, filter chips, extra controls and a menu (import/export) on the right.
+function Toolbar({ search, onSearch, searchLabel, filters, onFilter, menu, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const chips = (filters || []).filter(Boolean);
+  return h(
+    "div",
+    { className: "scalio-toolbar", "data-testid": testId || "list-toolbar" },
+    onSearch
+      ? h("input", {
+          type: "search",
+          className: "scalio-input scalio-toolbar-search",
+          value: search || "",
+          placeholder: searchLabel || L.search,
+          "aria-label": searchLabel || L.search,
+          onChange: (e) => onSearch(e.target.value),
+          "data-testid": "list-search",
+        })
+      : null,
+    chips.length
+      ? h(
+          "div",
+          { className: "scalio-chips", role: "group", "aria-label": L.pages.filter },
+          chips.map((f) =>
+            h(
+              "button",
+              {
+                key: f.id,
+                type: "button",
+                className: cx("scalio-chip", f.active && "is-active"),
+                "aria-pressed": f.active ? "true" : "false",
+                onClick: () => onFilter && onFilter(f.id),
+                "data-testid": `filter-${f.id}`,
+              },
+              f.label,
+              f.count != null ? h("span", { className: "scalio-chip-count" }, f.count) : null
+            )
+          )
+        )
+      : null,
+    children ? h("div", { className: "scalio-toolbar-extra" }, children) : null,
+    menu ? h("div", { className: "scalio-toolbar-menu" }, menu) : null
+  );
+}
+
+// List: header with the main action (sidebar slot from 768px), toolbar, then the table or the empty state with
+// the next step. `empty` true shows the empty state instead of children.
+function ListPage({ title, subtitle, actions, toolbar, loading, empty, emptyText, emptyAction, children, lang, labels, testId }) {
+  let body = children;
+  if (loading) body = h(Loading, { lang, labels });
+  else if (empty) body = h(EmptyState, { text: emptyText, lang, labels }, emptyAction || null);
+  return h(
+    "div",
+    { className: "scalio-template is-list", "data-testid": testId || "list-page" },
+    h(Header, { title, subtitle, actions }),
+    toolbar || null,
+    h("div", { className: "scalio-list-body" }, body)
+  );
+}
+
+// Key facts on the right of a detail page: [{label, value}] as a definition list.
+function KeyFacts({ items, title, testId }) {
+  const rows = (items || []).filter((i) => i && i.value != null && i.value !== "");
+  if (!rows.length) return null;
+  return h(
+    "aside",
+    { className: "scalio-facts", "data-testid": testId || "key-facts" },
+    title ? h("h2", { className: "scalio-panel-title" }, title) : null,
+    h(
+      "dl",
+      null,
+      rows.map((r, i) =>
+        h(React.Fragment, { key: r.key || i }, h("dt", null, r.label), h("dd", null, r.value))
+      )
+    )
+  );
+}
+
+// Detail: back link and actions that lead away (`pageActions`) in the sidebar slot from 768px, header with status
+// badge and the record's own actions (`actions`: Freigeben, Stornieren; they stay on the page), tabs, key facts on
+// the right. tabs: [{id, label}] with tab/onTab, or leave them out for one section. status: {tone, label}, or
+// `badge` for an app's own badge element.
+function DetailPage({ title, subtitle, back, pageActions, status, badge: ownBadge, actions, tabs, tab, onTab, facts, factsTitle, loading, children, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const list = (tabs || []).filter(Boolean);
+  const badge = ownBadge || (status && status.label ? h(StatusBadge, { tone: status.tone, testId: "detail-status" }, status.label) : null);
+  const slot = back || pageActions
+    ? h(React.Fragment, null, back ? h("span", { className: "scalio-detail-back", "data-testid": "detail-back" }, back) : null, pageActions || null)
+    : null;
+  return h(
+    "div",
+    { className: "scalio-template is-detail", "data-testid": testId || "detail-page" },
+    h(Header, {
+      title: badge ? h(React.Fragment, null, title, " ", badge) : title,
+      subtitle,
+      actions: slot,
+      extra: actions || null,
+    }),
+    list.length
+      ? h(
+          "div",
+          { className: "scalio-tabs", role: "tablist", "aria-label": L.pages.sections },
+          list.map((t) =>
+            h(
+              "button",
+              {
+                key: t.id,
+                type: "button",
+                role: "tab",
+                className: cx("scalio-tab", t.id === tab && "is-active"),
+                "aria-selected": t.id === tab ? "true" : "false",
+                onClick: () => onTab && onTab(t.id),
+                "data-testid": t.testId || `tab-${t.id}`,
+              },
+              t.label
+            )
+          )
+        )
+      : null,
+    h(
+      "div",
+      { className: cx("scalio-detail-body", facts && facts.length && "has-facts") },
+      h("div", { className: "scalio-detail-main" }, loading ? h(Loading, { lang, labels }) : children),
+      h(KeyFacts, { items: facts, title: factsTitle })
+    )
+  );
+}
+
+module.exports = { OverviewPage, Panel, ListPage, Toolbar, DetailPage, KeyFacts };