Add react-docgen-displayname-handler (#205)

Improves support of HOCs.

Fixes #202.

docs/Configuration.md

@@ -163,27 +163,33 @@ You can change settings in the `styleguide.config.js` file in your project’s r
   ```
 
 * **`handlers`**<br>
-  Type: `Array of Function`, optional<br>
+  Type: `Array of Function`, optional, default: [[react-docgen-displayname-handler](https://github.com/nerdlabs/react-docgen-displayname-handler)]<br>
   Array of functions used to process the discovered components and generate documentation objects. Default behaviours include discovering component documentation blocks, prop types, and defaults. If setting this property, it is best to build from the default `react-docgen` handler list, such as in the example below. See the [react-docgen handler documentation](https://github.com/reactjs/react-docgen#handlers) for more information about handlers.
 
+  Also note that the default handler, `react-docgen-displayname-handler` should be included to better support higher order components.
+
   ```javascript
   module.exports = {
     // ...
-    handlers: require('react-docgen').defaultHandlers.concat((documentation, path) => {
-      // Calculate a display name for components based upon the declared class name.
-      if (path.value.type === 'ClassDeclaration' && path.value.id.type === 'Identifier') {
-        documentation.set('displayName', path.value.id.name);
-
-        // Calculate the key required to find the component in the module exports
-        if (path.parentPath.value.type === 'ExportNamedDeclaration') {
-          documentation.set('path', path.value.id.name);
+    handlers: require('react-docgen').defaultHandlers.concat(
+      (documentation, path) => {
+        // Calculate a display name for components based upon the declared class name.
+        if (path.value.type === 'ClassDeclaration' && path.value.id.type === 'Identifier') {
+          documentation.set('displayName', path.value.id.name);
+
+          // Calculate the key required to find the component in the module exports
+          if (path.parentPath.value.type === 'ExportNamedDeclaration') {
+            documentation.set('path', path.value.id.name);
+          }
         }
-      }
 
-      // The component is the default export
-      if (path.parentPath.value.type === 'ExportDefaultDeclaration') {
-        documentation.set('path', 'default');
-      }
-    }),
+        // The component is the default export
+        if (path.parentPath.value.type === 'ExportDefaultDeclaration') {
+          documentation.set('path', 'default');
+        }
+      },
+      // To better support higher order components
+      require('react-docgen-displayname-handler').default,
+    ),
   };
   ```

examples/basic/lib/components/WrappedButton/Readme.md

@@ -0,0 +1,3 @@
+Enhanced/Decorated components work as well:
+
+    <WrappedButton>I'm a wrapped button</WrappedButton>

examples/basic/lib/components/WrappedButton/WrappedButton.css

@@ -0,0 +1,10 @@
+.root {
+	padding: .5em 1.5em;
+	color: #666;
+	background-color: #fff;
+	border: 1px solid currentColor;
+	border-radius: .3em;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+}

examples/basic/lib/components/WrappedButton/WrappedButton.js

@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react';
+import s from './WrappedButton.css';
+
+
+/**
+ * A button wrapped by a Decorator/Enhancer
+ */
+const WrappedButton = ({
+	color,
+	size,
+	children,
+}) => {
+	let styles = {
+		color,
+		fontSize: WrappedButton.sizes[size],
+	};
+
+	return (
+		<button className={s.root} style={styles}>{children}</button>
+	);
+};
+WrappedButton.propTypes = {
+	/**
+	 * Button label.
+	 */
+	children: PropTypes.string.isRequired,
+	color: PropTypes.string,
+	size: PropTypes.oneOf(['small', 'normal', 'large']),
+};
+WrappedButton.defaultProps = {
+	color: '#333',
+	size: 'normal',
+};
+WrappedButton.sizes = {
+	small: '10px',
+	normal: '14px',
+	large: '18px',
+};
+
+
+const Decorator = Composed => class MyHOC extends Component {
+	render() {
+		return <Composed {...this.props} />;
+	}
+};
+
+export default Decorator(WrappedButton);

examples/basic/lib/components/WrappedButton/index.js

@@ -0,0 +1 @@
+export { default } from './WrappedButton.js';

package.json

@@ -53,6 +53,7 @@
     "prettyjson": "1.1.3",
     "react-codemirror": "0.2.6",
     "react-docgen": "2.12.1",
+    "react-docgen-displayname-handler": "1.0.0",
     "react-group": "^1.0.0",
     "remark": "~6.0.1",
     "remark-parse": "~2.0.2",

scripts/config.js

@@ -11,6 +11,7 @@ const merge = require('lodash/merge');
 const utils = require('./utils/utils');
 const consts = require('./consts');
 const StyleguidistError = require('./utils/error');
+const displayNameHandler = require('react-docgen-displayname-handler').default;
 
 const CONFIG_FILENAME = 'styleguide.config.js';
 const DEFAULT_CONFIG = {
@@ -30,6 +31,9 @@ const DEFAULT_CONFIG = {
 	getExampleFilename: componentpath => path.join(path.dirname(componentpath), 'Readme.md'),
 	getComponentPathLine: componentpath => componentpath,
 	updateWebpackConfig: null,
+	handlers: [
+		displayNameHandler,
+	],
 };
 const DEPENDENCIES = [
 	{