@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

Usage

import {FormBuilder} from '@indec/form-builder/components';

function MyComponent({sections}) {
  const handleStoreValues = sectionValues => {
    console.log(sectionValues); // here are the completed values of the form
  };

  return <FormBuilder onPrevious={handleStoreValues} sections={sections} onSubmit={handleStoreValues} />;
}

When you have sections with answers you can send the prop initialValues to the component FormBuilder to render those values.

import {FormBuilder} from '@indec/form-builder/lib/components';

function MyComponent({sections}) {
  const handleStoreValues = sectionValues => {
    console.log(sectionValues); // here are the completed values of the form
  };

  return (
    <FormBuilder
      onPrevious={handleStoreValues}
      sections={sections}
      onSubmit={handleStoreValues}
      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 handleStoreValues = sectionValues => {
    console.log(sectionValues); // here are the completed values of the form
  };
  
  return (
    <FormBuilder
      onPrevious={handleStoreValues}
      sections={sections}
      onSubmit={handleStoreValues}
      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.