Add redux-form spike: one page form, multi page form, validation, errors

spikes/form/redux-form/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}

spikes/form/redux-form/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output

spikes/form/redux-form/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }]
+  }
+}

spikes/form/redux-form/.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log

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

@@ -0,0 +1,50 @@
+const React = require('react');
+const Styled = require('styled-components');
+const ReactRouter = require('react-router');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  Link
+} = ReactRouter;
+
+const Centered = styled.div`
+  width: 300px;
+  margin: 20px auto;
+  text-align: center;
+`;
+
+const PrettyLink = styled(Link)`
+  text-transform: uppercase;
+  padding: 0 10px;
+  text-decoration: none;
+`;
+
+const App = React.createClass({
+  render: function() {
+    const {
+      children
+    } = this.props;
+
+    return (
+        <div>
+          <Centered>
+            <PrettyLink to="form" activeStyle={{ fontWeight: "bold" }}>Form</PrettyLink>
+            <PrettyLink to="form-one" activeStyle={{ fontWeight: "bold" }}>Multi page form</PrettyLink>
+          </Centered>
+          <div>
+          { children }
+          </div>
+        </div>
+    );
+  }
+});
+
+const Home = ({}) => <Centered><p>Select a form!</p></Centered>;
+
+module.exports = {
+  App,
+  Home
+};

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

@@ -0,0 +1,41 @@
+const React = require('react');
+const ReactRouter = require('react-router');
+const ReduxForm = require('redux-form');
+const Styled = require('styled-components');
+const Input = require('./input');
+const InputRfProps = require('./inputRfProps');
+const validate = require('./validate');
+const Form = require('./shared').form;
+
+const {
+  browserHistory
+} = ReactRouter;
+
+const {
+  Field,
+  reduxForm
+} = ReduxForm;
+
+const {
+  default: styled
+} = Styled;
+
+const FormOne = (props) => {
+  const { handleSubmit } = props;
+  return (
+    <Form onSubmit={handleSubmit(() => {browserHistory.push('/form-two')})}>
+      <Field name="firstName" type="text" component={InputRfProps} label="First Name"/>
+      <Field name="lastName" type="text" component={InputRfProps} label="Last Name"/>
+      <div>
+        <button type="submit" className="next">Next</button>
+      </div>
+    </Form>
+  )
+}
+
+module.exports = reduxForm({
+  form: 'multiform',
+  destroyOnUnmount: false,
+  forceUnregisterOnUnmount: true,
+  validate
+})(FormOne)

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

@@ -0,0 +1,69 @@
+const React = require('react');
+const ReactRouter = require('react-router');
+const ReduxForm = require('redux-form');
+const Styled = require('styled-components');
+const Input = require('./input');
+const InputRfProps = require('./inputRfProps');
+const validate = require('./validate');
+const Form = require('./shared').form;
+
+const {
+  browserHistory
+} = ReactRouter;
+
+const {
+  Field,
+  reduxForm
+} = ReduxForm;
+
+const {
+  default: styled
+} = Styled;
+
+const FormThree = (props) => {
+  const { handleSubmit, pristine, submitting } = props
+  return (
+    <Form onSubmit={
+      e => {
+        e.preventDefault();
+        browserHistory.push('/form');
+      }}>
+      <div>
+        <label>Favorite Color</label>
+        <Field name="favoriteColor" component="select">
+          <option></option>
+          <option value="ff0000">Red</option>
+          <option value="00ff00">Green</option>
+          <option value="0000ff">Blue</option>
+        </Field>
+      </div>
+      <div>
+        <label htmlFor="employed">Employed</label>
+        <div>
+          <Field name="employed" id="employed" component="input" type="checkbox"/>
+        </div>
+      </div>
+      <div>
+        <label>Notes</label>
+        <div>
+          <Field name="notes" component="textarea" placeholder="Notes"/>
+        </div>
+      </div>
+      <div>
+        <button type="button" className="previous" onClick={
+          e => {
+            e.preventDefault();
+            browserHistory.push('/form-two');
+        }}>Previous</button>
+        <button type="submit" disabled={pristine || submitting}>Submit</button>
+      </div>
+    </Form>
+  )
+}
+
+module.exports = reduxForm({
+  form: 'multiform',
+  destroyOnUnmount: false,
+  forceUnregisterOnUnmount: true,
+  validate
+})(FormThree)

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

@@ -0,0 +1,56 @@
+const React = require('react');
+const ReactRouter = require('react-router');
+const ReduxForm = require('redux-form');
+const Styled = require('styled-components');
+const Input = require('./input');
+const InputRfProps = require('./inputRfProps');
+const validate = require('./validate');
+const Form = require('./shared').form;
+
+const {
+  browserHistory
+} = ReactRouter;
+
+const {
+  Field,
+  reduxForm
+} = ReduxForm;
+
+const {
+  default: styled
+} = Styled;
+
+const FormTwo = (props) => {
+  const { handleSubmit } = props
+  return (
+    <Form onSubmit={handleSubmit(() => {browserHistory.push('/form-three')})}>
+      <Field name="email" type="email" component={InputRfProps} label="Email"/>
+      <div>
+        <label>Sex</label>
+        <Field name="sex" component={
+          ({ meta: { touched, error } }) => touched && error ?
+            <span> {error}</span> : false
+          }/>
+        <div>
+          <label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
+          <label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
+        </div>
+      </div>
+      <div>
+        <button type="button" className="previous" onClick={
+          e => {
+            e.preventDefault();
+            browserHistory.push('/form-one');
+          }}>Previous</button>
+        <button type="submit" className="next">Next</button>
+      </div>
+    </Form>
+  )
+}
+
+module.exports = reduxForm({
+  form: 'multiform',
+  destroyOnUnmount: false,
+  forceUnregisterOnUnmount: true,
+  validate
+})(FormTwo)

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

@@ -0,0 +1,125 @@
+const React = require('react');
+const ReduxForm = require('redux-form');
+const Styled = require('styled-components');
+const Input = require('./input');
+const InputRfProps = require('./inputRfProps');
+const validate = require('./validate');
+const Form = require('./shared').form;
+
+const {
+  Field,
+  reduxForm
+} = ReduxForm;
+
+const {
+  default: styled
+} = Styled;
+
+const InputField = styled.input`
+  margin-bottom: 15px;
+  background: #FFFFFF;
+  display: block;
+  font-size: 16px;
+  height: 50px;
+  padding-left: 15px;
+  padding-right: 15px;
+  visibility: visible;
+  width: 100%;
+
+  border: 1px solid #3B46CC;
+  border-radius: 4px;
+  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    border-color: 1px solid #3B46CC;
+    outline: none;
+  }
+`;
+
+// styled html input element - props.input -> props
+const SimpleInput = (props) => {
+  return (
+    <InputField
+      type="text"
+      {...props.input}
+      placeholder={props.placeholder} />
+    );
+}
+
+const onSubmit = values => {
+}
+
+const TestForm = React.createClass({
+  render: function() {
+    const {
+      handleSubmit,
+      pristine,
+      reset,
+      submitting
+    } = this.props;
+    return (
+        <Form onSubmit={handleSubmit(onSubmit)}>
+          <div>
+            <label>First Name</label>
+            <div>
+              { /* styled html input */ }
+              <Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"/>
+            </div>
+          </div>
+          <div>
+            { /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ }
+            <Field name="lastName" component={
+                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"/>
+          </div>
+          <div>
+            { /* Input component from @ui - modified to expect props.input */ }
+            <Field name="catName" component={InputRfProps} placeholder="My cat's name" label="Cat's name"/>
+          </div>
+          <div>
+            <label>Sex</label>
+            <div>
+              <label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
+              <label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
+            </div>
+          </div>
+          <div>
+            <label>Favorite Color</label>
+            <div>
+              <Field name="favoriteColor" component="select">
+                <option></option>
+                <option value="ff0000">Red</option>
+                <option value="00ff00">Green</option>
+                <option value="0000ff">Blue</option>
+              </Field>
+            </div>
+          </div>
+          <div>
+            <label htmlFor="employed">Employed</label>
+            <div>
+              <Field name="employed" id="employed" component="input" type="checkbox"/>
+            </div>
+          </div>
+          <div>
+            <label>Notes</label>
+            <div>
+              <Field name="notes" component="textarea"/>
+            </div>
+          </div>
+          <div>
+            <button type="submit" disabled={pristine || submitting}>Submit</button>
+            <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
+          </div>
+        </Form>
+    );
+  }
+});
+
+module.exports = reduxForm({
+  form: 'test-form',
+  // validate,
+  destroyOnUnmount: false
+})(TestForm);

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

@@ -0,0 +1,124 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const Label = styled.label`
+  color: #464646;
+`;
+
+const InputField = styled.input`
+  margin-bottom: 15px;
+  background: #FFFFFF;
+  display: block;
+  font-size: 16px;
+  height: 50px;
+  padding-left: 15px;
+  padding-right: 15px;
+  visibility: visible;
+  width: 100%;
+
+  border: 1px solid #3B46CC;
+  border-radius: 4px;
+  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    border-color: 1px solid #3B46CC;
+    outline: none;
+  }
+`;
+
+const Input = ({
+  autoComplete,
+  autoFocus,
+  children,
+  className,
+  disabled = false,
+  form,
+  id,
+  inputMode,
+  label,
+  labelledby,
+  list,
+  name,
+  onChange,
+  onFocus,
+  onBlur,
+  pattern,
+  placeholder,
+  readOnly,
+  required,
+  selectionDirection,
+  spellCheck,
+  style,
+  tabIndex,
+  type,
+  value
+}) => {
+  const _label = label || children;
+  const _children = label && children ? children : null;
+
+  return (
+    <div>
+      <Label htmlFor={id}>
+        {_label}
+      </Label>
+      <InputField
+        aria-labelledby={labelledby}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        form={form}
+        id={id}
+        inputMode={inputMode}
+        list={list}
+        name={name}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        pattern={pattern}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
+        spellCheck={spellCheck}
+        tabIndex={tabIndex}
+        type={type}
+        value={value}
+      />
+      {_children}
+    </div>
+  );
+};
+
+Input.propTypes = {
+  autoComplete: React.PropTypes.string,
+  autoFocus: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
+  id: React.PropTypes.string,
+  inputMode: React.PropTypes.string,
+  label: React.PropTypes.string,
+  labelledby: React.PropTypes.string,
+  list: React.PropTypes.string,
+  name: React.PropTypes.string,
+  onChange: React.PropTypes.func,
+  onFocus: React.PropTypes.func,
+  onBlur: React.PropTypes.func,
+  pattern: React.PropTypes.string,
+  placeholder: React.PropTypes.string,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  spellCheck: React.PropTypes.bool,
+  style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string,
+  type: React.PropTypes.string,
+  value: React.PropTypes.string
+};
+
+module.exports = Input;

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

@@ -0,0 +1,126 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const Label = styled.label`
+  color: #464646;
+`;
+
+const Error = styled.label`
+  color: red;
+  float: right;
+`;
+
+const InputField = styled.input`
+  margin-bottom: 15px;
+  background: #FFFFFF;
+  display: block;
+  font-size: 16px;
+  height: 50px;
+  padding-left: 15px;
+  padding-right: 15px;
+  visibility: visible;
+  width: 100%;
+
+  border: 1px solid #3B46CC;
+  border-radius: 4px;
+  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    border-color: 1px solid #3B46CC;
+    outline: none;
+  }
+`;
+
+const InputRfProps = ({
+  autoComplete,
+  autoFocus,
+  children,
+  className,
+  disabled = false,
+  form,
+  id,
+  inputMode,
+  label,
+  labelledby,
+  list,
+  pattern,
+  placeholder,
+  readOnly,
+  required,
+  selectionDirection,
+  spellCheck,
+  style,
+  tabIndex,
+  type,
+  input,
+  meta
+}) => {
+  const _label = label || children;
+  const _children = label && children ? children : null;
+  const { onChange, onBlur, onDragStart, onDrop, onFocus, name, value } = input;
+  const { error, valid, touched } = meta;
+
+  return (
+    <div>
+      <Label htmlFor={id}>
+        {_label}
+      </Label>
+      { touched && !valid && error && <Error>{error}</Error>}
+      <InputField
+        aria-labelledby={labelledby}
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        form={form}
+        id={id}
+        inputMode={inputMode}
+        list={list}
+        name={name}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        pattern={pattern}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        required={required}
+        selectionDirection={selectionDirection}
+        spellCheck={spellCheck}
+        tabIndex={tabIndex}
+        type={type}
+        value={value}
+      />
+      {_children}
+    </div>
+  );
+};
+
+InputRfProps.propTypes = {
+  autoComplete: React.PropTypes.string,
+  autoFocus: React.PropTypes.bool,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  disabled: React.PropTypes.bool,
+  form: React.PropTypes.string,
+  id: React.PropTypes.string,
+  inputMode: React.PropTypes.string,
+  label: React.PropTypes.string,
+  labelledby: React.PropTypes.string,
+  list: React.PropTypes.string,
+  pattern: React.PropTypes.string,
+  placeholder: React.PropTypes.string,
+  readOnly: React.PropTypes.bool,
+  required: React.PropTypes.bool,
+  selectionDirection: React.PropTypes.string,
+  spellCheck: React.PropTypes.bool,
+  style: React.PropTypes.object,
+  tabIndex: React.PropTypes.string,
+  type: React.PropTypes.string,
+  input: React.PropTypes.object,
+  meta: React.PropTypes.object,
+};
+
+module.exports = InputRfProps;

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

@@ -0,0 +1,124 @@
+const React = require('react');
+const ReduxForm = require('redux-form');
+const Styled = require('styled-components');
+const Input = require('./input');
+const InputRfProps = require('./inputRfProps');
+
+const {
+  Field,
+  reduxForm
+} = ReduxForm;
+
+const {
+  default: styled
+} = Styled;
+
+const Form = styled.form`
+  margin: 30px auto;
+  width: 300px;
+`;
+
+const InputField = styled.input`
+  margin-bottom: 15px;
+  background: #FFFFFF;
+  display: block;
+  font-size: 16px;
+  height: 50px;
+  padding-left: 15px;
+  padding-right: 15px;
+  visibility: visible;
+  width: 100%;
+
+  border: 1px solid #3B46CC;
+  border-radius: 4px;
+  box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
+
+  &:focus {
+    border-color: 1px solid #3B46CC;
+    outline: none;
+  }
+`;
+
+// styled html input element - props.input -> props
+const SimpleInput = (props) => {
+  return (
+    <InputField
+      type="text"
+      {...props.input}
+      placeholder={props.placeholder} />
+    );
+}
+
+const TestMultiform = React.createClass({
+  render: function() {
+    const {
+      handleSubmit,
+      pristine,
+      reset,
+      submitting
+    } = this.props;
+
+    return (
+        <Form onSubmit={handleSubmit}>
+          <div>
+            <label>First Name</label>
+            <div>
+              { /* styled html input */ }
+              <Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"/>
+            </div>
+          </div>
+          <div>
+            { /* Input component from @ui - props.input -> props, props.meta -> props, props -> props */ }
+            <Field name="lastName" component={
+                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"/>
+          </div>
+          <div>
+            { /* Input component from @ui - modified to expect props.input */ }
+            <Field name="catName" component={InputRfProps} placeholder="My cat's name" label="Cat's name"/>
+          </div>
+          <div>
+            <label>Sex</label>
+            <div>
+              <label><Field name="sex" component="input" type="radio" value="male"/> Male</label>
+              <label><Field name="sex" component="input" type="radio" value="female"/> Female</label>
+            </div>
+          </div>
+          <div>
+            <label>Favorite Color</label>
+            <div>
+              <Field name="favoriteColor" component="select">
+                <option></option>
+                <option value="ff0000">Red</option>
+                <option value="00ff00">Green</option>
+                <option value="0000ff">Blue</option>
+              </Field>
+            </div>
+          </div>
+          <div>
+            <label htmlFor="employed">Employed</label>
+            <div>
+              <Field name="employed" id="employed" component="input" type="checkbox"/>
+            </div>
+          </div>
+          <div>
+            <label>Notes</label>
+            <div>
+              <Field name="notes" component="textarea"/>
+            </div>
+          </div>
+          <div>
+            <button type="submit" disabled={pristine || submitting}>Submit</button>
+            <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
+          </div>
+        </Form>
+    );
+  }
+});
+
+module.exports = reduxForm({
+  form: 'test-multiform'
+})(TestMultiform);

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

@@ -0,0 +1,14 @@
+const Styled = require('styled-components');
+
+const {
+  default: styled
+} = Styled;
+
+const Form = styled.form`
+  margin: 30px auto;
+  width: 300px;
+`;
+
+module.exports = {
+  form: Form
+};

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

@@ -0,0 +1,18 @@
+const SubmissionError = require('redux-form').SubmissionError;
+
+const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+function submit(values) {
+  return sleep(1000) // simulate server latency
+    .then(() => {
+      if (![ 'john', 'paul', 'george', 'ringo' ].includes(values.username)) {
+        throw new SubmissionError({ username: 'User does not exist', _error: 'Login failed!' })
+      } else if (values.password !== 'redux-form') {
+        throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' })
+      } else {
+        window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
+      }
+    })
+}
+
+module.exports = submit;

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

@@ -0,0 +1,27 @@
+const validator = require('validator');
+
+const validate = values => {
+  console.log('validate values = ', values);
+  const errors = {};
+  if (!values.firstName) {
+    errors.firstName = 'Required';
+  }
+  if (!values.lastName) {
+    errors.lastName = 'Required';
+  }
+  if (!values.email) {
+    errors.email = 'Required';
+  } else if (!validator.isEmail(values.email)) {
+    errors.email = 'Invalid email address';
+  }
+  if (!values.sex) {
+    errors.sex = 'Required';
+  }
+  if (!values.favoriteColor) {
+    errors.favoriteColor = 'Required';
+  }
+  console.log('errors = ', errors);
+  return errors;
+}
+
+module.exports = validate;

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

@@ -0,0 +1,46 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+const nes = require('nes/dist/client');
+
+const {
+  Client
+} = nes;
+
+const client = new Client(`ws://${document.location.host}`);
+
+client.connect((err) => {
+  if (err) {
+    throw err;
+  }
+
+  console.log('connected');
+
+  client.subscribe('/stats/5', (update, flag) => {
+    store.dispatch({
+      type: 'UPDATE_STATS',
+      payload: update
+    })
+  }, (err) => {
+    if (err) {
+      throw err;
+    }
+
+    console.log('subscribed');
+  });
+});
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}

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

@@ -0,0 +1,50 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const ReactRouter = require('react-router');
+const AppHome = require('./app');
+const Form = require('./form/form');
+const Multiform = require('./form/multiform');
+const FormOne = require('./form/form-one');
+const FormTwo = require('./form/form-two');
+const FormThree = require('./form/form-three');
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+const {
+  Router,
+  Route,
+  IndexRoute,
+  browserHistory
+} = ReactRouter;
+
+const {
+  App,
+  Home
+} = AppHome;
+
+module.exports = ({
+  store
+}) => {
+  return (
+    <AppContainer>
+      <Provider store={store}>
+        <Router history={browserHistory}>
+          <Route path="/" component={App}>
+            <IndexRoute component={Home} />
+            <Route path="form" component={Form} />
+            <Route path="form-one" component={FormOne} />
+            <Route path="form-two" component={FormTwo} />
+            <Route path="form-three" component={FormThree} />
+          </Route>
+        </Router>
+      </Provider>
+    </AppContainer>
+  );
+};

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

@@ -0,0 +1,29 @@
+const takeRight = require('lodash.takeright');
+const redux = require('redux');
+const reduxFormReducer = require('redux-form').reducer;
+
+const {
+  createStore,
+  compose,
+  combineReducers,
+  applyMiddleware
+} = redux;
+
+/*const reducer = (state, action) => {
+  if (action.type !== 'UPDATE_STATS') {
+    return state;
+  }
+
+  const data = (state.data || []).concat([action.payload]);
+
+  return {
+    ...state,
+    data: takeRight(data, 50)
+  };
+};*/
+
+const reducer = combineReducers({ form: reduxFormReducer });
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
+};

spikes/form/redux-form/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "chartjs-graphing-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "build-array": "^1.0.0",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.takeright": "^4.1.1",
+    "nes": "^6.3.1",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-redux": "^4.4.5",
+    "react-router": "^3.0.0",
+    "redux": "^3.6.0",
+    "redux-form": "^6.4.3",
+    "require-dir": "^0.3.1",
+    "style-loader": "^0.13.1",
+    "styled-components": "^1.2.1",
+    "validator": "^6.2.0",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "babel-register": "^6.16.3",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}

spikes/form/redux-form/readme.md

@@ -0,0 +1,11 @@
+# redux-form
+
+## summary
+
+ - [x] form values in redux store
+ - [x] clear / retain values in store
+ - [x] pre-populate form
+ - [x] validation field / form level
+ - [x] multi page form
+ - [x] custom form fields
+ - [?] requires updates to existing ui components

spikes/form/redux-form/server/index.js

@@ -0,0 +1,29 @@
+const requireDir = require('require-dir');
+const plugins = require('./plugins');
+const routes = requireDir('./routes');
+const Hapi = require('hapi');
+const path = require('path');
+const fs = require('fs');
+
+const server = new Hapi.Server();
+
+server.connection({
+  host: 'localhost',
+  port: 8000
+});
+
+server.register(plugins, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  Object.keys(routes).forEach((name) => {
+    routes[name](server);
+  });
+
+  server.start((err) => {
+    server.connections.forEach((conn) => {
+      console.log(`started at: ${conn.info.uri}`);
+    });
+  });
+});

spikes/form/redux-form/server/metric.js

@@ -0,0 +1,34 @@
+const Emitter = require('component-emitter');
+
+const cdm = {};
+
+module.exports = (server) => ({
+  on: (id) => {
+    console.log('on', cdm[id]);
+    if (cdm[id] && (cdm[id].sockets > 0)) {
+      cdm[id].sockets +=1;
+      return;
+    }
+
+
+    let messageId = 0;
+    const interval = setInterval(() => {
+      console.log(`publishing /stats/${id}`);
+
+      server.publish(`/stats/${id}`, {
+        when: new Date().getTime(),
+        cpu: Math.random() * 100
+      });
+    }, 45);
+
+    cdm[id] = {
+      interval,
+      sockets: 1
+    };
+  },
+  off: (id) => {
+    if (!(cdm[id].sockets -= 1)) {
+      clearInterval(cdm[id].interval);
+    }
+  }
+});

spikes/form/redux-form/server/plugins.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'),
+  require('nes'), {
+    register: require('hapi-webpack-dev-plugin'),
+    options: {
+      compiler: webpack(cfg),
+      devIndex: path.join(__dirname, '../static')
+    }
+  }
+];

spikes/form/redux-form/server/routes/home.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: (request, reply) => {
+      reply.file(path.join(__dirname, '../../static/index.html'));
+    }
+  });
+};

spikes/form/redux-form/server/routes/metrics.js

@@ -0,0 +1,18 @@
+const Metric = require('../metric');
+
+module.exports = (server) => {
+  const metric = Metric(server);
+
+  server.subscription('/stats/{id}', {
+    onSubscribe: (socket, path, params, next) => {
+      console.log('onSubscribe');
+      metric.on(params.id);
+      next();
+    },
+    onUnsubscribe: (socket, path, params, next) => {
+      console.log('onUnsubscribe');
+      metric.off(params.id);
+      next();
+    }
+  });
+};

spikes/form/redux-form/server/routes/static.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (server) => {
+  // server.route({
+  //   method: 'GET',
+  //   path: '/{param*}',
+  //   handler: {
+  //     directory: {
+  //       path: path.join(__dirname, '../../static'),
+  //       redirectToSlash: true,
+  //       index: true
+  //     }
+  //   }
+  // });
+};

spikes/form/redux-form/server/routes/version.js

@@ -0,0 +1,18 @@
+const Pkg = require('../../package.json');
+
+const internals = {
+  response: {
+    version: Pkg.version
+  }
+};
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/ops/version',
+    config: {
+      description: 'Returns the version of the server',
+      handler: (request, reply) => reply(internals.response)
+    }
+  });
+};

spikes/form/redux-form/static/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="https://rawgit.com/epochjs/epoch/master/dist/css/epoch.css" />
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>

spikes/form/redux-form/webpack.config.js

@@ -0,0 +1,55 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8888',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);