Controlling a field:
The controlledField() decorator will wrap the InputText component with the Field component injecting all control properties into InputText, now it has two required props: form and name:

import React from 'react';
import {controlledField} from 'react-formctrl';

let InputText = (props) => {
    const { name, fieldCtrl, type, onChange, onBlur } = props;
    return (
        <input 
            name={name} 
            type={type} 
            onChange={onChange} 
            onBlur={onBlur} 
        />
    );
};
InputText = controlledField()(InputText);
export {InputText};

Controlling a form:
The controlledForm() decorator will wrap the LoginForm component with FormControl component, injecting a formCtrl property that can be used to access all form values and validation state, and the LoginForm component has now a required form property:

import React from 'react';
import {Form, controlledForm} from 'react-formctrl';
import {InputText} from './InputText';

let LoginForm = (props) => {
    const {form, formCtrl, onSubmit} = props;
    return (
        <div>
            <Form name={form} onSubmit={onSubmit}>
                <div>
                    <InputText 
                        form={form} 
                        name="username" 
                        required 
                    />
                    <InputText 
                        form={form} 
                        name="password" 
                        type="password" 
                        minLength={8} 
                        required
                    />
                    <button type="submit" disabled={formCtrl.invalid}>Login</button>
                </div>
            </Form>
        </div>
    );
};
LoginForm = controlledForm()(LoginForm);
export {LoginForm};

Form usage:

import React from 'react';
import {LoginForm} from './LoginForm';

function View() {
    const handleSubmit = (values, formCtrl) => {
        console.log('Login form submited.', values, formCtrl);
    };
    return (
        <div className="view">
            <LoginForm form="loginForm" onSubmit={handleSubmit} />
        </div>
    );
}

Add Typescript definitions to the Components.

Is your feature request related to a problem? Please describe.
The React Form CTRL event bus increases a lot the final bundle size.

Describe the solution you'd like
The lib should use Context API instead to improve performance and bundle size.

Add an "onReset" property to "Form" component.

When using "Field" component, allow provide an "onBlur" property to do extra "blur" control.

<Field 
    form="t" 
    name="a" 
    onChange={extraChangeControl} 
    onBlur={extraBlurControl)
    onReset={extraResetControl}
>
    <MyInputComponent />
</Field>

When using "controlledField" decorator, use the "onChange" and "onBlur" properties to the extra control.

let MyInputComponent = (props) => {
    return (
        <input 
              type={props.type} 
              value={props.value} 
              onChange={props.onChange} // this is the injected handler
              onBlur={props.onBlur} // this is the injected handler
         />
    )
}

MyInputComponent = controlledField()(MyInputComponent)

<MyInputComponent 
    form="t"
    name="a"
    onChange={extraChangeControl}
    onBlur={extraBlurControl}
    onReset={extraResetControl}
/>

Requirements

• The extra "onChange" and "onBlur" handlers should be invoked after controllers update.

Because of #30 task raised the dist/react-formctrl.min.js size from 26kb to 38kb.
But it's not a realiable size calculator, so:

• Add a bundle size calculator to live demo README page

It fails to compile.

/home/leandro/Documentos/dev/material-ui-next-test/node_modules/react-formctrl/lib/provider/provider.d.ts
(236,24): error TS2304: Cannot find name 'ValidatorSpec'.

Create a new function named "setFieldsValues" on FormController

The markdown tables are broking the page responsitivity.

The CustomEvent constructor is not supported by IE 11.

Instead of:

    static dispatchRegisterValidators(validators) {
        const payload = {detail: onRegisterValidators(validators)}
        const event = new CustomEvent(PROVIDER_EVENT, payload)
        document.dispatchEvent(event)
    }

It should be:

    static dispatchRegisterValidators(validators) {
        const payload = onRegisterValidators(validators)
        const event = FormEventDispatcher.createEvent(PROVIDER_EVENT, payload)
        document.dispatchEvent(event)
    }

    static createEvent(type, payload) {
        const customEvent = document.createEvent('CustomEvent')
        customEvent.initCustomEvent(type, false, false, payload)
        return customEvent
    }

When the referenced match field changes, the confirmation field validation is not processed.

Currently is not possible to registar an custom field validator.

Proposal:

• Allow register an array of validators on FormProvider component to provide extra global validations.

Specs:

• Allow to define a name to the global validator, and provide a Field property to define a array of custom global validators names.

The Field component have missing properties on typescript definition FieldProps:

• match
• min
• max
• minLength
• maxLength

Increase test coverage to 85% at least

• Find a syntax highlight component library that better renders react codes.
• Replace the current syntax highlight component library.

Handle field initial value of Date type, and handle submits as Date type

Refactor components business logic to redux like flow:

• Refactor provider state change to reducer like functions.
• Refactor event dispatcher to action creator style.

Add support to input file handling and file extension validation

Proposal:

• Add "files" attribute on FieldStateController object containing all selected files of the field;
• Add "accept" attribute to FieldStateProperties, to provide the accepted files mimetypes;
• Add "extensions" attribute to FieldStateProperties, to provide an array of extensions to validate;
• Add "files" attribute on FormStateController object containing all input file names and it's selected files.

Create components PropTypes to improve development productivity and component properties validation.

Use react-markdown library to render de README.md of the repository on the index live demo page.

Library link: https://github.com/showdownjs/showdown

Allow to add dynamic fields to represent a collection of objects.

Proposal

• Create a FieldsGroup component to compose the dynamic form fields groups.

Specs

• The FieldsGroup child components will be the template for the dynamic entry
• The FieldsGroup component should allow to initialize the dynamic fields with an array of objects that will map it's properties of each entry to the registered fields in children.

Reorganize the live demo navbar menu

When a string value is provided to Field component "validate" property, a error log is thrown:

warning.js:35 Warning: Failed prop type: Invalid prop `validate` of type `string` supplied to `Field`, expected an array.
    in Field (created by CustomValidatorForm)
    in CustomValidatorForm (created by CustomValidatorExample)
    in FormControl (created by CustomValidatorExample)
    in div (created by CustomValidatorExample)
    in CustomValidatorExample (created by Routes)
    in div (created by Case)
    in div (created by Case)
    in Case (created by Routes)
    in Page (created by Route)
    in Route (created by Route)
    in Route (created by Routes)
    in div (created by Routes)
    in Routes (created by AppContent)
    in div (created by AppLayout)
    in div (created by AppLayout)
    in AppLayout (created by AppContent)
    in AppContent (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in FormProvider (created by App)
    in App

Min number value validator fails if min is zero

Improve live demo layout by adding bootstrap.

The messages of validation errors provided are to simple, and have insuficient information about the error.

Currently:
errors is an array of strings.

New:
errors is an array of objects, that each one has an "key" attribute of type string and an optional "params" attibute of type object containing message parameters such like:

const errors = [
     {key: 'email'},
     {key: 'minLength', params: {minLength: 8}}
]

This is a breaking change!

The Field component have missing declared properties on PropTypes definitions:

• match
• min
• max
• minLength
• maxLength

Looks like the backdrop of the dropdown menu item is overriding the menu options.

The "ControlledFormProps" typescript interface definition is missing "setFieldValue" function.

The current field validation code is terrible.

Refactor to a better code design

Proposal:

• Create a abstract class named "Validator" which have three methods:
  • shouldValidate: returns true if the validator should validate
  • validate: the validation itself, return true if valid.
  • createValidationError: the validation object to be added on field errors list if validation fails.

Create automated test for all components:

• FormProvider
• Form
• Field
• FormControl

The mobile menu of the live demo is not opening when the trigger button is clicked.

After #3 task, add a continuous integration support

The "Complete user form example" available in "https://leandrohsilveira.github.io/react-formctrl/#/users" have responsitivity problems:

Allow attach a callback function to form reset event on Form Controller.