Merge pull request #1030 from bigassdragon/master

Added component description from __docgenInfo, Added the ability to get the PropType from __docgenInfo for prop table, Fixed an issue with PropVal rendering an object
storybookjs · May 19, 2017 · c777084 · c777084
2 parents a47d8d1 + d08b51b
commit c777084
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js
@@ -36,13 +36,23 @@ export default class PropTable extends React.Component {
           continue;
         }
         const typeInfo = type.propTypes[property];
-        const propType = PropTypesMap.get(typeInfo) || 'other';
+        let propType = PropTypesMap.get(typeInfo) || 'other';
         const required = typeInfo.isRequired === undefined ? 'yes' : 'no';
         const description = type.__docgenInfo &&
           type.__docgenInfo.props &&
           type.__docgenInfo.props[property]
           ? type.__docgenInfo.props[property].description
           : null;
+        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;
+          }
+        }
         props[property] = { property, propType, required, description };
       }
     }

diff --git a/addons/info/src/components/Story.js b/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(STORYBOOK_REACT_CLASSES).length) {
+      Object.keys(STORYBOOK_REACT_CLASSES).forEach((key, index) => {
+        if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.kind) {
+          retDiv = (
+            <div>
+              {STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
+            </div>
+          );
+        }
+      });
+    }
+
+    return retDiv;
+  }
+
   _getSourceCode() {
     if (!this.props.showSource) {
       return null;
@@ -298,8 +318,6 @@ export default class Story extends React.Component {
         {propTables}
       </div>
     );
-
-    return;
   }
 
   render() {