@connect-soft/form-generator 1.1.0-alpha7 → 1.1.0-alpha9

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import React, { createElement, Fragment, memo, useCallback, useRef, useMemo, useImperativeHandle } from 'react';
+import React, { createElement, Fragment, memo, useCallback, useContext, createContext, useRef, useMemo, useImperativeHandle } from 'react';
 import * as n$1 from 'zod/v4/core';
 import { c } from 'react/compiler-runtime';
 import { z } from 'zod';
@@ -2775,6 +2775,49 @@ function t(r,e){try{var o=r();}catch(r){return e(r)}return o&&o.then?o.then(void
 function isArrayField(field) {
   return field.type === 'array' && 'fields' in field;
 }
+function createField(field) {
+  return field;
+}
+function createArrayField(field) {
+  return {
+    ...field,
+    type: 'array'
+  };
+}
+function strictFields(fields) {
+  return fields;
+}
+function validateFieldType(type, registeredTypes) {
+  if (!registeredTypes.includes(type) && type !== 'array') {
+    throw new Error(`Unregistered field type: "${type}". ` + `Registered types: ${registeredTypes.join(', ')}. ` + `Use registerField("${type}", YourComponent) to register it.`);
+  }
+  return type;
+}
+function validateFieldTypes(fields, registeredTypes, options = {}) {
+  const {
+    throwOnError = false,
+    warn = true
+  } = options;
+  const invalidTypes = [];
+  const checkField = field => {
+    if (field.type === 'array' && 'fields' in field) {
+      field.fields.forEach(checkField);
+    } else if (!registeredTypes.includes(field.type) && field.type !== 'array') {
+      invalidTypes.push(field.type);
+    }
+  };
+  fields.forEach(checkField);
+  if (invalidTypes.length > 0) {
+    const uniqueInvalid = [...new Set(invalidTypes)];
+    const message = `Unregistered field type(s): ${uniqueInvalid.map(t => `"${t}"`).join(', ')}. ` + `Registered types: ${registeredTypes.join(', ')}. ` + 'Register custom types with registerField() or use module augmentation for TypeScript support.';
+    if (throwOnError) {
+      throw new Error(message);
+    } else if (warn && typeof console !== 'undefined') {
+      console.warn(`[FormGenerator] ${message}`);
+    }
+  }
+  return fields;
+}
 
 const fieldRegistry = new Map();
 const componentRegistry = {};
@@ -2937,27 +2980,15 @@ function createDefaultFieldComponent(type) {
   };
   return FallbackComponent;
 }
-function registerField(type, component, options = {}, config = {}) {
-  const {
-    override = true
-  } = config;
-  const exists = fieldRegistry.has(type);
-  if (override === 'only' && !exists) return;
-  if (override === false && exists) return;
+function registerField(type, component, options = {}) {
   fieldRegistry.set(type, {
     component,
     options
   });
 }
-function registerFields(fields, config = {}) {
-  const {
-    override = true
-  } = config;
+function registerFields(fields) {
   Object.entries(fields).forEach(([type, definition]) => {
     var _a;
-    const exists = fieldRegistry.has(type);
-    if (override === 'only' && !exists) return;
-    if (override === false && exists) return;
     if (typeof definition === 'function') {
       fieldRegistry.set(type, {
         component: definition,
@@ -2992,24 +3023,12 @@ function unregisterField(type) {
 function getRegisteredFieldTypes() {
   return Array.from(fieldRegistry.keys());
 }
-function registerFormComponents(components, config = {}) {
-  const {
-    override = true
-  } = config;
+function registerFormComponents(components) {
   Object.keys(components).forEach(key => {
-    const exists = key in componentRegistry;
-    if (override === 'only' && !exists) return;
-    if (override === false && exists) return;
     componentRegistry[key] = components[key];
   });
 }
-function registerFormComponent(name, component, config = {}) {
-  const {
-    override = true
-  } = config;
-  const exists = name in componentRegistry;
-  if (override === 'only' && !exists) return;
-  if (override === false && exists) return;
+function registerFormComponent(name, component) {
   componentRegistry[name] = component;
 }
 function getFormComponent(name) {
@@ -3368,6 +3387,167 @@ function createTemplateFields(fieldEntries) {
   return new Proxy({}, handler);
 }
 
+const FieldsContext = /*#__PURE__*/createContext(null);
+function FieldsProvider(t0) {
+  const $ = c(9);
+  const {
+    children,
+    fields,
+    namePrefix
+  } = t0;
+  let map;
+  if ($[0] !== fields || $[1] !== namePrefix) {
+    map = new Map();
+    const addFields = (items, prefix) => {
+      items.forEach(item => {
+        if ("fields" in item && Array.isArray(item.fields)) {
+          const arrayPrefix = prefix ? `${prefix}.${item.name}` : item.name;
+          addFields(item.fields, arrayPrefix);
+        } else {
+          const fieldName = prefix ? `${prefix}.${item.name}` : item.name;
+          map.set(fieldName, item);
+          if (prefix) {
+            map.set(item.name, item);
+          }
+        }
+      });
+    };
+    addFields(fields, namePrefix);
+    $[0] = fields;
+    $[1] = namePrefix;
+    $[2] = map;
+  } else {
+    map = $[2];
+  }
+  const fieldsMap = map;
+  let t1;
+  if ($[3] !== fieldsMap || $[4] !== namePrefix) {
+    t1 = {
+      fields: fieldsMap,
+      namePrefix
+    };
+    $[3] = fieldsMap;
+    $[4] = namePrefix;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const value = t1;
+  let t2;
+  if ($[6] !== children || $[7] !== value) {
+    t2 = jsx(FieldsContext.Provider, {
+      value,
+      children
+    });
+    $[6] = children;
+    $[7] = value;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+function useFieldProps(name) {
+  const $ = c(23);
+  const context = useContext(FieldsContext);
+  const form = useFormContext();
+  if (!context) {
+    throw new Error("useFieldProps must be used within FormGenerator or FieldsProvider");
+  }
+  if (!form) {
+    throw new Error("useFieldProps must be used within a FormProvider context");
+  }
+  const {
+    fields,
+    namePrefix
+  } = context;
+  const fullName = namePrefix ? `${namePrefix}.${name}` : name;
+  let t0;
+  if ($[0] !== fields || $[1] !== fullName || $[2] !== name) {
+    t0 = fields.get(fullName) || fields.get(name);
+    $[0] = fields;
+    $[1] = fullName;
+    $[2] = name;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const field = t0;
+  if (!field) {
+    throw new Error(`Field "${name}" not found in form fields. ` + `Available fields: ${Array.from(fields.keys()).join(", ")}`);
+  }
+  let t1;
+  if ($[4] !== form.control || $[5] !== fullName) {
+    t1 = {
+      control: form.control,
+      name: fullName
+    };
+    $[4] = form.control;
+    $[5] = fullName;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const {
+    field: controllerField,
+    fieldState
+  } = useController(t1);
+  let t2;
+  if ($[7] !== field || $[8] !== fullName) {
+    t2 = {
+      ...field,
+      name: fullName
+    };
+    $[7] = field;
+    $[8] = fullName;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== fieldState.error || $[11] !== fieldState.invalid || $[12] !== fieldState.isDirty || $[13] !== fieldState.isTouched) {
+    t3 = {
+      invalid: fieldState.invalid,
+      error: fieldState.error,
+      isDirty: fieldState.isDirty,
+      isTouched: fieldState.isTouched
+    };
+    $[10] = fieldState.error;
+    $[11] = fieldState.invalid;
+    $[12] = fieldState.isDirty;
+    $[13] = fieldState.isTouched;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== controllerField.name || $[16] !== controllerField.onBlur || $[17] !== controllerField.onChange || $[18] !== controllerField.ref || $[19] !== controllerField.value || $[20] !== t2 || $[21] !== t3) {
+    t4 = {
+      name: controllerField.name,
+      value: controllerField.value,
+      onChange: controllerField.onChange,
+      onBlur: controllerField.onBlur,
+      ref: controllerField.ref,
+      field: t2,
+      fieldState: t3
+    };
+    $[15] = controllerField.name;
+    $[16] = controllerField.onBlur;
+    $[17] = controllerField.onChange;
+    $[18] = controllerField.ref;
+    $[19] = controllerField.value;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t4;
+  } else {
+    t4 = $[22];
+  }
+  return t4;
+}
+function useFieldsContext() {
+  return useContext(FieldsContext);
+}
+
 function deepMerge(target, source) {
   const result = {
     ...target
@@ -3478,10 +3658,7 @@ function buildDefaultValues(fields) {
   return values;
 }
 
-function hasSchema(props) {
-  return props.schema !== undefined;
-}
-function FormGeneratorImpl(props) {
+function FormGenerator(props) {
   const {
     fields,
     defaultValues,
@@ -3494,17 +3671,22 @@ function FormGeneratorImpl(props) {
     showReset = false,
     resetText = 'Reset',
     children,
-    ref
+    ref,
+    validateTypes
   } = props;
-  const userSchema = hasSchema(props) ? props.schema : undefined;
   const onSubmit = props.onSubmit;
   const formRef = useRef(null);
-  const schema = useMemo(() => {
-    if (userSchema) {
-      return userSchema;
+  useMemo(() => {
+    if (validateTypes) {
+      const registeredTypes = getRegisteredFieldTypes();
+      const options = typeof validateTypes === 'object' ? validateTypes : {
+        throwOnError: false,
+        warn: true
+      };
+      validateFieldTypes(fields, registeredTypes, options);
     }
-    return buildSchema(fields);
-  }, [fields, userSchema]);
+  }, [fields, validateTypes]);
+  const schema = useMemo(() => buildSchema(fields), [fields]);
   const mergedDefaultValues = useMemo(() => {
     const builtDefaults = buildDefaultValues(fields);
     return defaultValues ? deepMerge(builtDefaults, defaultValues) : builtDefaults;
@@ -3607,40 +3789,251 @@ function FormGeneratorImpl(props) {
     }
     return result;
   }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
-  const renderField = useCallback((field_1, options) => {
+  const renderField = useCallback((field_1, options_0) => {
     return jsx(FieldRenderer, {
       field: field_1,
-      namePrefix: options === null || options === void 0 ? void 0 : options.namePrefix
+      namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
     });
   }, []);
   if (!children) {
     return jsx(FormProvider, {
       ...form,
-      children: jsxs("form", {
+      children: jsx(FieldsProvider, {
+        fields: fields,
+        children: jsxs("form", {
+          ref: formRef,
+          onSubmit: handleSubmit,
+          className: className,
+          children: [jsxs(FieldsWrapper, {
+            children: [regularFields.map((field_2, index_0) => jsx(FieldWrapper, {
+              name: field_2.name,
+              type: field_2.type,
+              className: field_2.className,
+              children: jsx(FieldRenderer, {
+                field: field_2
+              })
+            }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsx(FieldWrapper, {
+              name: arrayField.name,
+              type: "array",
+              className: arrayField.className,
+              children: jsx(ArrayFieldRenderer, {
+                field: arrayField
+              })
+            }, arrayField.name))]
+          }), jsx(SubmitButton, {
+            disabled: disabled || form.formState.isSubmitting,
+            isSubmitting: form.formState.isSubmitting,
+            children: submitText
+          })]
+        })
+      })
+    });
+  }
+  const renderProps = {
+    fields: templateFields,
+    arrays: Object.fromEntries(arrayFields.map(arrayField_0 => [arrayField_0.name, {
+      field: arrayField_0
+    }])),
+    buttons,
+    title,
+    description,
+    form: form,
+    isSubmitting: form.formState.isSubmitting,
+    isValid: form.formState.isValid,
+    isDirty: form.formState.isDirty,
+    renderField,
+    FieldWrapper,
+    FieldsWrapper
+  };
+  const renderFn = children;
+  return jsx(FormProvider, {
+    ...form,
+    children: jsx(FieldsProvider, {
+      fields: fields,
+      children: jsx("form", {
         ref: formRef,
         onSubmit: handleSubmit,
         className: className,
-        children: [jsxs(FieldsWrapper, {
-          children: [regularFields.map((field_2, index_0) => jsx(FieldWrapper, {
-            name: field_2.name,
-            type: field_2.type,
-            className: field_2.className,
-            children: jsx(FieldRenderer, {
-              field: field_2
-            })
-          }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsx(FieldWrapper, {
-            name: arrayField.name,
-            type: "array",
-            className: arrayField.className,
-            children: jsx(ArrayFieldRenderer, {
-              field: arrayField
-            })
-          }, arrayField.name))]
-        }), jsx(SubmitButton, {
-          disabled: disabled || form.formState.isSubmitting,
-          isSubmitting: form.formState.isSubmitting,
-          children: submitText
-        })]
+        children: renderFn(renderProps)
+      })
+    })
+  });
+}
+
+function typedField() {
+  return field => field;
+}
+function typedFields(fields) {
+  return fields;
+}
+function StrictFormGenerator(props) {
+  const {
+    schema,
+    fields,
+    onSubmit,
+    defaultValues,
+    className,
+    submitText = 'Submit',
+    disabled,
+    mode = 'onChange',
+    title,
+    description,
+    showReset = false,
+    resetText = 'Reset',
+    children,
+    ref,
+    validateTypes
+  } = props;
+  const formRef = useRef(null);
+  useMemo(() => {
+    if (validateTypes) {
+      const registeredTypes = getRegisteredFieldTypes();
+      const options = typeof validateTypes === 'object' ? validateTypes : {
+        throwOnError: false,
+        warn: true
+      };
+      validateFieldTypes(fields, registeredTypes, options);
+    }
+  }, [fields, validateTypes]);
+  const mergedDefaultValues = useMemo(() => {
+    const builtDefaults = buildDefaultValues(fields);
+    return defaultValues ? deepMerge(builtDefaults, defaultValues) : builtDefaults;
+  }, [fields, defaultValues]);
+  const form = useForm({
+    resolver: a(schema),
+    defaultValues: mergedDefaultValues,
+    mode
+  });
+  const handleSubmit = form.handleSubmit(async data => {
+    await onSubmit(data);
+  });
+  const handleReset = useCallback(() => {
+    form.reset(mergedDefaultValues);
+  }, [form, mergedDefaultValues]);
+  useImperativeHandle(ref, () => ({
+    setValues: values => {
+      Object.entries(values).forEach(([key, value]) => {
+        form.setValue(key, value, {
+          shouldValidate: true,
+          shouldDirty: true
+        });
+      });
+    },
+    getValues: () => form.getValues(),
+    reset: values_0 => {
+      if (values_0) {
+        form.reset(deepMerge(mergedDefaultValues, values_0));
+      } else {
+        form.reset(mergedDefaultValues);
+      }
+    },
+    submit: async () => {
+      await handleSubmit();
+    },
+    clearErrors: () => form.clearErrors(),
+    setError: (name, error) => form.setError(name, error),
+    isValid: () => form.formState.isValid,
+    isDirty: () => form.formState.isDirty,
+    form: form
+  }), [form, handleSubmit, mergedDefaultValues]);
+  const SubmitButton = getFormComponent('SubmitButton');
+  const FieldWrapper = getFormComponent('FieldWrapper');
+  const FieldsWrapper = getFormComponent('FieldsWrapper');
+  const {
+    regularFields,
+    arrayFields
+  } = useMemo(() => {
+    const regular = [];
+    const arrays = [];
+    fields.forEach(field => {
+      if (isArrayField(field)) {
+        arrays.push(field);
+      } else {
+        regular.push(field);
+      }
+    });
+    return {
+      regularFields: regular,
+      arrayFields: arrays
+    };
+  }, [fields]);
+  const fieldEntries = useMemo(() => {
+    const entries = new Map();
+    regularFields.forEach((field_0, index) => {
+      if (!field_0.hidden) {
+        const element = jsx(FieldWrapper, {
+          name: field_0.name,
+          type: field_0.type,
+          className: field_0.className,
+          children: jsx(FieldRenderer, {
+            field: field_0
+          })
+        }, field_0.name || `field-${index}`);
+        entries.set(field_0.name, {
+          field: field_0,
+          element,
+          accessed: false
+        });
+      }
+    });
+    return entries;
+  }, [regularFields, FieldWrapper]);
+  const templateFields = useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
+  const buttons = useMemo(() => {
+    const result = {
+      submit: jsx(SubmitButton, {
+        disabled: disabled || form.formState.isSubmitting,
+        isSubmitting: form.formState.isSubmitting,
+        children: submitText
+      }, "submit")
+    };
+    if (showReset) {
+      result.reset = jsx("button", {
+        type: "button",
+        onClick: handleReset,
+        disabled: disabled,
+        children: resetText
+      }, "reset");
+    }
+    return result;
+  }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
+  const renderField = useCallback((field_1, options_0) => {
+    return jsx(FieldRenderer, {
+      field: field_1,
+      namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
+    });
+  }, []);
+  if (!children) {
+    return jsx(FormProvider, {
+      ...form,
+      children: jsx(FieldsProvider, {
+        fields: fields,
+        children: jsxs("form", {
+          ref: formRef,
+          onSubmit: handleSubmit,
+          className: className,
+          children: [jsxs(FieldsWrapper, {
+            children: [regularFields.map((field_2, index_0) => jsx(FieldWrapper, {
+              name: field_2.name,
+              type: field_2.type,
+              className: field_2.className,
+              children: jsx(FieldRenderer, {
+                field: field_2
+              })
+            }, field_2.name || `field-${index_0}`)), arrayFields.map(arrayField => jsx(FieldWrapper, {
+              name: arrayField.name,
+              type: "array",
+              className: arrayField.className,
+              children: jsx(ArrayFieldRenderer, {
+                field: arrayField
+              })
+            }, arrayField.name))]
+          }), jsx(SubmitButton, {
+            disabled: disabled || form.formState.isSubmitting,
+            isSubmitting: form.formState.isSubmitting,
+            children: submitText
+          })]
+        })
       })
     });
   }
@@ -3663,17 +4056,20 @@ function FormGeneratorImpl(props) {
   const renderFn = children;
   return jsx(FormProvider, {
     ...form,
-    children: jsx("form", {
-      ref: formRef,
-      onSubmit: handleSubmit,
-      className: className,
-      children: renderFn(renderProps)
+    children: jsx(FieldsProvider, {
+      fields: fields,
+      children: jsx("form", {
+        ref: formRef,
+        onSubmit: handleSubmit,
+        className: className,
+        children: renderFn(renderProps)
+      })
     })
   });
 }
-function FormGenerator(props) {
-  return FormGeneratorImpl(props);
+function createFieldFactory(_schema) {
+  return field => field;
 }
 
-export { ArrayFieldRenderer, Controller, FieldRenderer, FormGenerator, FormProvider, clearAllRegistries, clearFieldRegistry, clearFormComponentRegistry, getFieldComponent, getFormComponent, getFormComponents, getRegisteredFieldTypes, hasFieldType, hasFormComponent, isArrayField, registerField, registerFields, registerFormComponent, registerFormComponents, resetFormComponentRegistry, unregisterField, useArrayField, useFieldArray, useForm, useFormContext, useWatch };
+export { ArrayFieldRenderer, Controller, FieldRenderer, FieldsProvider, FormGenerator, FormProvider, StrictFormGenerator, clearAllRegistries, clearFieldRegistry, clearFormComponentRegistry, createArrayField, createField, createFieldFactory, getFieldComponent, getFormComponent, getFormComponents, getRegisteredFieldTypes, hasFieldType, hasFormComponent, isArrayField, registerField, registerFields, registerFormComponent, registerFormComponents, resetFormComponentRegistry, strictFields, typedField, typedFields, unregisterField, useArrayField, useFieldArray, useFieldProps, useFieldsContext, useForm, useFormContext, useWatch, validateFieldType, validateFieldTypes };
 //# sourceMappingURL=index.mjs.map