formanitor 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -90,6 +90,7 @@ function validateField(value, field) {
 function validateForm(values, fields) {
   const errors = {};
   for (const [key, field] of Object.entries(fields)) {
+    if (field.type === "static_text") continue;
     const error = validateField(values[key], field);
     if (error) {
       errors[key] = error;
@@ -237,6 +238,7 @@ var FormStore = class {
   initializeDefaults() {
     const values = {};
     this.schema.fields.forEach((field) => {
+      if (field.type === "static_text") return;
       if (field.defaultValue !== void 0) {
         values[field.id] = field.defaultValue;
       } else {
@@ -344,13 +346,20 @@ var FormStore = class {
   serializeValuesForSubmission(values) {
     const result = { ...values };
     this.schema.fields.forEach((field) => {
+      if (field.type === "static_text") {
+        delete result[field.id];
+        return;
+      }
       if (field.type === "image_upload" || field.type === "signature") {
         const raw = values[field.id];
         if (raw !== void 0 && raw !== null && raw !== "") {
-          result[field.id] = {
-            _type: "s3_key",
-            value: raw
-          };
+          const key = typeof raw === "string" ? raw : raw.s3_key || raw.value || null;
+          if (key && typeof key === "string") {
+            result[field.id] = {
+              _type: "s3_key",
+              value: key
+            };
+          }
         }
       }
     });
@@ -595,15 +604,17 @@ var Label = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @
 ));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
 var Textarea = React11__namespace.forwardRef(
-  ({ className, ...props }, ref) => {
+  ({ className, height, style, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
         className: cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          height == null && "min-h-[80px]",
           className
         ),
         ref,
+        style: height != null ? { ...style, height: `${height}px` } : style,
         ...props
       }
     );
@@ -616,6 +627,8 @@ var TextWidget = ({ fieldId }) => {
   const showError = !!error && (touched || state.submitAttempted);
   if (!fieldDef) return null;
   const Component = fieldDef.type === "textarea" || fieldDef.type === "richtext" ? Textarea : Input;
+  const isTextarea = fieldDef.type === "textarea" || fieldDef.type === "richtext";
+  const height = isTextarea && "height" in fieldDef ? fieldDef.height : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: fieldId, children: [
       fieldDef.label,
@@ -631,7 +644,8 @@ var TextWidget = ({ fieldId }) => {
         onBlur: setTouched,
         disabled,
         type: fieldDef.type === "number" ? "number" : "text",
-        className: showError ? "border-red-500" : ""
+        className: showError ? "border-red-500" : "",
+        ...isTextarea && { height }
       }
     ),
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
@@ -1528,8 +1542,15 @@ var smoothPoint = (prev, curr, smoothing = 0.75) => {
     y: prev.y * smoothing + curr.y * (1 - smoothing)
   };
 };
+function extractDisplayUrl(value) {
+  if (!value || typeof value !== "object") return null;
+  if (typeof value.presigned_url === "string" && value.presigned_url) {
+    return value.presigned_url;
+  }
+  return null;
+}
 var SignatureUploadWidget = ({ fieldId }) => {
-  const { fieldDef, setValue, setTouched, error, disabled, touched } = useField(fieldId);
+  const { fieldDef, setValue, setTouched, error, disabled, touched, value } = useField(fieldId);
   const store = useFormStore();
   const { state } = useForm();
   const canvasRef = React11.useRef(null);
@@ -1538,13 +1559,14 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const lastTimeRef = React11.useRef(null);
   const lastWidthRef = React11.useRef(2);
   const [isDrawing, setIsDrawing] = React11.useState(false);
-  const [hasSignature, setHasSignature] = React11.useState(false);
+  const [hasDrawing, setHasDrawing] = React11.useState(false);
   const [isUploading, setIsUploading] = React11.useState(false);
+  const [isConfirmed, setIsConfirmed] = React11.useState(false);
   const showError = !!error && (touched || state.submitAttempted);
-  if (!fieldDef) return null;
-  const uploadHandler = store.getUploadHandler();
-  if (!uploadHandler) return null;
+  const displayUrl = React11.useMemo(() => extractDisplayUrl(value), [value]);
+  const showPreview = displayUrl !== null;
   React11.useEffect(() => {
+    if (showPreview) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -1562,7 +1584,9 @@ var SignatureUploadWidget = ({ fieldId }) => {
     ctx.strokeStyle = "#000";
     ctx.fillStyle = "#fff";
     ctx.fillRect(0, 0, width, height);
-  }, []);
+  }, [showPreview]);
+  const uploadHandler = store.getUploadHandler();
+  if (!fieldDef || !uploadHandler) return null;
   const getPoint = (event) => {
     const canvas = canvasRef.current;
     const rect = canvas.getBoundingClientRect();
@@ -1575,6 +1599,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const startDrawing = (event) => {
     if (disabled) return;
     setIsDrawing(true);
+    setIsConfirmed(false);
     setTouched();
     const ctx = canvasRef.current?.getContext("2d");
     if (!ctx) return;
@@ -1616,23 +1641,31 @@ var SignatureUploadWidget = ({ fieldId }) => {
     lastPointRef.current = smoothed;
     lastTimeRef.current = now;
     lastWidthRef.current = width;
-    setHasSignature(true);
+    setHasDrawing(true);
   };
   const stopDrawing = () => {
     setIsDrawing(false);
     lastPointRef.current = null;
     lastTimeRef.current = null;
   };
-  const clearCanvas = () => {
+  const clearSignature = () => {
+    if (showPreview) {
+      setValue(null);
+      setTouched();
+      return;
+    }
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
-    if (!canvas || !ctx) return;
-    ctx.fillStyle = "#fff";
-    ctx.fillRect(0, 0, 400, 200);
+    if (canvas && ctx) {
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, 400, 200);
+    }
     pathRef.current = "";
     lastPointRef.current = null;
-    setHasSignature(false);
+    setHasDrawing(false);
+    setIsConfirmed(false);
     setValue(null);
+    setTouched();
   };
   const generateSVG = () => `
 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
@@ -1645,7 +1678,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
         fill="none"/>
 </svg>`.trim();
   const confirmSignature = async () => {
-    if (!hasSignature) return;
+    if (!hasDrawing) return;
     setIsUploading(true);
     setTouched();
     try {
@@ -1654,55 +1687,95 @@ var SignatureUploadWidget = ({ fieldId }) => {
       const filename = `signature_${Date.now()}.svg`;
       const key = await uploadHandler(blob, filename);
       setValue(key);
+      setIsConfirmed(true);
+      setHasDrawing(false);
+    } catch (err) {
+      console.error("[SignatureUpload] Upload failed:", err);
     } finally {
       setIsUploading(false);
     }
   };
+  const canClear = showPreview ? !disabled : hasDrawing || isConfirmed;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
       fieldDef.label,
       fieldDef.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "canvas",
-        {
-          ref: canvasRef,
-          className: "border border-gray-200 rounded cursor-crosshair touch-none",
-          onMouseDown: startDrawing,
-          onMouseMove: draw,
-          onMouseUp: stopDrawing,
-          onMouseLeave: stopDrawing,
-          onTouchStart: startDrawing,
-          onTouchMove: draw,
-          onTouchEnd: stopDrawing
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          size: "icon",
-          variant: "ghost",
-          className: "absolute top-2 left-2 bg-white/80",
-          onClick: clearCanvas,
-          disabled: !hasSignature,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        type: "button",
-        onClick: confirmSignature,
-        disabled: !hasSignature || isUploading,
-        className: "text-xs",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-1" }),
-          isUploading ? "Saving\u2026" : "Confirm"
-        ]
-      }
+    showPreview ? (
+      /* ── Preview mode: existing signature from backend ── */
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-gray-200 rounded bg-white flex items-center justify-start p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: displayUrl,
+            alt: "Signature",
+            className: "object-contain max-w-full",
+            style: { width: 400, height: 200 }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            className: "absolute top-2 left-2 bg-white/80 hover:bg-red-50",
+            onClick: clearSignature,
+            disabled: !canClear,
+            title: "Delete signature and draw a new one",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ) : (
+      /* ── Canvas mode: drawing / confirmed ── */
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              className: `border rounded touch-none ${isConfirmed ? "border-green-300 cursor-default" : "border-gray-200 cursor-crosshair"}`,
+              onMouseDown: startDrawing,
+              onMouseMove: draw,
+              onMouseUp: stopDrawing,
+              onMouseLeave: stopDrawing,
+              onTouchStart: startDrawing,
+              onTouchMove: draw,
+              onTouchEnd: stopDrawing
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon",
+              variant: "ghost",
+              className: "absolute top-2 left-2 bg-white/80",
+              onClick: clearSignature,
+              disabled: !canClear,
+              title: isConfirmed ? "Clear saved signature" : "Clear canvas",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        isConfirmed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Signature saved" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            type: "button",
+            onClick: confirmSignature,
+            disabled: !hasDrawing || isUploading,
+            className: "text-xs",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-1" }),
+              isUploading ? "Saving\u2026" : "Confirm"
+            ]
+          }
+        )
+      ] })
     ),
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
@@ -2150,6 +2223,16 @@ var FieldRenderer = ({ fieldId }) => {
       return /* @__PURE__ */ jsxRuntime.jsx(SignatureUploadWidget, { fieldId });
     case "editable_table":
       return /* @__PURE__ */ jsxRuntime.jsx(EditableTableWidget, { fieldId });
+    case "static_text": {
+      const def = fieldDef;
+      const size = def.size ?? "regular";
+      const labelClass = size === "large" ? "text-base" : "text-sm";
+      const descClass = size === "large" ? "text-sm" : "text-xs";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${labelClass} text-muted-foreground`, children: [
+        def.label,
+        def.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-1 ${descClass} opacity-90`, children: def.description })
+      ] });
+    }
     default:
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-500", children: [
         "Unknown field type: ",
@@ -2250,7 +2333,7 @@ var ReadOnlyText = ({ fieldDef, value }) => {
         className: "prose prose-sm max-w-none text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50",
         dangerouslySetInnerHTML: { __html: displayValue }
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] flex items-center", children: displayValue || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) })
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] whitespace-pre-wrap", children: displayValue || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) })
   ] });
 };
 var ReadOnlySelect = ({ fieldDef, value }) => {
@@ -2563,6 +2646,16 @@ var ReadOnlyFieldRenderer = ({ fieldDef, value }) => {
       return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlySignature, { fieldDef, value });
     case "editable_table":
       return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyTable, { fieldDef, value });
+    case "static_text": {
+      const def = fieldDef;
+      const size = def.size ?? "regular";
+      const labelClass = size === "large" ? "text-base" : "text-sm";
+      const descClass = size === "large" ? "text-sm" : "text-xs";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${labelClass} text-muted-foreground`, children: [
+        def.label,
+        def.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-1 ${descClass} opacity-90`, children: def.description })
+      ] });
+    }
     default:
       return /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyText, { fieldDef, value });
   }