@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/form-file-upload.js

@@ -0,0 +1,527 @@
+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_upload_exports = {};
+__export(form_file_upload_exports, {
+  default: () => form_file_upload_default
+});
+module.exports = __toCommonJS(form_file_upload_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_form = require("../shared/lib/form");
+var import_helpers = require("../shared/lib/helpers");
+var import_uppy = require("./lib/uppy");
+var import_trickle = require("./lib/trickle");
+var import_react_query = require("@tanstack/react-query");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_form2 = __toESM(require("../shared/form"));
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_input_group = __toESM(require("../input-group"));
+var import_card_task = __toESM(require("./card-task"));
+var import_card_data_item = __toESM(require("./card-data-item"));
+var import_loader = __toESM(require("../shared/loader"));
+var import_progress = __toESM(require("../shared/progress"));
+var import_button = __toESM(require("../shared/button"));
+var import_upload = __toESM(require("../icons/upload"));
+const multipartBytes = 50 * import_drawbridge_utils.megabyte;
+const FormFileUpload = ({
+  endpoint,
+  // Video ceiling in bytes. Defaults to the shared 50MB cap the api enforces;
+  // a scenario with its own allotment (premieres) passes a larger number —
+  // alongside its own route, since the api rejects past its own ceiling.
+  maximumUploadBytes,
+  onSuccess,
+  type
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const queryClient = (0, import_react_query.useQueryClient)();
+  const app = queryClient.getQueryData(["app"]);
+  const sizeLimits = maximumUploadBytes ? { ...import_helpers.fileSizeLimits, video: maximumUploadBytes / import_drawbridge_utils.megabyte } : import_helpers.fileSizeLimits;
+  const uploaderRef = (0, import_react.useRef)(null);
+  const successRef = (0, import_react.useRef)(onSuccess);
+  const realRef = (0, import_react.useRef)(0);
+  const [displayed, setDisplayed] = (0, import_react.useState)(0);
+  const [dragging, setDragging] = (0, import_react.useState)(false);
+  const [progress, setProgress] = (0, import_react.useState)(null);
+  const [recovered, setRecovered] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)(null);
+  const { control, formState, handleSubmit, reset, setError } = (0, import_form.useForm)({
+    defaultValues: {
+      endpoint
+    },
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object({
+        endpoint: import_yup.default.string().label("Endpoint").required(),
+        file: import_yup.default.object({
+          data: import_yup.default.mixed().label("File").file(sizeLimits).required(),
+          extension: import_yup.default.string().label("Extension").required().oneOf(app.enums.file.extension.enum),
+          type: import_yup.default.string().label("Type").required().oneOf(app.enums.file.type.enum)
+        }).required()
+      })
+    )
+  });
+  (0, import_react.useEffect)(
+    () => {
+      successRef.current = onSuccess;
+    }
+  );
+  (0, import_react.useEffect)(
+    () => {
+      realRef.current = (progress == null ? void 0 : progress.bytesTotal) ? progress.bytesUploaded / progress.bytesTotal * 100 : 0;
+    },
+    [progress]
+  );
+  const active = Boolean(progress);
+  (0, import_react.useEffect)(
+    () => {
+      if (!active) {
+        setDisplayed(0);
+        return void 0;
+      }
+      const tick = () => setDisplayed((value) => (0, import_trickle.trickle)({
+        displayed: value,
+        real: realRef.current
+      }));
+      tick();
+      const interval = setInterval(tick, 200);
+      return () => clearInterval(interval);
+    },
+    [active]
+  );
+  const onProgress = (0, import_react.useCallback)(
+    ({ bytesTotal, bytesUploaded }) => {
+      setProgress({
+        bytesTotal,
+        bytesUploaded
+      });
+      if (bytesTotal && bytesUploaded >= bytesTotal) {
+        setStatus("completing");
+      }
+    },
+    []
+  );
+  const onSettle = (0, import_react.useCallback)(
+    () => {
+      setProgress(null);
+      setRecovered(null);
+      setStatus(null);
+      reset();
+    },
+    [reset]
+  );
+  (0, import_react.useEffect)(
+    () => {
+      let active2 = true;
+      let uploader = null;
+      const onRestored = () => {
+        const [file] = (uploader == null ? void 0 : uploader.getFiles()) || [];
+        if (!(file == null ? void 0 : file.isGhost)) return;
+        setRecovered({
+          id: file == null ? void 0 : file.id,
+          name: file == null ? void 0 : file.name,
+          size: file == null ? void 0 : file.size
+        });
+      };
+      const onUploadProgress = (file, values) => onProgress(values);
+      const onUploadError = (file, error2) => {
+        onSettle();
+        setError(
+          "upload",
+          {
+            type: "custom",
+            message: error2 == null ? void 0 : error2.message
+          }
+        );
+      };
+      const onUploadSuccess = (file, response) => {
+        uploader == null ? void 0 : uploader.removeFile(file == null ? void 0 : file.id);
+        onSettle();
+        successRef.current(response == null ? void 0 : response.body);
+      };
+      (0, import_uppy.getUploader)({
+        endpoint,
+        maxFileSize: maximumUploadBytes,
+        type
+      }).then((created) => {
+        var _a2, _b2, _c2, _d2;
+        if (!active2) return;
+        uploader = created;
+        uploaderRef.current = created;
+        created.on("restored", onRestored);
+        created.on("upload-error", onUploadError);
+        created.on("upload-progress", onUploadProgress);
+        created.on("upload-success", onUploadSuccess);
+        const [file] = created.getFiles();
+        if (file == null ? void 0 : file.isGhost) {
+          onRestored();
+        } else if (((_a2 = file == null ? void 0 : file.progress) == null ? void 0 : _a2.uploadStarted) && !((_b2 = file == null ? void 0 : file.progress) == null ? void 0 : _b2.uploadComplete)) {
+          setStatus("uploading");
+          onProgress({
+            bytesTotal: (_c2 = file == null ? void 0 : file.progress) == null ? void 0 : _c2.bytesTotal,
+            bytesUploaded: ((_d2 = file == null ? void 0 : file.progress) == null ? void 0 : _d2.bytesUploaded) || 0
+          });
+        }
+      }).catch(() => {
+      });
+      return () => {
+        active2 = false;
+        uploaderRef.current = null;
+        uploader == null ? void 0 : uploader.off("restored", onRestored);
+        uploader == null ? void 0 : uploader.off("upload-error", onUploadError);
+        uploader == null ? void 0 : uploader.off("upload-progress", onUploadProgress);
+        uploader == null ? void 0 : uploader.off("upload-success", onUploadSuccess);
+        (0, import_uppy.releaseUploader)();
+      };
+    },
+    [endpoint, onProgress, onSettle, setError, type]
+  );
+  const onCancel = (0, import_react.useCallback)(
+    () => {
+      var _a2;
+      (_a2 = uploaderRef.current) == null ? void 0 : _a2.cancelAll();
+      onSettle();
+    },
+    [onSettle]
+  );
+  const onMultipart = async ({ data }) => {
+    const uploader = uploaderRef.current;
+    if (!uploader) {
+      setError(
+        "upload",
+        {
+          type: "custom",
+          message: "The uploader is still starting. Try again in a moment."
+        }
+      );
+      return;
+    }
+    try {
+      const resuming = Boolean(recovered) && (recovered == null ? void 0 : recovered.name) === (data == null ? void 0 : data.name) && (recovered == null ? void 0 : recovered.size) === (data == null ? void 0 : data.size);
+      if (recovered && !resuming) {
+        uploader.removeFile(recovered == null ? void 0 : recovered.id);
+      }
+      uploader.addFile({
+        data,
+        name: data == null ? void 0 : data.name,
+        source: "file-upload",
+        type: data == null ? void 0 : data.type
+      });
+      setRecovered(null);
+      setStatus("uploading");
+      setProgress({
+        bytesTotal: data == null ? void 0 : data.size,
+        bytesUploaded: 0
+      });
+      if (resuming) {
+        uploader.emit("restore-confirmed");
+        return;
+      }
+      uploader.upload().catch(() => {
+      });
+    } catch ({ message }) {
+      onSettle();
+      setError(
+        "upload",
+        {
+          type: "custom",
+          message
+        }
+      );
+    }
+  };
+  const onSubmit = async ({
+    file: {
+      extension,
+      data,
+      type: type2
+    }
+  }) => {
+    if ((data == null ? void 0 : data.size) >= multipartBytes) {
+      return await onMultipart({
+        data
+      });
+    }
+    const body = new FormData();
+    body.append("file", data);
+    try {
+      const response = await (0, import_fetch.upload)({
+        body,
+        endpoint: endpoint + "/file/" + type2 + "/" + extension,
+        method: "POST",
+        onProgress
+      });
+      onSettle();
+      onSuccess(response);
+    } catch ({ message }) {
+      onSettle();
+      setError(
+        "upload",
+        {
+          type: "custom",
+          message
+        }
+      );
+    }
+  };
+  const error = (_i = ((_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.upload) || ((_c = (_b = formState == null ? void 0 : formState.errors) == null ? void 0 : _b.file) == null ? void 0 : _c.data) || ((_e = (_d = formState == null ? void 0 : formState.errors) == null ? void 0 : _d.file) == null ? void 0 : _e.extension) || ((_g = (_f = formState == null ? void 0 : formState.errors) == null ? void 0 : _f.file) == null ? void 0 : _g.type) || ((_h = formState == null ? void 0 : formState.errors) == null ? void 0 : _h.file)) == null ? void 0 : _i.message;
+  const busy = Boolean(status) || (formState == null ? void 0 : formState.isSubmitting);
+  const megabytes = ((progress == null ? void 0 : progress.bytesTotal) || 0) < import_drawbridge_utils.gigabyte;
+  const format = (value) => megabytes ? (0, import_drawbridge_utils.bytesToMB)(value) : (0, import_drawbridge_utils.bytesToGB)(value);
+  const current = (0, import_drawbridge_utils.formatNumber)(format((progress == null ? void 0 : progress.bytesUploaded) || 0), 2);
+  const label = status === "completing" ? "Finishing upload" : "Uploading";
+  const limit = (0, import_drawbridge_utils.formatNumber)(format((progress == null ? void 0 : progress.bytesTotal) || 0), 2);
+  const percentage = displayed;
+  const unit = megabytes ? "MB" : "GB";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_form2.default,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: () => {
+        }
+      },
+      children: [
+        busy && !progress && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_loader.default,
+          {
+            ...{
+              className: "bg-white z-20"
+            },
+            children: "Uploading..."
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_card_task.default,
+          {
+            ...{
+              message: error,
+              type: "error"
+            }
+          }
+        ),
+        recovered && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_card_task.default,
+          {
+            ...{
+              message: "Select " + (recovered == null ? void 0 : recovered.name) + " again to carry on from where it stopped.",
+              title: "An upload was interrupted",
+              type: "warning"
+            }
+          }
+        ),
+        progress && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "space-y-3"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_progress.default,
+                {
+                  ...{
+                    current,
+                    label,
+                    limit,
+                    percentage,
+                    unit
+                  }
+                }
+              ),
+              status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_button.default,
+                {
+                  ...{
+                    inline: true,
+                    onClick: onCancel,
+                    variant: "link"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      ...{
+                        className: "text-xs underline md:text-sm"
+                      },
+                      children: "Cancel upload"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: busy
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "file",
+                    render: ({ field: { value, onChange } }) => {
+                      const onFile = (file, name = "") => {
+                        if (!file) return;
+                        const { extension, type: type2 } = (0, import_helpers.fileParts)(file);
+                        onChange({
+                          data: file,
+                          extension,
+                          name,
+                          type: type2
+                        });
+                        handleSubmit(onSubmit)();
+                      };
+                      const className = [
+                        "flex flex-col items-center justify-center gap-2 border border-dashed border-black rounded cursor-pointer p-8 text-xs text-center w-full focus-within:outline focus-within:outline-1 focus-within:outline-black md:text-sm",
+                        dragging ? "bg-gray" : ""
+                      ].filter(Boolean).join(" ");
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                              "label",
+                              {
+                                ...{
+                                  className,
+                                  onDragLeave: () => setDragging(false),
+                                  // dragover must be cancelled or the
+                                  // browser refuses the drop outright.
+                                  onDragOver: (event) => {
+                                    event.preventDefault();
+                                    if (!busy) setDragging(true);
+                                  },
+                                  onDrop: (event) => {
+                                    var _a2, _b2;
+                                    event.preventDefault();
+                                    setDragging(false);
+                                    if (busy) return;
+                                    onFile((_b2 = (_a2 = event.dataTransfer) == null ? void 0 : _a2.files) == null ? void 0 : _b2[0]);
+                                  }
+                                },
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    import_upload.default,
+                                    {
+                                      ...{
+                                        // pointer-events-none keeps the
+                                        // children from churning
+                                        // dragleave as the file crosses
+                                        // them — the label is the only
+                                        // drag target.
+                                        className: "h-6 w-6 pointer-events-none"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                    "span",
+                                    {
+                                      ...{
+                                        className: "pointer-events-none"
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          "span",
+                                          {
+                                            ...{
+                                              className: "font-semibold"
+                                            },
+                                            children: "Drag a file here"
+                                          }
+                                        ),
+                                        " or click to browse"
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    "input",
+                                    {
+                                      ...{
+                                        accept: "." + (0, import_helpers.fileTypes)(type).join(", ."),
+                                        className: "sr-only",
+                                        onChange: ({ target }) => onFile(target.files[0], target == null ? void 0 : target.value),
+                                        value: (value == null ? void 0 : value.name) || "",
+                                        type: "file"
+                                      }
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  ...{
+                    className: "text-xs space-y-2 md:text-sm"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_card_data_item.default,
+                      {
+                        ...{
+                          className: "flex-col md:flex-row",
+                          classNameSlotLeft: "md:w-1/2",
+                          label: "Accepted formats",
+                          value: "." + (0, import_helpers.fileTypes)(type).join(", .")
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_card_data_item.default,
+                      {
+                        ...{
+                          className: "flex-col md:flex-row",
+                          classNameSlotLeft: "md:w-1/2",
+                          label: "Accepted sizes",
+                          value: (0, import_helpers.fileSizes)(type, sizeLimits).join(", ")
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var form_file_upload_default = FormFileUpload;