@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/template-ui.mjs

@@ -0,0 +1,506 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useContext, useMemo, useState } from "react";
+import { useParams, usePathname } from "next/navigation";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useModal } from "./lib/hooks";
+import WrapperGradient from "../wrapper-gradient";
+import Guide from "./guide";
+import { MenuAccount, MenuAccountDropdown, MenuAdmin, MenuApp, MenuCampaign, MenuOrganization } from "./menu";
+import MenuIcon from "../icons/menu";
+import Switch from "../icons/switch";
+import Times from "../icons/times";
+import Link from "./link";
+import ArrowLeft from "../icons/arrow-left";
+import Button from "../shared/button";
+import { FormScope } from "../shared/lib/form";
+import { alertFor } from "../shared/lib/helpers";
+const offsets = {
+  header: "h-16 md:h-20",
+  paddingTop: "pt-16 md:pt-0"
+};
+const isAccountPath = (path) => path === "/account" || path.startsWith("/account/");
+let timeout;
+const TemplateUIHeaderBack = ({
+  href,
+  icon: Icon = ArrowLeft,
+  title
+}) => {
+  const scope = useContext(FormScope);
+  return (
+    // The hover fade sits on a wrapper, as a Button takes no class; a grid with
+    // min-w-0 lets the header shrink it, so a long title truncates.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "grid w-full min-w-0 transform duration-300 hover:opacity-70"
+        },
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              "data-guard": scope,
+              element: Link,
+              href,
+              justify: "start",
+              variant: "link"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "span",
+              {
+                ...{
+                  className: "flex items-center justify-between w-full space-x-3 h-9 overflow-hidden text-left"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      ...{
+                        className: "bg-gray-dark w-9 h-9 p-2.5 rounded-md text-white shrink-0"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      ...{
+                        className: "flex flex-col leading-tight space-y-1 py-1 w-full truncate"
+                      },
+                      children: title && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          ...{
+                            className: "w-full truncate text-white"
+                          },
+                          children: title
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      }
+    )
+  );
+};
+const TemplateUiHeader = ({
+  actions,
+  active,
+  campaign = {},
+  className,
+  organization = {},
+  params,
+  path
+}) => {
+  const classes = [
+    "w-full flex items-center justify-between px-6 bg-black gap-6 grow-0",
+    offsets.header
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: [
+        (params == null ? void 0 : params.organization) && !isAccountPath(path) && !path.includes("/admin") && /* @__PURE__ */ jsx(Fragment, { children: params.organization && params.campaign ? /* @__PURE__ */ jsx(
+          TemplateUIHeaderBack,
+          {
+            ...{
+              href: "/organizations/" + (params == null ? void 0 : params.organization) + "/campaigns",
+              title: campaign == null ? void 0 : campaign.title
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          TemplateUIHeaderBack,
+          {
+            ...{
+              href: "/organizations",
+              icon: Switch,
+              title: organization == null ? void 0 : organization.title
+            }
+          }
+        ) }),
+        isAccountPath(path) && /* @__PURE__ */ jsx(
+          TemplateUIHeaderBack,
+          {
+            ...{
+              href: "/",
+              title: "Dashboard"
+            }
+          }
+        ),
+        path.includes("/admin") && /* @__PURE__ */ jsx(
+          TemplateUIHeaderBack,
+          {
+            ...{
+              href: "/",
+              title: "Dashboard"
+            }
+          }
+        ),
+        (path === "/organizations" || path === "/shared") && /* @__PURE__ */ jsx(
+          TemplateUIHeaderBack,
+          {
+            ...{
+              href: "/",
+              title: "Dashboard"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "flex text-white transform duration-300 hover:opacity-70 md:hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  "aria-label": active ? "Close menu" : "Open menu",
+                  inline: true,
+                  onClick: actions.menu,
+                  variant: "link"
+                },
+                children: active ? /* @__PURE__ */ jsx(
+                  Times,
+                  {
+                    ...{
+                      className: "w-6 h-6 shrink-0"
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  MenuIcon,
+                  {
+                    ...{
+                      className: "w-6 h-6 shrink-0"
+                    }
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const TemplateUiBand = ({
+  record
+}) => {
+  const alert = alertFor(record);
+  if (!alert) return null;
+  const { icon: Icon, message } = alert;
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      ...{
+        className: "relative z-[3] flex items-center gap-1.5 px-6 py-1.5 bg-gray-dark text-white text-xs",
+        role: "status"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...{
+              "aria-hidden": true,
+              className: "w-3 h-3 shrink-0"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  );
+};
+const TemplateUi = ({
+  children,
+  guide: guideId
+}) => {
+  var _a, _b, _c, _d, _e;
+  const path = usePathname();
+  const params = useParams();
+  const queryClient = useQueryClient();
+  const account = useQuery({
+    queryKey: ["account"]
+  });
+  const balance = useQuery({
+    queryKey: ["account", "balance"]
+  });
+  const menu = useQuery({
+    queryKey: ["menu"],
+    queryFn: () => ({
+      active: false
+    })
+  });
+  const organization = useQuery({
+    enabled: false,
+    // inherits from layout
+    queryKey: ["organization", params.organization]
+  });
+  const campaign = useQuery({
+    enabled: false,
+    // inherits from layout
+    queryKey: ["campaign", params.campaign]
+  });
+  const guide = (_b = (_a = account == null ? void 0 : account.data) == null ? void 0 : _a.guide) == null ? void 0 : _b[guideId];
+  const [run, setRun] = useState(false);
+  const modal = useModal({
+    queryClient
+  });
+  const actions = useMemo(
+    () => {
+      const reset = () => {
+        modal.close();
+        queryClient.setQueryData(
+          ["menu"],
+          {
+            active: false
+          }
+        );
+      };
+      const menu2 = () => {
+        queryClient.setQueryData(
+          ["menu"],
+          (data) => ({
+            active: !data.active
+          })
+        );
+      };
+      return {
+        guide: () => {
+          reset();
+          setRun(true);
+        },
+        signout: () => {
+          modal.open({
+            message: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...{
+                  className: "space-y-6"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("p", { children: "Are you sure you want to logout of this account?" }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        element: "a",
+                        // Plain link to the Next.js signout route handler.
+                        // It calls the API, clears the HttpOnly cookie,
+                        // and redirects to /auth. Same-origin Origin/Referer
+                        // check inside the handler protects against CSRF.
+                        href: "/api/auth/signout",
+                        onClick: () => menu2()
+                      },
+                      children: "Logout"
+                    }
+                  )
+                ]
+              }
+            ),
+            title: "Logout"
+          });
+        },
+        menu: menu2
+      };
+    },
+    [queryClient, modal]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    guide && /* @__PURE__ */ jsx(
+      Guide,
+      {
+        ...{
+          ...guide,
+          callback: async ({ action, step, type }) => {
+            var _a2, _b2, _c2, _d2, _e2, _f, _g, _h, _i, _j;
+            const key = action + "." + type;
+            if ((_a2 = step == null ? void 0 : step.data) == null ? void 0 : _a2[key]) {
+              clearTimeout(timeout);
+              setRun(false);
+              if (Array.isArray((_c2 = (_b2 = step == null ? void 0 : step.data) == null ? void 0 : _b2[key]) == null ? void 0 : _c2.state) && ((_f = (_e2 = (_d2 = step == null ? void 0 : step.data) == null ? void 0 : _d2[key]) == null ? void 0 : _e2.state) == null ? void 0 : _f.length) > 0) {
+                const promises = [];
+                (_h = (_g = step == null ? void 0 : step.data) == null ? void 0 : _g[key]) == null ? void 0 : _h.state.map((args) => promises.push(queryClient.setQueryData(...args)));
+                await Promise.all(promises);
+              }
+              if ((_j = (_i = step == null ? void 0 : step.data) == null ? void 0 : _i[key]) == null ? void 0 : _j.timeout) {
+                timeout = setTimeout(
+                  () => {
+                    setRun(true);
+                  },
+                  step.data[key].timeout
+                );
+              }
+            }
+            if (type === "tour:end") {
+              setRun(false);
+            }
+          },
+          run
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...{
+          className: "flex flex-col h-dvh overflow-hidden md:flex-row " + offsets.paddingTop
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            TemplateUiHeader,
+            {
+              ...{
+                actions,
+                active: (_c = menu == null ? void 0 : menu.data) == null ? void 0 : _c.active,
+                campaign: campaign == null ? void 0 : campaign.data,
+                className: "z-30 fixed top-0 left-0 md:hidden",
+                organization: organization == null ? void 0 : organization.data,
+                params,
+                path
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...{
+                className: "z-[25] fixed top-0 left-0 w-full flex flex-col justify-between bg-black h-full transition duration-200 ease-in md:z-0 md:relative md:w-1/3 lg:w-1/4 xl:w-1/5 " + (((_d = menu == null ? void 0 : menu.data) == null ? void 0 : _d.active) ? "translate-y-0 " + offsets.paddingTop : "-translate-y-full md:translate-y-0")
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  TemplateUiHeader,
+                  {
+                    ...{
+                      actions,
+                      active: (_e = menu == null ? void 0 : menu.data) == null ? void 0 : _e.active,
+                      campaign: campaign == null ? void 0 : campaign.data,
+                      className: "hidden md:flex border-b border-gray-dark relative z-[3]",
+                      organization: organization == null ? void 0 : organization.data,
+                      params,
+                      path
+                    }
+                  }
+                ),
+                (params == null ? void 0 : params.organization) && !isAccountPath(path) && !path.includes("/admin") && /* @__PURE__ */ jsx(
+                  TemplateUiBand,
+                  {
+                    ...{
+                      record: params.campaign ? campaign == null ? void 0 : campaign.data : organization == null ? void 0 : organization.data
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  WrapperGradient,
+                  {
+                    ...{
+                      className: "flex-1 min-h-0",
+                      classNameGradient: "from-black to-transparent h-10",
+                      classNameScroll: "h-full"
+                    },
+                    children: [
+                      (params == null ? void 0 : params.organization) && !(organization == null ? void 0 : organization.isLoading) && (organization == null ? void 0 : organization.data) && !isAccountPath(path) && !path.includes("/admin") && /* @__PURE__ */ jsx(Fragment, { children: params.organization && params.campaign ? /* @__PURE__ */ jsx(
+                        MenuCampaign,
+                        {
+                          ...{
+                            campaign: params.campaign,
+                            onClick: actions.menu,
+                            organization: params.organization,
+                            path
+                          }
+                        },
+                        params.organization + "-" + params.campaign
+                      ) : /* @__PURE__ */ jsx(
+                        MenuOrganization,
+                        {
+                          ...{
+                            onClick: actions.menu,
+                            organization: params.organization,
+                            path
+                          }
+                        },
+                        params.organization
+                      ) }),
+                      !(params == null ? void 0 : params.organization) && !isAccountPath(path) && !path.includes("/admin") && /* @__PURE__ */ jsx(
+                        MenuApp,
+                        {
+                          ...{
+                            onClick: actions.menu,
+                            path
+                          }
+                        }
+                      ),
+                      path.includes("/admin") && /* @__PURE__ */ jsx(
+                        MenuAdmin,
+                        {
+                          ...{
+                            onClick: actions.menu,
+                            path
+                          }
+                        }
+                      ),
+                      isAccountPath(path) && /* @__PURE__ */ jsx(
+                        MenuAccount,
+                        {
+                          ...{
+                            onClick: actions.menu,
+                            path
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !isAccountPath(path) && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...{
+                      className: "relative z-[3]"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      MenuAccountDropdown,
+                      {
+                        ...{
+                          actions,
+                          account,
+                          balance,
+                          guide,
+                          modal,
+                          onClick: actions.menu,
+                          path
+                        }
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...{
+                className: "flex flex-col h-full w-full md:w-3/4 lg:w-4/5"
+              },
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var template_ui_default = TemplateUi;
+export {
+  template_ui_default as default
+};

package/dist/dashboard/wrapper-ai.js

@@ -0,0 +1,79 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var wrapper_ai_exports = {};
+__export(wrapper_ai_exports, {
+  default: () => wrapper_ai_default
+});
+module.exports = __toCommonJS(wrapper_ai_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_badge = __toESM(require("../shared/badge"));
+const WrapperAI = ({
+  children,
+  className,
+  header
+}) => {
+  const classes = [
+    "wrapper-ai",
+    "bg-purple-light border border-purple rounded p-6 space-y-4"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  ;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: [
+        header,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "flex items-center justify-between"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_badge.default,
+              {
+                ...{
+                  className: "grow-0",
+                  type: "ai"
+                },
+                children: "Drawbridge AI"
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var wrapper_ai_default = WrapperAI;

package/dist/dashboard/wrapper-ai.mjs

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Badge from "../shared/badge";
+const WrapperAI = ({
+  children,
+  className,
+  header
+}) => {
+  const classes = [
+    "wrapper-ai",
+    "bg-purple-light border border-purple rounded p-6 space-y-4"
+  ];
+  if (className) {
+    classes.push(className);
+  }
+  ;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: classes.join(" ")
+      },
+      children: [
+        header,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "flex items-center justify-between"
+            },
+            children: /* @__PURE__ */ jsx(
+              Badge,
+              {
+                ...{
+                  className: "grow-0",
+                  type: "ai"
+                },
+                children: "Drawbridge AI"
+              }
+            )
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+var wrapper_ai_default = WrapperAI;
+export {
+  wrapper_ai_default as default
+};

package/dist/icons/arrow-down-tray.js

@@ -15,15 +15,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/icons/arrow-down-tray.js
 var arrow_down_tray_exports = {};
 __export(arrow_down_tray_exports, {
   default: () => arrow_down_tray_default
 });
 module.exports = __toCommonJS(arrow_down_tray_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var ArrowDownTray = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+const ArrowDownTray = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "svg",
   {
     ...{

package/dist/icons/arrow-down-tray.mjs

@@ -1,6 +1,5 @@
-// components/icons/arrow-down-tray.js
 import { jsx } from "react/jsx-runtime";
-var ArrowDownTray = (props) => /* @__PURE__ */ jsx(
+const ArrowDownTray = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     ...{

package/dist/icons/arrow-left.js

@@ -15,15 +15,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// components/icons/arrow-left.js
 var arrow_left_exports = {};
 __export(arrow_left_exports, {
   default: () => arrow_left_default
 });
 module.exports = __toCommonJS(arrow_left_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var ArrowLeft = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+const ArrowLeft = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "svg",
   {
     ...{

package/dist/icons/arrow-left.mjs

@@ -1,6 +1,5 @@
-// components/icons/arrow-left.js
 import { jsx } from "react/jsx-runtime";
-var ArrowLeft = (props) => /* @__PURE__ */ jsx(
+const ArrowLeft = (props) => /* @__PURE__ */ jsx(
   "svg",
   {
     ...{