forms.md

React Form Abstraction

What problems are we trying to solve?

1. There is not a generic solution for handling dirty state checking and reverts throughout our codebase.

2. Validation is a mess, either it's duplicated as inline validation in the "Input" component and in the "Form" component. Other places it exist in the parent component and passed down through props to the "Input", this means our inputs require the parent component to know and do a ton of validation making them no longer easily portable.

Requirements for a good React Form Abstraction

1. Generalizes and abstracts form dirty state, and reverts
2. Allows to define validation once for an input while keeping form inputs portable and easily composeable.
3. A standardized interface for validation functions and how errors are presented both inline and at the form level.

Architecture

 +------------------------+
 |        Form HoC        |
 +-------+--------+-------+
         |        |
         +        +
    form api   form state

+--------------------------+
|                          |
|   Wrapped components     |
|   `props.form`           |
|   `props.formState`      |
+------------+-------------+
             |
             |
             |
             v
         FormInput