Updates

assets/Form.stories-Byzov6en.js → assets/Form.stories-Cfwt3iwZ.js

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-CexXSJP5.js";import{F as b,c as u,a as r,d as g}from"./Form-f_IjoSRD.js";import{B as m}from"./Button-Bkxkp8i5.js";import{F as t}from"./FormInput-DGOpqSAv.js";import"./highlightText-BfWprMrp.js";import"./index-BP8_t0zE.js";import"./clsx-B-dksMZM.js";import"./Input-ZLs-LNMl.js";import"./index-DRwCZS7x.js";import"./Hint-BgND6QIn.js";import"./Label-Dj0iuwZQ.js";const p=i=>i.split(" ").map(a=>a.match(/^[A-Za-z]/)?a[0].toUpperCase()+a.substring(1):a).join(" "),c=["onBlur","onChange","onSubmit","onTouched","all"],T={title:"Components/Forms/Form",component:b,args:{submitOnChange:!1,shouldValidateOnChange:!0,validationMode:"onChange"},argTypes:{children:{control:!1},validationSchema:{control:!1},defaultValues:{control:!1},onSubmit:{control:!1},onError:{control:!1},shouldValidateOnChange:{control:!1},validationMode:{options:c,control:{type:"select",labels:c}}}},s={render:i=>{const l=u({firstName:r().required("this field is required"),lastName:r().required("this field is required"),email:r().email().required("this field is required"),user:u({label:r().required("this field is required"),value:r().required("this field is required")}),password:r().required("this field is required"),formRadioExample:r(),notification:g()}).required(),d=(n,o)=>{console.log(n),o()},a=n=>{console.log(n)};return e.jsx(b,{...i,validationSchema:l,defaultValues:{firstName:"",lastName:"",email:"",user:{label:"",value:""},password:"",formRadioExample:"opt_1",notification:!1},onSubmit:d,onError:a,children:({setValue:n})=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",gap:"10px"},children:[e.jsx("div",{style:{width:"100%"},children:e.jsx(t,{name:"firstName",label:"First name",placeholder:"First name",required:!0,reserveSpaceForError:!0,onChange:o=>{n("firstName",p(o.target.value))}})}),e.jsx("div",{style:{width:"100%"},children:e.jsx(t,{name:"lastName",label:"Last name",placeholder:"Last name",required:!0,reserveSpaceForError:!0,onChange:o=>{n("lastName",p(o.target.value))}})})]}),e.jsx(t,{name:"email",label:"Email",placeholder:"E-mail",required:!0,reserveSpaceForError:!0}),e.jsx(t,{name:"password",label:"Password",placeholder:"Password",type:"password",passwordToggle:!0,required:!0,reserveSpaceForError:!0}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",gap:"10px"},children:[e.jsx(m,{type:"reset",variant:"secondary",children:"Reset"}),e.jsx(m,{type:"submit",children:"Submit"})]})]})})}};var f,h,v;s.parameters={...s.parameters,docs:{...(f=s.parameters)==null?void 0:f.docs,source:{originalSource:`{
+import{j as e}from"./jsx-runtime-CexXSJP5.js";import{F as b,c as u,a as r,d as g}from"./Form-Cyk7D10R.js";import{B as m}from"./Button-Bkxkp8i5.js";import{F as t}from"./FormInput-LdKyQ_Xf.js";import"./highlightText-BfWprMrp.js";import"./index-BP8_t0zE.js";import"./clsx-B-dksMZM.js";import"./Input-ZLs-LNMl.js";import"./index-DRwCZS7x.js";import"./Hint-BgND6QIn.js";import"./Label-Dj0iuwZQ.js";const p=i=>i.split(" ").map(a=>a.match(/^[A-Za-z]/)?a[0].toUpperCase()+a.substring(1):a).join(" "),c=["onBlur","onChange","onSubmit","onTouched","all"],T={title:"Components/Forms/Form",component:b,args:{submitOnChange:!1,shouldValidateOnChange:!0,validationMode:"onChange"},argTypes:{children:{control:!1},validationSchema:{control:!1},defaultValues:{control:!1},onSubmit:{control:!1},onError:{control:!1},shouldValidateOnChange:{control:!1},validationMode:{options:c,control:{type:"select",labels:c}}}},s={render:i=>{const l=u({firstName:r().required("this field is required"),lastName:r().required("this field is required"),email:r().email().required("this field is required"),user:u({label:r().required("this field is required"),value:r().required("this field is required")}),password:r().required("this field is required"),formRadioExample:r(),notification:g()}).required(),d=(n,o)=>{console.log(n),o()},a=n=>{console.log(n)};return e.jsx(b,{...i,validationSchema:l,defaultValues:{firstName:"",lastName:"",email:"",user:{label:"",value:""},password:"",formRadioExample:"opt_1",notification:!1},onSubmit:d,onError:a,children:({setValue:n})=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",gap:"10px"},children:[e.jsx("div",{style:{width:"100%"},children:e.jsx(t,{name:"firstName",label:"First name",placeholder:"First name",required:!0,reserveSpaceForError:!0,onChange:o=>{n("firstName",p(o.target.value))}})}),e.jsx("div",{style:{width:"100%"},children:e.jsx(t,{name:"lastName",label:"Last name",placeholder:"Last name",required:!0,reserveSpaceForError:!0,onChange:o=>{n("lastName",p(o.target.value))}})})]}),e.jsx(t,{name:"email",label:"Email",placeholder:"E-mail",required:!0,reserveSpaceForError:!0}),e.jsx(t,{name:"password",label:"Password",placeholder:"Password",type:"password",passwordToggle:!0,required:!0,reserveSpaceForError:!0}),e.jsxs("div",{style:{display:"flex",justifyContent:"flex-end",gap:"10px"},children:[e.jsx(m,{type:"reset",variant:"secondary",children:"Reset"}),e.jsx(m,{type:"submit",children:"Submit"})]})]})})}};var f,h,v;s.parameters={...s.parameters,docs:{...(f=s.parameters)==null?void 0:f.docs,source:{originalSource:`{
   render: args => {
     const schema = yup.object({
       firstName: yup.string().required('this field is required'),

assets/FormDatepicker.stories-CdmxXHu2.js → assets/FormDatepicker.stories-D0nXzwsT.js

@@ -1,4 +1,4 @@
-import{j as a}from"./jsx-runtime-CexXSJP5.js";import{u as x,b as g,c as S,e as p,F as w}from"./Form-f_IjoSRD.js";import{B as D}from"./Button-Bkxkp8i5.js";import{r as b}from"./index-BP8_t0zE.js";import{D as q}from"./Datepicker-DkFcQDhn.js";import"./clsx-B-dksMZM.js";import"./subDays-CLJy5PLW.js";import"./index-BxmsGmlx.js";import"./floating-ui.dom-5jwf2x9o.js";import"./index-DRwCZS7x.js";import"./Input-ZLs-LNMl.js";import"./Hint-BgND6QIn.js";import"./Label-Dj0iuwZQ.js";const n=({name:e,required:o,errorMsg:r,...l})=>{const{control:f,setError:d}=x(),{field:{value:i,onChange:y},fieldState:{error:s}}=g({name:e,control:f});return b.useEffect(()=>{r&&d(e,r)},[e,d,r]),a.jsx(q,{...l,name:e,required:o,onChange:h=>y(h),value:i,errorMsg:s==null?void 0:s.message,selected:i})};try{n.displayName="FormDatepicker",n.__docgenInfo={description:"",displayName:"FormDatepicker",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((date: Date | [Date | null, Date | null] | null) => void)"}},errorMsg:{defaultValue:null,description:"",name:"errorMsg",required:!1,type:{name:"FieldError"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},hintText:{defaultValue:null,description:"",name:"hintText",required:!1,type:{name:"string"}},reserveSpaceForError:{defaultValue:null,description:"",name:"reserveSpaceForError",required:!1,type:{name:"boolean"}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"on"'},{value:'"off"'}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},dropdownMode:{defaultValue:null,description:"",name:"dropdownMode",required:!1,type:{name:"enum",value:[{value:'"select"'},{value:'"scroll"'}]}},inputSmall:{defaultValue:null,description:"",name:"inputSmall",required:!1,type:{name:"boolean"}}}}}catch{}const O={title:"Components/Forms/FormDatepicker",component:n,argTypes:{dropdownMode:{description:"type for year and month dropdown"}}},t={render:e=>{const o=S().shape({my_date:e.required?p().required("Required"):p()}),r=l=>{alert(JSON.stringify(l))};return a.jsx("div",{style:{padding:"10px 10px 250px 10px"},children:a.jsxs(w,{validationSchema:o,defaultValues:{my_date:new Date},onSubmit:r,children:[a.jsx(n,{...e,name:"my_date"}),a.jsx(D,{type:"submit",children:"Submit"})]})})},args:{label:"",placeholder:"Select a date",hintText:"",required:!1,disabled:!1,reserveSpaceForError:!0,showMonthDropdown:!1,showYearDropdown:!1,showTimeSelect:!1,showTimeInput:!1,dropdownMode:"select",autoComplete:"off"}};var u,m,c;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`{
+import{j as a}from"./jsx-runtime-CexXSJP5.js";import{u as x,b as g,c as S,e as p,F as w}from"./Form-Cyk7D10R.js";import{B as D}from"./Button-Bkxkp8i5.js";import{r as b}from"./index-BP8_t0zE.js";import{D as q}from"./Datepicker-DkFcQDhn.js";import"./clsx-B-dksMZM.js";import"./subDays-CLJy5PLW.js";import"./index-BxmsGmlx.js";import"./floating-ui.dom-5jwf2x9o.js";import"./index-DRwCZS7x.js";import"./Input-ZLs-LNMl.js";import"./Hint-BgND6QIn.js";import"./Label-Dj0iuwZQ.js";const n=({name:e,required:o,errorMsg:r,...l})=>{const{control:f,setError:d}=x(),{field:{value:i,onChange:y},fieldState:{error:s}}=g({name:e,control:f});return b.useEffect(()=>{r&&d(e,r)},[e,d,r]),a.jsx(q,{...l,name:e,required:o,onChange:h=>y(h),value:i,errorMsg:s==null?void 0:s.message,selected:i})};try{n.displayName="FormDatepicker",n.__docgenInfo={description:"",displayName:"FormDatepicker",props:{name:{defaultValue:null,description:"",name:"name",required:!0,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((date: Date | [Date | null, Date | null] | null) => void)"}},errorMsg:{defaultValue:null,description:"",name:"errorMsg",required:!1,type:{name:"FieldError"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},hintText:{defaultValue:null,description:"",name:"hintText",required:!1,type:{name:"string"}},reserveSpaceForError:{defaultValue:null,description:"",name:"reserveSpaceForError",required:!1,type:{name:"boolean"}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"on"'},{value:'"off"'}]}},dropdownMode:{defaultValue:null,description:"",name:"dropdownMode",required:!1,type:{name:"enum",value:[{value:'"select"'},{value:'"scroll"'}]}},inputSmall:{defaultValue:null,description:"",name:"inputSmall",required:!1,type:{name:"boolean"}}}}}catch{}const O={title:"Components/Forms/FormDatepicker",component:n,argTypes:{dropdownMode:{description:"type for year and month dropdown"}}},t={render:e=>{const o=S().shape({my_date:e.required?p().required("Required"):p()}),r=l=>{alert(JSON.stringify(l))};return a.jsx("div",{style:{padding:"10px 10px 250px 10px"},children:a.jsxs(w,{validationSchema:o,defaultValues:{my_date:new Date},onSubmit:r,children:[a.jsx(n,{...e,name:"my_date"}),a.jsx(D,{type:"submit",children:"Submit"})]})})},args:{label:"",placeholder:"Select a date",hintText:"",required:!1,disabled:!1,reserveSpaceForError:!0,showMonthDropdown:!1,showYearDropdown:!1,showTimeSelect:!1,showTimeInput:!1,dropdownMode:"select",autoComplete:"off"}};var u,m,c;t.parameters={...t.parameters,docs:{...(u=t.parameters)==null?void 0:u.docs,source:{originalSource:`{
   render: args => {
     const schema = yup.object().shape({
       my_date: args.required ? yup.date().required('Required') : yup.date()