react-form-dto 0.0.8 → 1.0.0

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

@@ -1,6 +1,6 @@
-(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.ReactFormDTO={},d.React,d.MaterialUI))})(this,(function(d,h,i){"use strict";var j={exports:{}},E={};var I;function re(){if(I)return E;I=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(a,n,s){var m=null;if(s!==void 0&&(m=""+s),n.key!==void 0&&(m=""+n.key),"key"in n){s={};for(var f in n)f!=="key"&&(s[f]=n[f])}else s=n;return n=s.ref,{$$typeof:e,type:a,key:m,ref:n!==void 0?n:null,props:s}}return E.Fragment=r,E.jsx=o,E.jsxs=o,E}var T={};var L;function ne(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===ge?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case F:return"Fragment";case de:return"Profiler";case ce:return"StrictMode";case fe:return"Suspense";case he:return"SuspenseList";case ve:return"Activity"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case ie:return"Portal";case pe:return t.displayName||"Context";case me:return(t._context.displayName||"Context")+".Consumer";case be:var u=t.render;return t=t.displayName,t||(t=u.displayName||u.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case xe:return u=t.displayName||null,u!==null?u:e(t.type)||"Memo";case w:u=t._payload,t=t._init;try{return e(t(u))}catch{}}return null}function r(t){return""+t}function o(t){try{r(t);var u=!1}catch{u=!0}if(u){u=console;var c=u.error,p=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return c.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",p),r(t)}}function a(t){if(t===F)return"<>";if(typeof t=="object"&&t!==null&&t.$$typeof===w)return"<...>";try{var u=e(t);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function n(){var t=O.A;return t===null?null:t.getOwner()}function s(){return Error("react-stack-top-frame")}function m(t){if(X.call(t,"key")){var u=Object.getOwnPropertyDescriptor(t,"key").get;if(u&&u.isReactWarning)return!1}return t.key!==void 0}function f(t,u){function c(){Z||(Z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",u))}c.isReactWarning=!0,Object.defineProperty(t,"key",{get:c,configurable:!0})}function y(){var t=e(this.type);return Q[t]||(Q[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function R(t,u,c,p,k,P){var b=c.ref;return t={$$typeof:H,type:t,key:u,props:c,_owner:p},(b!==void 0?b:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:y}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(t,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:k}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function x(t,u,c,p,k,P){var b=u.children;if(b!==void 0)if(p)if(Ee(b)){for(p=0;p<b.length;p++)_(b[p]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else _(b);if(X.call(u,"key")){b=e(t);var g=Object.keys(u).filter(function(Te){return Te!=="key"});p=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",te[b+p]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(p,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],g):(p=typeof globalThis<"u"?globalThis:p||self,g(p.ReactFormDTO={},p.React,p.MaterialUI))})(this,(function(p,g,c){"use strict";var S={exports:{}},R={};var N;function ae(){if(N)return R;N=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(u,o,a){var s=null;if(a!==void 0&&(s=""+a),o.key!==void 0&&(s=""+o.key),"key"in o){a={};for(var d in o)d!=="key"&&(a[d]=o[d])}else a=o;return o=a.ref,{$$typeof:e,type:u,key:s,ref:o!==void 0?o:null,props:a}}return R.Fragment=r,R.jsx=n,R.jsxs=n,R}var _={};var D;function oe(){return D||(D=1,process.env.NODE_ENV!=="production"&&(function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===Te?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case O:return"Fragment";case pe:return"Profiler";case me:return"StrictMode";case xe:return"Suspense";case ve:return"SuspenseList";case Ee:return"Activity"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case de:return"Portal";case be:return t.displayName||"Context";case fe:return(t._context.displayName||"Context")+".Consumer";case he:var i=t.render;return t=t.displayName,t||(t=i.displayName||i.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case ge:return i=t.displayName||null,i!==null?i:e(t.type)||"Memo";case C:i=t._payload,t=t._init;try{return e(t(i))}catch{}}return null}function r(t){return""+t}function n(t){try{r(t);var i=!1}catch{i=!0}if(i){i=console;var m=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return m.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),r(t)}}function u(t){if(t===O)return"<>";if(typeof t=="object"&&t!==null&&t.$$typeof===C)return"<...>";try{var i=e(t);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var t=P.A;return t===null?null:t.getOwner()}function a(){return Error("react-stack-top-frame")}function s(t){if(Q.call(t,"key")){var i=Object.getOwnPropertyDescriptor(t,"key").get;if(i&&i.isReactWarning)return!1}return t.key!==void 0}function d(t,i){function m(){K||(K=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}m.isReactWarning=!0,Object.defineProperty(t,"key",{get:m,configurable:!0})}function v(){var t=e(this.type);return ee[t]||(ee[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function x(t,i,m,b,F,I){var h=m.ref;return t={$$typeof:Z,type:t,key:i,props:m,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:v}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(t,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function y(t,i,m,b,F,I){var h=i.children;if(h!==void 0)if(b)if(ye(h)){for(b=0;b<h.length;b++)T(h[b]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else T(h);if(Q.call(i,"key")){h=e(t);var j=Object.keys(i).filter(function(je){return je!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",ne[h+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,p,b,g,b),te[b+p]=!0)}if(b=null,c!==void 0&&(o(c),b=""+c),m(u)&&(o(u.key),b=""+u.key),"key"in u){c={};for(var $ in u)$!=="key"&&(c[$]=u[$])}else c=u;return b&&f(c,typeof t=="function"?t.displayName||t.name||"Unknown":t),R(t,b,c,n(),k,P)}function _(t){v(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===w&&(t._payload.status==="fulfilled"?v(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function v(t){return typeof t=="object"&&t!==null&&t.$$typeof===H}var S=h,H=Symbol.for("react.transitional.element"),ie=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),ce=Symbol.for("react.strict_mode"),de=Symbol.for("react.profiler"),me=Symbol.for("react.consumer"),pe=Symbol.for("react.context"),be=Symbol.for("react.forward_ref"),fe=Symbol.for("react.suspense"),he=Symbol.for("react.suspense_list"),xe=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),ve=Symbol.for("react.activity"),ge=Symbol.for("react.client.reference"),O=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,Ee=Array.isArray,C=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(t){return t()}};var Z,Q={},K=S.react_stack_bottom_frame.bind(S,s)(),ee=C(a(s)),te={};T.Fragment=F,T.jsx=function(t,u,c){var p=1e4>O.recentlyCreatedOwnerStacks++;return x(t,u,c,!1,p?Error("react-stack-top-frame"):K,p?C(a(t)):ee)},T.jsxs=function(t,u,c){var p=1e4>O.recentlyCreatedOwnerStacks++;return x(t,u,c,!0,p?Error("react-stack-top-frame"):K,p?C(a(t)):ee)}})()),T}var N;function ae(){return N||(N=1,process.env.NODE_ENV==="production"?j.exports=re():j.exports=ne()),j.exports}var l=ae();function D({field:e,value:r,onChange:o,error:a}){return l.jsxs(i.FormControl,{fullWidth:!0,children:[l.jsx(i.InputLabel,{id:`${e.id}-label`,children:e.label}),l.jsx(i.Select,{labelId:`${e.id}-label`,value:r,id:e.id,name:e.id,onChange:n=>o(n.target.value),label:e.label,error:!!a,children:e.options?.map(n=>l.jsx(i.MenuItem,{value:n,children:n},n))}),a&&l.jsx(i.Typography,{variant:"caption",color:"error",children:a})]})}function z({field:e,value:r,onChange:o,error:a}){return console.log("error",a),l.jsx(i.TextField,{fullWidth:!0,label:e.label,placeholder:e.placeholder,value:r||"",name:e.id,onChange:n=>o(n.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!a,helperText:a})}function Y({field:e,value:r,onChange:o,error:a}){return l.jsxs(l.Fragment,{children:[l.jsx(i.FormControlLabel,{name:e.id,control:l.jsx(i.Checkbox,{checked:!!r,onChange:n=>o(n.target.checked),disabled:e.disabled}),label:e.label}),a&&l.jsx(i.FormHelperText,{children:a})]})}const W=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.Autocomplete,{fullWidth:!0,options:e.options||[],value:r||null,onChange:(n,s)=>o(s),renderInput:n=>l.jsx(i.TextField,{...n,name:e.id,label:e.label,placeholder:e.placeholder,disabled:e.disabled,error:!!a,helperText:a})}),M=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.Autocomplete,{multiple:!0,fullWidth:!0,options:e.options||[],value:r||[],onChange:(n,s)=>o(s),renderInput:n=>l.jsx(i.TextField,{...n,name:e.id,label:e.label,placeholder:e.placeholder,disabled:e.disabled,error:!!a,helperText:a})}),V=({field:e,value:r,onChange:o,error:a})=>l.jsx(i.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:e.label,placeholder:e.placeholder,value:r||"",onChange:n=>o(n.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!a,helperText:a}),q=({field:e,value:r,onChange:o,error:a})=>l.jsxs(i.FormControl,{component:"fieldset",fullWidth:!0,error:!!a,children:[l.jsxs(i.FormLabel,{component:"legend",children:[e.label,e.validations?.required?" *":""]}),l.jsx(i.RadioGroup,{row:e.layout?.direction==="row"||!1,value:r||"",onChange:n=>o(n.target.value),children:(e.options||[]).map(n=>l.jsx(i.FormControlLabel,{value:n,control:l.jsx(i.Radio,{}),label:n,disabled:e.disabled},n))}),a&&l.jsx(i.FormHelperText,{children:a})]}),oe=({field:e,value:r,onChange:o,error:a})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(z,{field:e,value:r,onChange:o,error:a});case"select":return l.jsx(D,{field:e,value:r,onChange:o,error:a});case"autocomplete":return l.jsx(W,{field:e,value:r,onChange:o,error:a});case"multi-autocomplete":return l.jsx(M,{field:e,value:r,onChange:o,error:a});case"checkbox":return l.jsx(Y,{field:e,value:r,onChange:o,error:a});case"textarea":return l.jsx(V,{field:e,value:r,onChange:o,error:a});case"radio":return l.jsx(q,{field:e,value:r,onChange:o,error:a});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},B=({field:e,value:r,onChange:o,error:a,renderers:n={}})=>{const s=n[e.type]||oe;return l.jsx(s,{field:e,value:r,onChange:o,error:a})};function se(e){const r=e??12;return{xs:12,sm:r,md:r,lg:r,xl:r}}const U=({section:e,values:r,onChange:o,renderers:a,validateField:n})=>l.jsxs(i.Box,{mb:2,children:[e.heading&&l.jsx(i.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:e.heading}),e.description&&l.jsx(i.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:e.description}),l.jsx(i.Grid,{container:!0,spacing:2,children:e.fields.map(s=>l.jsx(i.Grid,{size:se(s.layout?.cols),children:l.jsx(B,{field:s,value:r[s.id],onChange:m=>o(s.id,m),renderers:a,error:n(s.id)?.join(",")})},s.id))})]}),le={required:(e,r)=>e.required&&(r==null||r==="")?`${e.label} is required`:null,min:(e,r)=>e.type==="number"&&e.min!==void 0&&r<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,r)=>e.type==="number"&&e.max!==void 0&&r>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,r)=>typeof r=="string"&&e.minLength!==void 0&&r.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,r)=>typeof r=="string"&&e.maxLength!==void 0&&r.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,r)=>e.pattern&&typeof r=="string"&&!e.pattern.test(r)?`${e.label} is invalid`:null,options:(e,r)=>e.type==="select"&&e.options&&!e.options.includes(r)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,r)=>{if(e.type==="date"&&r){const o=new Date(r);if(e.minDate&&o<new Date(e.minDate))return`${e.label} must be after ${e.minDate}`;if(e.maxDate&&o>new Date(e.maxDate))return`${e.label} must be before ${e.maxDate}`}return null},customValidator:(e,r)=>{if(e.customValidator&&typeof e.customValidator=="function"){const o=e.customValidator(r);if(typeof o=="string")return o}return null}},G=(e,r)=>{const o={};return e.sections.forEach(a=>{a.fields.forEach(n=>{const s=A(e,r,n.id);s.length>0&&(o[n.id]=s)})}),o},A=(e,r,o)=>{const a=e.sections.flatMap(f=>f.fields).find(f=>f.id===o);if(!a)return[];const n=a.validations||{},s=r[o],m=[];if(n.required&&(s==null||s==="")&&m.push(typeof n.required=="string"?n.required:`${a.label} is required`),n.min!==void 0&&typeof s=="number"&&s<n.min&&m.push(`${a.label} must be at least ${n.min}`),n.max!==void 0&&typeof s=="number"&&s>n.max&&m.push(`${a.label} must be at most ${n.max}`),n.minLength!==void 0&&typeof s=="string"&&s.length<n.minLength&&m.push(`${a.label} must be at least ${n.minLength} characters`),n.maxLength!==void 0&&typeof s=="string"&&s.length>n.maxLength&&m.push(`${a.label} must be at most ${n.maxLength} characters`),n.pattern&&typeof s=="string"&&!n.pattern.test(s)&&m.push(`${a.label} is invalid`),n.validate){const f=n.validate(s);f&&m.push(f)}return m};function J(e){const[r,o]=h.useState({}),[a,n]=h.useState({});return{values:r,handleChange:(x,_)=>{o(v=>({...v,[x]:_})),n(v=>({...v,[x]:null}))},validateAll:()=>G(e,r),getValues:()=>r,getErrors:()=>a,validateField:x=>A(e,r,x)}}const ue=h.forwardRef(({dto:e,renderers:r},o)=>{const{values:a,handleChange:n,getValues:s,getErrors:m,validateAll:f,validateField:y}=J(e);return h.useImperativeHandle(o,()=>({getValues:s,getErrors:m,validateAll:f,validateField:y})),l.jsxs(l.Fragment,{children:[e.title&&l.jsx(i.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:e.title}),e.description&&l.jsx(i.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:e.description}),e.sections.map(R=>l.jsx(U,{section:R,values:a,onChange:n,renderers:r,validateField:y},R.id))]})});d.AutoCompleteField=W,d.CheckBoxInput=Y,d.Field=B,d.FormBuilder=ue,d.MultiAutoCompleteField=M,d.RadioInput=q,d.Section=U,d.SelectInput=D,d.TextAreaInput=V,d.TextInput=z,d.useFormBuilder=J,d.validateAll=G,d.validateField=A,d.validationRules=le,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,b,h,j,h),ne[h+b]=!0)}if(h=null,m!==void 0&&(n(m),h=""+m),s(i)&&(n(i.key),h=""+i.key),"key"in i){m={};for(var L in i)L!=="key"&&(m[L]=i[L])}else m=i;return h&&d(m,typeof t=="function"?t.displayName||t.name||"Unknown":t),x(t,h,m,o(),F,I)}function T(t){A(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===C&&(t._payload.status==="fulfilled"?A(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function A(t){return typeof t=="object"&&t!==null&&t.$$typeof===Z}var E=g,Z=Symbol.for("react.transitional.element"),de=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),me=Symbol.for("react.strict_mode"),pe=Symbol.for("react.profiler"),fe=Symbol.for("react.consumer"),be=Symbol.for("react.context"),he=Symbol.for("react.forward_ref"),xe=Symbol.for("react.suspense"),ve=Symbol.for("react.suspense_list"),ge=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),Ee=Symbol.for("react.activity"),Te=Symbol.for("react.client.reference"),P=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Q=Object.prototype.hasOwnProperty,ye=Array.isArray,$=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(t){return t()}};var K,ee={},te=E.react_stack_bottom_frame.bind(E,a)(),re=$(u(a)),ne={};_.Fragment=O,_.jsx=function(t,i,m){var b=1e4>P.recentlyCreatedOwnerStacks++;return y(t,i,m,!1,b?Error("react-stack-top-frame"):te,b?$(u(t)):re)},_.jsxs=function(t,i,m){var b=1e4>P.recentlyCreatedOwnerStacks++;return y(t,i,m,!0,b?Error("react-stack-top-frame"):te,b?$(u(t)):re)}})()),_}var z;function se(){return z||(z=1,process.env.NODE_ENV==="production"?S.exports=ae():S.exports=oe()),S.exports}var l=se();function f(e,r="en"){return e?typeof e=="string"?e:e[r]||e.en||Object.values(e)[0]||"":""}function k(e,r="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:f(n.label,r)}):[]}function Y({field:e,value:r,onChange:n,error:u,locale:o="en"}){const a=k(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:r,id:e.id,name:e.id,onChange:s=>n(s.target.value),label:f(e.label,o),error:!!u,children:a?.map(s=>l.jsx(c.MenuItem,{value:s.value,children:s.label},s.label))}),u&&l.jsx(c.Typography,{variant:"caption",color:"error",children:u})]})}function W({field:e,value:r,onChange:n,error:u,locale:o}){return console.log("error",u),l.jsx(c.TextField,{fullWidth:!0,label:f(e.label,o),placeholder:f(e.placeholder||"",o),value:r||"",name:e.id,onChange:a=>n(a.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!u,helperText:u})}function M({field:e,value:r,onChange:n,error:u,locale:o}){return l.jsxs(l.Fragment,{children:[l.jsx(c.FormControlLabel,{name:e.id,control:l.jsx(c.Checkbox,{checked:!!r,onChange:a=>n(a.target.checked),disabled:e.disabled}),label:f(e.label,o)}),u&&l.jsx(c.FormHelperText,{children:u})]})}const V=({field:e,value:r,onChange:n,error:u,locale:o})=>{const a=k(e.options||[],o);return l.jsx(c.Autocomplete,{fullWidth:!0,options:a||[],value:r||null,onChange:(s,d)=>n(d),renderInput:s=>l.jsx(c.TextField,{...s,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!u,helperText:u})})},q=({field:e,value:r,onChange:n,error:u,locale:o})=>{const a=k(e.options||[],o);return l.jsx(c.Autocomplete,{multiple:!0,fullWidth:!0,options:a||[],value:r||[],onChange:(s,d)=>n(d),renderInput:s=>l.jsx(c.TextField,{...s,name:e.id,label:f(e.label,o),placeholder:f(e.placeholder||"",o),disabled:e.disabled,error:!!u,helperText:u})})},B=({field:e,value:r,onChange:n,error:u,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:r||"",onChange:a=>n(a.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!u,helperText:u}),U=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>{const a=k(e.options||[],o);return l.jsxs(c.FormControl,{component:"fieldset",fullWidth:!0,error:!!u,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:r||"",onChange:s=>n(s.target.value),children:(a||[]).map(s=>l.jsx(c.FormControlLabel,{value:s,control:l.jsx(c.Radio,{}),label:s.label,disabled:e.disabled},s.label))}),u&&l.jsx(c.FormHelperText,{children:u})]})},ue=({field:e,value:r,onChange:n,error:u,locale:o="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return l.jsx(W,{field:e,value:r,onChange:n,error:u,locale:o});case"select":return l.jsx(Y,{field:e,value:r,onChange:n,error:u,locale:o});case"autocomplete":return l.jsx(V,{field:e,value:r,onChange:n,error:u,locale:o});case"multi-autocomplete":return l.jsx(q,{field:e,value:r,onChange:n,error:u,locale:o});case"checkbox":return l.jsx(M,{field:e,value:r,onChange:n,error:u,locale:o});case"textarea":return l.jsx(B,{field:e,value:r,onChange:n,error:u,locale:o});case"radio":return l.jsx(U,{field:e,value:r,onChange:n,error:u,locale:o});default:return l.jsxs("span",{children:["Unsupported field type: ",e.type]})}},G=({field:e,value:r,onChange:n,error:u,renderers:o={},locale:a="en"})=>{const s=o[e.type]||ue;return l.jsx(s,{field:e,value:r,onChange:n,error:u,locale:a})};function le(e){const r=e??12;return{xs:12,sm:r,md:r,lg:r,xl:r}}const J=({section:e,values:r,onChange:n,renderers:u,validateField:o,locale:a="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,a)}),e.description&&l.jsx(c.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:f(e.description,a)}),l.jsx(c.Grid,{container:!0,spacing:2,children:e.fields.map(s=>l.jsx(c.Grid,{size:le(s.layout?.cols),children:l.jsx(G,{field:s,value:r[s.id],onChange:d=>n(s.id,d),renderers:u,error:o(s.id)?.join(","),locale:a})},s.id))})]}),ie={required:(e,r)=>e.required&&(r==null||r==="")?`${e.label} is required`:null,min:(e,r)=>e.type==="number"&&e.min!==void 0&&r<e.min?`${e.label} must be at least ${e.min}`:null,max:(e,r)=>e.type==="number"&&e.max!==void 0&&r>e.max?`${e.label} must be at most ${e.max}`:null,minLength:(e,r)=>typeof r=="string"&&e.minLength!==void 0&&r.length<e.minLength?`${e.label} must be at least ${e.minLength} characters`:null,maxLength:(e,r)=>typeof r=="string"&&e.maxLength!==void 0&&r.length>e.maxLength?`${e.label} must be at most ${e.maxLength} characters`:null,pattern:(e,r)=>e.pattern&&typeof r=="string"&&!e.pattern.test(r)?`${e.label} is invalid`:null,options:(e,r)=>e.type==="select"&&e.options&&!e.options.includes(r)?`${e.label} must be one of: ${e.options.join(", ")}`:null,dateRange:(e,r)=>{if(e.type==="date"&&r){const n=new Date(r);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,r)=>{if(e.customValidator&&typeof e.customValidator=="function"){const n=e.customValidator(r);if(typeof n=="string")return n}return null}},H=(e,r,n="en")=>{const u={};return e.sections.forEach(o=>{o.fields.forEach(a=>{const s=w(e,r,a.id);s.length>0&&(u[a.id]=s)})}),u},w=(e,r,n,u="en")=>{const o=e.sections.flatMap(x=>x.fields).find(x=>x.id===n);if(!o)return[];const a=o.validations||{},s=r[n],d=[],v=f(o.label,u);if(a.required&&(s==null||s==="")&&d.push(typeof a.required=="string"?a.required:`${v} is required`),a.min!==void 0&&typeof s=="number"&&s<a.min&&d.push(`${v} must be at least ${a.min}`),a.max!==void 0&&typeof s=="number"&&s>a.max&&d.push(`${v} must be at most ${a.max}`),a.minLength!==void 0&&typeof s=="string"&&s.length<a.minLength&&d.push(`${v} must be at least ${a.minLength} characters`),a.maxLength!==void 0&&typeof s=="string"&&s.length>a.maxLength&&d.push(`${v} must be at most ${a.maxLength} characters`),a.pattern&&typeof s=="string"&&!a.pattern.test(s)&&d.push(`${v} is invalid`),a.validate){const x=a.validate(s);x&&d.push(f(x,u))}return d};function X(e,r="en"){const[n,u]=g.useState({}),[o,a]=g.useState({});return{values:n,handleChange:(T,A)=>{u(E=>({...E,[T]:A})),a(E=>({...E,[T]:null}))},validateAll:()=>H(e,n,r),getValues:()=>n,getErrors:()=>o,validateField:T=>w(e,n,T,r)}}const ce=g.forwardRef(({dto:e,renderers:r,locale:n="en"},u)=>{const{values:o,handleChange:a,getValues:s,getErrors:d,validateAll:v,validateField:x}=X(e,n);return g.useImperativeHandle(u,()=>({getValues:s,getErrors:d,validateAll:v,validateField:x})),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(y=>l.jsx(J,{section:y,values:o,onChange:a,renderers:r,validateField:x,locale:n},y.id))]})});p.AutoCompleteField=V,p.CheckBoxInput=M,p.Field=G,p.FormBuilder=ce,p.MultiAutoCompleteField=q,p.RadioInput=U,p.Section=J,p.SelectInput=Y,p.TextAreaInput=B,p.TextInput=W,p.useFormBuilder=X,p.validateAll=H,p.validateField=w,p.validationRules=ie,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

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

@@ -6,6 +6,7 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<{
         dto: FormDTO;
         renderers?: Record<string, React.ComponentType<any>>;
+        locale?: string;
     } & React.RefAttributes<FormBuilderHandle>>;
     argTypes: {
         dto: {

package/dist/types/dto.d.ts

@@ -5,13 +5,18 @@ export type LayoutDTO = {
     align?: "start" | "center" | "end" | "stretch";
     justify?: "start" | "center" | "end" | "space-between";
 };
+export type I18nString = string | Record<string, string>;
+export type I18nOption = {
+    value: string;
+    label: I18nString;
+};
 export type InputType = "text" | "email" | "password" | "textarea" | "number" | "select" | "checkbox" | "date" | "autocomplete" | "multi-autocomplete" | "radio";
 export type FieldDTO = {
     id: string;
     type: InputType;
-    label: string;
-    placeholder?: string;
-    options?: string[];
+    label: I18nString;
+    placeholder?: I18nString;
+    options?: I18nOption[] | I18nString[];
     rows?: number;
     disabled?: boolean;
     defaultValue?: any;
@@ -20,27 +25,27 @@ export type FieldDTO = {
 };
 export type SectionDTO = {
     id: string;
-    heading?: string;
+    heading?: I18nString;
     headingFontSize?: number;
-    description?: string;
+    description?: I18nString;
     descriptionFontSize?: number;
     layout?: LayoutDTO;
     fields: FieldDTO[];
 };
 export type FormDTO = {
-    title?: string;
+    title?: I18nString;
     titleFontSize?: number;
-    description?: string;
+    description?: I18nString;
     descriptionFontSize?: number;
     layout?: LayoutDTO;
     sections: SectionDTO[];
 };
 export type Validations = {
-    required?: boolean | string;
+    required?: boolean | I18nString;
     min?: number;
     max?: number;
     minLength?: number;
     maxLength?: number;
     pattern?: RegExp;
-    validate?: (value: any) => string | null;
+    validate?: (value: any) => I18nString | null;
 };

package/dist/utils/i18n.d.ts

@@ -0,0 +1,18 @@
+import { I18nString, I18nOption } from '../types';
+/**
+ * Resolves an i18n string to a plain string based on locale
+ * @param value - Either a string or an object with locale keys
+ * @param locale - The current locale (default: 'en')
+ * @returns The resolved string
+ */
+export declare function resolveI18nString(value: I18nString | undefined, locale?: string): string;
+/**
+ * Resolves i18n option labels for display
+ * @param options - Array of string or i18n option objects
+ * @param locale - The current locale (default: 'en')
+ * @returns Array of objects with value and label
+ */
+export declare function resolveI18nOptionLabels(options: I18nOption[] | I18nString[], locale?: string): Array<{
+    value: string;
+    label: string;
+}>;

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './layout';
 export * from './validation';
+export * from './i18n';

package/dist/utils/validation.d.ts

@@ -11,7 +11,7 @@ export declare const validationRules: Record<string, ValidationFn>;
  * @param values - An object containing current values for all fields (keyed by field ID)
  * @returns An object mapping field IDs to arrays of error messages
  */
-export declare const validateAll: (dto: FormDTO, values: Record<string, any>) => Record<string, string[]>;
+export declare const validateAll: (dto: FormDTO, values: Record<string, any>, locale?: string) => Record<string, string[]>;
 /**
  * Validates a specific field in the form DTO.
  * Useful for real-time validation as the user interacts with individual fields.
@@ -20,5 +20,5 @@ export declare const validateAll: (dto: FormDTO, values: Record<string, any>) =>
  * @param fieldId - The ID of the specific field to validate
  * @returns An array of error messages for the field, empty if no errors or field not found
  */
-export declare const validateField: (dto: FormDTO, values: Record<string, any>, fieldId: string) => string[];
+export declare const validateField: (dto: FormDTO, values: Record<string, any>, fieldId: string, locale?: string) => string[];
 export {};

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": "0.0.8",
+    "version": "v1.0.0",
     "main": "dist/react-form-dto.umd.js",
     "module": "dist/react-form-dto.es.js",
     "types": "dist/index.d.ts",