MaestroForm

• A new, intuitive and easy way to create Forms using React.

##Installation

npm install maestroform --save

##Example

• MaestroForm allows you to create react forms in a simple JSON way, look at this example :

<MaestroForm.Form
	// A target function to execute on Form' Submit
    onSubmit = {this.signIn}

    // A target function to execute when Form is considered as Valid
    onValid = {this.enableButton}

    // A target function to execute when Form is considered as InValid
    onInvalid = {this.disableButton}

    // Now here is the list of your Fom components as inputs or buttons
    formComponents = {
        [{
            "kind" : "input",
            "type" : "mail",
            "name" : "Mail Input",
            "placeholder" : "Mail",
		    // A conditions' list to be verified by the field to be validated
            "conditions" : ["mail"],
		    // A target function to execute when field is considered as Valid
            "onValid" : this.onValidField,
		    // A target function to execute when field is considered as inValid
            "onInvalid" : this.onInvalidField,
            "required" : true
        }, {
            "kind" : "input",
            "type" : "password",
            "name" : "Password Input",
            "onValid" : this.onValidField,
            "onInvalid" : this.onInvalidField,
            "placeholder" : "Password",
            "required" : true
        }, {
            "kind" : "button",
            "type" : "submit",
            "name" : "Submit Button",
            "inlineText": "Connexion"
        }]
    }
/>

• In this example, a simple two-inputs form is created with a validation button; and as you can see MaestroForm is completely modular thanks to it's onValid and onInvalid options that allows you to keep plenty control on user's interactions with the form.

##How To Use It?

• First, take a look at the structure of MaestroForm :

-> To see a bigger version of this picture, or simply if you can't see it, please click here <-

• As you can see, there is a kind of hierarchy in the behaviour of MaestroForm : for example, the kind and type of component that you choose determines the use of other component options.
• If the software estimate that there is a logical error in your declaration it will display a custom error message.
• ❗ kind and type are required for a component ❗

##What About My CSS?

• Don't panic! We we thought of that too ;)

• When a component is created we directly apply on it a custom className, for example here:

formComponents = {
        [{
            "kind" : "input",
            "type" : "mail"
        }, {
            "kind" : "input",
            "type" : "password"
        }, {
            "kind" : "button",
            "type" : "submit"
        }]
    }

• The first input will have m-input0 as classname, the second m-input1, and the button m-button2 : you now understand that it is composed of "m-" followed by the kind of the component and it's indexation in the JSON component list.

• In completion, the class m-valid or m-invalid are added if the field is considered as valid or invalid.

##Validation conditions

• You saw that you can choose a bunch of validation conditions and also some functions that will be called on proper time.

####Field Validation

• When called, these function take as parameter an object tike that :

{
   result: Boolean,
    value: String,
    target: String,
    index: Number
}

• Result is just use to identify if the fiels is valid or invalid ( true means valid and false invalid)
• The value is set at null if result is true, and contains the validation condition witch was not verified if result is false.
• Target is simply the targeted className of the component as a string (ex: "m-input2 m-valid", or "m-input4 m-invalid"...)
• Index refers to the the position of the component in your JSON declaration.

####Global Validation

• These functions are called when all fields have been checked : if one of them is considered as invalid, the onInvalid targeted function is called, else, the onValid function is called.
• When called, these functions receive an array containing index of invalid objects.

##Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Test your code!

##Release History

• 0.1.1 Initial release