@fogpipe/forma-react 0.9.0 → 0.10.1

package/dist/index.d.ts

@@ -273,6 +273,11 @@ interface FieldWrapperProps {
     errors: FieldError[];
     touched: boolean;
     required: boolean;
+    /**
+     * Whether to show the required indicator in the UI.
+     * False for boolean fields since false is a valid answer.
+     */
+    showRequiredIndicator: boolean;
     visible: boolean;
 }
 /**
@@ -362,8 +367,13 @@ interface GetFieldPropsResult {
     visible: boolean;
     /** Whether field is enabled (not disabled) */
     enabled: boolean;
-    /** Whether field is required */
+    /** Whether field is required (for validation) */
     required: boolean;
+    /**
+     * Whether to show the required indicator in the UI.
+     * False for boolean fields since false is a valid answer.
+     */
+    showRequiredIndicator: boolean;
     /** Whether field has been touched */
     touched: boolean;
     /** Validation errors for this field */

package/dist/index.js

@@ -50,6 +50,18 @@ function formReducer(state, action) {
       return state;
   }
 }
+function getDefaultBooleanValues(spec) {
+  var _a;
+  const defaults = {};
+  for (const fieldPath of spec.fieldOrder) {
+    const schemaProperty = (_a = spec.schema.properties) == null ? void 0 : _a[fieldPath];
+    const fieldDef = spec.fields[fieldPath];
+    if ((schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean") {
+      defaults[fieldPath] = false;
+    }
+  }
+  return defaults;
+}
 function useForma(options) {
   const { spec: inputSpec, initialData = {}, onSubmit, onChange, validateOn = "blur", referenceData, validationDebounceMs = 0 } = options;
   const spec = useMemo(() => {
@@ -63,7 +75,8 @@ function useForma(options) {
     };
   }, [inputSpec, referenceData]);
   const [state, dispatch] = useReducer(formReducer, {
-    data: initialData,
+    data: { ...getDefaultBooleanValues(spec), ...initialData },
+    // Boolean defaults merged UNDER initialData
     touched: {},
     isSubmitting: false,
     isSubmitted: false,
@@ -305,23 +318,24 @@ function useForma(options) {
     return fieldHandlers.current.get(path);
   }, [setValueAtPath, setFieldTouched]);
   const getFieldProps = useCallback((path) => {
+    var _a;
     const fieldDef = spec.fields[path];
     const handlers = getFieldHandlers(path);
     let fieldType = (fieldDef == null ? void 0 : fieldDef.type) || "text";
     if (!fieldType || fieldType === "computed") {
-      const schemaProperty = spec.schema.properties[path];
-      if (schemaProperty) {
-        if (schemaProperty.type === "number") fieldType = "number";
-        else if (schemaProperty.type === "integer") fieldType = "integer";
-        else if (schemaProperty.type === "boolean") fieldType = "boolean";
-        else if (schemaProperty.type === "array") fieldType = "array";
-        else if (schemaProperty.type === "object") fieldType = "object";
-        else if ("enum" in schemaProperty && schemaProperty.enum) fieldType = "select";
-        else if ("format" in schemaProperty) {
-          if (schemaProperty.format === "date") fieldType = "date";
-          else if (schemaProperty.format === "date-time") fieldType = "datetime";
-          else if (schemaProperty.format === "email") fieldType = "email";
-          else if (schemaProperty.format === "uri") fieldType = "url";
+      const schemaProperty2 = spec.schema.properties[path];
+      if (schemaProperty2) {
+        if (schemaProperty2.type === "number") fieldType = "number";
+        else if (schemaProperty2.type === "integer") fieldType = "integer";
+        else if (schemaProperty2.type === "boolean") fieldType = "boolean";
+        else if (schemaProperty2.type === "array") fieldType = "array";
+        else if (schemaProperty2.type === "object") fieldType = "object";
+        else if ("enum" in schemaProperty2 && schemaProperty2.enum) fieldType = "select";
+        else if ("format" in schemaProperty2) {
+          if (schemaProperty2.format === "date") fieldType = "date";
+          else if (schemaProperty2.format === "date-time") fieldType = "datetime";
+          else if (schemaProperty2.format === "email") fieldType = "email";
+          else if (schemaProperty2.format === "uri") fieldType = "url";
         }
       }
     }
@@ -331,6 +345,10 @@ function useForma(options) {
     const displayedErrors = showErrors ? fieldErrors : [];
     const hasErrors = displayedErrors.length > 0;
     const isRequired = required[path] ?? false;
+    const schemaProperty = spec.schema.properties[path];
+    const isBooleanField = (schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean";
+    const hasValidationRules = (((_a = fieldDef == null ? void 0 : fieldDef.validations) == null ? void 0 : _a.length) ?? 0) > 0;
+    const showRequiredIndicator = isRequired && (!isBooleanField || hasValidationRules);
     return {
       name: path,
       value: getValueAtPath(path),
@@ -341,6 +359,7 @@ function useForma(options) {
       visible: visibility[path] !== false,
       enabled: enabled[path] !== false,
       required: isRequired,
+      showRequiredIndicator,
       touched: isTouched,
       errors: displayedErrors,
       onChange: handlers.onChange,
@@ -387,6 +406,8 @@ function useForma(options) {
         enabled: enabled[path] !== false,
         required: false,
         // TODO: Evaluate item field required
+        showRequiredIndicator: false,
+        // Item fields don't show required indicator
         touched: isTouched,
         errors: showErrors ? fieldErrors : [],
         onChange: handlers.onChange,
@@ -490,7 +511,7 @@ function DefaultLayout({ children, onSubmit, isSubmitting }) {
     }
   );
 }
-function DefaultFieldWrapper({ fieldPath, field, children, errors, required, visible }) {
+function DefaultFieldWrapper({ fieldPath, field, children, errors, showRequiredIndicator, visible }) {
   if (!visible) return null;
   const errorId = `${fieldPath}-error`;
   const descriptionId = field.description ? `${fieldPath}-description` : void 0;
@@ -498,8 +519,8 @@ function DefaultFieldWrapper({ fieldPath, field, children, errors, required, vis
   return /* @__PURE__ */ jsxs("div", { className: "field-wrapper", "data-field-path": fieldPath, children: [
     field.label && /* @__PURE__ */ jsxs("label", { htmlFor: fieldPath, children: [
       field.label,
-      required && /* @__PURE__ */ jsx("span", { className: "required", "aria-hidden": "true", children: "*" }),
-      required && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (required)" })
+      showRequiredIndicator && /* @__PURE__ */ jsx("span", { className: "required", "aria-hidden": "true", children: "*" }),
+      showRequiredIndicator && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (required)" })
     ] }),
     children,
     hasErrors && /* @__PURE__ */ jsx(
@@ -569,7 +590,6 @@ var FormRenderer = forwardRef(
       validateOn
     });
     const fieldRefs = useRef2(/* @__PURE__ */ new Map());
-    const arrayHelpersCache = useRef2(/* @__PURE__ */ new Map());
     const focusField = useCallback2((path) => {
       const element = fieldRefs.current.get(path);
       element == null ? void 0 : element.focus();
@@ -607,6 +627,7 @@ var FormRenderer = forwardRef(
       return spec.fieldOrder;
     }, [spec.pages, spec.fieldOrder, forma.wizard]);
     const renderField = useCallback2((fieldPath) => {
+      var _a;
       const fieldDef = spec.fields[fieldPath];
       if (!fieldDef) return null;
       const isVisible = forma.visibility[fieldPath] !== false;
@@ -623,6 +644,9 @@ var FormRenderer = forwardRef(
       const required = forma.required[fieldPath] ?? false;
       const disabled = forma.enabled[fieldPath] === false;
       const schemaProperty = spec.schema.properties[fieldPath];
+      const isBooleanField = (schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean";
+      const hasValidationRules = (((_a = fieldDef == null ? void 0 : fieldDef.validations) == null ? void 0 : _a.length) ?? 0) > 0;
+      const showRequiredIndicator = required && (!isBooleanField || hasValidationRules);
       const baseProps = {
         name: fieldPath,
         field: fieldDef,
@@ -660,82 +684,33 @@ var FormRenderer = forwardRef(
           options: fieldDef.options ?? []
         };
       } else if (fieldType === "array" && fieldDef.itemFields) {
-        const arrayValue = baseProps.value ?? [];
+        const arrayValue = Array.isArray(baseProps.value) ? baseProps.value : [];
         const minItems = fieldDef.minItems ?? 0;
         const maxItems = fieldDef.maxItems ?? Infinity;
         const itemFieldDefs = fieldDef.itemFields;
-        if (!arrayHelpersCache.current.has(fieldPath)) {
-          arrayHelpersCache.current.set(fieldPath, {
-            push: (item) => {
-              const currentArray = forma.data[fieldPath] ?? [];
-              const newItem = item ?? createDefaultItem(itemFieldDefs);
-              forma.setFieldValue(fieldPath, [...currentArray, newItem]);
-            },
-            insert: (index, item) => {
-              const currentArray = forma.data[fieldPath] ?? [];
-              const newArray = [...currentArray];
-              newArray.splice(index, 0, item);
-              forma.setFieldValue(fieldPath, newArray);
-            },
-            remove: (index) => {
-              const currentArray = forma.data[fieldPath] ?? [];
-              const newArray = [...currentArray];
-              newArray.splice(index, 1);
-              forma.setFieldValue(fieldPath, newArray);
-            },
-            move: (from, to) => {
-              const currentArray = forma.data[fieldPath] ?? [];
-              const newArray = [...currentArray];
-              const [item] = newArray.splice(from, 1);
-              newArray.splice(to, 0, item);
-              forma.setFieldValue(fieldPath, newArray);
-            },
-            swap: (indexA, indexB) => {
-              const currentArray = forma.data[fieldPath] ?? [];
-              const newArray = [...currentArray];
-              [newArray[indexA], newArray[indexB]] = [newArray[indexB], newArray[indexA]];
-              forma.setFieldValue(fieldPath, newArray);
-            }
-          });
-        }
-        const cachedHelpers = arrayHelpersCache.current.get(fieldPath);
+        const baseHelpers = forma.getArrayHelpers(fieldPath);
+        const pushWithDefault = (item) => {
+          const newItem = item ?? createDefaultItem(itemFieldDefs);
+          baseHelpers.push(newItem);
+        };
+        const getItemFieldPropsExtended = (index, fieldName) => {
+          const baseProps2 = baseHelpers.getItemFieldProps(index, fieldName);
+          const itemFieldDef = itemFieldDefs[fieldName];
+          return {
+            ...baseProps2,
+            itemIndex: index,
+            fieldName,
+            options: itemFieldDef == null ? void 0 : itemFieldDef.options
+          };
+        };
         const helpers = {
           items: arrayValue,
-          push: cachedHelpers.push,
-          insert: cachedHelpers.insert,
-          remove: cachedHelpers.remove,
-          move: cachedHelpers.move,
-          swap: cachedHelpers.swap,
-          getItemFieldProps: (index, fieldName) => {
-            var _a;
-            const itemFieldDef = itemFieldDefs[fieldName];
-            const itemPath = `${fieldPath}[${index}].${fieldName}`;
-            const itemValue = (_a = arrayValue[index]) == null ? void 0 : _a[fieldName];
-            return {
-              name: itemPath,
-              value: itemValue,
-              type: (itemFieldDef == null ? void 0 : itemFieldDef.type) ?? "text",
-              label: (itemFieldDef == null ? void 0 : itemFieldDef.label) ?? fieldName,
-              description: itemFieldDef == null ? void 0 : itemFieldDef.description,
-              placeholder: itemFieldDef == null ? void 0 : itemFieldDef.placeholder,
-              visible: true,
-              enabled: !disabled,
-              required: (itemFieldDef == null ? void 0 : itemFieldDef.requiredWhen) === "true",
-              touched: forma.touched[itemPath] ?? false,
-              errors: forma.errors.filter((e) => e.field === itemPath),
-              onChange: (value) => {
-                const currentArray = forma.data[fieldPath] ?? [];
-                const newArray = [...currentArray];
-                const item = newArray[index] ?? {};
-                newArray[index] = { ...item, [fieldName]: value };
-                forma.setFieldValue(fieldPath, newArray);
-              },
-              onBlur: () => forma.setFieldTouched(itemPath),
-              itemIndex: index,
-              fieldName,
-              options: itemFieldDef == null ? void 0 : itemFieldDef.options
-            };
-          },
+          push: pushWithDefault,
+          insert: baseHelpers.insert,
+          remove: baseHelpers.remove,
+          move: baseHelpers.move,
+          swap: baseHelpers.swap,
+          getItemFieldProps: getItemFieldPropsExtended,
           minItems,
           maxItems,
           canAdd: arrayValue.length < maxItems,
@@ -768,6 +743,7 @@ var FormRenderer = forwardRef(
           errors,
           touched,
           required,
+          showRequiredIndicator,
           visible: isVisible,
           children: React.createElement(Component, componentProps)
         },