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

First, import the CSS styles in your application:

import '@indec/form-builder/lib/styles/output.css';

Then import and use the components:

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 (
    <div className="flex justify-center bg-blue-300 h-24 items-center">
      <p>My custom header</p>
    </div>
  );
}

function NavigationButtons() {
  return (
    <div className="flex justify-between">
      <button
        type="button"
        className="px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        Go back
      </button>
      <button
        type="button"
        className="px-4 py-2 bg-red-600 text-white border border-red-600 rounded hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
      >
        Next
      </button>
    </div>
  );
}

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
• Tailwind CSS (utility-first CSS framework for styling)
• Formik (to make it easier to write forms with React)
• Yup (handles form validation)
• React Datepicker (date/time picker component)
• React Number Format (number formatting for currency fields)
• 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.