From bc63adf5c681e13fe09e1c40e1e2741e08031da2 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Tue, 18 Jul 2017 15:58:51 -0700
Subject: [PATCH 01/10] Detailed formatting of arrayOf, shape, oneOf

---
 addons/info/src/components/PropTable.js | 145 ++++++++++++++++++------
 1 file changed, 109 insertions(+), 36 deletions(-)

diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
index fbd3f0780b85..477974b2b726 100644
--- a/addons/info/src/components/PropTable.js
+++ b/addons/info/src/components/PropTable.js
@@ -14,15 +14,97 @@ Object.keys(PropTypes).forEach(typeName => {
 });
 
 const stylesheet = {
+  hasProperty: {
+    marginLeft: 10
+  },
+  code: {
+    fontFamily: 'Monaco, Consolas, "Courier New", monospace'
+  },
+  block: {
+    display: 'block'
+  },
   propTable: {
-    marginLeft: -10,
-    borderSpacing: '10px 5px',
-    borderCollapse: 'separate',
+    marginTop: 10,
+    borderCollapse: 'collapse'
   },
+  propTableCell: {
+    border: '1px solid #ccc',
+    padding: '2px 6px'
+  }
+};
+
+const formatType = ({propType, type, property, required}) => {
+  let result;
+
+  if (type) {
+    const PropertyLabel =
+      property &&
+      <span style={stylesheet.hasProperty}>
+        {property}:{' '}
+      </span>;
+
+    if (propType === 'other') {
+      return (result = type.name);
+    } else if (type && propType === 'arrayOf') {
+      return (
+        <span style={property ? {...stylesheet.block, ...stylesheet.hasProperty} : {}}>
+          {PropertyLabel}
+          <span>[</span>
+          <span>
+            {formatType({
+              parentType: propType,
+              type: type.value,
+              propType: type.value.name
+            })}
+          </span>
+          <span>]</span>
+        </span>
+      );
+    } else if (propType === 'enum') {
+      return (
+        <div>
+          {type.value.map(({value}) => value).join(' | ')}
+        </div>
+      );
+    } else if (propType === 'shape') {
+      const values = Object.keys(type.value).map(property =>
+        formatType({
+          property,
+          parentType: propType,
+          type: type.value[property],
+          propType: type.value[property].name,
+          required: type.value[property].required
+        })
+      );
+
+      return (
+        <span style={property ? {...stylesheet.block, ...stylesheet.hasProperty} : {}}>
+          {PropertyLabel}
+          <span>
+            {'{'}
+          </span>
+          {values.map(value =>
+            <span>
+              {value}
+            </span>
+          )}
+          <span>
+            {'}'}
+          </span>
+        </span>
+      );
+    }
+  }
+
+  return (
+    <div style={property ? stylesheet.hasProperty : {}}>
+      {property ? `  ${property}${required ? '' : '?'}: ${propType},` : propType}
+    </div>
+  );
 };
 
 export default function PropTable(props) {
-  const { type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength } = props;
+  const {type, maxPropObjectKeys, maxPropArrayLength, maxPropStringLength} = props;
 
   if (!type) {
     return null;
@@ -34,24 +116,15 @@ export default function PropTable(props) {
     Object.keys(type.propTypes).forEach(property => {
       const typeInfo = type.propTypes[property];
       const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
-      const description =
-        type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]
-          ? type.__docgenInfo.props[property].description
-          : null;
-      let propType = PropTypesMap.get(typeInfo) || 'other';
-
-      if (propType === 'other') {
-        if (
-          type.__docgenInfo &&
-          type.__docgenInfo.props &&
-          type.__docgenInfo.props[property] &&
-          type.__docgenInfo.props[property].type
-        ) {
-          propType = type.__docgenInfo.props[property].type.name;
-        }
-      }
-
-      accumProps[property] = { property, propType, required, description };
+      const docgenInfo =
+        type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
+      const description = docgenInfo ? docgenInfo.description : null;
+      const propType = formatType({
+        propType: docgenInfo && docgenInfo.type && docgenInfo.type.name,
+        type: (docgenInfo && docgenInfo.type) || {}
+      });
+
+      accumProps[property] = {property, propType, required, description};
     });
   }
 
@@ -64,7 +137,7 @@ export default function PropTable(props) {
       }
 
       if (!accumProps[property]) {
-        accumProps[property] = { property };
+        accumProps[property] = {property};
       }
 
       accumProps[property].defaultValue = value;
@@ -82,38 +155,38 @@ export default function PropTable(props) {
   const propValProps = {
     maxPropObjectKeys,
     maxPropArrayLength,
-    maxPropStringLength,
+    maxPropStringLength
   };
 
   return (
     <table style={stylesheet.propTable}>
       <thead>
         <tr>
-          <th>property</th>
-          <th>propType</th>
-          <th>required</th>
-          <th>default</th>
-          <th>description</th>
+          <th style={stylesheet.propTableCell}>property</th>
+          <th style={stylesheet.propTableCell}>propType</th>
+          <th style={stylesheet.propTableCell}>required</th>
+          <th style={stylesheet.propTableCell}>default</th>
+          <th style={stylesheet.propTableCell}>description</th>
         </tr>
       </thead>
       <tbody>
         {array.map(row =>
           <tr key={row.property}>
-            <td>
+            <td style={stylesheet.propTableCell}>
               {row.property}
             </td>
-            <td>
+            <td style={{...stylesheet.propTableCell, ...stylesheet.code}}>
               {row.propType}
             </td>
-            <td>
+            <td style={stylesheet.propTableCell}>
               {row.required}
             </td>
-            <td>
+            <td style={stylesheet.propTableCell}>
               {row.defaultValue === undefined
                 ? '-'
                 : <PropVal val={row.defaultValue} {...propValProps} />}
             </td>
-            <td>
+            <td style={stylesheet.propTableCell}>
               {row.description}
             </td>
           </tr>
@@ -125,11 +198,11 @@ export default function PropTable(props) {
 
 PropTable.displayName = 'PropTable';
 PropTable.defaultProps = {
-  type: null,
+  type: null
 };
 PropTable.propTypes = {
   type: PropTypes.func,
   maxPropObjectKeys: PropTypes.number.isRequired,
   maxPropArrayLength: PropTypes.number.isRequired,
-  maxPropStringLength: PropTypes.number.isRequired,
+  maxPropStringLength: PropTypes.number.isRequired
 };

From 1d54f15b5d46e4d362ccd5e3ccd99f9e6a679260 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Tue, 18 Jul 2017 15:59:18 -0700
Subject: [PATCH 02/10] Add babel watch task

---
 addons/info/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/info/package.json b/addons/info/package.json
index 6a880a325b10..61c694f3c2af 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -11,6 +11,7 @@
   "scripts": {
     "prepublish": "node ../../scripts/prepublish.js",
     "publish-storybook": "bash .scripts/publish_storybook.sh",
+    "dev": "babel --watch --ignore tests,__tests__,test.js,stories/,story.jsx --plugins transform-runtime ./src --out-dir ./dist --copy-files",
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {

From 7ce56739361176d8327837ded564ca071f34d8ac Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Wed, 23 Aug 2017 15:32:03 -0700
Subject: [PATCH 03/10] addon info: make propTypes table better

* more details for arrayOf, objectOf, shape, oneOf, oneOfType
* refactored into cleaner code + many smaller components
---
 addons/info/example/Button.js                 |  15 ++
 addons/info/src/components/PropTable.js       | 148 +++---------------
 addons/info/src/components/styles.js          |  17 ++
 addons/info/src/components/types/ArrayOf.js   |  19 +++
 .../src/components/types/HighlightButton.js   |  56 +++++++
 addons/info/src/components/types/ObjectOf.js  |  28 ++++
 .../info/src/components/types/ObjectType.js   |  79 ++++++++++
 addons/info/src/components/types/OneOfType.js |  22 +++
 .../src/components/types/PrettyPropType.js    |  73 +++++++++
 .../src/components/types/PropertyLabel.js     |  26 +++
 addons/info/src/components/types/proptypes.js |   6 +
 .../src/components/DocgenButton.js            |  40 +++++
 12 files changed, 401 insertions(+), 128 deletions(-)
 create mode 100644 addons/info/src/components/styles.js
 create mode 100644 addons/info/src/components/types/ArrayOf.js
 create mode 100644 addons/info/src/components/types/HighlightButton.js
 create mode 100644 addons/info/src/components/types/ObjectOf.js
 create mode 100644 addons/info/src/components/types/ObjectType.js
 create mode 100644 addons/info/src/components/types/OneOfType.js
 create mode 100644 addons/info/src/components/types/PrettyPropType.js
 create mode 100644 addons/info/src/components/types/PropertyLabel.js
 create mode 100644 addons/info/src/components/types/proptypes.js

diff --git a/addons/info/example/Button.js b/addons/info/example/Button.js
index df7c34c01288..69e07321300f 100644
--- a/addons/info/example/Button.js
+++ b/addons/info/example/Button.js
@@ -14,6 +14,21 @@ Object.assign(Button, {
     style: PropTypes.object,
     disabled: PropTypes.bool,
     onClick: PropTypes.func,
+    array: PropTypes.array,
+    arrayOf: PropTypes.arrayOf(PropTypes.string),
+    oneOf: PropTypes.oneOf(['foo', 'bar']),
+    shape: PropTypes.shape({
+      foo: PropTypes.string,
+      bar: PropTypes.number,
+    }),
+    nestedArrayOf: PropTypes.arrayOf(PropTypes.shape({
+      foo: PropTypes.shape({
+        baz: PropTypes.string,
+        bar: PropTypes.arrayOf({
+          PropTypes.string
+        }),
+      }),
+    })),
   },
 });
 
diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
index 173bce5b82ef..86bb8659b96f 100644
--- a/addons/info/src/components/PropTable.js
+++ b/addons/info/src/components/PropTable.js
@@ -2,7 +2,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
+import styles from './styles';
 import PropVal from './PropVal';
+import PrettyPropType from './types/PrettyPropType';
 
 const PropTypesMap = new Map();
 
@@ -13,117 +16,10 @@ Object.keys(PropTypes).forEach(typeName => {
   PropTypesMap.set(type.isRequired, typeName);
 });
 
-const stylesheet = {
-  hasProperty: {
-    marginLeft: 10,
-  },
-  code: {
-    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
-  },
-  block: {
-    display: 'block',
-  },
-  propTable: {
-    marginTop: 10,
-    borderCollapse: 'collapse',
-  },
-  propTableCell: {
-    border: '1px solid #ccc',
-    padding: '2px 6px',
-  },
-};
-
 const isNotEmpty = obj => obj && obj.props && Object.keys(obj.props).length > 0;
 
-const renderDocgenPropType = propType => {
-  if (!propType) {
-    return 'unknown';
-  }
-
-  const name = propType.name;
-
-  switch (name) {
-    case 'arrayOf':
-      return `${propType.value.name}[]`;
-    case 'instanceOf':
-      return propType.value;
-    case 'union':
-      return propType.raw;
-    case 'signature':
-      return propType.raw;
-    default:
-      return name;
-  }
-};
-
-const formatType = ({ propType, type, property, required }) => {
-  let result;
-
-  if (type) {
-    const PropertyLabel =
-      property &&
-      <span style={stylesheet.hasProperty}>
-        {property}:{' '}
-      </span>;
-
-    if (propType === 'other') {
-      return (result = type.name);
-    } else if (type && propType === 'arrayOf') {
-      return (
-        <span style={property ? { ...stylesheet.block, ...stylesheet.hasProperty } : {}}>
-          {PropertyLabel}
-          <span>[</span>
-          <span>
-            {formatType({
-              parentType: propType,
-              type: type.value,
-              propType: type.value.name,
-            })}
-          </span>
-          <span>]</span>
-        </span>
-      );
-    } else if (propType === 'enum') {
-      return (
-        <div>
-          {type.value.map(({ value }) => value).join(' | ')}
-        </div>
-      );
-    } else if (propType === 'shape') {
-      const values = Object.keys(type.value).map(property =>
-        formatType({
-          property,
-          parentType: propType,
-          type: type.value[property],
-          propType: type.value[property].name,
-          required: type.value[property].required,
-        })
-      );
-
-      return (
-        <span style={property ? { ...stylesheet.block, ...stylesheet.hasProperty } : {}}>
-          {PropertyLabel}
-          <span>
-            {'{'}
-          </span>
-          {values.map(value =>
-            <span>
-              {value}
-            </span>
-          )}
-          <span>
-            {'}'}
-          </span>
-        </span>
-      );
-    }
-  }
-};
-
 const hasDocgen = type => isNotEmpty(type.__docgenInfo);
 
-const boolToString = value => (value ? 'yes' : 'no');
-
 const propsFromDocgen = type => {
   const props = {};
   const docgenInfoProps = type.__docgenInfo.props;
@@ -135,8 +31,8 @@ const propsFromDocgen = type => {
 
     props[property] = {
       property,
-      propType: renderDocgenPropType(propType),
-      required: boolToString(docgenInfoProp.required),
+      propType,
+      required: docgenInfoProp.required,
       description: docgenInfoProp.description,
       defaultValue: defaultValueDesc.value,
     };
@@ -151,7 +47,7 @@ const propsFromPropTypes = type => {
   if (type.propTypes) {
     Object.keys(type.propTypes).forEach(property => {
       const typeInfo = type.propTypes[property];
-      const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
+      const required = typeInfo.isRequired === undefined;
       const docgenInfo =
         type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
       const description = docgenInfo ? docgenInfo.description : null;
@@ -159,13 +55,9 @@ const propsFromPropTypes = type => {
 
       if (propType === 'other') {
         if (docgenInfo && docgenInfo.type) {
-          propType = type.__docgenInfo.props[property].type.name;
+          propType = docgenInfo.type.name;
         }
       }
-      // const propType = formatType({
-      // propType: docgenInfo && docgenInfo.type && docgenInfo.type.name,
-      // type: (docgenInfo && docgenInfo.type) || {}
-      // });
 
       props[property] = { property, propType, required, description };
     });
@@ -211,34 +103,34 @@ export default function PropTable(props) {
   };
 
   return (
-    <table style={stylesheet.propTable}>
+    <table style={styles.propTable}>
       <thead>
         <tr>
-          <th style={stylesheet.propTableCell}>property</th>
-          <th style={stylesheet.propTableCell}>propType</th>
-          <th style={stylesheet.propTableCell}>required</th>
-          <th style={stylesheet.propTableCell}>default</th>
-          <th style={stylesheet.propTableCell}>description</th>
+          <th style={styles.propTableCell}>property</th>
+          <th style={styles.propTableCell}>propType</th>
+          <th style={styles.propTableCell}>required</th>
+          <th style={styles.propTableCell}>default</th>
+          <th style={styles.propTableCell}>description</th>
         </tr>
       </thead>
       <tbody>
         {array.map(row =>
           <tr key={row.property}>
-            <td style={stylesheet.propTableCell}>
+            <td style={{ ...styles.propTableCell, ...styles.code }}>
               {row.property}
             </td>
-            <td style={{ ...stylesheet.propTableCell, ...stylesheet.code }}>
-              {row.propType}
+            <td style={{ ...styles.propTableCell, ...styles.code }}>
+              <PrettyPropType propType={row.propType} />
             </td>
-            <td style={stylesheet.propTableCell}>
-              {row.required}
+            <td style={styles.propTableCell}>
+              {row.required ? 'yes' : '-'}
             </td>
-            <td style={stylesheet.propTableCell}>
+            <td style={styles.propTableCell}>
               {row.defaultValue === undefined
                 ? '-'
                 : <PropVal val={row.defaultValue} {...propValProps} />}
             </td>
-            <td style={stylesheet.propTableCell}>
+            <td style={styles.propTableCell}>
               {row.description}
             </td>
           </tr>
diff --git a/addons/info/src/components/styles.js b/addons/info/src/components/styles.js
new file mode 100644
index 000000000000..a4fcfedf6381
--- /dev/null
+++ b/addons/info/src/components/styles.js
@@ -0,0 +1,17 @@
+export default {
+  hasProperty: {
+    whiteSpace: 'nowrap',
+  },
+  code: {
+    whiteSpace: 'nowrap',
+    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+  },
+  propTable: {
+    marginTop: 10,
+    borderCollapse: 'collapse',
+  },
+  propTableCell: {
+    border: '1px solid #ccc',
+    padding: '2px 6px',
+  },
+};
diff --git a/addons/info/src/components/types/ArrayOf.js b/addons/info/src/components/types/ArrayOf.js
new file mode 100644
index 000000000000..5ec615798de1
--- /dev/null
+++ b/addons/info/src/components/types/ArrayOf.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import PrettyPropType from './PrettyPropType';
+import { TypeInfo } from './proptypes';
+
+const ArrayOf = ({ propType }) =>
+  <span>
+    <span>[</span>
+    <span>
+      <PrettyPropType propType={propType.value} />
+    </span>
+    <span>]</span>
+  </span>;
+
+ArrayOf.propTypes = {
+  propType: TypeInfo.isRequired,
+};
+
+export default ArrayOf;
diff --git a/addons/info/src/components/types/HighlightButton.js b/addons/info/src/components/types/HighlightButton.js
new file mode 100644
index 000000000000..a9325716db09
--- /dev/null
+++ b/addons/info/src/components/types/HighlightButton.js
@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class HighlightButton extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    highlight: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    highlight: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      hover: false,
+    };
+  }
+
+  handleMouseEnter = () => {
+    this.setState({ hover: true });
+  };
+
+  handleMouseLeave = () => {
+    this.setState({ hover: false });
+  };
+
+  render() {
+    const { children, highlight, ...otherProps } = this.props;
+    const style =
+      highlight || this.state.hover
+        ? {
+            backgroundColor: 'rgba(0, 0, 0, 0.05)',
+            border: '1px solid #ccc',
+          }
+        : {};
+    return (
+      <span
+        role="button"
+        tabIndex={-1}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        style={{
+          ...style,
+          ...{
+            cursor: 'pointer',
+          },
+        }}
+        {...otherProps}
+      >
+        {children}
+      </span>
+    );
+  }
+}
diff --git a/addons/info/src/components/types/ObjectOf.js b/addons/info/src/components/types/ObjectOf.js
new file mode 100644
index 000000000000..d709e45a71ed
--- /dev/null
+++ b/addons/info/src/components/types/ObjectOf.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import PrettyPropType from './PrettyPropType';
+import { TypeInfo } from './proptypes';
+
+const ObjectOf = ({ propType }) =>
+  <span>
+    <span>
+      {'{'}
+    </span>
+    <span />
+    <span>
+      {'[<key>]:'}
+    </span>
+    <span />
+    <span>
+      <PrettyPropType propType={propType.value} />
+    </span>
+    <span>
+      {'}'}
+    </span>
+  </span>;
+
+ObjectOf.propTypes = {
+  propType: TypeInfo.isRequired,
+};
+
+export default ObjectOf;
diff --git a/addons/info/src/components/types/ObjectType.js b/addons/info/src/components/types/ObjectType.js
new file mode 100644
index 000000000000..618bb8983a26
--- /dev/null
+++ b/addons/info/src/components/types/ObjectType.js
@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import PrettyPropType from './PrettyPropType';
+import PropertyLabel from './PropertyLabel';
+import HighlightButton from './HighlightButton';
+
+import { TypeInfo } from './proptypes';
+
+const MARGIN_SIZE = 15;
+
+export default class ObjectType extends React.Component {
+  static propTypes = {
+    propType: TypeInfo,
+    depth: PropTypes.number.isRequired,
+  };
+
+  static defaultProps = {
+    propType: null,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      minimized: false,
+    };
+  }
+
+  handleToggle = () => {
+    this.setState({
+      minimized: !this.state.minimized,
+    });
+  };
+
+  handleMouseEnter = () => {
+    this.setState({ hover: true });
+  };
+
+  handleMouseLeave = () => {
+    this.setState({ hover: false });
+  };
+
+  render() {
+    const { propType, depth } = this.props;
+    return (
+      <span>
+        <HighlightButton
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          highlight={this.state.hover}
+          onClick={this.handleToggle}
+        >
+          {'{'}
+        </HighlightButton>
+        <HighlightButton onClick={this.handleToggle}>...</HighlightButton>
+        {!this.state.minimized &&
+          Object.keys(propType.value).map(childProperty =>
+            <div key={childProperty} style={{ marginLeft: depth * MARGIN_SIZE }}>
+              <PropertyLabel
+                property={childProperty}
+                required={propType.value[childProperty].required}
+              />
+              <PrettyPropType depth={depth + 1} propType={propType.value[childProperty]} />
+              ,
+            </div>
+          )}
+
+        <HighlightButton
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          highlight={this.state.hover}
+          onClick={this.handleToggle}
+        >
+          {'}'}
+        </HighlightButton>
+      </span>
+    );
+  }
+}
diff --git a/addons/info/src/components/types/OneOfType.js b/addons/info/src/components/types/OneOfType.js
new file mode 100644
index 000000000000..62cd00a675bd
--- /dev/null
+++ b/addons/info/src/components/types/OneOfType.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import PrettyPropType from './PrettyPropType';
+import { TypeInfo } from './proptypes';
+
+const OneOfType = ({ propType }) => {
+  const length = propType.value.length;
+  return (
+    <span>
+      {propType.value
+        .map((value, i) => [
+          <PrettyPropType propType={value} />,
+          i < length - 1 ? <span> | </span> : null,
+        ])
+        .reduce((acc, tuple) => acc.concat(tuple), [])}
+    </span>
+  );
+};
+OneOfType.propTypes = {
+  propType: TypeInfo.isRequired,
+};
+export default OneOfType;
diff --git a/addons/info/src/components/types/PrettyPropType.js b/addons/info/src/components/types/PrettyPropType.js
new file mode 100644
index 000000000000..70929261cb27
--- /dev/null
+++ b/addons/info/src/components/types/PrettyPropType.js
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import ObjectType from './ObjectType';
+import OneOfType from './OneOfType';
+import ArrayOf from './ArrayOf';
+import ObjectOf from './ObjectOf';
+
+import { TypeInfo } from './proptypes';
+
+const PrettyPropType = ({ propType, depth }) => {
+  if (!propType) {
+    return <span>unknown</span>;
+  }
+
+  const { name } = propType || {};
+
+  if (name === 'shape') {
+    return <ObjectType propType={propType} depth={depth} />;
+  }
+
+  if (name === 'union') {
+    return <OneOfType propType={propType} />;
+  }
+
+  if (name === 'arrayOf') {
+    return <ArrayOf propType={propType} />;
+  }
+
+  if (name === 'objectOf') {
+    return <ObjectOf propType={propType} />;
+  }
+
+  // Rest are just simple strings
+  let display;
+
+  switch (name) {
+    case 'object':
+      display = '{}';
+      break;
+    case 'enum':
+      display = propType.value.map(({ value }) => value).join(' | ');
+      break;
+    case 'instanceOf':
+      display = propType.value;
+      break;
+    case 'signature':
+      display = propType.raw;
+      break;
+    default:
+      display = name;
+  }
+
+  return (
+    <span>
+      {display}
+    </span>
+  );
+};
+
+PrettyPropType.displayName = 'PrettyPropType';
+
+PrettyPropType.defaultProps = {
+  propType: null,
+  depth: 1,
+};
+
+PrettyPropType.propTypes = {
+  propType: TypeInfo,
+  depth: PropTypes.number.isRequired,
+};
+
+export default PrettyPropType;
diff --git a/addons/info/src/components/types/PropertyLabel.js b/addons/info/src/components/types/PropertyLabel.js
new file mode 100644
index 000000000000..1b2616b26ab8
--- /dev/null
+++ b/addons/info/src/components/types/PropertyLabel.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from '../styles';
+
+const PropertyLabel = ({ property, required }) => {
+  if (!property) return null;
+
+  return (
+    <span style={styles.hasProperty}>
+      {property}
+      {required ? '' : '?'}:{' '}
+    </span>
+  );
+};
+
+PropertyLabel.propTypes = {
+  property: PropTypes.string,
+  required: PropTypes.bool,
+};
+
+PropertyLabel.defaultProps = {
+  property: '',
+  required: false,
+};
+
+export default PropertyLabel;
diff --git a/addons/info/src/components/types/proptypes.js b/addons/info/src/components/types/proptypes.js
new file mode 100644
index 000000000000..916bc3404acb
--- /dev/null
+++ b/addons/info/src/components/types/proptypes.js
@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export const TypeInfo = PropTypes.shape({
+  name: PropTypes.string,
+  value: PropTypes.any,
+});
diff --git a/examples/cra-kitchen-sink/src/components/DocgenButton.js b/examples/cra-kitchen-sink/src/components/DocgenButton.js
index d6835f1ff470..20e997d58eb1 100644
--- a/examples/cra-kitchen-sink/src/components/DocgenButton.js
+++ b/examples/cra-kitchen-sink/src/components/DocgenButton.js
@@ -54,6 +54,46 @@ DocgenButton.propTypes = {
       ),
     })
   ),
+
+  /**
+   * Plain object propType (use shape!!)
+   */
+  obj: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+
+  /**
+   * propType for shape with nested arraytOf
+   */
+  shape: PropTypes.shape({
+    /**
+     *  Just an internal propType for a shape.
+     *  It's also required, and as you can see it supports multi-line comments!
+     */
+    id: PropTypes.number.isRequired,
+    /**
+     *  A simple non-required function
+     */
+    func: PropTypes.func,
+    /**
+     * An `arrayOf` shape
+     */
+    arr: PropTypes.arrayOf(
+      PropTypes.shape({
+        /**
+         * 5-level deep propType definition and still works.
+         */
+        index: PropTypes.number.isRequired,
+      })
+    ),
+
+    shape: PropTypes.shape({
+      shape: PropTypes.shape({
+        foo: PropTypes.string,
+      }),
+    }),
+  }),
+
+  arrayOf: PropTypes.arrayOf(PropTypes.number),
+
   /**
    * `instanceOf` is also supported and the custom type will be shown instead of `instanceOf`
    */

From 40a229eae652e7a05a9bc8d8882bcdeeaea6a4ca Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Mon, 28 Aug 2017 13:51:40 -0700
Subject: [PATCH 04/10] cleanup deprecated tests

---
 addons/info/example/Button.js | 15 ---------------
 addons/info/package.json      |  1 -
 2 files changed, 16 deletions(-)

diff --git a/addons/info/example/Button.js b/addons/info/example/Button.js
index 69e07321300f..df7c34c01288 100644
--- a/addons/info/example/Button.js
+++ b/addons/info/example/Button.js
@@ -14,21 +14,6 @@ Object.assign(Button, {
     style: PropTypes.object,
     disabled: PropTypes.bool,
     onClick: PropTypes.func,
-    array: PropTypes.array,
-    arrayOf: PropTypes.arrayOf(PropTypes.string),
-    oneOf: PropTypes.oneOf(['foo', 'bar']),
-    shape: PropTypes.shape({
-      foo: PropTypes.string,
-      bar: PropTypes.number,
-    }),
-    nestedArrayOf: PropTypes.arrayOf(PropTypes.shape({
-      foo: PropTypes.shape({
-        baz: PropTypes.string,
-        bar: PropTypes.arrayOf({
-          PropTypes.string
-        }),
-      }),
-    })),
   },
 });
 
diff --git a/addons/info/package.json b/addons/info/package.json
index 33cd2743dcee..fc856bec7dde 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -11,7 +11,6 @@
   "scripts": {
     "prepublish": "node ../../scripts/prepublish.js",
     "publish-storybook": "bash .scripts/publish_storybook.sh",
-    "dev": "babel --watch --ignore tests,__tests__,test.js,stories/,story.jsx --plugins transform-runtime ./src --out-dir ./dist --copy-files",
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {

From a54f7146bdb0e078db0426d0e7188eb475264eff Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Mon, 28 Aug 2017 14:11:45 -0700
Subject: [PATCH 05/10] cleanup <PrettyPropType>

---
 addons/info/src/components/types/Enum.js      | 11 +++
 .../info/src/components/types/InstanceOf.js   | 13 +++
 addons/info/src/components/types/Object.js    |  8 ++
 addons/info/src/components/types/ObjectOf.js  | 17 +---
 .../info/src/components/types/ObjectType.js   | 81 ++-----------------
 addons/info/src/components/types/OneOf.js     | 13 +++
 .../src/components/types/PrettyPropType.js    | 60 ++++++--------
 addons/info/src/components/types/Shape.js     | 81 +++++++++++++++++++
 addons/info/src/components/types/Signature.js | 13 +++
 9 files changed, 171 insertions(+), 126 deletions(-)
 create mode 100644 addons/info/src/components/types/Enum.js
 create mode 100644 addons/info/src/components/types/InstanceOf.js
 create mode 100644 addons/info/src/components/types/Object.js
 create mode 100644 addons/info/src/components/types/OneOf.js
 create mode 100644 addons/info/src/components/types/Shape.js
 create mode 100644 addons/info/src/components/types/Signature.js

diff --git a/addons/info/src/components/types/Enum.js b/addons/info/src/components/types/Enum.js
new file mode 100644
index 000000000000..de574d88598d
--- /dev/null
+++ b/addons/info/src/components/types/Enum.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { TypeInfo } from './proptypes';
+
+const Enum = ({ propType }) =>
+  <span>
+    {propType.value.map(({ value }) => value).join(' | ')}
+  </span>;
+
+Enum.propTypes = {
+  propType: TypeInfo.isRequired,
+};
diff --git a/addons/info/src/components/types/InstanceOf.js b/addons/info/src/components/types/InstanceOf.js
new file mode 100644
index 000000000000..27cc8ca8e318
--- /dev/null
+++ b/addons/info/src/components/types/InstanceOf.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { TypeInfo } from './proptypes';
+
+const InstanceOf = ({ propType }) =>
+  <span>
+    {propType.value}
+  </span>;
+
+InstanceOf.propTypes = {
+  propType: TypeInfo.isRequired,
+};
+
+export default InstanceOf;
diff --git a/addons/info/src/components/types/Object.js b/addons/info/src/components/types/Object.js
new file mode 100644
index 000000000000..b9fa4cfd0662
--- /dev/null
+++ b/addons/info/src/components/types/Object.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+const ObjectType = () =>
+  <span>
+    {'{}'}
+  </span>;
+
+export default ObjectType;
diff --git a/addons/info/src/components/types/ObjectOf.js b/addons/info/src/components/types/ObjectOf.js
index d709e45a71ed..c4d7d61a146e 100644
--- a/addons/info/src/components/types/ObjectOf.js
+++ b/addons/info/src/components/types/ObjectOf.js
@@ -5,20 +5,9 @@ import { TypeInfo } from './proptypes';
 
 const ObjectOf = ({ propType }) =>
   <span>
-    <span>
-      {'{'}
-    </span>
-    <span />
-    <span>
-      {'[<key>]:'}
-    </span>
-    <span />
-    <span>
-      <PrettyPropType propType={propType.value} />
-    </span>
-    <span>
-      {'}'}
-    </span>
+    {'{[<key>]: '}
+    <PrettyPropType propType={propType.value} />
+    {'}'}
   </span>;
 
 ObjectOf.propTypes = {
diff --git a/addons/info/src/components/types/ObjectType.js b/addons/info/src/components/types/ObjectType.js
index 618bb8983a26..b9fa4cfd0662 100644
--- a/addons/info/src/components/types/ObjectType.js
+++ b/addons/info/src/components/types/ObjectType.js
@@ -1,79 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import PrettyPropType from './PrettyPropType';
-import PropertyLabel from './PropertyLabel';
-import HighlightButton from './HighlightButton';
+const ObjectType = () =>
+  <span>
+    {'{}'}
+  </span>;
 
-import { TypeInfo } from './proptypes';
-
-const MARGIN_SIZE = 15;
-
-export default class ObjectType extends React.Component {
-  static propTypes = {
-    propType: TypeInfo,
-    depth: PropTypes.number.isRequired,
-  };
-
-  static defaultProps = {
-    propType: null,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      minimized: false,
-    };
-  }
-
-  handleToggle = () => {
-    this.setState({
-      minimized: !this.state.minimized,
-    });
-  };
-
-  handleMouseEnter = () => {
-    this.setState({ hover: true });
-  };
-
-  handleMouseLeave = () => {
-    this.setState({ hover: false });
-  };
-
-  render() {
-    const { propType, depth } = this.props;
-    return (
-      <span>
-        <HighlightButton
-          onMouseEnter={this.handleMouseEnter}
-          onMouseLeave={this.handleMouseLeave}
-          highlight={this.state.hover}
-          onClick={this.handleToggle}
-        >
-          {'{'}
-        </HighlightButton>
-        <HighlightButton onClick={this.handleToggle}>...</HighlightButton>
-        {!this.state.minimized &&
-          Object.keys(propType.value).map(childProperty =>
-            <div key={childProperty} style={{ marginLeft: depth * MARGIN_SIZE }}>
-              <PropertyLabel
-                property={childProperty}
-                required={propType.value[childProperty].required}
-              />
-              <PrettyPropType depth={depth + 1} propType={propType.value[childProperty]} />
-              ,
-            </div>
-          )}
-
-        <HighlightButton
-          onMouseEnter={this.handleMouseEnter}
-          onMouseLeave={this.handleMouseLeave}
-          highlight={this.state.hover}
-          onClick={this.handleToggle}
-        >
-          {'}'}
-        </HighlightButton>
-      </span>
-    );
-  }
-}
+export default ObjectType;
diff --git a/addons/info/src/components/types/OneOf.js b/addons/info/src/components/types/OneOf.js
new file mode 100644
index 000000000000..65177f77e165
--- /dev/null
+++ b/addons/info/src/components/types/OneOf.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { TypeInfo } from './proptypes';
+
+const OneOf = ({ propType }) =>
+  <span>
+    {propType.value.map(({ value }) => value).join(' | ')}
+  </span>;
+
+OneOf.propTypes = {
+  propType: TypeInfo.isRequired,
+};
+
+export default OneOf;
diff --git a/addons/info/src/components/types/PrettyPropType.js b/addons/info/src/components/types/PrettyPropType.js
index 70929261cb27..fe50881408f7 100644
--- a/addons/info/src/components/types/PrettyPropType.js
+++ b/addons/info/src/components/types/PrettyPropType.js
@@ -2,58 +2,46 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import ObjectType from './ObjectType';
+import Shape from './Shape';
 import OneOfType from './OneOfType';
 import ArrayOf from './ArrayOf';
 import ObjectOf from './ObjectOf';
+import OneOf from './OneOf';
+import InstanceOf from './InstanceOf';
+import Signature from './Signature';
 
 import { TypeInfo } from './proptypes';
 
-const PrettyPropType = ({ propType, depth }) => {
+// propType -> Component map - these are a bit more complex prop types to display
+const propTypeComponentMap = new Map([
+  ['shape', Shape],
+  ['union', OneOfType],
+  ['arrayOf', ArrayOf],
+  ['objectOf', ObjectOf],
+  // Might be overkill to have below proptypes  as separate components *shrug*
+  ['object', ObjectType],
+  ['enum', OneOf],
+  ['instanceOf', InstanceOf],
+  ['signature', Signature],
+]);
+
+const PrettyPropType = props => {
+  const { propType, depth } = props;
   if (!propType) {
     return <span>unknown</span>;
   }
 
   const { name } = propType || {};
 
-  if (name === 'shape') {
-    return <ObjectType propType={propType} depth={depth} />;
-  }
-
-  if (name === 'union') {
-    return <OneOfType propType={propType} />;
-  }
-
-  if (name === 'arrayOf') {
-    return <ArrayOf propType={propType} />;
-  }
-
-  if (name === 'objectOf') {
-    return <ObjectOf propType={propType} />;
-  }
-
-  // Rest are just simple strings
-  let display;
-
-  switch (name) {
-    case 'object':
-      display = '{}';
-      break;
-    case 'enum':
-      display = propType.value.map(({ value }) => value).join(' | ');
-      break;
-    case 'instanceOf':
-      display = propType.value;
-      break;
-    case 'signature':
-      display = propType.raw;
-      break;
-    default:
-      display = name;
+  if (propTypeComponentMap.has(name)) {
+    const Component = propTypeComponentMap.get(name);
+    return <Component propType={propType} depth={depth} />;
   }
 
+  // Otherwise, propType does not have a dedicated component, display proptype name by default
   return (
     <span>
-      {display}
+      {name}
     </span>
   );
 };
diff --git a/addons/info/src/components/types/Shape.js b/addons/info/src/components/types/Shape.js
new file mode 100644
index 000000000000..7a2f114ef178
--- /dev/null
+++ b/addons/info/src/components/types/Shape.js
@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { HighlightButton } from '@storybook/components';
+import PrettyPropType from './PrettyPropType';
+import PropertyLabel from './PropertyLabel';
+
+import { TypeInfo } from './proptypes';
+
+const MARGIN_SIZE = 15;
+
+class Shape extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      minimized: false,
+    };
+  }
+
+  handleToggle = () => {
+    this.setState({
+      minimized: !this.state.minimized,
+    });
+  };
+
+  handleMouseEnter = () => {
+    this.setState({ hover: true });
+  };
+
+  handleMouseLeave = () => {
+    this.setState({ hover: false });
+  };
+
+  render() {
+    const { propType, depth } = this.props;
+    return (
+      <span>
+        <HighlightButton
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          highlight={this.state.hover}
+          onClick={this.handleToggle}
+        >
+          {'{'}
+        </HighlightButton>
+        <HighlightButton onClick={this.handleToggle}>...</HighlightButton>
+        {!this.state.minimized &&
+          Object.keys(propType.value).map(childProperty =>
+            <div key={childProperty} style={{ marginLeft: depth * MARGIN_SIZE }}>
+              <PropertyLabel
+                property={childProperty}
+                required={propType.value[childProperty].required}
+              />
+              <PrettyPropType depth={depth + 1} propType={propType.value[childProperty]} />
+              ,
+            </div>
+          )}
+
+        <HighlightButton
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+          highlight={this.state.hover}
+          onClick={this.handleToggle}
+        >
+          {'}'}
+        </HighlightButton>
+      </span>
+    );
+  }
+}
+
+Shape.propTypes = {
+  propType: TypeInfo,
+  depth: PropTypes.number.isRequired,
+};
+
+Shape.defaultProps = {
+  propType: null,
+};
+
+export default Shape;
diff --git a/addons/info/src/components/types/Signature.js b/addons/info/src/components/types/Signature.js
new file mode 100644
index 000000000000..5f85770b45e4
--- /dev/null
+++ b/addons/info/src/components/types/Signature.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { TypeInfo } from './proptypes';
+
+const Signature = ({ propType }) =>
+  <span>
+    {propType.raw}
+  </span>;
+
+Signature.propTypes = {
+  propType: TypeInfo.isRequired,
+};
+
+export default Signature;

From 34333bdc8c9107ac53ced9499e8cd43e74a7e347 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Mon, 28 Aug 2017 15:24:30 -0700
Subject: [PATCH 06/10] add: styled components

---
 addons/info/src/components/PropTable.js       | 36 +++++++++----------
 addons/info/src/components/styles.js          | 17 ---------
 .../src/components/types/PropertyLabel.js     |  7 +++-
 lib/components/src/highlight_button.js        | 26 ++++++++++++++
 lib/components/src/index.js                   |  3 ++
 lib/components/src/table/cell.js              | 27 ++++++++++++++
 lib/components/src/table/table.js             |  5 +++
 7 files changed, 85 insertions(+), 36 deletions(-)
 delete mode 100644 addons/info/src/components/styles.js
 create mode 100644 lib/components/src/highlight_button.js
 create mode 100644 lib/components/src/table/cell.js
 create mode 100644 lib/components/src/table/table.js

diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
index 86bb8659b96f..301f7e341cbd 100644
--- a/addons/info/src/components/PropTable.js
+++ b/addons/info/src/components/PropTable.js
@@ -3,7 +3,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import styles from './styles';
+import { Table, Td, Th } from '@storybook/components';
 import PropVal from './PropVal';
 import PrettyPropType from './types/PrettyPropType';
 
@@ -103,40 +103,40 @@ export default function PropTable(props) {
   };
 
   return (
-    <table style={styles.propTable}>
+    <Table>
       <thead>
         <tr>
-          <th style={styles.propTableCell}>property</th>
-          <th style={styles.propTableCell}>propType</th>
-          <th style={styles.propTableCell}>required</th>
-          <th style={styles.propTableCell}>default</th>
-          <th style={styles.propTableCell}>description</th>
+          <Th bordered>property</Th>
+          <Th bordered>propType</Th>
+          <Th bordered>required</Th>
+          <Th bordered>default</Th>
+          <Th bordered>description</Th>
         </tr>
       </thead>
       <tbody>
         {array.map(row =>
           <tr key={row.property}>
-            <td style={{ ...styles.propTableCell, ...styles.code }}>
+            <Td bordered code>
               {row.property}
-            </td>
-            <td style={{ ...styles.propTableCell, ...styles.code }}>
+            </Td>
+            <Td bordered code>
               <PrettyPropType propType={row.propType} />
-            </td>
-            <td style={styles.propTableCell}>
+            </Td>
+            <Td bordered>
               {row.required ? 'yes' : '-'}
-            </td>
-            <td style={styles.propTableCell}>
+            </Td>
+            <Td bordered>
               {row.defaultValue === undefined
                 ? '-'
                 : <PropVal val={row.defaultValue} {...propValProps} />}
-            </td>
-            <td style={styles.propTableCell}>
+            </Td>
+            <Td bordered>
               {row.description}
-            </td>
+            </Td>
           </tr>
         )}
       </tbody>
-    </table>
+    </Table>
   );
 }
 
diff --git a/addons/info/src/components/styles.js b/addons/info/src/components/styles.js
deleted file mode 100644
index a4fcfedf6381..000000000000
--- a/addons/info/src/components/styles.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  hasProperty: {
-    whiteSpace: 'nowrap',
-  },
-  code: {
-    whiteSpace: 'nowrap',
-    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
-  },
-  propTable: {
-    marginTop: 10,
-    borderCollapse: 'collapse',
-  },
-  propTableCell: {
-    border: '1px solid #ccc',
-    padding: '2px 6px',
-  },
-};
diff --git a/addons/info/src/components/types/PropertyLabel.js b/addons/info/src/components/types/PropertyLabel.js
index 1b2616b26ab8..8eca3d423256 100644
--- a/addons/info/src/components/types/PropertyLabel.js
+++ b/addons/info/src/components/types/PropertyLabel.js
@@ -1,6 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from '../styles';
+
+const styles = {
+  hasProperty: {
+    whiteSpace: 'nowrap',
+  },
+};
 
 const PropertyLabel = ({ property, required }) => {
   if (!property) return null;
diff --git a/lib/components/src/highlight_button.js b/lib/components/src/highlight_button.js
new file mode 100644
index 000000000000..6aabee44cc0f
--- /dev/null
+++ b/lib/components/src/highlight_button.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import glamorous from 'glamorous';
+
+const Button = props => <span role="button" tabIndex={-1} {...props} />;
+
+export default glamorous(Button, { displayName: 'Button', rootEl: 'span' })(
+  {
+    cursor: 'pointer',
+    ':hover': {
+      backgroundColor: 'rgba(0, 0, 0, 0.05)',
+      border: '1px solid #ccc',
+    },
+  },
+  props => {
+    const styles = [];
+
+    if (props.highlight) {
+      styles.push({
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+        border: '1px solid #ccc',
+      });
+    }
+
+    return styles;
+  }
+);
diff --git a/lib/components/src/index.js b/lib/components/src/index.js
index 446888e9dc92..7e73841424ad 100644
--- a/lib/components/src/index.js
+++ b/lib/components/src/index.js
@@ -2,3 +2,6 @@ export { baseFonts } from './theme';
 
 export { default as RoutedLink } from './navigation/routed_link';
 export { default as MenuLink } from './navigation/menu_link';
+export { default as HighlightButton } from './highlight_button';
+export { default as Table } from './table/table';
+export { td as Td, th as Th } from './table/cell';
diff --git a/lib/components/src/table/cell.js b/lib/components/src/table/cell.js
new file mode 100644
index 000000000000..fa23e60876c6
--- /dev/null
+++ b/lib/components/src/table/cell.js
@@ -0,0 +1,27 @@
+import glamorous from 'glamorous';
+
+const dynamicStyles = props => {
+  const styles = [];
+
+  if (props.bordered) {
+    styles.push({
+      border: '1px solid #ccc',
+    });
+  }
+
+  if (props.code) {
+    styles.push({
+      whiteSpace: 'nowrap',
+      fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+    });
+  }
+
+  return styles;
+};
+
+const styles = {
+  padding: '2px 6px',
+};
+
+export const td = glamorous.td(styles, dynamicStyles);
+export const th = glamorous.th(styles, dynamicStyles);
diff --git a/lib/components/src/table/table.js b/lib/components/src/table/table.js
new file mode 100644
index 000000000000..2871c6ca9154
--- /dev/null
+++ b/lib/components/src/table/table.js
@@ -0,0 +1,5 @@
+import glamorous from 'glamorous';
+
+export default glamorous.table({
+  borderCollapse: 'collapse',
+});

From 2fdeff5bdf849ed93a387c78fe2bcfa152f5eb7c Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Mon, 28 Aug 2017 15:29:47 -0700
Subject: [PATCH 07/10] removed in favor of glamorous component

---
 .../src/components/types/HighlightButton.js   | 56 -------------------
 1 file changed, 56 deletions(-)
 delete mode 100644 addons/info/src/components/types/HighlightButton.js

diff --git a/addons/info/src/components/types/HighlightButton.js b/addons/info/src/components/types/HighlightButton.js
deleted file mode 100644
index a9325716db09..000000000000
--- a/addons/info/src/components/types/HighlightButton.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default class HighlightButton extends React.Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    highlight: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    highlight: false,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      hover: false,
-    };
-  }
-
-  handleMouseEnter = () => {
-    this.setState({ hover: true });
-  };
-
-  handleMouseLeave = () => {
-    this.setState({ hover: false });
-  };
-
-  render() {
-    const { children, highlight, ...otherProps } = this.props;
-    const style =
-      highlight || this.state.hover
-        ? {
-            backgroundColor: 'rgba(0, 0, 0, 0.05)',
-            border: '1px solid #ccc',
-          }
-        : {};
-    return (
-      <span
-        role="button"
-        tabIndex={-1}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        style={{
-          ...style,
-          ...{
-            cursor: 'pointer',
-          },
-        }}
-        {...otherProps}
-      >
-        {children}
-      </span>
-    );
-  }
-}

From c90b09eea1754d8263869eea59bf558a6d0bba07 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Tue, 5 Sep 2017 10:06:14 -0700
Subject: [PATCH 08/10] fix: add key for OneOfType

---
 addons/info/src/components/types/OneOfType.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/addons/info/src/components/types/OneOfType.js b/addons/info/src/components/types/OneOfType.js
index 62cd00a675bd..901cd5621065 100644
--- a/addons/info/src/components/types/OneOfType.js
+++ b/addons/info/src/components/types/OneOfType.js
@@ -9,7 +9,10 @@ const OneOfType = ({ propType }) => {
     <span>
       {propType.value
         .map((value, i) => [
-          <PrettyPropType propType={value} />,
+          <PrettyPropType
+            key={`${value.name}${value.value ? `-${value.value}` : ''}`}
+            propType={value}
+          />,
           i < length - 1 ? <span> | </span> : null,
         ])
         .reduce((acc, tuple) => acc.concat(tuple), [])}

From 691771fc01e06ed7bc2204d07700ccbe5fa8cedb Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@gmail.com>
Date: Tue, 5 Sep 2017 16:08:06 -0700
Subject: [PATCH 09/10] fix: use native buttons

---
 lib/components/src/highlight_button.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/lib/components/src/highlight_button.js b/lib/components/src/highlight_button.js
index 6aabee44cc0f..609bdc5aa419 100644
--- a/lib/components/src/highlight_button.js
+++ b/lib/components/src/highlight_button.js
@@ -1,11 +1,12 @@
-import React from 'react';
 import glamorous from 'glamorous';
 
-const Button = props => <span role="button" tabIndex={-1} {...props} />;
-
-export default glamorous(Button, { displayName: 'Button', rootEl: 'span' })(
+export default glamorous.button(
   {
-    cursor: 'pointer',
+    border: '1px solid rgba(0, 0, 0, 0)',
+    font: 'inherit',
+    background: 'none',
+    'box-shadow': 'none',
+    padding: 0,
     ':hover': {
       backgroundColor: 'rgba(0, 0, 0, 0.05)',
       border: '1px solid #ccc',

From e43d49b8e3199a5697071e4d6587cead6548066f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 6 Sep 2017 08:05:10 +0200
Subject: [PATCH 10/10] ADD an example usage of complex PropType and add
 descriptions for Container.propTypes

---
 .../cra-kitchen-sink/src/stories/Container.js |  22 +-
 yarn.lock                                     | 230 +++++++-----------
 2 files changed, 96 insertions(+), 156 deletions(-)

diff --git a/examples/cra-kitchen-sink/src/stories/Container.js b/examples/cra-kitchen-sink/src/stories/Container.js
index aebe66d28126..efd894da18a1 100644
--- a/examples/cra-kitchen-sink/src/stories/Container.js
+++ b/examples/cra-kitchen-sink/src/stories/Container.js
@@ -1,26 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Container = ({ children, title, age, isAmazing }) =>
+const Container = ({ children, title, age, isAmazing }) => (
   <div title={title}>
     {children}
     {isAmazing ? '!!!' : ''}
-    {age
-      ? <div>
-          age = {age}
-        </div>
-      : null}
-  </div>;
+    {age.isOld ? <div>age = {age.value}</div> : null}
+  </div>
+);
 
 Container.propTypes = {
+  /** The nodes to be rendered in the button */
   children: PropTypes.node.isRequired,
+  /** Show exclamation marks */
   isAmazing: PropTypes.bool,
-  age: PropTypes.number,
+  /** Show age prop */
+  age: PropTypes.shape({
+    isOld: PropTypes.bool,
+    value: PropTypes.number,
+  }),
+  /** Main title */
   title: PropTypes.string,
 };
 Container.defaultProps = {
   isAmazing: false,
-  age: 0,
+  age: { isOld: false, value: 0 },
   title: 'the best container ever',
 };
 
diff --git a/yarn.lock b/yarn.lock
index 38aafc6bb394..8866653d5329 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -507,7 +507,7 @@ axobject-query@^0.1.0:
   dependencies:
     ast-types-flow "0.0.7"
 
-babel-cli@^6.24.1:
+babel-cli@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
   dependencies:
@@ -619,7 +619,7 @@ babel-core@^5:
     trim-right "^1.0.0"
     try-resolve "^1.0.0"
 
-babel-core@^6.0.0, babel-core@^6.21.0, babel-core@^6.25.0, babel-core@^6.26.0, babel-core@^6.7.2:
+babel-core@^6.0.0, babel-core@^6.21.0, babel-core@^6.26.0, babel-core@^6.7.2:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -1497,7 +1497,7 @@ babel-polyfill@6.23.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.10.0"
 
-babel-polyfill@^6.20.0, babel-polyfill@^6.23.0, babel-polyfill@^6.26.0:
+babel-polyfill@^6.20.0, babel-polyfill@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
   dependencies:
@@ -2262,12 +2262,12 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000725"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000725.tgz#20f2313d79401e02f61840f39698bc8c558811a6"
+  version "1.0.30000726"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000726.tgz#9bb742f8d026a62df873bc03c06843d2255b60d7"
 
 caniuse-lite@^1.0.30000669, caniuse-lite@^1.0.30000718:
-  version "1.0.30000725"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000725.tgz#4fa66372323c6ff46c8a1ba03f9dcd73d7a1cb39"
+  version "1.0.30000726"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000726.tgz#966a753fa107a09d4131cf8b3d616723a06ccf7e"
 
 caniuse-lite@^1.0.30000715:
   version "1.0.30000717"
@@ -2379,7 +2379,7 @@ child-process-promise@^2.2.1:
     node-version "^1.0.0"
     promise-polyfill "^6.0.1"
 
-chokidar@^1.4.3, chokidar@^1.5.1, chokidar@^1.6.0, chokidar@^1.6.1, chokidar@^1.7.0:
+chokidar@^1.5.1, chokidar@^1.6.0, chokidar@^1.6.1, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
@@ -2516,7 +2516,7 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codecov@^2.2.0:
+codecov@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/codecov/-/codecov-2.3.0.tgz#ad25a2c6e0442d13740d9d4ddbb9a3e2714330f4"
   dependencies:
@@ -2678,19 +2678,6 @@ config-chain@~1.1.5:
     ini "^1.3.4"
     proto-list "~1.2.1"
 
-configstore@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-1.4.0.tgz#c35781d0501d268c25c54b8b17f6240e8a4fb021"
-  dependencies:
-    graceful-fs "^4.1.2"
-    mkdirp "^0.5.0"
-    object-assign "^4.0.1"
-    os-tmpdir "^1.0.0"
-    osenv "^0.1.0"
-    uuid "^2.0.1"
-    write-file-atomic "^1.1.2"
-    xdg-basedir "^2.0.0"
-
 configstore@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
@@ -3278,7 +3265,7 @@ damerau-levenshtein@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
 
-danger@^1.0.0:
+danger@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/danger/-/danger-1.2.0.tgz#45012a191af890c8bb3879a2f3bdf0ef406e0cef"
   dependencies:
@@ -3667,15 +3654,6 @@ duplexer@^0.1.1, duplexer@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
 
-duplexify@^3.2.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.1.tgz#4e1516be68838bc90a49994f0b39a6e5960befcd"
-  dependencies:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
-
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -3738,12 +3716,6 @@ encoding@^0.1.11:
   dependencies:
     iconv-lite "~0.4.13"
 
-end-of-stream@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
-  dependencies:
-    once "^1.4.0"
-
 enhanced-resolve@^3.0.0, enhanced-resolve@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
@@ -3861,7 +3833,7 @@ es6-map@^0.1.3:
     es6-symbol "~3.1.1"
     event-emitter "~0.3.5"
 
-es6-promise@^3.0.2:
+es6-promise@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
 
@@ -3943,9 +3915,9 @@ eslint-config-airbnb@^15.1.0:
   dependencies:
     eslint-config-airbnb-base "^11.3.0"
 
-eslint-config-prettier@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.3.0.tgz#b75b1eabea0c8b97b34403647ee25db349b9d8a0"
+eslint-config-prettier@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.4.0.tgz#fb7cf29c0ab2ba61af5164fb1930f9bef3be2872"
   dependencies:
     get-stdin "^5.0.1"
 
@@ -4056,7 +4028,7 @@ eslint-plugin-jsx-a11y@^6.0.2:
     emoji-regex "^6.1.0"
     jsx-ast-utils "^1.4.0"
 
-eslint-plugin-prettier@^2.1.2:
+eslint-plugin-prettier@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.2.0.tgz#f2837ad063903d73c621e7188fb3d41486434088"
   dependencies:
@@ -4071,7 +4043,7 @@ eslint-plugin-react@7.0.1:
     has "^1.0.1"
     jsx-ast-utils "^1.3.4"
 
-eslint-plugin-react@^7.1.0:
+eslint-plugin-react@^7.3.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.3.0.tgz#ca9368da36f733fbdc05718ae4e91f778f38e344"
   dependencies:
@@ -4131,9 +4103,9 @@ eslint@3.19.0, eslint@^3.16.1:
     text-table "~0.2.0"
     user-home "^2.0.0"
 
-eslint@^4.3.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.5.0.tgz#bb75d3b8bde97fb5e13efcd539744677feb019c3"
+eslint@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.6.1.tgz#ddc7fc7fd70bf93205b0b3449bb16a1e9e7d4950"
   dependencies:
     ajv "^5.2.0"
     babel-code-frame "^6.22.0"
@@ -4641,8 +4613,8 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
 flow-parser@^0.*:
-  version "0.54.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.54.0.tgz#82b3eea7a95561cb2f8d24d2068789e3491447a8"
+  version "0.54.1"
+  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.54.1.tgz#5037778da8d8391192527f2b36853e98945ae390"
 
 fn-name@^2.0.1:
   version "2.0.1"
@@ -4733,7 +4705,7 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^4.0.0, fs-extra@^4.0.1:
+fs-extra@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.1.tgz#7fc0c6c8957f983f57f306a24e5b9ddd8d0dd880"
   dependencies:
@@ -4841,6 +4813,10 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
+get-own-enumerable-property-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-1.0.1.tgz#f1d4e3ad1402e039898e56d1e9b9aa924c26e484"
+
 get-pkg-repo@^1.0.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz#c73b489c06d80cc5536c2c853f9e05232056972d"
@@ -5090,21 +5066,6 @@ glogg@^1.0.0:
   dependencies:
     sparkles "^1.0.0"
 
-got@^3.2.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/got/-/got-3.3.1.tgz#e5d0ed4af55fc3eef4d56007769d98192bcb2eca"
-  dependencies:
-    duplexify "^3.2.0"
-    infinity-agent "^2.0.0"
-    is-redirect "^1.0.0"
-    is-stream "^1.0.0"
-    lowercase-keys "^1.0.0"
-    nested-error-stacks "^1.0.0"
-    object-assign "^3.0.0"
-    prepend-http "^1.0.0"
-    read-all-stream "^3.0.0"
-    timed-out "^2.0.0"
-
 got@^5.0.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
@@ -5533,7 +5494,7 @@ ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
 
-ignore-by-default@^1.0.0:
+ignore-by-default@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
 
@@ -5579,10 +5540,6 @@ indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
 
-infinity-agent@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/infinity-agent/-/infinity-agent-2.0.3.tgz#45e0e2ff7a9eb030b27d62b74b3744b7a7ac4216"
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -5689,9 +5646,9 @@ inquirer@^0.12.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
-inquirer@^3.0.6, inquirer@^3.1.0, inquirer@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.2.tgz#c2aaede1507cc54d826818737742d621bef2e823"
+inquirer@^3.0.6, inquirer@^3.2.2, inquirer@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.3.tgz#1c7b1731cf77b934ec47d22c9ac5aa8fe7fbe095"
   dependencies:
     ansi-escapes "^2.0.0"
     chalk "^2.0.0"
@@ -5831,7 +5788,7 @@ is-extglob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
 
-is-extglob@^2.1.0:
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
@@ -5867,6 +5824,12 @@ is-glob@^3.1.0:
   dependencies:
     is-extglob "^2.1.0"
 
+is-glob@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-hexadecimal@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.1.tgz#6e084bbc92061fbb0971ec58b6ce6d404e24da69"
@@ -5906,7 +5869,7 @@ is-number@^3.0.0:
   dependencies:
     kind-of "^3.0.2"
 
-is-obj@^1.0.0:
+is-obj@^1.0.0, is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
@@ -5966,6 +5929,10 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
+is-regexp@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+
 is-resolvable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
@@ -6304,7 +6271,7 @@ jest-environment-node@^21.0.0:
     jest-mock "^21.0.0"
     jest-util "^21.0.0"
 
-jest-enzyme@^3.8.1:
+jest-enzyme@^3.8.2:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/jest-enzyme/-/jest-enzyme-3.8.2.tgz#b0352ca90193b4acc15509206ec68ddc41d98b6d"
   dependencies:
@@ -6823,12 +6790,6 @@ klaw@^1.0.0:
   optionalDependencies:
     graceful-fs "^4.1.9"
 
-latest-version@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-1.0.1.tgz#72cfc46e3e8d1be651e1ebb54ea9f6ea96f374bb"
-  dependencies:
-    package-json "^1.0.0"
-
 latest-version@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
@@ -6859,7 +6820,7 @@ left-pad@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.1.3.tgz#612f61c033f3a9e08e939f1caebeea41b6f3199a"
 
-lerna@2.1.2:
+lerna@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/lerna/-/lerna-2.1.2.tgz#b07eb7a4d7dd7d44a105262fef49b2229301c577"
   dependencies:
@@ -6915,19 +6876,23 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lint-staged@^4.0.2:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-4.0.4.tgz#9ca6968b30dfbfe81365b7a763cd4f4992896553"
+lint-staged@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-4.1.0.tgz#5d983361566aa5974cd58f0a64afa5acbd9d6118"
   dependencies:
     app-root-path "^2.0.0"
+    chalk "^2.1.0"
     cosmiconfig "^1.1.0"
     execa "^0.8.0"
+    is-glob "^4.0.0"
+    jest-validate "^20.0.3"
     listr "^0.12.0"
-    lodash.chunk "^4.2.0"
+    lodash "^4.17.4"
     minimatch "^3.0.0"
     npm-which "^3.0.1"
     p-map "^1.1.1"
     staged-git-files "0.0.4"
+    stringify-object "^3.2.0"
 
 listr-silent-renderer@^1.1.1:
   version "1.1.1"
@@ -7141,10 +7106,6 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
-lodash.chunk@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.chunk/-/lodash.chunk-4.2.0.tgz#66e5ce1f76ed27b4303d8c6512e8d1216e8106bc"
-
 lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
@@ -7773,12 +7734,6 @@ negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
-nested-error-stacks@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-1.0.2.tgz#19f619591519f096769a5ba9a86e6eeec823c3cf"
-  dependencies:
-    inherits "~2.0.1"
-
 netrc@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/netrc/-/netrc-0.1.4.tgz#6be94fcaca8d77ade0a9670dc460914c94472444"
@@ -7888,20 +7843,20 @@ node-version@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.1.0.tgz#f437d7ba407e65e2c4eaef8887b1718ba523d4f0"
 
-nodemon@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.11.0.tgz#226c562bd2a7b13d3d7518b49ad4828a3623d06c"
+nodemon@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.12.0.tgz#e538548a777340a19f855c4f087b7e528aa3feda"
   dependencies:
-    chokidar "^1.4.3"
-    debug "^2.2.0"
-    es6-promise "^3.0.2"
-    ignore-by-default "^1.0.0"
+    chokidar "^1.7.0"
+    debug "^2.6.8"
+    es6-promise "^3.3.1"
+    ignore-by-default "^1.0.1"
     lodash.defaults "^3.1.2"
-    minimatch "^3.0.0"
-    ps-tree "^1.0.1"
-    touch "1.0.0"
+    minimatch "^3.0.4"
+    ps-tree "^1.1.0"
+    touch "^3.1.0"
     undefsafe "0.0.3"
-    update-notifier "0.5.0"
+    update-notifier "^2.2.0"
 
 nomnom@^1.8.1:
   version "1.8.1"
@@ -8258,13 +8213,6 @@ p-map@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.1.1.tgz#05f5e4ae97a068371bc2a5cc86bfbdbc19c4ae7a"
 
-package-json@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-1.2.0.tgz#c8ecac094227cdf76a316874ed05e27cc939a0e0"
-  dependencies:
-    got "^3.2.0"
-    registry-url "^3.0.0"
-
 package-json@^2.0.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
@@ -8854,9 +8802,9 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@^1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.5.3.tgz#59dadc683345ec6b88f88b94ed4ae7e1da394bfe"
+prettier@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.6.1.tgz#850f411a3116226193e32ea5acfc21c0f9a76d7d"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -8963,7 +8911,7 @@ prr@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
 
-ps-tree@^1.0.1:
+ps-tree@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.1.0.tgz#b421b24140d6203f1ed3c76996b4427b08e8c014"
   dependencies:
@@ -9788,7 +9736,7 @@ registry-auth-token@^3.0.1:
     rc "^1.1.6"
     safe-buffer "^5.0.1"
 
-registry-url@^3.0.0, registry-url@^3.0.3:
+registry-url@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/registry-url/-/registry-url-3.1.0.tgz#3d4ef870f73dde1d77f0cf9a381432444e174942"
   dependencies:
@@ -9964,7 +9912,7 @@ remark-lint-ordered-list-marker-style@^1.0.0:
     unist-util-position "^3.0.0"
     unist-util-visit "^1.1.1"
 
-remark-lint@^6.0.0:
+remark-lint@^6.0.0, remark-lint@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/remark-lint/-/remark-lint-6.0.1.tgz#68b10ec25d5145042f7cfa52649e20ef7bc91482"
   dependencies:
@@ -9999,7 +9947,7 @@ remark-parse@^4.0.0:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-preset-lint-recommended@^3.0.0:
+remark-preset-lint-recommended@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/remark-preset-lint-recommended/-/remark-preset-lint-recommended-3.0.1.tgz#75486577873e20f514cf66e399fcc0d872971049"
   dependencies:
@@ -10807,10 +10755,6 @@ stream-http@^2.3.1:
     to-arraybuffer "^1.0.0"
     xtend "^4.0.0"
 
-stream-shift@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
-
 stream-to-observable@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
@@ -10819,7 +10763,7 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
-string-length@^1.0.0, string-length@^1.0.1:
+string-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"
   dependencies:
@@ -10875,6 +10819,14 @@ stringify-entities@^1.0.1:
     is-alphanumerical "^1.0.0"
     is-hexadecimal "^1.0.0"
 
+stringify-object@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.2.0.tgz#94370a135e41bc048358813bf99481f1315c6aa6"
+  dependencies:
+    get-own-enumerable-property-symbols "^1.0.1"
+    is-obj "^1.0.1"
+    is-regexp "^1.0.0"
+
 stringmap@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/stringmap/-/stringmap-0.2.2.tgz#556c137b258f942b8776f5b2ef582aa069d7d1b1"
@@ -11175,10 +11127,6 @@ time-stamp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
 
-timed-out@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-2.0.0.tgz#f38b0ae81d3747d628001f41dafc652ace671c0a"
-
 timed-out@^3.0.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
@@ -11232,9 +11180,9 @@ toposort@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c"
 
-touch@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
+touch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"
   dependencies:
     nopt "~1.0.10"
 
@@ -11529,18 +11477,6 @@ unzip-response@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
 
-update-notifier@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-0.5.0.tgz#07b5dc2066b3627ab3b4f530130f7eddda07a4cc"
-  dependencies:
-    chalk "^1.0.0"
-    configstore "^1.0.0"
-    is-npm "^1.0.0"
-    latest-version "^1.0.0"
-    repeating "^1.1.2"
-    semver-diff "^2.0.0"
-    string-length "^1.0.0"
-
 update-notifier@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"
@@ -11554,7 +11490,7 @@ update-notifier@^1.0.3:
     semver-diff "^2.0.0"
     xdg-basedir "^2.0.0"
 
-update-notifier@^2.1.0:
+update-notifier@^2.1.0, update-notifier@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-2.2.0.tgz#1b5837cf90c0736d88627732b661c138f86de72f"
   dependencies: