@saas-ui/forms 0.1.8 → 0.1.9
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/dist/Field.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +1 -1
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
- package/src/field.tsx +1 -3
package/CHANGELOG.md
CHANGED
package/dist/Field.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAIL,gBAAgB,EASjB,MAAM,kBAAkB,CAAA;AAQzB,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjE;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAA;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,CAAA;IACb;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwB1C,CAAA;AAED,eAAO,MAAM,KAAK,6HAOjB,CAAA;
|
1
|
+
{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../src/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAIL,gBAAgB,EASjB,MAAM,kBAAkB,CAAA;AAQzB,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACjE;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAA;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,CAAA;IACb;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwB1C,CAAA;AAED,eAAO,MAAM,KAAK,6HAOjB,CAAA;AA0CD,eAAO,MAAM,mBAAmB,mBAAoB,GAAG,2FAmBtD,CAAA;AAED,eAAO,MAAM,qBAAqB,mBAAoB,GAAG,2FAcxD,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAC1B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,SACtB,MAAM,aACD,GAAG,gLAsBf,CAAA;AAID,eAAO,MAAM,UAAU,6HAAmC,CAAA;AAC1D,eAAO,MAAM,gBAAgB,6HAE3B,CAAA;AACF,eAAO,MAAM,kBAAkB,6HAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,6HAA0C,CAAA;AACpE,eAAO,MAAM,WAAW,6HAavB,CAAA;AACD,eAAO,MAAM,WAAW,6HAEtB,CAAA;AACF,eAAO,MAAM,aAAa,6HAYzB,CAAA;AACD,eAAO,MAAM,UAAU,6HAErB,CAAA;AACF,eAAO,MAAM,QAAQ,6HAEnB,CAAA;AACF,eAAO,MAAM,iBAAiB,6HAI7B,CAAA"}
|
package/dist/index.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
var e=require("react"),r=require("react-hook-form"),t=require("@chakra-ui/react"),n=require("@saas-ui/number-input"),a=require("@saas-ui/password-input"),l=require("@saas-ui/radio"),i=require("@saas-ui/pin-input"),o=require("@saas-ui/select"),u=require("yup"),s=require("@hookform/resolvers/yup"),c=require("@chakra-ui/system"),m=require("@chakra-ui/icons"),d=require("@saas-ui/button"),f=require("@chakra-ui/react-utils"),p=require("@saas-ui/input-right-button");function v(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var x=/*#__PURE__*/v(e);function y(){return y=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},y.apply(this,arguments)}function h(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}function b(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var F=["name","label","placeholder"],E=["name","label","help","variant","hideLabel","children"],g=["label","isDisabled","isInvalid","isReadOnly","isRequired","isOptional","variant"],w=["name","rules"],C=["ref"],A=["name","rules"],R=["ref"],k=["label"],O=["label"],I={},S=function(e){var n=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,u=e.children,s=h(e,E),c=function(e,t){return r.get(t.errors,e)}(n,r.useFormContext().formState);/*#__PURE__*/return x.createElement(t.FormControl,y({isInvalid:!!c,variant:i},s),a&&!o?/*#__PURE__*/x.createElement(t.FormLabel,{variant:i},a):null,/*#__PURE__*/x.createElement(t.Box,null,u,!l||null!=c&&c.message?null:/*#__PURE__*/x.createElement(t.FormHelperText,null,l),(null==c?void 0:c.message)&&/*#__PURE__*/x.createElement(t.FormErrorMessage,null,null==c?void 0:c.message)))},q=t.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return x.createElement(I[void 0===t?"text":t]||I.text,y({ref:r},e))}),j=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=h(n,w),u=r.useFormContext();/*#__PURE__*/return x.createElement(r.Controller,{name:l,control:u.control,rules:i,render:function(r){var n=r.field,l=n.ref,i=h(n,C);/*#__PURE__*/return x.createElement(e,y({},i,o,{ref:t.useMergeRefs(a,l)}))}})})},L=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=h(n,A),u=(0,r.useFormContext().register)(l,i),s=u.ref,c=h(u,R);/*#__PURE__*/return x.createElement(e,y({},c,o,{ref:t.useMergeRefs(a,s)}))})},P=function(e,r,n){var a=function(e,r){var n=r.displayName,a=r.hideLabel,l=r.BaseField,i=t.forwardRef(function(r,t){var n=r.label,i=r.isDisabled,o=r.isInvalid,u=r.isReadOnly,s=r.isRequired,c=r.isOptional,m=r.variant,d=h(r,g);/*#__PURE__*/return x.createElement(l,{label:n,hideLabel:a,isDiabled:i,isInvalid:o,isReadOnly:u,isRequired:s,isOptional:c,variant:m},/*#__PURE__*/x.createElement(e,y({ref:t,label:n},d)))});return i.displayName=n,i}(null!=n&&n.isControlled?j(r):L(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==n?void 0:n.hideLabel,BaseField:(null==n?void 0:n.BaseField)||S});return I[e]=a,a},N=P("text",t.Input),B=P("number",n.NumberInput,{isControlled:!0}),V=P("password",a.PasswordInput),T=P("textarea",t.Textarea),D=P("switch",t.forwardRef(function(e,r){var n=e.label,a=h(e,k);/*#__PURE__*/return x.createElement(t.Switch,y({ref:r},a),n)}),{isControlled:!0,hideLabel:!0}),M=P("select",o.Select,{isControlled:!0}),_=P("checkbox",t.forwardRef(function(e,r){var n=e.label,a=h(e,O);/*#__PURE__*/return x.createElement(t.Checkbox,y({ref:r},a),n)}),{hideLabel:!0}),G=P("radio",l.RadioInput,{isControlled:!0}),U=P("pin",i.PinInput,{isControlled:!0}),z=P("native-select",o.NativeSelect,{isControlled:!0}),H=s.yupResolver,$=function(e){var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},J=function(e,r){for(var t,n=function(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return b(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?b(e,r):void 0}}(e))){t&&(e=t);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(e.tests);!(t=n()).done;){var a,l=t.value;if(null!=(a=l.OPTIONS)&&a.params[r])return l.OPTIONS.params[r]}},K=function(e){var r,t=[];for(var n in r="array"===e.type?e.innerType.fields:e.fields){var a=r[n],l={};"array"===a.type&&(l.min=J(a,"min"),l.max=J(a,"max")),t.push(y({name:n,label:a.spec.label||n,type:$(a)},l))}return t},Q=["children"],W=function(e){/*#__PURE__*/return x.createElement(t.chakra.div,null,e.children)},X=function(e){var r,n,a,l=e.children,i=h(e,Q),o=y({},null!=(r=null==(n=t.useTheme().components)||null==(a=n.FormLayout)?void 0:a.defaultProps)?r:{spacing:4},i);/*#__PURE__*/return x.createElement(t.SimpleGrid,o,x.Children.map(l,function(e){return x.isValidElement(e)?/*#__PURE__*/x.createElement(W,null,e):e}))},Y=function(e,r){return x.Children.map(r,function(r){return x.isValidElement(r)&&r.props.name?x.cloneElement(r,y({},r.props,{name:e+"."+r.props.name})):r})},Z=f.createContext({name:"ArrayFieldContext"}),ee=Z[0],re=Z[1],te=f.createContext({name:"ArrayFieldRowContext"}),ne=te[0],ae=te[1],le=function(e){var t=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,u=r.useFormContext();return y({},r.useFieldArray({control:u.control,name:t,keyName:l}),{name:t,defaultValue:a,min:i,max:o})},ie=function(e){var t=e.index,n=r.useFormContext().clearErrors,a=re(),l=a.name,i=a.remove,o=a.fields;return x.useEffect(function(){n(l)},[]),{index:t,isFirst:0===t,isLast:t===o.length-1,name:l+"."+t,remove:x.useCallback(function(){n(l),i(t)},[t])}},oe=function(){var e=ae(),r=e.isFirst,t=e.remove,n=re(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},ue=function(){var e=re(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},se=["children","columns","spacing"],ce=["children"],me=["name","defaultValue","keyName","min","max","children"],de=function(e){/*#__PURE__*/return x.createElement(pe,{index:e.index},/*#__PURE__*/x.createElement(fe,{columns:e.columns,spacing:e.spacing},e.children),/*#__PURE__*/x.createElement(ve,null))},fe=function(e){var r=e.children,t=e.columns,n=e.spacing,a=h(e,se),l=ae().name;/*#__PURE__*/return x.createElement(X,y({flex:"1",columns:t,gridGap:n,mr:"2"},a),Y(l,r))},pe=function(e){var r=e.children,t=ie({index:e.index});/*#__PURE__*/return x.createElement(ne,{value:t},/*#__PURE__*/x.createElement(c.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},ve=function(e){/*#__PURE__*/return x.createElement(d.IconButton,y({icon:/*#__PURE__*/x.createElement(m.MinusIcon,null),"aria-label":"Remove row"},oe(),e))},xe=function(e){/*#__PURE__*/return x.createElement(d.IconButton,y({icon:/*#__PURE__*/x.createElement(m.AddIcon,null),"aria-label":"Add row",float:"right"},ue(),e))},ye=function(e){var r=e.children,t=h(e,ce);/*#__PURE__*/return x.createElement(be,t,/*#__PURE__*/x.createElement(he,null,function(e){/*#__PURE__*/return x.createElement(x.Fragment,null,e.map(function(e,t){/*#__PURE__*/return x.createElement(de,{key:e.id,index:t},r)}))}),/*#__PURE__*/x.createElement(xe,null))},he=function(e){return(0,e.children)(re().fields)},be=function(e){var r=e.name,t=e.defaultValue,n=e.keyName,a=e.min,l=e.max,i=e.children,o=h(e,me),u=le({name:r,defaultValue:t,keyName:n,min:a,max:l});/*#__PURE__*/return x.createElement(ee,{value:u},/*#__PURE__*/x.createElement(S,y({name:r},o),i))},Fe=["name","children","columns","spacing"],Ee=function(e){var r=e.name,t=e.children,n=e.columns,a=e.spacing,l=h(e,Fe);/*#__PURE__*/return x.createElement(S,y({name:r},l),/*#__PURE__*/x.createElement(X,{columns:n,gridGap:a},Y(r,t)))},ge=["name","type"],we=["schema"],Ce=["name","type","defaultValue"],Ae=function(e,r){return K(function(e,r){return u.reach(e,r)}(e,r)).map(function(e){var r=e.name,t=e.type,n=h(e,ge);/*#__PURE__*/return x.createElement(q,y({key:r,name:r,type:t},n))})},Re=function(e){var r=e.schema,t=h(e,we);/*#__PURE__*/return x.createElement(X,t,K(r).map(function(e){var t=e.name,n=e.type,a=h(e,Ce);return"array"===n?/*#__PURE__*/x.createElement(ye,y({name:t},a),Ae(r,t)):"object"===n?/*#__PURE__*/x.createElement(Ee,y({name:t},a),Ae(r,t)):/*#__PURE__*/x.createElement(q,y({key:t,name:t,type:n},a))}))},ke=["schema","defaultValues","onSubmit","onError","children"],Oe=t.forwardRef(function(e,n){var a=e.schema,l=e.defaultValues,i=e.onSubmit,o=e.onError,u=e.children,s=h(e,ke),c={mode:"all",defaultValues:l};a&&(c.resolver=H(a));var m=r.useForm(c);/*#__PURE__*/return x.createElement(r.FormProvider,m,/*#__PURE__*/x.createElement(t.chakra.form,y({ref:n,onSubmit:(0,m.handleSubmit)(i,o)},s),u))}),Ie=["children"],Se=c.forwardRef(function(e,t){var n=e.children,a=h(e,Ie),l=r.useFormContext();/*#__PURE__*/return x.createElement(d.Button,y({type:"submit",isLoading:l.formState.isSubmitting,isPrimary:!0,ref:t},a),n)}),qe=["schema","submitLabel"],je=t.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=h(e,qe);/*#__PURE__*/return x.createElement(Oe,y({},a,{schema:t,ref:r}),/*#__PURE__*/x.createElement(X,null,/*#__PURE__*/x.createElement(Re,{schema:t}),n&&/*#__PURE__*/x.createElement(Se,{label:n})))});je.defaultProps={submitLabel:"Submit"},exports.ArrayField=ye,exports.ArrayFieldAddButton=xe,exports.ArrayFieldContainer=be,exports.ArrayFieldProvider=ee,exports.ArrayFieldRemoveButton=ve,exports.ArrayFieldRow=de,exports.ArrayFieldRowContainer=pe,exports.ArrayFieldRowFields=fe,exports.ArrayFieldRowProvider=ne,exports.ArrayFieldRows=he,exports.AutoForm=je,exports.BaseField=S,exports.CheckboxField=_,exports.DisplayField=function(e){var n=e.name,a=e.label,l=h(e,F),i=r.useFormContext().getValues;/*#__PURE__*/return x.createElement(t.FormControl,l,a?/*#__PURE__*/x.createElement(t.FormLabel,{htmlFor:n},a):null,/*#__PURE__*/x.createElement(t.Text,{fontSize:"md"},i(n)))},exports.Field=q,exports.Fields=Re,exports.Form=Oe,exports.FormLayout=X,exports.InputField=N,exports.NativeSelectField=z,exports.NumberInputField=B,exports.ObjectField=Ee,exports.PasswordInputFIeld=V,exports.PinField=U,exports.RadioField=G,exports.SelectField=M,exports.SubmitButton=Se,exports.SwitchField=D,exports.TextareaField=T,exports.registerFieldType=P,exports.useArrayField=le,exports.useArrayFieldAddButton=ue,exports.useArrayFieldContext=re,exports.useArrayFieldRemoveButton=oe,exports.useArrayFieldRow=ie,exports.useArrayFieldRowContext=ae,exports.withControlledInput=j,exports.withUncontrolledInput=L,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
|
1
|
+
var e=require("react"),r=require("react-hook-form"),t=require("@chakra-ui/react"),n=require("@saas-ui/number-input"),a=require("@saas-ui/password-input"),l=require("@saas-ui/radio"),i=require("@saas-ui/pin-input"),o=require("@saas-ui/select"),u=require("yup"),s=require("@hookform/resolvers/yup"),c=require("@chakra-ui/system"),m=require("@chakra-ui/icons"),d=require("@saas-ui/button"),f=require("@chakra-ui/react-utils"),p=require("@saas-ui/input-right-button");function v(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var x=/*#__PURE__*/v(e);function y(){return y=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},y.apply(this,arguments)}function h(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}function b(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var F=["name","label","placeholder"],E=["name","label","help","variant","hideLabel","children"],g=["label","isDisabled","isInvalid","isReadOnly","isRequired","variant"],w=["name","rules"],C=["ref"],A=["name","rules"],R=["ref"],k=["label"],I=["label"],S={},O=function(e){var n=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,u=e.children,s=h(e,E),c=function(e,t){return r.get(t.errors,e)}(n,r.useFormContext().formState);/*#__PURE__*/return x.createElement(t.FormControl,y({isInvalid:!!c,variant:i},s),a&&!o?/*#__PURE__*/x.createElement(t.FormLabel,{variant:i},a):null,/*#__PURE__*/x.createElement(t.Box,null,u,!l||null!=c&&c.message?null:/*#__PURE__*/x.createElement(t.FormHelperText,null,l),(null==c?void 0:c.message)&&/*#__PURE__*/x.createElement(t.FormErrorMessage,null,null==c?void 0:c.message)))},q=t.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return x.createElement(S[void 0===t?"text":t]||S.text,y({ref:r},e))}),j=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=h(n,w),u=r.useFormContext();/*#__PURE__*/return x.createElement(r.Controller,{name:l,control:u.control,rules:i,render:function(r){var n=r.field,l=n.ref,i=h(n,C);/*#__PURE__*/return x.createElement(e,y({},i,o,{ref:t.useMergeRefs(a,l)}))}})})},L=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=h(n,A),u=(0,r.useFormContext().register)(l,i),s=u.ref,c=h(u,R);/*#__PURE__*/return x.createElement(e,y({},c,o,{ref:t.useMergeRefs(a,s)}))})},P=function(e,r,n){var a=function(e,r){var n=r.displayName,a=r.hideLabel,l=r.BaseField,i=t.forwardRef(function(r,t){var n=r.label,i=r.isDisabled,o=r.isInvalid,u=r.isReadOnly,s=r.isRequired,c=r.variant,m=h(r,g);/*#__PURE__*/return x.createElement(l,{label:n,hideLabel:a,isDisabled:i,isInvalid:o,isReadOnly:u,isRequired:s,variant:c},/*#__PURE__*/x.createElement(e,y({ref:t,label:n},m)))});return i.displayName=n,i}(null!=n&&n.isControlled?j(r):L(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==n?void 0:n.hideLabel,BaseField:(null==n?void 0:n.BaseField)||O});return S[e]=a,a},N=P("text",t.Input),B=P("number",n.NumberInput,{isControlled:!0}),V=P("password",a.PasswordInput),T=P("textarea",t.Textarea),D=P("switch",t.forwardRef(function(e,r){var n=e.label,a=h(e,k);/*#__PURE__*/return x.createElement(t.Switch,y({ref:r},a),n)}),{isControlled:!0,hideLabel:!0}),M=P("select",o.Select,{isControlled:!0}),_=P("checkbox",t.forwardRef(function(e,r){var n=e.label,a=h(e,I);/*#__PURE__*/return x.createElement(t.Checkbox,y({ref:r},a),n)}),{hideLabel:!0}),G=P("radio",l.RadioInput,{isControlled:!0}),U=P("pin",i.PinInput,{isControlled:!0}),z=P("native-select",o.NativeSelect,{isControlled:!0}),H=s.yupResolver,$=function(e){var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},J=function(e,r){for(var t,n=function(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return b(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?b(e,r):void 0}}(e))){t&&(e=t);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(e.tests);!(t=n()).done;){var a,l=t.value;if(null!=(a=l.OPTIONS)&&a.params[r])return l.OPTIONS.params[r]}},K=function(e){var r,t=[];for(var n in r="array"===e.type?e.innerType.fields:e.fields){var a=r[n],l={};"array"===a.type&&(l.min=J(a,"min"),l.max=J(a,"max")),t.push(y({name:n,label:a.spec.label||n,type:$(a)},l))}return t},Q=["children"],W=function(e){/*#__PURE__*/return x.createElement(t.chakra.div,null,e.children)},X=function(e){var r,n,a,l=e.children,i=h(e,Q),o=y({},null!=(r=null==(n=t.useTheme().components)||null==(a=n.FormLayout)?void 0:a.defaultProps)?r:{spacing:4},i);/*#__PURE__*/return x.createElement(t.SimpleGrid,o,x.Children.map(l,function(e){return x.isValidElement(e)?/*#__PURE__*/x.createElement(W,null,e):e}))},Y=function(e,r){return x.Children.map(r,function(r){return x.isValidElement(r)&&r.props.name?x.cloneElement(r,y({},r.props,{name:e+"."+r.props.name})):r})},Z=f.createContext({name:"ArrayFieldContext"}),ee=Z[0],re=Z[1],te=f.createContext({name:"ArrayFieldRowContext"}),ne=te[0],ae=te[1],le=function(e){var t=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,u=r.useFormContext();return y({},r.useFieldArray({control:u.control,name:t,keyName:l}),{name:t,defaultValue:a,min:i,max:o})},ie=function(e){var t=e.index,n=r.useFormContext().clearErrors,a=re(),l=a.name,i=a.remove,o=a.fields;return x.useEffect(function(){n(l)},[]),{index:t,isFirst:0===t,isLast:t===o.length-1,name:l+"."+t,remove:x.useCallback(function(){n(l),i(t)},[t])}},oe=function(){var e=ae(),r=e.isFirst,t=e.remove,n=re(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},ue=function(){var e=re(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},se=["children","columns","spacing"],ce=["children"],me=["name","defaultValue","keyName","min","max","children"],de=function(e){/*#__PURE__*/return x.createElement(pe,{index:e.index},/*#__PURE__*/x.createElement(fe,{columns:e.columns,spacing:e.spacing},e.children),/*#__PURE__*/x.createElement(ve,null))},fe=function(e){var r=e.children,t=e.columns,n=e.spacing,a=h(e,se),l=ae().name;/*#__PURE__*/return x.createElement(X,y({flex:"1",columns:t,gridGap:n,mr:"2"},a),Y(l,r))},pe=function(e){var r=e.children,t=ie({index:e.index});/*#__PURE__*/return x.createElement(ne,{value:t},/*#__PURE__*/x.createElement(c.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},ve=function(e){/*#__PURE__*/return x.createElement(d.IconButton,y({icon:/*#__PURE__*/x.createElement(m.MinusIcon,null),"aria-label":"Remove row"},oe(),e))},xe=function(e){/*#__PURE__*/return x.createElement(d.IconButton,y({icon:/*#__PURE__*/x.createElement(m.AddIcon,null),"aria-label":"Add row",float:"right"},ue(),e))},ye=function(e){var r=e.children,t=h(e,ce);/*#__PURE__*/return x.createElement(be,t,/*#__PURE__*/x.createElement(he,null,function(e){/*#__PURE__*/return x.createElement(x.Fragment,null,e.map(function(e,t){/*#__PURE__*/return x.createElement(de,{key:e.id,index:t},r)}))}),/*#__PURE__*/x.createElement(xe,null))},he=function(e){return(0,e.children)(re().fields)},be=function(e){var r=e.name,t=e.defaultValue,n=e.keyName,a=e.min,l=e.max,i=e.children,o=h(e,me),u=le({name:r,defaultValue:t,keyName:n,min:a,max:l});/*#__PURE__*/return x.createElement(ee,{value:u},/*#__PURE__*/x.createElement(O,y({name:r},o),i))},Fe=["name","children","columns","spacing"],Ee=function(e){var r=e.name,t=e.children,n=e.columns,a=e.spacing,l=h(e,Fe);/*#__PURE__*/return x.createElement(O,y({name:r},l),/*#__PURE__*/x.createElement(X,{columns:n,gridGap:a},Y(r,t)))},ge=["name","type"],we=["schema"],Ce=["name","type","defaultValue"],Ae=function(e,r){return K(function(e,r){return u.reach(e,r)}(e,r)).map(function(e){var r=e.name,t=e.type,n=h(e,ge);/*#__PURE__*/return x.createElement(q,y({key:r,name:r,type:t},n))})},Re=function(e){var r=e.schema,t=h(e,we);/*#__PURE__*/return x.createElement(X,t,K(r).map(function(e){var t=e.name,n=e.type,a=h(e,Ce);return"array"===n?/*#__PURE__*/x.createElement(ye,y({name:t},a),Ae(r,t)):"object"===n?/*#__PURE__*/x.createElement(Ee,y({name:t},a),Ae(r,t)):/*#__PURE__*/x.createElement(q,y({key:t,name:t,type:n},a))}))},ke=["schema","defaultValues","onSubmit","onError","children"],Ie=t.forwardRef(function(e,n){var a=e.schema,l=e.defaultValues,i=e.onSubmit,o=e.onError,u=e.children,s=h(e,ke),c={mode:"all",defaultValues:l};a&&(c.resolver=H(a));var m=r.useForm(c);/*#__PURE__*/return x.createElement(r.FormProvider,m,/*#__PURE__*/x.createElement(t.chakra.form,y({ref:n,onSubmit:(0,m.handleSubmit)(i,o)},s),u))}),Se=["children"],Oe=c.forwardRef(function(e,t){var n=e.children,a=h(e,Se),l=r.useFormContext();/*#__PURE__*/return x.createElement(d.Button,y({type:"submit",isLoading:l.formState.isSubmitting,isPrimary:!0,ref:t},a),n)}),qe=["schema","submitLabel"],je=t.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=h(e,qe);/*#__PURE__*/return x.createElement(Ie,y({},a,{schema:t,ref:r}),/*#__PURE__*/x.createElement(X,null,/*#__PURE__*/x.createElement(Re,{schema:t}),n&&/*#__PURE__*/x.createElement(Oe,{label:n})))});je.defaultProps={submitLabel:"Submit"},exports.ArrayField=ye,exports.ArrayFieldAddButton=xe,exports.ArrayFieldContainer=be,exports.ArrayFieldProvider=ee,exports.ArrayFieldRemoveButton=ve,exports.ArrayFieldRow=de,exports.ArrayFieldRowContainer=pe,exports.ArrayFieldRowFields=fe,exports.ArrayFieldRowProvider=ne,exports.ArrayFieldRows=he,exports.AutoForm=je,exports.BaseField=O,exports.CheckboxField=_,exports.DisplayField=function(e){var n=e.name,a=e.label,l=h(e,F),i=r.useFormContext().getValues;/*#__PURE__*/return x.createElement(t.FormControl,l,a?/*#__PURE__*/x.createElement(t.FormLabel,{htmlFor:n},a):null,/*#__PURE__*/x.createElement(t.Text,{fontSize:"md"},i(n)))},exports.Field=q,exports.Fields=Re,exports.Form=Ie,exports.FormLayout=X,exports.InputField=N,exports.NativeSelectField=z,exports.NumberInputField=B,exports.ObjectField=Ee,exports.PasswordInputFIeld=V,exports.PinField=U,exports.RadioField=G,exports.SelectField=M,exports.SubmitButton=Oe,exports.SwitchField=D,exports.TextareaField=T,exports.registerFieldType=P,exports.useArrayField=le,exports.useArrayFieldAddButton=ue,exports.useArrayFieldContext=re,exports.useArrayFieldRemoveButton=oe,exports.useArrayFieldRow=ie,exports.useArrayFieldRowContext=ae,exports.withControlledInput=j,exports.withUncontrolledInput=L,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext, FormState, Controller, get } from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface FieldProps extends Omit<FormControlProps, 'label'> {\n /**\n * The field name\n */\n name: string\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: any\n /**\n * Options used for selects and radio fields\n */\n options?: any\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - nativeselect\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: string\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<string, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl isInvalid={!!error} variant={variant} {...controlProps}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\n\nexport const Field = forwardRef<FieldProps, typeof FormControl>(\n (props, ref) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n)\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n isOptional,\n variant,\n ...inputProps\n } = props\n\n return (\n <BaseField\n label={label}\n hideLabel={hideLabel}\n isDiabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isOptional={isOptional}\n variant={variant}\n >\n <InputComponent ref={ref} label={label} {...inputProps} />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n })\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n })\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: any,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../Field'\n\nexport const resolver = yupResolver\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n FieldErrors,\n} from 'react-hook-form'\n\nimport { resolver } from './resolvers/yup'\n\ninterface FormOptions {\n schema?: any\n submitLabel?: false | string\n}\n\nexport interface FormProps extends HTMLChakraProps<'form'>, FormOptions {\n defaultValues: Record<string, any>\n onSubmit: (arg: any) => Promise<any> | void\n onError?: (errors: FieldErrors) => void\n children?: React.ReactNode\n}\n\nexport const Form = forwardRef<FormProps, 'form'>(\n ({ schema, defaultValues, onSubmit, onError, children, ...props }, ref) => {\n const form: UseFormProps = { mode: 'all', defaultValues }\n\n if (schema) {\n form.resolver = resolver(schema)\n }\n\n const methods = useForm(form)\n const { handleSubmit } = methods\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={ref}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...props}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n)\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport const SubmitButton = forwardRef<ButtonProps, 'button'>(\n ({ children, ...props }, ref) => {\n const data = useFormContext()\n\n return (\n <Button\n type=\"submit\"\n isLoading={data.formState.isSubmitting}\n isPrimary\n ref={ref}\n {...props}\n >\n {children}\n </Button>\n )\n }\n)\n","import * as React from 'react'\n\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps\n extends Omit<FormProps, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef<AutoFormProps, 'form'>(\n ({ schema, submitLabel, ...props }, ref) => {\n return (\n <Form {...props} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n)\n\nAutoForm.defaultProps = {\n submitLabel: 'Submit',\n}\n","import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './Field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n"],"names":["inputTypes","BaseField","props","name","label","help","variant","hideLabel","children","controlProps","error","formState","get","errors","getError","useFormContext","React","FormControl","isInvalid","FormLabel","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","withControlledInput","InputComponent","rules","inputProps","Controller","control","render","field","_ref","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","displayName","isDisabled","isReadOnly","isRequired","isOptional","isDiabled","createField","isControlled","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","resolver","yupResolver","getType","spec","meta","_field$spec$meta","getArrayOption","tests","test","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","schemaFields","fields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","createContext","ArrayFieldProvider","useArrayFieldContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","ArrayFieldRowContainer","ArrayFieldRowFields","columns","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","key","id","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","defaultValues","onSubmit","onError","form","mode","methods","useForm","FormProvider","handleSubmit","SubmitButton","data","Button","isLoading","isSubmitting","isPrimary","AutoForm","submitLabel","getValues","htmlFor","Text","fontSize"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext, FormState, Controller, get } from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface FieldProps extends Omit<FormControlProps, 'label'> {\n /**\n * The field name\n */\n name: string\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: any\n /**\n * Options used for selects and radio fields\n */\n options?: any\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - nativeselect\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: string\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<string, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl isInvalid={!!error} variant={variant} {...controlProps}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\n\nexport const Field = forwardRef<FieldProps, typeof FormControl>(\n (props, ref) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n)\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n variant,\n ...inputProps\n } = props\n\n return (\n <BaseField\n label={label}\n hideLabel={hideLabel}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n variant={variant}\n >\n <InputComponent ref={ref} label={label} {...inputProps} />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n })\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n })\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: any,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../Field'\n\nexport const resolver = yupResolver\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n FieldErrors,\n} from 'react-hook-form'\n\nimport { resolver } from './resolvers/yup'\n\ninterface FormOptions {\n schema?: any\n submitLabel?: false | string\n}\n\nexport interface FormProps extends HTMLChakraProps<'form'>, FormOptions {\n defaultValues: Record<string, any>\n onSubmit: (arg: any) => Promise<any> | void\n onError?: (errors: FieldErrors) => void\n children?: React.ReactNode\n}\n\nexport const Form = forwardRef<FormProps, 'form'>(\n ({ schema, defaultValues, onSubmit, onError, children, ...props }, ref) => {\n const form: UseFormProps = { mode: 'all', defaultValues }\n\n if (schema) {\n form.resolver = resolver(schema)\n }\n\n const methods = useForm(form)\n const { handleSubmit } = methods\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={ref}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...props}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n)\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport const SubmitButton = forwardRef<ButtonProps, 'button'>(\n ({ children, ...props }, ref) => {\n const data = useFormContext()\n\n return (\n <Button\n type=\"submit\"\n isLoading={data.formState.isSubmitting}\n isPrimary\n ref={ref}\n {...props}\n >\n {children}\n </Button>\n )\n }\n)\n","import * as React from 'react'\n\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps\n extends Omit<FormProps, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef<AutoFormProps, 'form'>(\n ({ schema, submitLabel, ...props }, ref) => {\n return (\n <Form {...props} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n)\n\nAutoForm.defaultProps = {\n submitLabel: 'Submit',\n}\n","import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './Field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n"],"names":["inputTypes","BaseField","props","name","label","help","variant","hideLabel","children","controlProps","error","formState","get","errors","getError","useFormContext","React","FormControl","isInvalid","FormLabel","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","withControlledInput","InputComponent","rules","inputProps","Controller","control","render","field","_ref","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","displayName","isDisabled","isReadOnly","isRequired","createField","isControlled","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","resolver","yupResolver","getType","spec","meta","_field$spec$meta","getArrayOption","tests","test","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","schemaFields","fields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","createContext","ArrayFieldProvider","useArrayFieldContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","ArrayFieldRowContainer","ArrayFieldRowFields","columns","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","key","id","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","defaultValues","onSubmit","onError","form","mode","methods","useForm","FormProvider","handleSubmit","SubmitButton","data","Button","isLoading","isSubmitting","isPrimary","AutoForm","submitLabel","getValues","htmlFor","Text","fontSize"],"mappings":"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"}
|
package/dist/index.modern.js
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
import*as e from"react";import{useFormContext as t,get as r,Controller as l,useFieldArray as n,useForm as a,FormProvider as i}from"react-hook-form";import{FormControl as m,FormLabel as s,Text as
|
1
|
+
import*as e from"react";import{useFormContext as t,get as r,Controller as l,useFieldArray as n,useForm as a,FormProvider as i}from"react-hook-form";import{FormControl as m,FormLabel as s,Text as c,forwardRef as o,Switch as u,Checkbox as d,Box as p,FormHelperText as f,FormErrorMessage as h,useMergeRefs as b,Input as E,Textarea as y,useTheme as v,SimpleGrid as x,chakra as g}from"@chakra-ui/react";import{NumberInput as k}from"@saas-ui/number-input";import{PasswordInput as C}from"@saas-ui/password-input";import{RadioInput as L}from"@saas-ui/radio";import{PinInput as V}from"@saas-ui/pin-input";import{Select as F,NativeSelect as O}from"@saas-ui/select";import{reach as w}from"yup";import{yupResolver as S}from"@hookform/resolvers/yup";import{chakra as N,forwardRef as R}from"@chakra-ui/system";import{MinusIcon as j,AddIcon as I}from"@chakra-ui/icons";import{IconButton as D,Button as P}from"@saas-ui/button";import{createContext as $}from"@chakra-ui/react-utils";export*from"@saas-ui/input-right-button";function A(){return A=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},A.apply(this,arguments)}function q(e,t){if(null==e)return{};var r,l,n={},a=Object.keys(e);for(l=0;l<a.length;l++)t.indexOf(r=a[l])>=0||(n[r]=e[r]);return n}const B=["name","label","placeholder"],T=r=>{let{name:l,label:n}=r,a=q(r,B);const{getValues:i}=t();/*#__PURE__*/return e.createElement(m,a,n?/*#__PURE__*/e.createElement(s,{htmlFor:l},n):null,/*#__PURE__*/e.createElement(c,{fontSize:"md"},i(l)))},G=["name","label","help","variant","hideLabel","children"],_=["label","isDisabled","isInvalid","isReadOnly","isRequired","variant"],z=["name","rules"],U=["ref"],H=["name","rules"],J=["ref"],K=["label"],M=["label"],Q={},W="text",X=l=>{const{name:n,label:a,help:i,variant:c,hideLabel:o,children:u}=l,d=q(l,G),{formState:b}=t(),E=((e,t)=>r(t.errors,e))(n,b);/*#__PURE__*/return e.createElement(m,A({isInvalid:!!E,variant:c},d),a&&!o?/*#__PURE__*/e.createElement(s,{variant:c},a):null,/*#__PURE__*/e.createElement(p,null,u,!i||null!=E&&E.message?null:/*#__PURE__*/e.createElement(f,null,i),(null==E?void 0:E.message)&&/*#__PURE__*/e.createElement(h,null,null==E?void 0:E.message)))},Y=o((t,r)=>{const{type:l=W}=t,n=(e=>Q[e]||Q[W])(l);/*#__PURE__*/return e.createElement(n,A({ref:r},t))}),Z=r=>o((n,a)=>{let{name:i,rules:m}=n,s=q(n,z);const{control:c}=t();/*#__PURE__*/return e.createElement(l,{name:i,control:c,rules:m,render:t=>{let{field:{ref:l}}=t,n=q(t.field,U);/*#__PURE__*/return e.createElement(r,A({},n,s,{ref:b(a,l)}))}})}),ee=r=>o((l,n)=>{let{name:a,rules:i}=l,m=q(l,H);const{register:s}=t(),c=s(a,i),{ref:o}=c,u=q(c,J);/*#__PURE__*/return e.createElement(r,A({},u,m,{ref:b(n,o)}))}),te=(t,r,l)=>{let n;n=null!=l&&l.isControlled?Z(r):ee(r);const a=((t,{displayName:r,hideLabel:l,BaseField:n})=>{const a=o((r,a)=>{const{label:i,isDisabled:m,isInvalid:s,isReadOnly:c,isRequired:o,variant:u}=r,d=q(r,_);/*#__PURE__*/return e.createElement(n,{label:i,hideLabel:l,isDisabled:m,isInvalid:s,isReadOnly:c,isRequired:o,variant:u},/*#__PURE__*/e.createElement(t,A({ref:a,label:i},d)))});return a.displayName=r,a})(n,{displayName:`${t.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join("")}Field`,hideLabel:null==l?void 0:l.hideLabel,BaseField:(null==l?void 0:l.BaseField)||X});return Q[t]=a,a},re=te("text",E),le=te("number",k,{isControlled:!0}),ne=te("password",C),ae=te("textarea",y),ie=te("switch",o((t,r)=>{let{label:l}=t,n=q(t,K);/*#__PURE__*/return e.createElement(u,A({ref:r},n),l)}),{isControlled:!0,hideLabel:!0}),me=te("select",F,{isControlled:!0}),se=te("checkbox",o((t,r)=>{let{label:l}=t,n=q(t,M);/*#__PURE__*/return e.createElement(d,A({ref:r},n),l)}),{hideLabel:!0}),ce=te("radio",L,{isControlled:!0}),oe=te("pin",V,{isControlled:!0}),ue=te("native-select",O,{isControlled:!0}),de=S,pe=e=>{var t;if(null!=(t=e.spec.meta)&&t.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},fe=(e,t)=>{for(const l of e.tests){var r;if(null!=(r=l.OPTIONS)&&r.params[t])return l.OPTIONS.params[t]}},he=e=>{const t=[];let r={};r="array"===e.type?e.innerType.fields:e.fields;for(const e in r){const l=r[e],n={};"array"===l.type&&(n.min=fe(l,"min"),n.max=fe(l,"max")),t.push(A({name:e,label:l.spec.label||e,type:pe(l)},n))}return t},be=["children"],Ee=({children:t})=>/*#__PURE__*/e.createElement(g.div,null,t),ye=t=>{var r,l,n;let{children:a}=t,i=q(t,be);const m=A({},null!=(r=null==(l=v().components)||null==(n=l.FormLayout)?void 0:n.defaultProps)?r:{spacing:4},i);/*#__PURE__*/return e.createElement(x,m,e.Children.map(a,t=>e.isValidElement(t)?/*#__PURE__*/e.createElement(Ee,null,t):t))},ve=(t,r)=>e.Children.map(r,r=>e.isValidElement(r)&&r.props.name?e.cloneElement(r,A({},r.props,{name:`${t}.${r.props.name}`})):r),[xe,ge]=$({name:"ArrayFieldContext"}),[ke,Ce]=$({name:"ArrayFieldRowContext"}),Le=({name:e,defaultValue:r={},keyName:l,min:a,max:i})=>{const{control:m}=t();return A({},n({control:m,name:e,keyName:l}),{name:e,defaultValue:r,min:a,max:i})},Ve=({index:r})=>{const{clearErrors:l}=t(),{name:n,remove:a,fields:i}=ge();return e.useEffect(()=>{l(n)},[]),{index:r,isFirst:0===r,isLast:r===i.length-1,name:`${n}.${r}`,remove:e.useCallback(()=>{l(n),a(r)},[r])}},Fe=()=>{const{isFirst:e,remove:t}=Ce(),{min:r,fields:l}=ge();return{onClick:()=>t(),isDisabled:e&&!!(r&&l.length<=r)}},Oe=()=>{const{append:e,defaultValue:t,max:r,fields:l}=ge();return{onClick:()=>e(t,{shouldFocus:!1}),isDisabled:!!(r&&l.length>=r)}},we=["children","columns","spacing"],Se=["children"],Ne=["name","defaultValue","keyName","min","max","children"],Re=({children:t,columns:r,spacing:l,index:n})=>/*#__PURE__*/e.createElement(Ie,{index:n},/*#__PURE__*/e.createElement(je,{columns:r,spacing:l},t),/*#__PURE__*/e.createElement(De,null)),je=t=>{let{children:r,columns:l,spacing:n}=t,a=q(t,we);const{name:i}=Ce();/*#__PURE__*/return e.createElement(ye,A({flex:"1",columns:l,gridGap:n,mr:"2"},a),ve(i,r))},Ie=({children:t,index:r})=>{const l=Ve({index:r});/*#__PURE__*/return e.createElement(ke,{value:l},/*#__PURE__*/e.createElement(N.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},t))},De=t=>/*#__PURE__*/e.createElement(D,A({icon:/*#__PURE__*/e.createElement(j,null),"aria-label":"Remove row"},Fe(),t)),Pe=t=>/*#__PURE__*/e.createElement(D,A({icon:/*#__PURE__*/e.createElement(I,null),"aria-label":"Add row",float:"right"},Oe(),t)),$e=t=>{const{children:r}=t,l=q(t,Se);/*#__PURE__*/return e.createElement(qe,l,/*#__PURE__*/e.createElement(Ae,null,t=>/*#__PURE__*/e.createElement(e.Fragment,null,t.map(({id:t},l)=>/*#__PURE__*/e.createElement(Re,{key:t,index:l},r)))),/*#__PURE__*/e.createElement(Pe,null))},Ae=({children:e})=>{const{fields:t}=ge();return e(t)},qe=t=>{let{name:r,defaultValue:l,keyName:n,min:a,max:i,children:m}=t,s=q(t,Ne);const c=Le({name:r,defaultValue:l,keyName:n,min:a,max:i});/*#__PURE__*/return e.createElement(xe,{value:c},/*#__PURE__*/e.createElement(X,A({name:r},s),m))},Be=["name","children","columns","spacing"],Te=t=>{const{name:r,children:l,columns:n,spacing:a}=t,i=q(t,Be);/*#__PURE__*/return e.createElement(X,A({name:r},i),/*#__PURE__*/e.createElement(ye,{columns:n,gridGap:a},ve(r,l)))},Ge=["name","type"],_e=["schema"],ze=["name","type","defaultValue"],Ue=(t,r)=>he(((e,t)=>w(e,t))(t,r)).map(t=>{let{name:r,type:l}=t,n=q(t,Ge);/*#__PURE__*/return e.createElement(Y,A({key:r,name:r,type:l},n))}),He=t=>{let{schema:r}=t,l=q(t,_e);/*#__PURE__*/return e.createElement(ye,l,he(r).map(t=>{let{name:l,type:n}=t,a=q(t,ze);return"array"===n?/*#__PURE__*/e.createElement($e,A({name:l},a),Ue(r,l)):"object"===n?/*#__PURE__*/e.createElement(Te,A({name:l},a),Ue(r,l)):/*#__PURE__*/e.createElement(Y,A({key:l,name:l,type:n},a))}))},Je=["schema","defaultValues","onSubmit","onError","children"],Ke=o((t,r)=>{let{schema:l,defaultValues:n,onSubmit:m,onError:s,children:c}=t,o=q(t,Je);const u={mode:"all",defaultValues:n};l&&(u.resolver=de(l));const d=a(u),{handleSubmit:p}=d;/*#__PURE__*/return e.createElement(i,d,/*#__PURE__*/e.createElement(g.form,A({ref:r,onSubmit:p(m,s)},o),c))}),Me=["children"],Qe=R((r,l)=>{let{children:n}=r,a=q(r,Me);const i=t();/*#__PURE__*/return e.createElement(P,A({type:"submit",isLoading:i.formState.isSubmitting,isPrimary:!0,ref:l},a),n)}),We=["schema","submitLabel"],Xe=o((t,r)=>{let{schema:l,submitLabel:n}=t,a=q(t,We);/*#__PURE__*/return e.createElement(Ke,A({},a,{schema:l,ref:r}),/*#__PURE__*/e.createElement(ye,null,/*#__PURE__*/e.createElement(He,{schema:l}),n&&/*#__PURE__*/e.createElement(Qe,{label:n})))});Xe.defaultProps={submitLabel:"Submit"};export{$e as ArrayField,Pe as ArrayFieldAddButton,qe as ArrayFieldContainer,xe as ArrayFieldProvider,De as ArrayFieldRemoveButton,Re as ArrayFieldRow,Ie as ArrayFieldRowContainer,je as ArrayFieldRowFields,ke as ArrayFieldRowProvider,Ae as ArrayFieldRows,Xe as AutoForm,X as BaseField,se as CheckboxField,T as DisplayField,Y as Field,He as Fields,Ke as Form,ye as FormLayout,re as InputField,ue as NativeSelectField,le as NumberInputField,Te as ObjectField,ne as PasswordInputFIeld,oe as PinField,ce as RadioField,me as SelectField,Qe as SubmitButton,ie as SwitchField,ae as TextareaField,te as registerFieldType,Le as useArrayField,Oe as useArrayFieldAddButton,ge as useArrayFieldContext,Fe as useArrayFieldRemoveButton,Ve as useArrayFieldRow,Ce as useArrayFieldRowContext,Z as withControlledInput,ee as withUncontrolledInput};
|
2
2
|
//# sourceMappingURL=index.modern.js.map
|
package/dist/index.modern.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './Field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n","import * as React from 'react'\nimport { useFormContext, FormState, Controller, get } from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface FieldProps extends Omit<FormControlProps, 'label'> {\n /**\n * The field name\n */\n name: string\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: any\n /**\n * Options used for selects and radio fields\n */\n options?: any\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - nativeselect\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: string\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<string, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl isInvalid={!!error} variant={variant} {...controlProps}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\n\nexport const Field = forwardRef<FieldProps, typeof FormControl>(\n (props, ref) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n)\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n isOptional,\n variant,\n ...inputProps\n } = props\n\n return (\n <BaseField\n label={label}\n hideLabel={hideLabel}\n isDiabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isOptional={isOptional}\n variant={variant}\n >\n <InputComponent ref={ref} label={label} {...inputProps} />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n })\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n })\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: any,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../Field'\n\nexport const resolver = yupResolver\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n FieldErrors,\n} from 'react-hook-form'\n\nimport { resolver } from './resolvers/yup'\n\ninterface FormOptions {\n schema?: any\n submitLabel?: false | string\n}\n\nexport interface FormProps extends HTMLChakraProps<'form'>, FormOptions {\n defaultValues: Record<string, any>\n onSubmit: (arg: any) => Promise<any> | void\n onError?: (errors: FieldErrors) => void\n children?: React.ReactNode\n}\n\nexport const Form = forwardRef<FormProps, 'form'>(\n ({ schema, defaultValues, onSubmit, onError, children, ...props }, ref) => {\n const form: UseFormProps = { mode: 'all', defaultValues }\n\n if (schema) {\n form.resolver = resolver(schema)\n }\n\n const methods = useForm(form)\n const { handleSubmit } = methods\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={ref}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...props}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n)\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport const SubmitButton = forwardRef<ButtonProps, 'button'>(\n ({ children, ...props }, ref) => {\n const data = useFormContext()\n\n return (\n <Button\n type=\"submit\"\n isLoading={data.formState.isSubmitting}\n isPrimary\n ref={ref}\n {...props}\n >\n {children}\n </Button>\n )\n }\n)\n","import * as React from 'react'\n\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps\n extends Omit<FormProps, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef<AutoFormProps, 'form'>(\n ({ schema, submitLabel, ...props }, ref) => {\n return (\n <Form {...props} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n)\n\nAutoForm.defaultProps = {\n submitLabel: 'Submit',\n}\n"],"names":["DisplayField","_ref","name","label","props","getValues","useFormContext","React","FormControl","FormLabel","htmlFor","Text","fontSize","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","isOptional","isDiabled","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","resolver","yupResolver","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","_ref2","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","defaultValues","onSubmit","onError","form","mode","methods","useForm","handleSubmit","FormProvider","SubmitButton","data","Button","isLoading","isSubmitting","isPrimary","AutoForm","submitLabel"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n Text,\n FormControl,\n FormControlProps,\n FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './Field'\n\nexport interface DisplayFieldProps\n extends FormControlProps,\n Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n name,\n label,\n placeholder,\n ...props\n}) => {\n const { getValues } = useFormContext()\n\n return (\n <FormControl {...props}>\n {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n <Text fontSize=\"md\">{getValues(name)}</Text>\n </FormControl>\n )\n}\n","import * as React from 'react'\nimport { useFormContext, FormState, Controller, get } from 'react-hook-form'\n\nimport {\n forwardRef,\n Box,\n FormControl,\n FormControlProps,\n FormLabel,\n FormHelperText,\n FormErrorMessage,\n Input,\n Textarea,\n Checkbox,\n Switch,\n useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface FieldProps extends Omit<FormControlProps, 'label'> {\n /**\n * The field name\n */\n name: string\n /**\n * The field label\n */\n label?: string\n /**\n * Hide the field label\n */\n hideLabel?: boolean\n /**\n * Field help text\n */\n help?: string\n /**\n * React hook form rules\n */\n rules?: any\n /**\n * Options used for selects and radio fields\n */\n options?: any\n /**\n * The field type\n * Build-in types:\n * - text\n * - number\n * - password\n * - textarea\n * - select\n * - nativeselect\n * - checkbox\n * - radio\n * - switch\n * - pin\n *\n * Will default to a text field if there is no matching type.\n * @default 'text'\n */\n type?: string\n /**\n * The input placeholder\n */\n placeholder?: string\n}\n\nconst inputTypes: Record<string, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n return get(formState.errors, name)\n}\n\nconst isTouched = (\n name: string,\n formState: FormState<{ [x: string]: any }>\n) => {\n return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n const { name, label, help, variant, hideLabel, children, ...controlProps } =\n props\n\n const { formState } = useFormContext()\n\n const error = getError(name, formState)\n\n return (\n <FormControl isInvalid={!!error} variant={variant} {...controlProps}>\n {label && !hideLabel ? (\n <FormLabel variant={variant}>{label}</FormLabel>\n ) : null}\n <Box>\n {children}\n {help && !error?.message ? (\n <FormHelperText>{help}</FormHelperText>\n ) : null}\n {error?.message && (\n <FormErrorMessage>{error?.message}</FormErrorMessage>\n )}\n </Box>\n </FormControl>\n )\n}\n\nexport const Field = forwardRef<FieldProps, typeof FormControl>(\n (props, ref) => {\n const { type = defaultInputType } = props\n const InputComponent = getInput(type)\n\n return <InputComponent ref={ref} {...props} />\n }\n)\n\ninterface CreateFieldProps {\n displayName: string\n hideLabel?: boolean\n BaseField: React.FC<any>\n}\n\nconst createField = (\n InputComponent: React.FC<any>,\n { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n const {\n label,\n isDisabled,\n isInvalid,\n isReadOnly,\n isRequired,\n variant,\n ...inputProps\n } = props\n\n return (\n <BaseField\n label={label}\n hideLabel={hideLabel}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n variant={variant}\n >\n <InputComponent ref={ref} label={label} {...inputProps} />\n </BaseField>\n )\n })\n Field.displayName = displayName\n\n return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { control } = useFormContext()\n\n return (\n <Controller\n name={name}\n control={control}\n rules={rules}\n render={({ field: { ref: _ref, ...field } }) => (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )}\n />\n )\n })\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n return forwardRef(({ name, rules, ...inputProps }, ref) => {\n const { register } = useFormContext()\n\n const { ref: _ref, ...field } = register(name, rules)\n\n return (\n <InputComponent\n {...field}\n {...inputProps}\n ref={useMergeRefs(ref, _ref)}\n />\n )\n })\n}\n\nexport interface RegisterFieldTypeOptions {\n isControlled?: boolean\n hideLabel?: boolean\n BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n type: string,\n component: any,\n options?: RegisterFieldTypeOptions\n) => {\n let InputComponent\n if (options?.isControlled) {\n InputComponent = withControlledInput(component)\n } else {\n InputComponent = withUncontrolledInput(component)\n }\n\n const Field = createField(InputComponent, {\n displayName: `${type\n .split('-')\n .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n .join('')}Field`,\n hideLabel: options?.hideLabel,\n BaseField: options?.BaseField || BaseField,\n })\n\n inputTypes[type] = Field\n\n return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n 'switch',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Switch ref={ref} {...props}>\n {label}\n </Switch>\n )\n }),\n {\n isControlled: true,\n hideLabel: true,\n }\n)\nexport const SelectField = registerFieldType('select', Select, {\n isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n 'checkbox',\n forwardRef(({ label, ...props }: { label?: string }, ref) => {\n return (\n <Checkbox ref={ref} {...props}>\n {label}\n </Checkbox>\n )\n }),\n {\n hideLabel: true,\n }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n 'native-select',\n NativeSelect,\n { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../Field'\n\nexport const resolver = yupResolver\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n if (field.spec.meta?.type) {\n return field.spec.meta.type\n }\n\n switch (field.type) {\n case 'array':\n return 'array'\n case 'object':\n return 'object'\n case 'number':\n return 'number'\n case 'date':\n return 'date'\n case 'string':\n default:\n return 'text'\n }\n}\n\ntype Options = {\n min?: number\n max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n for (const test of field.tests) {\n if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n const fields = []\n\n let schemaFields: Record<string, any> = {}\n if (schema.type === 'array') {\n /* @ts-ignore this is actually valid */\n schemaFields = schema.innerType.fields\n } else {\n schemaFields = schema.fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const options: Options = {}\n if (field.type === 'array') {\n options.min = getArrayOption(field, 'min')\n options.max = getArrayOption(field, 'max')\n }\n\n fields.push({\n name,\n label: field.spec.label || name,\n type: getType(field),\n ...options,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n return <chakra.div>{children}</chakra.div>\n}\n\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n const theme = useTheme()\n\n const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n spacing: 4,\n }\n\n const gridProps = {\n ...defaultProps,\n ...props,\n }\n\n return (\n <SimpleGrid {...gridProps}>\n {React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return <FormLayoutItem>{child}</FormLayoutItem>\n }\n return child\n })}\n </SimpleGrid>\n )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n return React.Children.map(children, (child) => {\n if (React.isValidElement(child) && child.props.name) {\n return React.cloneElement(child, {\n ...child.props,\n name: `${name}.${child.props.name}`,\n })\n }\n return child\n })\n}\n","import * as React from 'react'\nimport {\n useFieldArray,\n useFormContext,\n UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n /**\n * The array field name\n */\n name: string\n /**\n * The default value for new items\n */\n defaultValue: Record<string, any>\n /**\n * Min amount of items\n */\n min?: number\n /**\n * Max amount of items\n */\n max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n createContext<UseArrayFieldReturn>({\n name: 'ArrayFieldContext',\n })\n\nexport interface UseArrayFieldRowReturn {\n /**\n * Name of the array field including the index, eg 'field.0'\n */\n name: string\n /**\n * The field index\n */\n index: number\n /**\n * Remove this array item\n */\n remove: () => void\n /**\n * True if this is the first item\n */\n isFirst: boolean\n /**\n * True if this is the last item\n */\n isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n createContext<UseArrayFieldRowReturn>({\n name: 'ArrayFieldRowContext',\n })\n\nexport interface ArrayFieldOptions {\n /**\n * The field name\n */\n name: string\n /**\n * Default value for new values in the array\n */\n defaultValue?: Record<string, any>\n /**\n * Default key name for rows, change this if your data uses 'id'\n * @default \"id\"\n */\n keyName?: string\n min?: number\n max?: number\n}\n\nexport const useArrayField = ({\n name,\n defaultValue = {},\n keyName,\n min,\n max,\n}: ArrayFieldOptions) => {\n const { control } = useFormContext()\n const context = useFieldArray({\n control,\n name,\n keyName,\n })\n\n return {\n ...context,\n name,\n defaultValue,\n min,\n max,\n }\n}\n\nexport interface UseArrayFieldRowProps {\n index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n const { clearErrors } = useFormContext()\n const { name, remove, fields } = useArrayFieldContext()\n\n React.useEffect(() => {\n // reset errors, to make sure min/max errors reset correctly\n clearErrors(name)\n }, [])\n\n return {\n index,\n isFirst: index === 0,\n isLast: index === fields.length - 1,\n name: `${name}.${index}`,\n remove: React.useCallback(() => {\n clearErrors(name)\n remove(index)\n }, [index]),\n }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n const { isFirst, remove } = useArrayFieldRowContext()\n const { min, fields } = useArrayFieldContext()\n\n const isDisabled = isFirst && !!(min && fields.length <= min)\n\n return {\n onClick: () => remove(),\n isDisabled,\n }\n}\n\nexport const useArrayFieldAddButton = () => {\n const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n const isDisabled = !!(max && fields.length >= max)\n\n return {\n onClick: () =>\n append(defaultValue, {\n shouldFocus: false,\n }),\n isDisabled,\n }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n useArrayField,\n useArrayFieldRow,\n useArrayFieldContext,\n ArrayFieldProvider,\n ArrayFieldOptions,\n ArrayFieldRowProvider,\n useArrayFieldRowContext,\n useArrayFieldRemoveButton,\n useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n id: string\n [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n /**\n * The array index\n */\n index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n children,\n columns,\n spacing,\n index,\n}) => {\n return (\n <ArrayFieldRowContainer index={index}>\n <ArrayFieldRowFields columns={columns} spacing={spacing}>\n {children}\n </ArrayFieldRowFields>\n <ArrayFieldRemoveButton />\n </ArrayFieldRowContainer>\n )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n /**\n * Amount of field columns\n */\n columns?: ResponsiveValue<number>\n /**\n * Spacing between fields\n */\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n children,\n columns,\n spacing,\n ...layoutProps\n}) => {\n const { name } = useArrayFieldRowContext()\n return (\n <FormLayout\n flex=\"1\"\n columns={columns}\n gridGap={spacing}\n mr=\"2\"\n {...layoutProps}\n >\n {mapNestedFields(name, children)}\n </FormLayout>\n )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n children,\n index,\n}) => {\n const context = useArrayFieldRow({ index })\n\n const styles = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'flex-end',\n width: '100%',\n mb: 4,\n }\n\n return (\n <ArrayFieldRowProvider value={context}>\n <chakra.div __css={styles}>{children}</chakra.div>\n </ArrayFieldRowProvider>\n )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<MinusIcon />}\n aria-label=\"Remove row\"\n {...useArrayFieldRemoveButton()}\n {...props}\n />\n )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n return (\n <IconButton\n icon={<AddIcon />}\n aria-label=\"Add row\"\n float=\"right\"\n {...useArrayFieldAddButton()}\n {...props}\n />\n )\n}\n\nexport interface ArrayFieldProps\n extends ArrayFieldOptions,\n Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n const { children, ...containerProps } = props\n\n return (\n <ArrayFieldContainer {...containerProps}>\n <ArrayFieldRows>\n {(fields: ArrayField[]) => (\n <>\n {fields.map(({ id }, index: number) => (\n <ArrayFieldRow key={id} index={index}>\n {children}\n </ArrayFieldRow>\n ))}\n </>\n )}\n </ArrayFieldRows>\n <ArrayFieldAddButton />\n </ArrayFieldContainer>\n )\n}\n\nexport interface ArrayFieldRowsProps {\n children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n const { fields } = useArrayFieldContext()\n return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n name,\n defaultValue,\n keyName,\n min,\n max,\n children,\n ...fieldProps\n}) => {\n const context = useArrayField({\n name,\n defaultValue,\n keyName,\n min,\n max,\n })\n\n return (\n <ArrayFieldProvider value={context}>\n <BaseField name={name} {...fieldProps}>\n {children}\n </BaseField>\n </ArrayFieldProvider>\n )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n name: string\n children: React.ReactNode\n columns?: ResponsiveValue<number>\n spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n const { name, children, columns, spacing, ...fieldProps } = props\n return (\n <BaseField name={name} {...fieldProps}>\n <FormLayout columns={columns} gridGap={spacing}>\n {mapNestedFields(name, children)}\n </FormLayout>\n </BaseField>\n )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n <Field key={name} name={name} type={type} {...nestedFieldProps} />\n )\n )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n return (\n <FormLayout {...props}>\n {getFieldsFromSchema(schema).map(\n ({\n name,\n type,\n defaultValue,\n ...fieldProps\n }: FieldProps): React.ReactNode => {\n if (type === 'array') {\n return (\n <ArrayField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ArrayField>\n )\n } else if (type === 'object') {\n return (\n <ObjectField name={name} {...fieldProps}>\n {getNestedFields(schema, name)}\n </ObjectField>\n )\n }\n\n return <Field key={name} name={name} type={type} {...fieldProps} />\n }\n )}\n </FormLayout>\n )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n useForm,\n FormProvider,\n UseFormProps,\n FieldErrors,\n} from 'react-hook-form'\n\nimport { resolver } from './resolvers/yup'\n\ninterface FormOptions {\n schema?: any\n submitLabel?: false | string\n}\n\nexport interface FormProps extends HTMLChakraProps<'form'>, FormOptions {\n defaultValues: Record<string, any>\n onSubmit: (arg: any) => Promise<any> | void\n onError?: (errors: FieldErrors) => void\n children?: React.ReactNode\n}\n\nexport const Form = forwardRef<FormProps, 'form'>(\n ({ schema, defaultValues, onSubmit, onError, children, ...props }, ref) => {\n const form: UseFormProps = { mode: 'all', defaultValues }\n\n if (schema) {\n form.resolver = resolver(schema)\n }\n\n const methods = useForm(form)\n const { handleSubmit } = methods\n\n return (\n <FormProvider {...methods}>\n <chakra.form\n ref={ref}\n onSubmit={handleSubmit(onSubmit, onError)}\n {...props}\n >\n {children}\n </chakra.form>\n </FormProvider>\n )\n }\n)\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport const SubmitButton = forwardRef<ButtonProps, 'button'>(\n ({ children, ...props }, ref) => {\n const data = useFormContext()\n\n return (\n <Button\n type=\"submit\"\n isLoading={data.formState.isSubmitting}\n isPrimary\n ref={ref}\n {...props}\n >\n {children}\n </Button>\n )\n }\n)\n","import * as React from 'react'\n\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n schema: any\n submitLabel?: false | string\n}\n\nexport interface AutoFormProps\n extends Omit<FormProps, 'schema'>,\n AutoFormOptions {}\n\nexport const AutoForm = forwardRef<AutoFormProps, 'form'>(\n ({ schema, submitLabel, ...props }, ref) => {\n return (\n <Form {...props} schema={schema} ref={ref}>\n <FormLayout>\n {<Fields schema={schema} />}\n {submitLabel && <SubmitButton label={submitLabel} />}\n </FormLayout>\n </Form>\n )\n }\n)\n\nAutoForm.defaultProps = {\n submitLabel: 'Submit',\n}\n"],"names":["DisplayField","_ref","name","label","props","getValues","useFormContext","React","FormControl","FormLabel","htmlFor","Text","fontSize","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","resolver","yupResolver","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","_ref2","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","defaultValues","onSubmit","onError","form","mode","methods","useForm","handleSubmit","FormProvider","SubmitButton","data","Button","isLoading","isSubmitting","isPrimary","AutoForm","submitLabel"],"mappings":"02CAgBaA,EAA4CC,QAACC,KACxDA,EADwDC,MAExDA,KAEGC,SAEH,MAAMC,UAAEA,GAAcC,iBAEtB,OACEC,gBAACC,EAAgBJ,EACdD,eAAQI,gBAACE,GAAUC,QAASR,GAAOC,GAAqB,kBACzDI,gBAACI,GAAKC,SAAS,MAAMP,EAAUH,4NC8C/BW,EAAkC,GAElCC,EAAmB,OAiBZC,EAAmCX,IAC9C,MAAMF,KAAEA,EAAFC,MAAQA,EAARa,KAAeA,EAAfC,QAAqBA,EAArBC,UAA8BA,EAA9BC,SAAyCA,GAC7Cf,EAD0DgB,IAC1DhB,MAEIiB,UAAEA,GAAcf,IAEhBgB,EAjBS,EAACpB,EAAcmB,IACvBE,EAAIF,EAAUG,OAAQtB,GAgBfuB,CAASvB,EAAMmB,gBAE7B,OACEd,gBAACC,KAAYkB,YAAaJ,EAAOL,QAASA,GAAaG,GACpDjB,IAAUe,eACTX,gBAACE,GAAUQ,QAASA,GAAUd,GAC5B,kBACJI,gBAACoB,OACER,GACAH,SAASM,GAAAA,EAAOM,QAEb,kBADFrB,gBAACsB,OAAgBb,UAElBM,SAAAA,EAAOM,uBACNrB,gBAACuB,aAAkBR,SAAAA,EAAOM,YAOvBG,EAAQC,EACnB,CAAC5B,EAAO6B,KACN,MAAMC,KAAEA,EAAOpB,GAAqBV,EAC9B+B,EA5CQD,CAAAA,GACTrB,EAAWqB,IAASrB,EAAWC,GA2CbsB,CAASF,gBAEhC,OAAO3B,gBAAC4B,KAAeF,IAAKA,GAAS7B,MA4C5BiC,EAAuBF,GAC3BH,EAAW,GAAiCC,SAAhC/B,KAAEA,EAAFoC,MAAQA,KAAUC,SACnC,MAAMC,QAAEA,GAAYlC,iBAEpB,OACEC,gBAACkC,GACCvC,KAAMA,EACNsC,QAASA,EACTF,MAAOA,EACPI,OAAQC,QAAGC,OAASX,IAAKhC,MAAS2C,MAAvBA,6BACTrC,gBAAC4B,OACKS,EACAL,GACJN,IAAKY,EAAaZ,EAAKhC,WAQtB6C,GAAyBX,GAC7BH,EAAW,GAAiCC,SAAhC/B,KAAEA,EAAFoC,MAAQA,KAAUC,SACnC,MAAMQ,SAAEA,GAAazC,MAEWyC,EAAS7C,EAAMoC,IAAvCL,IAAKhC,KAAS2C,sBAEtB,OACErC,gBAAC4B,OACKS,EACAL,GACJN,IAAKY,EAAaZ,EAAKhC,QAoBlB+C,GAAoB,CAC/Bd,EACAe,EACAC,KAEA,IAAIf,EAEFA,QADEe,GAAAA,EAASC,aACMd,EAAoBY,GAEpBH,GAAsBG,GAGzC,MAAMlB,EAjGY,EAClBI,GACEiB,YAAAA,EAAalC,UAAAA,EAAWH,UAAAA,MAE1B,MAAMgB,EAAQC,EAA2C,CAAC5B,EAAO6B,KAC/D,MAAM9B,MACJA,EADIkD,WAEJA,EAFI3B,UAGJA,EAHI4B,WAIJA,EAJIC,WAKJA,EALItC,QAMJA,GAEEb,EADCmC,IACDnC,kBAEJ,OACEG,gBAACQ,GACCZ,MAAOA,EACPe,UAAWA,EACXmC,WAAYA,EACZ3B,UAAWA,EACX4B,WAAYA,EACZC,WAAYA,EACZtC,QAASA,gBAETV,gBAAC4B,KAAeF,IAAKA,EAAK9B,MAAOA,GAAWoC,OAMlD,OAFAR,EAAMqB,YAAcA,EAEbrB,GAkEOyB,CAAYrB,EAAgB,CACxCiB,eAAgBlB,EACbuB,MAAM,KACNC,IAAKC,GAASA,EAAKC,OAAO,GAAGC,cAAgBF,EAAKG,MAAM,IACxDC,KAAK,WACR7C,gBAAWgC,SAAAA,EAAShC,UACpBH,iBAAWmC,SAAAA,EAASnC,YAAaA,IAKnC,OAFAF,EAAWqB,GAAQH,EAEZA,GAKIiC,GAAahB,GAAkB,OAAQiB,GACvCC,GAAmBlB,GAAkB,SAAUmB,EAAa,CACvEhB,cAAc,IAEHiB,GAAqBpB,GAAkB,WAAYqB,GACnDC,GAAgBtB,GAAkB,WAAYuB,GAC9CC,GAAcxB,GACzB,SACAhB,EAAW,GAA0CC,SAAzC9B,MAAEA,KAAUC,sBACtB,OACEG,gBAACkE,KAAOxC,IAAKA,GAAS7B,GACnBD,KAIP,CACEgD,cAAc,EACdjC,WAAW,IAGFwD,GAAc1B,GAAkB,SAAU2B,EAAQ,CAC7DxB,cAAc,IAEHyB,GAAgB5B,GAC3B,WACAhB,EAAW,GAA0CC,SAAzC9B,MAAEA,KAAUC,sBACtB,OACEG,gBAACsE,KAAS5C,IAAKA,GAAS7B,GACrBD,KAIP,CACEe,WAAW,IAGF4D,GAAa9B,GAAkB,QAAS+B,EAAY,CAC/D5B,cAAc,IAEH6B,GAAWhC,GAAkB,MAAOiC,EAAU,CACzD9B,cAAc,IAEH+B,GAAoBlC,GAC/B,gBACAmC,EACA,CAAEhC,cAAc,IC9RLiC,GAAWC,EAIlBC,GAAW1C,UACf,YAAIA,EAAM2C,KAAKC,OAAXC,EAAiBvD,KACnB,OAAOU,EAAM2C,KAAKC,KAAKtD,KAGzB,OAAQU,EAAMV,MACZ,IAAK,QACH,MAAO,QACT,IAAK,SACH,MAAO,SACT,IAAK,SACH,MAAO,SACT,IAAK,OACH,MAAO,OAET,QACE,MAAO,SASPwD,GAAiB,CAAC9C,EAAY1C,KAClC,IAAK,MAAMyF,KAAQ/C,EAAMgD,MAAO,OAC9B,YAAID,EAAKE,UAALC,EAAcC,OAAO7F,GAAO,OAAOyF,EAAKE,QAAQE,OAAO7F,KAUlD8F,GACXC,IAEA,MAAMC,EAAS,GAEf,IAAIC,EAAoC,GAGtCA,EAFkB,UAAhBF,EAAO/D,KAEM+D,EAAOG,UAAUF,OAEjBD,EAAOC,OAGxB,IAAK,MAAMhG,KAAQiG,EAAc,CAC/B,MAAMvD,EAAQuD,EAAajG,GAErBgD,EAAmB,GACN,UAAfN,EAAMV,OACRgB,EAAQmD,IAAMX,GAAe9C,EAAO,OACpCM,EAAQoD,IAAMZ,GAAe9C,EAAO,QAGtCsD,EAAOK,QACLrG,KAAAA,EACAC,MAAOyC,EAAM2C,KAAKpF,OAASD,EAC3BgC,KAAMoD,GAAQ1C,IACXM,IAGP,OAAOgD,mBCjEHM,GAAgD,EAAGrF,SAAAA,kBAChDZ,gBAACkG,EAAOC,SAAKvF,GAGTwF,GAAa1G,kBAACkB,SAAEA,KAAaf,UACxC,MAMMwG,yBANQC,IAEaC,sBAANC,EAAkBJ,mBAAlBK,EAA8BC,gBAAgB,CACjEC,QAAS,GAKN9G,gBAGL,OACEG,gBAAC4G,EAAeP,EACbrG,EAAM6G,SAAS1D,IAAIvC,EAAWkG,GACzB9G,EAAM+G,eAAeD,gBAChB9G,gBAACiG,QAAgBa,GAEnBA,KC9BFE,GAAkB,CAACrH,EAAciB,IACrCZ,EAAM6G,SAAS1D,IAAIvC,EAAWkG,GAC/B9G,EAAM+G,eAAeD,IAAUA,EAAMjH,MAAMF,KACtCK,EAAMiH,aAAaH,OACrBA,EAAMjH,OACTF,QAASA,KAAQmH,EAAMjH,MAAMF,UAG1BmH,ICkBGI,GAAoBC,IAChCC,EAAmC,CACjCzH,KAAM,uBA0BI0H,GAAuBC,IACnCF,EAAsC,CACpCzH,KAAM,yBAqBG4H,GAAgB,EAC3B5H,KAAAA,EACA6H,aAAAA,EAAe,GACfC,QAAAA,EACA3B,IAAAA,EACAC,IAAAA,MAEA,MAAM9D,QAAEA,GAAYlC,IAOpB,YANgB2H,EAAc,CAC5BzF,QAAAA,EACAtC,KAAAA,EACA8H,QAAAA,KAKA9H,KAAAA,EACA6H,aAAAA,EACA1B,IAAAA,EACAC,IAAAA,KAQS4B,GAAmB,EAAGC,MAAAA,MACjC,MAAMC,YAAEA,GAAgB9H,KAClBJ,KAAEA,EAAFmI,OAAQA,EAARnC,OAAgBA,GAAWwB,KAOjC,OALAnH,EAAM+H,UAAU,KAEdF,EAAYlI,IACX,IAEI,CACLiI,MAAAA,EACAI,QAAmB,IAAVJ,EACTK,OAAQL,IAAUjC,EAAOuC,OAAS,EAClCvI,QAASA,KAAQiI,IACjBE,OAAQ9H,EAAMmI,YAAY,KACxBN,EAAYlI,GACZmI,EAAOF,IACN,CAACA,MAIKQ,GAA4B,KACvC,MAAMJ,QAAEA,EAAFF,OAAWA,GAAWR,MACtBxB,IAAEA,EAAFH,OAAOA,GAAWwB,KAIxB,MAAO,CACLkB,QAAS,IAAMP,IACfhF,WAJiBkF,MAAclC,GAAOH,EAAOuC,QAAUpC,KAQ9CwC,GAAyB,KACpC,MAAMC,OAAEA,EAAFf,aAAUA,EAAVzB,IAAwBA,EAAxBJ,OAA6BA,GAAWwB,KAI9C,MAAO,CACLkB,QAAS,IACPE,EAAOf,EAAc,CACnBgB,aAAa,IAEjB1F,cAPoBiD,GAAOJ,EAAOuC,QAAUnC,qHClGnC0C,GAA8C,EACzD7H,SAAAA,EACA8H,QAAAA,EACA/B,QAAAA,EACAiB,MAAAA,kBAGE5H,gBAAC2I,IAAuBf,MAAOA,gBAC7B5H,gBAAC4I,IAAoBF,QAASA,EAAS/B,QAASA,GAC7C/F,gBAEHZ,gBAAC6I,UAgBMD,GAA0DlJ,QAACkB,SACtEA,EADsE8H,QAEtEA,EAFsE/B,QAGtEA,KACGmC,UAEH,MAAMnJ,KAAEA,GAAS2H,kBACjB,OACEtH,gBAACoG,MACC2C,KAAK,IACLL,QAASA,EACTM,QAASrC,EACTsC,GAAG,KACCH,GAEH9B,GAAgBrH,EAAMiB,KAKhB+H,GAAuD,EAClE/H,SAAAA,EACAgH,MAAAA,MAEA,MAAMsB,EAAUvB,GAAiB,CAAEC,MAAAA,iBAUnC,OACE5H,gBAACqH,IAAsB8B,MAAOD,gBAC5BlJ,gBAACkG,EAAOC,KAAIiD,MAVD,CACbC,QAAS,OACTC,cAAe,MACfC,WAAY,WACZC,MAAO,OACPC,GAAI,IAK0B7I,KAKrBiI,GAAiDhJ,gBAE1DG,gBAAC0J,KACCC,kBAAM3J,gBAAC4J,QACP,aAAW,cACPxB,KACAvI,IAKGgK,GAA8ChK,gBAEvDG,gBAAC0J,KACCC,kBAAM3J,gBAAC8J,QACP,aAAW,UACXC,MAAM,SACFzB,KACAzI,IASGmK,GAAyCnK,IACpD,MAAMe,SAAEA,GAAgCf,EAAnBoK,IAAmBpK,mBAExC,OACEG,gBAACkK,GAAwBD,eACvBjK,gBAACmK,QACGxE,gBACA3F,gCACG2F,EAAOxC,IAAI,EAAGiH,GAAAA,GAAMxC,iBACnB5H,gBAACyI,IAAc4B,IAAKD,EAAIxC,MAAOA,GAC5BhH,mBAMXZ,gBAAC6J,WASMM,GAAiB,EAC5BvJ,SAAAA,MAEA,MAAM+E,OAAEA,GAAWwB,KACnB,OAAOvG,EAAS+E,IAGLuE,GAAiDI,QAAC3K,KAC7DA,EAD6D6H,aAE7DA,EAF6DC,QAG7DA,EAH6D3B,IAI7DA,EAJ6DC,IAK7DA,EAL6DnF,SAM7DA,KACG2J,UAEH,MAAMrB,EAAU3B,GAAc,CAC5B5H,KAAAA,EACA6H,aAAAA,EACAC,QAAAA,EACA3B,IAAAA,EACAC,IAAAA,iBAGF,OACE/F,gBAACkH,IAAmBiC,MAAOD,gBACzBlJ,gBAACQ,KAAUb,KAAMA,GAAU4K,GACxB3J,gDChLI4J,GAA2C3K,IACtD,MAAMF,KAAEA,EAAFiB,SAAQA,EAAR8H,QAAkBA,EAAlB/B,QAA2BA,GAA2B9G,EAAf0K,IAAe1K,mBAC5D,OACEG,gBAACQ,KAAUb,KAAMA,GAAU4K,gBACzBvK,gBAACoG,IAAWsC,QAASA,EAASM,QAASrC,GACpCK,GAAgBrH,EAAMiB,yECPzB6J,GAAkB,CAAC/E,EAAa/F,IAC7B8F,GNgEsB,EAACC,EAA6BgF,IACpDC,EAAMjF,EAAQgF,GMjEME,CAAgBlF,EAAQ/F,IAAOwD,IACxDzD,QAACC,KAAEA,EAAFgC,KAAQA,KAASkJ,8BAChB7K,gBAACwB,KAAM6I,IAAK1K,EAAMA,KAAMA,EAAMgC,KAAMA,GAAUkJ,MAKvCC,GAAgCR,QAAC5E,OAAEA,KAAW7F,uBACzD,OACEG,gBAACoG,GAAevG,EACb4F,GAAoBC,GAAQvC,IAC3Bf,QAACzC,KACCA,EADDgC,KAECA,KAEG4I,UAEH,MAAa,UAAT5I,eAEA3B,gBAACgK,MAAWrK,KAAMA,GAAU4K,GACzBE,GAAgB/E,EAAQ/F,IAGX,WAATgC,eAEP3B,gBAACwK,MAAY7K,KAAMA,GAAU4K,GAC1BE,GAAgB/E,EAAQ/F,iBAKxBK,gBAACwB,KAAM6I,IAAK1K,EAAMA,KAAMA,EAAMgC,KAAMA,GAAU4I,sECpBlDQ,GAAOtJ,EAClB,GAAmEC,SAAlEgE,OAAEA,EAAFsF,cAAUA,EAAVC,SAAyBA,EAAzBC,QAAmCA,EAAnCtK,SAA4CA,KAAaf,UACxD,MAAMsL,EAAqB,CAAEC,KAAM,MAAOJ,cAAAA,GAEtCtF,IACFyF,EAAKtG,SAAWA,GAASa,IAG3B,MAAM2F,EAAUC,EAAQH,IAClBI,aAAEA,GAAiBF,eAEzB,OACErL,gBAACwL,EAAiBH,eAChBrL,gBAACkG,EAAOiF,QACNzJ,IAAKA,EACLuJ,SAAUM,EAAaN,EAAUC,IAC7BrL,GAEHe,sBCnCE6K,GAAehK,EAC1B,GAAyBC,SAAxBd,SAAEA,KAAaf,UACd,MAAM6L,EAAO3L,iBAEb,OACEC,gBAAC2L,KACChK,KAAK,SACLiK,UAAWF,EAAK5K,UAAU+K,aAC1BC,aACApK,IAAKA,GACD7B,GAEHe,iCCDImL,GAAWtK,EACtB,GAAoCC,SAAnCgE,OAAEA,EAAFsG,YAAUA,KAAgBnM,uBACzB,OACEG,gBAAC+K,QAASlL,GAAO6F,OAAQA,EAAQhE,IAAKA,iBACpC1B,gBAACoG,qBACEpG,gBAAC8K,IAAOpF,OAAQA,IAChBsG,gBAAehM,gBAACyL,IAAa7L,MAAOoM,QAO/CD,GAASrF,aAAe,CACtBsF,YAAa"}
|
package/package.json
CHANGED
package/src/field.tsx
CHANGED
@@ -142,7 +142,6 @@ const createField = (
|
|
142
142
|
isInvalid,
|
143
143
|
isReadOnly,
|
144
144
|
isRequired,
|
145
|
-
isOptional,
|
146
145
|
variant,
|
147
146
|
...inputProps
|
148
147
|
} = props
|
@@ -151,11 +150,10 @@ const createField = (
|
|
151
150
|
<BaseField
|
152
151
|
label={label}
|
153
152
|
hideLabel={hideLabel}
|
154
|
-
|
153
|
+
isDisabled={isDisabled}
|
155
154
|
isInvalid={isInvalid}
|
156
155
|
isReadOnly={isReadOnly}
|
157
156
|
isRequired={isRequired}
|
158
|
-
isOptional={isOptional}
|
159
157
|
variant={variant}
|
160
158
|
>
|
161
159
|
<InputComponent ref={ref} label={label} {...inputProps} />
|