@scalio-cloud/ui 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.10.0
+- `LicensePanel` takes more from an app's own `map`: a `hint` per usage bar (e.g. base + add-on seats), add-ons with
+  `badges`, `detail`, `tone` (`info`/`warn`) and `removable: false`, `addonErrors` (invalid add-ons, removable),
+  `addonsHidden`, `addonsReadOnly` and `keyReadOnly` (a note instead of the form) and a `copied` text per row.
+  Lets Nexus keep its trials, demo mode and badges on the shared panel. **No visible change** for apps that use
+  `mapScalioLicense`.
+
 ## 0.9.0
 - New `CommandPalette` (⌘K / Strg+K): finds every page of the sidebar data (`nav`) plus extra `pages`, remembers the
   last visited pages, and takes app commands as `groups` (Nexus: AI and guarded actions). Arrow keys, Enter, Esc,

package/README.md

@@ -214,7 +214,8 @@ const license = licenseApi(api);
 `securityApi` reads snake_case and camelCase answers. `notify(text, tone)` gets `"success"` or `"error"`; without it
 the blocks show the message themselves. `confirm` is the app's dialog (`{title, action, danger}` -> Promise<boolean>),
 `window.confirm` otherwise. `formatError(err)` lets the app phrase API errors (for example license limit codes). A license backend with other routes passes its own `client` and a `map(license, {L})`
-that returns the view model described in `react/license.js`.
+that returns the view model described in `react/license.js`. Nexus does this: its `map` adds trial badges, seat hints, invalid
+add-ons and read-only notes (demo mode), and passes its trial notices as `statusExtra` and the reminder settings as `children`.
 
 ## Command palette (React)
 

package/nav.css

@@ -400,3 +400,11 @@
   .scalio-palette { max-height: 85vh; }
   .scalio-palette-foot, .scalio-palette-enter { display: none; }
 }
+.scalio-license-bar-hint { margin: 0.25rem 0 0; font-size: 0.6875rem; color: hsl(var(--primary)); }
+.scalio-license-addon-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
+.scalio-license-addon-name .scalio-badge { font-size: 10px; }
+.scalio-license-addon.tone-info { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.05); }
+.scalio-license-addon.tone-warn { border-color: #fcd34d; background: rgb(254 243 199 / 0.5); }
+.dark .scalio-license-addon.tone-warn { border-color: rgb(251 191 36 / 0.4); background: rgb(251 191 36 / 0.08); }
+.scalio-license-addon-error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-license-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.9.0",
+  "version": "0.10.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/license.js

@@ -36,8 +36,11 @@ function licenseApi(api) {
 }
 
 // View model:
-// { edition, licensed, customer, managed, messages[], rows[{label, value, tone, mono, copy, testId}],
-//   features[{key, label}] | null, usage[{key, label, used, max}], addons[{id, name, detail, included}], addonErrors[{key, error}], keyPresent }
+// { edition, licensed, customer, managed, messages[], rows[{label, value, tone, mono, copy, copied, testId}],
+//   features[{key, label}] | null, usage[{key, label, used, max, hint}],
+//   addons[{id, name, seats, exp, detail, badges[{label, tone}], tone, removable}], addonErrors[{key, error, addon}], keyPresent,
+//   addonsHidden, addonsReadOnly (note instead of the add-on form), keyReadOnly (note instead of the key form) }
+// Optional fields let an app with its own license model (Nexus: trials, demo) show more without its own panel.
 function mapScalioLicense(lic, opts) {
   const o = opts || {};
   const L = o.L || labelsFor(o.lang).license;
@@ -94,7 +97,8 @@ function UsageBar({ item }) {
       h("span", { className: "scalio-license-bar-label" }, item.label),
       h("span", { className: cx("scalio-license-bar-value", full && "is-error") }, used === null ? "-" : used, " / ", unlimited ? "∞" : item.max)
     ),
-    h("div", { className: "scalio-license-bar" }, h("div", { className: cx(full && "is-full", unlimited && "is-unlimited"), style: { width: `${pct}%` } }))
+    h("div", { className: "scalio-license-bar" }, h("div", { className: cx(full && "is-full", unlimited && "is-unlimited"), style: { width: `${pct}%` } })),
+    item.hint ? h("p", { className: "scalio-license-bar-hint", "data-testid": `license-limit-${item.key}-hint` }, item.hint) : null
   );
 }
 
@@ -155,10 +159,10 @@ function LicensePanel(props) {
   const addAddon = async () => {
     if (await run(() => client.addAddon(addon.trim()), L.addonActivated)) setAddon("");
   };
-  const copy = async (value) => {
+  const copy = async (value, copied) => {
     try {
       await navigator.clipboard.writeText(value);
-      say(L.idCopied);
+      say(copied || L.idCopied);
     } catch (e) {
       say(L.copyFailed, "error");
     }
@@ -170,7 +174,7 @@ function LicensePanel(props) {
       { key: r.label + i },
       h("dt", null, r.label),
       r.copy
-        ? h("dd", null, h("button", { type: "button", className: "scalio-license-copy", title: L.copy, onClick: () => copy(r.value), "data-testid": r.testId },
+        ? h("dd", null, h("button", { type: "button", className: "scalio-license-copy", title: L.copy, onClick: () => copy(r.value, r.copied), "data-testid": r.testId },
             r.value, h(Icons.Copy, { className: "scalio-icon", width: 12, height: 12 })))
         : h("dd", { className: cx(r.mono && "is-mono"), "data-testid": r.testId }, r.tone ? h("span", { className: `is-${r.tone}` }, r.value) : r.value)
     );
@@ -219,7 +223,7 @@ function LicensePanel(props) {
         ? h("div", { className: "scalio-license-usage" }, h("div", { className: "scalio-license-sub" }, L.usage), m.usage.map((u) => h(UsageBar, { key: u.key, item: u })))
         : null
     ),
-    h(
+    m.addonsHidden ? null : h(
       "div",
       { className: "scalio-license-part", "data-testid": "license-addons" },
       h("div", { className: "scalio-license-sub" }, h(Icons.Puzzle, { className: "scalio-icon", width: 14, height: 14 }), L.addons),
@@ -230,16 +234,23 @@ function LicensePanel(props) {
             m.addons.map((a) =>
               h(
                 "div",
-                { key: a.id, className: "scalio-license-addon", "data-testid": `addon-card-${a.id}` },
+                { key: a.id, className: cx("scalio-license-addon", a.tone && `tone-${a.tone}`), "data-testid": `addon-card-${a.id}` },
                 h(
                   "div",
                   { style: { minWidth: 0 } },
-                  h("div", { className: "scalio-license-addon-name" }, a.name),
+                  h(
+                    "div",
+                    { className: "scalio-license-addon-name" },
+                    a.name,
+                    (a.badges || []).map((b) =>
+                      h("span", { key: b.label, className: cx("scalio-badge", b.tone && `is-${b.tone}`), "data-testid": b.testId }, b.label))
+                  ),
                   h("p", { className: "scalio-license-addon-detail" },
-                    a.seats ? `+${a.seats}` : h("span", { className: "is-ok" }, L.included),
-                    a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : "")
+                    a.detail !== undefined
+                      ? a.detail
+                      : [a.seats ? `+${a.seats}` : h("span", { key: "i", className: "is-ok" }, L.included), a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : ""])
                 ),
-                m.managed
+                m.managed || m.addonsReadOnly || a.removable === false
                   ? null
                   : h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy, title: L.remove, "aria-label": L.remove,
                       "data-testid": `addon-remove-${a.id}`, onClick: () => run(() => client.removeAddon(a), L.addonRemoved) },
@@ -248,8 +259,20 @@ function LicensePanel(props) {
             )
           )
         : h("p", { className: "scalio-license-empty" }, L.noAddons),
-      m.addonErrors.map((e) => h("div", { key: e.key, className: "scalio-license-addon-error" }, e.error)),
-      m.managed
+      m.addonErrors.map((e) =>
+        h(
+          "div",
+          { key: e.key, className: "scalio-license-addon-error", "data-testid": e.testId },
+          h("span", null, e.error),
+          e.addon && !m.managed && !m.addonsReadOnly
+            ? h("button", { type: "button", className: "scalio-license-link", disabled: busy, "data-testid": `addon-remove-${e.addon.id}`,
+                onClick: () => run(() => client.removeAddon(e.addon), L.addonRemoved) }, L.remove)
+            : null
+        )
+      ),
+      m.addonsReadOnly
+        ? h("div", { className: "scalio-notice is-info", "data-testid": "license-addon-readonly" }, m.addonsReadOnly)
+        : m.managed
         ? null
         : h(
             "div",
@@ -261,7 +284,9 @@ function LicensePanel(props) {
                 h(Icons.Plus, { className: "scalio-icon" }), L.add))
           )
     ),
-    m.managed
+    m.keyReadOnly && !m.managed
+      ? h("div", { className: "scalio-license-part" }, h("div", { className: "scalio-notice is-info", "data-testid": "license-key-readonly" }, m.keyReadOnly))
+      : m.managed
       ? null
       : h(
           "div",