@scalio-cloud/ui 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.12.0
+- New manual button in `AppHeader` (prop `docsUrl`): a book icon between theme and support that opens the product
+  manual in a new tab; `DocsButton` on its own, `manualUrl(product, { stage, lang })` builds the address
+  (`devdocs.<domain>` on dev and test, `docs.<domain>` on production, demo and self-hosted, German under `/de/`).
+  **Visible change** only in apps that pass `docsUrl`; no token changes.
+
 ## 0.11.0
 - Self-hosted support (ADR 0022, T11; needs scalio-connect 0.7.0 in the backend): `supportApi` gets `status()` and
   `setButtonHidden(hidden)`. The support drawer asks `status()` first; a self-hosted installation without a

package/README.md

@@ -45,7 +45,7 @@ support, avatar.
 A part only appears when the app passes its handler (Compass has no dark mode, so no `onThemeChange`).
 
 ```jsx
-import { AppHeader, PageHeader, VersionTag } from "@scalio-cloud/ui/react";
+import { AppHeader, PageHeader, VersionTag, manualUrl } from "@scalio-cloud/ui/react";
 
 <AppHeader
   brand={{ mark: "N", name: "Scalio Nexus", sub: "Dev" }}  // or your own element
@@ -55,6 +55,7 @@ import { AppHeader, PageHeader, VersionTag } from "@scalio-cloud/ui/react";
   status={<ApiStatus />}                                    // hidden below 768px
   lang={lang} onLangChange={setLang}                        // one click, shows the other language
   theme={theme} themeModes={["light", "dark", "system"]} onThemeChange={setTheme}
+  docsUrl={manualUrl("nexus", { stage, lang })}           // book icon, opens the manual in a new tab
   onSupport={() => setSupportOpen(true)}
   user={{ name, email, role }} onLogout={logout}
   menuItems={[{ label: "Profil", icon: User, onSelect: () => nav("/profile"), testId: "profile-link" }]}

package/package.json

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

@@ -32,6 +32,7 @@ const LifeBuoy = icon([
   ["circle", { cx: 12, cy: 12, r: 4 }],
   ["path", { d: "m4.93 4.93 4.24 4.24M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24" }],
 ]);
+const BookOpen = icon([["path", { d: "M12 7v14" }], ["path", { d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" }]]);
 const LogOut = icon([["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" }]]);
 const Menu = icon([["path", { d: "M4 6h16M4 12h16M4 18h16" }]]);
 const Check = icon([["path", { d: "M20 6 9 17l-5-5" }]]);
@@ -99,5 +100,5 @@ const History = icon([
 ]);
 const CornerDownLeft = icon([["path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }], ["path", { d: "m9 10-5 5 5 5" }]]);
 
-module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
+module.exports = { Sun, Moon, Monitor, LifeBuoy, BookOpen, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
   Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert, History, CornerDownLeft };

package/react/index.js

@@ -10,6 +10,7 @@ const TEST_IDS = {
   menu: "mobile-menu-btn",
   language: "language-toggle-btn",
   theme: "theme-toggle-btn",
+  docs: "docs-link-btn",
   support: "support-ticket-trigger",
   avatar: "user-avatar-btn",
   userName: "user-name",
@@ -233,6 +234,43 @@ function SupportButton({ onClick, lang, labels, testId }) {
   );
 }
 
+// The customer manual of a product: devdocs.<domain> on our dev and test instances, docs.<domain> everywhere
+// else (production, demo, self-hosted). German readers get the German version under /de/.
+const DOCS_DOMAINS = {
+  nexus: "scalionexus.com",
+  citadel: "scaliocitadel.com",
+  foundry: "scaliofoundry.com",
+  rosetta: "scaliorosetta.com",
+};
+
+function manualUrl(product, opts) {
+  const o = opts || {};
+  const domain = DOCS_DOMAINS[product] || product;
+  if (!domain || domain.indexOf(".") < 0) return null;
+  const stage = String(o.stage || "").toLowerCase();
+  const host = (stage === "dev" || stage === "test" ? "devdocs." : "docs.") + domain;
+  return `https://${host}/${o.lang === "de" ? "de/" : ""}`;
+}
+
+// Opens the manual in a new tab.
+function DocsButton({ href, lang, labels, testId }) {
+  if (!href) return null;
+  const L = labelsFor(lang, labels);
+  return h(
+    "a",
+    {
+      className: "scalio-btn scalio-btn-icon",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: L.docs,
+      "aria-label": L.docs,
+      "data-testid": testId || TEST_IDS.docs,
+    },
+    h(Icons.BookOpen, { className: "scalio-icon" })
+  );
+}
+
 function Brand({ brand }) {
   if (!brand) return null;
   if (React.isValidElement(brand)) return brand;
@@ -249,7 +287,7 @@ function Brand({ brand }) {
   return h("div", { className: "scalio-brand" }, inner);
 }
 
-// Header: [menu] brand, left slot ... app actions, status, language, theme, support, avatar.
+// Header: [menu] brand, left slot ... app actions, status, language, theme, manual, support, avatar.
 // The part from status to avatar has the same order in every app.
 function AppHeader(props) {
   const L = labelsFor(props.lang, props.labels);
@@ -284,6 +322,7 @@ function AppHeader(props) {
       labels: props.labels,
       testId: T.theme,
     }),
+    h(DocsButton, { href: props.docsUrl, lang: props.lang, labels: props.labels, testId: T.docs }),
     h(SupportButton, { onClick: props.onSupport, lang: props.lang, labels: props.labels, testId: T.support }),
     props.user
       ? h(UserMenu, {
@@ -326,6 +365,9 @@ module.exports = {
   LanguageToggle,
   ThemeToggle,
   SupportButton,
+  DocsButton,
+  manualUrl,
+  DOCS_DOMAINS,
   PageHeader,
   VersionTag,
   Icons,

package/react/labels.js

@@ -8,6 +8,7 @@ const LABELS = {
     dark: "Dunkel",
     system: "System",
     support: "Support",
+    docs: "Handbuch (öffnet in neuem Tab)",
     logout: "Abmelden",
     userMenu: "Benutzermenü",
     menu: "Menü",
@@ -208,6 +209,7 @@ const LABELS = {
     dark: "Dark",
     system: "System",
     support: "Support",
+    docs: "Manual (opens in a new tab)",
     logout: "Sign out",
     userMenu: "User menu",
     menu: "Menu",

package/shell.css

@@ -45,6 +45,7 @@
 }
 @media (min-width: 640px) { .scalio-btn { padding: 0 1rem; } }
 .scalio-btn:hover { background: hsl(var(--secondary)); }
+a.scalio-btn { text-decoration: none; }
 .scalio-btn:focus-visible, .scalio-avatar:focus-visible, .scalio-menu-item:focus-visible {
   outline: 2px solid hsl(var(--ring)); outline-offset: 1px;
 }