Fix a prop rendering edge case

Need to figure out a better strategy for traversing the docgen
tree, it's getting pretty hard to follow :/

site/component-page.js

@@ -8,6 +8,48 @@ import Markdown from './markdown';
 
 _.mixin({'pascalCase': _.flow(_.camelCase, _.upperFirst)});
 
+function formatPropType(type) {
+    switch (type.name) {
+    case 'arrayOf':
+        if (type.value.name !== 'custom') {
+            return `${type.name}(${formatPropType(type.value)})`;
+        }
+
+        return 'array';
+
+    case 'element':
+        return 'ReactElement';
+
+    case 'enum':
+        if (type.computed === true) {
+            return _.keys(
+                _.get(Boundless, type.value, {})
+            ).map((key) => `${type.value}.${key}`).join(' or\n');
+        } else if (Array.isArray(type.value)) {
+            return _.map(type.value, 'value').join(' or\n');
+        }
+
+        return `oneOf(${type.value})`;
+
+    case 'func':
+        return 'function';
+
+    case 'instanceOf':
+       return type.value;
+
+    case 'node':
+        return 'any renderable';
+
+    case 'shape':
+        return 'object';
+
+    case 'union':
+        return type.value.map((v) => formatPropType(v)).join(' or ');
+    }
+
+    return type.name;
+}
+
 export default class ComponentPage extends React.PureComponent {
     static propTypes = {
         demo: PropTypes.any,
@@ -28,56 +70,14 @@ export default class ComponentPage extends React.PureComponent {
             </td>
             <td className='prop-implementation'>
                 <h5>Expects</h5>
-                <pre><code>{this.formatPropType(props[name])}</code></pre>
+                <pre><code>{formatPropType(props[name])}</code></pre>
             </td>
             <td className='prop-description'>
                 <Markdown>{props[name].description}</Markdown>
             </td>
         </tr>
     )
 
-    formatPropType = (type) => {
-        switch (type.name) {
-        case 'arrayOf':
-            if (type.value.name !== 'custom') {
-                return `${type.name}(${this.formatPropType(type.value)})`;
-            }
-
-            return 'array';
-
-        case 'element':
-            return 'ReactElement';
-
-        case 'enum':
-            if (type.computed === true) {
-                return _.keys(
-                    _.get(Boundless, type.value, {})
-                ).map((key) => `${type.value}.${key}`).join(' or\n');
-            } else if (Array.isArray(type.value)) {
-                return _.map(type.value, 'value').join(' or\n');
-            }
-
-            return `oneOf(${type.value})`;
-
-        case 'func':
-            return 'function';
-
-        case 'instanceOf':
-           return type.value;
-
-        case 'node':
-            return 'any renderable';
-
-        case 'shape':
-            return 'object';
-
-        case 'union':
-            return type.value.map((v) => this.formatPropType(v)).join(' or ');
-        }
-
-        return type.name;
-    }
-
     /**
      * @param  {Object}         allProps
      * @param  {String}         name       the prop's name, may be a subprop (e.g. foo.bar)
@@ -103,7 +103,9 @@ export default class ComponentPage extends React.PureComponent {
                 <td className='prop-implementation'>
                     <h5>Expects</h5>
                     <pre>
-                        <code>{this.formatPropType(prop.type)}</code>
+                        <code>
+                            {formatPropType(prop.type)}
+                        </code>
                     </pre>
 
                     <h5>Default Value</h5>
@@ -120,8 +122,14 @@ export default class ComponentPage extends React.PureComponent {
             </tr>
         )];
 
-        if (prop.type.name === 'shape' && prop.type.computed && typeof prop.type.value === 'string') {
-            const component = prop.type.value.split('.')[0];
+        if (_.includes(['enum', 'union', 'instanceOf'], prop.type.name) || !prop.type.value) {
+            return rows;
+        }
+
+        let target = prop.type;
+
+        if (target.name === 'shape' && target.computed && _.isString(target.value)) {
+            const [component] = target.value.split('.');
             const resolvedProps = _.get(Boundless, `${component}.__docgenInfo.props`);
 
             return rows.concat(
@@ -131,17 +139,24 @@ export default class ComponentPage extends React.PureComponent {
             );
         }
 
-        if (!!prop.type.value
-            && (prop.type.value.value || prop.type.value.raw)
-            && prop.type.name !== 'enum'
-            && prop.type.name !== 'union'
-            && prop.type.name !== 'instanceOf') {
-            const subProps = prop.type.value.name === 'shape' ? prop.type.value.value : prop.type.value;
+        if (target.value.value || target.value.raw) {
+            let subProps = target.value.name === 'shape' && !target.value.computed
+                           ? target.value.value
+                           : target.value;
+
+             if (subProps.name === 'shape') {
+                const [component] = subProps.value.split('.');
 
-            if (subProps.name && subProps.name === 'custom') {
-                const subPropsRaw = subProps.raw.split('.');
-                const component = subPropsRaw[0];
-                const subPropName = subPropsRaw[2];
+                subProps = _.get(Boundless, `${component}.__docgenInfo.props`);
+
+                return rows.concat(
+                    _.map(
+                        subProps,
+                        (x, subPropName) => this.renderPropTableRows(subProps, subPropName, depth + 1)
+                    )
+                );
+            } else if (subProps.name === 'custom') {
+                const [component, , subPropName] = subProps.raw.split('.');
 
                 return rows.concat(
                     this.renderPropTableRows(
@@ -226,14 +241,11 @@ export default class ComponentPage extends React.PureComponent {
         return (
             <div>
                 <LinkedHeaderText component='h1'>{prettyName}</LinkedHeaderText>
-
                 <Markdown>{descriptionParts[0]}</Markdown>
                 {this.maybeRenderDemo()}
-
                 <Markdown>{descriptionParts.slice(1).join('')}</Markdown>
 
                 <LinkedHeaderText component='h2'>Props</LinkedHeaderText>
-
                 <LinkedHeaderText component='h3'>Required Props</LinkedHeaderText>
                 {this.renderPropTable(_.pickBy(coalesced.props, {required: true}), true)}