@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/paged.mjs

@@ -0,0 +1,401 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import Empty from "../shared/empty.mjs";
+import Loader from "../shared/loader.mjs";
+import ArrowLeft from "../icons/arrow-left.mjs";
+import ArrowRight from "../icons/arrow-right.mjs";
+import Badge from "../shared/badge.mjs";
+import Button from "../shared/button.mjs";
+import WrapperGradient from "../wrapper-gradient.mjs";
+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] = useState(null);
+  const [wasFetching, setWasFetching] = useState(isFetching);
+  if (wasFetching !== isFetching) {
+    setWasFetching(isFetching);
+    if (!isFetching && pending) {
+      setPending(null);
+    }
+    ;
+  }
+  ;
+  if (isCursorApi) {
+    if (!hasNextPage && !hasPreviousCursor) {
+      return null;
+    }
+    ;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...{
+          className: ["flex items-center justify-between space-x-6", className].filter(Boolean).join(" ")
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...{
+                "aria-label": "Previous page",
+                disabled: !hasPreviousCursor,
+                icon: ArrowLeft,
+                inline: true,
+                loading: pending === "previous" && isFetching,
+                onClick: () => {
+                  setPending("previous");
+                  setCursorStack((s) => s.slice(0, -1));
+                },
+                variant: "link"
+              }
+            }
+          ),
+          counterOverride !== void 0 ? counterOverride : /* @__PURE__ */ jsxs(Badge, { children: [
+            "Page ",
+            cursorStack.length
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              ...{
+                "aria-label": "Next page",
+                disabled: !hasNextPage,
+                icon: ArrowRight,
+                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__ */ jsxs(Badge, { children: [
+    "Page ",
+    skip + 1,
+    " of ",
+    Math.ceil(total / limit)
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: ["flex items-center justify-between space-x-6", className].filter(Boolean).join(" ")
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              "aria-label": "Previous page",
+              disabled: !hasPreviousPage,
+              icon: ArrowLeft,
+              inline: true,
+              loading: pending === "previous" && isFetching,
+              onClick: () => {
+                setPending("previous");
+                setSkip(skip - 1);
+              },
+              variant: "link"
+            }
+          }
+        ),
+        counterOverride !== void 0 ? counterOverride : counter,
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              "aria-label": "Next page",
+              disabled: !hasNextPage,
+              icon: ArrowRight,
+              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 = WrapperGradient,
+  empty,
+  endpoint,
+  pagination: showPagination = true,
+  classNamePagination,
+  params = {},
+  queryParams = false,
+  queryKey = [],
+  render = () => {
+  },
+  ...other
+}) => {
+  var _a, _b, _c;
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const limit = (params == null ? void 0 : params.limit) || 12;
+  const [skip, setSkip] = 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] = 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];
+  });
+  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]
+  );
+  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 = useRef(queryKeyHash);
+  useEffect(
+    () => {
+      if (queryKeyHash === initialQueryKey.current) return;
+      setSkip(0);
+      setCursorStack([null]);
+    },
+    [queryKeyHash]
+  );
+  const cursor = cursorStack[cursorStack.length - 1];
+  const isCursorMode = cursorStack.length > 1;
+  const query = useQuery({
+    placeholderData: 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 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__ */ jsx(
+        Empty,
+        {
+          ...{
+            variant: empty == null ? void 0 : empty.variant
+          },
+          children: /* @__PURE__ */ jsx("p", { children: failed.message })
+        }
+      );
+    }
+    ;
+    if (empty instanceof Function) {
+      return empty({
+        empty: failed || emptyData,
+        error: query == null ? void 0 : query.error,
+        locked
+      });
+    }
+    ;
+    return /* @__PURE__ */ jsxs(
+      Empty,
+      {
+        ...{
+          variant: empty == null ? void 0 : empty.variant
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { children: (locked == null ? void 0 : locked.message) || (empty == null ? void 0 : empty.message) || "No results" }),
+          (empty == null ? void 0 : empty.cta) && /* @__PURE__ */ jsx("p", { children: empty.cta })
+        ]
+      }
+    );
+  };
+  const pagination = ({
+    className: className2 = null,
+    counter: counterOverride = void 0
+  }) => {
+    var _a2;
+    return /* @__PURE__ */ 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__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "relative " + className
+        },
+        children: renderEmpty()
+      }
+    );
+  }
+  ;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "relative " + className
+      },
+      children: items.length > 0 || (query == null ? void 0 : query.isFetching) ? /* @__PURE__ */ jsxs(
+        Element,
+        {
+          ...{
+            className: "relative h-full"
+          },
+          children: [
+            (query == null ? void 0 : query.isFetching) && !items.length && /* @__PURE__ */ jsx(
+              Loader,
+              {
+                ...{
+                  className: "bg-white/50"
+                }
+              }
+            ),
+            items.length > 0 && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...{
+                  className: classNameInner
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    InnerElement,
+                    {
+                      ...{
+                        ...InnerElement === WrapperGradient && {
+                          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;
+export {
+  paged_default as default
+};

package/dist/dashboard/provider-resource.js

@@ -0,0 +1,102 @@
+"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 provider_resource_exports = {};
+__export(provider_resource_exports, {
+  default: () => provider_resource_default
+});
+module.exports = __toCommonJS(provider_resource_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_navigation = require("next/navigation");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_react_query = require("@tanstack/react-query");
+var import_loader = __toESM(require("../shared/loader"));
+var import_template_not_found = __toESM(require("./template-not-found"));
+const ProviderResource = ({
+  cache,
+  children,
+  classNameLoader = "p-6",
+  data,
+  enabled = true,
+  endpoint,
+  error,
+  loader = false,
+  queryKey,
+  ...other
+}) => {
+  var _a;
+  const query = (0, import_react_query.useQuery)({
+    enabled: Boolean(enabled),
+    queryKey,
+    queryFn: async () => {
+      if (endpoint) {
+        const { result } = await (0, import_fetch.request)({
+          cache,
+          endpoint,
+          ...(other == null ? void 0 : other.params) && {
+            params: other.params
+          }
+        });
+        return result || {};
+      }
+      return data;
+    },
+    ...other
+  });
+  if (query == null ? void 0 : query.isLoading) {
+    if (loader) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ...{
+            className: classNameLoader
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_loader.default, {})
+        }
+      );
+    }
+    return null;
+  }
+  if ((query == null ? void 0 : query.isError) && !(query == null ? void 0 : query.data)) {
+    if (error !== void 0) return error instanceof Function ? error(query) : error;
+    if ((0, import_fetch.isTransientError)(query.error)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_template_not_found.default,
+        {
+          ...{
+            button: false,
+            message: (_a = query == null ? void 0 : query.error) == null ? void 0 : _a.message
+          }
+        }
+      );
+    }
+    (0, import_navigation.notFound)();
+  }
+  return children instanceof Function ? children(query) : children;
+};
+var provider_resource_default = ProviderResource;

package/dist/dashboard/provider-resource.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { notFound } from "next/navigation";
+import { isTransientError, request } from "@drawbridge/drawbridge-utils/fetch";
+import { useQuery } from "@tanstack/react-query";
+import Loader from "../shared/loader.mjs";
+import TemplateNotFound from "./template-not-found.mjs";
+const ProviderResource = ({
+  cache,
+  children,
+  classNameLoader = "p-6",
+  data,
+  enabled = true,
+  endpoint,
+  error,
+  loader = false,
+  queryKey,
+  ...other
+}) => {
+  var _a;
+  const query = useQuery({
+    enabled: Boolean(enabled),
+    queryKey,
+    queryFn: async () => {
+      if (endpoint) {
+        const { result } = await request({
+          cache,
+          endpoint,
+          ...(other == null ? void 0 : other.params) && {
+            params: other.params
+          }
+        });
+        return result || {};
+      }
+      return data;
+    },
+    ...other
+  });
+  if (query == null ? void 0 : query.isLoading) {
+    if (loader) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...{
+            className: classNameLoader
+          },
+          children: /* @__PURE__ */ jsx(Loader, {})
+        }
+      );
+    }
+    return null;
+  }
+  if ((query == null ? void 0 : query.isError) && !(query == null ? void 0 : query.data)) {
+    if (error !== void 0) return error instanceof Function ? error(query) : error;
+    if (isTransientError(query.error)) {
+      return /* @__PURE__ */ jsx(
+        TemplateNotFound,
+        {
+          ...{
+            button: false,
+            message: (_a = query == null ? void 0 : query.error) == null ? void 0 : _a.message
+          }
+        }
+      );
+    }
+    notFound();
+  }
+  return children instanceof Function ? children(query) : children;
+};
+var provider_resource_default = ProviderResource;
+export {
+  provider_resource_default as default
+};