@aeco-cloud/form-flow v0.1.1-7.2

Form Flow

A collection of react components that allows to easily create forms. It is basically a wrapper around for react hook form that takes out the pain of registering and configuring components and validations. All components in the form are based on the v5 material ui theme. In order to use a custom mui theme, just wrap your form in the mui theme provider.

The package is flexible: you can still register custom elements in the react hook form if you have more customized needs.

Getting started

How to install install the package

npm install @aeco-cloud/form-flow

If you want to integrate nicely with material-ui, do not forget to include the Roboto font and use the CssBaseline component.

Working Example:

import {
  Form,
  TextField,
  Question,
  Section,
  Label,
  Select,
  CheckboxGroup,
} from "aeco-cloud/form-flow";
import { Button, Container } from "@mui/material";
import { SubmitHandler, useForm } from "react-hook-form";

// For typescript integration
type FormData = {
  myFirstTextField: "" | string;
  myFirstDropdown: [] | string[];
  myFirstCheckboxGroup: [] | string[];
};

function App() {
  const form = useForm<FormData>();
  const onSubmit: SubmitHandler<FormData> = (data) => {
    console.log("Form Submitted:", data);
  };
  console.log("Form Watched: ", form.watch());
  return (
    <Container maxWidth="md">
      <Form form={form}>
        <Section>
          <Question>
            <Label label="My First Textfield" tooltip={"here is some information"} />
            <TextField
              name="myFirstTextField"
              rules={{ required: "Please fill in this question" }}
            />
          </Question>
          <Question>
            <Label label="My First Dropdown" tooltip={"here is some information"} />
            <Select
              defaultValue={"linkedIn"}
              name="myFirstDropdown"
              options={[
                { label: "Social Media Platform", value: "GROUP" },
                { label: "LinkedIn", value: "linkedIn" },
                { label: "Twitter", value: "twitter" },
                { label: "Favorite Food", value: "GROUP" },
                { label: "Sushi", value: "sushi" },
                { label: "Pizza", value: "pizza" },
              ]}
            />
          </Question>
          <Question>
            <Label label="My first Checkbox Group" />
            <CheckboxGroup
              muiFormGroupProps={{ row: true }}
              // defaultValue={["linkedIn"]}
              name="myFirstCheckboxGroup"
              options={[
                { label: "LinkedIn", value: "linkedIn" },
                { label: "Twitter", value: "twitter" },
              ]}
              rules={{
                required: "Please fill in this question",
                validate: {
                  selectBoth: (value: [] | string[]) => value.length > 1 || "Please select both",
                },
              }}
            />
          </Question>
        </Section>

        <Button onClick={form.handleSubmit(onSubmit)}>Submit</Button>
      </Form>
    </Container>
  );
}

export default App;

Documentation

The Form component

The main component is the Form component. The component accepts the following props:

All components that are wrapped inside the Form component will have acces to the form, it's settings and validations

import Form from "@aeco-cloud/form-flow";
import { useForm } from "react-hook-form";
const form = useForm()

<Form form={form}>
  // the components that fill up the form
  // check out the documentation for all available components
  <Components>
  // in order to be able to submit the form you need to call the handleSubmit function somewhere
  <Button onClick={form.handleSubmit((data) => {console.log(data)})}>Submit</Button>;
</Form>

Input Components

These components are the inputs that are registered to the form

The expected types that are registered in the form are shown below

type FormData = {
  textField: "" | string,
  Select: "" | string,
  MultiSelect: [] | string[],
  checkboxGroup: [] | string[],
  slider: number,
  toggleButton: [] | string[],
  radioButtonGroup: "" | string,
  datePicker: null | Date,
  autocomplete: "" | string,
  toggleRadioGroup: string,
  toggleCheckboxGroup: [] | string[],
};

Textfield

A basic input textfield.

Select

MultipleSelect

Same as select except that default value is [] and the element returns string[] instead of string

CheckboxGroup

The CheckboxGroup is a combination of multiple MUI components:

• FormGroup
• FormControlLabel
• Muicheckbox

Slider

A basic slider

RadioGroup

The RadioGroup is a combination of multiple MUI components:

• RadioGroup
• FormControlLabel
• Muiradio

ToggleCheckboxGroup

The ToggleCheckboxGroup is a combination of multiple MUI components:

• ToggleButtonGroup
• muiToggleButton
• muiCheckbox

ToggleRadioGroup

The ToggleRadioGroup is a combination of multiple MUI components:

• ToggleButtonGroup
• muiToggleButton
• muiRadio

DatePicker

Autocomplete

The Autocomplete contains a textfield component.

Helper Components

These components help with styling your form in a consistent way.

Section

TODO

Question

TODO

Label

TODO

Mui Integration

All components are based on the official Mui Components. Each component can be customised in several ways:

By changing the theme that wraps your form

Consider this theme that changes the label weight and

const theme = createTheme({
  typography: {
    // used for the labels of the questions
    subtitle1: { fontWeight: 700, fontSize: "0.9rem" },
  },
  // Mui components that are used in the FormFlow Components
  components: {
    // The error text beneath the inputs
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          marginTop: 10,
        },
      },
    },
  },
});

By using the mui props of each component

In each component you can pass down props to the underlying Mui component to adjust the styling or the default props.