@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/list-resource.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import Paged from "./paged";
+import Empty from "../shared/empty";
+import Button from "../shared/button";
+import InputText from "../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__ */ jsx(Button, { ...button.props, children: button.text }),
+  searchKeys = ["title"],
+  selected
+}) => {
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [sessionAdded, setSessionAdded] = React.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";
+  React.useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSearch(search), 300);
+    return () => clearTimeout(timer);
+  }, [search]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-6"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          InputText,
+          {
+            ...{
+              onChange: (val) => setSearch(val),
+              placeholder: "Search...",
+              type: "text",
+              value: search
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Paged,
+          {
+            ...{
+              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__ */ jsx(
+                  "div",
+                  {
+                    ...{
+                      className: "grid min-h-32"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Empty,
+                      {
+                        ...{
+                          variant: emptyVariant
+                        },
+                        children: /* @__PURE__ */ jsx("p", { children: emptyMessage })
+                      }
+                    )
+                  }
+                );
+              }
+              ;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    className: "space-y-3"
+                  },
+                  children: available.map((item) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ...{
+                        className: "w-full flex items-center justify-between space-x-6"
+                      },
+                      children: [
+                        /* @__PURE__ */ 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;
+export {
+  list_resource_default as default
+};

package/dist/dashboard/list.js

@@ -0,0 +1,96 @@
+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_exports = {};
+__export(list_exports, {
+  default: () => list_default
+});
+module.exports = __toCommonJS(list_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_navigation = require("next/navigation");
+var import_link = __toESM(require("./link"));
+var import_button = __toESM(require("../shared/button"));
+var import_arrow_right = __toESM(require("../icons/arrow-right"));
+const List = ({
+  className = "space-y-4",
+  items = [],
+  svg = true
+}) => {
+  const pathname = (0, import_navigation.usePathname)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className
+      },
+      // icon and element shape the row; left in rest they reach the DOM.
+      children: items.map(({ complete, element, icon, increment, title, ...rest }, key) => {
+        const same = Boolean(rest == null ? void 0 : rest.href) && rest.href === pathname;
+        const linked = Boolean(rest == null ? void 0 : rest.href) && !same;
+        const IconComponent = icon || import_arrow_right.default;
+        const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              ...{
+                className: ["flex-1 min-w-0 text-left break-words whitespace-normal", linked && "hover:underline"].filter(Boolean).join(" ")
+              },
+              children: title
+            }
+          ),
+          !same && svg && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconComponent, { className: "w-4 h-4 shrink-0" })
+        ] });
+        if (linked) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              element: import_link.default,
+              variant: "link",
+              ...rest
+            },
+            children: content
+          },
+          key
+        );
+        const Element = element || "p";
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Element,
+          {
+            ...{
+              className: "flex items-center justify-between gap-3 w-full",
+              ...rest
+            },
+            children: content
+          },
+          key
+        );
+      })
+    }
+  );
+};
+var list_default = List;

package/dist/dashboard/list.mjs

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { usePathname } from "next/navigation";
+import Link from "./link";
+import Button from "../shared/button";
+import ArrowRight from "../icons/arrow-right";
+const List = ({
+  className = "space-y-4",
+  items = [],
+  svg = true
+}) => {
+  const pathname = usePathname();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className
+      },
+      // icon and element shape the row; left in rest they reach the DOM.
+      children: items.map(({ complete, element, icon, increment, title, ...rest }, key) => {
+        const same = Boolean(rest == null ? void 0 : rest.href) && rest.href === pathname;
+        const linked = Boolean(rest == null ? void 0 : rest.href) && !same;
+        const IconComponent = icon || ArrowRight;
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...{
+                className: ["flex-1 min-w-0 text-left break-words whitespace-normal", linked && "hover:underline"].filter(Boolean).join(" ")
+              },
+              children: title
+            }
+          ),
+          !same && svg && /* @__PURE__ */ jsx(IconComponent, { className: "w-4 h-4 shrink-0" })
+        ] });
+        if (linked) return /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              element: Link,
+              variant: "link",
+              ...rest
+            },
+            children: content
+          },
+          key
+        );
+        const Element = element || "p";
+        return /* @__PURE__ */ jsx(
+          Element,
+          {
+            ...{
+              className: "flex items-center justify-between gap-3 w-full",
+              ...rest
+            },
+            children: content
+          },
+          key
+        );
+      })
+    }
+  );
+};
+var list_default = List;
+export {
+  list_default as default
+};