re-write forms with react-broadcast

frontend/package.json

@@ -38,7 +38,7 @@
     "react-a11y": "^0.3.3",
     "react-dom": "^15.4.2",
     "react-intl": "^2.2.3",
-    "react-intl-redux": "^0.3.0",
+    "react-intl-redux": "^0.4.0",
     "react-redux": "^5.0.2",
     "react-router-dom": "4.0.0-beta.4",
     "react-select": "^1.0.0-rc.3",
@@ -59,7 +59,7 @@
     "url-loader": "^0.5.7"
   },
   "devDependencies": {
-    "ava": "^0.18.1",
+    "ava": "^0.18.2",
     "babel-cli": "^6.23.0",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
@@ -81,14 +81,14 @@
     "babel-register": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^1.1.4",
     "enzyme": "^2.7.1",
-    "eslint": "^3.15.0",
+    "eslint": "^3.16.0",
     "eslint-config-react-app": "^0.5.1",
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-loader": "^1.6.1",
     "eslint-plugin-babel": "^4.0.1",
     "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-promise": "^3.4.1",
+    "eslint-plugin-promise": "^3.4.2",
     "eslint-plugin-react": "^6.10.0",
     "eslint-plugin-standard": "^2.0.1",
     "file-loader": "^0.10.0",
@@ -102,14 +102,14 @@
     "react-dev-utils": "^0.5.0",
     "redux-ava": "^2.2.0",
     "simple-mock": "^0.7.3",
-    "stylelint": "^7.8.0",
+    "stylelint": "^7.9.0",
     "stylelint-config-standard": "^16.0.0",
     "stylelint-processor-styled-components": "^0.0.4",
     "tap-xunit": "^1.7.0",
     "thenify": "^3.2.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.3.0",
+    "webpack-dev-server": "^2.4.1",
     "webpack-manifest-plugin": "^1.1.0",
     "webpack-shell-plugin": "^0.5.0"
   },

frontend/src/components/create-monitor/index.js

@@ -1,18 +1,19 @@
-const ReduxForm = require('redux-form');
 const React = require('react');
 const ReactIntl = require('react-intl');
 const Styled = require('styled-components');
 
+const Form = require('@ui/components/form');
 const Button = require('@ui/components/button');
 const Column = require('@ui/components/column');
-const Input = require('@ui/components/input');
 const fns = require('@ui/shared/functions');
 const Row = require('@ui/components/row');
-const Select = require('@ui/components/select');
+
 
 const {
-  Field
+  FormGroup,
-} = ReduxForm;
+  Select,
+  Input
+} = Form;
 
 const {
   FormattedMessage
@@ -75,27 +76,33 @@ const CreateMonitor = ({
         </RightText>
       </TextColumn>
       <Column md={2} xs={12}>
-        <Field component={Select}>
+        <FormGroup>
-          <option>
+          <Select>
-            <FormattedMessage id='monitors.above' />
+            <option>
-          </option>
+              <FormattedMessage id='monitors.above' />
-          <option>
+            </option>
-            <FormattedMessage id='monitors.equal' />
+            <option>
-          </option>
+              <FormattedMessage id='monitors.equal' />
-          <option>
+            </option>
-            <FormattedMessage id='monitors.below' />
+            <option>
-          </option>
+              <FormattedMessage id='monitors.below' />
-        </Field>
+            </option>
+          </Select>
+        </FormGroup>
       </Column>
       <Column md={2} xs={12}>
-        <Field component={Input} placeholder='value' />
+        <FormGroup name='value'>
+          <Input />
+        </FormGroup>
       </Column>
       <Column md={2} xs={12}>
-        <Field component={Select}>
+        <FormGroup>
-          <option>
+          <Select>
-            <FormattedMessage id='monitors.average' />
+            <option>
-          </option>
+              <FormattedMessage id='monitors.average' />
-        </Field>
+            </option>
+          </Select>
+        </FormGroup>
       </Column>
       <TextColumn md={1}xs={12}>
         <Text>
@@ -103,11 +110,13 @@ const CreateMonitor = ({
         </Text>
       </TextColumn>
       <Column md={3} xs={12}>
-        <Field component={Select}>
+        <FormGroup>
-          <option>
+          <Select>
-            <FormattedMessage id='monitors.last5' />
+            <option>
-          </option>
+              <FormattedMessage id='monitors.last5' />
-        </Field>
+            </option>
+          </Select>
+        </FormGroup>
       </Column>
     </ConditionsRow>
     <H4>
@@ -118,7 +127,9 @@ const CreateMonitor = ({
     </P>
     <Row>
       <Column xs={12}>
-        <Field component={PeopleInput} />
+        <FormGroup>
+          <PeopleInput />
+        </FormGroup>
       </Column>
     </Row>
     <Row>

frontend/src/components/navigation/org.js

@@ -147,4 +147,6 @@ const mapStateToProps = (state) => ({
   orgs: orgsSelector(state)
 });
 
-module.exports = connect(mapStateToProps)(OrgNavigation);
+module.exports = connect(
+  mapStateToProps
+)(OrgNavigation);

frontend/src/components/new-project/index.js

@@ -1,22 +1,23 @@
 const React = require('react');
-const ReduxForm = require('redux-form');
 const ReactIntl = require('react-intl');
 const Styled = require('styled-components');
 
 const constants = require('@ui/shared/constants');
 const fns = require('@ui/shared/functions');
-
-const Input = require('@ui/components/input');
 const Button = require('@ui/components/button');
 const BaseElements = require('@ui/components/base-elements');
+const Form = require('@ui/components/form');
 
 const {
-  H2,
+  H2
 } = BaseElements;
 
 const {
-  Field
+  FormGroup,
-} = ReduxForm;
+  FormLabel,
+  FormMeta,
+  Input
+} = Form;
 
 const {
   FormattedMessage
@@ -51,7 +52,7 @@ const Description = styled.p`
   max-width: ${remcalc(380)};
 `;
 
-const ProjectNameInput = styled(Input)`
+const ProjectNameFormGroup = styled(FormGroup)`
   max-width: ${remcalc(380)};
   margin-bottom: ${remcalc(16)};
 `;
@@ -88,12 +89,11 @@ const CreateProject = (props) => {
         <Description>
           <FormattedMessage id='new-project.description' />
         </Description>
-        <Field
+        <ProjectNameFormGroup name='project-name' reduxForm>
-          component={ProjectNameInput}
+          <FormLabel>Project name</FormLabel>
-          label='Project name'
+          <Input placeholder='Project name' />
-          name='project-name'
+          <FormMeta />
-          placeholder='Project name'
+        </ProjectNameFormGroup>
-        />
         <Buttons>
           <LeftButton onClick={_onCancel} secondary>
             <FormattedMessage id='cancel' />

frontend/src/components/new-project/new-billing.js

@@ -1,22 +1,24 @@
 const React = require('react');
-const ReduxForm = require('redux-form');
 const ReactIntl = require('react-intl');
 const Styled = require('styled-components');
 
 const constants = require('@ui/shared/constants');
 const fns = require('@ui/shared/functions');
-
-const Input = require('@ui/components/input');
-const Button = require('@ui/components/button');
 const BaseElements = require('@ui/components/base-elements');
+const normalize = require('@root/utils/form/normalize');
+const Form = require('@ui/components/form');
+const Button = require('@ui/components/button');
 
 const {
-  H2,
+  H2
 } = BaseElements;
 
 const {
-  Field
+  FormGroup,
-} = ReduxForm;
+  FormLabel,
+  FormMeta,
+  Input
+} = Form;
 
 const {
   FormattedMessage
@@ -34,6 +36,12 @@ const {
   remcalc
 } = fns;
 
+const {
+  normalizeCardNumber,
+  normalizeCardCVV,
+  normalizeCardExpiry
+} = normalize;
+
 const Container = styled.div`
   padding: ${remcalc(96)} ${remcalc(40)};
 `;
@@ -51,17 +59,17 @@ const Description = styled.p`
   max-width: ${remcalc(380)};
 `;
 
-const LongInput = styled(Input)`
+const LongFormGroup = styled(FormGroup)`
   max-width: ${remcalc(380)};
   margin-bottom: ${remcalc(16)};
 `;
 
-const ShortInputs = styled.div`
+const ShortFormGroups = styled.div`
   display: flex;
   flex-flow: row;
 `;
 
-const ShortInput = styled(Input)`
+const ShortFormGroup = styled(FormGroup)`
   max-width: ${remcalc(184)};
   margin-right: ${remcalc(12)}
   margin-bottom: ${remcalc(16)};
@@ -99,32 +107,40 @@ const CreateBilling = (props) => {
         <Description>
           <FormattedMessage id='new-billing.description' />
         </Description>
-        <Field
+        <LongFormGroup
-          component={LongInput}
-          label='Card number'
           name='card-number'
-          placeholder='xxxx-xxxx-xxxx-xxxx'
+          normalize={normalizeCardNumber}
-        />
+          reduxForm
-        <ShortInputs>
+        >
-          <Field
+          <FormLabel>Card number</FormLabel>
-            component={ShortInput}
+          <Input placeholder='xxxx-xxxx-xxxx-xxxx' />
-            label='CVV code'
+          <FormMeta />
+        </LongFormGroup>
+        <ShortFormGroups>
+          <ShortFormGroup
             name='cvv-code'
-            placeholder='xxx'
+            normalize={normalizeCardCVV}
-          />
+            reduxForm
-          <Field
+          >
-            component={ShortInput}
+            <FormLabel>CVV Code</FormLabel>
-            label='Expiry date'
+            <Input placeholder='xxx' />
+            <FormMeta />
+          </ShortFormGroup>
+          <ShortFormGroup
             name='expiry-date'
-            placeholder='mm/yy'
+            normalize={normalizeCardExpiry}
-          />
+            reduxForm
-        </ShortInputs>
+          >
-        <Field
+            <FormLabel>Expiry date</FormLabel>
-          component={LongInput}
+            <Input placeholder='mm/yy' />
-          label='Name on card'
+            <FormMeta />
-          name='name'
+          </ShortFormGroup>
-          placeholder=''
+        </ShortFormGroups>
-        />
+        <LongFormGroup name='name' reduxForm>
+          <FormLabel>Name on card</FormLabel>
+          <Input placeholder='' />
+          <FormMeta />
+        </LongFormGroup>
         <Buttons>
           <ProjectNameButtons onClick={_onBack} secondary>
             <FormattedMessage id='back' />

frontend/src/components/people-list/invite.js

@@ -1,19 +1,19 @@
 const React = require('react');
-const styled = require('styled-components');
+const Styled = require('styled-components');
 
 const Row = require('@ui/components/row');
 const Column = require('@ui/components/column');
 const Button = require('@ui/components/button');
 
 const {
-  default: Styled
+  default: styled
-} = styled;
+} = Styled;
 
 // TOOD: Require from UI Components - causes issue ATM.
 const Select = require('react-select');
 require('react-select/dist/react-select.css');
 
-const SelectWrapper = Styled.div`
+const SelectWrapper = styled.div`
 
   .Select-menu-outer {
     margin-top: 48px;
@@ -25,13 +25,33 @@ const SelectWrapper = Styled.div`
   }
 `;
 
+const StyledSubmitButton = styled(Button)`
+  float: right;
+  width: 20%;
+`;
+
+const StyledInlineButton = styled(Button)`
+  display: inline-block;
+`;
+
+// TODO: When removing react-select css
+// change this to styled-components format
+const InputStyle = {
+  float: 'left',
+  width: '75%',
+  minHeight: '50px',
+  marginBottom: '20px',
+  paddingTop: '10px'
+};
+
+
 const Invite = React.createClass({
 
   propTypes: {
     addMemember: React.PropTypes.func,
     handleToggle: React.PropTypes.func,
     parentIndex: React.PropTypes.number,
-    platformMembers: React.PropTypes.array,
+    platformMembers: React.PropTypes.array
   },
 
   getInitialState() {
@@ -74,25 +94,6 @@ const Invite = React.createClass({
       handleToggle,
     } = this.props;
 
-    // TODO: When removing react-select css
-    // change this to styled-components format
-    const InputStyle = {
-      float: 'left',
-      width: '75%',
-      minHeight: '50px',
-      marginBottom: '20px',
-      paddingTop: '10px'
-    };
-
-    const StyledSubmitButton = styled(Button)`
-      float: right;
-      width: 20%;
-    `;
-
-    const StyledInlineButton = styled(Button)`
-      display: inline-block;
-    `;
-
     const selectData = this.getFormattedPlatformMembers();
 
     const handleSelectChange = (v) => {

frontend/src/components/people-list/table/index.js

@@ -2,7 +2,7 @@ const React = require('react');
 const Styled = require('styled-components');
 
 const Table = require('@ui/components/table-data-table');
-const Checkbox  = require('@ui/components/checkbox');
+const Form  = require('@ui/components/form');
 
 const fns  = require('@ui/shared/functions');
 
@@ -18,8 +18,12 @@ const {
   remcalc
 } = fns;
 
-const PeopleTable = (props) => {
+const {
+  Checkbox,
+  FormGroup
+} = Form;
 
+const PeopleTable = (props) => {
   const {
     handleRoleTooltip,
     handleStatusTooltip,
@@ -31,7 +35,11 @@ const PeopleTable = (props) => {
   } = props;
 
   const columns = [{
-    title: <Checkbox />,
+    title: (
+      <FormGroup>
+        <Checkbox />
+      </FormGroup>
+    ),
     width: '5%'
   }, {
     title: 'Member',
@@ -81,7 +89,11 @@ const PeopleTable = (props) => {
     );
 
     return {
-      checkbox: <Checkbox />,
+      checkbox: (
+        <FormGroup>
+          <Checkbox />
+        </FormGroup>
+      ),
       name: person.name,
       status: status(person),
       role: role(person),

frontend/src/containers/metrics/monitors.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ReduxForm = require('redux-form');
+// const ReduxForm = require('redux-form');
 const ReactRedux = require('react-redux');
 
 const actions = require('@state/actions');
@@ -8,9 +8,9 @@ const ManageMonitor = require('@components/manage-monitor');
 const Monitors = require('@components/monitors');
 const selectors = require('@state/selectors');
 
-const {
+/*const {
   reduxForm
-} = ReduxForm;
+} = ReduxForm;*/
 
 const {
   connect
@@ -25,9 +25,9 @@ const {
   switchMonitorViewPage
 } = actions;
 
-const ConnectedCreateMonitor = reduxForm({
+const ConnectedCreateMonitor = CreateMonitor; /*reduxForm({
   form: 'create-monitor'
-})(CreateMonitor);
+})(CreateMonitor);*/
 // const ConnectedCreateMonitor = reduxForm()(CreateMonitor);
 
 const MetricMonitors = (props) => {

frontend/src/containers/new-project/billing.js

@@ -34,7 +34,7 @@ const Billing = (props) => {
   const {
     cards,
     handleNewProject,
-    router,
+    pushRoute,
     org
   } = props;
 
@@ -45,11 +45,11 @@ const Billing = (props) => {
       values,
       org
     });
-    router.push(`/${org.id}/projects`);
+    pushRoute(`/${org.id}/projects`);
   };
 
   const onNewBilling = (evt) =>
-    router.push(`/${org.id}/new-project/new-billing`);
+    pushRoute(`/${org.id}/new-project/new-billing`);
 
   return (
     <NewProjectBillingForm
@@ -65,17 +65,18 @@ Billing.propTypes = {
   cards: React.PropTypes.array, // TODO set up example card in thingie data
   handleNewProject: React.PropTypes.func.isRequired,
   org: PropTypes.org.isRequired,
-  router: React.PropTypes.object
+  pushRoute: React.PropTypes.func
 };
 
 const mapStateToProps = (state, {
   match = {
     params: {}
-  }
+  },
+  push
 }) => ({
   // TODO add cards - as above
   org: orgByIdSelector(match.params.org)(state),
-  router: state.app.router
+  pushRoute: push
 });
 
 const mapDispatchToProps = (dispatch) => ({

frontend/src/containers/new-project/new-billing.js

@@ -31,19 +31,19 @@ const NewBilling = (props) => {
 
   const {
     handleNewProject,
-    router,
+    pushRoute,
     org
   } = props;
 
   const onBack = (evt) =>
-    router.push(`/${org.id}/new-project/billing`);
+    pushRoute(`/${org.id}/new-project/billing`);
 
   const onSubmit = (values) => {
     handleNewProject({
       values,
       org
     });
-    router.push(`/${org.id}/projects`);
+    pushRoute(`/${org.id}/projects`);
   };
 
   return (
@@ -57,17 +57,18 @@ const NewBilling = (props) => {
 NewBilling.propTypes = {
   handleNewProject: React.PropTypes.func.isRequired,
   org: PropTypes.org.isRequired,
-  router: React.PropTypes.object
+  pushRoute: React.PropTypes.func
 };
 
 const mapStateToProps = (state, {
   match = {
     params: {}
-  }
+  },
+  push
 }) => ({
   // TODO add cards - as above
   org: orgByIdSelector(match.params.org)(state),
-  router: state.app.router
+  pushRoute: push
 });
 
 const mapDispatchToProps = (dispatch) => ({

frontend/src/containers/new-project/new-project.js

@@ -27,14 +27,14 @@ const NewProject = (props) => {
 
   const {
     org,
-    push
+    pushRoute
   } = props;
 
   const onCancel = (values) =>
-    push(`/${org.id}/projects`);
+    pushRoute(`/${org.id}/projects`);
 
   const onSubmit = (values) =>
-    push(`/${org.id}/new-project/billing`);
+    pushRoute(`/${org.id}/new-project/billing`);
 
   return (
     <NewProjectForm
@@ -47,17 +47,18 @@ const NewProject = (props) => {
 
 NewProject.propTypes = {
   org: PropTypes.org.isRequired,
-  push: React.PropTypes.func
+  pushRoute: React.PropTypes.func
 };
 // TODO we'll need to know whether there any cards
 // otherwise go to new billing straight away
 const mapStateToProps = (state, {
   match = {
     params: {}
-  }
+  },
+  push
 }) => ({
   org: orgByIdSelector(match.params.org)(state),
-  router: state.app.router
+  pushRoute: push
 });
 
 const mapDispatchToProps = (dispatch) => ({});

frontend/src/containers/org/people.js

@@ -48,14 +48,16 @@ const mapStateToProps = (state, {
 const mapDispatchToProps = (dispatch) => ({
   addMemember: (member, callback) =>
     dispatch(addMemberToOrg(member, callback)),
-  handleToggle: () => dispatch(orgHandleInviteToggle()),
+  handleToggle: () =>
-  handleStatusTooltip: (id) => dispatch(orgHandlePeopleStatusTooltip(id)),
+    dispatch(orgHandleInviteToggle()),
-  handleRoleTooltip: (id) => dispatch(orgHandlePeopleRoleTooltip(id)),
+  handleStatusTooltip: (id) =>
+    dispatch(orgHandlePeopleStatusTooltip(id)),
+  handleRoleTooltip: (id) =>
+    dispatch(orgHandlePeopleRoleTooltip(id)),
   handleMemberUpdate: (updatedMember) =>
-      dispatch(orgHandleMemberUpdate(updatedMember)),
+    dispatch(orgHandleMemberUpdate(updatedMember)),
   removeMember: (removeData) =>
-    dispatch(orgRemoveMember(removeData)),
+    dispatch(orgRemoveMember(removeData))
-
 });
 
 module.exports = connect(

frontend/src/containers/project/people.js

@@ -43,14 +43,16 @@ const mapStateToProps = (state, {
 const mapDispatchToProps = (dispatch) => ({
   addMemember: (member, callback) =>
     dispatch(addMemberToProject(member, callback)),
-  handleToggle: () => dispatch(projectHandleInviteToggle()),
+  handleToggle: () =>
-  handleStatusTooltip: (id) => dispatch(projectHandlePeopleStatusTooltip(id)),
+    dispatch(projectHandleInviteToggle()),
-  handleRoleTooltip: (id) => dispatch(projectHandlePeopleRoleTooltip(id)),
+  handleStatusTooltip: (id) =>
+    dispatch(projectHandlePeopleStatusTooltip(id)),
+  handleRoleTooltip: (id) =>
+    dispatch(projectHandlePeopleRoleTooltip(id)),
   handleMemberUpdate: (updatedMember) =>
     dispatch(projectHandleMemberUpdate(updatedMember)),
   removeMember: (removeData) =>
-    dispatch(projectRemoveMember(removeData)),
+    dispatch(projectRemoveMember(removeData))
-
 });
 
 module.exports = connect(

frontend/src/utils/form/normalize.js

@@ -0,0 +1,72 @@
+const numbers = (value) => value.replace(/[^\d]/g, '');
+
+const normalizeCardNumber = (value, previousValue) => {
+
+  if(!value) {
+    return value;
+  }
+
+  const n = numbers(value);
+  if (!previousValue || value.length > previousValue.length) {
+    if (n.length === 4) {
+      return n + '-';
+    }
+    if (n.length === 8) {
+      return n.slice(0, 4) + '-' + n.slice(4) + '-';
+    }
+    if (n.length === 12) {
+      return n.slice(0, 4) + '-' + n.slice(4, 8) + '-' + n.slice(8);
+    }
+  }
+  if (n.length <= 4) {
+    return n;
+  }
+  if (n.length <= 8) {
+    return n.slice(0, 4) + '-' + n.slice(4);
+  }
+  if (n.length <= 12) {
+    return n.slice(0, 4) + '-' + n.slice(4, 8) + '-' + n.slice(8);
+  }
+  return n.slice(0, 4) + '-' + n.slice(4, 8) + '-' +
+    n.slice(8, 12) + '-' + n.slice(12, 16);
+};
+
+const normalizeCardCVV = (value, previousValue) => {
+
+  if(!value) {
+    return value;
+  }
+
+  const n = numbers(value);
+
+  if(n.length > 3) {
+    return n.slice(0, 3);
+  }
+
+  return n;
+};
+
+const normalizeCardExpiry = (value, previousValue) => {
+
+  if(!value) {
+    return value;
+  }
+
+  const n = numbers(value);
+
+  if (!previousValue || value.length > previousValue.length) {
+    if (n.length === 2) {
+      return n + '/';
+    }
+  }
+  if (n.length <= 2) {
+    return n;
+  }
+  return n.slice(0, 2) + '/' + n.slice(2, 4);
+};
+
+module.exports = {
+  normalizeCardNumber,
+  normalizeCardCVV,
+  normalizeCardExpiry
+};

frontend/yarn.lock

@@ -25,17 +25,19 @@
     babel-plugin-espower "^2.3.2"
     package-hash "^1.2.0"
 
-"@ava/pretty-format@^1.0.0":
+"@ava/pretty-format@^1.1.0":
-  version "1.0.2"
+  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@ava/pretty-format/-/pretty-format-1.0.2.tgz#e3a90465cc014bf542036555e5ec9796031db858"
+  resolved "https://registry.yarnpkg.com/@ava/pretty-format/-/pretty-format-1.1.0.tgz#d0a57d25eb9aeab9643bdd1a030642b91c123e28"
   dependencies:
     ansi-styles "^2.2.1"
+    esutils "^2.0.2"
 
 "@tomgco/joyent-portal-ui@alpha":
-  version "0.0.1-706"
+  version "0.0.1-793"
-  resolved "https://registry.yarnpkg.com/@tomgco/joyent-portal-ui/-/joyent-portal-ui-0.0.1-706.tgz#78974e23d073898e3cd4e3621a63dcc116bfd8ef"
+  resolved "https://registry.yarnpkg.com/@tomgco/joyent-portal-ui/-/joyent-portal-ui-0.0.1-793.tgz#30ab6bebe1b155722ecfeb50b757410f2f53b2f6"
   dependencies:
     build-array "^1.0.0"
+    camel-case "^3.0.0"
     chart.js "^2.5.0"
     chartjs-chart-box-plot prerelease
     color "^1.0.3"
@@ -323,8 +325,8 @@ async@^1.4.0, async@^1.4.2, async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
 async@^2.1.2:
-  version "2.1.4"
+  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
   dependencies:
     lodash "^4.14.0"
 
@@ -341,14 +343,14 @@ auto-bind@^1.1.0:
   resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-1.1.0.tgz#93b864dc7ee01a326281775d5c75ca0a751e5961"
 
 autoprefixer@^6.0.0, autoprefixer@^6.3.1:
-  version "6.7.3"
+  version "6.7.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.3.tgz#bc2c28018e9a226f24f0ded36ce81014dccec817"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.4.tgz#b4405a263325c04a7c2b1c86fc603ad7bbfe01c6"
   dependencies:
-    browserslist "^1.7.2"
+    browserslist "^1.7.4"
-    caniuse-db "^1.0.30000623"
+    caniuse-db "^1.0.30000624"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^5.2.13"
+    postcss "^5.2.14"
     postcss-value-parser "^3.2.3"
 
 ava-init@^0.2.0:
@@ -361,13 +363,13 @@ ava-init@^0.2.0:
     read-pkg-up "^2.0.0"
     write-pkg "^2.0.0"
 
-ava@^0.18.1:
+ava@^0.18.2:
-  version "0.18.1"
+  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/ava/-/ava-0.18.1.tgz#5f47e09642b397aba471e09ffc1e5a59c670a52d"
+  resolved "https://registry.yarnpkg.com/ava/-/ava-0.18.2.tgz#79253d1636077034a2780bb55b5c3e6c3d7f312f"
   dependencies:
     "@ava/babel-preset-stage-4" "^1.0.0"
     "@ava/babel-preset-transform-test-files" "^2.0.0"
-    "@ava/pretty-format" "^1.0.0"
+    "@ava/pretty-format" "^1.1.0"
     arr-flatten "^1.0.1"
     array-union "^1.0.1"
     array-uniq "^1.0.2"
@@ -432,7 +434,7 @@ ava@^0.18.1:
     resolve-cwd "^1.0.0"
     slash "^1.0.0"
     source-map-support "^0.4.0"
-    stack-utils "^0.4.0"
+    stack-utils "^1.0.0"
     strip-ansi "^3.0.1"
     strip-bom-buf "^1.0.0"
     time-require "^0.1.2"
@@ -1407,11 +1409,11 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^1.0.1, browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.2:
+browserslist@^1.0.1, browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.4:
-  version "1.7.3"
+  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.3.tgz#25ead9c917b278ad668b83f39c8025697797b2ab"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.4.tgz#56a12da876f787223743a866224ccd8f97014628"
   dependencies:
-    caniuse-db "^1.0.30000623"
+    caniuse-db "^1.0.30000624"
     electron-to-chromium "^1.2.2"
 
 buf-compare@^1.0.0:
@@ -1497,6 +1499,13 @@ callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
 
+camel-case@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -1525,9 +1534,9 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.0"
     lodash.uniq "^4.3.0"
 
-caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000623:
+caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000624:
-  version "1.0.30000623"
+  version "1.0.30000624"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000623.tgz#6e9dc4385d00a8f587efbb23fcbed7916f186e5d"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000624.tgz#554b87547895e36f5fe128f4b7448a2ea5bf2213"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -1598,8 +1607,8 @@ chartjs-color-string@^0.4.0:
     color-name "^1.0.0"
 
 chartjs-color@^2.0.0:
-  version "2.0.0"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.0.0.tgz#7f60c7256589b24914814ece757659117381e35b"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
   dependencies:
     chartjs-color-string "^0.4.0"
     color-convert "^0.5.3"
@@ -2287,15 +2296,15 @@ d3-format@1, d3-format@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.0.2.tgz#138618320b4bbeb43b5c0ff30519079fbbd7375e"
 
-d3-geo@1.4.0:
+d3-geo@1.5.0:
-  version "1.4.0"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.4.0.tgz#15e58c414b5bafa1a960eeeb29059c94a60d8408"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.5.0.tgz#cf32c26f61cc5130382f74d40c4d3503dd226a1f"
   dependencies:
     d3-array "1"
 
-d3-hierarchy@1.1.1:
+d3-hierarchy@1.1.2:
-  version "1.1.1"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.1.tgz#6deefccdf19f370dfc77b6538284e953e0e769b3"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.2.tgz#63d168424320fdb4f5c80df458e5bd0d9f2218e6"
 
 d3-interpolate@1, d3-interpolate@1.1.3:
   version "1.1.3"
@@ -2394,8 +2403,8 @@ d3-zoom@1.1.1:
     d3-transition "1"
 
 d3@^4.5.0:
-  version "4.5.0"
+  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-4.5.0.tgz#b68412b84ace3c18a49fee43be1b212b13a23f97"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-4.6.0.tgz#af2f0ddd00f4cc9737b8b0a565608bf6b787eafc"
   dependencies:
     d3-array "1.0.2"
     d3-axis "1.0.4"
@@ -2409,8 +2418,8 @@ d3@^4.5.0:
     d3-ease "1.0.2"
     d3-force "1.0.4"
     d3-format "1.0.2"
-    d3-geo "1.4.0"
+    d3-geo "1.5.0"
-    d3-hierarchy "1.1.1"
+    d3-hierarchy "1.1.2"
     d3-interpolate "1.1.3"
     d3-path "1.0.3"
     d3-polygon "1.0.2"
@@ -2623,8 +2632,8 @@ dot-prop@^3.0.0:
     is-obj "^1.0.0"
 
 dot-prop@^4.1.0:
-  version "4.1.0"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.0.tgz#eb29eac57dfa31fda1edef50ea462ee3d38ff3ab"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.1.tgz#a8493f0b7b5eeec82525b5c7587fa7de7ca859c1"
   dependencies:
     is-obj "^1.0.0"
 
@@ -2881,9 +2890,9 @@ eslint-plugin-jsx-a11y@^4.0.0:
     jsx-ast-utils "^1.0.0"
     object-assign "^4.0.1"
 
-eslint-plugin-promise@^3.4.1:
+eslint-plugin-promise@^3.4.2:
-  version "3.4.1"
+  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.4.1.tgz#6911a9010bf84e17d82e19e0ab0f80ab3ad6db4c"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.4.2.tgz#1be2793eafe2d18b5b123b8136c269f804fe7122"
 
 eslint-plugin-react@^6.10.0:
   version "6.10.0"
@@ -2899,9 +2908,9 @@ eslint-plugin-standard@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-2.0.1.tgz#3589699ff9c917f2c25f76a916687f641c369ff3"
 
-eslint@^3.15.0:
+eslint@^3.16.0:
-  version "3.15.0"
+  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.15.0.tgz#bdcc6a6c5ffe08160e7b93c066695362a91e30f2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.16.0.tgz#4a468ab93618a9eb6e3f1499038b38851f828630"
   dependencies:
     babel-code-frame "^6.16.0"
     chalk "^1.1.3"
@@ -3014,7 +3023,7 @@ events@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
-eventsource@^0.1.3, eventsource@~0.1.6:
+eventsource@^0.1.3, eventsource@0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
   dependencies:
@@ -3301,8 +3310,8 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0:
-  version "1.0.17"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.17.tgz#8537f3f12272678765b4fd6528c0f1f66f8f4558"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.1.tgz#f19fd28f43eeaf761680e519a203c4d0b3d31aff"
   dependencies:
     nan "^2.3.0"
     node-pre-gyp "^0.6.29"
@@ -3427,8 +3436,8 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
     path-is-absolute "^1.0.0"
 
 globals@^9.0.0, globals@^9.14.0:
-  version "9.15.0"
+  version "9.16.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.15.0.tgz#7a5d8fd865e69de910b090b15a87772f9423c5de"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.16.0.tgz#63e903658171ec2d9f51b1d31de5e2b8dc01fb80"
 
 globby@^5.0.0:
   version "5.0.0"
@@ -3720,8 +3729,8 @@ ignore-by-default@^1.0.0:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
 ignore@^3.2.0:
-  version "3.2.2"
+  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.2.tgz#1c51e1ef53bab6ddc15db4d9ac4ec139eceb3410"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.4.tgz#4055e03596729a8fabe45a43c100ad5ed815c4e8"
 
 immutable@^3.8.1:
   version "3.8.1"
@@ -4046,8 +4055,10 @@ is-redirect@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
 
 is-regex@^1.0.3:
-  version "1.0.3"
+  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.3.tgz#0d55182bddf9f2fde278220aec3a75642c908637"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
 
 is-regexp@^1.0.0:
   version "1.0.0"
@@ -4603,7 +4614,7 @@ lodash@^3.5.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, "lodash@>=3.5 <5":
+lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, "lodash@>=3.5 <5":
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4854,8 +4865,8 @@ ncp@^2.0.0:
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
 
 nearley@^2.7.7:
-  version "2.7.12"
+  version "2.7.13"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.12.tgz#20f2dc4a46455056edbd5f98e1b292d560e8540b"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.13.tgz#ae19927cc821a4b517de91962db9ed0e90d991fa"
   dependencies:
     nomnom "~1.6.2"
     railroad-diagrams "^1.0.0"
@@ -5527,8 +5538,8 @@ postcss-merge-longhand@^2.0.1:
     postcss "^5.0.4"
 
 postcss-merge-rules@^2.0.3:
-  version "2.1.1"
+  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.1.tgz#5e5640020ce43cddd343c73bba91c9a358d1fe0f"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
   dependencies:
     browserslist "^1.5.2"
     caniuse-api "^1.5.2"
@@ -5708,9 +5719,9 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.18, postcss@^5.0.2, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.13, postcss@^5.2.4:
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.18, postcss@^5.0.2, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.13, postcss@^5.2.14, postcss@^5.2.4:
-  version "5.2.13"
+  version "5.2.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.13.tgz#1be52a32cf2ef58c0d75f1aedb3beabcf257cef3"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.14.tgz#47b4fbde363fd4f81e547f7e0e43d6d300267330"
   dependencies:
     chalk "^1.1.3"
     js-base64 "^2.1.9"
@@ -5885,13 +5896,13 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
 rc@^1.0.1, rc@^1.1.6, rc@~1.1.6:
-  version "1.1.6"
+  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea"
   dependencies:
     deep-extend "~0.4.0"
     ini "~1.3.0"
     minimist "^1.2.0"
-    strip-json-comments "~1.0.4"
+    strip-json-comments "~2.0.1"
 
 react-a11y@^0.3.3:
   version "0.3.3"
@@ -5930,16 +5941,13 @@ react-input-autosize@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-1.1.0.tgz#3fe1ac832387d8abab85f6051ceab1c9e5570853"
 
-react-intl-redux@^0.3.0:
+react-intl-redux@^0.4.0:
-  version "0.3.0"
+  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/react-intl-redux/-/react-intl-redux-0.3.0.tgz#f42041c0b2edbf88ad693def6fbd00adef673d63"
+  resolved "https://registry.yarnpkg.com/react-intl-redux/-/react-intl-redux-0.4.0.tgz#2bb3111ac2da7b273eb2889950b22d6064bf9dfb"
   dependencies:
-    react-intl "^2.2.2"
-    react-redux "^5.0.1"
-    redux "^3.6.0"
     warning "^3.0.0"
 
-react-intl@^2.2.2, react-intl@^2.2.3:
+react-intl@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.2.3.tgz#8eebb03cddc38b337ed22fab78037ab53a594270"
   dependencies:
@@ -5948,7 +5956,7 @@ react-intl@^2.2.2, react-intl@^2.2.3:
     intl-relativeformat "^1.3.0"
     invariant "^2.1.1"
 
-react-redux@^5.0.1, react-redux@^5.0.2:
+react-redux@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.2.tgz#3d9878f5f71c6fafcd45de1fbb162ea31f389814"
   dependencies:
@@ -6181,8 +6189,8 @@ regenerate@^1.2.1:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
 regenerator-runtime@^0.10.0:
-  version "0.10.1"
+  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
 
 regenerator-transform@0.9.8:
   version "0.9.8"
@@ -6360,7 +6368,13 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.0, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2:
+rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.0, rimraf@^2.5.4, rimraf@2:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.0.tgz#89b8a0fe432b9ff9ec9a925a00b6cdb3a91bbada"
+  dependencies:
+    glob "^7.0.5"
+
+rimraf@~2.5.1, rimraf@~2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
   dependencies:
@@ -6541,12 +6555,12 @@ sockjs-client@1.0.1:
     json3 "^3.3.2"
     url-parse "^1.0.1"
 
-sockjs-client@1.1.1:
+sockjs-client@1.1.2:
-  version "1.1.1"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0"
+  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.2.tgz#f0212a8550e4c9468c8cceaeefd2e3493c033ad5"
   dependencies:
     debug "^2.2.0"
-    eventsource "~0.1.6"
+    eventsource "0.1.6"
     faye-websocket "~0.11.0"
     inherits "^2.0.1"
     json3 "^3.3.2"
@@ -6672,9 +6686,9 @@ sshpk@^1.7.0:
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
-stack-utils@^0.4.0:
+stack-utils@^1.0.0:
-  version "0.4.0"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-0.4.0.tgz#940cb82fccfa84e8ff2f3fdf293fe78016beccd1"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.0.tgz#2392cd8ddbd222492ed6c047960f7414b46c0f83"
 
 statehood@5.x.x:
   version "5.0.1"
@@ -6778,10 +6792,6 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
-
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -6836,9 +6846,9 @@ stylelint-processor-styled-components@^0.0.4:
     babel-traverse "^6.16.0"
     babylon "^6.12.0"
 
-stylelint@^7.8.0:
+stylelint@^7.9.0:
-  version "7.8.0"
+  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-7.8.0.tgz#ac701044ed03c44f7a9f73d4d5dc1bd1eaae12d1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-7.9.0.tgz#b8d9ea20f887ab351075c6aded9528de24509327"
   dependencies:
     autoprefixer "^6.0.0"
     balanced-match "^0.4.0"
@@ -6853,7 +6863,7 @@ stylelint@^7.8.0:
     html-tags "^1.1.1"
     ignore "^3.2.0"
     known-css-properties "^0.0.6"
-    lodash "^4.0.0"
+    lodash "^4.17.4"
     log-symbols "^1.0.2"
     meow "^3.3.0"
     micromatch "^2.3.11"
@@ -7252,8 +7262,8 @@ url-parse-lax@^1.0.0:
     prepend-http "^1.0.1"
 
 url-parse@^1.0.1, url-parse@^1.1.1:
-  version "1.1.7"
+  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.7.tgz#025cff999653a459ab34232147d89514cc87d74a"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.8.tgz#7a65b3a8d57a1e86af6b4e2276e34774167c0156"
   dependencies:
     querystringify "0.0.x"
     requires-port "1.0.x"
@@ -7376,17 +7386,17 @@ webidl-conversions@^4.0.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.0.tgz#0a8c727ae4e5649687b7742368dcfbf13ed40118"
 
 webpack-dev-middleware@^1.9.0:
-  version "1.10.0"
+  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.0.tgz#7d5be2651e692fddfafd8aaed177c16ff51f0eb8"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
 
-webpack-dev-server@^2.3.0:
+webpack-dev-server@^2.4.1:
-  version "2.3.0"
+  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.3.0.tgz#0437704bbd4d941a6e4c061eb3cc232ed7d06101"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.4.1.tgz#48556f793186eac0758df94730c034ed9a4d0f12"
   dependencies:
     ansi-html "0.0.7"
     chokidar "^1.6.0"
@@ -7399,7 +7409,7 @@ webpack-dev-server@^2.3.0:
     portfinder "^1.0.9"
     serve-index "^1.7.2"
     sockjs "0.3.18"
-    sockjs-client "1.1.1"
+    sockjs-client "1.1.2"
     spdy "^3.4.1"
     strip-ansi "^3.0.0"
     supports-color "^3.1.1"
@@ -7470,8 +7480,8 @@ whatwg-fetch@>=0.10.0:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
 
 whatwg-url@^4.3.0:
-  version "4.3.0"
+  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.3.0.tgz#92aaee21f4f2a642074357d70ef8500a7cbb171a"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.4.0.tgz#594f95781545c13934a62db40897c818cafa2e04"
   dependencies:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"

package.json

@@ -18,6 +18,7 @@
     "prepush": "make test"
   },
   "dependencies": {
+    "eslint-plugin-babel": "^4.0.1",
     "husky": "^0.13.1",
     "license-to-fail": "^2.2.0",
     "lodash.findindex": "^4.6.0",

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

@@ -33,6 +33,7 @@ const App = React.createClass({
           <Centered>
             <PrettyLink to="form" activeStyle={{ fontWeight: "bold" }}>Form</PrettyLink>
             <PrettyLink to="form-one" activeStyle={{ fontWeight: "bold" }}>Multi page form</PrettyLink>
+            <PrettyLink to="form-normalize" activeStyle={{ fontWeight: "bold" }}>Normalize form</PrettyLink>
           </Centered>
           <div>
           { children }

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

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form'
+import normalizePhone from './normalizePhone'
+
+const upper = value => value && value.toUpperCase()
+const lower = value => value && value.toLowerCase()
+const lessThan = otherField =>
+  (value, previousValue, allValues) => value < allValues[otherField] ? value : previousValue
+const greaterThan = otherField =>
+  (value, previousValue, allValues) => value > allValues[otherField] ? value : previousValue
+
+const FieldNormalizingForm = (props) => {
+  const { handleSubmit, pristine, reset, submitting } = props
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label>Username</label>
+        <div>
+          <Field
+            name="username"
+            component="input"
+            type="text"
+            placeholder="Username"
+            normalize={lower}
+          />
+        </div>
+      </div>
+      <div>
+        <label>Shout</label>
+        <div>
+          <Field
+            name="shout"
+            component="input"
+            type="text"
+            placeholder="Shout something!"
+            normalize={upper}
+          />
+        </div>
+      </div>
+      <div>
+        <label>Phone</label>
+        <div>
+          <Field
+            name="phone"
+            component="input"
+            type="text"
+            placeholder="Phone Number"
+            normalize={normalizePhone}
+          />
+        </div>
+      </div>
+      <div>
+        <label>Min</label>
+        <div>
+          <Field
+            name="min"
+            component="input"
+            type="number"
+            normalize={lessThan('max')}
+          />
+        </div>
+      </div>
+      <div>
+        <label>Max</label>
+        <div>
+          <Field
+            name="max"
+            component="input"
+            type="number"
+            normalize={greaterThan('min')}
+          />
+        </div>
+      </div>
+      <div>
+        <button type="submit" disabled={submitting}>Submit</button>
+        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values
+        </button>
+      </div>
+    </form>
+  )
+}
+
+export default reduxForm({
+  form: 'normalizing', // a unique identifier for this form
+  initialValues: { min: 1, max: 10 }
+})(FieldNormalizingForm)

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

@@ -50,6 +50,11 @@ const SimpleInput = (props) => {
 const onSubmit = values => {
 }
 
+const upper = value => {
+  console.log('value = ', value);
+  return value && value.toUpperCase()
+}
+
 const TestForm = React.createClass({
   render: function() {
     const {
@@ -60,11 +65,19 @@ const TestForm = React.createClass({
     } = this.props;
     return (
         <Form onSubmit={handleSubmit(onSubmit)}>
+          <Field
+            name="shout"
+            component="input"
+            type="text"
+            placeholder="Shout something!"
+            normalize={upper}
+          />
           <div>
             <label>First Name</label>
             <div>
               { /* styled html input */ }
-              <Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"/>
+              <Field name="firstName" component={SimpleInput} type="text" placeholder="First Name"
+                normalize={upper} />
             </div>
           </div>
           <div>

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

@@ -0,0 +1,24 @@
+const normalizePhone = (value, previousValue) => {
+  if (!value) {
+    return value
+  }
+  const onlyNums = value.replace(/[^\d]/g, '')
+  if (!previousValue || value.length > previousValue.length) {
+    // typing forward
+    if (onlyNums.length === 3) {
+      return onlyNums + '-'
+    }
+    if (onlyNums.length === 6) {
+      return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3) + '-'
+    }
+  }
+  if (onlyNums.length <= 3) {
+    return onlyNums
+  }
+  if (onlyNums.length <= 6) {
+    return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3)
+  }
+  return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3, 6) + '-' + onlyNums.slice(6, 10)
+}
+
+export default normalizePhone

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

@@ -8,6 +8,7 @@ const Multiform = require('./form/multiform');
 const FormOne = require('./form/form-one');
 const FormTwo = require('./form/form-two');
 const FormThree = require('./form/form-three');
+const FormNormalize = require('./form/form-normalize');
 
 const {
   AppContainer
@@ -42,6 +43,7 @@ module.exports = ({
             <Route path="form-one" component={FormOne} />
             <Route path="form-two" component={FormTwo} />
             <Route path="form-three" component={FormThree} />
+            <Route path="form-normalize" component={FormNormalize} />
           </Route>
         </Router>
       </Provider>

ui/.storybook/config.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const { configure, addDecorator } = require('@kadira/storybook');
 
-const req = require.context('../src/components', true, /story.js$/);
+const req = require.context('../src/components', true, /.+?(?=story.js$)/);
 
 const Styled = require('styled-components');
 const Base = require('../src/components/base');

ui/.storybook/head.html

@@ -1 +0,0 @@
-<link href="./normalize.min.css" rel="stylesheet">

ui/package.json

@@ -20,7 +20,7 @@
     "chart.js": "^2.5.0",
     "chartjs-chart-box-plot": "prerelease",
     "color": "^1.0.3",
-    "d3": "^4.5.0",
+    "d3": "^4.6.0",
     "lodash.find": "^4.6.0",
     "lodash.first": "^3.0.0",
     "lodash.flatten": "^4.4.0",
@@ -33,10 +33,13 @@
     "param-case": "^2.1.0",
     "random-natural": "^1.0.3",
     "react": "^15.4.2",
+    "react-broadcast": "^0.1.2",
     "react-dom": "^15.4.2",
+    "react-redux": "^5.0.2",
     "react-router-dom": "4.0.0-beta.4",
     "react-select": "^1.0.0-rc.3",
     "reduce-css-calc": "^1.3.0",
+    "redux-form": "^6.5.0",
     "styled-components": "^1.4.3",
     "svg-react-loader": "^0.3.7",
     "transform-props-with": "^2.1.0",
@@ -44,7 +47,7 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^2.35.3",
-    "ava": "^0.18.1",
+    "ava": "^0.18.2",
     "babel-cli": "^6.23.0",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
@@ -61,12 +64,12 @@
     "babel-preset-react": "^6.23.0",
     "dangerously-set-inner-html": "2.0.0",
     "enzyme": "^2.7.1",
-    "eslint": "^3.15.0",
+    "eslint": "^3.16.0",
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-plugin-babel": "^4.0.1",
     "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-promise": "^3.4.1",
+    "eslint-plugin-promise": "^3.4.2",
     "eslint-plugin-react": "^6.10.0",
     "eslint-plugin-standard": "^2.0.1",
     "jsdom": "^9.11.0",
@@ -76,7 +79,7 @@
     "pre-commit": "^1.2.2",
     "react-addons-test-utils": "^15.4.2",
     "st": "^1.2.0",
-    "stylelint": "^7.8.0",
+    "stylelint": "^7.9.0",
     "stylelint-config-standard": "^16.0.0",
     "stylelint-processor-styled-components": "^0.0.4",
     "tap-xunit": "^1.7.0"

ui/src/components/baseline-grid/story.js

@@ -6,7 +6,7 @@ const {
 
 const Base = require('../base');
 const BaseElements = require('../base-elements');
-const Input = require('../input');
+const Input = require('../form/input');
 
 const {
   H1

ui/src/components/checkbox/index.js

@@ -1,127 +0,0 @@
-const composers = require('../../shared/composers');
-const constants = require('../../shared/constants');
-const fns = require('../../shared/functions');
-const React = require('react');
-const Styled = require('styled-components');
-
-const {
-  boxes
-} = constants;
-
-const {
-  Baseline
-} = composers;
-
-const {
-  remcalc
-} = fns;
-
-const {
-  default: styled,
-} = Styled;
-
-const StyledInput = styled.input`
-  visibility: hidden;
-  &:checked + label::after {
-    opacity: 1;
-  }
-  &:disabled + label {
-    background-color: rgb(249, 249, 249);
-  }
-  &:disabled + label::after {
-    opacity: 0.3;
-  }
-`;
-
-const StyledLabel = styled.label`
-  color: rgb(100, 100, 100);
-  position: absolute;
-  width: ${remcalc(24)};
-  height: ${remcalc(24)};
-  top: 0;
-  border-radius: ${boxes.borderRadius};
-  background-color: rgb(255, 255, 255);
-  box-shadow: ${boxes.insetShaddow};
-  border: ${boxes.border.unchecked};
-
-  &::after {
-    opacity: 0;
-    content: '';
-    position: absolute;
-    width: ${remcalc(9)};
-    height: ${remcalc(4)};
-    background: transparent;
-    top: ${remcalc(7)};
-    left: ${remcalc(7)};
-    border: ${remcalc(3)} solid #333;
-    border-top: none;
-    border-right: none;
-    transform: rotate(-45deg);
-  }
-
-  &:hover {
-    &::after {
-      opacity: 0.3;
-    }
-  }
-`;
-
-const StyledDiv = styled.div`
-  width: ${remcalc(24)};
-  height: ${remcalc(24)};
-  position: relative;
-`;
-
-const Checkbox = ({
-  checked = false,
-  children,
-  className,
-  disabled = false,
-  form,
-  id,
-  name,
-  onChange,
-  readOnly,
-  required,
-  selectionDirection,
-  style,
-  tabIndex
-}) => (
-  <StyledDiv>
-    <StyledInput
-      checked={checked}
-      disabled={disabled}
-      form={form}
-      name={name}
-      onChange={onChange}
-      readOnly={readOnly}
-      required={required}
-      style={style}
-      tabIndex={tabIndex}
-      type='checkbox'
-    />
-    <StyledLabel>
-      <span>{children}</span>
-    </StyledLabel>
-  </StyledDiv>
-);
-
-Checkbox.propTypes = {
-  checked: React.PropTypes.bool,
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  disabled: React.PropTypes.bool,
-  form: React.PropTypes.string,
-  id: React.PropTypes.string,
-  name: React.PropTypes.string,
-  onChange: React.PropTypes.func,
-  readOnly: React.PropTypes.bool,
-  required: React.PropTypes.bool,
-  selectionDirection: React.PropTypes.string,
-  style: React.PropTypes.object,
-  tabIndex: React.PropTypes.string
-};
-
-module.exports = Baseline(
-  Checkbox
-);

ui/src/components/checkbox/readme.md

@@ -1,40 +0,0 @@
-# `<Checkbox>`
-
-## demo
-
-```embed
-const React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Checkbox = require('./index.js');
-const styles = require('./style.css');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <Checkbox checked>
-          Checkbox checked
-        </Checkbox>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <Checkbox>
-          Checkbox unchecked
-        </Checkbox>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <Checkbox disabled>
-          Checkbox disabled
-        </Checkbox>
-      </Column>
-    </Row>
-  </Base>
-);
-```

ui/src/components/checkbox/story.js

@@ -1,18 +0,0 @@
-const React = require('react');
-
-const {
-  storiesOf
-} = require('@kadira/storybook');
-
-const Checkbox = require('./');
-
-storiesOf('Checkbox', module)
-  .add('Default', () => (
-    <Checkbox />
-  ))
-  .add('Checked', () => (
-    <Checkbox checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Checkbox disabled />
-  ));

ui/src/components/form/base-input.js

@@ -0,0 +1,152 @@
+const Styled = require('styled-components');
+const ReactBroadcast = require('react-broadcast');
+const React = require('react');
+
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const is = require('../../shared/is');
+
+const {
+  colors,
+  boxes
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
+} = Styled;
+
+const {
+  Subscriber
+} = ReactBroadcast;
+
+const colorWithDisabled = (props) => props.disabled
+  ? colors.inactive.default
+  : colors.fonts.regular;
+
+const colorWithDefaultValue = (props) => props.value === props.defaultValue
+  ? colors.inactive.default
+  : colorWithDisabled(props);
+
+const color = (props) => props.defaultValue
+  ? colorWithDefaultValue(props)
+  : colorWithDisabled(props);
+
+const height = (props) => !props.multiple
+  ? remcalc(48)
+  : 'auto';
+
+const paddingTop = (props) => props.multiple
+  ? remcalc(20)
+  : remcalc(13);
+
+const style = css`
+  box-sizing: border-box;
+
+  width: 100%;
+  height: ${height};
+
+  margin-bottom: ${remcalc(8)};
+  margin-top: ${remcalc(8)};
+  padding: ${paddingTop} ${remcalc(18)};
+
+  border-radius: ${boxes.borderRadius};
+  background-color: ${colors.base.white};
+  box-shadow: ${boxes.insetShaddow};
+  border: ${boxes.border.unchecked};
+
+  ${is('error')`
+    border-color: ${colors.inputError}
+  `};
+
+  ${is('warning')`
+    border-color: ${colors.inputWarning}
+  `};
+
+  ${is('success')`
+    border-color: ${colors.base.green}
+  `};
+
+  font-size: ${remcalc(16)};
+  line-height: normal !important;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  color: ${color};
+
+  appearance: none;
+  outline: 0;
+
+  &:focus {
+    border-color: ${colors.base.primary};
+    outline: 0;
+  }
+`;
+
+const BaseInput = (Component) => (props) => {
+  const render = (value) => {
+    const _value = (value || {});
+
+    const {
+      input = {},
+      meta = {},
+      id = ''
+    } = _value;
+
+    const hasError = !!(
+      props.error || // eslint-disable-line react/prop-types
+      _value.error ||
+      meta.error
+    );
+
+    const hasWarning = !!(
+      props.warning || // eslint-disable-line react/prop-types
+      _value.warning ||
+      meta.warning
+    );
+
+    const hasSuccess = !!(
+      props.success || // eslint-disable-line react/prop-types
+      _value.success ||
+      meta.success
+    );
+
+    return (
+      <Component
+        {...props}
+        {...input}
+        id={id}
+        error={hasError}
+        warning={hasWarning}
+        success={hasSuccess}
+      />
+    );
+  };
+
+  return (
+    <Subscriber channel='input-group'>
+      {render}
+    </Subscriber>
+  );
+};
+
+BaseInput.propTypes = {
+  error: React.PropTypes.bool,
+  warning: React.PropTypes.bool
+};
+
+module.exports = BaseInput;
+
+module.exports.Stylable = (Component) => {
+  const stylable = typeof Component === 'string'
+    ? styled[Component]
+    : styled(Component);
+
+  return stylable`
+    ${style}
+  `;
+};

ui/src/components/form/checkbox.js

@@ -0,0 +1,15 @@
+const composers = require('../../shared/composers');
+const BaseInput = require('./base-input');
+const Toggle = require('./toggle');
+
+const {
+  Baseline
+} = composers;
+
+const Checkbox = Toggle({
+  type: 'checkbox'
+});
+
+module.exports = Baseline(
+  BaseInput(Checkbox)
+);

ui/src/components/form/fieldset.js

@@ -0,0 +1,31 @@
+const Styled = require('styled-components');
+const composers = require('../../shared/composers');
+
+const {
+  Baseline
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const Fieldset = styled.fieldset`
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: auto;
+
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+`;
+
+module.exports = Baseline(
+  Fieldset
+);

ui/src/components/form/group.js

@@ -0,0 +1,93 @@
+const ReactBroadcast = require('react-broadcast');
+const ReduxForm = require('redux-form');
+const React = require('react');
+
+const Fieldset = require('./fieldset');
+const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
+
+const {
+  Broadcast
+} = ReactBroadcast;
+
+const {
+  Field
+} = ReduxForm;
+
+const {
+  Baseline
+} = composers;
+
+const {
+  rndId
+} = fns;
+
+const {
+  Component
+} = React;
+
+class FormGroup extends Component {
+  constructor(props) {
+    super(props);
+    this.renderGroup = this.renderGroup.bind(this);
+  }
+  renderGroup(inputProps) {
+    const {
+      className,
+      style,
+      children,
+      ...rest
+    } = this.props;
+
+    const value = {
+      id: rndId(),
+      ...rest,
+      ...inputProps
+    };
+
+    return (
+      <Fieldset className={className} style={style}>
+        <Broadcast channel='input-group' value={value}>
+          <div>
+            {children}
+          </div>
+        </Broadcast>
+      </Fieldset>
+    );
+  }
+  render() {
+    const {
+      name = rndId(),
+      defaultValue,
+      normalize,
+      reduxForm = false
+    } = this.props;
+
+    if (!reduxForm) {
+      return this.renderGroup({});
+    }
+
+    return (
+      <Field
+        name={name}
+        defaultValue={defaultValue}
+        component={this.renderGroup}
+        normalize={normalize}
+      />
+    );
+  }
+}
+
+FormGroup.propTypes = {
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  defaultValue: React.PropTypes.string,
+  name: React.PropTypes.string,
+  normalize: React.PropTypes.func,
+  reduxForm: React.PropTypes.bool,
+  style: React.PropTypes.object
+};
+
+module.exports = Baseline(
+  FormGroup
+);

ui/src/components/form/index.js

@@ -0,0 +1,10 @@
+module.exports = {
+  Checkbox: require('./checkbox'),
+  FormGroup: require('./group'),
+  FormLabel: require('./label'),
+  FormMeta: require('./meta'),
+  Input: require('./input'),
+  Select: require('./select'),
+  Radio: require('./radio').RadioList,
+  Fieldset: require('./fieldset')
+};

ui/src/components/form/input.js

@@ -0,0 +1,14 @@
+const composers = require('../../shared/composers');
+const BaseInput = require('./base-input');
+
+const {
+  Baseline
+} = composers;
+
+const {
+  Stylable
+} = BaseInput;
+
+module.exports = Baseline(
+  BaseInput(Stylable('input'))
+);

ui/src/components/form/label-row.js

@@ -1,30 +0,0 @@
-const composers = require('../../shared/composers');
-const Column = require('../column');
-const React = require('react');
-const Row = require('../row');
-
-const {
-  Baseline
-} = composers;
-
-const LabelRow = (props) => {
-  const labels = React.Children.map(props.children, (children) => (
-    <Column xs={12}>
-      {children}
-    </Column>
-  ));
-
-  return (
-    <Row>
-      {labels}
-    </Row>
-  );
-};
-
-LabelRow.propTypes = {
-  children: React.PropTypes.node
-};
-
-module.exports = Baseline(
-  LabelRow
-);

ui/src/components/form/label.js

@@ -1,33 +1,43 @@
-const composers = require('../../shared/composers');
+const React = require('react');
-const constants = require('../../shared/constants');
+const ReactBroadcast = require('react-broadcast');
-const fns = require('../../shared/functions');
 const Styled = require('styled-components');
-
+const fns = require('../../shared/functions');
-const {
-  colors
-} = constants;
-
-const {
-  remcalc
-} = fns;
-
-const {
-  Baseline
-} = composers;
 
 const {
   default: styled
 } = Styled;
 
-const Label = styled.label`
+const {
-  width: 100%;
+  remcalc
-  font-size: ${remcalc(16)};
+} = fns;
-  font-weight: 600;
+
-  font-style: normal;
+const Label = require('../label');
-  font-stretch: normal;
+
-  color: ${colors.base.secondary};
+const {
+  Subscriber
+} = ReactBroadcast;
+
+const StyledLabel = styled(Label)`
+  margin-right: ${remcalc(12)};
 `;
 
-module.exports = Baseline(
+module.exports = (props) => {
-  Label
+  const render = (value) => {
-);
+    const {
+      id = ''
+    } = (value || {});
+
+    return (
+      <StyledLabel
+        {...props}
+        htmlFor={id}
+      />
+    );
+  };
+
+  return (
+    <Subscriber channel='input-group'>
+      {render}
+    </Subscriber>
+  );
+};

ui/src/components/form/legend.js

@@ -1,5 +1,5 @@
-const composers = require('../../shared/composers');
 const Styled = require('styled-components');
+const composers = require('../../shared/composers');
 
 const {
   Baseline
@@ -9,8 +9,6 @@ const {
   default: styled
 } = Styled;
 
-const View = styled.div``;
-
 module.exports = Baseline(
-  View
+  styled.legend``
 );

ui/src/components/form/meta.js

@@ -0,0 +1,128 @@
+const Styled = require('styled-components');
+const ReactBroadcast = require('react-broadcast');
+const React = require('react');
+
+const Label = require('../label');
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const is = require('../../shared/is');
+
+const {
+  Subscriber
+} = ReactBroadcast;
+
+const {
+  breakpoints,
+  colors
+} = constants;
+
+const {
+  Baseline
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const StyledLabel = styled(Label)`
+  ${breakpoints.medium`
+    text-align: right;
+  `};
+
+  ${is('right')`
+    float: right;
+  `};
+
+  ${is('error')`
+    color: ${colors.inputError};
+  `};
+
+  ${is('warning')`
+    color: ${colors.inputWarning};
+  `};
+
+  ${is('success')`
+    color: ${colors.base.green};
+  `};
+`;
+
+const Meta = (props) => {
+  const render = (value) => {
+    const {
+      meta = {}
+    } = value;
+
+    const msg = (
+      props.children ||
+      props.error ||
+      props.warning ||
+      props.success ||
+      meta.error ||
+      meta.warning ||
+      meta.success ||
+      value.error ||
+      value.warning ||
+      value.success
+    );
+
+    const hasError = !!(
+      props.error ||
+      meta.error ||
+      value.error
+    );
+
+    const hasWarning = !!(
+      props.warning ||
+      meta.warning ||
+      value.warning
+    );
+
+    const hasSuccess = !!(
+      props.success ||
+      meta.success ||
+      value.success
+    );
+
+    const isRight = !props.left;
+
+    return (
+      <StyledLabel
+        {...meta}
+        {...props}
+        error={hasError}
+        warning={hasWarning}
+        success={hasSuccess}
+        right={isRight}
+      >
+        {msg}
+      </StyledLabel>
+    );
+  };
+
+  return (
+    <Subscriber channel='input-group'>
+      {render}
+    </Subscriber>
+  );
+};
+
+Meta.propTypes = {
+  children: React.PropTypes.node,
+  error: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.bool
+  ]),
+  left: React.PropTypes.bool,
+  success: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.bool
+  ]),
+  warning: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.bool
+  ])
+};
+
+module.exports = Baseline(
+  Meta
+);

ui/src/components/form/msg.js

@@ -1,38 +0,0 @@
-const composers = require('../../shared/composers');
-const constants = require('../../shared/constants');
-const Label = require('./label');
-const match = require('../../shared/match');
-const Styled = require('styled-components');
-
-const {
-  breakpoints,
-  colors
-} = constants;
-
-const {
-  Baseline
-} = composers;
-
-const {
-  default: styled
-} = Styled;
-
-const color = match.prop({
-  warning: colors.inputWarning,
-  error: colors.inputError,
-  //disabled: colors.brandInactiveColor
-})('type');
-
-
-const Msg = styled(Label)`
-  color: ${color};
-
-  ${breakpoints.medium`
-    float: right;
-    text-align: right;
-  `}
-`;
-
-module.exports = Baseline(
-  Msg
-);

ui/src/components/form/outlet.js

@@ -1,73 +0,0 @@
-const constants = require('../../shared/constants');
-const fns = require('../../shared/functions');
-const Styled = require('styled-components');
-
-const {
-  colors,
-  boxes
-} = constants;
-
-const {
-  remcalc
-} = fns;
-
-const {
-  css
-} = Styled;
-
-const colorWithDisabled = (props) => props.disabled
-  ? colors.inactive.default
-  : colors.fonts.regular;
-
-const colorWithDefaultValue = (props) => props.value === props.defaultValue
-  ? colors.inactive.default
-  : colorWithDisabled(props);
-
-const color = (props) => props.defaultValue
-  ? colorWithDefaultValue(props)
-  : colorWithDisabled(props);
-
-const border = (props) => props.error
-  ? boxes.border.error
-  : boxes.border.unchecked;
-
-const height = (props) => !props.multiple
-  ? remcalc(48)
-  : 'auto';
-
-const paddingTop = (props) => props.multiple
-  ? remcalc(20)
-  : remcalc(13);
-
-const Outlet = css`
-  box-sizing: border-box;
-
-  width: 100%;
-  height: ${height};
-
-  margin-bottom: ${remcalc(8)};
-  margin-top: ${remcalc(8)};
-  padding: ${paddingTop} ${remcalc(18)};
-
-  border-radius: ${boxes.borderRadius};
-  background-color: ${colors.base.white};
-  box-shadow: ${boxes.insetShaddow};
-  border: ${border};
-
-  font-size: ${remcalc(16)};
-  line-height: normal;
-  font-weight: normal;
-  font-style: normal;
-  font-stretch: normal;
-  color: ${color};
-
-  appearance: none;
-  outline: 0;
-
-  &:focus {
-    border-color: ${colors.base.primary};
-    outline: 0;
-  }
-`;
-
-module.exports = Outlet;

ui/src/components/form/radio.js

@@ -0,0 +1,35 @@
+const Styled = require('styled-components');
+
+const Toggle = require('./toggle');
+const composers = require('../../shared/composers');
+const BaseInput = require('./base-input');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  Baseline
+} = composers;
+
+const RadioItem = BaseInput(styled.li`
+  list-style-type: none;
+`);
+
+const RadioList = styled.ul`
+  margin: 0;
+  padding: 0;
+`;
+
+const Radio = Toggle({
+  container: RadioItem,
+  type: 'radio'
+});
+
+module.exports = Baseline(
+  Radio
+);
+
+module.exports.RadioList = Baseline(
+  RadioList
+);

ui/src/components/form/select.js

@@ -0,0 +1,14 @@
+const composers = require('../../shared/composers');
+const BaseInput = require('./base-input');
+
+const {
+  Baseline
+} = composers;
+
+const {
+  Stylable
+} = BaseInput;
+
+module.exports = Baseline(
+  BaseInput(Stylable('select'))
+);

ui/src/components/form/toggle.js

@@ -0,0 +1,178 @@
+const Styled = require('styled-components');
+const ReactBroadcast = require('react-broadcast');
+const React = require('react');
+
+const fns = require('../../shared/functions');
+const is = require('../../shared/is');
+const constants = require('../../shared/constants');
+const BaseInput = require('./base-input');
+
+const {
+  Subscriber
+} = ReactBroadcast;
+
+const {
+  boxes,
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+} = Styled;
+
+const Input = styled.input`
+  display: none;
+
+  &:checked + label::after {
+    opacity: 1;
+  }
+
+  &:selected + label::after {
+    opacity: 1;
+  }
+
+  &:disabled + label {
+    background-color: rgb(249, 249, 249);
+  }
+
+  &:disabled + label::after {
+    opacity: 0.3;
+  }
+`;
+
+const Label = styled.label`
+  color: rgb(100, 100, 100);
+  position: absolute;
+  width: ${remcalc(22)};
+  height: ${remcalc(22)};
+  top: 0;
+
+  background-color: rgb(255, 255, 255);
+  box-shadow: ${boxes.insetShaddow};
+  border: ${boxes.border.unchecked};
+
+  ${is('checkbox')`
+    border-radius: ${boxes.borderRadius};
+  `};
+
+  ${is('radio')`
+    border-radius: ${remcalc(11)};
+  `};
+
+  ${is('error')`
+    border-color: ${colors.inputError}
+  `};
+
+  ${is('warning')`
+    border-color: ${colors.inputWarning}
+  `};
+
+  ${is('success')`
+    border-color: ${colors.base.green}
+  `};
+
+  ${is('radio')`
+    &::after {
+      opacity: 0;
+      content: '';
+      position: absolute;
+      width: ${remcalc(8)};
+      height: ${remcalc(8)};
+      border-radius: ${remcalc(4)};
+      background-color: ${colors.base.secondaryDark};
+      border-top: none;
+      border-right: none;
+      top: ${remcalc(8)};
+      left: ${remcalc(8)};
+    }
+  `};
+
+  ${is('checkbox')`
+    &::after {
+      opacity: 0;
+      content: '';
+      position: absolute;
+      width: ${remcalc(9)};
+      height: ${remcalc(4)};
+      background: transparent;
+      top: ${remcalc(7)};
+      left: ${remcalc(7)};
+      border: ${remcalc(3)} solid #333;
+      border-top: none;
+      border-right: none;
+      transform: rotate(-45deg);
+    }
+  `};
+
+  &:hover {
+    &::after {
+      opacity: 0.3;
+    }
+  }
+`;
+
+const InnerContainer = styled.div`
+  display: inline-block;
+  margin-right: ${remcalc(12)}
+  vertical-align: text-bottom;
+  width: ${remcalc(24)};
+  height: ${remcalc(24)};
+  position: relative;
+`;
+
+const Toggle = ({
+  container = null,
+  type = 'radio'
+}) => BaseInput(({
+  children,
+  ...props
+}) => {
+  const OuterContainer = container
+    ? container
+    : null;
+
+  const types = {
+    [type]: true
+  };
+
+  const render = (value) => {
+    const toggle = (
+      <InnerContainer type={type}>
+        <Input
+          {...props}
+          {...value}
+          type={type}
+        />
+        <Label
+          {...types}
+          htmlFor={value.id}
+          // eslint-disable-next-line react/prop-types
+          error={props.error}
+          // eslint-disable-next-line react/prop-types
+          warning={props.warning}
+          // eslint-disable-next-line react/prop-types
+          success={props.success}
+        />
+      </InnerContainer>
+    );
+
+    return !OuterContainer ? toggle : (
+      <OuterContainer>
+        {toggle}
+        {children}
+      </OuterContainer>
+    );
+  };
+
+  return (
+    <Subscriber channel='input-group'>
+      {render}
+    </Subscriber>
+  );
+});
+
+module.exports = Toggle;

ui/src/components/input/index.js

@@ -1,89 +0,0 @@
-const fns = require('../../shared/functions');
-const reduxFormProxy = require('../../shared/redux-form-proxy');
-const composers = require('../../shared/composers');
-
-const React = require('react');
-const Styled = require('styled-components');
-
-const Label = require('../form/label');
-const LabelRow = require('../form/label-row');
-const Msg = require('../form/msg');
-const Outlet = require('../form/outlet');
-const View = require('../form/view');
-
-const {
-  rndId
-} = fns;
-
-const {
-  Baseline
-} = composers;
-
-const {
-  default: styled
-} = Styled;
-
-const StyledInput = styled.input`
-  ${Outlet}
-`;
-
-const Input = (props) => {
-  const {
-    children,
-    id = rndId(),
-    label = '',
-    error = '',
-    warning = ''
-  } = props;
-
-  const viewProps = [
-    'children',
-    'style',
-    'className'
-  ];
-
-  // reset props for <input />
-  const newProps = Object.keys(props).reduce((sum, key) => ({
-    ...sum,
-    [key]: viewProps.indexOf(key) < 0 ? props[key] : null
-  }),{});
-
-  const _label = !label.length ? null : (
-    <Label htmlFor={id}>
-      {label}
-    </Label>
-  );
-
-  const msgType = error ? 'error' : (warning ? 'warning' : null);
-
-  const _msg = !(error || warning) ? null : (
-    <Msg type={msgType}>
-      {error ? error : warning}
-    </Msg>
-  );
-
-  return (
-    <View className={props.className} style={props.style}>
-      <LabelRow>
-        {_label}
-        {_msg}
-      </LabelRow>
-      <StyledInput {...newProps} />
-      {children}
-    </View>
-  );
-};
-
-Input.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  error: React.PropTypes.string,
-  id: React.PropTypes.string,
-  label: React.PropTypes.string,
-  style: React.PropTypes.object,
-  warning: React.PropTypes.string
-};
-
-module.exports = reduxFormProxy(
-  Baseline(Input)
-);

ui/src/components/input/readme.md

@@ -1,60 +0,0 @@
-# Input
-
-## demo
-
-```embed
-const  React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Input = require('./index.js');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <Input
-          placeholder='Enter email'
-          label='Email Address'
-          type='email'
-        >
-          <small>We'll never share your email with anyone else.</small>
-        </Input>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <Input placeholder='Password' type='password'>
-          Password
-        </Input>
-      </Column>
-    </Row>
-  </Base>
-);
-```
-
-## usage
-
-```js
-const React = require('react');
-const Input = require('ui/input');
-
-module.exports = () => {
-  return (
-    <div>
-      <Input
-        placeholder='Enter email'
-        label='Email Address'
-        type='email'
-      >
-        <small>We'll never share your email with anyone else.</small>
-      </Input>
-      <Input placeholder='Password' type='password'>
-        Password
-      </Input>
-    </div>
-  );
-}
-```

ui/src/components/input/story.js

@@ -1,42 +0,0 @@
-const React = require('react');
-
-const {
-  storiesOf
-} = require('@kadira/storybook');
-
-const Base= require('../base');
-const Input = require('./');
-
-storiesOf('Input', module)
-  .add('Default', () => (
-    <Base>
-      <Input placeholder="I am the placeholder" />
-    </Base>
-  ))
-  .add('type=email', () => (
-    <Base>
-      <Input
-        label='Email Address'
-        placeholder='Enter email'
-        type='email'
-      >
-        <small>We&apos;ll never share your email with anyone else.</small>
-      </Input>
-    </Base>
-  ))
-  .add('Error', () => (
-    <Base>
-      <Input
-        error="Somethings missing"
-        value="alexw/makeusproud.com"
-      />
-    </Base>
-  ))
-  .add('Success', () => (
-    <Base>
-      <Input
-        success
-        value="alexw@makeusproud.com"
-      />
-    </Base>
-  ));

ui/src/components/label/index.js

@@ -0,0 +1,32 @@
+const composers = require('../../shared/composers');
+const constants = require('../../shared/constants');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  colors
+} = constants;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  Baseline
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const Label = styled.label`
+  font-size: ${remcalc(16)};
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
+  color: ${colors.base.secondary};
+`;
+
+module.exports = Baseline(
+  Label
+);

ui/src/components/radio-group/index.js

@@ -1,160 +0,0 @@
-/* After some time tring to make this work without messing w/ checked property,
- * I ended up using it *only* when none is defined
- *
- * This way we try to be as pure as possible and not mess with consumer's logic
- * if they have any
- */
-
-const composers = require('../../shared/composers');
-const first = require('lodash.first');
-const isUndefined = require('lodash.isundefined');
-const get = require('lodash.get');
-const Item = require('./item');
-const find = require('lodash.find');
-const classNames = require('classnames');
-const React = require('react');
-// const styles = require('./style.css');
-
-const {
-  Baseline
-} = composers;
-
-const RadioGroup = React.createClass({
-  propTypes: {
-    children: React.PropTypes.node,
-    className: React.PropTypes.string,
-    id: React.PropTypes.string,
-    name: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    style: React.PropTypes.object
-  },
-  getInitialState: function() {
-    return this.getState(this.props);
-  },
-  componentWillReceiveProps: function(nextProps) {
-    return this.setState(nextProps);
-  },
-  getState: function(props) {
-    const _children = React.Children.toArray(props.children).filter((child) => {
-      return get(child, 'type.displayName') === 'Radio';
-    });
-
-    const hasChecked = _children.some((child) => {
-      return !isUndefined(get(child, 'props.checked'));
-    });
-
-    if (hasChecked) {
-      return {
-        hasChecked
-      };
-    }
-
-    const defaultChecked = get(find(_children, (child) => {
-      return get(child, 'props.defaultChecked');
-    }), 'props.value');
-
-    const checked = (() => {
-      const stateChecked = get(this, 'state.checked');
-      const fallback = isUndefined(defaultChecked)
-        ? get(first(_children), 'props.value')
-        : defaultChecked;
-
-      return !isUndefined(stateChecked) ? stateChecked : fallback;
-    })();
-
-    return {
-      checked
-    };
-  },
-  handleChange: function(key) {
-    return (ev) => {
-      const {
-        onChange = () => {}
-      } = this.props;
-
-      this.setState({
-        checked: key
-      }, () => {
-        onChange(ev);
-      });
-    };
-  },
-  render: function() {
-    const {
-      name,
-      children,
-      className,
-      id,
-      style
-    } = this.props;
-
-    const {
-      hasChecked,
-      checked
-    } = this.state;
-
-    const {
-      handleChange
-    } = this;
-
-    const cn = classNames(
-      className
-    );
-
-    const _children = React.Children.map(children, (child, i) => {
-      if (child.type.name !== 'Radio') {
-        return child;
-      }
-
-      const tabIndex = i + 1;
-      const disabled = get(child, 'props.disabled');
-      const value = get(child, 'props.value');
-      const itemContent = get(child, 'props.children');
-
-      const _handleChange = (!hasChecked && !disabled)
-        ? handleChange(value)
-        : undefined;
-
-      const _child = hasChecked ? (
-        React.cloneElement(child, {
-          name
-        })
-      ) : (
-        React.cloneElement(child, {
-          onChange: _handleChange,
-          checked: value === checked,
-          defaultChecked: undefined,
-          name
-        })
-      );
-
-      const _checked = get(_child, 'props.checked');
-
-      return (
-        <Item
-          checked={_checked}
-          disabled={disabled}
-          itemContent={itemContent}
-          onClick={_handleChange}
-          tabIndex={tabIndex}
-        >
-          {_child}
-        </Item>
-      );
-    });
-
-    return (
-      <div
-        className={cn}
-        id={id}
-        style={style}
-      >
-        {_children}
-      </div>
-    );
-  }
-});
-
-module.exports = Baseline(
-  RadioGroup
-);

ui/src/components/radio-group/readme.md

@@ -1,35 +0,0 @@
-# `<RadioGroup>`
-
-## demo
-
-```embed
-const React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Radio = require('../radio');
-const RadioGroup = require('./index');
-const styles = require('./style.css');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <RadioGroup name='mode'>
-          <Radio label='Default settings' value='default'>
-            <p>You get all the good bits and none of the rubbish</p>
-          </Radio>
-          <Radio label='Fancy settings' value='fancy'>
-            <p>You get all the good bits and extra brownies</p>
-          </Radio>
-          <Radio disabled label='No settings' value='none'>
-            <p>You get none of the good bits</p>
-          </Radio>
-        </RadioGroup>
-      </Column>
-    </Row>
-  </Base>
-);
-```

ui/src/components/radio-group/story.js

@@ -1,27 +0,0 @@
-const React = require('react');
-
-const {
-  storiesOf
-} = require('@kadira/storybook');
-
-const Base= require('../base');
-const RadioGroup = require('./');
-const Radio = require('./item');
-
-
-storiesOf('Radio Group', module)
-  .add('Default', () => (
-    <Base>
-      <RadioGroup>
-        <Radio name='hello' value='default'>
-          Video killed the radio star
-        </Radio>
-        <Radio name='hello' value='fancy'>
-          Video killed the radio star
-        </Radio>
-        <Radio name='hello' value='none'>
-          Video killed the radio star
-        </Radio>
-      </RadioGroup>
-    </Base>
-  ));

ui/src/components/radio/readme.md

@@ -1,43 +0,0 @@
-# `<Radio >`
-
-## demo
-
-```embed
-const  React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Radio = require('./index.js');
-const styles = require('./style.css');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <Radio name='gender' value='female' checked={false}>
-          Female
-        </Radio>
-        <Radio name='gender' value='male' checked={true}>
-          Male
-        </Radio>
-      </Column>
-    </Row>
-  </Base>
-);
-```
-
-## usage
-
-```js
-const React = require('react');
-const Radio = require('ui/radio');
-
-module.exports = () => {
-  return (
-    <Radio name='gender' value='female' label='Female' />
-    <Radio name='gender' value='male' label='Male' checked/>
-  );
-}
-```

ui/src/components/radio/story.js

@@ -1,20 +0,0 @@
-const React = require('react');
-
-const {
-  storiesOf
-} = require('@kadira/storybook');
-
-const Radio = require('./');
-
-storiesOf('Radio', module)
-  .add('Default', () => (
-    <Radio>
-      Video killed the radio star
-    </Radio>
-  ))
-  .add('Checked', () => (
-    <Radio checked onChange={function noop() {}} />
-  ))
-  .add('Disabled', () => (
-    <Radio disabled />
-  ));

ui/src/components/row/index.js

@@ -3,11 +3,14 @@
  * github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Row.js
  */
 
+const Styled = require('styled-components');
+const React = require('react');
+
+const Column = require('../column');
 const composers = require('../../shared/composers');
 const constants = require('../../shared/constants');
 const match = require('../../shared/match');
 const sizeMatch = require('./size-match');
-const Styled = require('styled-components');
 
 const {
   breakpoints,
@@ -56,7 +59,7 @@ const alignItems = (size) => match(sizeMatch(size, {
  * <row center top={['xs', 'sm']} first='lg' />
  * ```
  **/
-const Row = styled.div`
+const StyledRow = styled.div`
   box-sizing: border-box;
   display: flex;
   flex: 0 1 auto;
@@ -76,7 +79,6 @@ const Row = styled.div`
     justify-content: ${justify('sm')};
     text-align: ${textAlign('sm')};
     align-items: ${alignItems('sm')};
-
   `}
 
   ${breakpoints.medium`
@@ -94,6 +96,29 @@ const Row = styled.div`
   `}
 `;
 
+const Row = ({
+  stretch = false,
+  children,
+  ...rest
+}) => {
+  return stretch ? (
+    <StyledRow {...rest}>
+      <Column xs={12}>
+        {children}
+      </Column>
+    </StyledRow>
+  ) : (
+    <StyledRow {...rest}>
+      {children}
+    </StyledRow>
+  );
+};
+
+Row.propTypes = {
+  children: React.PropTypes.node,
+  stretch: React.PropTypes.bool
+};
+
 module.exports = Baseline(
   Row
 );

ui/src/components/select/index.js

@@ -1,102 +0,0 @@
-const composers = require('../../shared/composers');
-const reduxFormProxy = require('../../shared/redux-form-proxy');
-const fns = require('../../shared/functions');
-const React = require('react');
-const Styled = require('styled-components');
-
-const Label = require('../form/label');
-const LabelRow = require('../form/label-row');
-const Msg = require('../form/msg');
-const Outlet = require('../form/outlet');
-const View = require('../form/view');
-
-const {
-  rndId
-} = fns;
-
-const {
-  Baseline
-} = composers;
-
-const {
-  default: styled
-} = Styled;
-
-const defaultValue = rndId();
-
-const StyledSelect = styled.select`
-  ${Outlet}
-`;
-
-const Select = (props) => {
-  const {
-    children,
-    disabled = false,
-    error = '',
-    id = rndId(),
-    label = '',
-    multiple = false,
-    name = '',
-    placeholder = '',
-    value = defaultValue,
-    warning = ''
-  } = props;
-
-  const _label = !label.length ? null : (
-    <Label htmlFor={id}>
-      {label}
-    </Label>
-  );
-
-  const _placeholder = !placeholder ? null : (
-    <option disabled value={defaultValue}>
-      {placeholder}
-    </option>
-  );
-
-  const msgType = error ? 'error' : (warning ? 'warning' : null);
-
-  const _msg = !(error || warning) ? null : (
-    <Msg type={msgType}>
-      {error ? error : warning}
-    </Msg>
-  );
-
-  return (
-    <View {...props} id=''>
-      <LabelRow>
-        {_label}
-        {_msg}
-      </LabelRow>
-      <StyledSelect
-        defaultValue={defaultValue}
-        disabled={disabled}
-        id={id}
-        multiple={multiple}
-        name={name}
-        placeholder={placeholder}
-        value={_placeholder ? value : undefined}
-      >
-        {_placeholder}
-        {children}
-      </StyledSelect>
-    </View>
-  );
-};
-
-Select.propTypes = {
-  children: React.PropTypes.node,
-  disabled: React.PropTypes.bool,
-  error: React.PropTypes.string,
-  id: React.PropTypes.string,
-  label: React.PropTypes.string,
-  multiple: React.PropTypes.bool,
-  name: React.PropTypes.string,
-  placeholder: React.PropTypes.string,
-  value: React.PropTypes.string,
-  warning: React.PropTypes.string
-};
-
-module.exports = reduxFormProxy(
-  Baseline(Select)
-);

ui/src/components/select/readme.md

@@ -1,60 +0,0 @@
-# Select
-
-
-## demo
-
-```embed
-const  React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Select = require('./index.js');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column xs={12}>
-        <Select label='example select'>
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </Select>
-      </Column>
-    </Row>
-    <Row>
-      <Column xs={12}>
-        <Select multiple label='example multiple select'>
-          <option>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-        </Select>
-      </Column>
-    </Row>
-  </Base>
-);
-```
-
-## usage
-
-```js
-const React = require('react');
-const Select = require('ui/select');
-
-module.exports = () => {
-  return (
-    <Select multiple label='example select'>
-      <option>1</option>
-      <option>2</option>
-      <option>3</option>
-      <option>4</option>
-      <option>5</option>
-    </Select>
-  );
-}
-```

ui/src/components/select/story.js

@@ -1,80 +0,0 @@
-const React = require('react');
-
-const {
-  storiesOf
-} = require('@kadira/storybook');
-
-const Select = require('./');
-const Base = require('../base');
-
-
-storiesOf('Select', module)
-  .add('Default', () => (
-    <Base>
-      <Select label='Data Centers' placeholder='Select Location'>
-        <option value="1">Amsterdam, EU</option>
-        <option>San Francisco, USA</option>
-        <option>Seoul, South Korea</option>
-        <option>Tokyo, Japan</option>
-      </Select>
-    </Base>
-  ))
-  .add('disabled', () => (
-    <Base>
-      <Select
-        disabled
-        label='Data Centers'
-        placeholder='Select Location'
-        value='2'
-      >
-        <option value="1">Amsterdam, EU</option>
-        <option>San Francisco, USA</option>
-        <option>Seoul, South Korea</option>
-        <option>Tokyo, Japan</option>
-      </Select>
-    </Base>
-  ))
-  .add('selected', () => (
-    <Base>
-      <Select
-        label='Data Centers'
-        placeholder='Select Location'
-        value='2'
-      >
-        <option value="1">Amsterdam, EU</option>
-        <option>San Francisco, USA</option>
-        <option>Seoul, South Korea</option>
-        <option>Tokyo, Japan</option>
-      </Select>
-    </Base>
-  ))
-  .add('multiple', () => (
-    <Base>
-      <Select label='Data Centers' multiple>
-        <option>Amsterdam, EU</option>
-        <option>San Francisco, USA</option>
-        <option>Seoul, South Korea</option>
-        <option>Tokyo, Japan</option>
-      </Select>
-    </Base>
-  ))
-  .add('warning', () => (
-    <Base>
-      <Select label='Data Centers' warning='Be warned!'>
-        <option>Amsterdam, EU</option>
-        <option>San Francisco, USA</option>
-        <option>Seoul, South Korea</option>
-        <option>Tokyo, Japan</option>
-      </Select>
-    </Base>
-  ))
-  .add('error', () => (
-    <Base>
-      <Select error='How dare you?!' label='Data Centers'>
-        <option>Amsterdam, EU</option>
-        <option>San Francisco, USA</option>
-        <option>Seoul, South Korea</option>
-        <option>Tokyo, Japan</option>
-      </Select>
-    </Base>
-  ));

ui/src/components/table-data-table/index.js

@@ -23,12 +23,13 @@ const StyledTableWrapper = styled.section`
 
 const Table = ({
   children,
+  className,
   columns = [],
   data = [],
   style,
   title
 }) => (
-  <StyledTableWrapper style={style}>
+  <StyledTableWrapper style={style} className={className}>
     <StyledTitle>{title}</StyledTitle>
     <TableContent
       columns={columns}
@@ -39,6 +40,7 @@ const Table = ({
 
 Table.propTypes = {
   children: React.PropTypes.node,
+  className: React.PropTypes.string,
   columns: React.PropTypes.array,
   data: React.PropTypes.array,
   style: React.PropTypes.object,

ui/src/components/table-simple-table/table.js

@@ -24,18 +24,20 @@ const StyledTableWrapper = styled.section`
 
 const Table = ({
   children,
+  className,
   style,
   title
 }) => (
-  <StyledTableWrapper style={style}>
+  <StyledTableWrapper style={style} className={className}>
     {children}
   </StyledTableWrapper>
 );
 
 Table.propTypes = {
   children: React.PropTypes.node,
+  className: React.PropTypes.string,
   style: React.PropTypes.object,
-  title: React.PropTypes.string,
+  title: React.PropTypes.string
 };
 
 module.exports = Baseline(

ui/src/components/textarea/readme.md

@@ -1,60 +0,0 @@
-# Input
-
-## demo
-
-```embed
-const  React = require('react');
-const ReactDOM = require('react-dom/server');
-const Base = require('../base');
-const Container = require('../container');
-const Row = require('../row');
-const Column = require('../column');
-const Input = require('./index.js');
-
-nmodule.exports = ReactDOM.renderToString(
-  <Base>
-    <Row>
-      <Column>
-        <Input
-          placeholder='Enter email'
-          label='Email Address'
-          type='email'
-        >
-          <small>We'll never share your email with anyone else.</small>
-        </Input>
-      </Column>
-    </Row>
-    <Row>
-      <Column>
-        <Input placeholder='Password' type='password'>
-          Password
-        </Input>
-      </Column>
-    </Row>
-  </Base>
-);
-```
-
-## usage
-
-```js
-const React = require('react');
-const Input = require('ui/input');
-
-module.exports = () => {
-  return (
-    <div>
-      <Input
-        placeholder='Enter email'
-        label='Email Address'
-        type='email'
-      >
-        <small>We'll never share your email with anyone else.</small>
-      </Input>
-      <Input placeholder='Password' type='password'>
-        Password
-      </Input>
-    </div>
-  );
-}
-```

ui/src/components/textarea/story.js

@@ -1,24 +0,0 @@
-const React = require('react');
-
-const {
-  storiesOf
-} = require('@kadira/storybook');
-
-const Base= require('../base');
-const Textarea = require('./');
-
-storiesOf('Textarea', module)
-  .add('Default', () => (
-    <Base>
-      <Textarea placeholder="I am the placeholder" />
-    </Base>
-  ))
-  .add('Error', () => (
-    <Base>
-      <Textarea
-        error="Somethings missing"
-        placeholder="There was an error"
-        value="alexw/makeusproud.com"
-      />
-    </Base>
-  ));

ui/src/components/topology/story-helper.js

@@ -1,8 +1,8 @@
 const React = require('react');
 const Styled = require('styled-components');
 const composers = require('../../shared/composers');
-const Input = require('../input');
+const Input = require('../form/input');
-const Select = require('../select');
+const Select = require('../form/select');
 const Topology = require('./');
 const data = require('./data');
 

ui/src/index.js

@@ -4,29 +4,28 @@ module.exports = {
   Anchor: require('./components/anchor'),
   Avatar: require('./components/avatar'),
   Button: require('./components/button'),
-  Checkbox: require('./components/checkbox'),
+  Checkbox: require('./components/form/checkbox'),
   Column: require('./components/column'),
   Container: require('./components/container'),
   Close: require('./components/close'),
-  Input: require('./components/input'),
+  Form: require('./components/form'),
+  Input: require('./components/form/input'),
   List: require('./components/list'),
   Modal: require('./components/modal'),
   MiniMetric: require('./components/mini-metric'),
   NavLink: require('./components/nav-link'),
   Notificaton: require('./components/notification'),
   Pagination: require('./components/pagination'),
-  Radio: require('./components/radio'),
+  Radio: require('./components/form/radio').RadioList,
-  RadioGroup: require('./components/radio-group'),
   RangeSlider: require('./components/range-slider'),
   Row: require('./components/row'),
-  Select: require('./components/select'),
+  Select: require('./components/form/select'),
   SelectCustom: require('./components/select-custom'),
   Tab: require('./components/tabs/tab'),
   Tabs: require('./components/tabs'),
   Toggle: require('./components/toggle'),
   Topology: require('./components/topology'),
   Tooltip: require('./components/tooltip'),
-  Textarea: require('./components/textarea'),
   Widget: require('./components/widget'),
-  BaseElements: require('./components/base-elements'),
+  BaseElements: require('./components/base-elements')
 };

ui/src/shared/is.js

@@ -0,0 +1,9 @@
+const Styled = require('styled-components');
+
+const {
+  css
+} = Styled;
+
+module.exports = (prop) => (...args) => (props) => props[prop]
+  ? css(...args)
+  : css``;

ui/test/index.js

@@ -31,7 +31,7 @@ test('renders <Close> without exploding', (t) => {
 });
 
 test('renders <Checkbox> without exploding', (t) => {
-  const Checkbox = require('../src/components/checkbox');
+  const Checkbox = require('../src/components/form/checkbox');
   const wrapper = shallow(<Checkbox />);
   t.deepEqual(wrapper.length, 1);
 });
@@ -55,7 +55,7 @@ test('renders <Container> without exploding', (t) => {
 // });
 
 test('renders <Radio> without exploding', (t) => {
-  const Radio = require('../src/components/radio');
+  const Radio = require('../src/components/form/radio');
   const wrapper = shallow(<Radio />);
   t.deepEqual(wrapper.length, 1);
 });
@@ -97,7 +97,7 @@ test('renders <Widget> without exploding', (t) => {
 });
 
 test('renders <Input> without exploding', (t) => {
-  const Input = require('../src/components/input');
+  const Input = require('../src/components/form/input');
   const wrapper = shallow(<Input />);
   t.deepEqual(wrapper.length, 1);
 });
@@ -109,7 +109,7 @@ test('renders <RangeSlider> without exploding', (t) => {
 });
 
 test('renders <Select> without exploding', (t) => {
-  const Select = require('../src/components/select');
+  const Select = require('../src/components/form/select');
   const wrapper = shallow(<Select />);
   t.deepEqual(wrapper.length, 1);
 });

ui/yarn.lock

@@ -25,11 +25,12 @@
     babel-plugin-espower "^2.3.2"
     package-hash "^1.2.0"
 
-"@ava/pretty-format@^1.0.0":
+"@ava/pretty-format@^1.1.0":
-  version "1.0.2"
+  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@ava/pretty-format/-/pretty-format-1.0.2.tgz#e3a90465cc014bf542036555e5ec9796031db858"
+  resolved "https://registry.yarnpkg.com/@ava/pretty-format/-/pretty-format-1.1.0.tgz#d0a57d25eb9aeab9643bdd1a030642b91c123e28"
   dependencies:
     ansi-styles "^2.2.1"
+    esutils "^2.0.2"
 
 "@kadira/react-split-pane@^1.4.0":
   version "1.4.7"
@@ -168,8 +169,8 @@ acorn@4.0.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a"
 
 airbnb-js-shims@^1.0.1:
-  version "1.1.0"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/airbnb-js-shims/-/airbnb-js-shims-1.1.0.tgz#9eed2942978cf49ce4c8b7082b075a973b7a07e7"
+  resolved "https://registry.yarnpkg.com/airbnb-js-shims/-/airbnb-js-shims-1.1.1.tgz#27224f0030f244e6570442ed1020772c1434aec2"
   dependencies:
     array-includes "^3.0.2"
     es5-shim "^4.5.9"
@@ -396,14 +397,14 @@ auto-bind@^1.1.0:
   resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-1.1.0.tgz#93b864dc7ee01a326281775d5c75ca0a751e5961"
 
 autoprefixer@^6.0.0, autoprefixer@^6.3.1, autoprefixer@^6.3.7:
-  version "6.7.3"
+  version "6.7.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.3.tgz#bc2c28018e9a226f24f0ded36ce81014dccec817"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.4.tgz#b4405a263325c04a7c2b1c86fc603ad7bbfe01c6"
   dependencies:
-    browserslist "^1.7.2"
+    browserslist "^1.7.4"
-    caniuse-db "^1.0.30000623"
+    caniuse-db "^1.0.30000624"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^5.2.13"
+    postcss "^5.2.14"
     postcss-value-parser "^3.2.3"
 
 ava-init@^0.2.0:
@@ -416,13 +417,13 @@ ava-init@^0.2.0:
     read-pkg-up "^2.0.0"
     write-pkg "^2.0.0"
 
-ava@^0.18.1:
+ava@^0.18.2:
-  version "0.18.1"
+  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/ava/-/ava-0.18.1.tgz#5f47e09642b397aba471e09ffc1e5a59c670a52d"
+  resolved "https://registry.yarnpkg.com/ava/-/ava-0.18.2.tgz#79253d1636077034a2780bb55b5c3e6c3d7f312f"
   dependencies:
     "@ava/babel-preset-stage-4" "^1.0.0"
     "@ava/babel-preset-transform-test-files" "^2.0.0"
-    "@ava/pretty-format" "^1.0.0"
+    "@ava/pretty-format" "^1.1.0"
     arr-flatten "^1.0.1"
     array-union "^1.0.1"
     array-uniq "^1.0.2"
@@ -487,7 +488,7 @@ ava@^0.18.1:
     resolve-cwd "^1.0.0"
     slash "^1.0.0"
     source-map-support "^0.4.0"
-    stack-utils "^0.4.0"
+    stack-utils "^1.0.0"
     strip-ansi "^3.0.1"
     strip-bom-buf "^1.0.0"
     time-require "^0.1.2"
@@ -1421,11 +1422,11 @@ browserify-zlib@^0.1.4:
   dependencies:
     pako "~0.2.0"
 
-browserslist@^1.0.1, browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.2:
+browserslist@^1.0.1, browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.4:
-  version "1.7.3"
+  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.3.tgz#25ead9c917b278ad668b83f39c8025697797b2ab"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.4.tgz#56a12da876f787223743a866224ccd8f97014628"
   dependencies:
-    caniuse-db "^1.0.30000623"
+    caniuse-db "^1.0.30000624"
     electron-to-chromium "^1.2.2"
 
 buf-compare@^1.0.0:
@@ -1496,7 +1497,7 @@ callsites@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca"
 
-camel-case:
+camel-case@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
   dependencies:
@@ -1531,9 +1532,9 @@ caniuse-api@^1.5.2:
     lodash.memoize "^4.1.0"
     lodash.uniq "^4.3.0"
 
-caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000623:
+caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000624:
-  version "1.0.30000623"
+  version "1.0.30000624"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000623.tgz#6e9dc4385d00a8f587efbb23fcbed7916f186e5d"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000624.tgz#554b87547895e36f5fe128f4b7448a2ea5bf2213"
 
 capture-stack-trace@^1.0.0:
   version "1.0.0"
@@ -1590,8 +1591,8 @@ chartjs-color-string@^0.4.0:
     color-name "^1.0.0"
 
 chartjs-color@^2.0.0:
-  version "2.0.0"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.0.0.tgz#7f60c7256589b24914814ece757659117381e35b"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756"
   dependencies:
     chartjs-color-string "^0.4.0"
     color-convert "^0.5.3"
@@ -2210,15 +2211,15 @@ d3-format@1, d3-format@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.0.2.tgz#138618320b4bbeb43b5c0ff30519079fbbd7375e"
 
-d3-geo@1.4.0:
+d3-geo@1.5.0:
-  version "1.4.0"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.4.0.tgz#15e58c414b5bafa1a960eeeb29059c94a60d8408"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.5.0.tgz#cf32c26f61cc5130382f74d40c4d3503dd226a1f"
   dependencies:
     d3-array "1"
 
-d3-hierarchy@1.1.1:
+d3-hierarchy@1.1.2:
-  version "1.1.1"
+  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.1.tgz#6deefccdf19f370dfc77b6538284e953e0e769b3"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.2.tgz#63d168424320fdb4f5c80df458e5bd0d9f2218e6"
 
 d3-interpolate@1, d3-interpolate@1.1.3:
   version "1.1.3"
@@ -2316,9 +2317,9 @@ d3-zoom@1.1.1:
     d3-selection "1"
     d3-transition "1"
 
-d3@^4.5.0:
+d3@^4.6.0:
-  version "4.5.0"
+  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-4.5.0.tgz#b68412b84ace3c18a49fee43be1b212b13a23f97"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-4.6.0.tgz#af2f0ddd00f4cc9737b8b0a565608bf6b787eafc"
   dependencies:
     d3-array "1.0.2"
     d3-axis "1.0.4"
@@ -2332,8 +2333,8 @@ d3@^4.5.0:
     d3-ease "1.0.2"
     d3-force "1.0.4"
     d3-format "1.0.2"
-    d3-geo "1.4.0"
+    d3-geo "1.5.0"
-    d3-hierarchy "1.1.1"
+    d3-hierarchy "1.1.2"
     d3-interpolate "1.1.3"
     d3-path "1.0.3"
     d3-polygon "1.0.2"
@@ -2538,8 +2539,8 @@ dot-prop@^3.0.0:
     is-obj "^1.0.0"
 
 dot-prop@^4.1.0:
-  version "4.1.0"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.0.tgz#eb29eac57dfa31fda1edef50ea462ee3d38ff3ab"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.1.tgz#a8493f0b7b5eeec82525b5c7587fa7de7ca859c1"
   dependencies:
     is-obj "^1.0.0"
 
@@ -2672,6 +2673,10 @@ es5-shim@^4.5.9:
   version "4.5.9"
   resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.5.9.tgz#2a1e2b9e583ff5fed0c20a3ee2cbf3f75230a5c0"
 
+es6-error@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.2.tgz#eec5c726eacef51b7f6b73c20db6e1b13b069c98"
+
 es6-iterator@2:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
@@ -2772,9 +2777,9 @@ eslint-plugin-jsx-a11y@^4.0.0:
     jsx-ast-utils "^1.0.0"
     object-assign "^4.0.1"
 
-eslint-plugin-promise@^3.4.1:
+eslint-plugin-promise@^3.4.2:
-  version "3.4.1"
+  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.4.1.tgz#6911a9010bf84e17d82e19e0ab0f80ab3ad6db4c"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.4.2.tgz#1be2793eafe2d18b5b123b8136c269f804fe7122"
 
 eslint-plugin-react@^6.10.0:
   version "6.10.0"
@@ -2790,9 +2795,9 @@ eslint-plugin-standard@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-2.0.1.tgz#3589699ff9c917f2c25f76a916687f641c369ff3"
 
-eslint@^3.15.0:
+eslint@^3.16.0:
-  version "3.15.0"
+  version "3.16.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.15.0.tgz#bdcc6a6c5ffe08160e7b93c066695362a91e30f2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.16.0.tgz#4a468ab93618a9eb6e3f1499038b38851f828630"
   dependencies:
     babel-code-frame "^6.16.0"
     chalk "^1.1.3"
@@ -2886,6 +2891,10 @@ etag@~1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
 
+etag@~1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
+
 event-emitter@~0.3.4:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
@@ -3141,6 +3150,10 @@ fresh@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
 
+fresh@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.4.0.tgz#475626a934a8d3480b2101a1d6ecef7dafd7c553"
+
 fs-readdir-recursive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
@@ -3150,8 +3163,8 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
 fsevents@^1.0.0:
-  version "1.0.17"
+  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.17.tgz#8537f3f12272678765b4fd6528c0f1f66f8f4558"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.1.tgz#f19fd28f43eeaf761680e519a203c4d0b3d31aff"
   dependencies:
     nan "^2.3.0"
     node-pre-gyp "^0.6.29"
@@ -3284,8 +3297,8 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6:
     path-is-absolute "^1.0.0"
 
 globals@^9.0.0, globals@^9.14.0:
-  version "9.15.0"
+  version "9.16.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.15.0.tgz#7a5d8fd865e69de910b090b15a87772f9423c5de"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.16.0.tgz#63e903658171ec2d9f51b1d31de5e2b8dc01fb80"
 
 globby@^5.0.0:
   version "5.0.0"
@@ -3414,7 +3427,7 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
-hoist-non-react-statics@^1.2.0, hoist-non-react-statics@1.x.x:
+hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0, hoist-non-react-statics@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
 
@@ -3503,8 +3516,8 @@ ignore-by-default@^1.0.0:
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
 ignore@^3.2.0:
-  version "3.2.2"
+  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.2.tgz#1c51e1ef53bab6ddc15db4d9ac4ec139eceb3410"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.4.tgz#4055e03596729a8fabe45a43c100ad5ed815c4e8"
 
 immutable@^3.8.1:
   version "3.8.1"
@@ -3584,7 +3597,7 @@ interpret@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.1.tgz#d579fb7f693b858004947af39fa0db49f795602c"
 
-invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2, invariant@2.x.x:
+invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2, invariant@2.x.x:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -3784,8 +3797,10 @@ is-redirect@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
 
 is-regex@^1.0.3:
-  version "1.0.3"
+  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.3.tgz#0d55182bddf9f2fde278220aec3a75642c908637"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+  dependencies:
+    has "^1.0.1"
 
 is-regexp@^1.0.0:
   version "1.0.0"
@@ -4179,7 +4194,7 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.2.1:
+lodash-es@^4.17.3, lodash-es@^4.2.0, lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
@@ -4315,7 +4330,7 @@ lodash@^3.5.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@4.x.x:
+lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@4.x.x:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -4560,8 +4575,8 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
 nearley@^2.7.7:
-  version "2.7.12"
+  version "2.7.13"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.12.tgz#20f2dc4a46455056edbd5f98e1b292d560e8540b"
+  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.13.tgz#ae19927cc821a4b517de91962db9ed0e90d991fa"
   dependencies:
     nomnom "~1.6.2"
     railroad-diagrams "^1.0.0"
@@ -5219,8 +5234,8 @@ postcss-merge-longhand@^2.0.1:
     postcss "^5.0.4"
 
 postcss-merge-rules@^2.0.3:
-  version "2.1.1"
+  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.1.tgz#5e5640020ce43cddd343c73bba91c9a358d1fe0f"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
   dependencies:
     browserslist "^1.5.2"
     caniuse-api "^1.5.2"
@@ -5400,9 +5415,9 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.18, postcss@^5.0.2, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.13, postcss@^5.2.4, postcss@^5.2.5:
+postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.18, postcss@^5.0.2, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.13, postcss@^5.2.14, postcss@^5.2.4, postcss@^5.2.5:
-  version "5.2.13"
+  version "5.2.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.13.tgz#1be52a32cf2ef58c0d75f1aedb3beabcf257cef3"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.14.tgz#47b4fbde363fd4f81e547f7e0e43d6d300267330"
   dependencies:
     chalk "^1.1.3"
     js-base64 "^2.1.9"
@@ -5559,13 +5574,13 @@ range-parser@^1.0.3, range-parser@~1.2.0:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
 
 rc@^1.0.1, rc@^1.1.6, rc@~1.1.6:
-  version "1.1.6"
+  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea"
   dependencies:
     deep-extend "~0.4.0"
     ini "~1.3.0"
     minimist "^1.2.0"
-    strip-json-comments "~1.0.4"
+    strip-json-comments "~2.0.1"
 
 react-addons-test-utils@^15.4.2:
   version "15.4.2"
@@ -5574,6 +5589,12 @@ react-addons-test-utils@^15.4.2:
     fbjs "^0.8.4"
     object-assign "^4.1.0"
 
+react-broadcast@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/react-broadcast/-/react-broadcast-0.1.2.tgz#950de63578a2af399a396067a617af7402182330"
+  dependencies:
+    invariant "^2.2.1"
+
 react-docgen@^2.12.1:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.13.0.tgz#7fcc4a3104ea8d4fd428383ba38df11166837be9"
@@ -5641,6 +5662,16 @@ react-modal@^1.2.0, react-modal@^1.2.1:
     exenv "1.2.0"
     lodash.assign "^4.2.0"
 
+react-redux@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.2.tgz#3d9878f5f71c6fafcd45de1fbb162ea31f389814"
+  dependencies:
+    hoist-non-react-statics "^1.0.3"
+    invariant "^2.0.0"
+    lodash "^4.2.0"
+    lodash-es "^4.2.0"
+    loose-envify "^1.1.0"
+
 react-router-dom@4.0.0-beta.4:
   version "4.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.0.0-beta.4.tgz#788f26a8cfd2669e6d615380da0ccefb33a941b1"
@@ -5834,6 +5865,18 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-form@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.5.0.tgz#8c75ea77018afbabaa02f1389cf6b0e10787c5b8"
+  dependencies:
+    deep-equal "^1.0.1"
+    es6-error "^4.0.0"
+    hoist-non-react-statics "^1.2.0"
+    invariant "^2.2.2"
+    is-promise "^2.1.0"
+    lodash "^4.17.3"
+    lodash-es "^4.17.3"
+
 redux@^3.5.2:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d"
@@ -5848,8 +5891,8 @@ regenerate@^1.2.1:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
 regenerator-runtime@^0.10.0:
-  version "0.10.1"
+  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
 
 regenerator-runtime@^0.9.5:
   version "0.9.6"
@@ -6016,7 +6059,13 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2:
+rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.4, rimraf@2:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.0.tgz#89b8a0fe432b9ff9ec9a925a00b6cdb3a91bbada"
+  dependencies:
+    glob "^7.0.5"
+
+rimraf@~2.5.1, rimraf@~2.5.4:
   version "2.5.4"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
   dependencies:
@@ -6073,11 +6122,11 @@ send@0.14.2:
     statuses "~1.3.1"
 
 serve-favicon@^2.3.0:
-  version "2.3.2"
+  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.3.2.tgz#dd419e268de012ab72b319d337f2105013f9381f"
+  resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.4.0.tgz#064dcdfdb0f250ae3b148eb18c8bbf3d185e3dd0"
   dependencies:
-    etag "~1.7.0"
+    etag "~1.8.0"
-    fresh "0.3.0"
+    fresh "0.4.0"
     ms "0.7.2"
     parseurl "~1.3.1"
 
@@ -6271,9 +6320,9 @@ st@^1.2.0:
   optionalDependencies:
     graceful-fs "~4.1.4"
 
-stack-utils@^0.4.0:
+stack-utils@^1.0.0:
-  version "0.4.0"
+  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-0.4.0.tgz#940cb82fccfa84e8ff2f3fdf293fe78016beccd1"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.0.tgz#2392cd8ddbd222492ed6c047960f7414b46c0f83"
 
 "statuses@>= 1.3.1 < 2", statuses@~1.3.1:
   version "1.3.1"
@@ -6382,10 +6431,6 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91"
-
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -6440,9 +6485,9 @@ stylelint-processor-styled-components@^0.0.4:
     babel-traverse "^6.16.0"
     babylon "^6.12.0"
 
-stylelint@^7.8.0:
+stylelint@^7.9.0:
-  version "7.8.0"
+  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-7.8.0.tgz#ac701044ed03c44f7a9f73d4d5dc1bd1eaae12d1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-7.9.0.tgz#b8d9ea20f887ab351075c6aded9528de24509327"
   dependencies:
     autoprefixer "^6.0.0"
     balanced-match "^0.4.0"
@@ -6457,7 +6502,7 @@ stylelint@^7.8.0:
     html-tags "^1.1.1"
     ignore "^3.2.0"
     known-css-properties "^0.0.6"
-    lodash "^4.0.0"
+    lodash "^4.17.4"
     log-symbols "^1.0.2"
     meow "^3.3.0"
     micromatch "^2.3.11"
@@ -6933,8 +6978,8 @@ webpack-core@~0.6.9:
     source-map "~0.4.1"
 
 webpack-dev-middleware@^1.6.0:
-  version "1.10.0"
+  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.0.tgz#7d5be2651e692fddfafd8aaed177c16ff51f0eb8"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"
@@ -6981,8 +7026,8 @@ whatwg-fetch@>=0.10.0:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
 
 whatwg-url@^4.3.0:
-  version "4.3.0"
+  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.3.0.tgz#92aaee21f4f2a642074357d70ef8500a7cbb171a"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.4.0.tgz#594f95781545c13934a62db40897c818cafa2e04"
   dependencies:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"

yarn.lock

@@ -1,5 +1,7 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
+
+
 abbrev@1:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
@@ -114,6 +116,10 @@ escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
+eslint-plugin-babel@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-4.0.1.tgz#77de74dabd67a6bef3b16bf258f5804e971e7349"
+
 esprima@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
@@ -172,7 +178,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@~2.0.1, inherits@2:
+inherits@2, inherits@~2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
@@ -462,4 +468,3 @@ xmlbuilder@~4.1.0:
 xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
-