@connect-soft/form-generator 1.1.0-alpha3 → 1.1.0-alpha4

package/README.md

@@ -266,6 +266,113 @@ const fields = [
 
 ---
 
+## Custom Layouts
+
+For full control over form layout, pass a render function as `children`:
+
+```typescript
+<FormGenerator
+  fields={[
+    { type: 'text', name: 'email', label: 'Email' },
+    { type: 'password', name: 'password', label: 'Password' },
+  ] as const}
+  title="Login"
+  onSubmit={handleSubmit}
+>
+  {({ fields, buttons, title }) => (
+    <div className="login-form">
+      <h1>{title}</h1>
+      <div className="field-row">{fields.email}</div>
+      <div className="field-row">{fields.password}</div>
+      <div className="actions">{buttons.submit}</div>
+    </div>
+  )}
+</FormGenerator>
+```
+
+### Render Props API
+
+The render function receives:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `fields` | `TemplateFields` | Pre-rendered fields (see below) |
+| `layouts` | `TemplateLayouts` | Pre-rendered named layouts |
+| `buttons` | `{ submit, reset? }` | Pre-rendered buttons |
+| `title` | `string` | Form title prop |
+| `description` | `string` | Form description prop |
+| `form` | `UseFormReturn` | react-hook-form instance |
+| `isSubmitting` | `boolean` | Form submission state |
+| `isValid` | `boolean` | Form validity state |
+| `isDirty` | `boolean` | Form dirty state |
+| `renderField` | `function` | Manual field renderer |
+| `renderLayout` | `function` | Manual layout renderer |
+
+### Fields Object
+
+Access fields by name or use helper methods:
+
+```typescript
+{({ fields }) => (
+  <div>
+    {/* Access individual fields */}
+    {fields.email}
+    {fields.password}
+
+    {/* Render all fields */}
+    {fields.all}
+
+    {/* Render only fields not yet accessed */}
+    {fields.remaining}
+
+    {/* Check if field exists */}
+    {fields.has('email') && fields.email}
+
+    {/* Get all field names */}
+    {fields.names.map(name => <div key={name}>{fields[name]}</div>)}
+
+    {/* Render specific fields */}
+    {fields.render('email', 'password')}
+  </div>
+)}
+```
+
+### Mixed Layout Example
+
+Highlight specific fields while rendering the rest normally:
+
+```typescript
+<FormGenerator fields={fieldDefinitions} onSubmit={handleSubmit}>
+  {({ fields, buttons }) => (
+    <div>
+      <div className="highlighted">{fields.email}</div>
+      <div className="other-fields">{fields.remaining}</div>
+      {buttons.submit}
+    </div>
+  )}
+</FormGenerator>
+```
+
+### Form State Access
+
+Use form state for conditional rendering:
+
+```typescript
+<FormGenerator fields={fieldDefinitions} onSubmit={handleSubmit}>
+  {({ fields, buttons, isSubmitting, isValid, isDirty }) => (
+    <div>
+      {fields.all}
+      <button type="submit" disabled={isSubmitting || !isValid}>
+        {isSubmitting ? 'Saving...' : 'Submit'}
+      </button>
+      {isDirty && <span>You have unsaved changes</span>}
+    </div>
+  )}
+</FormGenerator>
+```
+
+---
+
 ## TypeScript Type Inference
 
 Get full type inference from field definitions:
@@ -378,6 +485,11 @@ function MyForm() {
 | `submitText` | `string` | `'Submit'` | Submit button text |
 | `disabled` | `boolean` | `false` | Disable entire form |
 | `mode` | `'onChange' \| 'onBlur' \| 'onSubmit' \| 'onTouched' \| 'all'` | `'onChange'` | Validation trigger mode |
+| `children` | `TemplateRenderFn` | - | Render function for custom layout |
+| `title` | `string` | - | Form title (available in render props) |
+| `description` | `string` | - | Form description (available in render props) |
+| `showReset` | `boolean` | `false` | Include reset button in `buttons.reset` |
+| `resetText` | `string` | `'Reset'` | Reset button text |
 
 ### Field Base Properties
 

package/dist/index.js

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var n$1 = require('zod/v4/core');
-var zod = require('zod');
 var compilerRuntime = require('react/compiler-runtime');
+var zod = require('zod');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -3130,6 +3130,105 @@ function clearAllRegistries() {
   clearLayoutRegistry();
 }
 
+const RESERVED_PROPS = new Set(['all', 'remaining', 'names', 'has', 'render']);
+function createTemplateFields(fieldEntries) {
+  const accessedFields = new Set();
+  const handler = {
+    get(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (prop === 'all') {
+        return Array.from(fieldEntries.values()).map(entry => entry.element);
+      }
+      if (prop === 'remaining') {
+        return Array.from(fieldEntries.entries()).filter(([name]) => !accessedFields.has(name)).map(([, entry]) => entry.element);
+      }
+      if (prop === 'names') {
+        return Array.from(fieldEntries.keys());
+      }
+      if (prop === 'has') {
+        return name => fieldEntries.has(name);
+      }
+      if (prop === 'render') {
+        return (...names) => {
+          return names.filter(name => fieldEntries.has(name)).map(name => {
+            accessedFields.add(name);
+            return fieldEntries.get(name).element;
+          });
+        };
+      }
+      if (fieldEntries.has(prop)) {
+        accessedFields.add(prop);
+        return fieldEntries.get(prop).element;
+      }
+      return undefined;
+    },
+    has(_, prop) {
+      if (typeof prop === 'symbol') {
+        return false;
+      }
+      return RESERVED_PROPS.has(prop) || fieldEntries.has(prop);
+    },
+    ownKeys() {
+      return [...RESERVED_PROPS, ...fieldEntries.keys()];
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (RESERVED_PROPS.has(prop) || fieldEntries.has(prop)) {
+        return {
+          configurable: true,
+          enumerable: true,
+          value: this.get(_, prop, {})
+        };
+      }
+      return undefined;
+    }
+  };
+  return new Proxy({}, handler);
+}
+function createTemplateLayouts(layoutEntries) {
+  const handler = {
+    get(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (prop === 'all') {
+        return Array.from(layoutEntries.values()).map(entry => entry.element);
+      }
+      if (layoutEntries.has(prop)) {
+        return layoutEntries.get(prop).element;
+      }
+      return undefined;
+    },
+    has(_, prop) {
+      if (typeof prop === 'symbol') {
+        return false;
+      }
+      return prop === 'all' || layoutEntries.has(prop);
+    },
+    ownKeys() {
+      return ['all', ...layoutEntries.keys()];
+    },
+    getOwnPropertyDescriptor(_, prop) {
+      if (typeof prop === 'symbol') {
+        return undefined;
+      }
+      if (prop === 'all' || layoutEntries.has(prop)) {
+        return {
+          configurable: true,
+          enumerable: true,
+          value: this.get(_, prop, {})
+        };
+      }
+      return undefined;
+    }
+  };
+  return new Proxy({}, handler);
+}
+
 const FieldRenderer = /*#__PURE__*/React.memo(t0 => {
   const $ = compilerRuntime.c(5);
   const {
@@ -3375,8 +3474,9 @@ const defaultValidators = {
   tel: stringValidator,
   number: field => {
     let schema = zod.z.coerce.number();
-    if (field.min !== undefined) schema = schema.min(field.min);
-    if (field.max !== undefined) schema = schema.max(field.max);
+    const numberField = field;
+    if (numberField.min !== undefined) schema = schema.min(numberField.min);
+    if (numberField.max !== undefined) schema = schema.max(numberField.max);
     return schema;
   },
   checkbox: () => zod.z.coerce.boolean(),
@@ -3462,6 +3562,38 @@ function getItemKey(item, index) {
   }
   return item.name;
 }
+function extractFields(items) {
+  const fields = [];
+  for (const item of items) {
+    if (isLayoutBlock(item)) {
+      let childItems = [];
+      if (item.type === 'columns') {
+        for (const column of item.columns) {
+          childItems.push(...column.children);
+        }
+      } else if (item.type === 'section') {
+        childItems = item.children;
+      }
+      fields.push(...extractFields(childItems));
+    } else {
+      fields.push(item);
+    }
+  }
+  return fields;
+}
+function extractLayouts(items) {
+  const layouts = [];
+  items.forEach((item, index) => {
+    if (isLayoutBlock(item)) {
+      layouts.push({
+        layout: item,
+        index
+      });
+    }
+  });
+  return layouts;
+}
+
 function hasSchema(props) {
   return props.schema !== undefined;
 }
@@ -3473,6 +3605,11 @@ function FormGeneratorImpl(props) {
     submitText = 'Submit',
     disabled,
     mode = 'onChange',
+    title,
+    description,
+    showReset = false,
+    resetText = 'Reset',
+    children,
     ref
   } = props;
   const userSchema = hasSchema(props) ? props.schema : undefined;
@@ -3496,6 +3633,9 @@ function FormGeneratorImpl(props) {
   const handleSubmit = form.handleSubmit(async data => {
     await onSubmit(data);
   });
+  const handleReset = React.useCallback(() => {
+    form.reset(mergedDefaultValues);
+  }, [form, mergedDefaultValues]);
   React.useImperativeHandle(ref, () => ({
     setValues: values => {
       Object.entries(values).forEach(([key, value]) => {
@@ -3520,26 +3660,124 @@ function FormGeneratorImpl(props) {
     setError: (name, error) => form.setError(name, error),
     isValid: () => form.formState.isValid,
     isDirty: () => form.formState.isDirty,
-    form
+    form: form
   }), [form, handleSubmit, mergedDefaultValues]);
   const SubmitButton = getFormComponent('SubmitButton');
+  const fieldEntries = React.useMemo(() => {
+    const entries = new Map();
+    const allFields = extractFields(fields);
+    allFields.forEach((field, index) => {
+      if (!field.hidden) {
+        const element = jsxRuntime.jsx(FieldRenderer, {
+          field: field
+        }, field.name || `field-${index}`);
+        entries.set(field.name, {
+          field,
+          element,
+          accessed: false
+        });
+      }
+    });
+    return entries;
+  }, [fields]);
+  const layoutEntries = React.useMemo(() => {
+    const entries_0 = new Map();
+    const allLayouts = extractLayouts(fields);
+    allLayouts.forEach(({
+      layout,
+      index: index_0
+    }) => {
+      if (!layout.hidden) {
+        const key_0 = layout.name || `layout-${layout.type}-${index_0}`;
+        const element_0 = jsxRuntime.jsx(FormItemRenderer, {
+          item: layout
+        }, key_0);
+        if (layout.name) {
+          entries_0.set(layout.name, {
+            layout,
+            element: element_0
+          });
+        }
+      }
+    });
+    return entries_0;
+  }, [fields]);
+  const templateFields = React.useMemo(() => createTemplateFields(fieldEntries), [fieldEntries]);
+  const templateLayouts = React.useMemo(() => createTemplateLayouts(layoutEntries), [layoutEntries]);
+  const buttons = React.useMemo(() => {
+    const result = {
+      submit: jsxRuntime.jsx(SubmitButton, {
+        disabled: disabled || form.formState.isSubmitting,
+        isSubmitting: form.formState.isSubmitting,
+        children: submitText
+      }, "submit")
+    };
+    if (showReset) {
+      result.reset = jsxRuntime.jsx("button", {
+        type: "button",
+        onClick: handleReset,
+        disabled: disabled,
+        children: resetText
+      }, "reset");
+    }
+    return result;
+  }, [SubmitButton, disabled, form.formState.isSubmitting, submitText, showReset, resetText, handleReset]);
+  const renderField = React.useCallback((field_0, options) => {
+    return jsxRuntime.jsx(FieldRenderer, {
+      field: field_0,
+      namePrefix: options === null || options === void 0 ? void 0 : options.namePrefix
+    });
+  }, []);
+  const renderLayout = React.useCallback((layout_0, options_0) => {
+    return jsxRuntime.jsx(FormItemRenderer, {
+      item: layout_0,
+      namePrefix: options_0 === null || options_0 === void 0 ? void 0 : options_0.namePrefix
+    });
+  }, []);
+  if (!children) {
+    return jsxRuntime.jsx(FormProvider, {
+      ...form,
+      children: jsxRuntime.jsxs("form", {
+        ref: formRef,
+        onSubmit: handleSubmit,
+        className: className,
+        children: [fields.map((item, index_1) => jsxRuntime.jsx(FormItemRenderer, {
+          item: item
+        }, getItemKey(item, index_1))), jsxRuntime.jsx(SubmitButton, {
+          disabled: disabled || form.formState.isSubmitting,
+          isSubmitting: form.formState.isSubmitting,
+          children: submitText
+        })]
+      })
+    });
+  }
+  const renderProps = {
+    fields: templateFields,
+    layouts: templateLayouts,
+    buttons,
+    title,
+    description,
+    form: form,
+    isSubmitting: form.formState.isSubmitting,
+    isValid: form.formState.isValid,
+    isDirty: form.formState.isDirty,
+    renderField,
+    renderLayout
+  };
+  const renderFn = children;
   return jsxRuntime.jsx(FormProvider, {
     ...form,
-    children: jsxRuntime.jsxs("form", {
+    children: jsxRuntime.jsx("form", {
       ref: formRef,
       onSubmit: handleSubmit,
       className: className,
-      children: [fields.map((item, index) => jsxRuntime.jsx(FormItemRenderer, {
-        item: item
-      }, getItemKey(item, index))), jsxRuntime.jsx(SubmitButton, {
-        disabled: disabled || form.formState.isSubmitting,
-        isSubmitting: form.formState.isSubmitting,
-        children: submitText
-      })]
+      children: renderFn(renderProps)
     })
   });
 }
-const FormGenerator = FormGeneratorImpl;
+function FormGenerator(props) {
+  return FormGeneratorImpl(props);
+}
 
 Object.defineProperty(exports, "z", {
     enumerable: true,