@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/lib/utm.mjs

@@ -0,0 +1,42 @@
+const KEYS = ["campaign", "content", "id", "medium", "source", "term"];
+const CLICK = {
+  fbclid: "fbclid",
+  gclid: "gclid",
+  li_fat_id: "liFatId",
+  msclkid: "msclkid",
+  ttclid: "ttclid"
+};
+const value = (entry) => typeof entry === "string" && entry.trim() ? entry.trim() : null;
+const utmFromParams = (params) => {
+  const utm = {};
+  for (const key of KEYS) {
+    const entry = value(params == null ? void 0 : params["utm_" + key]);
+    if (entry) utm[key] = entry;
+  }
+  ;
+  const click = {};
+  for (const [parameter, key] of Object.entries(CLICK)) {
+    const entry = value(params == null ? void 0 : params[parameter]);
+    if (entry) click[key] = entry;
+  }
+  ;
+  if (Object.keys(click).length) utm.click = click;
+  return Object.keys(utm).length ? utm : null;
+};
+const utmToQuery = (utm) => {
+  var _a;
+  const query = {};
+  for (const key of KEYS) {
+    if (utm == null ? void 0 : utm[key]) query["utm_" + key] = utm[key];
+  }
+  ;
+  for (const [parameter, key] of Object.entries(CLICK)) {
+    if ((_a = utm == null ? void 0 : utm.click) == null ? void 0 : _a[key]) query[parameter] = utm.click[key];
+  }
+  ;
+  return query;
+};
+export {
+  utmFromParams,
+  utmToQuery
+};

package/dist/dashboard/link-back.js

@@ -0,0 +1,94 @@
+"use client";
+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 link_back_exports = {};
+__export(link_back_exports, {
+  default: () => link_back_default
+});
+module.exports = __toCommonJS(link_back_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_link = __toESM(require("./link"));
+var import_arrow_left = __toESM(require("../icons/arrow-left"));
+var import_button = __toESM(require("../shared/button"));
+var import_form = require("../shared/lib/form");
+const LinkBack = ({
+  children,
+  element = import_link.default,
+  icon: Icon = import_arrow_left.default,
+  ...rest
+}) => {
+  const scope = (0, import_react.useContext)(import_form.FormScope);
+  return (
+    // The hover fade sits on a wrapper, as a Button takes no class. A grid with
+    // min-w-0 lets a row shrink it, so a long title truncates instead of pushing.
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...{
+          className: "grid min-w-0 transform duration-300 hover:opacity-70"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              "data-guard": scope,
+              element,
+              // An arrow alone is the Button's icon (its size and hit area); beside a
+              // label it stays the smaller arrow LinkBack has always drawn.
+              ...!children && { icon: Icon, inline: true },
+              justify: "start",
+              variant: "link",
+              ...rest
+            },
+            children: children && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                Icon,
+                {
+                  ...{
+                    className: "w-4 h-4 shrink-0"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  ...{
+                    className: "w-full min-w-0 truncate text-left"
+                  },
+                  children
+                }
+              )
+            ] })
+          }
+        )
+      }
+    )
+  );
+};
+var link_back_default = LinkBack;

package/dist/dashboard/link-back.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useContext } from "react";
+import Link from "./link.mjs";
+import ArrowLeft from "../icons/arrow-left.mjs";
+import Button from "../shared/button.mjs";
+import { FormScope } from "../shared/lib/form.mjs";
+const LinkBack = ({
+  children,
+  element = Link,
+  icon: Icon = ArrowLeft,
+  ...rest
+}) => {
+  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 a row shrink it, so a long title truncates instead of pushing.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "grid min-w-0 transform duration-300 hover:opacity-70"
+        },
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              "data-guard": scope,
+              element,
+              // An arrow alone is the Button's icon (its size and hit area); beside a
+              // label it stays the smaller arrow LinkBack has always drawn.
+              ...!children && { icon: Icon, inline: true },
+              justify: "start",
+              variant: "link",
+              ...rest
+            },
+            children: children && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  ...{
+                    className: "w-4 h-4 shrink-0"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ...{
+                    className: "w-full min-w-0 truncate text-left"
+                  },
+                  children
+                }
+              )
+            ] })
+          }
+        )
+      }
+    )
+  );
+};
+var link_back_default = LinkBack;
+export {
+  link_back_default as default
+};

package/dist/dashboard/link.js

@@ -0,0 +1,129 @@
+"use client";
+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 link_exports = {};
+__export(link_exports, {
+  LinkProgress: () => LinkProgress,
+  default: () => link_default,
+  step: () => step
+});
+module.exports = __toCommonJS(link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_link = __toESM(require("next/link"));
+var import_trickle = require("./lib/trickle");
+let waiting = 0;
+const listeners = /* @__PURE__ */ new Set();
+const notify = () => listeners.forEach((listener) => listener());
+const subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+const Pending = () => {
+  const { pending } = (0, import_link.useLinkStatus)();
+  (0, import_react.useEffect)(
+    () => {
+      if (!pending) return void 0;
+      waiting++;
+      notify();
+      return () => {
+        waiting--;
+        notify();
+      };
+    },
+    [pending]
+  );
+  return null;
+};
+const patience = 500;
+const step = ({ busy, displayed, waited }) => {
+  if (busy) return waited >= patience ? (0, import_trickle.trickle)({ displayed, real: 100, rate: 0.08 }) : 0;
+  return displayed > 0 && displayed < 100 ? 100 : 0;
+};
+const LinkProgress = () => {
+  const busy = (0, import_react.useSyncExternalStore)(subscribe, () => waiting > 0, () => false);
+  const [displayed, setDisplayed] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(
+    () => {
+      if (!busy) {
+        setDisplayed((value) => step({ busy, displayed: value }));
+        const timer2 = setTimeout(() => setDisplayed(0), 200);
+        return () => clearTimeout(timer2);
+      }
+      const started = Date.now();
+      const tick = () => setDisplayed((value) => step({ busy, displayed: value, waited: Date.now() - started }));
+      const timer = setTimeout(tick, patience);
+      const interval = setInterval(tick, 200);
+      return () => {
+        clearTimeout(timer);
+        clearInterval(interval);
+      };
+    },
+    [busy]
+  );
+  if (!displayed) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        "aria-hidden": true,
+        className: "fixed top-0 left-0 z-[70] h-0.5 bg-green-dark transition-[width,opacity] duration-200 ease-linear " + (displayed === 100 ? "opacity-0" : "opacity-100"),
+        style: {
+          width: displayed + "%"
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ...{
+            className: "absolute right-0 h-full w-24 rotate-3 -translate-y-1 shadow-[0_0_10px_theme(colors.green.dark),0_0_5px_theme(colors.green.dark)]"
+          }
+        }
+      )
+    }
+  );
+};
+const Link = ({ children, prefetch = false, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  import_link.default,
+  {
+    ...{
+      prefetch,
+      ...props
+    },
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pending, {})
+    ]
+  }
+);
+var link_default = Link;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LinkProgress,
+  step
+});

package/dist/dashboard/link.mjs

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import NextLink, { useLinkStatus } from "next/link";
+import { trickle } from "./lib/trickle.mjs";
+let waiting = 0;
+const listeners = /* @__PURE__ */ new Set();
+const notify = () => listeners.forEach((listener) => listener());
+const subscribe = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+const Pending = () => {
+  const { pending } = useLinkStatus();
+  useEffect(
+    () => {
+      if (!pending) return void 0;
+      waiting++;
+      notify();
+      return () => {
+        waiting--;
+        notify();
+      };
+    },
+    [pending]
+  );
+  return null;
+};
+const patience = 500;
+const step = ({ busy, displayed, waited }) => {
+  if (busy) return waited >= patience ? trickle({ displayed, real: 100, rate: 0.08 }) : 0;
+  return displayed > 0 && displayed < 100 ? 100 : 0;
+};
+const LinkProgress = () => {
+  const busy = useSyncExternalStore(subscribe, () => waiting > 0, () => false);
+  const [displayed, setDisplayed] = useState(0);
+  useEffect(
+    () => {
+      if (!busy) {
+        setDisplayed((value) => step({ busy, displayed: value }));
+        const timer2 = setTimeout(() => setDisplayed(0), 200);
+        return () => clearTimeout(timer2);
+      }
+      const started = Date.now();
+      const tick = () => setDisplayed((value) => step({ busy, displayed: value, waited: Date.now() - started }));
+      const timer = setTimeout(tick, patience);
+      const interval = setInterval(tick, 200);
+      return () => {
+        clearTimeout(timer);
+        clearInterval(interval);
+      };
+    },
+    [busy]
+  );
+  if (!displayed) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        "aria-hidden": true,
+        className: "fixed top-0 left-0 z-[70] h-0.5 bg-green-dark transition-[width,opacity] duration-200 ease-linear " + (displayed === 100 ? "opacity-0" : "opacity-100"),
+        style: {
+          width: displayed + "%"
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...{
+            className: "absolute right-0 h-full w-24 rotate-3 -translate-y-1 shadow-[0_0_10px_theme(colors.green.dark),0_0_5px_theme(colors.green.dark)]"
+          }
+        }
+      )
+    }
+  );
+};
+const Link = ({ children, prefetch = false, ...props }) => /* @__PURE__ */ jsxs(
+  NextLink,
+  {
+    ...{
+      prefetch,
+      ...props
+    },
+    children: [
+      children,
+      /* @__PURE__ */ jsx(Pending, {})
+    ]
+  }
+);
+var link_default = Link;
+export {
+  LinkProgress,
+  link_default as default,
+  step
+};

package/dist/dashboard/list-resource.js

@@ -0,0 +1,184 @@
+"use client";
+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 list_resource_exports = {};
+__export(list_resource_exports, {
+  default: () => list_resource_default
+});
+module.exports = __toCommonJS(list_resource_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_paged = __toESM(require("./paged"));
+var import_empty = __toESM(require("../shared/empty"));
+var import_button = __toESM(require("../shared/button"));
+var import_input_text = __toESM(require("../input-text"));
+const pluralize = (model) => model + (/(s|x|z|ch|sh)$/.test(model) ? "es" : "s");
+const ListResource = ({
+  empty,
+  endpoint,
+  model,
+  // Single-select pickers ( the caller closes the list on change ) must keep
+  // showing the chosen item — filtering it out leaves the reopened list empty.
+  multiple = true,
+  onChange,
+  params,
+  render,
+  // button.props are Button props ( the small inline Add ); a caller's own
+  // renderButton spreads them onto its Button.
+  renderButton = ({ button }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, { ...button.props, children: button.text }),
+  searchKeys = ["title"],
+  selected
+}) => {
+  const [search, setSearch] = import_react.default.useState("");
+  const [debouncedSearch, setDebouncedSearch] = import_react.default.useState("");
+  const [sessionAdded, setSessionAdded] = import_react.default.useState([]);
+  const allSelected = multiple ? [...selected || [], ...sessionAdded] : [];
+  const selectedIds = new Set(allSelected.map((s) => s.id));
+  const emptyVariant = "secondary";
+  const emptyMessage = empty || "No " + pluralize(model) + " found";
+  import_react.default.useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSearch(search), 300);
+    return () => clearTimeout(timer);
+  }, [search]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-6"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_input_text.default,
+          {
+            ...{
+              onChange: (val) => setSearch(val),
+              placeholder: "Search...",
+              type: "text",
+              value: search
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_paged.default,
+          {
+            ...{
+              className: "grid min-h-32",
+              classNameInner: "flex flex-col space-y-6",
+              empty: {
+                message: emptyMessage,
+                variant: emptyVariant
+              },
+              endpoint,
+              params: {
+                ...params,
+                limit: (params == null ? void 0 : params.limit) || 6,
+                ...debouncedSearch && {
+                  search: {
+                    keys: searchKeys,
+                    value: debouncedSearch
+                  }
+                }
+              },
+              queryKey: ["list-resource", model, endpoint, params, debouncedSearch]
+            },
+            children: ({ items }) => {
+              const available = items.filter((item) => !selectedIds.has(item.id));
+              if (!available.length) {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    ...{
+                      className: "grid min-h-32"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_empty.default,
+                      {
+                        ...{
+                          variant: emptyVariant
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: emptyMessage })
+                      }
+                    )
+                  }
+                );
+              }
+              ;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  ...{
+                    className: "space-y-3"
+                  },
+                  children: available.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      ...{
+                        className: "w-full flex items-center justify-between space-x-6"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            ...{
+                              className: "w-full"
+                            },
+                            children: render ? render(item) : item.title
+                          }
+                        ),
+                        onChange && renderButton({
+                          button: {
+                            props: {
+                              inline: true,
+                              onClick: async () => {
+                                await onChange(item);
+                                if (multiple) {
+                                  setSessionAdded((prev) => [...prev, item]);
+                                }
+                                ;
+                              },
+                              size: "small"
+                            },
+                            text: "Add"
+                          },
+                          item
+                        })
+                      ]
+                    },
+                    item.id
+                  ))
+                }
+              );
+            }
+          },
+          debouncedSearch
+        )
+      ]
+    }
+  );
+};
+var list_resource_default = ListResource;