react-form-dto 1.0.4 → 1.0.6

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

@@ -1,6 +1,6 @@
-(function(m,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],E):(m=typeof globalThis<"u"?globalThis:m||self,E(m.ReactFormDTO={},m.React,m.MaterialUI))})(this,(function(m,E,c){"use strict";var k={exports:{}},A={};var Y;function oe(){if(Y)return A;Y=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function n(a,o,s){var u=null;if(s!==void 0&&(u=""+s),o.key!==void 0&&(u=""+o.key),"key"in o){s={};for(var d in o)d!=="key"&&(s[d]=o[d])}else s=o;return o=s.ref,{$$typeof:e,type:a,key:u,ref:o!==void 0?o:null,props:s}}return A.Fragment=t,A.jsx=n,A.jsxs=n,A}var S={};var q;function ue(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function e(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===Te?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case $:return"Fragment";case fe:return"Profiler";case me:return"StrictMode";case xe:return"Suspense";case ge:return"SuspenseList";case Ee:return"Activity"}if(typeof r=="object")switch(typeof r.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),r.$$typeof){case C:return"Portal";case he:return r.displayName||"Context";case be:return(r._context.displayName||"Context")+".Consumer";case ve:var i=r.render;return r=r.displayName,r||(r=i.displayName||i.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case ye:return i=r.displayName||null,i!==null?i:e(r.type)||"Memo";case I:i=r._payload,r=r._init;try{return e(r(i))}catch{}}return null}function t(r){return""+r}function n(r){try{t(r);var i=!1}catch{i=!0}if(i){i=console;var p=i.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return p.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),t(r)}}function a(r){if(r===$)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===I)return"<...>";try{var i=e(r);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function o(){var r=L.A;return r===null?null:r.getOwner()}function s(){return Error("react-stack-top-frame")}function u(r){if(ee.call(r,"key")){var i=Object.getOwnPropertyDescriptor(r,"key").get;if(i&&i.isReactWarning)return!1}return r.key!==void 0}function d(r,i){function p(){re||(re=!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))}p.isReactWarning=!0,Object.defineProperty(r,"key",{get:p,configurable:!0})}function x(){var r=e(this.type);return te[r]||(te[r]=!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.")),r=this.props.ref,r!==void 0?r:null}function g(r,i,p,b,O,D){var h=p.ref;return r={$$typeof:y,type:r,key:i,props:p,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:x}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:O}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function j(r,i,p,b,O,D){var h=i.children;if(h!==void 0)if(b)if(je(h)){for(b=0;b<h.length;b++)R(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 R(h);if(ee.call(i,"key")){h=e(r);var _=Object.keys(i).filter(function(Re){return Re!=="key"});b=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",se[h+b]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(p,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react"),require("@mui/material")):typeof define=="function"&&define.amd?define(["exports","react","@mui/material"],m):(p=typeof globalThis<"u"?globalThis:p||self,m(p.ReactFormDTO={},p.React,p.MaterialUI))})(this,(function(p,m,v){"use strict";var M={exports:{}},I={};var $;function Ee(){if($)return I;$=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(s,a,o){var u=null;if(o!==void 0&&(u=""+o),a.key!==void 0&&(u=""+a.key),"key"in a){o={};for(var l in a)l!=="key"&&(o[l]=a[l])}else o=a;return a=o.ref,{$$typeof:e,type:s,key:u,ref:a!==void 0?a:null,props:o}}return I.Fragment=r,I.jsx=n,I.jsxs=n,I}var V={};var ee;function Te(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&(function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===W?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case N:return"Fragment";case D:return"Profiler";case H:return"StrictMode";case S:return"Suspense";case k:return"SuspenseList";case X: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 O:return"Portal";case g:return t.displayName||"Context";case f:return(t._context.displayName||"Context")+".Consumer";case _:var d=t.render;return t=t.displayName,t||(t=d.displayName||d.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case C:return d=t.displayName||null,d!==null?d:e(t.type)||"Memo";case w:d=t._payload,t=t._init;try{return e(t(d))}catch{}}return null}function r(t){return""+t}function n(t){try{r(t);var d=!1}catch{d=!0}if(d){d=console;var x=d.error,R=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return x.call(d,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",R),r(t)}}function s(t){if(t===N)return"<>";if(typeof t=="object"&&t!==null&&t.$$typeof===w)return"<...>";try{var d=e(t);return d?"<"+d+">":"<...>"}catch{return"<...>"}}function a(){var t=Z.A;return t===null?null:t.getOwner()}function o(){return Error("react-stack-top-frame")}function u(t){if(be.call(t,"key")){var d=Object.getOwnPropertyDescriptor(t,"key").get;if(d&&d.isReactWarning)return!1}return t.key!==void 0}function l(t,d){function x(){he||(he=!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)",d))}x.isReactWarning=!0,Object.defineProperty(t,"key",{get:x,configurable:!0})}function b(){var t=e(this.type);return ve[t]||(ve[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 F(t,d,x,R,Y,q){var j=x.ref;return t={$$typeof:A,type:t,key:d,props:x,_owner:R},(j!==void 0?j:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:b}):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:Y}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function E(t,d,x,R,Y,q){var j=d.children;if(j!==void 0)if(R)if(Oe(j)){for(R=0;R<j.length;R++)h(j[R]);Object.freeze&&Object.freeze(j)}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 h(j);if(be.call(d,"key")){j=e(t);var P=Object.keys(d).filter(function(Pe){return Pe!=="key"});R=0<P.length?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}",ye[j+R]||(P=0<P.length?"{"+P.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} />`,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"})}));
+  <%s key={someKey} {...props} />`,R,j,P,j),ye[j+R]=!0)}if(j=null,x!==void 0&&(n(x),j=""+x),u(d)&&(n(d.key),j=""+d.key),"key"in d){x={};for(var K in d)K!=="key"&&(x[K]=d[K])}else x=d;return j&&l(x,typeof t=="function"?t.displayName||t.name||"Unknown":t),F(t,j,x,a(),Y,q)}function h(t){c(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===w&&(t._payload.status==="fulfilled"?c(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function c(t){return typeof t=="object"&&t!==null&&t.$$typeof===A}var y=m,A=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),N=Symbol.for("react.fragment"),H=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),f=Symbol.for("react.consumer"),g=Symbol.for("react.context"),_=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),C=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),X=Symbol.for("react.activity"),W=Symbol.for("react.client.reference"),Z=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,be=Object.prototype.hasOwnProperty,Oe=Array.isArray,Q=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(t){return t()}};var he,ve={},ge=y.react_stack_bottom_frame.bind(y,o)(),xe=Q(s(o)),ye={};V.Fragment=N,V.jsx=function(t,d,x){var R=1e4>Z.recentlyCreatedOwnerStacks++;return E(t,d,x,!1,R?Error("react-stack-top-frame"):ge,R?Q(s(t)):xe)},V.jsxs=function(t,d,x){var R=1e4>Z.recentlyCreatedOwnerStacks++;return E(t,d,x,!0,R?Error("react-stack-top-frame"):ge,R?Q(s(t)):xe)}})()),V}var te;function Re(){return te||(te=1,process.env.NODE_ENV==="production"?M.exports=Ee():M.exports=Te()),M.exports}var i=Re();function T(e,r="en"){return e?typeof e=="string"?e:e[r]||e.en||Object.values(e)[0]||"":""}function z(e,r="en"){return e?e.map(n=>typeof n=="string"?{value:n,label:n}:{value:n.value,label:T(n.label,r)}):[]}function re({field:e,value:r,onChange:n,error:s,locale:a="en"}){const o=z(e.options||[],a);return i.jsxs(v.FormControl,{fullWidth:!0,children:[i.jsx(v.InputLabel,{id:`${e.id}-label`,children:T(e.label,a)}),i.jsx(v.Select,{labelId:`${e.id}-label`,value:r,id:e.id,name:e.id,onChange:u=>n(u.target.value),label:T(e.label,a),error:!!s,children:o?.map(u=>i.jsx(v.MenuItem,{value:u.value,children:u.label},u.label))}),s&&i.jsx(v.Typography,{variant:"caption",color:"error",children:s})]})}function ne({field:e,value:r,onChange:n,error:s,locale:a}){return console.log("error",s),i.jsx(v.TextField,{fullWidth:!0,label:T(e.label,a),placeholder:T(e.placeholder||"",a),value:r||"",name:e.id,onChange:o=>n(o.target.value),disabled:e.disabled,type:e.type,slotProps:{inputLabel:{shrink:e.type==="date"?!0:void 0}},error:!!s,helperText:s})}function se({field:e,value:r,onChange:n,error:s,locale:a}){return i.jsxs(i.Fragment,{children:[i.jsx(v.FormControlLabel,{name:e.id,control:i.jsx(v.Checkbox,{checked:!!r,onChange:o=>n(o.target.checked),disabled:e.disabled}),label:T(e.label,a)}),s&&i.jsx(v.FormHelperText,{children:s})]})}const ae=({field:e,value:r,onChange:n,error:s,locale:a})=>{const o=z(e.options||[],a);return i.jsx(v.Autocomplete,{fullWidth:!0,options:o||[],value:r||null,onChange:(u,l)=>n(l),renderInput:u=>i.jsx(v.TextField,{...u,name:e.id,label:T(e.label,a),placeholder:T(e.placeholder||"",a),disabled:e.disabled,error:!!s,helperText:s})})},oe=({field:e,value:r,onChange:n,error:s,locale:a})=>{const o=z(e.options||[],a);return i.jsx(v.Autocomplete,{multiple:!0,fullWidth:!0,options:o||[],value:r||[],onChange:(u,l)=>n(l),renderInput:u=>i.jsx(v.TextField,{...u,name:e.id,label:T(e.label,a),placeholder:T(e.placeholder||"",a),disabled:e.disabled,error:!!s,helperText:s})})},ue=({field:e,value:r,onChange:n,error:s,locale:a="en"})=>i.jsx(v.TextField,{fullWidth:!0,multiline:!0,rows:e.rows||4,label:T(e.label,a),placeholder:T(e.placeholder||"",a),value:r||"",onChange:o=>n(o.target.value),required:!!e.validations?.required,disabled:e.disabled,error:!!s,helperText:s}),le=({field:e,value:r,onChange:n,error:s,locale:a="en"})=>{const o=z(e.options||[],a);return i.jsxs(v.FormControl,{component:"fieldset",fullWidth:!0,error:!!s,children:[i.jsxs(v.FormLabel,{component:"legend",children:[T(e.label,a),e.validations?.required?" *":""]}),i.jsx(v.RadioGroup,{row:e.layout?.direction==="row"||!1,value:r||"",onChange:u=>n(u.target.value),children:(o||[]).map(u=>i.jsx(v.FormControlLabel,{value:u.value,control:i.jsx(v.Radio,{}),label:u.label,disabled:e.disabled},u.label))}),s&&i.jsx(v.FormHelperText,{children:s})]})},je=({field:e,value:r,onChange:n,error:s,locale:a="en"})=>{switch(e.type){case"text":case"date":case"email":case"password":case"number":return i.jsx(ne,{field:e,value:r,onChange:n,error:s,locale:a});case"select":return i.jsx(re,{field:e,value:r,onChange:n,error:s,locale:a});case"autocomplete":return i.jsx(ae,{field:e,value:r,onChange:n,error:s,locale:a});case"multi-autocomplete":return i.jsx(oe,{field:e,value:r,onChange:n,error:s,locale:a});case"checkbox":return i.jsx(se,{field:e,value:r,onChange:n,error:s,locale:a});case"textarea":return i.jsx(ue,{field:e,value:r,onChange:n,error:s,locale:a});case"radio":return i.jsx(le,{field:e,value:r,onChange:n,error:s,locale:a});default:return i.jsxs("span",{children:["Unsupported field type: ",e.type]})}},ie=({field:e,value:r,onChange:n,error:s,renderers:a={},locale:o="en"})=>{const u=a[e.type]||je;return i.jsx(u,{field:e,value:r,onChange:n,error:s,locale:o})};function Fe(e){const r=e??12;return{xs:12,sm:r,md:r,lg:r,xl:r}}const _e={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}},B=(e,r,n="en")=>{const s={};return e.sections.forEach(a=>{a.fields.forEach(o=>{const u=L(e,r,o.id);u.length>0&&(s[o.id]=u)})}),s},L=(e,r,n,s="en")=>{const a=e.sections.flatMap(F=>F.fields).find(F=>F.id===n);if(!a)return[];const o=a.validations||{},u=r[n],l=[],b=T(a.label,s);if(o.required&&(u==null||u==="")&&l.push(typeof o.required=="string"?o.required:`${b} is required`),o.min!==void 0&&typeof u=="number"&&u<o.min&&l.push(`${b} must be at least ${o.min}`),o.max!==void 0&&typeof u=="number"&&u>o.max&&l.push(`${b} must be at most ${o.max}`),o.minLength!==void 0&&typeof u=="string"&&u.length<o.minLength&&l.push(`${b} must be at least ${o.minLength} characters`),o.maxLength!==void 0&&typeof u=="string"&&u.length>o.maxLength&&l.push(`${b} must be at most ${o.maxLength} characters`),o.pattern&&typeof u=="string"&&!o.pattern.test(u)&&l.push(`${b} is invalid`),o.validate){const F=o.validate(u);F&&l.push(T(F,s))}return l};function U(e,r){if(!e)return!0;if("field"in e){let n=r[e.field]??"";return Array.isArray(n)?n=n.map(s=>s.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(s=>e.in.includes(s)):!1:e.in.includes(n):e.notIn!==void 0?Array.isArray(n)?n.every(s=>!e.notIn.includes(s)):!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(s=>U(s,r));if(e.operator==="OR")return e.conditions.some(n=>U(n,r))}return!1}const ce=({section:e,values:r,onChange:n,renderers:s,validateField:a,locale:o="en"})=>i.jsxs(v.Box,{mb:2,children:[e.heading&&i.jsx(v.Typography,{variant:"h6",sx:{fontSize:e.headingFontSize?`${e.headingFontSize}rem`:"1.25rem"},gutterBottom:!0,color:"black",children:T(e.heading,o)}),e.description&&i.jsx(v.Typography,{variant:"body2",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:T(e.description,o)}),i.jsx(v.Grid,{container:!0,spacing:2,children:e.fields.map(u=>U(u.visibleWhen,r)&&i.jsx(v.Grid,{size:Fe(u.layout?.cols),children:i.jsx(ie,{field:u,value:r[u.id],onChange:l=>n(u.id,l),renderers:s,error:a(u.id)?.join(","),locale:o})},u.id))})]});function de(e,r="en",n){const[s,a]=m.useState({}),[o,u]=m.useState({});return{values:s,handleChange:(c,y)=>{if(a(A=>({...A,[c]:y})),u(A=>({...A,[c]:null})),n){let A=y;Array.isArray(y)?A=y.map(O=>O.value??""):typeof y=="object"&&y!==null&&(A=y.value??""),n(c,A)}},validateAll:()=>B(e,s,r),getValues:()=>s,getErrors:()=>o,validateField:c=>L(e,s,c,r)}}const G=m.createContext(void 0);function J(){const e=m.useContext(G);if(!e)throw new Error("useFormContext must be used inside a <FormProvider>.");return e}function fe(){return m.useContext(G)}const me=m.forwardRef(({dto:e,renderers:r,locale:n="en",handleChangeCallback:s},a)=>{const o=fe(),u=de(e,n,s),l=!!o,b=l?o.values:u.values,F=(h,c)=>{if(l){if(o.setValue(h,c,!0),s){let y=c;Array.isArray(c)?y=c.map(A=>A.value??""):typeof c=="object"&&c!==null&&(y=c.value??""),s(h,y)}}else u.handleChange(h,c)},E=h=>{if(l&&o){const c=o.errors[h];return c?[c]:[]}return u.validateField(h)};return m.useImperativeHandle(a,()=>({getValues:()=>l?o.getValues():u.getValues(),getErrors:()=>l?o.errors:u.getErrors(),validateAll:()=>{const h=B(e,b,n);return l&&e.sections.flatMap(c=>c.fields).forEach(c=>{const y=h[c.id];y?.length?o.setError(c.id,y[0]):o.clearError(c.id)}),h},validateField:h=>{const c=L(e,b,h,n);return l&&o.setError(h,c[0]??null),c},handleChange:F})),i.jsxs(i.Fragment,{children:[e.title&&i.jsx(v.Typography,{variant:"h5",color:"black",sx:{fontSize:e.titleFontSize?`${e.titleFontSize}rem`:"1.5rem",fontWeight:"bold"},gutterBottom:!0,children:T(e.title,n)}),e.description&&i.jsx(v.Typography,{component:"p",sx:{fontSize:e.descriptionFontSize?`${e.descriptionFontSize}rem`:"inherit"},color:"textSecondary",gutterBottom:!0,children:T(e.description,n)}),e.sections.map(h=>i.jsx(ce,{section:h,values:b,onChange:F,renderers:r,validateField:E,locale:n},h.id))]})}),Ae=e=>{const r=m.useRef(null),{dto:n,locale:s,renderers:a,handleChangeCallback:o}=e;return{getValues:()=>r.current?.getValues()??{},getErrors:()=>r.current?.getErrors()??{},validateAll:()=>r.current?.validateAll()??{},validateField:u=>r.current?.validateField(u)??[],handleChange:(u,l)=>r.current?.handleChange?.(u,l),Form:()=>i.jsx(me,{ref:r,dto:n,locale:s,renderers:a,handleChangeCallback:o})}};function pe(e={}){const[r,n]=m.useState({...e.defaultValues}),[s,a]=m.useState({}),[o,u]=m.useState({}),l=m.useRef({}),b=m.useRef(r);b.current=r;const F=m.useCallback((f,g)=>({name:f,ref:_=>{l.current[f]=_},onChange:_=>{const S=_.target.value;n(C=>({...C,[f]:S})),u(C=>({...C,[f]:!0}));const k=g?.validate??e.validate?.[f];a(C=>({...C,[f]:k?k(S):null}))},onBlur:()=>{u(_=>({..._,[f]:!0}))}}),[e.validate]),E=m.useCallback((f,g,_)=>{if(n(S=>({...S,[f]:g})),_){const S=e.validate?.[f];a(k=>({...k,[f]:S?S(g):null}))}},[e.validate]),h=m.useCallback((f,g)=>{a(_=>({..._,[f]:g}))},[]),c=m.useCallback(f=>{a(g=>({...g,[f]:null}))},[]),y=m.useCallback(()=>b.current,[]),A=m.useCallback(f=>{const g=f??e.defaultValues??{};n(g),b.current=g,a({}),u({})},[e.defaultValues]),O=m.useCallback(f=>{const g=b.current;if(!f){const k={};let C=!0;for(const[w,X]of Object.entries(e.validate??{})){const W=X(g[w]);k[w]=W??null,W&&(C=!1)}return a(w=>({...w,...k})),C}const _=e.validate?.[f],S=_?_(g[f]):null;return a(k=>({...k,[f]:S??null})),!S},[e.validate]),N=m.useCallback(f=>g=>{g?.preventDefault&&g.preventDefault(),O()&&f(b.current,g)},[O]),H=m.useCallback(f=>{const g=b.current;return f?typeof f=="string"?g[f]:f.map(_=>g[_]):g},[]),D={values:r,errors:s,touchedFields:o,register:F,setValue:E,getValues:y,setError:h,clearError:c,handleSubmit:N,reset:A,trigger:O,watch:H,control:void 0};return D.control=D,D}function Se(e,r){const n=r?.locale??"en",s=m.useMemo(()=>e.sections.flatMap(l=>l.fields).reduce((l,b)=>(l[b.id]=b.defaultValue??"",l),{}),[]),a=m.useRef(s),o=m.useMemo(()=>e.sections.flatMap(l=>l.fields).filter(l=>l.validations).reduce((l,b)=>(l[b.id]=F=>{const E={...a.current,[b.id]:F};return L(e,E,b.id,n)[0]??null},l),{}),[n]),u=pe({defaultValues:s,validate:o});return a.current=u.values,u}function ke(e){const{values:r,setValue:n}=J(),s=e.name,a=r[s]??[];return{fields:a,append:E=>n(s,[...a,E]),prepend:E=>n(s,[E,...a]),remove:E=>n(s,a.filter((h,c)=>c!==E)),swap:(E,h)=>{const c=[...a];[c[E],c[h]]=[c[h],c[E]],n(s,c)},insert:(E,h)=>{const c=[...a];c.splice(E,0,h),n(s,c)}}}function Ce(e){const{values:r}=J();return Array.isArray(e)?e.map(n=>r[n]):r[e]}function we({value:e,children:r}){return i.jsx(G.Provider,{value:e,children:r})}p.AutoCompleteField=ae,p.CheckBoxInput=se,p.Field=ie,p.FormBuilder=me,p.FormProvider=we,p.MultiAutoCompleteField=oe,p.RadioInput=le,p.Section=ce,p.SelectInput=re,p.TextAreaInput=ue,p.TextInput=ne,p.useFieldArray=ke,p.useForm=pe,p.useFormBuilder=de,p.useFormBuilderController=Ae,p.useFormContext=J,p.useFormDTO=Se,p.useOptionalFormContext=fe,p.useWatch=Ce,p.validateAll=B,p.validateField=L,p.validationRules=_e,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

package/dist/stories/Demo.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        layout: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};

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.4",
+    "version": "1.0.6",
     "main": "dist/react-form-dto.umd.js",
     "module": "dist/react-form-dto.es.js",
     "types": "dist/index.d.ts",
@@ -25,11 +25,13 @@
         "react-dom": ">=17"
     },
     "devDependencies": {
+        "@storybook/react": "^10.3.6",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.1.1",
         "eslint": "^9.39.1",
+        "storybook": "^10.3.6",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.4",
         "vite": "^7.2.4",
@@ -55,8 +57,6 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^7.3.6",
-        "@storybook/react": "^10.1.4",
-        "@storybook/react-vite": "^10.1.4",
-        "storybook": "^10.1.4"
+        "@storybook/react-vite": "^10.1.4"
     }
 }