Add logic to show style props in docs

website/server/docgenHelpers.js

@@ -0,0 +1,67 @@
+"use strict";
+var b = require('react-docgen/node_modules/recast').types.builders;
+var docgen = require('react-docgen');
+
+function stylePropTypeHandler(documentation, path) {
+  var propTypesPath = docgen.utils.getPropertyValuePath(path, 'propTypes');
+  if (!propTypesPath) {
+    return;
+  }
+  propTypesPath = docgen.utils.resolveToValue(propTypesPath);
+  if (!propTypesPath || propTypesPath.node.type !== 'ObjectExpression') {
+    return;
+  }
+
+  // Check if the there is a style prop
+  propTypesPath.get('properties').each(function(propertyPath) {
+    if (propertyPath.node.type !== 'Property' ||
+        docgen.utils.getPropertyName(propertyPath) !== 'style') {
+      return;
+    }
+    var valuePath = docgen.utils.resolveToValue(propertyPath.get('value'));
+    // If it's a call to StyleSheetPropType, do stuff
+    if (valuePath.node.type !== 'CallExpression' ||
+        valuePath.node.callee.name !== 'StyleSheetPropType') {
+      return;
+    }
+    // Get type of style sheet
+    var styleSheetModule = docgen.utils.resolveToModule(
+      valuePath.get('arguments', 0)
+    );
+    if (styleSheetModule) {
+      var propDescriptor = documentation.getPropDescriptor('style');
+      propDescriptor.type = {name: 'stylesheet', value: styleSheetModule};
+    }
+  });
+}
+
+function findExportedOrFirst(node, recast) {
+  return docgen.resolver.findExportedReactCreateClassCall(node, recast) ||
+    docgen.resolver.findAllReactCreateClassCalls(node, recast)[0];
+}
+
+function findExportedObject(ast, recast) {
+  var objPath;
+  recast.visit(ast, {
+    visitAssignmentExpression: function(path) {
+      if (!objPath && docgen.utils.isExportsOrModuleAssignment(path)) {
+        objPath = docgen.utils.resolveToValue(path.get('right'));
+      }
+      return false;
+    }
+  });
+
+  if (objPath) {
+    var b = recast.types.builders;
+    // This is a bit hacky, but easier than replicating the default propType
+    // handler. All this does is convert `{...}` to `{propTypes: {...}}`.
+    objPath.replace(b.objectExpression([
+      b.property('init', b.literal('propTypes'), objPath.node)
+    ]));
+  }
+  return objPath;
+}
+
+exports.stylePropTypeHandler = stylePropTypeHandler;
+exports.findExportedOrFirst = findExportedOrFirst;
+exports.findExportedObject = findExportedObject;

website/server/extractDocs.js

@@ -7,7 +7,8 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-var docs = require('react-docgen');
+var docgen = require('react-docgen');
+var docgenHelpers = require('./docgenHelpers');
 var fs = require('fs');
 var path = require('path');
 var slugify = require('../core/slugify');
@@ -21,7 +22,7 @@ function getNameFromPath(filepath) {
   return filepath;
 }
 
-function componentsToMarkdown(type, json, filepath, i) {
+function componentsToMarkdown(type, json, filepath, i, styles) {
   var componentName = getNameFromPath(filepath);
 
   var docFilePath = '../docs/' + componentName + '.md';
@@ -29,6 +30,9 @@ function componentsToMarkdown(type, json, filepath, i) {
     json.fullDescription = fs.readFileSync(docFilePath).toString();
   }
   json.type = type;
+  if (styles) {
+    json.styles = styles;
+  }
 
   var res = [
     '---',
@@ -84,20 +88,34 @@ var apis = [
   '../Libraries/Vibration/VibrationIOS.ios.js',
 ];
 
-var all = components.concat(apis);
+var styles = [
+  '../Libraries/StyleSheet/LayoutPropTypes.js',
+  '../Libraries/Components/View/ViewStylePropTypes.js',
+  '../Libraries/Text/TextStylePropTypes.js',
+  '../Libraries/Image/ImageStylePropTypes.js',
+];
+
+var all = components.concat(apis).concat(styles.slice(0, 1));
+var styleDocs = styles.slice(1).reduce(function(docs, filepath) {
+  docs[path.basename(filepath).replace(path.extname(filepath), '')] =
+    docgen.parse(
+      fs.readFileSync(filepath),
+      docgenHelpers.findExportedObject,
+      [docgen.handlers.propTypeHandler]
+    );
+  return docs;
+}, {});
 
 module.exports = function() {
   var i = 0;
   return [].concat(
     components.map(function(filepath) {
-      var json = docs.parse(
+      var json = docgen.parse(
         fs.readFileSync(filepath),
-        function(node, recast) {
-          return docs.resolver.findExportedReactCreateClassCall(node, recast) ||
-            docs.resolver.findAllReactCreateClassCalls(node, recast)[0];
-        }
+        docgenHelpers.findExportedOrFirst,
+        docgen.defaultHandlers.concat(docgenHelpers.stylePropTypeHandler)
       );
-      return componentsToMarkdown('component', json, filepath, i++);
+      return componentsToMarkdown('component', json, filepath, i++, styleDocs);
     }),
     apis.map(function(filepath) {
       try {
@@ -107,6 +125,14 @@ module.exports = function() {
         var json = {};
       }
       return componentsToMarkdown('api', json, filepath, i++);
+    }),
+    styles.slice(0, 1).map(function(filepath) {
+      var json = docgen.parse(
+        fs.readFileSync(filepath),
+        docgenHelpers.findExportedObject,
+        [docgen.handlers.propTypeHandler]
+      );
+      return componentsToMarkdown('style', json, filepath, i++);
     })
   );
 };