Commit23a1a4d

authored

refactor: Add components for styling forms (#1169)

* Add FormFooter* Add FullPageForm* Lint* Make detail optional* Use Language

1 parent454ccf7 commit23a1a4dCopy full SHA for 23a1a4d

File tree

+142

-0

lines changed

+142

-0

lines changed

Lines changed: 29 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,29 @@`
	`1`	`+import{ComponentMeta,Story}from"@storybook/react"`
	`2`	`+importReactfrom"react"`
	`3`	`+import{FormFooter,FormFooterProps}from"./FormFooter"`
	`4`	`+`
	`5`	`+exportdefault{`
	`6`	`+title:"components/FormFooter",`
	`7`	`+component:FormFooter,`
	`8`	`+argTypes:{`
	`9`	`+onCancel:{action:"cancel"},`
	`10`	`+},`
	`11`	`+}asComponentMeta<typeofFormFooter>`
	`12`	`+`
	`13`	`+constTemplate:Story<FormFooterProps>=(args)=><FormFooter{...args}/>`
	`14`	`+`
	`15`	`+exportconstReady=Template.bind({})`
	`16`	`+Ready.args={`
	`17`	`+isLoading:false,`
	`18`	`+}`
	`19`	`+`
	`20`	`+exportconstCustom=Template.bind({})`
	`21`	`+Custom.args={`
	`22`	`+isLoading:false,`
	`23`	`+submitLabel:"Create",`
	`24`	`+}`
	`25`	`+`
	`26`	`+exportconstLoading=Template.bind({})`
	`27`	`+Loading.args={`
	`28`	`+isLoading:true,`
	`29`	`+}`

Lines changed: 46 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,46 @@`
	`1`	`+importButtonfrom"@material-ui/core/Button"`
	`2`	`+import{makeStyles}from"@material-ui/core/styles"`
	`3`	`+importReactfrom"react"`
	`4`	`+import{LoadingButton}from"../LoadingButton/LoadingButton"`
	`5`	`+`
	`6`	`+constLanguage={`
	`7`	`+cancelLabel:"Cancel",`
	`8`	`+defaultSubmitLabel:"Submit",`
	`9`	`+}`
	`10`	`+`
	`11`	`+exportinterfaceFormFooterProps{`
	`12`	`+onCancel:()=>void`
	`13`	`+isLoading:boolean`
	`14`	`+submitLabel?:string`
	`15`	`+}`
	`16`	`+`
	`17`	`+constuseStyles=makeStyles(()=>({`
	`18`	`+footer:{`
	`19`	`+display:"flex",`
	`20`	`+flex:"0",`
	`21`	`+flexDirection:"row",`
	`22`	`+justifyContent:"center",`
	`23`	`+alignItems:"center",`
	`24`	`+},`
	`25`	`+button:{`
	`26`	`+margin:"1em",`
	`27`	`+},`
	`28`	`+}))`
	`29`	`+`
	`30`	`+exportconstFormFooter:React.FC<FormFooterProps>=({`
	`31`	`+ onCancel,`
	`32`	`+ isLoading,`
	`33`	`+ submitLabel=Language.defaultSubmitLabel,`
	`34`	`+})=>{`
	`35`	`+conststyles=useStyles()`
	`36`	`+return(`
	`37`	`+<divclassName={styles.footer}>`
	`38`	`+<ButtonclassName={styles.button}onClick={onCancel}variant="outlined">`
	`39`	`+{Language.cancelLabel}`
	`40`	`+</Button>`
	`41`	`+<LoadingButtonloading={isLoading}className={styles.button}variant="contained"color="primary"type="submit">`
	`42`	`+{submitLabel}`
	`43`	`+</LoadingButton>`
	`44`	`+</div>`
	`45`	`+)`
	`46`	`+}`

Lines changed: 35 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,35 @@`
	`1`	`+importTextFieldfrom"@material-ui/core/TextField"`
	`2`	`+import{action}from"@storybook/addon-actions"`
	`3`	`+import{ComponentMeta,Story}from"@storybook/react"`
	`4`	`+importReactfrom"react"`
	`5`	`+import{FormFooter}from"../FormFooter/FormFooter"`
	`6`	`+import{Stack}from"../Stack/Stack"`
	`7`	`+import{FullPageForm,FullPageFormProps}from"./FullPageForm"`
	`8`	`+`
	`9`	`+exportdefault{`
	`10`	`+title:"components/FullPageForm",`
	`11`	`+component:FullPageForm,`
	`12`	`+}asComponentMeta<typeofFullPageForm>`
	`13`	`+`
	`14`	`+constTemplate:Story<FullPageFormProps>=(args)=>(`
	`15`	`+<FullPageForm{...args}>`
	`16`	`+<form`
	`17`	`+onSubmit={(e)=>{`
	`18`	`+e.preventDefault()`
	`19`	`+}}`
	`20`	`+>`
	`21`	`+<Stack>`
	`22`	`+<TextFieldfullWidthvariant="outlined"label="Field 1"name="field1"/>`
	`23`	`+<TextFieldfullWidthvariant="outlined"label="Field 2"name="field2"/>`
	`24`	`+<FormFooterisLoading={false}onCancel={action("cancel")}/>`
	`25`	`+</Stack>`
	`26`	`+</form>`
	`27`	`+</FullPageForm>`
	`28`	`+)`
	`29`	`+`
	`30`	`+exportconstExample=Template.bind({})`
	`31`	`+Example.args={`
	`32`	`+title:"My Form",`
	`33`	`+detail:"Lorem ipsum dolor",`
	`34`	`+onCancel:action("cancel"),`
	`35`	`+}`

Lines changed: 32 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,32 @@`
	`1`	`+import{makeStyles}from"@material-ui/core/styles"`
	`2`	`+importReactfrom"react"`
	`3`	`+import{FormCloseButton}from"../FormCloseButton/FormCloseButton"`
	`4`	`+import{FormTitle}from"../FormTitle/FormTitle"`
	`5`	`+`
	`6`	`+exportinterfaceFullPageFormProps{`
	`7`	`+title:string`
	`8`	`+detail?:React.ReactNode`
	`9`	`+onCancel:()=>void`
	`10`	`+}`
	`11`	`+`
	`12`	`+constuseStyles=makeStyles(()=>({`
	`13`	`+root:{`
	`14`	`+maxWidth:"1380px",`
	`15`	`+width:"100%",`
	`16`	`+display:"flex",`
	`17`	`+flexDirection:"column",`
	`18`	`+alignItems:"center",`
	`19`	`+},`
	`20`	`+}))`
	`21`	`+`
	`22`	`+exportconstFullPageForm:React.FC<FullPageFormProps>=({ title, detail, onCancel, children})=>{`
	`23`	`+conststyles=useStyles()`
	`24`	`+return(`
	`25`	`+<mainclassName={styles.root}>`
	`26`	`+<FormTitletitle={title}detail={detail}/>`
	`27`	`+<FormCloseButtononClose={onCancel}/>`
	`28`	`+`
	`29`	`+{children}`
	`30`	`+</main>`
	`31`	`+)`
	`32`	`+}`

Comments

(0)