From 3866c073f840e3184ce304a4568b057b46b1a21f Mon Sep 17 00:00:00 2001
From: Chathan Driehuys <chathan@driehuys.com>
Date: Fri, 13 Oct 2017 15:52:29 -0400
Subject: [PATCH 1/3] Add custom form input component.

---
 src/components/Input.jsx                      | 20 ++++++++++
 src/components/RegistrationForm.jsx           |  5 ++-
 src/components/__tests__/Input.spec.jsx       | 39 +++++++++++++++++++
 .../__tests__/RegistrationForm.spec.jsx       |  4 +-
 4 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Input.jsx
 create mode 100644 src/components/__tests__/Input.spec.jsx

diff --git a/src/components/Input.jsx b/src/components/Input.jsx
new file mode 100644
index 0000000..acc616f
--- /dev/null
+++ b/src/components/Input.jsx
@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+
+/**
+ * Component for accepting text input.
+ *
+ * @param {string} props.name The name to give the input field.
+ * @param {...object} [props.extraProps] Any additional props to pass to the input field.
+ */
+const Input = ({ ...extraProps }) => (
+  <input {...extraProps} />
+);
+
+Input.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+
+export default Input;
diff --git a/src/components/RegistrationForm.jsx b/src/components/RegistrationForm.jsx
index 76c2f69..e29208c 100644
--- a/src/components/RegistrationForm.jsx
+++ b/src/components/RegistrationForm.jsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { register } from '../actionCreators';
+import Input from './Input';
 import { getRegistrationComplete, getRegistrationErrors, getRegistrationLoading } from '../selectors';
 
 
@@ -40,7 +41,7 @@ export class RegistrationForm extends React.Component {
     return (
       <form onSubmit={this.handleSubmit}>
         <label htmlFor="email">Email:</label>
-        <input
+        <Input
           disabled={this.props.isLoading}
           id="email"
           name="email"
@@ -54,7 +55,7 @@ export class RegistrationForm extends React.Component {
         </ul>
 
         <label htmlFor="password">Password:</label>
-        <input
+        <Input
           disabled={this.props.isLoading}
           id="password"
           name="password"
diff --git a/src/components/__tests__/Input.spec.jsx b/src/components/__tests__/Input.spec.jsx
new file mode 100644
index 0000000..e1bab62
--- /dev/null
+++ b/src/components/__tests__/Input.spec.jsx
@@ -0,0 +1,39 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import Input from '../Input';
+
+
+const setup = ({ name = 'foo', ...rest } = {}) => {
+  const props = {
+    ...rest,
+    name,
+  };
+  const wrapper = shallow(<Input {...props} />);
+
+  return {
+    props,
+    wrapper,
+  };
+};
+
+
+describe('Input Component', () => {
+  it('should render a standard text input', () => {
+    const { props, wrapper } = setup();
+    const input = wrapper.find('input');
+
+    expect(input).toHaveLength(1);
+    expect(input.prop('name')).toBe(props.name);
+  });
+
+  it('should render any additional props passed to it', () => {
+    const extraProps = { foo: 'bar', bar: 'baz' };
+    const { wrapper } = setup(extraProps);
+    const input = wrapper.find('input');
+
+    Object.keys(extraProps).forEach((key) => {
+      expect(input.prop(key)).toBe(extraProps[key]);
+    });
+  });
+});
diff --git a/src/components/__tests__/RegistrationForm.spec.jsx b/src/components/__tests__/RegistrationForm.spec.jsx
index c083934..ac25971 100644
--- a/src/components/__tests__/RegistrationForm.spec.jsx
+++ b/src/components/__tests__/RegistrationForm.spec.jsx
@@ -101,7 +101,7 @@ describe('RegistrationForm', () => {
   describe('input handlers', () => {
     it('should have a handler to update email state', () => {
       const { wrapper } = setup();
-      const emailWrapper = wrapper.find('input[name="email"]');
+      const emailWrapper = wrapper.find('Input[name="email"]');
 
       const newEmail = 'test@example.com';
 
@@ -117,7 +117,7 @@ describe('RegistrationForm', () => {
 
     it('should have a handler to update password state', () => {
       const { wrapper } = setup();
-      const passwordWrapper = wrapper.find('input[name="password"]');
+      const passwordWrapper = wrapper.find('Input[name="password"]');
 
       const newPassword = 'password';
 

From ec850a102ad5d99cfff16e4a0301e9910afa2492 Mon Sep 17 00:00:00 2001
From: Chathan Driehuys <chathan@driehuys.com>
Date: Fri, 13 Oct 2017 17:08:42 -0400
Subject: [PATCH 2/3] Add form field component.

A field encapsulates a label and text input for a form.
---
 src/components/Field.jsx                      | 43 ++++++++++
 src/components/Input.jsx                      |  4 +-
 src/components/RegistrationForm.jsx           | 27 ++----
 src/components/__tests__/Field.spec.jsx       | 85 +++++++++++++++++++
 .../__tests__/RegistrationForm.spec.jsx       | 73 +++++++---------
 5 files changed, 170 insertions(+), 62 deletions(-)
 create mode 100644 src/components/Field.jsx
 create mode 100644 src/components/__tests__/Field.spec.jsx

diff --git a/src/components/Field.jsx b/src/components/Field.jsx
new file mode 100644
index 0000000..86745f9
--- /dev/null
+++ b/src/components/Field.jsx
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Input from './Input';
+
+
+/**
+ * A wrapper around a form input and label.
+ *
+ * @param {string} props.label A descriptive label for the field.
+ * @param {string} props.name The input field's name.
+ * @param {string[]} [props.errors] A list of errors for the field.
+ * @param {string} [props.id] The ID to give the input. Defaults to the input's name.
+ * @param {...object} [props.extraProps] Additional props to pass to the input component.
+ */
+const Field = ({ errors, id, label, name, ...extraProps }) => (
+  <div>
+    <label htmlFor={id || name}>{label}</label>
+    <Input id={id || name} name={name} {...extraProps} />
+    {errors.length > 0 && (
+      <ul>
+        {errors.map(error => (
+          <li key={error}>{error}</li>
+        ))}
+      </ul>
+    )}
+  </div>
+);
+
+Field.defaultProps = {
+  errors: [],
+  id: '',
+};
+
+Field.propTypes = {
+  errors: PropTypes.arrayOf(PropTypes.string),
+  id: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+
+export default Field;
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
index acc616f..8f21db4 100644
--- a/src/components/Input.jsx
+++ b/src/components/Input.jsx
@@ -8,8 +8,8 @@ import React from 'react';
  * @param {string} props.name The name to give the input field.
  * @param {...object} [props.extraProps] Any additional props to pass to the input field.
  */
-const Input = ({ ...extraProps }) => (
-  <input {...extraProps} />
+const Input = ({ name, ...extraProps }) => (
+  <input name={name} {...extraProps} />
 );
 
 Input.propTypes = {
diff --git a/src/components/RegistrationForm.jsx b/src/components/RegistrationForm.jsx
index e29208c..5cd0544 100644
--- a/src/components/RegistrationForm.jsx
+++ b/src/components/RegistrationForm.jsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
 import { register } from '../actionCreators';
-import Input from './Input';
+import Field from './Field';
 import { getRegistrationComplete, getRegistrationErrors, getRegistrationLoading } from '../selectors';
 
 
@@ -40,33 +40,24 @@ export class RegistrationForm extends React.Component {
 
     return (
       <form onSubmit={this.handleSubmit}>
-        <label htmlFor="email">Email:</label>
-        <Input
+        <Field
           disabled={this.props.isLoading}
-          id="email"
+          errors={this.props.errors.email}
+          label="Email"
           name="email"
           onChange={this.handleInputChange}
           type="email"
         />
-        <ul>
-          {this.props.errors.email && this.props.errors.email.map(error => (
-            <li key={error}>{error}</li>
-          ))}
-        </ul>
-
-        <label htmlFor="password">Password:</label>
-        <Input
+
+        <Field
           disabled={this.props.isLoading}
+          errors={this.props.errors.password}
           id="password"
+          label="Password"
           name="password"
           onChange={this.handleInputChange}
           type="password"
         />
-        <ul>
-          {this.props.errors.password && this.props.errors.password.map(error => (
-            <li key={error}>{error}</li>
-          ))}
-        </ul>
 
         <button
           disabled={this.props.isLoading}
@@ -88,7 +79,7 @@ RegistrationForm.defaultProps = {
 RegistrationForm.propTypes = {
   errors: PropTypes.shape({
     email: PropTypes.arrayOf(PropTypes.string),
-    non_field_erros: PropTypes.arrayOf(PropTypes.string),
+    non_field_errors: PropTypes.arrayOf(PropTypes.string),
     password: PropTypes.arrayOf(PropTypes.string),
   }),
   isComplete: PropTypes.bool,
diff --git a/src/components/__tests__/Field.spec.jsx b/src/components/__tests__/Field.spec.jsx
new file mode 100644
index 0000000..10320c8
--- /dev/null
+++ b/src/components/__tests__/Field.spec.jsx
@@ -0,0 +1,85 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import Field from '../Field';
+
+
+const setup = ({ label = 'Foo', name = 'foo', ...rest } = {}) => {
+  const props = {
+    ...rest,
+    label,
+    name,
+  };
+  const wrapper = shallow(<Field {...props} />);
+
+  return {
+    props,
+    wrapper,
+  };
+};
+
+
+describe('Field Component', () => {
+  it('should render a label', () => {
+    const { props, wrapper } = setup();
+    const label = wrapper.find('label');
+
+    expect(label.text()).toBe(props.label);
+  });
+
+  it('should render an Input', () => {
+    const { props, wrapper } = setup();
+    const input = wrapper.find('Input');
+
+    expect(input.prop('name')).toBe(props.name);
+  });
+
+  it('should pass any extra props to the Input component', () => {
+    const extraProps = { foo: 'bar', bar: 'baz' };
+    const { wrapper } = setup(extraProps);
+    const input = wrapper.find('Input');
+
+    expect(input.props()).toMatchObject(extraProps);
+  });
+
+  it('should provide a default ID equivalent to the given name', () => {
+    const { props, wrapper } = setup();
+    const input = wrapper.find('Input');
+    const label = wrapper.find('label');
+
+    expect(input.prop('id')).toBe(props.name);
+    expect(label.prop('htmlFor')).toBe(props.name);
+  });
+
+  it('should accept an ID and use it for the label and input', () => {
+    const id = 'custom-id';
+    const { wrapper } = setup({ id });
+    const input = wrapper.find('Input');
+    const label = wrapper.find('label');
+
+    expect(input.prop('id')).toBe(id);
+    expect(label.prop('htmlFor')).toBe(id);
+  });
+
+  describe('Error Rendering', () => {
+    it('should not render an error list with no errors', () => {
+      const { wrapper } = setup();
+      const errorList = wrapper.find('ul');
+
+      expect(errorList).toHaveLength(0);
+    });
+
+    it('should map each error to a list item', () => {
+      const errors = ['Error 1', 'Error 2', 'Another error'];
+      const { wrapper } = setup({ errors });
+      const errorList = wrapper.find('ul');
+
+      expect(errorList).toHaveLength(1);
+
+      errors.forEach((error) => {
+        const node = errorList.findWhere(n => n.key() === error);
+        expect(node.text()).toBe(error);
+      });
+    });
+  });
+});
diff --git a/src/components/__tests__/RegistrationForm.spec.jsx b/src/components/__tests__/RegistrationForm.spec.jsx
index ac25971..4412a8a 100644
--- a/src/components/__tests__/RegistrationForm.spec.jsx
+++ b/src/components/__tests__/RegistrationForm.spec.jsx
@@ -43,17 +43,16 @@ describe('RegistrationForm', () => {
     expect(wrapper.state('password')).toBe('');
   });
 
-  it('should call its onSubmit prop when submitted', () => {
-    const userData = { email: 'test@example.com', password: 'password' };
-    const { props, wrapper } = setup();
-    wrapper.instance().state = userData;
-
-    const mockEvent = { preventDefault: jest.fn() };
+  it('should render an email and password field', () => {
+    const { wrapper } = setup();
+    const email = wrapper.find('Field[name="email"]');
+    const password = wrapper.find('Field[name="password"]');
 
-    wrapper.simulate('submit', mockEvent);
+    expect(email.prop('onChange')).toBe(wrapper.instance().handleInputChange);
+    expect(email.prop('type')).toBe('email');
 
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(props.onSubmit).toHaveBeenCalledWith(userData);
+    expect(password.prop('onChange')).toBe(wrapper.instance().handleInputChange);
+    expect(password.prop('type')).toBe('password');
   });
 
   it('should render any provided errors', () => {
@@ -63,17 +62,11 @@ describe('RegistrationForm', () => {
 
     const { wrapper } = setup({ errors });
 
-    const findErrors = (errorList) => {
-      errorList.forEach((error) => {
-        const errorWrapper = wrapper.findWhere(n => n.key() === error);
-
-        expect(errorWrapper).toHaveLength(1);
-        expect(errorWrapper.text()).toBe(error);
-      });
-    };
+    Object.keys(errors).forEach((field) => {
+      const fieldComponent = wrapper.find(`Field[name="${field}"]`);
 
-    findErrors(emailError);
-    findErrors(passwordError);
+      expect(fieldComponent.prop('errors')).toEqual(errors[field]);
+    });
   });
 
   it('should redirect to the dashboard if complete', () => {
@@ -88,7 +81,7 @@ describe('RegistrationForm', () => {
     const { wrapper } = setup({ isLoading: true });
 
     // All inputs should be disabled
-    wrapper.find('input').forEach((node) => {
+    wrapper.find('Field').forEach((node) => {
       expect(node.prop('disabled')).toBe(true);
     });
 
@@ -98,41 +91,37 @@ describe('RegistrationForm', () => {
     });
   });
 
-  describe('input handlers', () => {
-    it('should have a handler to update email state', () => {
+  describe('Event Handlers', () => {
+    it('should update its state when an input changes', () => {
       const { wrapper } = setup();
-      const emailWrapper = wrapper.find('Input[name="email"]');
-
-      const newEmail = 'test@example.com';
 
-      emailWrapper.simulate('change', {
+      const mockChange = {
         target: {
-          name: 'email',
-          value: newEmail,
+          name: 'foo',
+          value: 'bar',
         },
-      });
+      };
 
-      expect(wrapper.state('email')).toBe(newEmail);
+      wrapper.instance().handleInputChange(mockChange);
+
+      expect(wrapper.state(mockChange.target.name)).toBe(mockChange.target.value);
     });
 
-    it('should have a handler to update password state', () => {
-      const { wrapper } = setup();
-      const passwordWrapper = wrapper.find('Input[name="password"]');
+    it('should call its onSubmit prop when submitted', () => {
+      const userData = { email: 'test@example.com', password: 'password' };
+      const { props, wrapper } = setup();
+      wrapper.instance().state = userData;
 
-      const newPassword = 'password';
+      const mockEvent = { preventDefault: jest.fn() };
 
-      passwordWrapper.simulate('change', {
-        target: {
-          name: 'password',
-          value: newPassword,
-        },
-      });
+      wrapper.simulate('submit', mockEvent);
 
-      expect(wrapper.state('password')).toBe(newPassword);
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+      expect(props.onSubmit).toHaveBeenCalledWith(userData);
     });
   });
 
-  describe('redux connections', () => {
+  describe('Redux Connections', () => {
     describe('mapStateToProps', () => {
       it('should pass any form errors from state as props', () => {
         const errors = { email: ['Invalid email.'] };

From 371addcfcd43ecefc1f13607e0cba50835992d05 Mon Sep 17 00:00:00 2001
From: Chathan Driehuys <chathan@driehuys.com>
Date: Fri, 13 Oct 2017 19:54:38 -0400
Subject: [PATCH 3/3] Add styles for form inputs.

---
 package.json                            |  3 +-
 src/components/Field.jsx                | 10 +++-
 src/components/Input.jsx                | 17 ++++++-
 src/components/RegistrationForm.jsx     |  1 +
 src/components/__tests__/Field.spec.jsx | 10 ++--
 src/components/__tests__/Input.spec.jsx |  6 +--
 yarn.lock                               | 63 ++++++++++++++++++++++++-
 7 files changed, 97 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 2b261e7..209b559 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,8 @@
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.2.0"
+    "redux-thunk": "^2.2.0",
+    "styled-components": "^2.2.1"
   },
   "jest": {
     "collectCoverage": true,
diff --git a/src/components/Field.jsx b/src/components/Field.jsx
index 86745f9..0b24e2f 100644
--- a/src/components/Field.jsx
+++ b/src/components/Field.jsx
@@ -1,9 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'styled-components';
 
 import Input from './Input';
 
 
+export const StyledLabel = styled.label`
+  display: block;
+  font-weight: bold;
+  line-height: 1.618;
+`;
+
+
 /**
  * A wrapper around a form input and label.
  *
@@ -15,7 +23,7 @@ import Input from './Input';
  */
 const Field = ({ errors, id, label, name, ...extraProps }) => (
   <div>
-    <label htmlFor={id || name}>{label}</label>
+    <StyledLabel htmlFor={id || name}>{label}</StyledLabel>
     <Input id={id || name} name={name} {...extraProps} />
     {errors.length > 0 && (
       <ul>
diff --git a/src/components/Input.jsx b/src/components/Input.jsx
index 8f21db4..9ef6adf 100644
--- a/src/components/Input.jsx
+++ b/src/components/Input.jsx
@@ -1,5 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'styled-components';
+
+
+export const StyledInput = styled.input`
+  border: 1px solid #e2e2e2;
+  border-radius: 3px;
+  display: block;
+  padding: .5em;
+  width: 100%;
+
+  &:focus {
+    border-color: #b7eaff;
+    outline: none;
+  }
+`;
 
 
 /**
@@ -9,7 +24,7 @@ import React from 'react';
  * @param {...object} [props.extraProps] Any additional props to pass to the input field.
  */
 const Input = ({ name, ...extraProps }) => (
-  <input name={name} {...extraProps} />
+  <StyledInput name={name} {...extraProps} />
 );
 
 Input.propTypes = {
diff --git a/src/components/RegistrationForm.jsx b/src/components/RegistrationForm.jsx
index 5cd0544..8b0ccaa 100644
--- a/src/components/RegistrationForm.jsx
+++ b/src/components/RegistrationForm.jsx
@@ -46,6 +46,7 @@ export class RegistrationForm extends React.Component {
           label="Email"
           name="email"
           onChange={this.handleInputChange}
+          placeholder="test@example.com"
           type="email"
         />
 
diff --git a/src/components/__tests__/Field.spec.jsx b/src/components/__tests__/Field.spec.jsx
index 10320c8..617a2b3 100644
--- a/src/components/__tests__/Field.spec.jsx
+++ b/src/components/__tests__/Field.spec.jsx
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import Field from '../Field';
+import Field, { StyledLabel } from '../Field';
 
 
 const setup = ({ label = 'Foo', name = 'foo', ...rest } = {}) => {
@@ -22,9 +22,9 @@ const setup = ({ label = 'Foo', name = 'foo', ...rest } = {}) => {
 describe('Field Component', () => {
   it('should render a label', () => {
     const { props, wrapper } = setup();
-    const label = wrapper.find('label');
+    const label = wrapper.find(StyledLabel);
 
-    expect(label.text()).toBe(props.label);
+    expect(label.children().text()).toBe(props.label);
   });
 
   it('should render an Input', () => {
@@ -45,7 +45,7 @@ describe('Field Component', () => {
   it('should provide a default ID equivalent to the given name', () => {
     const { props, wrapper } = setup();
     const input = wrapper.find('Input');
-    const label = wrapper.find('label');
+    const label = wrapper.find(StyledLabel);
 
     expect(input.prop('id')).toBe(props.name);
     expect(label.prop('htmlFor')).toBe(props.name);
@@ -55,7 +55,7 @@ describe('Field Component', () => {
     const id = 'custom-id';
     const { wrapper } = setup({ id });
     const input = wrapper.find('Input');
-    const label = wrapper.find('label');
+    const label = wrapper.find(StyledLabel);
 
     expect(input.prop('id')).toBe(id);
     expect(label.prop('htmlFor')).toBe(id);
diff --git a/src/components/__tests__/Input.spec.jsx b/src/components/__tests__/Input.spec.jsx
index e1bab62..a44bea2 100644
--- a/src/components/__tests__/Input.spec.jsx
+++ b/src/components/__tests__/Input.spec.jsx
@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import Input from '../Input';
+import Input, { StyledInput } from '../Input';
 
 
 const setup = ({ name = 'foo', ...rest } = {}) => {
@@ -21,7 +21,7 @@ const setup = ({ name = 'foo', ...rest } = {}) => {
 describe('Input Component', () => {
   it('should render a standard text input', () => {
     const { props, wrapper } = setup();
-    const input = wrapper.find('input');
+    const input = wrapper.find(StyledInput);
 
     expect(input).toHaveLength(1);
     expect(input.prop('name')).toBe(props.name);
@@ -30,7 +30,7 @@ describe('Input Component', () => {
   it('should render any additional props passed to it', () => {
     const extraProps = { foo: 'bar', bar: 'baz' };
     const { wrapper } = setup(extraProps);
-    const input = wrapper.find('input');
+    const input = wrapper.find(StyledInput);
 
     Object.keys(extraProps).forEach((key) => {
       expect(input.prop(key)).toBe(extraProps[key]);
diff --git a/yarn.lock b/yarn.lock
index ef72d34..9eb9191 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1060,6 +1060,13 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+buffer@^5.0.3:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
+  dependencies:
+    base64-js "^1.0.2"
+    ieee754 "^1.1.4"
+
 builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -1424,6 +1431,10 @@ crypto-browserify@^3.11.0:
     public-encrypt "^4.0.0"
     randombytes "^2.0.0"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+
 css-select@^1.1.0, css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -1433,6 +1444,14 @@ css-select@^1.1.0, css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
+css-to-react-native@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
+  dependencies:
+    css-color-keywords "^1.0.0"
+    fbjs "^0.8.5"
+    postcss-value-parser "^3.3.0"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -2197,7 +2216,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.16:
+fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -2593,6 +2612,10 @@ hoek@4.x.x:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
 hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
@@ -2896,6 +2919,10 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
+is-function@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -2936,6 +2963,12 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
+is-plain-object@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -3002,6 +3035,10 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
@@ -4188,6 +4225,10 @@ portfinder@^1.0.9:
     debug "^2.2.0"
     mkdirp "0.5.x"
 
+postcss-value-parser@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -5050,11 +5091,29 @@ 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"
 
+styled-components@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.1.tgz#f4835f1001c37bcc301ac3865b5d93466de4dd5b"
+  dependencies:
+    buffer "^5.0.3"
+    css-to-react-native "^2.0.3"
+    fbjs "^0.8.9"
+    hoist-non-react-statics "^1.2.0"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    prop-types "^15.5.4"
+    stylis "^3.2.1"
+    supports-color "^3.2.3"
+
+stylis@^3.2.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.3.2.tgz#95ef285836e98243f8b8f64a9a72706ea6c893ea"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.2:
+supports-color@^3.1.2, supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies: