FORM BUILDER 🚀
Glossary
Set up
Install the package as dependency
$ npm install @indec/form-builder
Then you should use FormBuilder
component
import {useState} from 'react';
import {FormBuilder} from '@indec/form-builder/lib/components';
function MyComponent({sections}) {
const [page, setPage] = useState(0);
const handleNext = values => {
console.log(values); // here are the completed values of the form
setPage(page + 1);
}
return (
<FormBuilder
onPrevious={() => setPage(page - 1)}
page={page}
section={sections[page]}
isLastSection={sections.length - 1 === page}
onSubmit={handleNext}
/>
)
}
When you have a section with answers you can send the prop initialValues
to the component FormBuilder
to render those values.
import {useState} from 'react';
import {FormBuilder} from '@indec/form-builder/lib/components';
function MyComponent({sections}) {
const [page, setPage] = useState(0);
const handleNext = values => {
console.log(values); // here are the completed values of the form
setPage(page + 1);
}
return (
<FormBuilder
onPrevious={() => setPage(page - 1)}
page={page}
section={sections[page]}
isLastSection={sections.length - 1 === page}
onSubmit={handleNext}
initialValues={{
S1: [
{
id: 1,
S1P1: {
id: 1,
answer: 'test'
},
S1P2: {
id: 2,
answer: 26
},
S1P3: {
id: 3,
answer: [
{
id: 1,
value: 123456
},
{
id: 2,
value: 12345678
}
]
}
}
]
}}
/>
)
}
If you want to change the default navigation button or change the header, pass to FormBuilder component the prop components
function SectionHeader() {
return (
<Box sx={{
display: 'flex', justifyContent: 'center', backgroundColor: '#98b9ed', height: '100px'
}}
>
<Typography>My custom header</Typography>
</Box>
);
}
function NavigationButtons() {
return (
<Box sx={{display: 'flex', justifyContent: 'space-between'}}>
<Button variant="outlined">Go back</Button>
<Button variant="outlined" color="error">Next</Button>
</Box>
);
}
function MyComponent({sections}) {
const [page, setPage] = useState(0);
const handleNext = values => {
console.log(values); // here are the completed values of the form
setPage(page + 1);
}
return (
<FormBuilder
onPrevious={() => setPage(page - 1)}
page={page}
section={sections[page]}
isLastSection={sections.length - 1 === page}
onSubmit={handleNext}
components={{
SectionHeader: props => <SectionHeader {...props} />,
NavigationButtons: props => <NavigationButtons {...props} />
}}
/>
)
}
Start
To start storybook you must run the following command:
$ npm run storybook
Dependencies
These are the core dependencies you'll need to get acquainted yourself with:
- React
- Material ui (component library our UI is built upon)
- Formik (to make it easier to write forms with React)
- Yup (handles form validation)
- Storybook (component library)
- Jest (testing framework)
- React Testing Library (DOM interface for testing)
- EsLint (used to lint code)
Components
We use Storybook to build our UI components isolated of the application.
If you want to see our available components, please check it out here: Form Builder
Tests
To run the tests you must run the following command:
$ npm run test
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.