formanitor 0.0.3 → 0.0.5

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,6 +346,10 @@ 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 !== "") {
@@ -595,15 +601,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 +624,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 +641,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 })
@@ -2150,6 +2161,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: ",
@@ -2211,7 +2232,17 @@ var DynamicForm = () => {
     ] }),
     schema.layout.map((node) => {
       if (node.type === "section") {
-        return /* @__PURE__ */ jsxRuntime.jsx(Section, { title: node.title, children: node.children.map((fieldId) => /* @__PURE__ */ jsxRuntime.jsx(FieldRenderer, { fieldId }, fieldId)) }, node.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(Section, { title: node.title, children: node.children.map(
+          (child, index) => typeof child === "string" ? /* @__PURE__ */ jsxRuntime.jsx(FieldRenderer, { fieldId: child }, child) : child.type === "column_layout" ? /* @__PURE__ */ jsxRuntime.jsx(
+            ColumnLayout,
+            {
+              columns: child.columns,
+              label: child.label,
+              children: child.children.map((fieldId) => /* @__PURE__ */ jsxRuntime.jsx(FieldRenderer, { fieldId }, fieldId))
+            },
+            child.id
+          ) : /* @__PURE__ */ jsxRuntime.jsx(React11__namespace.default.Fragment, {}, child.id ?? index)
+        ) }, node.id);
       }
       if (node.type === "column_layout") {
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2553,6 +2584,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 });
   }
@@ -2582,19 +2623,47 @@ var ReadOnlyForm = ({ schema, submission }) => {
     ] }),
     schema.layout.map((node) => {
       if (node.type === "section") {
-        const visibleFields = node.children.map((fieldId) => {
-          const fieldDef = fieldMap.get(fieldId);
-          return fieldDef ? { fieldId, fieldDef } : null;
-        }).filter((f) => f !== null);
-        if (visibleFields.length === 0) return null;
-        return /* @__PURE__ */ jsxRuntime.jsx(Section, { title: node.title, children: visibleFields.map(({ fieldId, fieldDef }) => /* @__PURE__ */ jsxRuntime.jsx(
-          ReadOnlyFieldRenderer,
-          {
-            fieldDef,
-            value: formData[fieldId]
-          },
-          fieldId
-        )) }, node.id);
+        const renderSectionChild = (child, index) => {
+          if (typeof child === "string") {
+            const fieldDef = fieldMap.get(child);
+            return fieldDef ? /* @__PURE__ */ jsxRuntime.jsx(
+              ReadOnlyFieldRenderer,
+              {
+                fieldDef,
+                value: formData[child]
+              },
+              child
+            ) : null;
+          }
+          if (child.type === "column_layout" && child.children) {
+            const visibleFields = child.children.map((fieldId) => {
+              const fieldDef = fieldMap.get(fieldId);
+              return fieldDef ? { fieldId, fieldDef } : null;
+            }).filter((f) => f !== null);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              ColumnLayout,
+              {
+                columns: child.columns ?? 1,
+                label: child.label,
+                children: visibleFields.map(({ fieldId, fieldDef }) => /* @__PURE__ */ jsxRuntime.jsx(
+                  ReadOnlyFieldRenderer,
+                  {
+                    fieldDef,
+                    value: formData[fieldId]
+                  },
+                  fieldId
+                ))
+              },
+              child.id
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(React11__namespace.default.Fragment, {}, child.id ?? index);
+        };
+        const hasContent = node.children.some(
+          (child) => typeof child === "string" ? fieldMap.has(child) : child.type === "column_layout" && child.children?.some((id) => fieldMap.has(id))
+        );
+        if (!hasContent) return null;
+        return /* @__PURE__ */ jsxRuntime.jsx(Section, { title: node.title, children: node.children.map((child, index) => renderSectionChild(child, index)) }, node.id);
       }
       if (node.type === "column_layout") {
         const visibleFields = node.children.map((fieldId) => {