@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/form-file.js

@@ -0,0 +1,367 @@
+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 form_file_exports = {};
+__export(form_file_exports, {
+  default: () => form_file_default
+});
+module.exports = __toCommonJS(form_file_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_cdn = require("@drawbridge/drawbridge-utils/cdn");
+var import_helpers = require("../shared/lib/helpers");
+var import_form_ai = require("./form-ai");
+var import_form_file_upload = __toESM(require("./form-file-upload"));
+var import_input_group = __toESM(require("../input-group"));
+var import_loader = __toESM(require("../icons/loader"));
+var import_tabs = __toESM(require("../shared/tabs"));
+var import_empty = __toESM(require("../shared/empty"));
+var import_input_text = __toESM(require("../input-text"));
+var import_badge = __toESM(require("../shared/badge"));
+var import_image = __toESM(require("next/image"));
+var import_paged = __toESM(require("./paged"));
+var import_button = __toESM(require("../shared/button"));
+var import_react_query = require("@tanstack/react-query");
+let timeout;
+const FileButton = ({ file, onChange }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const processing = (file == null ? void 0 : file.mimetype.includes("image")) && !((_a = file == null ? void 0 : file.sizes) == null ? void 0 : _a["200x200"]) || (file == null ? void 0 : file.mimetype.includes("video")) && !((_e = (_d = ((_b = file == null ? void 0 : file.frames) == null ? void 0 : _b[file == null ? void 0 : file.poster]) || ((_c = file == null ? void 0 : file.frames) == null ? void 0 : _c[0])) == null ? void 0 : _d.sizes) == null ? void 0 : _e["100x100"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
+    {
+      ...{
+        disabled: processing,
+        onClick: () => onChange(file),
+        variant: "link"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "span",
+        {
+          ...{
+            className: "flex items-center space-x-3 w-full p-3"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                ...{
+                  className: "flex items-center justify-center relative w-8 h-8 rounded overflow-hidden shrink-0 border"
+                },
+                children: processing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_loader.default,
+                  {
+                    ...{
+                      className: "w-4 h-4"
+                    }
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  (file == null ? void 0 : file.mimetype.includes("video")) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_image.default,
+                    {
+                      ...{
+                        alt: file == null ? void 0 : file.id,
+                        className: "object-cover",
+                        width: 32,
+                        height: 32,
+                        src: (0, import_cdn.cdnSrc)(((_f = file == null ? void 0 : file.frames) == null ? void 0 : _f[file == null ? void 0 : file.poster]) || ((_g = file == null ? void 0 : file.frames) == null ? void 0 : _g[0]), "100x100", file == null ? void 0 : file.updatedAt)
+                      }
+                    }
+                  ),
+                  (file == null ? void 0 : file.mimetype.includes("image")) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_image.default,
+                    {
+                      ...{
+                        alt: file == null ? void 0 : file.filename,
+                        className: "object-cover",
+                        width: 32,
+                        height: 32,
+                        src: (0, import_cdn.cdnSrc)(file, "200x200", file == null ? void 0 : file.updatedAt)
+                      }
+                    },
+                    file == null ? void 0 : file.id
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "p",
+              {
+                ...{
+                  className: "truncate"
+                },
+                children: file == null ? void 0 : file.filename
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const FileSelect = ({
+  endpoint,
+  filters = {},
+  onChange,
+  type
+}) => {
+  const types = (0, import_helpers.fileTypes)(type);
+  const [search, setSearch] = (0, import_react.useState)();
+  const [params, setParams] = (0, import_react.useState)({
+    filters: {
+      ...filters,
+      ...type && {
+        extension: {
+          $in: types
+        }
+      }
+    },
+    limit: 12,
+    search: null,
+    sort: {
+      createdAt: -1
+    }
+  });
+  const onSearchChange = (0, import_react.useCallback)(
+    (value) => {
+      setSearch(value);
+      clearTimeout(timeout);
+      timeout = setTimeout(
+        () => {
+          setParams({
+            ...params,
+            search: {
+              keys: [
+                "filename"
+              ],
+              value
+            }
+          });
+        },
+        750
+      );
+    },
+    [params]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "space-y-6"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_input_group.default,
+          {
+            ...{
+              input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_input_text.default,
+                {
+                  ...{
+                    onChange: onSearchChange,
+                    placeholder: "Search files...",
+                    value: search || ""
+                  }
+                }
+              )
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_paged.default,
+          {
+            ...{
+              classNamePagination: "pt-6",
+              endpoint: endpoint + "/files",
+              params,
+              queryKey: ["file-list", endpoint, params],
+              empty: (query) => {
+                var _a;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_empty.default, { children: ((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.message) || "No files found" });
+              }
+            },
+            children: ({ items, pageInfo }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                ...{
+                  className: "space-y-3"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "div",
+                    {
+                      ...{
+                        className: "flex items-center justify-between"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "p",
+                          {
+                            ...{
+                              className: "text-sm"
+                            },
+                            children: [
+                              pageInfo == null ? void 0 : pageInfo.total,
+                              " ",
+                              (pageInfo == null ? void 0 : pageInfo.total) === 1 ? "file" : "files"
+                            ]
+                          }
+                        ),
+                        types && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.default, { children: "." + types.join(", .") })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      ...{
+                        className: "border border-black rounded overflow-hidden divide-y divide-black"
+                      },
+                      children: items.map((file, key) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        FileButton,
+                        {
+                          ...{
+                            file,
+                            onChange
+                          }
+                        },
+                        key
+                      ))
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const FormFile = ({
+  endpoint,
+  filters,
+  onError,
+  onChange,
+  onUpload,
+  organization,
+  tabs = ["library", "upload", "generate"],
+  type
+}) => {
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const [active, setActive] = (0, import_react.useState)(0);
+  const onSuccess = (response) => {
+    queryClient.invalidateQueries({
+      queryKey: ["file-list"]
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["organization-dashboard"]
+    });
+    if (onUpload) {
+      onUpload(response);
+    } else {
+      setActive(0);
+    }
+  };
+  const props = [
+    {
+      component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        FileSelect,
+        {
+          ...{
+            endpoint,
+            filters,
+            onChange,
+            type
+          }
+        },
+        "file-select"
+      ),
+      key: "library",
+      title: "Library"
+    },
+    {
+      component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_form_file_upload.default,
+        {
+          ...{
+            endpoint,
+            onSuccess,
+            type
+          }
+        },
+        "file-upload"
+      ),
+      key: "upload",
+      title: "Upload"
+    },
+    {
+      component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_form_ai.FormAiImage,
+        {
+          ...{
+            onError,
+            onSuccess,
+            type,
+            values: {
+              organization: organization == null ? void 0 : organization.id
+            }
+          }
+        }
+      ),
+      key: "generate",
+      title: "Generate"
+    }
+  ].reduce(
+    (accumulator, { component, key, title, ...rest }) => {
+      if (tabs.includes(key)) {
+        if (tabs.length > 1) {
+          accumulator.list.push({
+            title,
+            ...rest
+          });
+        }
+        accumulator.panels.push(component);
+      }
+      return accumulator;
+    },
+    {
+      list: [],
+      panels: []
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tabs.default,
+    {
+      ...{
+        active,
+        onChange: (index) => setActive(index),
+        ...props
+      }
+    }
+  );
+};
+var form_file_default = FormFile;

package/dist/dashboard/form-file.mjs

@@ -0,0 +1,338 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
+import { fileTypes } from "../shared/lib/helpers";
+import { FormAiImage } from "./form-ai";
+import FormFileUpload from "./form-file-upload";
+import InputGroup from "../input-group";
+import Loader from "../icons/loader";
+import Tabs from "../shared/tabs";
+import Empty from "../shared/empty";
+import InputText from "../input-text";
+import Badge from "../shared/badge";
+import Image from "next/image";
+import Paged from "./paged";
+import Button from "../shared/button";
+import { useQueryClient } from "@tanstack/react-query";
+let timeout;
+const FileButton = ({ file, onChange }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const processing = (file == null ? void 0 : file.mimetype.includes("image")) && !((_a = file == null ? void 0 : file.sizes) == null ? void 0 : _a["200x200"]) || (file == null ? void 0 : file.mimetype.includes("video")) && !((_e = (_d = ((_b = file == null ? void 0 : file.frames) == null ? void 0 : _b[file == null ? void 0 : file.poster]) || ((_c = file == null ? void 0 : file.frames) == null ? void 0 : _c[0])) == null ? void 0 : _d.sizes) == null ? void 0 : _e["100x100"]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...{
+        disabled: processing,
+        onClick: () => onChange(file),
+        variant: "link"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...{
+            className: "flex items-center space-x-3 w-full p-3"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                ...{
+                  className: "flex items-center justify-center relative w-8 h-8 rounded overflow-hidden shrink-0 border"
+                },
+                children: processing ? /* @__PURE__ */ jsx(
+                  Loader,
+                  {
+                    ...{
+                      className: "w-4 h-4"
+                    }
+                  }
+                ) : /* @__PURE__ */ jsxs("span", { children: [
+                  (file == null ? void 0 : file.mimetype.includes("video")) && /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      ...{
+                        alt: file == null ? void 0 : file.id,
+                        className: "object-cover",
+                        width: 32,
+                        height: 32,
+                        src: cdnSrc(((_f = file == null ? void 0 : file.frames) == null ? void 0 : _f[file == null ? void 0 : file.poster]) || ((_g = file == null ? void 0 : file.frames) == null ? void 0 : _g[0]), "100x100", file == null ? void 0 : file.updatedAt)
+                      }
+                    }
+                  ),
+                  (file == null ? void 0 : file.mimetype.includes("image")) && /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      ...{
+                        alt: file == null ? void 0 : file.filename,
+                        className: "object-cover",
+                        width: 32,
+                        height: 32,
+                        src: cdnSrc(file, "200x200", file == null ? void 0 : file.updatedAt)
+                      }
+                    },
+                    file == null ? void 0 : file.id
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                ...{
+                  className: "truncate"
+                },
+                children: file == null ? void 0 : file.filename
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const FileSelect = ({
+  endpoint,
+  filters = {},
+  onChange,
+  type
+}) => {
+  const types = fileTypes(type);
+  const [search, setSearch] = useState();
+  const [params, setParams] = useState({
+    filters: {
+      ...filters,
+      ...type && {
+        extension: {
+          $in: types
+        }
+      }
+    },
+    limit: 12,
+    search: null,
+    sort: {
+      createdAt: -1
+    }
+  });
+  const onSearchChange = useCallback(
+    (value) => {
+      setSearch(value);
+      clearTimeout(timeout);
+      timeout = setTimeout(
+        () => {
+          setParams({
+            ...params,
+            search: {
+              keys: [
+                "filename"
+              ],
+              value
+            }
+          });
+        },
+        750
+      );
+    },
+    [params]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-6"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          InputGroup,
+          {
+            ...{
+              input: /* @__PURE__ */ jsx(
+                InputText,
+                {
+                  ...{
+                    onChange: onSearchChange,
+                    placeholder: "Search files...",
+                    value: search || ""
+                  }
+                }
+              )
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Paged,
+          {
+            ...{
+              classNamePagination: "pt-6",
+              endpoint: endpoint + "/files",
+              params,
+              queryKey: ["file-list", endpoint, params],
+              empty: (query) => {
+                var _a;
+                return /* @__PURE__ */ jsx(Empty, { children: ((_a = query == null ? void 0 : query.error) == null ? void 0 : _a.message) || "No files found" });
+              }
+            },
+            children: ({ items, pageInfo }) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...{
+                  className: "space-y-3"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ...{
+                        className: "flex items-center justify-between"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "p",
+                          {
+                            ...{
+                              className: "text-sm"
+                            },
+                            children: [
+                              pageInfo == null ? void 0 : pageInfo.total,
+                              " ",
+                              (pageInfo == null ? void 0 : pageInfo.total) === 1 ? "file" : "files"
+                            ]
+                          }
+                        ),
+                        types && /* @__PURE__ */ jsx(Badge, { children: "." + types.join(", .") })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...{
+                        className: "border border-black rounded overflow-hidden divide-y divide-black"
+                      },
+                      children: items.map((file, key) => /* @__PURE__ */ jsx(
+                        FileButton,
+                        {
+                          ...{
+                            file,
+                            onChange
+                          }
+                        },
+                        key
+                      ))
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const FormFile = ({
+  endpoint,
+  filters,
+  onError,
+  onChange,
+  onUpload,
+  organization,
+  tabs = ["library", "upload", "generate"],
+  type
+}) => {
+  const queryClient = useQueryClient();
+  const [active, setActive] = useState(0);
+  const onSuccess = (response) => {
+    queryClient.invalidateQueries({
+      queryKey: ["file-list"]
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["organization-dashboard"]
+    });
+    if (onUpload) {
+      onUpload(response);
+    } else {
+      setActive(0);
+    }
+  };
+  const props = [
+    {
+      component: /* @__PURE__ */ jsx(
+        FileSelect,
+        {
+          ...{
+            endpoint,
+            filters,
+            onChange,
+            type
+          }
+        },
+        "file-select"
+      ),
+      key: "library",
+      title: "Library"
+    },
+    {
+      component: /* @__PURE__ */ jsx(
+        FormFileUpload,
+        {
+          ...{
+            endpoint,
+            onSuccess,
+            type
+          }
+        },
+        "file-upload"
+      ),
+      key: "upload",
+      title: "Upload"
+    },
+    {
+      component: /* @__PURE__ */ jsx(
+        FormAiImage,
+        {
+          ...{
+            onError,
+            onSuccess,
+            type,
+            values: {
+              organization: organization == null ? void 0 : organization.id
+            }
+          }
+        }
+      ),
+      key: "generate",
+      title: "Generate"
+    }
+  ].reduce(
+    (accumulator, { component, key, title, ...rest }) => {
+      if (tabs.includes(key)) {
+        if (tabs.length > 1) {
+          accumulator.list.push({
+            title,
+            ...rest
+          });
+        }
+        accumulator.panels.push(component);
+      }
+      return accumulator;
+    },
+    {
+      list: [],
+      panels: []
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      ...{
+        active,
+        onChange: (index) => setActive(index),
+        ...props
+      }
+    }
+  );
+};
+var form_file_default = FormFile;
+export {
+  form_file_default as default
+};