@scalio-cloud/ui 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.6.0
+- New `SettingsLayout` and `SettingsSection` for the settings page (UISPEC "Einstellungen"): sub-navigation on
+  the left in fixed groups (Allgemein, app groups, Verbindungen, Benachrichtigungen, Sicherheit, System) with a
+  search, a select on phones, crumb and title of the area; areas look like the profile page. Below three areas
+  the sub-navigation is left out. `LABELS` gets the group names. No change for apps that do not use them.
+
+## 0.5.2
+- Navigation items take `match` (further paths that mark the item active), for one menu item over several pages.
+- New `SubNav` (tabs as links on top of a page) and `WorkspaceSwitcher` (Identity / HR in Nexus). No change for
+  apps that do not use them.
+
 ## 0.5.1
 - Phones: the context select (tenant, customer) is hidden in the header below 640px, there is no room next to
   the header buttons. `AppShell` takes `drawerTop` and shows it above the navigation in the phone drawer.

package/README.md

@@ -117,6 +117,39 @@ sidebar renders plain links and marks the item for `activePath`. Item test ids d
 `EmptyState` (children = next step), `Loading`, `Notice` (`info`, `ok`, `warn`, `error`), `StatusBadge`
 (tones `neutral`, `running`, `ok`, `warn`, `error`) and `PageHeader` with `back` for detail pages.
 
+Pages that belong together under one menu item keep their own addresses: the item lists them in `match`
+(`{ to: "/groups", label: "Gruppen", match: ["/teams", "/distribution-lists"] }`, pass `activePath` with
+`link`) and each page shows `<SubNav items={[{ to: "/groups", label: "Sicherheit", end: true }, ...]} link={NavLink} />`
+on top. An app with two work areas (Nexus Identity and HR) puts `<WorkspaceSwitcher options value onSelect />`
+into the sidebar's `top`.
+
+## Settings page (React)
+
+Every area of the settings has its own address (`/settings/<area>`); the app's router picks the area, the
+layout draws the sub-navigation, the crumb ("Einstellungen › Verbindungen") and the title. Groups `general`,
+`connections`, `notifications`, `security` and `system` get their names from `LABELS` and always sit in this
+order, the app's own groups (with `label`) come after "Allgemein". Hidden areas and empty groups disappear, below
+three areas (`minItems`) there is no sub-navigation. The search looks at label, hint, group and `keywords`;
+`search={false}` leaves it out, `search={<OwnSearch />}` puts the app's own search there.
+
+```jsx
+import { SettingsLayout, SettingsSection } from "@scalio-cloud/ui/react";
+
+const GROUPS = [
+  { id: "general", items: [{ id: "general", to: "/settings/general", label: "Instanz", hint: "Name, Sprache, Zeitzone" }] },
+  { id: "flows", label: "Abläufe", items: [{ id: "onboarding", to: "/settings/onboarding", label: "Onboarding" }] },
+  { id: "connections", items: [{ id: "sync", to: "/settings/sync", label: "Synchronisierung", keywords: ["Intervall"] }] },
+  { id: "system", items: [{ id: "updates", to: "/settings/updates", label: "Updates", hidden: saas }] },
+];
+
+<SettingsLayout groups={GROUPS} active={area} link={NavLink} onSelect={(i) => navigate(i.to)} lang={lang}>
+  <SettingsSection id="cloud-sync" title="Cloud-Synchronisierung" description="Intervall und Umfang."
+    footer={<Button onClick={save}>Speichern</Button>}>
+    ...form fields (shadcn)...
+  </SettingsSection>
+</SettingsLayout>
+```
+
 ## Sign-in page and profile (React)
 
 All sign-in pages use the same frame and order: Microsoft first, then "oder mit E-Mail", the password field with

package/nav.css

@@ -32,6 +32,22 @@
 .scalio-nav-item.is-active { border-left-color: hsl(var(--primary)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-weight: 600; }
 .scalio-nav-item.is-bold { font-weight: 700; }
 .scalio-nav-item:focus-visible, .scalio-nav-cta:focus-visible, .scalio-nav-search:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+.scalio-workspace { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: 0.375rem; background: hsl(var(--border) / 0.6); }
+.scalio-workspace-item {
+  display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border: 0; border-radius: 0.25rem;
+  background: transparent; font: inherit; font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); cursor: pointer;
+}
+.scalio-workspace-item.is-active { background: hsl(var(--background)); color: hsl(var(--primary)); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
+.scalio-workspace-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-workspace-item .scalio-icon { width: 0.875rem; height: 0.875rem; }
+.scalio-subnav { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; }
+.scalio-subnav-item {
+  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: -1px; white-space: nowrap;
+  border-bottom: 2px solid transparent; font-size: 0.875rem; color: hsl(var(--muted-foreground)); text-decoration: none;
+}
+.scalio-subnav-item:hover { color: hsl(var(--foreground)); }
+.scalio-subnav-item.is-active { border-bottom-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; }
+.scalio-subnav-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
 .scalio-nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
 .scalio-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .scalio-nav-badge {
@@ -188,3 +204,40 @@
 .dark .scalio-badge.is-running { color: #8ba6f7; border-color: rgb(139 166 247 / 0.4); }
 .dark .scalio-badge.is-ok, .dark .scalio-kpi.is-ok .scalio-kpi-value { color: #4ade80; }
 .dark .scalio-badge.is-warn, .dark .scalio-kpi.is-warn .scalio-kpi-value { color: #fbbf24; }
+
+/* Settings page: sub-navigation left (from 768px), areas right; phones get a select instead. */
+.scalio-settings { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; min-width: 0; }
+@media (min-width: 768px) { .scalio-settings { flex-direction: row; align-items: flex-start; gap: 2.5rem; padding: 2rem 2.5rem; } }
+.scalio-settings-nav { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
+@media (min-width: 768px) { .scalio-settings-nav { width: 15rem; flex-shrink: 0; position: sticky; top: 1.5rem; } }
+.scalio-settings-search {
+  display: flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.625rem;
+  border: 1px solid hsl(var(--input)); border-radius: 2px; background: hsl(var(--background)); color: hsl(var(--muted-foreground));
+}
+.scalio-settings-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.8125rem; color: hsl(var(--foreground)); }
+.scalio-settings-search:focus-within { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-settings-select {
+  display: block; height: 2.25rem; padding: 0 0.5rem; border: 1px solid hsl(var(--input)); border-radius: 2px;
+  background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; font-size: 0.875rem;
+}
+/* Phones: only the select; the search filters the list, which phones do not show. */
+.scalio-settings-list, .scalio-settings-search { display: none; }
+@media (min-width: 768px) {
+  .scalio-settings-select { display: none; }
+  .scalio-settings-search { display: flex; }
+  .scalio-settings-list { display: flex; flex-direction: column; gap: 1rem; }
+}
+.scalio-settings-group { display: flex; flex-direction: column; }
+.scalio-settings-group .scalio-nav-heading { padding: 0 0.75rem 0.375rem; }
+.scalio-settings-item {
+  display: block; padding: 0.375rem 0.75rem; border-left: 2px solid transparent; font-size: 0.875rem;
+  color: hsl(var(--muted-foreground)); text-decoration: none; transition: color 150ms, background-color 150ms;
+}
+.scalio-settings-item:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
+.scalio-settings-item.is-active { border-left-color: hsl(var(--primary)); color: hsl(var(--foreground)); font-weight: 600; background: hsl(var(--muted)); }
+.scalio-settings-item:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
+.scalio-settings-empty { margin: 0; padding: 0 0.75rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
+.scalio-settings-main { flex: 1 1 auto; min-width: 0; max-width: 64rem; }
+.scalio-settings-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
+.scalio-settings-body { display: flex; flex-direction: column; }
+.scalio-settings-section-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.5.1",
+  "version": "0.6.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

@@ -333,6 +333,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks);
+Object.assign(module.exports, Nav, Blocks, require("./settings"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -40,6 +40,11 @@ const LABELS = {
     closeMenu: "Menü schliessen",
     tenant: "Tenant",
     customer: "Kunde",
+    // Settings page (fixed groups, same order in every app)
+    settingsGroups: { general: "Allgemein", connections: "Verbindungen", notifications: "Benachrichtigungen", security: "Sicherheit", system: "System" },
+    searchSettings: "Einstellung suchen",
+    noSettingsMatch: "Kein Bereich gefunden",
+    settingsArea: "Bereich",
     // Switcher
     soon: "bald",
     switchTo: "Zu dieser Anwendung wechseln",
@@ -109,6 +114,10 @@ const LABELS = {
     closeMenu: "Close menu",
     tenant: "Tenant",
     customer: "Customer",
+    settingsGroups: { general: "General", connections: "Connections", notifications: "Notifications", security: "Security", system: "System" },
+    searchSettings: "Find a setting",
+    noSettingsMatch: "No area found",
+    settingsArea: "Area",
     soon: "soon",
     switchTo: "Switch to this application",
     activeApp: "Active application",
@@ -146,6 +155,7 @@ function labelsFor(lang, overrides) {
   return Object.assign({}, base, o, {
     sections: Object.assign({}, base.sections, o.sections),
     sectionHints: Object.assign({}, base.sectionHints, o.sectionHints),
+    settingsGroups: Object.assign({}, base.settingsGroups, o.settingsGroups),
   });
 }
 

package/react/nav.js

@@ -47,10 +47,12 @@ function NavItem({ item, link, activePath, onNavigate, testIdPrefix }) {
       : null,
   ];
   const testId = itemTestId(item, testIdPrefix);
+  // match: further paths that belong to this item (e.g. "Gruppen" also for /teams); needs activePath.
+  const matched = (item.match || []).some((m) => isActivePath(activePath, m));
   if (link) {
-    return h(link, { to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), onClick: onNavigate, "data-testid": testId }, content);
+    return h(link, { to: item.to, end: item.end, className: ({ isActive }) => cls(isActive || matched), onClick: onNavigate, "data-testid": testId }, content);
   }
-  const active = isActivePath(activePath, item.to, item.end);
+  const active = isActivePath(activePath, item.to, item.end) || matched;
   return h("a", { href: item.to, className: cls(active), "aria-current": active ? "page" : undefined, onClick: onNavigate, "data-testid": testId }, content);
 }
 
@@ -140,6 +142,53 @@ function Sidebar(props) {
   );
 }
 
+// Tabs as links on top of a page, for pages that belong together under one menu item
+// (e.g. Gruppen: Sicherheit, Verteiler, Microsoft 365, Teams). Each tab keeps its own address.
+function SubNav({ items, link, activePath, label, testId }) {
+  const visible = (items || []).filter((i) => i && !i.hidden);
+  if (visible.length < 2) return null;
+  return h(
+    "nav",
+    { className: "scalio-subnav", "aria-label": label || undefined, "data-testid": testId || "subnav" },
+    visible.map((item) => {
+      const tid = item.testId || `subnav-${slug(item.to)}`;
+      const cls = (active) => cx("scalio-subnav-item", active && "is-active");
+      const content = [item.label, item.badge != null && item.badge !== false ? h("span", { key: "b", className: "scalio-nav-badge" }, item.badge) : null];
+      if (link) {
+        return h(link, { key: item.to, to: item.to, end: item.end, className: ({ isActive }) => cls(isActive), "data-testid": tid }, content);
+      }
+      const active = isActivePath(activePath, item.to, item.end);
+      return h("a", { key: item.to, href: item.to, className: cls(active), "aria-current": active ? "page" : undefined, "data-testid": tid }, content);
+    })
+  );
+}
+
+// Two (or more) work areas of one app, e.g. Nexus Identity and HR. Sits in the sidebar's top slot.
+// options: [{ id, label, icon }]; onSelect(id) switches (the app navigates).
+function WorkspaceSwitcher({ options, value, onSelect, testIdPrefix, testId }) {
+  const prefix = testIdPrefix || "";
+  if (!options || options.length < 2) return null;
+  return h(
+    "div",
+    { className: "scalio-workspace", role: "group", "data-testid": prefix + (testId || "workspace-switcher") },
+    options.map((o) =>
+      h(
+        "button",
+        {
+          key: o.id,
+          type: "button",
+          className: cx("scalio-workspace-item", o.id === value && "is-active"),
+          "aria-pressed": o.id === value,
+          onClick: () => onSelect && onSelect(o.id),
+          "data-testid": `${prefix}ws-${o.id}`,
+        },
+        o.icon ? h(o.icon, { className: "scalio-icon", "aria-hidden": "true" }) : null,
+        o.label
+      )
+    )
+  );
+}
+
 // "Version 1.2.4 · 3f2a1bc" at the bottom of the sidebar.
 function VersionTag({ version, commit, lang, labels, testId }) {
   const L = labelsFor(lang, labels);
@@ -443,6 +492,8 @@ module.exports = {
   Sidebar,
   NavItem,
   NavDrawer,
+  SubNav,
+  WorkspaceSwitcher,
   AppShell,
   ContextSelect,
   ProductSwitcher,

package/react/settings.js

@@ -0,0 +1,216 @@
+"use strict";
+// Settings page (UISPEC "Einstellungen"): sub-navigation on the left in fixed groups, the areas on the
+// right in the style of the profile page (title and hint left, card right). Every area has its own
+// address (/settings/<area>), the app's router decides which one is shown.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { labelsFor } = require("./labels");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+// Fixed order: Allgemein first, then the app's own groups, then Verbindungen, Benachrichtigungen,
+// Sicherheit, System. Labels of the fixed groups come from LABELS; app groups bring their own.
+const FIXED_HEAD = ["general"];
+const FIXED_TAIL = ["connections", "notifications", "security", "system"];
+
+function orderGroups(groups) {
+  const list = (groups || []).filter(Boolean);
+  const pick = (ids) => ids.map((id) => list.find((g) => g.id === id)).filter(Boolean);
+  const fixed = FIXED_HEAD.concat(FIXED_TAIL);
+  return pick(FIXED_HEAD).concat(list.filter((g) => fixed.indexOf(g.id) < 0), pick(FIXED_TAIL));
+}
+
+// Visible groups with their visible items, in the fixed order. Empty groups disappear.
+function settingsGroups(groups, L) {
+  return orderGroups(groups)
+    .map((g) => Object.assign({}, g, {
+      label: g.label || (L && L.settingsGroups && L.settingsGroups[g.id]) || g.id,
+      items: (g.items || []).filter((i) => i && !i.hidden),
+    }))
+    .filter((g) => g.items.length > 0);
+}
+
+function norm(s) {
+  return String(s || "").toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "");
+}
+
+// Search over label, hint, group label and keywords; every word must match somewhere.
+function matchSetting(item, group, query) {
+  const words = norm(query).split(/\s+/).filter(Boolean);
+  if (!words.length) return true;
+  const hay = norm([item.label, item.hint, group && group.label].concat(item.keywords || []).join(" "));
+  return words.every((w) => hay.indexOf(w) >= 0);
+}
+
+function findSetting(groups, id) {
+  for (const g of groups) {
+    for (const i of g.items) if (i.id === id) return { group: g, item: i };
+  }
+  return null;
+}
+
+// groups: [{ id, label?, items: [{ id, to, label, hint?, keywords?, hidden? }] }]
+// active: id of the area shown; onSelect(item): the app navigates (used by search and the phone select);
+// link: the router's NavLink for the list (optional, without it plain links + onSelect).
+// minItems: below this many areas the sub-navigation is left out (Citadel, Foundry), default 3.
+// search: true (default, filters the list), false, or the app's own search element.
+function SettingsLayout(props) {
+  const { groups, active, onSelect, link, lang, labels, title, hint, actions, children, minItems, search, testId } = props;
+  const L = labelsFor(lang, labels);
+  const visible = settingsGroups(groups, L);
+  const [query, setQuery] = React.useState("");
+  const current = findSetting(visible, active);
+  const count = visible.reduce((n, g) => n + g.items.length, 0);
+  const showNav = count >= (minItems != null ? minItems : 3);
+  const filtered = visible
+    .map((g) => Object.assign({}, g, { items: g.items.filter((i) => matchSetting(i, g, query)) }))
+    .filter((g) => g.items.length > 0);
+
+  const go = (item) => {
+    setQuery("");
+    if (onSelect) onSelect(item);
+  };
+
+  const navItem = (item) => {
+    const isActive = item.id === active;
+    const cls = cx("scalio-settings-item", isActive && "is-active");
+    const tid = `settings-nav-${item.id}`;
+    if (link) {
+      return h(link, { key: item.id, to: item.to, className: () => cls, onClick: () => setQuery(""), "data-testid": tid, "aria-current": isActive ? "page" : undefined }, item.label);
+    }
+    return h(
+      "a",
+      {
+        key: item.id,
+        href: item.to,
+        className: cls,
+        "aria-current": isActive ? "page" : undefined,
+        "data-testid": tid,
+        onClick: (e) => {
+          if (onSelect) {
+            e.preventDefault();
+            go(item);
+          }
+        },
+      },
+      item.label
+    );
+  };
+
+  // search: false = none, an element = the app's own search (e.g. Nexus jumps to single settings).
+  const searchBox = search === false ? null : React.isValidElement(search) ? h("div", { className: "scalio-settings-search-slot" }, search) : h(
+    "label",
+    { className: "scalio-settings-search" },
+    h(Icons.Search, { className: "scalio-icon", "aria-hidden": "true" }),
+    h("input", {
+      type: "search",
+      value: query,
+      placeholder: L.searchSettings,
+      "aria-label": L.searchSettings,
+      "data-testid": "settings-search",
+      onChange: (e) => setQuery(e.target.value),
+      onKeyDown: (e) => {
+        // Enter opens the first match, Escape clears the search.
+        if (e.key === "Enter" && filtered.length) {
+          e.preventDefault();
+          go(filtered[0].items[0]);
+        }
+        if (e.key === "Escape") setQuery("");
+      },
+    })
+  );
+
+  const nav = showNav
+    ? h(
+        "nav",
+        { className: "scalio-settings-nav", "aria-label": L.settings, "data-testid": "settings-nav" },
+        searchBox,
+        // Phones: one select instead of the list.
+        h(
+          "select",
+          {
+            className: "scalio-settings-select",
+            value: active || "",
+            "aria-label": L.settingsArea,
+            "data-testid": "settings-select",
+            onChange: (e) => {
+              const hit = findSetting(visible, e.target.value);
+              if (hit) go(hit.item);
+            },
+          },
+          visible.map((g) =>
+            h("optgroup", { key: g.id, label: g.label }, g.items.map((i) => h("option", { key: i.id, value: i.id }, i.label)))
+          )
+        ),
+        h(
+          "div",
+          { className: "scalio-settings-list" },
+          filtered.length
+            ? filtered.map((g) =>
+                h(
+                  "div",
+                  { key: g.id, className: "scalio-settings-group", "data-group": g.id },
+                  h("div", { className: "scalio-nav-heading" }, g.label),
+                  g.items.map(navItem)
+                )
+              )
+            : h("p", { className: "scalio-settings-empty", "data-testid": "settings-search-empty" }, L.noSettingsMatch)
+        )
+      )
+    : null;
+
+  const heading = title || (current && current.item.label) || L.settings;
+  const sub = hint !== undefined ? hint : current && current.item.hint;
+  return h(
+    "div",
+    { className: cx("scalio-settings", !showNav && "is-single"), "data-testid": testId || "settings-layout" },
+    nav,
+    h(
+      "div",
+      { className: "scalio-settings-main" },
+      h(
+        "div",
+        { className: "scalio-settings-head" },
+        h(
+          "div",
+          { className: "scalio-settings-head-text" },
+          h(
+            "div",
+            { className: "scalio-eyebrow", "data-testid": "settings-crumb" },
+            current && showNav ? `${L.settings} › ${current.group.label}` : L.settings
+          ),
+          h("h1", { className: "scalio-page-title", "data-testid": "settings-title" }, heading),
+          sub ? h("p", { className: "scalio-page-subtitle" }, sub) : null
+        ),
+        actions ? h("div", { className: "scalio-page-actions" }, actions) : null
+      ),
+      h("div", { className: "scalio-settings-body" }, children)
+    )
+  );
+}
+
+// One block of an area: title and hint left, the form in a card right (same as ProfileSection).
+// footer: e.g. the area's save button, under the card content.
+function SettingsSection({ id, title, description, children, footer, testId }) {
+  return h(
+    "section",
+    { className: "scalio-profile-section scalio-settings-section", id: id ? `settings-${id}` : undefined, "data-testid": testId || (id ? `settings-section-${id}` : undefined) },
+    h(
+      "div",
+      { className: "scalio-profile-section-text" },
+      h("h2", { className: "scalio-profile-section-title" }, title),
+      description ? h("p", { className: "scalio-profile-section-desc" }, description) : null
+    ),
+    h(
+      "div",
+      { className: "scalio-profile-section-body" },
+      children,
+      footer ? h("div", { className: "scalio-settings-section-footer" }, footer) : null
+    )
+  );
+}
+
+module.exports = { SettingsLayout, SettingsSection, settingsGroups, matchSetting, SETTINGS_GROUP_ORDER: FIXED_HEAD.concat(["<app>"], FIXED_TAIL) };