@adoptai/genui-components 0.1.58 → 0.1.59

package/dist/composites/tabby-auth/resolver.js

@@ -0,0 +1,595 @@
+"use client";
+import { createContext, useState, useContext, useRef, useCallback, useEffect } from 'react';
+import { toPng } from 'html-to-image';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/shared/theme.ts
+var BORDER = "#dedede";
+var MUTED = "#777777";
+var PAPER = "#f6f6f6";
+var ACCENT = "#ff5000";
+var ACCENT_SOFT = "#cc4000";
+var SECONDARY = "#0364ff";
+var CHART_PALETTE = [
+  "#ff5000",
+  "#0364ff",
+  "#16a34a",
+  "#dc2626",
+  "#7c3aed",
+  "#0891b2",
+  "#f59e0b",
+  "#6366f1",
+  "#ec4899",
+  "#84cc16",
+  "#e11d48",
+  "#0ea5e9"
+];
+function ColumnSettingsPanel({ columns, hidden, onToggle, onShowAll, onHideAll }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", minWidth: "180px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", paddingBottom: "4px", borderBottom: `1px solid ${BORDER}` }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onShowAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: ACCENT, fontWeight: 500, padding: 0 },
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onHideAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, fontWeight: 500, padding: 0 },
+          children: "Hide all"
+        }
+      )
+    ] }),
+    columns.map((col) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", fontSize: "12px", color: "var(--foreground)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: !hidden.has(col.key),
+              onChange: () => onToggle(col.key),
+              style: { accentColor: ACCENT, width: "14px", height: "14px", margin: 0, cursor: "pointer" }
+            }
+          ),
+          col.label
+        ]
+      },
+      col.key
+    ))
+  ] });
+}
+var DOT_COLOR = "#aaaaaa";
+var DOT_HOVER = "#555555";
+function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState("main");
+  const contentRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setView("main");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a, _b;
+      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      if ((_b = btnRef.current) == null ? void 0 : _b.contains(e.target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, close]);
+  const handleDownloadPNG = useCallback(async () => {
+    if (!contentRef.current) return;
+    try {
+      const url = await toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}.png`;
+      a.click();
+    } catch (e) {
+    }
+    close();
+  }, [filename, close]);
+  const handleCSV = useCallback(() => {
+    onDownloadCSV == null ? void 0 : onDownloadCSV();
+    close();
+  }, [onDownloadCSV, close]);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, style: { width: "100%" }, children }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "4px", position: "relative", zIndex: 10, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: btnRef,
+          onClick: () => {
+            setOpen((o) => !o);
+            setView("main");
+          },
+          "aria-label": "Component actions",
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 8px",
+            display: "flex",
+            gap: "3px",
+            alignItems: "center",
+            borderRadius: "6px",
+            transition: "background 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = "#f2f2f2";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_HOVER);
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "none";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_COLOR);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "6", viewBox: "0 0 20 6", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "17", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } })
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            right: 0,
+            marginBottom: "4px",
+            background: "white",
+            border: `1px solid ${BORDER}`,
+            borderRadius: "0.75rem",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.06)",
+            zIndex: 50,
+            padding: view === "columns" ? "10px" : "4px",
+            minWidth: view === "columns" ? "200px" : "160px"
+          },
+          children: view === "main" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            columnConfig && /* @__PURE__ */ jsx(MenuButton, { label: "Customize columns", onClick: () => setView("columns") }),
+            onDownloadCSV && /* @__PURE__ */ jsx(MenuButton, { label: "Download CSV", onClick: handleCSV }),
+            /* @__PURE__ */ jsx(MenuButton, { label: "Download PNG", onClick: handleDownloadPNG })
+          ] }) : /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setView("main"),
+                style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, marginBottom: "6px", padding: 0 },
+                children: "\u2190 Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColumnSettingsPanel,
+              {
+                columns: columnConfig.columns,
+                hidden: columnConfig.hidden,
+                onToggle: columnConfig.onToggle,
+                onShowAll: columnConfig.onShowAll,
+                onHideAll: columnConfig.onHideAll
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MenuButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "8px 12px",
+        fontSize: "12.5px",
+        color: "var(--foreground)",
+        textAlign: "left",
+        borderRadius: "8px",
+        transition: "background 0.15s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.background = "#f2f2f2",
+      onMouseLeave: (e) => e.currentTarget.style.background = "none",
+      children: label
+    }
+  );
+}
+var DEFAULT_TOKENS = {
+  BORDER,
+  MUTED,
+  PAPER,
+  ACCENT,
+  ACCENT_SOFT,
+  SECONDARY,
+  CHART_PALETTE: [...CHART_PALETTE]
+};
+var GenUIThemeContext = createContext(DEFAULT_TOKENS);
+function useTheme() {
+  return useContext(GenUIThemeContext);
+}
+
+// src/shared/brandIcons.ts
+var SLUGS = {
+  gmail: "gmail",
+  googlemail: "gmail",
+  outlook: "microsoftoutlook",
+  microsoftoutlook: "microsoftoutlook",
+  office365: "microsoftoffice",
+  slack: "slack",
+  googledrive: "googledrive",
+  drive: "googledrive",
+  googlesheets: "googlesheets",
+  googledocs: "googledocs",
+  googlecalendar: "googlecalendar",
+  gcal: "googlecalendar",
+  notion: "notion",
+  salesforce: "salesforce",
+  hubspot: "hubspot",
+  github: "github",
+  gitlab: "gitlab",
+  jira: "jira",
+  confluence: "confluence",
+  atlassian: "atlassian",
+  asana: "asana",
+  trello: "trello",
+  linear: "linear",
+  zoom: "zoom",
+  dropbox: "dropbox",
+  box: "box",
+  zendesk: "zendesk",
+  intercom: "intercom",
+  stripe: "stripe",
+  shopify: "shopify",
+  perplexity: "perplexity",
+  openai: "openai",
+  anthropic: "anthropic",
+  fireflies: "fireflies",
+  zohodesk: "zoho",
+  zoho: "zoho",
+  pipedrive: "pipedrive",
+  workday: "workday",
+  sap: "sap",
+  odoo: "odoo",
+  superset: "apachesuperset",
+  highradius: "",
+  zoominfo: ""
+};
+function normalize(name) {
+  return (name || "").toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+function brandIconUrl(name) {
+  const slug = SLUGS[normalize(name)];
+  if (!slug) return void 0;
+  return `https://cdn.simpleicons.org/${slug}`;
+}
+var CONNECTED_GREEN = "#15803d";
+var CONNECTED_GREEN_BG = "#dcfce7";
+var PENDING_AMBER = "#92400e";
+var PENDING_AMBER_BG = "#fff7ed";
+var CARD_TITLE = "Authentication required";
+var TRUST_FOOTER = "Credentials not stored by Adopt";
+var DEFAULT_STEPS = (app, ctaLabel, connected) => connected ? [
+  `Click ${ctaLabel} below to open ${app} in a new tab.`,
+  "Confirm you are signed in \u2014 re-authenticate if prompted.",
+  "Return here \u2014 the request continues automatically."
+] : [
+  `Click ${ctaLabel} below to open the sign-in page.`,
+  `Sign in with your ${app} credentials \u2014 SSO is supported.`,
+  "Return here \u2014 the request resumes automatically."
+];
+function humanizeApp(raw) {
+  const v = raw.trim();
+  if (!v) return v;
+  const looksLikeSlug = /^[a-z0-9]+([_-][a-z0-9]+)*$/.test(v);
+  if (!looksLikeSlug) return v;
+  return v.split(/[_-]+/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function ShieldIcon({ color }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
+        /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+      ]
+    }
+  );
+}
+function ExternalIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
+        /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+      ]
+    }
+  );
+}
+function TabbyAuthResolver(p) {
+  var _a, _b, _c;
+  const { BORDER: BORDER2, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
+  const [cardHovered, setCardHovered] = useState(false);
+  const [btnHovered, setBtnHovered] = useState(false);
+  const [imgFailed, setImgFailed] = useState(false);
+  const app = humanizeApp(p.app || "the app");
+  const connected = p.state === "connected";
+  const accent = connected ? CONNECTED_GREEN : ACCENT2;
+  const ctaLabel = (_a = p.ctaLabel) != null ? _a : connected ? `Open ${app}` : `Connect ${app}`;
+  const subtitle = p.workspace ? `${app} \xB7 ${p.workspace} workspace` : app;
+  const steps = ((_b = p.steps) == null ? void 0 : _b.length) ? p.steps : DEFAULT_STEPS(app, ctaLabel, connected);
+  const description = (_c = p.description) != null ? _c : connected ? `Your ${app} session is active. Open ${app} to continue, or re-authenticate if prompted.` : `Your ${app} account is not yet connected to this workspace. Complete sign-in once to enable automatic access.`;
+  const iconSrc = p.iconUrl || brandIconUrl(app);
+  const showImg = Boolean(iconSrc) && !imgFailed;
+  const initial = app.charAt(0).toUpperCase();
+  const badge = connected ? { label: "Connected", bg: CONNECTED_GREEN_BG, color: CONNECTED_GREEN } : { label: "Pending sign-in", bg: PENDING_AMBER_BG, color: PENDING_AMBER };
+  const sectionPad = "13px 16px";
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: `${app} authentication`, children: /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "10px" }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: () => setCardHovered(true),
+      onMouseLeave: () => setCardHovered(false),
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "stretch",
+        borderRadius: "0.75rem",
+        border: `1px solid ${cardHovered ? "#d2d2d2" : BORDER2}`,
+        background: "white",
+        overflow: "hidden",
+        boxShadow: cardHovered ? "0 1px 3px rgba(0,0,0,0.05), 0 6px 18px rgba(0,0,0,0.06)" : "0 1px 2px rgba(0,0,0,0.03)",
+        transition: "box-shadow 0.18s ease, border-color 0.18s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { width: "3px", flexShrink: 0, background: accent } }),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "flex-start",
+                gap: "12px",
+                padding: sectionPad
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "relative",
+                      width: "34px",
+                      height: "34px",
+                      borderRadius: "9px",
+                      flexShrink: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: showImg ? "white" : "#fff3ee",
+                      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06)",
+                      overflow: "hidden"
+                    },
+                    children: showImg ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: iconSrc,
+                        alt: app,
+                        onError: () => setImgFailed(true),
+                        style: { width: "22px", height: "22px", objectFit: "contain" }
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: "var(--font-serif)",
+                          fontSize: "17px",
+                          fontWeight: 400,
+                          color: ACCENT2,
+                          lineHeight: 1
+                        },
+                        children: initial
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "2px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: "var(--font-serif)",
+                        fontSize: "15px",
+                        fontWeight: 400,
+                        color: "var(--foreground)",
+                        letterSpacing: "-0.01em",
+                        lineHeight: 1.2
+                      },
+                      children: CARD_TITLE
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        color: MUTED2,
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                      },
+                      children: subtitle
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "5px",
+                      flexShrink: 0,
+                      fontSize: "10.5px",
+                      fontWeight: 600,
+                      padding: "3px 9px",
+                      borderRadius: "9999px",
+                      background: badge.bg,
+                      color: badge.color,
+                      whiteSpace: "nowrap"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            width: "6px",
+                            height: "6px",
+                            borderRadius: "9999px",
+                            background: badge.color
+                          }
+                        }
+                      ),
+                      badge.label
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                borderTop: `1px solid ${BORDER2}`,
+                padding: sectionPad,
+                display: "flex",
+                flexDirection: "column",
+                gap: "12px"
+              },
+              children: [
+                description && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "12.5px", lineHeight: 1.5, color: "var(--foreground)" }, children: description }),
+                /* @__PURE__ */ jsx("ol", { style: { margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: "8px" }, children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { style: { display: "flex", alignItems: "flex-start", gap: "10px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        flexShrink: 0,
+                        width: "18px",
+                        height: "18px",
+                        borderRadius: "9999px",
+                        background: accent,
+                        color: "white",
+                        fontSize: "10.5px",
+                        fontWeight: 600,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        marginTop: "1px"
+                      },
+                      children: i + 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "12.5px", lineHeight: 1.45, color: "var(--foreground)" }, children: step })
+                ] }, i)) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                borderTop: `1px solid ${BORDER2}`,
+                padding: sectionPad,
+                background: "#fbfbfb",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "12px",
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "6px", color: MUTED2, fontSize: "11.5px" }, children: [
+                  /* @__PURE__ */ jsx(ShieldIcon, { color: CONNECTED_GREEN }),
+                  TRUST_FOOTER
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: p.url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    onMouseEnter: () => setBtnHovered(true),
+                    onMouseLeave: () => setBtnHovered(false),
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: "7px",
+                      flexShrink: 0,
+                      borderRadius: "8px",
+                      padding: "8px 15px",
+                      fontSize: "12.5px",
+                      fontWeight: 600,
+                      textDecoration: "none",
+                      whiteSpace: "nowrap",
+                      cursor: "pointer",
+                      color: "white",
+                      border: "1px solid transparent",
+                      background: btnHovered ? connected ? "#126a33" : ACCENT_SOFT2 : accent,
+                      transition: "background 0.15s ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ExternalIcon, {}),
+                      ctaLabel
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) }) });
+}
+
+export { TabbyAuthResolver };
+//# sourceMappingURL=resolver.js.map
+//# sourceMappingURL=resolver.js.map