formanitor 0.0.31 → 0.0.32

package/dist/index.cjs

@@ -458,7 +458,7 @@ var FormStore = class {
         result[field.id] = parts.length > 0 ? parts.join("\n\n") : null;
         return;
       }
-      if (field.type === "image_upload" || field.type === "signature") {
+      if (field.type === "image_upload" || field.type === "media_upload" || field.type === "signature") {
         const raw = values[field.id];
         if (raw !== void 0 && raw !== null && raw !== "") {
           const key = typeof raw === "string" ? raw : raw.s3_key || raw.value || null;
@@ -2186,6 +2186,162 @@ var ImageUploadWidget = ({ fieldId }) => {
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
 };
+function urlLooksLikePdf(url) {
+  return /\.pdf($|\?)/i.test(url) || url.toLowerCase().includes("application/pdf");
+}
+function isAcceptedMediaFile(file) {
+  if (file.type.startsWith("image/")) return true;
+  if (file.type === "application/pdf") return true;
+  if (file.name.toLowerCase().endsWith(".pdf")) return true;
+  return false;
+}
+var MediaUploadWidget = ({ fieldId }) => {
+  const { fieldDef, value, setValue, setTouched, error, disabled, touched } = useField(fieldId);
+  const store = useFormStore();
+  const { state } = useForm();
+  const [isUploading, setIsUploading] = React15.useState(false);
+  const [preview, setPreview] = React15.useState(null);
+  const [previewIsPdf, setPreviewIsPdf] = React15.useState(false);
+  const fileInputRef = React15.useRef(null);
+  const pendingPreviewKindRef = React15.useRef(null);
+  const showError = !!error && (touched || state.submitAttempted);
+  if (!fieldDef) return null;
+  const uploadHandler = store.getUploadHandler();
+  if (!uploadHandler) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: fieldId, children: [
+        fieldDef.label,
+        fieldDef.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-2 border-red-300 rounded-lg p-4 bg-red-50", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600", children: "Upload handler not configured. Please provide an onUpload function in FormProvider config." }) })
+    ] });
+  }
+  React15__namespace.default.useEffect(() => {
+    if (value && typeof value === "string") {
+      setPreview(value);
+      if (pendingPreviewKindRef.current) {
+        setPreviewIsPdf(pendingPreviewKindRef.current === "pdf");
+        pendingPreviewKindRef.current = null;
+      } else {
+        setPreviewIsPdf(urlLooksLikePdf(value));
+      }
+    } else {
+      setPreview(null);
+      setPreviewIsPdf(false);
+    }
+  }, [value]);
+  const handleFileSelect = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (!isAcceptedMediaFile(file)) {
+      alert("Please select an image or PDF file");
+      return;
+    }
+    const maxSize = 10 * 1024 * 1024;
+    if (file.size > maxSize) {
+      alert("File size must be less than 10MB");
+      return;
+    }
+    const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
+    setIsUploading(true);
+    setTouched();
+    store.incrementPendingUploads();
+    try {
+      const previewUrl = URL.createObjectURL(file);
+      setPreview(previewUrl);
+      setPreviewIsPdf(isPdf);
+      const s3Key = await uploadHandler(file, file.name);
+      pendingPreviewKindRef.current = isPdf ? "pdf" : "image";
+      setValue(s3Key);
+    } catch (error2) {
+      console.error("Upload failed:", error2);
+      const errorMessage = error2 instanceof Error ? error2.message : "Upload failed. Please try again.";
+      alert(errorMessage);
+      setPreview(null);
+      setPreviewIsPdf(false);
+    } finally {
+      setIsUploading(false);
+      store.decrementPendingUploads();
+    }
+  };
+  const handleRemove = () => {
+    pendingPreviewKindRef.current = null;
+    setValue(null);
+    setPreview(null);
+    setPreviewIsPdf(false);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setTouched();
+  };
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: fieldId, children: [
+      fieldDef.label,
+      fieldDef.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-2 border-dashed border-gray-300 rounded-lg p-4", children: preview ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      previewIsPdf ? /* @__PURE__ */ jsxRuntime.jsx(
+        "iframe",
+        {
+          src: preview,
+          title: "Uploaded PDF",
+          className: "w-full max-h-48 min-h-36 rounded-lg border border-gray-200 bg-white"
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: preview,
+          alt: "Uploaded image",
+          className: "max-w-full max-h-48 mx-auto rounded-lg"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "destructive",
+          size: "sm",
+          className: "absolute top-2 right-2",
+          onClick: handleRemove,
+          disabled: disabled || isUploading,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "h-12 w-12 mx-auto text-gray-400 mb-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mb-4", children: "Click to upload an image or PDF, or drag and drop" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: handleUploadClick,
+          disabled: disabled || isUploading,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-4 w-4 mr-2" }),
+            isUploading ? "Uploading..." : "Choose Image"
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: "image/*,application/pdf",
+        onChange: handleFileSelect,
+        className: "hidden",
+        disabled: disabled || isUploading
+      }
+    ),
+    fieldDef.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: fieldDef.description }),
+    showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
+  ] });
+};
 var distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
 var smoothPoint = (prev, curr, smoothing = 0.75) => {
   if (!prev) return curr;
@@ -7450,6 +7606,8 @@ function renderWidget(fieldId, fieldDef) {
       return /* @__PURE__ */ jsxRuntime.jsx(RepeatableWidget, { fieldId });
     case "image_upload":
       return /* @__PURE__ */ jsxRuntime.jsx(ImageUploadWidget, { fieldId });
+    case "media_upload":
+      return /* @__PURE__ */ jsxRuntime.jsx(MediaUploadWidget, { fieldId });
     case "signature":
       return /* @__PURE__ */ jsxRuntime.jsx(SignatureUploadWidget, { fieldId });
     case "editable_table":
@@ -7857,6 +8015,55 @@ var ReadOnlyImageUpload = ({
     fieldDef.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: fieldDef.description })
   ] });
 };
+function urlLooksLikePdf2(url) {
+  return /\.pdf($|\?)/i.test(url) || url.toLowerCase().includes("application/pdf");
+}
+var ReadOnlyMediaUpload = ({
+  fieldDef,
+  value
+}) => {
+  const [useIframe, setUseIframe] = React15.useState(false);
+  let url = null;
+  if (typeof value === "string") {
+    url = value;
+  } else if (value && typeof value === "object") {
+    const typed = value;
+    url = typed.presigned_url || typed.value || typed.s3_key || null;
+  }
+  React15.useEffect(() => {
+    setUseIframe(false);
+  }, [url]);
+  const showAsPdf = url && (urlLooksLikePdf2(url) || useIframe);
+  if (!url) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Label, { children: fieldDef.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-gray-200 rounded-lg p-4 bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "h-8 w-8 mx-auto text-gray-400 mb-2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No file uploaded" })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label, { children: fieldDef.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-gray-200 rounded-lg p-4 bg-white", children: showAsPdf ? /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        src: url,
+        title: `${fieldDef.label} PDF`,
+        className: "w-full max-h-48 min-h-36 rounded-lg border border-gray-200 bg-white"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: url,
+        alt: `${fieldDef.label} upload`,
+        className: "max-w-full max-h-48 mx-auto rounded-lg",
+        onError: () => setUseIframe(true)
+      }
+    ) }),
+    fieldDef.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: fieldDef.description })
+  ] });
+};
 var ReadOnlySignature = ({
   fieldDef,
   value
@@ -8058,6 +8265,8 @@ var ReadOnlyFieldRenderer = ({ fieldDef, value }) => {
       return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyRepeatable, { fieldDef, value });
     case "image_upload":
       return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyImageUpload, { fieldDef, value });
+    case "media_upload":
+      return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyMediaUpload, { fieldDef, value });
     case "signature":
       return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlySignature, { fieldDef, value });
     case "editable_table":
@@ -8275,8 +8484,10 @@ exports.FormControls = FormControls;
 exports.FormProvider = FormProvider;
 exports.FormStore = FormStore;
 exports.ImageUploadWidget = ImageUploadWidget;
+exports.MediaUploadWidget = MediaUploadWidget;
 exports.ReadOnlyForm = ReadOnlyForm;
 exports.ReadOnlyImageUpload = ReadOnlyImageUpload;
+exports.ReadOnlyMediaUpload = ReadOnlyMediaUpload;
 exports.ReadOnlySignature = ReadOnlySignature;
 exports.ReadOnlyTable = ReadOnlyTable;
 exports.RichTextWidget = RichTextWidget;