[Ivan Diaz] - Create Form component

src/app/main/main-home-page-login-widget.js

@@ -1,5 +1,6 @@
 import React              from 'react/addons';
 
+import Form               from 'core-components/form';
 import Widget             from 'core-components/widget';
 import Input              from 'core-components/input';
 import Button             from 'core-components/button';
@@ -9,11 +10,14 @@ var MainHomePageLoginWidget = React.createClass({
         return (
             <Widget>
                 <h3>Login</h3>
+                <Form>
+                    <div>
+                        <Input placeholder="email" name="email" />
+                    </div>
+                    <Input placeholder="password" name="password" />
 
-                <Input placeholder="email" />
-                <Input placeholder="password" />
-
-                <Button type="primary">LOG IN</Button>
+                    <Button type="primary">LOG IN</Button>
+                </Form>
             </Widget>
         );
     }

src/core-components/form.js

@@ -0,0 +1,64 @@
+import React              from 'react/addons';
+import _                  from 'lodash';
+
+import Input              from 'core-components/input';
+
+var Form = React.createClass({
+
+    validations: {},
+
+    getInitialState() {
+        return {
+            form: {}
+        }
+    },
+
+    render() {
+        return (
+            <form>
+                {this.renderTraversedChildren(this.props.children)}
+            </form>
+        );
+    },
+
+    renderTraversedChildren(children) {
+        if (typeof children !== 'object' || children === null) {
+            return children;
+        }
+
+        return React.Children.map(children, function (child) {
+            if (typeof child !== 'object' || child === null) {
+                return child;
+            }
+
+            if (child.props && child.type === Input) {
+                return React.cloneElement(child, this.getInputProps(child.props), child.props && child.props.children);
+            } else {
+                return React.cloneElement(child, {}, this.renderTraversedChildren(child.props && child.props.children));
+            }
+        }.bind(this));
+    },
+
+    getInputProps(props) {
+        var inputName = props.name;
+
+        this.validations[inputName] = props.validation;
+
+        return {
+            onChange: this.handleInputChange.bind(this, inputName),
+            value: this.state.form[inputName] || props.value
+        };
+    },
+
+    handleInputChange(inputName, event) {
+        var form = _.clone(this.state.form);
+
+        form[inputName] = event.target.value;
+
+        this.setState({
+            form: form
+        });
+    }
+});
+
+export default Form;