react-form-dto 1.0.3 → 1.0.4

package/README.md

@@ -146,6 +146,148 @@ return (
 
 ---
 
+## useFormBuilderController – Controlled, Auto‑Rendered Forms
+
+`useFormBuilderController` is a hook that wraps `FormBuilder` and gives you:
+
+- An auto-rendering `Form` component (no manual mapping of sections/fields)
+- An imperative controller API for values, errors, and validation
+
+It combines the convenience of `FormBuilder` with the programmatic control of `useFormBuilder`.
+
+### When to Use
+
+- You want the form UI to be generated entirely from a DTO
+- You need to:
+  - Run validation on submit
+  - Read values/errors from outside the form
+  - Prefill fields programmatically
+  - Plug in custom field renderers
+
+### Basic Example
+
+```tsx
+import { useFormBuilderController } from 'react-form-dto';
+import { myFormDTO } from './myFormDTO';
+
+function MyFormWithController() {
+  const formController = useFormBuilderController({
+    dto: myFormDTO,
+    locale: 'en',
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const errors = formController.validateAll();
+    const hasErrors = Object.values(errors).some(
+      (err) => err && err.length > 0,
+    );
+
+    if (hasErrors) {
+      console.log('Validation errors:', errors);
+      return;
+    }
+
+    console.log('Form submitted:', formController.getValues());
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {/* Auto-renders the full form from the DTO */}
+      <formController.Form />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+### API Overview
+
+```ts
+const controller = useFormBuilderController({
+  dto: myFormDTO,
+  locale: 'en',
+  renderers: {
+    // optional: override field types
+    text: MyTextField,
+  },
+  handleChangeCallback: (id, value) => {
+    // optional: side effects on every field change
+    console.log(id, value);
+  },
+});
+
+// Reading and validating
+controller.getValues();        // Record<string, any>
+controller.getErrors();        // Record<string, string | null>
+controller.validateAll();      // Record<string, string[] | null>
+controller.validateField('id'); // string[]
+
+// Programmatic updates
+controller.handleChange('firstName', 'Jane');
+```
+
+### Example with Prefill and Custom Renderers
+
+```tsx
+import { useFormBuilderController } from 'react-form-dto';
+import { myFormDTO } from './myFormDTO';
+import { TextInput, SelectInput } from './customFields';
+
+const renderers = {
+  text: TextInput,
+  select: SelectInput,
+};
+
+function AdvancedForm() {
+  const formController = useFormBuilderController({
+    dto: myFormDTO,
+    locale: 'en',
+    renderers,
+    handleChangeCallback: (id, value) => {
+      // sync with external store / analytics, etc.
+      console.log('Changed:', id, value);
+    },
+  });
+
+  const prefill = () => {
+    formController.handleChange('firstName', 'John');
+    formController.handleChange('lastName', 'Doe');
+  };
+
+  return (
+    <>
+      <button type="button" onClick={prefill}>
+        Prefill
+      </button>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          const errors = formController.validateAll();
+          const hasErrors = Object.values(errors).some(
+            (err) => err && err.length > 0,
+          );
+          if (!hasErrors) {
+            console.log('Values:', formController.getValues());
+          }
+        }}
+      >
+        <formController.Form />
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+}
+```
+
+> For the full hook reference, see  
+> **Docs → Hooks → `useFormBuilderController`**:  
+> `docs/api/hooks/useFormBuilderController.md`
+
+---
+
 ## 📋 Example Form rendered
 
 ![Form Example](./example.png)

package/dist/hooks/useFormBuilderController.d.ts

@@ -0,0 +1,16 @@
+import { FormDTO } from '../types';
+type FormBuilderControllerProps = {
+    dto: FormDTO;
+    locale: string;
+    renderers?: Record<string, React.ComponentType<any>>;
+    handleChangeCallback?: (id: string, val: any) => void;
+};
+export declare const useFormBuilderController: (props: FormBuilderControllerProps) => {
+    getValues: () => Record<string, any>;
+    getErrors: () => Record<string, string | null>;
+    validateAll: () => Record<string, string[]>;
+    validateField: (id: string) => string[];
+    handleChange: (id: string, val: any) => void | undefined;
+    Form: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/react-form-dto.es.js

@@ -804,7 +804,8 @@ const Ye = X.forwardRef(({ dto: e, renderers: t, locale: n = "en", handleChangeC
     getValues: c,
     getErrors: h,
     validateAll: x,
-    validateField: E
+    validateField: E,
+    handleChange: u
   })), /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
     e.title && /* @__PURE__ */ l.jsx(
       T,

package/dist/react-form-dto.umd.js

@@ -3,4 +3,4 @@
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,b,h,_,h),se[h+b]=!0)}if(h=null,p!==void 0&&(n(p),h=""+p),u(i)&&(n(i.key),h=""+i.key),"key"in i){p={};for(var z in i)z!=="key"&&(p[z]=i[z])}else p=i;return h&&d(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),g(r,h,p,o(),O,D)}function R(r){T(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===I&&(r._payload.status==="fulfilled"?T(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function T(r){return typeof r=="object"&&r!==null&&r.$$typeof===y}var v=E,y=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),$=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),fe=Symbol.for("react.profiler"),be=Symbol.for("react.consumer"),he=Symbol.for("react.context"),ve=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ge=Symbol.for("react.suspense_list"),ye=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),L=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ee=Object.prototype.hasOwnProperty,je=Array.isArray,N=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(r){return r()}};var re,te={},ne=v.react_stack_bottom_frame.bind(v,s)(),ae=N(a(s)),se={};S.Fragment=$,S.jsx=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!1,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)},S.jsxs=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!0,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)}})()),S}var W;function le(){return W||(W=1,process.env.NODE_ENV==="production"?k.exports=oe():k.exports=ue()),k.exports}var l=le();function f(e,t="en"){return e?typeof e=="string"?e:e[t]||e.en||Object.values(e)[0]||"":""}function F(e,t="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:f(n.label,t)}):[]}function M({field:e,value:t,onChange:n,error:a,locale:o="en"}){const s=F(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:t,id:e.id,name:e.id,onChange:u=>n(u.target.value),label:f(e.label,o),error:!!a,children:s?.map(u=>l.jsx(c.MenuItem,{value:u.value,children:u.label},u.label))}),a&&l.jsx(c.Typography,{variant:"caption",color:"error",children:a})]})}function V({field:e,value:t,onChange:n,error:a,locale:o}){return console.log("error",a),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",name:e.id,onChange:s=>n(s.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function B({field:e,value:t,onChange:n,error:a,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!t,onChange:s=>n(s.target.checked),disabled:e.disabled}),label:f(e.label,o)}),a&&l.jsx(c.FormHelperText,{children:a})]})}const U=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:s||[],value:t||null,onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},G=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:s||[],value:t||[],onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},J=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",onChange:s=>n(s.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),H=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{const s=F(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:t||"",onChange:u=>n(u.target.value),children:(s||[]).map(u=>l.jsx(c.FormControlLabel,{value:u.value,control:l.jsx(c.Radio,{}),label:u.label,disabled:e.disabled},u.label))}),a&&l.jsx(c.FormHelperText,{children:a})]})},ie=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(V,{field:e,value:t,onChange:n,error:a,locale:o});case"select":return l.jsx(M,{field:e,value:t,onChange:n,error:a,locale:o});case"autocomplete":return l.jsx(U,{field:e,value:t,onChange:n,error:a,locale:o});case"multi-autocomplete":return l.jsx(G,{field:e,value:t,onChange:n,error:a,locale:o});case"checkbox":return l.jsx(B,{field:e,value:t,onChange:n,error:a,locale:o});case"textarea":return l.jsx(J,{field:e,value:t,onChange:n,error:a,locale:o});case"radio":return l.jsx(H,{field:e,value:t,onChange:n,error:a,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},X=({field:e,value:t,onChange:n,error:a,renderers:o={},locale:s="en"})=>{const u=o[e.type]||ie;return l.jsx(u,{field:e,value:t,onChange:n,error:a,locale:s})};function ce(e){const t=e??12;return{xs:12,sm:t,md:t,lg:t,xl:t}}const de={required:(e,t)=>e.required&&(t==null||t==="")?`${e.label} is required`:null,min:(e,t)=>e.type==="number"&&e.min!==void 0&&t<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,t)=>e.type==="number"&&e.max!==void 0&&t>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,t)=>typeof t=="string"&&e.minLength!==void 0&&t.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,t)=>typeof t=="string"&&e.maxLength!==void 0&&t.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,t)=>e.pattern&&typeof t=="string"&&!e.pattern.test(t)?`${e.label} is invalid`:null,options:(e,t)=>e.type==="select"&&e.options&&!e.options.includes(t)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,t)=>{if(e.type==="date"&&t){const n=new Date(t);if(e.minDate&&n<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&n>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,t)=>{if(e.customValidator&&typeof e.customValidator=="function"){const n=e.customValidator(t);if(typeof n=="string")return n}return null}},Z=(e,t,n="en")=>{const a={};return e.sections.forEach(o=>{o.fields.forEach(s=>{const u=w(e,t,s.id);u.length>0&&(a[s.id]=u)})}),a},w=(e,t,n,a="en")=>{const o=e.sections.flatMap(g=>g.fields).find(g=>g.id===n);if(!o)return[];const s=o.validations||{},u=t[n],d=[],x=f(o.label,a);if(s.required&&(u==null||u==="")&&d.push(typeof s.required=="string"?s.required:`${x} is required`),s.min!==void 0&&typeof u=="number"&&u<s.min&&d.push(`${x} must be at least ${s.min}`),s.max!==void 0&&typeof u=="number"&&u>s.max&&d.push(`${x} must be at most ${s.max}`),s.minLength!==void 0&&typeof u=="string"&&u.length<s.minLength&&d.push(`${x} must be at least ${s.minLength} characters`),s.maxLength!==void 0&&typeof u=="string"&&u.length>s.maxLength&&d.push(`${x} must be at most ${s.maxLength} characters`),s.pattern&&typeof u=="string"&&!s.pattern.test(u)&&d.push(`${x} is invalid`),s.validate){const g=s.validate(u);g&&d.push(f(g,a))}return d};function P(e,t){if(!e)return!0;if("field"in e){let n=t[e.field]??"";return Array.isArray(n)?n=n.map(a=>a.value??""):typeof n=="object"&&n!==null&&(n=n.value??""),e.equals!==void 0?n===e.equals:e.notEquals!==void 0?n!==e.notEquals:e.in!==void 0?Array.isArray(n)?e.in?n.some(a=>e.in.includes(a)):!1:e.in.includes(n):e.notIn!==void 0?Array.isArray(n)?n.every(a=>!e.notIn.includes(a)):!e.notIn.includes(n):e.greaterThan!==void 0?n>e.greaterThan:e.lessThan!==void 0?n<e.lessThan:!0}if("operator"in e){if(e.operator==="AND")return e.conditions.every(a=>P(a,t));if(e.operator==="OR")return e.conditions.some(n=>P(n,t))}return!1}const Q=({section:e,values:t,onChange:n,renderers:a,validateField:o,locale:s="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,s)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,s)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(u=>P(u.visibleWhen,t)&&l.jsx(c.Grid,{size:ce(u.layout?.cols),children:l.jsx(X,{field:u,value:t[u.id],onChange:d=>n(u.id,d),renderers:a,error:o(u.id)?.join(","),locale:s})},u.id))})]});function K(e,t="en",n){const[a,o]=E.useState({}),[s,u]=E.useState({});return{values:a,handleChange:(T,v)=>{if(o(y=>({...y,[T]:v})),u(y=>({...y,[T]:null})),n){let y=v;Array.isArray(v)?y=v.map(C=>C.value??""):typeof v=="object"&&v!==null&&(y=v.value??""),n(T,y)}},validateAll:()=>Z(e,a,t),getValues:()=>a,getErrors:()=>s,validateField:T=>w(e,a,T,t)}}const pe=E.forwardRef(({dto:e,renderers:t,locale:n="en",handleChangeCallback:a},o)=>{const{values:s,handleChange:u,getValues:d,getErrors:x,validateAll:g,validateField:j}=K(e,n,a);return E.useImperativeHandle(o,()=>({getValues:d,getErrors:x,validateAll:g,validateField:j})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,n)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,n)}),e.sections.map(R=>l.jsx(Q,{section:R,values:s,onChange:u,renderers:t,validateField:j,locale:n},R.id))]})});m.AutoCompleteField=U,m.CheckBoxInput=B,m.Field=X,m.FormBuilder=pe,m.MultiAutoCompleteField=G,m.RadioInput=H,m.Section=Q,m.SelectInput=M,m.TextAreaInput=J,m.TextInput=V,m.useFormBuilder=K,m.validateAll=Z,m.validateField=w,m.validationRules=de,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,b,h,_,h),se[h+b]=!0)}if(h=null,p!==void 0&&(n(p),h=""+p),u(i)&&(n(i.key),h=""+i.key),"key"in i){p={};for(var z in i)z!=="key"&&(p[z]=i[z])}else p=i;return h&&d(p,typeof r=="function"?r.displayName||r.name||"Unknown":r),g(r,h,p,o(),O,D)}function R(r){T(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===I&&(r._payload.status==="fulfilled"?T(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function T(r){return typeof r=="object"&&r!==null&&r.$$typeof===y}var v=E,y=Symbol.for("react.transitional.element"),C=Symbol.for("react.portal"),$=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),fe=Symbol.for("react.profiler"),be=Symbol.for("react.consumer"),he=Symbol.for("react.context"),ve=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ge=Symbol.for("react.suspense_list"),ye=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),L=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ee=Object.prototype.hasOwnProperty,je=Array.isArray,N=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(r){return r()}};var re,te={},ne=v.react_stack_bottom_frame.bind(v,s)(),ae=N(a(s)),se={};S.Fragment=$,S.jsx=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!1,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)},S.jsxs=function(r,i,p){var b=1e4>L.recentlyCreatedOwnerStacks++;return j(r,i,p,!0,b?Error("react-stack-top-frame"):ne,b?N(a(r)):ae)}})()),S}var W;function le(){return W||(W=1,process.env.NODE_ENV==="production"?k.exports=oe():k.exports=ue()),k.exports}var l=le();function f(e,t="en"){return e?typeof e=="string"?e:e[t]||e.en||Object.values(e)[0]||"":""}function F(e,t="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:f(n.label,t)}):[]}function M({field:e,value:t,onChange:n,error:a,locale:o="en"}){const s=F(e.options||[],o);return l.jsxs(c.FormControl,{fullWidth:!0,children:[l.jsx(c.InputLabel,{id:`${e.id}-label`,children:f(e.label,o)}),l.jsx(c.Select,{labelId:`${e.id}-label`,value:t,id:e.id,name:e.id,onChange:u=>n(u.target.value),label:f(e.label,o),error:!!a,children:s?.map(u=>l.jsx(c.MenuItem,{value:u.value,children:u.label},u.label))}),a&&l.jsx(c.Typography,{variant:"caption",color:"error",children:a})]})}function V({field:e,value:t,onChange:n,error:a,locale:o}){return console.log("error",a),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",name:e.id,onChange:s=>n(s.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function B({field:e,value:t,onChange:n,error:a,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!t,onChange:s=>n(s.target.checked),disabled:e.disabled}),label:f(e.label,o)}),a&&l.jsx(c.FormHelperText,{children:a})]})}const U=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:s||[],value:t||null,onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},G=({field:e,value:t,onChange:n,error:a,locale:o})=>{const s=F(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:s||[],value:t||[],onChange:(u,d)=>n(d),renderInput:u=>l.jsx(c.TextField,{...u,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!a,helperText:a})})},J=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>l.jsx(c.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:t||"",onChange:s=>n(s.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),H=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{const s=F(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(c.FormLabel,{component:"legend",children:[f(e.label,o),e.validations?.required?" *":""]}),l.jsx(c.RadioGroup,{row:e.layout?.direction==="row"||!1,value:t||"",onChange:u=>n(u.target.value),children:(s||[]).map(u=>l.jsx(c.FormControlLabel,{value:u.value,control:l.jsx(c.Radio,{}),label:u.label,disabled:e.disabled},u.label))}),a&&l.jsx(c.FormHelperText,{children:a})]})},ie=({field:e,value:t,onChange:n,error:a,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(V,{field:e,value:t,onChange:n,error:a,locale:o});case"select":return l.jsx(M,{field:e,value:t,onChange:n,error:a,locale:o});case"autocomplete":return l.jsx(U,{field:e,value:t,onChange:n,error:a,locale:o});case"multi-autocomplete":return l.jsx(G,{field:e,value:t,onChange:n,error:a,locale:o});case"checkbox":return l.jsx(B,{field:e,value:t,onChange:n,error:a,locale:o});case"textarea":return l.jsx(J,{field:e,value:t,onChange:n,error:a,locale:o});case"radio":return l.jsx(H,{field:e,value:t,onChange:n,error:a,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},X=({field:e,value:t,onChange:n,error:a,renderers:o={},locale:s="en"})=>{const u=o[e.type]||ie;return l.jsx(u,{field:e,value:t,onChange:n,error:a,locale:s})};function ce(e){const t=e??12;return{xs:12,sm:t,md:t,lg:t,xl:t}}const de={required:(e,t)=>e.required&&(t==null||t==="")?`${e.label} is required`:null,min:(e,t)=>e.type==="number"&&e.min!==void 0&&t<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,t)=>e.type==="number"&&e.max!==void 0&&t>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,t)=>typeof t=="string"&&e.minLength!==void 0&&t.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,t)=>typeof t=="string"&&e.maxLength!==void 0&&t.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,t)=>e.pattern&&typeof t=="string"&&!e.pattern.test(t)?`${e.label} is invalid`:null,options:(e,t)=>e.type==="select"&&e.options&&!e.options.includes(t)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,t)=>{if(e.type==="date"&&t){const n=new Date(t);if(e.minDate&&n<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&n>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,t)=>{if(e.customValidator&&typeof e.customValidator=="function"){const n=e.customValidator(t);if(typeof n=="string")return n}return null}},Z=(e,t,n="en")=>{const a={};return e.sections.forEach(o=>{o.fields.forEach(s=>{const u=w(e,t,s.id);u.length>0&&(a[s.id]=u)})}),a},w=(e,t,n,a="en")=>{const o=e.sections.flatMap(g=>g.fields).find(g=>g.id===n);if(!o)return[];const s=o.validations||{},u=t[n],d=[],x=f(o.label,a);if(s.required&&(u==null||u==="")&&d.push(typeof s.required=="string"?s.required:`${x} is required`),s.min!==void 0&&typeof u=="number"&&u<s.min&&d.push(`${x} must be at least ${s.min}`),s.max!==void 0&&typeof u=="number"&&u>s.max&&d.push(`${x} must be at most ${s.max}`),s.minLength!==void 0&&typeof u=="string"&&u.length<s.minLength&&d.push(`${x} must be at least ${s.minLength} characters`),s.maxLength!==void 0&&typeof u=="string"&&u.length>s.maxLength&&d.push(`${x} must be at most ${s.maxLength} characters`),s.pattern&&typeof u=="string"&&!s.pattern.test(u)&&d.push(`${x} is invalid`),s.validate){const g=s.validate(u);g&&d.push(f(g,a))}return d};function P(e,t){if(!e)return!0;if("field"in e){let n=t[e.field]??"";return Array.isArray(n)?n=n.map(a=>a.value??""):typeof n=="object"&&n!==null&&(n=n.value??""),e.equals!==void 0?n===e.equals:e.notEquals!==void 0?n!==e.notEquals:e.in!==void 0?Array.isArray(n)?e.in?n.some(a=>e.in.includes(a)):!1:e.in.includes(n):e.notIn!==void 0?Array.isArray(n)?n.every(a=>!e.notIn.includes(a)):!e.notIn.includes(n):e.greaterThan!==void 0?n>e.greaterThan:e.lessThan!==void 0?n<e.lessThan:!0}if("operator"in e){if(e.operator==="AND")return e.conditions.every(a=>P(a,t));if(e.operator==="OR")return e.conditions.some(n=>P(n,t))}return!1}const Q=({section:e,values:t,onChange:n,renderers:a,validateField:o,locale:s="en"})=>l.jsxs(c.Box,{mb:2,children:[e.heading&&l.jsx(c.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:f(e.heading,s)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,s)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(u=>P(u.visibleWhen,t)&&l.jsx(c.Grid,{size:ce(u.layout?.cols),children:l.jsx(X,{field:u,value:t[u.id],onChange:d=>n(u.id,d),renderers:a,error:o(u.id)?.join(","),locale:s})},u.id))})]});function K(e,t="en",n){const[a,o]=E.useState({}),[s,u]=E.useState({});return{values:a,handleChange:(T,v)=>{if(o(y=>({...y,[T]:v})),u(y=>({...y,[T]:null})),n){let y=v;Array.isArray(v)?y=v.map(C=>C.value??""):typeof v=="object"&&v!==null&&(y=v.value??""),n(T,y)}},validateAll:()=>Z(e,a,t),getValues:()=>a,getErrors:()=>s,validateField:T=>w(e,a,T,t)}}const pe=E.forwardRef(({dto:e,renderers:t,locale:n="en",handleChangeCallback:a},o)=>{const{values:s,handleChange:u,getValues:d,getErrors:x,validateAll:g,validateField:j}=K(e,n,a);return E.useImperativeHandle(o,()=>({getValues:d,getErrors:x,validateAll:g,validateField:j,handleChange:u})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(c.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:f(e.title,n)}),e.description&&l.jsx(c.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,n)}),e.sections.map(R=>l.jsx(Q,{section:R,values:s,onChange:u,renderers:t,validateField:j,locale:n},R.id))]})});m.AutoCompleteField=U,m.CheckBoxInput=B,m.Field=X,m.FormBuilder=pe,m.MultiAutoCompleteField=G,m.RadioInput=H,m.Section=Q,m.SelectInput=M,m.TextAreaInput=J,m.TextInput=V,m.useFormBuilder=K,m.validateAll=Z,m.validateField=w,m.validationRules=de,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/stories/FormBuilder.stories.d.ts

@@ -26,3 +26,11 @@ export declare const EditableDTO: {
         dto: FormDTO;
     };
 };
+export declare const UsingControllerHook: {
+    (args: {
+        dto: FormDTO;
+    }): import("react/jsx-runtime").JSX.Element;
+    args: {
+        dto: FormDTO;
+    };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-form-dto",
     "description": "A React library for building forms using DTOs with MUI and TypeScript.",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "main": "dist/react-form-dto.umd.js",
     "module": "dist/react-form-dto.es.js",
     "types": "dist/index.d.ts",