feat(Formbot): support for yup via validationSchema; Add Context provider and EasyInput consumer

package.json

@@ -28,7 +28,6 @@
     "release": "standard-version && git push --follow-tags"
   },
   "dependencies": {
-    "lodash": "^4.17.11",
     "mitt": "^1.1.3",
     "polished": "^2.0.0",
     "popper.js": "^1.14.7",
@@ -73,7 +72,8 @@
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-filesize": "^6.0.1",
     "standard-version": "^5.0.0",
-    "styled-components": "^4.1.3"
+    "styled-components": "^4.1.3",
+    "yup": "^0.26.10"
   },
   "resolutions": {
     "babel-core": "^7.0.0-bridge.0"

src/Form/Fieldset.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Box from '../Box';
+import styled, { css } from 'styled-components';
+import { createComponent } from '../utils';
+
+const Legend = createComponent({
+  name: 'Legend',
+  tag: 'legend',
+  style: ({
+    theme,
+    color = theme.colors.primary,
+  }) => css`
+    font-weight: 700;
+    margin-bottom: 1rem;
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.25px;
+    color: ${color};
+  `,
+});
+
+const Container = styled.fieldset`
+  border: 0;
+  padding: 0;
+  margin: 0;
+
+  * + & {
+    margin-top: 1.5rem;
+  }
+`;
+
+const Fieldset = ({ legend, children }) => (
+  <Container>
+    {legend && <Legend>{legend}</Legend>}
+
+    {children}
+  </Container>
+);
+
+export default Fieldset;
+

src/Form/Formbot.example.js

@@ -4,6 +4,7 @@ import Select from './Select';
 import Formbot from './Formbot';
 import Button from '../Button';
 import FormGroup from './FormGroup';
+import Fieldset from './Fieldset';
 import CheckboxGroup from './CheckboxGroup';
 import RadioGroup from './RadioGroup';
 import Switch from './Switch';
@@ -41,6 +42,11 @@ const radioValues = [
 export default function() {
   return (
     <Formbot
+      initialValues={{
+        name: '',
+        email: '',
+        message: '',
+      }}
       validations={{
         name: val => {
           if (val !== 'Bob') {
@@ -68,7 +74,7 @@ export default function() {
       }}>
       {({ values, onSubmit, onChange, errors, onBlur }) => (
         <form onSubmit={onSubmit}>
-          <FormGroup>
+          <Fieldset legend="Some Fields">
             <Input
               onBlur={onBlur}
               error={errors.name}
@@ -78,8 +84,6 @@ export default function() {
               placeholder="Name"
               label="Name"
             />
-          </FormGroup>
-          <FormGroup>
             <Input
               onBlur={onBlur}
               error={errors.email}
@@ -89,8 +93,8 @@ export default function() {
               placeholder="Email"
               label="Email"
             />
-          </FormGroup>
-          <FormGroup>
+          </Fieldset>
+          <Fieldset legend="More Fields">
             <Select
               onBlur={onBlur}
               error={errors.gender}
@@ -102,11 +106,10 @@ export default function() {
               name="gender"
               placeholder="Select a Gender"
             />
-          </FormGroup>
-          <FormGroup>
             <Input
               onBlur={onBlur}
               onChange={onChange}
+              value={values.message}
               error={errors.message}
               name="message"
               multiline
@@ -115,28 +118,26 @@ export default function() {
               placeholder="Your Message"
               label="Write a Message"
             />
-          </FormGroup>
-          <FormGroup>
-            <CheckboxGroup
-              error={errors.checkboxes}
-              value={values.checkboxes}
-              name="checkboxes"
-              id="checkboxes"
-              onChange={onChange}
-              choices={checkboxValues}
-            />
-          </FormGroup>
-          <FormGroup>
-            <RadioGroup
-              error={errors.radioGroup}
-              name="radioGroup"
-              horizontal
-              value={values.radio}
-              id="radio"
-              onChange={onChange}
-              choices={radioValues}
-            />
-          </FormGroup>
+            <FormGroup>
+              <CheckboxGroup
+                error={errors.checkboxes}
+                value={values.checkboxes}
+                name="checkboxes"
+                id="checkboxes"
+                onChange={onChange}
+                choices={checkboxValues}
+              />
+              <RadioGroup
+                error={errors.radioGroup}
+                name="radioGroup"
+                horizontal
+                value={values.radio}
+                id="radio"
+                onChange={onChange}
+                choices={radioValues}
+              />
+            </FormGroup>
+          </Fieldset>
           <FormGroup>
             <Switch name="switch1" id="switch1" onChange={onChange} toggled={values.switch1} />
           </FormGroup>

src/Form/Formbot.js

@@ -23,9 +23,8 @@ const VALIDATIONS = {
 export default class Formbot extends React.Component {
   static propTypes = {
     initialValues: PropTypes.shape(),
-    validations: PropTypes.shape({
-      fieldName: PropTypes.oneOfType([PropTypes.func, PropTypes.shape()]),
-    }),
+    validations: PropTypes.object,
+    validationSchema: PropTypes.object,
     onFocus: PropTypes.func,
     onChange: PropTypes.func,
     onBlur: PropTypes.func,
@@ -35,6 +34,7 @@ export default class Formbot extends React.Component {
   static defaultProps = {
     initialValues: {},
     validations: {},
+    validationSchema: null,
     onFocus() {},
     onChange() {},
     onBlur() {},
@@ -47,8 +47,12 @@ export default class Formbot extends React.Component {
     errors: {},
   };
 
+  get validatableFields() {
+    return Object.keys(this.props.validationSchema || this.props.validations || {});
+  }
+
   get validatable() {
-    return Object.keys(this.props.validations);
+    return !!this.validatableFields.length;
   }
 
   get isValid() {
@@ -110,15 +114,27 @@ export default class Formbot extends React.Component {
 
   validateField(field) {
     return new Promise(resolve => {
-      const validation = this.props.validations[field];
+      const fieldState = this.state.fields[field] || {};
+      if (fieldState.validated) {
+        resolve();
+        return;
+      }
 
-      if (!validation) return;
+      const fromSchema = !!this.props.validationSchema;
+      const validation = (fromSchema ? this.props.validationSchema : this.props.validations)[field];
+
+      if (!validation) {
+        resolve();
+        return;
+      }
 
       const fieldValue = this.state.values[field];
       let errorMsg;
 
       try {
-        if (typeof validation === 'function') {
+        if (fromSchema) {
+          validation.validateSync(fieldValue, { values: this.state.values });
+        } else if (typeof validation === 'function') {
           validation(fieldValue);
         } else {
           Object.keys(validation).forEach(method => {
@@ -132,7 +148,11 @@ export default class Formbot extends React.Component {
           });
         }
       } catch (err) {
-        errorMsg = err.message;
+        if (fromSchema) {
+          errorMsg = err.errors.length ? err.errors[0] : undefined;
+        } else {
+          errorMsg = err.message;
+        }
       } finally {
         this.updateField(field, { validated: true }).then(() => {
           this.setState(
@@ -151,7 +171,7 @@ export default class Formbot extends React.Component {
 
   validateAllFields() {
     return Promise.all(
-      this.validatable.map(field => this.updateField(field, {}).then(() => this.validateField(field)))
+      this.validatableFields.map(field => this.updateField(field, {}).then(() => this.validateField(field)))
     );
   }
 

src/Form/Formbot.mdx

@@ -4,6 +4,7 @@ name: Formbot
 ---
 
 import { Playground, PropsTable } from 'docz'
+import * as yup from 'yup';
 import FormExample from './Formbot.example'
 import Formbot from './Formbot'
 import Button from '../Button'
@@ -22,11 +23,12 @@ Quickly build a form using a Formbot and pre-configured form components. Formbot
 
 ### Formbot
 <Playground>
-   <Formbot
-    validations={{
-      name: {
-        minLength: 4,
-      },
+  <Formbot
+    initialValues={{
+      name: '',
+    }}
+    validationSchema={{
+      name: yup.string().required().min(4),
     }}>
     {({ values, onSubmit, onChange, errors, onBlur }) => (
       <form onSubmit={onSubmit}>

src/index.js

@@ -12,6 +12,7 @@ export Column from './Grid/Column';
 export Container from './Grid/Container';
 export Dropdown from './Dropdown';
 export Field from './Form/Field';
+export Fieldset from './Form/Fieldset';
 export Flex from './Flex';
 export Formbot from './Form/Formbot';
 export FormError from './Form/FormError';