@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/notice.js

@@ -0,0 +1,138 @@
+"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 notice_exports = {};
+__export(notice_exports, {
+  default: () => notice_default
+});
+module.exports = __toCommonJS(notice_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@headlessui/react");
+var import_times = __toESM(require("../icons/times"));
+var import_link = __toESM(require("./link"));
+var import_button = __toESM(require("../shared/button"));
+const Notice = ({
+  active,
+  queryClient,
+  response
+}) => {
+  var _a, _b, _c;
+  const reset = (0, import_react.useCallback)(
+    () => queryClient.setQueryData(
+      ["notice"],
+      (data) => ({
+        ...data,
+        active: false
+      })
+    ),
+    [queryClient]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      if (!active || response instanceof Error) return;
+      const timer = setTimeout(
+        () => reset(),
+        3e3
+      );
+      return () => clearTimeout(timer);
+    },
+    [active, reset, response]
+  );
+  const classes = {
+    container: [
+      "z-50 fixed right-0 bottom-0 w-full p-6 bg-white border-t",
+      "md:border-t-0 md:w-auto md:p-0 md:m-6 md:bg-transparent",
+      "transition duration-200 ease-in",
+      "data-[closed]:translate-y-full"
+    ],
+    inner: [
+      "flex items-center justify-between space-x-4 p-4 rounded md:p-6",
+      // An error (a refusal included) looks like the error button; anything else is black.
+      response instanceof Error ? "bg-red-light text-black border border-red-dark" : "bg-black text-white"
+    ]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react2.Transition,
+    {
+      ...{
+        as: "div",
+        className: classes.container.join(" "),
+        show: Boolean(active)
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ...{
+            className: classes.inner.join(" "),
+            "aria-live": "polite"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                ...{
+                  className: "flex flex-col space-y-3"
+                },
+                children: [
+                  (response == null ? void 0 : response.message) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: response.message }),
+                  ((_a = response == null ? void 0 : response.button) == null ? void 0 : _a.href) && ((_b = response == null ? void 0 : response.button) == null ? void 0 : _b.text) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_button.default,
+                    {
+                      ...{
+                        element: import_link.default,
+                        href: response.button.href,
+                        inline: true,
+                        size: "small",
+                        variant: "secondary"
+                      },
+                      children: (_c = response == null ? void 0 : response.button) == null ? void 0 : _c.text
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  "aria-label": "Dismiss",
+                  icon: import_times.default,
+                  inline: true,
+                  onClick: () => reset(),
+                  variant: "link"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var notice_default = Notice;

package/dist/dashboard/notice.mjs

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { Transition } from "@headlessui/react";
+import Times from "../icons/times";
+import Link from "./link";
+import Button from "../shared/button";
+const Notice = ({
+  active,
+  queryClient,
+  response
+}) => {
+  var _a, _b, _c;
+  const reset = useCallback(
+    () => queryClient.setQueryData(
+      ["notice"],
+      (data) => ({
+        ...data,
+        active: false
+      })
+    ),
+    [queryClient]
+  );
+  useEffect(
+    () => {
+      if (!active || response instanceof Error) return;
+      const timer = setTimeout(
+        () => reset(),
+        3e3
+      );
+      return () => clearTimeout(timer);
+    },
+    [active, reset, response]
+  );
+  const classes = {
+    container: [
+      "z-50 fixed right-0 bottom-0 w-full p-6 bg-white border-t",
+      "md:border-t-0 md:w-auto md:p-0 md:m-6 md:bg-transparent",
+      "transition duration-200 ease-in",
+      "data-[closed]:translate-y-full"
+    ],
+    inner: [
+      "flex items-center justify-between space-x-4 p-4 rounded md:p-6",
+      // An error (a refusal included) looks like the error button; anything else is black.
+      response instanceof Error ? "bg-red-light text-black border border-red-dark" : "bg-black text-white"
+    ]
+  };
+  return /* @__PURE__ */ jsx(
+    Transition,
+    {
+      ...{
+        as: "div",
+        className: classes.container.join(" "),
+        show: Boolean(active)
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...{
+            className: classes.inner.join(" "),
+            "aria-live": "polite"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...{
+                  className: "flex flex-col space-y-3"
+                },
+                children: [
+                  (response == null ? void 0 : response.message) && /* @__PURE__ */ jsx("p", { children: response.message }),
+                  ((_a = response == null ? void 0 : response.button) == null ? void 0 : _a.href) && ((_b = response == null ? void 0 : response.button) == null ? void 0 : _b.text) && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        element: Link,
+                        href: response.button.href,
+                        inline: true,
+                        size: "small",
+                        variant: "secondary"
+                      },
+                      children: (_c = response == null ? void 0 : response.button) == null ? void 0 : _c.text
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  "aria-label": "Dismiss",
+                  icon: Times,
+                  inline: true,
+                  onClick: () => reset(),
+                  variant: "link"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var notice_default = Notice;
+export {
+  notice_default as default
+};

package/dist/dashboard/paged.js

@@ -0,0 +1,430 @@
+"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 paged_exports = {};
+__export(paged_exports, {
+  default: () => paged_default
+});
+module.exports = __toCommonJS(paged_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_navigation = require("next/navigation");
+var import_react_query = require("@tanstack/react-query");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_empty = __toESM(require("../shared/empty"));
+var import_loader = __toESM(require("../shared/loader"));
+var import_arrow_left = __toESM(require("../icons/arrow-left"));
+var import_arrow_right = __toESM(require("../icons/arrow-right"));
+var import_badge = __toESM(require("../shared/badge"));
+var import_button = __toESM(require("../shared/button"));
+var import_wrapper_gradient = __toESM(require("../wrapper-gradient"));
+const Pagination = ({
+  className = null,
+  counter: counterOverride = void 0,
+  cursorStack = [null],
+  isFetching = false,
+  limit = 12,
+  pageInfo,
+  setCursorStack = () => {
+  },
+  setSkip = () => {
+  },
+  skip
+}) => {
+  const total = Number(pageInfo == null ? void 0 : pageInfo.total);
+  const hasNextPage = Boolean(pageInfo == null ? void 0 : pageInfo.hasNextPage);
+  const hasPreviousPage = Boolean(pageInfo == null ? void 0 : pageInfo.hasPreviousPage);
+  const isCursorApi = cursorStack.length > 1 || Boolean(pageInfo == null ? void 0 : pageInfo.endCursor);
+  const hasPreviousCursor = cursorStack.length > 1;
+  const [pending, setPending] = (0, import_react.useState)(null);
+  const [wasFetching, setWasFetching] = (0, import_react.useState)(isFetching);
+  if (wasFetching !== isFetching) {
+    setWasFetching(isFetching);
+    if (!isFetching && pending) {
+      setPending(null);
+    }
+    ;
+  }
+  ;
+  if (isCursorApi) {
+    if (!hasNextPage && !hasPreviousCursor) {
+      return null;
+    }
+    ;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ...{
+          className: ["flex items-center justify-between space-x-6", className].filter(Boolean).join(" ")
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.default,
+            {
+              ...{
+                "aria-label": "Previous page",
+                disabled: !hasPreviousCursor,
+                icon: import_arrow_left.default,
+                inline: true,
+                loading: pending === "previous" && isFetching,
+                onClick: () => {
+                  setPending("previous");
+                  setCursorStack((s) => s.slice(0, -1));
+                },
+                variant: "link"
+              }
+            }
+          ),
+          counterOverride !== void 0 ? counterOverride : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_badge.default, { children: [
+            "Page ",
+            cursorStack.length
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.default,
+            {
+              ...{
+                "aria-label": "Next page",
+                disabled: !hasNextPage,
+                icon: import_arrow_right.default,
+                inline: true,
+                loading: pending === "next" && isFetching,
+                onClick: () => {
+                  setPending("next");
+                  setCursorStack((s) => [...s, pageInfo.endCursor]);
+                },
+                variant: "link"
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  ;
+  if (!(total > 0 && total > limit || hasNextPage || hasPreviousPage)) {
+    return null;
+  }
+  ;
+  const counter = total > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_badge.default, { children: [
+    "Page ",
+    skip + 1,
+    " of ",
+    Math.ceil(total / limit)
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: ["flex items-center justify-between space-x-6", className].filter(Boolean).join(" ")
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              "aria-label": "Previous page",
+              disabled: !hasPreviousPage,
+              icon: import_arrow_left.default,
+              inline: true,
+              loading: pending === "previous" && isFetching,
+              onClick: () => {
+                setPending("previous");
+                setSkip(skip - 1);
+              },
+              variant: "link"
+            }
+          }
+        ),
+        counterOverride !== void 0 ? counterOverride : counter,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              "aria-label": "Next page",
+              disabled: !hasNextPage,
+              icon: import_arrow_right.default,
+              inline: true,
+              loading: pending === "next" && isFetching,
+              onClick: () => {
+                setPending("next");
+                setSkip(skip + 1);
+              },
+              variant: "link"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const isEmpty = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0 || typeof value === "object" && !Array.isArray(value) && Object.keys(value).length === 0;
+const processSearch = (search) => {
+  if (!(search == null ? void 0 : search.value)) return void 0;
+  return search;
+};
+const Paged = ({
+  children,
+  className = "h-full",
+  classNameInner = "h-full flex flex-col",
+  element: Element = "div",
+  innerElement: InnerElement = import_wrapper_gradient.default,
+  empty,
+  endpoint,
+  pagination: showPagination = true,
+  classNamePagination,
+  params = {},
+  queryParams = false,
+  queryKey = [],
+  render = () => {
+  },
+  ...other
+}) => {
+  var _a, _b, _c;
+  const pathname = (0, import_navigation.usePathname)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const limit = (params == null ? void 0 : params.limit) || 12;
+  const [skip, setSkip] = (0, import_react.useState)(() => {
+    if (!queryParams) return (other == null ? void 0 : other.skip) || 0;
+    const owner = searchParams == null ? void 0 : searchParams.get("pathname");
+    if (owner && owner !== pathname) return (other == null ? void 0 : other.skip) || 0;
+    const page = searchParams == null ? void 0 : searchParams.get("page");
+    return page ? Math.max(0, Number(page) - 1) : (other == null ? void 0 : other.skip) || 0;
+  });
+  const [cursorStack, setCursorStack] = (0, import_react.useState)(() => {
+    if (!queryParams) return [null];
+    const owner = searchParams == null ? void 0 : searchParams.get("pathname");
+    if (owner && owner !== pathname) return [null];
+    const cursor2 = searchParams == null ? void 0 : searchParams.get("cursor");
+    return cursor2 ? [null, cursor2] : [null];
+  });
+  (0, import_react.useEffect)(
+    () => {
+      if (!queryParams || typeof window === "undefined") return;
+      const url = new URL(window.location.href);
+      if (cursorStack.length > 1) {
+        url.searchParams.set("cursor", cursorStack[cursorStack.length - 1]);
+        url.searchParams.set("pathname", pathname);
+        url.searchParams.delete("page");
+      } else if (skip > 0) {
+        url.searchParams.set("page", String(skip + 1));
+        url.searchParams.set("pathname", pathname);
+        url.searchParams.delete("cursor");
+      } else {
+        url.searchParams.delete("page");
+        url.searchParams.delete("cursor");
+      }
+      ;
+      if (url.href === window.location.href) return;
+      window.history.replaceState(window.history.state, "", url);
+    },
+    [queryParams, skip, cursorStack, pathname]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      return () => {
+        if (!queryParams || typeof window === "undefined") return;
+        const url = new URL(window.location.href);
+        url.searchParams.delete("page");
+        url.searchParams.delete("cursor");
+        url.searchParams.delete("pathname");
+        if (url.href === window.location.href) return;
+        window.history.replaceState(window.history.state, "", url);
+      };
+    },
+    [queryParams]
+  );
+  const queryKeyHash = JSON.stringify(queryKey);
+  const initialQueryKey = (0, import_react.useRef)(queryKeyHash);
+  (0, import_react.useEffect)(
+    () => {
+      if (queryKeyHash === initialQueryKey.current) return;
+      setSkip(0);
+      setCursorStack([null]);
+    },
+    [queryKeyHash]
+  );
+  const cursor = cursorStack[cursorStack.length - 1];
+  const isCursorMode = cursorStack.length > 1;
+  const query = (0, import_react_query.useQuery)({
+    placeholderData: import_react_query.keepPreviousData,
+    queryKey: isCursorMode ? [...queryKey, "cursor", cursor] : [...queryKey, skip],
+    queryFn: async () => {
+      const merged = {
+        ...params,
+        limit,
+        ...isCursorMode ? { cursor } : {
+          sort: (params == null ? void 0 : params.sort) || {
+            createdAt: -1
+          },
+          skip
+        }
+      };
+      const { result } = await (0, import_fetch.request)({
+        endpoint,
+        params: queryParams ? Object.fromEntries(
+          Object.entries({
+            ...merged,
+            search: processSearch(merged.search)
+          }).filter(([, v]) => !isEmpty(v))
+        ) : merged
+      });
+      return result;
+    }
+  });
+  const data = query == null ? void 0 : query.data;
+  const items = (data == null ? void 0 : data.items) || [];
+  const emptyData = data == null ? void 0 : data.empty;
+  const locked = (data == null ? void 0 : data.locked) || (((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.status) === 403 ? query.error : void 0);
+  const answered = ((_b = query == null ? void 0 : query.error) == null ? void 0 : _b.status) > 0 && query.error.status < 500 && query.error.message;
+  const failed = !locked && (query == null ? void 0 : query.isLoadingError) ? { message: answered || "We could not load this. Try again in a moment." } : void 0;
+  const renderEmpty = () => {
+    if (failed) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_empty.default,
+        {
+          ...{
+            variant: empty == null ? void 0 : empty.variant
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: failed.message })
+        }
+      );
+    }
+    ;
+    if (empty instanceof Function) {
+      return empty({
+        empty: failed || emptyData,
+        error: query == null ? void 0 : query.error,
+        locked
+      });
+    }
+    ;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_empty.default,
+      {
+        ...{
+          variant: empty == null ? void 0 : empty.variant
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (locked == null ? void 0 : locked.message) || (empty == null ? void 0 : empty.message) || "No results" }),
+          (empty == null ? void 0 : empty.cta) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: empty.cta })
+        ]
+      }
+    );
+  };
+  const pagination = ({
+    className: className2 = null,
+    counter: counterOverride = void 0
+  }) => {
+    var _a2;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Pagination,
+      {
+        ...{
+          className: className2,
+          counter: counterOverride,
+          cursorStack,
+          isFetching: query == null ? void 0 : query.isFetching,
+          limit,
+          pageInfo: (_a2 = query == null ? void 0 : query.data) == null ? void 0 : _a2.pageInfo,
+          setCursorStack,
+          setSkip,
+          skip
+        }
+      }
+    );
+  };
+  if (!(query == null ? void 0 : query.isFetching) && !items.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...{
+          className: "relative " + className
+        },
+        children: renderEmpty()
+      }
+    );
+  }
+  ;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "relative " + className
+      },
+      children: items.length > 0 || (query == null ? void 0 : query.isFetching) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        Element,
+        {
+          ...{
+            className: "relative h-full"
+          },
+          children: [
+            (query == null ? void 0 : query.isFetching) && !items.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_loader.default,
+              {
+                ...{
+                  className: "bg-white/50"
+                }
+              }
+            ),
+            items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                ...{
+                  className: classNameInner
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    InnerElement,
+                    {
+                      ...{
+                        ...InnerElement === import_wrapper_gradient.default && {
+                          className: "flex-1 min-h-0",
+                          classNameScroll: "h-full",
+                          horizontal: "both"
+                        }
+                      },
+                      children: children ? children({
+                        items,
+                        pageInfo: (_c = query == null ? void 0 : query.data) == null ? void 0 : _c.pageInfo,
+                        pagination
+                      }) : items.map(render)
+                    }
+                  ),
+                  showPagination && pagination({
+                    className: classNamePagination
+                  })
+                ]
+              }
+            )
+          ]
+        }
+      ) : renderEmpty()
+    }
+  );
+};
+var paged_default = Paged;