From ab9dfe4c8353a8334a66f062f4ff41be97710d14 Mon Sep 17 00:00:00 2001 From: Jeremy Gayed Date: Mon, 24 Oct 2016 12:08:15 -0400 Subject: [PATCH 1/3] Adds react-docgen-displayname-handler --- docs/Configuration.md | 4 +- .../lib/components/WrappedButton/Readme.md | 3 ++ .../WrappedButton/WrappedButton.css | 10 ++++ .../components/WrappedButton/WrappedButton.js | 47 +++++++++++++++++++ .../lib/components/WrappedButton/index.js | 1 + package.json | 1 + scripts/config.js | 4 ++ 7 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 examples/basic/lib/components/WrappedButton/Readme.md create mode 100644 examples/basic/lib/components/WrappedButton/WrappedButton.css create mode 100644 examples/basic/lib/components/WrappedButton/WrappedButton.js create mode 100644 examples/basic/lib/components/WrappedButton/index.js diff --git a/docs/Configuration.md b/docs/Configuration.md index 96c981f0b..09b5dbf92 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -163,9 +163,11 @@ You can change settings in the `styleguide.config.js` file in your project’s r ``` * **`handlers`**
- Type: `Array of Function`, optional
+ Type: `Array of Function`, optional, default: [[react-docgen-displayname-handler](https://github.com/nerdlabs/react-docgen-displayname-handler)]
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. + > NOTE: By default, `react-docgen-displayname-handler` is included which provides better support for Higher Order Components. If you'd like to add additional handlers, be sure to _add_ to the Array rather than replace entirely. + ```javascript module.exports = { // ... diff --git a/examples/basic/lib/components/WrappedButton/Readme.md b/examples/basic/lib/components/WrappedButton/Readme.md new file mode 100644 index 000000000..64b8f2c0a --- /dev/null +++ b/examples/basic/lib/components/WrappedButton/Readme.md @@ -0,0 +1,3 @@ +Enhanced/Decorated components work as well: + + I'm a wrapped button diff --git a/examples/basic/lib/components/WrappedButton/WrappedButton.css b/examples/basic/lib/components/WrappedButton/WrappedButton.css new file mode 100644 index 000000000..0f84e067c --- /dev/null +++ b/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; +} diff --git a/examples/basic/lib/components/WrappedButton/WrappedButton.js b/examples/basic/lib/components/WrappedButton/WrappedButton.js new file mode 100644 index 000000000..5d6cf9958 --- /dev/null +++ b/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: Button.sizes[size], + }; + + return ( + + ); +}; +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 ; + } +}; + +export default Decorator(WrappedButton); diff --git a/examples/basic/lib/components/WrappedButton/index.js b/examples/basic/lib/components/WrappedButton/index.js new file mode 100644 index 000000000..2b5f86c3f --- /dev/null +++ b/examples/basic/lib/components/WrappedButton/index.js @@ -0,0 +1 @@ +export { default } from './WrappedButton.js'; diff --git a/package.json b/package.json index 0a11fd909..1e03828e7 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "prettyjson": "1.1.3", "react-codemirror": "0.2.6", "react-docgen": "2.11.0", + "react-docgen-displayname-handler": "1.0.0", "remark": "~6.0.1", "remark-parse": "~2.0.2", "semver-utils": "1.1.1", diff --git a/scripts/config.js b/scripts/config.js index 832adaeb2..b7fc67441 100644 --- a/scripts/config.js +++ b/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 = [ { From 71599b8c809bfa97ec65959f0e17ab997e19e570 Mon Sep 17 00:00:00 2001 From: Jeremy Gayed Date: Mon, 24 Oct 2016 12:32:12 -0400 Subject: [PATCH 2/3] de-lint --- examples/basic/lib/components/WrappedButton/WrappedButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/basic/lib/components/WrappedButton/WrappedButton.js b/examples/basic/lib/components/WrappedButton/WrappedButton.js index 5d6cf9958..4e349db2b 100644 --- a/examples/basic/lib/components/WrappedButton/WrappedButton.js +++ b/examples/basic/lib/components/WrappedButton/WrappedButton.js @@ -12,7 +12,7 @@ const WrappedButton = ({ }) => { let styles = { color, - fontSize: Button.sizes[size], + fontSize: WrappedButton.sizes[size], }; return ( From d4efa8aac512998384462cc3a96c10c9cea10129 Mon Sep 17 00:00:00 2001 From: Jeremy Gayed Date: Wed, 26 Oct 2016 21:48:15 -0400 Subject: [PATCH 3/3] Show example of adding react-docgen-displayname-handler --- docs/Configuration.md | 34 +++++++++++++++++++--------------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/docs/Configuration.md b/docs/Configuration.md index 09b5dbf92..530a5b49c 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -166,26 +166,30 @@ You can change settings in the `styleguide.config.js` file in your project’s r Type: `Array of Function`, optional, default: [[react-docgen-displayname-handler](https://github.com/nerdlabs/react-docgen-displayname-handler)]
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. - > NOTE: By default, `react-docgen-displayname-handler` is included which provides better support for Higher Order Components. If you'd like to add additional handlers, be sure to _add_ to the Array rather than replace entirely. + 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, + ), }; ```