@drawbridge/components 0.0.78 → 0.1.1

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

@@ -0,0 +1,498 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { bytesToGB, bytesToMB, formatNumber, gigabyte, megabyte } from "@drawbridge/drawbridge-utils";
+import { upload } from "@drawbridge/drawbridge-utils/fetch";
+import { useForm, Controller } from "../shared/lib/form.mjs";
+import { fileParts, fileSizeLimits, fileSizes, fileTypes } from "../shared/lib/helpers.mjs";
+import { getUploader, releaseUploader } from "./lib/uppy.mjs";
+import { trickle } from "./lib/trickle.mjs";
+import { useQueryClient } from "@tanstack/react-query";
+import yup, { resolver } from "../shared/lib/yup.mjs";
+import Form from "../shared/form.mjs";
+import Fieldset from "../shared/fieldset.mjs";
+import InputGroup from "../input-group.mjs";
+import CardTask from "./card-task.mjs";
+import CardDataItem from "./card-data-item.mjs";
+import Loader from "../shared/loader.mjs";
+import Progress from "../shared/progress.mjs";
+import Button from "../shared/button.mjs";
+import Upload from "../icons/upload.mjs";
+const multipartBytes = 50 * 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 = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  const sizeLimits = maximumUploadBytes ? { ...fileSizeLimits, video: maximumUploadBytes / megabyte } : fileSizeLimits;
+  const uploaderRef = useRef(null);
+  const successRef = useRef(onSuccess);
+  const realRef = useRef(0);
+  const [displayed, setDisplayed] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const [recovered, setRecovered] = useState(null);
+  const [status, setStatus] = useState(null);
+  const { control, formState, handleSubmit, reset, setError } = useForm({
+    defaultValues: {
+      endpoint
+    },
+    resolver: resolver(
+      yup.object({
+        endpoint: yup.string().label("Endpoint").required(),
+        file: yup.object({
+          data: yup.mixed().label("File").file(sizeLimits).required(),
+          extension: yup.string().label("Extension").required().oneOf(app.enums.file.extension.enum),
+          type: yup.string().label("Type").required().oneOf(app.enums.file.type.enum)
+        }).required()
+      })
+    )
+  });
+  useEffect(
+    () => {
+      successRef.current = onSuccess;
+    }
+  );
+  useEffect(
+    () => {
+      realRef.current = (progress == null ? void 0 : progress.bytesTotal) ? progress.bytesUploaded / progress.bytesTotal * 100 : 0;
+    },
+    [progress]
+  );
+  const active = Boolean(progress);
+  useEffect(
+    () => {
+      if (!active) {
+        setDisplayed(0);
+        return void 0;
+      }
+      const tick = () => setDisplayed((value) => trickle({
+        displayed: value,
+        real: realRef.current
+      }));
+      tick();
+      const interval = setInterval(tick, 200);
+      return () => clearInterval(interval);
+    },
+    [active]
+  );
+  const onProgress = useCallback(
+    ({ bytesTotal, bytesUploaded }) => {
+      setProgress({
+        bytesTotal,
+        bytesUploaded
+      });
+      if (bytesTotal && bytesUploaded >= bytesTotal) {
+        setStatus("completing");
+      }
+    },
+    []
+  );
+  const onSettle = useCallback(
+    () => {
+      setProgress(null);
+      setRecovered(null);
+      setStatus(null);
+      reset();
+    },
+    [reset]
+  );
+  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);
+      };
+      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);
+        releaseUploader();
+      };
+    },
+    [endpoint, onProgress, onSettle, setError, type]
+  );
+  const onCancel = 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 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) < gigabyte;
+  const format = (value) => megabytes ? bytesToMB(value) : bytesToGB(value);
+  const current = formatNumber(format((progress == null ? void 0 : progress.bytesUploaded) || 0), 2);
+  const label = status === "completing" ? "Finishing upload" : "Uploading";
+  const limit = formatNumber(format((progress == null ? void 0 : progress.bytesTotal) || 0), 2);
+  const percentage = displayed;
+  const unit = megabytes ? "MB" : "GB";
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: () => {
+        }
+      },
+      children: [
+        busy && !progress && /* @__PURE__ */ jsx(
+          Loader,
+          {
+            ...{
+              className: "bg-white z-20"
+            },
+            children: "Uploading..."
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          CardTask,
+          {
+            ...{
+              message: error,
+              type: "error"
+            }
+          }
+        ),
+        recovered && /* @__PURE__ */ jsx(
+          CardTask,
+          {
+            ...{
+              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__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "space-y-3"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Progress,
+                {
+                  ...{
+                    current,
+                    label,
+                    limit,
+                    percentage,
+                    unit
+                  }
+                }
+              ),
+              status === "uploading" && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...{
+                    inline: true,
+                    onClick: onCancel,
+                    variant: "link"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      ...{
+                        className: "text-xs underline md:text-sm"
+                      },
+                      children: "Cancel upload"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Fieldset,
+          {
+            ...{
+              disabled: busy
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "file",
+                    render: ({ field: { value, onChange } }) => {
+                      const onFile = (file, name = "") => {
+                        if (!file) return;
+                        const { extension, type: type2 } = 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__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            input: /* @__PURE__ */ 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__ */ jsx(
+                                    Upload,
+                                    {
+                                      ...{
+                                        // 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__ */ jsxs(
+                                    "span",
+                                    {
+                                      ...{
+                                        className: "pointer-events-none"
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            ...{
+                                              className: "font-semibold"
+                                            },
+                                            children: "Drag a file here"
+                                          }
+                                        ),
+                                        " or click to browse"
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    "input",
+                                    {
+                                      ...{
+                                        accept: "." + 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__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: "text-xs space-y-2 md:text-sm"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      CardDataItem,
+                      {
+                        ...{
+                          className: "flex-col md:flex-row",
+                          classNameSlotLeft: "md:w-1/2",
+                          label: "Accepted formats",
+                          value: "." + fileTypes(type).join(", .")
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      CardDataItem,
+                      {
+                        ...{
+                          className: "flex-col md:flex-row",
+                          classNameSlotLeft: "md:w-1/2",
+                          label: "Accepted sizes",
+                          value: fileSizes(type, sizeLimits).join(", ")
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var form_file_upload_default = FormFileUpload;
+export {
+  form_file_upload_default as default
+};