added code to support js documentation for adding descriptions to a component, fixed issue with content was being rendered as an object and give errors for that, added a fix to when you use PropTypes from something other than React that you can get the type from docgen.

addons/info/src/components/PropTable.js

@@ -44,8 +44,8 @@ export default class PropTable extends React.Component {
           ? type.__docgenInfo.props[property].description
           : null;
         if (propType === 'other') {
-          if (type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property]) {
-            propType = type.__docgenInfo.props[property].type;
+          if (type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property] && type.__docgenInfo.props[property].type) {
+            propType = type.__docgenInfo.props[property].type.name;
           }
         }
         props[property] = { property, propType, required, description };

addons/info/src/components/PropVal.js

@@ -1,109 +1,109 @@
-import React from 'react';
-import createFragment from 'react-addons-create-fragment';
+import React from 'react'
+import createFragment from 'react-addons-create-fragment'
 
 const valueStyles = {
   func: {
-    color: '#170',
+    color: '#170'
   },
 
   attr: {
-    color: '#666',
+    color: '#666'
   },
 
   object: {
-    color: '#666',
+    color: '#666'
   },
 
   array: {
-    color: '#666',
+    color: '#666'
   },
 
   number: {
-    color: '#a11',
+    color: '#a11'
   },
 
   string: {
     color: '#22a',
-    wordBreak: 'break-word',
+    wordBreak: 'break-word'
   },
 
   bool: {
-    color: '#a11',
+    color: '#a11'
   },
 
   empty: {
-    color: '#777',
-  },
-};
+    color: '#777'
+  }
+}
 
-function previewArray(val) {
-  const items = {};
+function previewArray (val) {
+  const items = {}
   val.slice(0, 3).forEach((item, i) => {
-    items[`n${i}`] = <PropVal val={item} />;
-    items[`c${i}`] = ', ';
-  });
+    items[`n${i}`] = <PropVal val={item} />
+    items[`c${i}`] = ', '
+  })
   if (val.length > 3) {
-    items.last = '…';
+    items.last = '…'
   } else {
-    delete items[`c${val.length - 1}`];
+    delete items[`c${val.length - 1}`]
   }
   return (
     <span style={valueStyles.array}>
       [{createFragment(items)}]
     </span>
-  );
+  )
 }
 
-function previewObject(val) {
-  const names = Object.keys(val);
-  const items = {};
+function previewObject (val) {
+  const names = Object.keys(val)
+  const items = {}
   names.slice(0, 3).forEach((name, i) => {
-    items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>;
-    items[`c${i}`] = ': ';
-    items[`v${i}`] = <PropVal val={val[name]} />;
-    items[`m${i}`] = ', ';
-  });
+    items[`k${i}`] = <span style={valueStyles.attr}>{name}</span>
+    items[`c${i}`] = ': '
+    items[`v${i}`] = <PropVal val={val[name]} />
+    items[`m${i}`] = ', '
+  })
   if (names.length > 3) {
-    items.rest = '…';
+    items.rest = '…'
   } else {
-    delete items[`m${names.length - 1}`];
+    delete items[`m${names.length - 1}`]
   }
   return (
     <span style={valueStyles.object}>
       {'{'}{createFragment(items)}{'}'}
     </span>
-  );
+  )
 }
 
-function previewProp(val) {
-  let braceWrap = true;
-  let content = null;
+function previewProp (val) {
+  let braceWrap = true
+  let content = null
   if (typeof val === 'number') {
-    content = <span style={valueStyles.number}>{val}</span>;
+    content = <span style={valueStyles.number}>{val}</span>
   } else if (typeof val === 'string') {
     if (val.length > 50) {
-      val = `${val.slice(0, 50)}…`;
+      val = `${val.slice(0, 50)}…`
     }
-    content = <span style={valueStyles.string}>"{val}"</span>;
-    braceWrap = false;
+    content = <span style={valueStyles.string}>"{val}"</span>
+    braceWrap = false
   } else if (typeof val === 'boolean') {
-    content = <span style={valueStyles.bool}>{`${val}`}</span>;
+    content = <span style={valueStyles.bool}>{`${val}`}</span>
   } else if (Array.isArray(val)) {
-    content = previewArray(val);
+    content = previewArray(val)
   } else if (typeof val === 'function') {
-    content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>;
+    content = <span style={valueStyles.func}>{val.name ? `${val.name}()` : 'anonymous()'}</span>
   } else if (!val) {
-    content = <span style={valueStyles.empty}>{`${val}`}</span>;
+    content = <span style={valueStyles.empty}>{`${val}`}</span>
   } else if (typeof val !== 'object') {
-    content = <span>…</span>;
+    content = <span>…</span>
   } else if (React.isValidElement(val)) {
     content = (
       <span style={valueStyles.object}>
         {`<${val.type.displayName || val.type.name || val.type} />`}
       </span>
-    );
+    )
   } else {
-    content = previewObject(val);
+    content = previewObject(val)
   }
 
   if (!braceWrap) return content;
@@ -111,9 +111,9 @@ function previewProp(val) {
 }
 
 export default class PropVal extends React.Component {
-  render() {
-    return previewProp(this.props.val);
+  render () {
+    return previewProp(this.props.val)
   }
 }
 
-module.exports = PropVal;
+module.exports = PropVal

addons/info/src/components/Story.js

@@ -121,6 +121,7 @@ export default class Story extends React.Component {
         <div style={this.state.stylesheet.infoPage}>
           <div style={this.state.stylesheet.infoBody}>
             {this._getInfoContent()}
+            {this._getComponentDescription()}
             {this._getSourceCode()}
             {this._getPropTables()}
           </div>
@@ -162,6 +163,7 @@ export default class Story extends React.Component {
             <div style={this.state.stylesheet.infoBody}>
               {this._getInfoHeader()}
               {this._getInfoContent()}
+              {this._getComponentDescription()}
               {this._getSourceCode()}
               {this._getPropTables()}
             </div>
@@ -214,6 +216,24 @@ export default class Story extends React.Component {
     );
   }
 
+  _getComponentDescription() {
+    let retDiv = null;
+
+    if (Object.keys(window.STORYBOOK_REACT_CLASSES).length) {
+      Object.keys(window.STORYBOOK_REACT_CLASSES).forEach((key, index) => {
+        if (window.STORYBOOK_REACT_CLASSES[key].name === this.props.context.kind) {
+          retDiv = (
+            <div>
+              {window.STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
+            </div>
+          );
+        }
+      });
+    }
+
+    return retDiv;
+  }
+
   _getSourceCode() {
     if (!this.props.showSource) {
       return null;

package.json

@@ -28,7 +28,6 @@
   },
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "postinstall": "lerna bootstrap --hoist",
     "lint": "eslint .",
     "test": "jest",
     "test:watch": "npm test -- --watch",