@scalio-cloud/ui 0.5.2 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.6.1
+- **Visible change for apps using `SettingsLayout`:** the settings page has no outer padding of its own any more;
+  the app's content area brings it (0.6.0 had both, so the page got a double margin). No change for other apps.
+
+## 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

package/README.md

@@ -123,6 +123,33 @@ Pages that belong together under one menu item keep their own addresses: the ite
 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

@@ -204,3 +204,41 @@
 .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. */
+/* No outer padding: the app's content area already has its own. */
+.scalio-settings { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
+@media (min-width: 768px) { .scalio-settings { flex-direction: row; align-items: flex-start; gap: 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.2",
+  "version": "0.6.1",
   "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/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) };