@replicated/portal-components 0.0.2 → 0.0.3

package/dist/esm/top-nav.js

@@ -0,0 +1,398 @@
+import { Buffer } from 'buffer';
+import { cache } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+
+// src/actions/index.ts
+var getApiOrigin = () => {
+  return (process.env.REPLICATED_APP_ORIGIN || "https://replicated.app").replace(/\/+$/, "");
+};
+var fetchCustomBrandingImpl = async () => {
+  const appSlug = process.env.PORTAL_APP_SLUG;
+  if (!appSlug) {
+    throw new Error("PORTAL_APP_SLUG is not configured");
+  }
+  const url = `${getApiOrigin()}/v3/custom-branding?app_slug=${encodeURIComponent(
+    appSlug
+  )}`;
+  if (process.env.NODE_ENV !== "production") {
+    console.debug(
+      "[portal-components] fetching custom branding via %s",
+      url
+    );
+  }
+  const response = await fetch(url, {
+    headers: {
+      accept: "application/json"
+    }
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Custom branding request failed (${response.status} ${response.statusText})`
+    );
+  }
+  const payload = await response.json();
+  const brandingData = payload?.branding_data;
+  if (typeof brandingData !== "string") {
+    throw new Error("Custom branding response missing branding_data string");
+  }
+  return {
+    brandingData,
+    documentation: payload?.documentation ?? null
+  };
+};
+var fetchCustomBranding = cache(fetchCustomBrandingImpl);
+var defaultHiddenLabels = ["Download"];
+var defaultTopNavLinks = [
+  {
+    label: "Dashboard",
+    href: "/",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M4 13h6V3H4z" }),
+          /* @__PURE__ */ jsx("path", { d: "M14 21h6V3h-6z" })
+        ]
+      }
+    )
+  },
+  {
+    label: "Download",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
+          /* @__PURE__ */ jsx("path", { d: "m7 11 5 5 5-5" }),
+          /* @__PURE__ */ jsx("path", { d: "M5 21h14" })
+        ]
+      }
+    )
+  },
+  {
+    label: "Install",
+    href: "/install",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+          /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+        ]
+      }
+    )
+  },
+  {
+    label: "Update",
+    href: "/update",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M4 4v6h6" }),
+          /* @__PURE__ */ jsx("path", { d: "M20 20v-6h-6" }),
+          /* @__PURE__ */ jsx("path", { d: "M4 10c1.5-4 6-6 10-4m6 4c-1.5 4-6 6-10 4" })
+        ]
+      }
+    )
+  },
+  {
+    label: "Release History",
+    href: "/release-history",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 8v4l3 2" }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" })
+        ]
+      }
+    )
+  },
+  {
+    label: "License",
+    href: "/license",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx("rect", { width: "14", height: "18", x: "5", y: "3", rx: "2" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 7h6" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 11h6" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 15h6" })
+        ]
+      }
+    )
+  },
+  {
+    label: "Support",
+    href: "/support",
+    icon: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        className: "h-4 w-4",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 16a6 6 0 1 0-12 0v2h12Z" }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+        ]
+      }
+    )
+  }
+];
+var orderLinks = (links, order) => {
+  if (!order || order.length === 0) {
+    return links;
+  }
+  const orderMap = new Map(order.map((label, index) => [label, index]));
+  return links.map((link, index) => ({
+    link,
+    originalIndex: index,
+    orderIndex: orderMap.has(link.label) ? orderMap.get(link.label) : order.length + index
+  })).sort((a, b) => {
+    if (a.orderIndex === b.orderIndex) {
+      return a.originalIndex - b.originalIndex;
+    }
+    return a.orderIndex - b.orderIndex;
+  }).map((item) => item.link);
+};
+var TopNav = async ({
+  links,
+  hiddenLabels,
+  additionalLinks,
+  order,
+  userMenuLabel,
+  activeLabel,
+  customerName,
+  customers,
+  currentCustomerId,
+  onChangeTeam,
+  userMenuChildren
+}) => {
+  const displayLabel = userMenuLabel || (customerName ? `Team: ${customerName}` : "Team: Example");
+  let logo;
+  let brandTitle;
+  let customColor1;
+  let customColor2;
+  const normalizeColor = (color) => {
+    if (!color || typeof color !== "string") {
+      return void 0;
+    }
+    const trimmed = color.trim();
+    if (/^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(trimmed)) {
+      return trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+    }
+    return trimmed;
+  };
+  try {
+    const branding = await fetchCustomBranding();
+    if (branding.brandingData) {
+      const decoded = Buffer.from(branding.brandingData, "base64").toString(
+        "utf-8"
+      );
+      try {
+        const parsed = JSON.parse(decoded);
+        if (parsed?.logo && typeof parsed.logo === "string") {
+          logo = parsed.logo;
+        }
+        if (parsed?.title && typeof parsed.title === "string") {
+          const normalizedTitle = parsed.title.trim();
+          if (normalizedTitle) {
+            brandTitle = normalizedTitle;
+          }
+        }
+        if (parsed?.customColor1 && typeof parsed.customColor1 === "string") {
+          customColor1 = normalizeColor(parsed.customColor1);
+        }
+        if (parsed?.customColor2 && typeof parsed.customColor2 === "string") {
+          customColor2 = normalizeColor(parsed.customColor2);
+        }
+      } catch (error) {
+        console.debug(
+          "[portal-components] unable to parse branding JSON",
+          error
+        );
+      }
+    } else {
+      console.debug("[portal-components] branding", branding);
+    }
+  } catch (error) {
+    console.debug("[portal-components] branding fetch failed", error);
+  }
+  const baseLinks = links ?? defaultTopNavLinks;
+  const computedHiddenLabels = hiddenLabels ? hiddenLabels : links ? void 0 : defaultHiddenLabels;
+  const hiddenSet = computedHiddenLabels ? new Set(computedHiddenLabels) : null;
+  let resolvedLinks = baseLinks.filter(
+    (link) => !hiddenSet?.has(link.label)
+  );
+  if (additionalLinks?.length) {
+    resolvedLinks = [...resolvedLinks, ...additionalLinks];
+  }
+  resolvedLinks = orderLinks(resolvedLinks, order);
+  const gradientStart = customColor1 ?? "rgb(235, 102, 88)";
+  const gradientEnd = customColor2 ?? customColor1 ?? "rgb(184, 83, 71)";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative flex h-[165px] w-full items-start justify-center",
+      style: {
+        backgroundImage: `linear-gradient(to top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 33%), linear-gradient(${gradientStart}, ${gradientEnd})`,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 100%"
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "mx-auto mt-[30px] w-full max-w-[1248px] px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex h-[135px] flex-col justify-between space-y-4 rounded bg-[#ffffffe6] px-6 pt-6 pb-4 shadow-[0_10px_60px_rgba(16,16,16,0.35)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          logo || brandTitle ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            logo ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: logo,
+                  alt: "Portal logo",
+                  className: "object-contain",
+                  style: {
+                    maxWidth: "240px",
+                    maxHeight: "48px"
+                  }
+                }
+              )
+            ) : null,
+            brandTitle ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-gray-900", children: brandTitle }) : null
+          ] }) : /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsxs("details", { className: "group relative", children: [
+            /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center gap-2 rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 list-none", children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "text-gray-500",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: displayLabel }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "text-gray-500",
+                  children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute right-0 mt-2 w-48 rounded-md border border-gray-200 bg-white py-2 text-sm text-gray-700 shadow-lg z-50", children: [
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "/user-settings",
+                  className: "block w-full px-4 py-2 text-left hover:bg-gray-100",
+                  children: "User settings"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "/team-settings",
+                  className: "block w-full px-4 py-2 text-left hover:bg-gray-100",
+                  children: "Team settings"
+                }
+              ),
+              userMenuChildren,
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "/?expired=1",
+                  className: "block w-full px-4 py-2 text-left hover:bg-gray-100",
+                  children: "Logout"
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-3 border-b border-gray-200 pb-2 text-sm font-medium text-gray-500", children: resolvedLinks.map(({ label, icon, href }) => {
+          const isActive = activeLabel === label;
+          const className = `flex items-center gap-2 px-4 py-1 transition text-gray-500 ${isActive ? "underline underline-offset-8 decoration-2" : ""}`;
+          if (href) {
+            return /* @__PURE__ */ jsxs("a", { href, className, children: [
+              /* @__PURE__ */ jsx("span", { className: isActive ? "text-rose-600" : "text-gray-500", children: icon }),
+              /* @__PURE__ */ jsx("span", { children: label })
+            ] }, label);
+          }
+          return /* @__PURE__ */ jsxs("button", { className, type: "button", children: [
+            /* @__PURE__ */ jsx("span", { className: isActive ? "text-rose-600" : "text-gray-500", children: icon }),
+            /* @__PURE__ */ jsx("span", { children: label })
+          ] }, label);
+        }) })
+      ] }) })
+    }
+  );
+};
+
+export { TopNav };
+//# sourceMappingURL=top-nav.js.map
+//# sourceMappingURL=top-nav.js.map