Add functionality to transform props from redux-form to ui form components

spikes/form/redux-form/client/form/form-two.js

@@ -2,11 +2,17 @@ const React = require('react');
 const ReactRouter = require('react-router');
 const ReduxForm = require('redux-form');
 const Styled = require('styled-components');
-const Input = require('./input');
+// const Input = require('./input');
-const InputRfProps = require('./inputRfProps');
+// const InputRfProps = require('./inputRfProps');
 const validate = require('./validate');
 const Form = require('./shared').form;
 
+const proxy = require('./proxy');
+
+const {
+  Input
+} = proxy;
+
 const {
   browserHistory
 } = ReactRouter;
@@ -24,7 +30,7 @@ const FormTwo = (props) => {
   const { handleSubmit } = props
   return (
     <Form onSubmit={handleSubmit(() => {browserHistory.push('/form-three')})}>
-      <Field name="email" type="email" component={InputRfProps} label="Email"/>
+      <Field name="email" type="email" component={Input} label="Email"/>
       <div>
         <label>Sex</label>
         <Field name="sex" component={

spikes/form/redux-form/client/form/form.js

@@ -1,11 +1,17 @@
 const React = require('react');
 const ReduxForm = require('redux-form');
 const Styled = require('styled-components');
-const Input = require('./input');
+// const Input = require('./input');
 const InputRfProps = require('./inputRfProps');
 const validate = require('./validate');
 const Form = require('./shared').form;
 
+const proxy = require('./proxy');
+
+const {
+  Input
+} = proxy;
+
 const {
   Field,
   reduxForm
@@ -38,6 +44,7 @@ const InputField = styled.input`
 
 // styled html input element - props.input -> props
 const SimpleInput = (props) => {
+
   return (
     <InputField
       type="text"
@@ -68,9 +75,7 @@ const TestForm = React.createClass({
           </div>
           <div>
             { /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ }
-            <Field name="lastName" component={
+            <Field name="lastName" component={Input} type="text" placeholder="Last Name" label="Last Name"/>
-                props => <Input {...props.input} {...props.meta} {...props} />
-              } type="text" placeholder="Last Name" label="Last Name"/>
           </div>
           <div>
             <Field name="email" component={InputRfProps} type="email" placeholder="Email" label="Email"/>

spikes/form/redux-form/client/form/input.js

@@ -9,6 +9,11 @@ const Label = styled.label`
   color: #464646;
 `;
 
+const Error = styled.label`
+  color: red;
+  float: right;
+`;
+
 const InputField = styled.input`
   margin-bottom: 15px;
   background: #FFFFFF;
@@ -55,7 +60,10 @@ const Input = ({
   style,
   tabIndex,
   type,
-  value
+  value,
+  touched,
+  valid,
+  error
 }) => {
   const _label = label || children;
   const _children = label && children ? children : null;
@@ -65,6 +73,7 @@ const Input = ({
       <Label htmlFor={id}>
         {_label}
       </Label>
+      { touched && !valid && error && <Error>{error}</Error>}
       <InputField
         aria-labelledby={labelledby}
         autoComplete={autoComplete}

spikes/form/redux-form/client/form/proxy.js

@@ -0,0 +1,19 @@
+const transformPropsWith = require('transform-props-with');
+const Input = require('./input');
+
+const {
+  default: tx
+} = transformPropsWith;
+
+const flattenProps = props => {
+  const { input, meta, ...rest } = props;
+  return {
+    ...input,
+    ...meta,
+    ...rest
+  };
+}
+
+module.exports = {
+  Input: tx(flattenProps)(Input)
+};

spikes/form/redux-form/package.json

@@ -36,6 +36,7 @@
     "require-dir": "^0.3.1",
     "style-loader": "^0.13.1",
     "styled-components": "^1.2.1",
+    "transform-props-with": "^2.1.0",
     "validator": "^6.2.0",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.16.2"