@indec/form-builder

FORM BUILDER 🚀

Glossary

1. Set up
2. Start
3. Dependencies
4. Components
5. Tests
6. Contributing

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.