@forjio/portal-ui 0.1.0

package/dist/Sidebar.js

@@ -0,0 +1,645 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronUp, X, LogOut, BookOpen, FileText, Shield } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { activeHrefFor, titleCase, writeActiveWorkspace } from "./utils";
+const DEFAULT_DROPDOWN_LINKS = [
+  { href: "/docs", label: "Documentation", icon: BookOpen },
+  { href: "/terms", label: "Terms of Service", icon: FileText },
+  { href: "/privacy", label: "Privacy Policy", icon: Shield }
+];
+function Sidebar({
+  brandSlug,
+  brandName,
+  brandColor,
+  brandIcon,
+  workspacePersist,
+  apiSwitchPath,
+  workspaces,
+  activeWorkspaceId,
+  sections,
+  user,
+  onWorkspaceSwitch,
+  onLogout,
+  open,
+  onClose,
+  dropdownLinks = DEFAULT_DROPDOWN_LINKS
+}) {
+  const pathname = usePathname() ?? "";
+  const active = workspaces.find((w) => w.id === activeWorkspaceId) ?? null;
+  const others = workspaces.filter((w) => w.id !== activeWorkspaceId);
+  const themeVars = {
+    ["--brand-color"]: brandColor,
+    ["--brand-soft"]: `${brandColor}26`
+    // 15% alpha
+  };
+  async function switchWorkspace(id) {
+    await writeActiveWorkspace(workspacePersist, brandSlug, id, apiSwitchPath);
+    if (onWorkspaceSwitch) {
+      await onWorkspaceSwitch(id);
+    } else if (typeof window !== "undefined") {
+      window.location.reload();
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    open && /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: onClose,
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.5)",
+          zIndex: 40
+        },
+        className: "lg:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        style: {
+          ...themeVars,
+          borderRight: "1px solid hsl(var(--border, 220 14% 90%))",
+          background: "hsl(var(--card, 0 0% 100%))",
+          color: "hsl(var(--foreground, 222 47% 11%))",
+          width: 248,
+          display: "flex",
+          flexDirection: "column"
+        },
+        className: `fixed inset-y-0 left-0 z-50 h-screen transition-transform lg:sticky lg:top-0 lg:translate-x-0 ${open ? "translate-x-0" : "-translate-x-full"}`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "20px 20px 18px",
+                borderBottom: "1px solid hsl(var(--border, 220 14% 90%))",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    href: "/dashboard",
+                    onClick: onClose,
+                    "aria-label": `${brandName} dashboard`,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      fontSize: 18,
+                      fontWeight: 700,
+                      letterSpacing: "-0.02em",
+                      textDecoration: "none",
+                      color: "inherit"
+                    },
+                    children: [
+                      brandIcon,
+                      brandName
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "lg:hidden",
+                    style: {
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer",
+                      color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                      padding: 4
+                    },
+                    "aria-label": "Close navigation",
+                    children: /* @__PURE__ */ jsx(X, { size: 18 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            WorkspaceSwitcher,
+            {
+              active,
+              others,
+              hasAny: workspaces.length > 0,
+              onSwitch: switchWorkspace,
+              onNavigate: onClose
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, padding: "16px 10px", overflowY: "auto" }, children: /* @__PURE__ */ jsx(NavList, { pathname, sections, onNavigate: onClose }) }),
+          /* @__PURE__ */ jsx(ProfileDropdown, { user, onLogout, onNavigate: onClose, dropdownLinks })
+        ]
+      }
+    )
+  ] });
+}
+function NavList({
+  pathname,
+  sections,
+  onNavigate
+}) {
+  const activeHref = activeHrefFor(pathname, sections);
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Dashboard", style: { display: "grid", gap: 16 }, children: sections.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: 10.5,
+          letterSpacing: "0.12em",
+          textTransform: "uppercase",
+          color: "hsl(var(--muted-foreground, 220 9% 46%) / 0.6)",
+          padding: "0 10px 6px",
+          fontWeight: 600
+        },
+        children: section.label
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 1 }, children: section.items.map((item) => {
+      const isActive = item.href === activeHref;
+      const Icon = item.icon;
+      const linkStyle = {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        fontSize: 13.5,
+        fontWeight: isActive ? 600 : 500,
+        color: isActive ? "hsl(var(--foreground, 222 47% 11%))" : "hsl(var(--muted-foreground, 220 9% 46%))",
+        padding: "7px 10px",
+        borderRadius: 8,
+        background: isActive ? "var(--brand-soft)" : "transparent",
+        cursor: "pointer",
+        textDecoration: "none"
+      };
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, { href: item.href, onClick: onNavigate, style: linkStyle, children: [
+        /* @__PURE__ */ jsx(Icon, { size: 15, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.label })
+      ] }) }, item.href);
+    }) })
+  ] }, section.label)) });
+}
+function WorkspaceChiclet({ name }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      style: {
+        width: 28,
+        height: 28,
+        flex: "0 0 28px",
+        borderRadius: 8,
+        background: "var(--brand-soft)",
+        color: "var(--brand-color)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 13,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        border: "1px solid var(--brand-soft)"
+      },
+      children: name.slice(0, 1)
+    }
+  );
+}
+function ForjioBadge() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: "Forjio-operated workspace",
+      style: {
+        fontSize: 10,
+        textTransform: "uppercase",
+        letterSpacing: "0.06em",
+        color: "var(--brand-color)",
+        background: "var(--brand-soft)",
+        border: "1px solid var(--brand-soft)",
+        padding: "1px 6px",
+        borderRadius: 4,
+        flex: "0 0 auto"
+      },
+      children: "forjio"
+    }
+  );
+}
+function WorkspaceSwitcher({
+  active,
+  others,
+  hasAny,
+  onSwitch,
+  onNavigate
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    function onClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+  if (!hasAny) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      style: {
+        position: "relative",
+        padding: "12px 10px",
+        borderBottom: "1px solid hsl(var(--border, 220 14% 90%))"
+      },
+      children: [
+        open && others.length > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "100%",
+              left: 10,
+              right: 10,
+              marginTop: 6,
+              borderRadius: 10,
+              border: "1px solid hsl(var(--border, 220 14% 90%))",
+              background: "hsl(var(--card, 0 0% 100%))",
+              boxShadow: "0 10px 30px -12px rgba(0, 0, 0, 0.5)",
+              padding: 4,
+              zIndex: 20
+            },
+            children: [
+              others.map((w) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    onSwitch(w.id);
+                  },
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    width: "100%",
+                    padding: "8px 10px",
+                    border: "none",
+                    background: "transparent",
+                    textAlign: "left",
+                    cursor: "pointer",
+                    borderRadius: 6,
+                    color: "inherit"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(WorkspaceChiclet, { name: w.name }),
+                    /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontSize: 13,
+                              fontWeight: 600,
+                              whiteSpace: "nowrap",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis"
+                            },
+                            children: w.name
+                          }
+                        ),
+                        w.isForjioInternal && /* @__PURE__ */ jsx(ForjioBadge, {})
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "block",
+                            fontSize: 11.5,
+                            color: "hsl(var(--muted-foreground, 220 9% 46%))"
+                          },
+                          children: titleCase(w.role)
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                w.id
+              )),
+              /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid hsl(var(--border, 220 14% 90%))", margin: "4px 0" } }),
+              /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: "/dashboard/workspaces",
+                  onClick: () => {
+                    setOpen(false);
+                    onNavigate?.();
+                  },
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    padding: "8px 10px",
+                    fontSize: 13,
+                    color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                    textDecoration: "none",
+                    borderRadius: 6
+                  },
+                  children: "+ Manage workspaces"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            disabled: !active,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              width: "100%",
+              padding: "6px 6px",
+              border: "none",
+              borderRadius: 8,
+              background: "transparent",
+              cursor: active ? "pointer" : "default",
+              textAlign: "left",
+              color: "inherit"
+            },
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            children: [
+              /* @__PURE__ */ jsx(WorkspaceChiclet, { name: active?.name ?? "?" }),
+              /* @__PURE__ */ jsxs("span", { style: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: 13,
+                        fontWeight: 600,
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                      },
+                      children: active?.name ?? "Loading\u2026"
+                    }
+                  ),
+                  active?.isForjioInternal && /* @__PURE__ */ jsx(ForjioBadge, {})
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      display: "block",
+                      fontSize: 11.5,
+                      color: "hsl(var(--muted-foreground, 220 9% 46%))"
+                    },
+                    children: active ? titleCase(active.role) : ""
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                ChevronUp,
+                {
+                  size: 14,
+                  strokeWidth: 2,
+                  style: {
+                    color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                    transform: open ? "rotate(180deg)" : "",
+                    transition: "transform 120ms ease"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function ProfileDropdown({
+  user,
+  onLogout,
+  onNavigate,
+  dropdownLinks
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  useEffect(() => {
+    function onClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+  const name = user?.name || "You";
+  const email = user?.email || "";
+  const initial = (user?.name || user?.email || "?").slice(0, 1).toUpperCase();
+  const itemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    fontSize: 13,
+    color: "inherit",
+    borderRadius: 6,
+    textDecoration: "none"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      style: {
+        position: "relative",
+        borderTop: "1px solid hsl(var(--border, 220 14% 90%))",
+        padding: "12px 10px"
+      },
+      children: [
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "100%",
+              left: 10,
+              right: 10,
+              marginBottom: 6,
+              borderRadius: 10,
+              border: "1px solid hsl(var(--border, 220 14% 90%))",
+              background: "hsl(var(--card, 0 0% 100%))",
+              boxShadow: "0 10px 30px -12px rgba(0, 0, 0, 0.5)",
+              padding: 4,
+              zIndex: 20
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    padding: "10px 12px",
+                    borderBottom: "1px solid hsl(var(--border, 220 14% 90%))"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600 }, children: name }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 12,
+                          color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                          wordBreak: "break-all"
+                        },
+                        children: email
+                      }
+                    )
+                  ]
+                }
+              ),
+              dropdownLinks.map((link) => {
+                const Icon = link.icon;
+                return /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    href: link.href,
+                    onClick: () => {
+                      setOpen(false);
+                      onNavigate?.();
+                    },
+                    style: itemStyle,
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { size: 14 }),
+                      " ",
+                      link.label
+                    ]
+                  },
+                  link.href
+                );
+              }),
+              /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid hsl(var(--border, 220 14% 90%))", margin: "4px 0" } }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    onLogout();
+                  },
+                  style: {
+                    ...itemStyle,
+                    color: "hsl(var(--destructive, 0 84% 60%))",
+                    width: "100%",
+                    border: "none",
+                    background: "transparent",
+                    cursor: "pointer",
+                    textAlign: "left"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(LogOut, { size: 14 }),
+                    " Sign out"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen((v) => !v),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              width: "100%",
+              padding: "8px 8px",
+              border: "none",
+              borderRadius: 8,
+              background: "transparent",
+              cursor: "pointer",
+              textAlign: "left",
+              color: "inherit"
+            },
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: 32,
+                    height: 32,
+                    flex: "0 0 32px",
+                    borderRadius: "50%",
+                    background: "var(--brand-color)",
+                    color: "#0b0b10",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 13,
+                    fontWeight: 700
+                  },
+                  children: initial
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { style: { minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      display: "block",
+                      fontSize: 13,
+                      fontWeight: 600,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: name
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      display: "block",
+                      fontSize: 11.5,
+                      color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: email
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                ChevronUp,
+                {
+                  size: 14,
+                  strokeWidth: 2,
+                  style: {
+                    color: "hsl(var(--muted-foreground, 220 9% 46%))",
+                    transform: open ? "" : "rotate(180deg)",
+                    transition: "transform 120ms ease"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Sidebar
+};
+//# sourceMappingURL=Sidebar.js.map