From b613d5320b875dce10e17602f3f1116221a38104 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 10 May 2017 12:52:24 -0700 Subject: [PATCH 01/14] added version number. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 553657eb7e37..00b8b912664a 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "storybook", + "version": "1.0.0", "devDependencies": { "babel-cli": "^6.14.0", "babel-core": "^6.24.1", From a546a2e6cc77db568e753b61cb0e70ab9594a68b Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 10 May 2017 13:01:42 -0700 Subject: [PATCH 02/14] working on getting more documentation. --- packages/addon-info/src/components/PropTable.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/addon-info/src/components/PropTable.js b/packages/addon-info/src/components/PropTable.js index d1b069c9b849..002629b053af 100644 --- a/packages/addon-info/src/components/PropTable.js +++ b/packages/addon-info/src/components/PropTable.js @@ -36,13 +36,18 @@ 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]) { + propType = type.__docgenInfo.props[property].type; + } + } props[property] = { property, propType, required, description }; } } From 5ac92864c4a614a0e99c33f4fa5ccb24994e233a Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 10 May 2017 13:16:54 -0700 Subject: [PATCH 03/14] added a post install script. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 00b8b912664a..451d200e4ce6 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ }, "scripts": { "bootstrap": "lerna bootstrap", + "postinstall": "lerna bootstrap --hoist", "lint": "eslint .", "test": "jest --config ./.jestrc.json", "test:watch": "npm test -- --watch", From 38a3c537aafc94beb02ea0fe9ff2bd744efde791 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Sat, 13 May 2017 14:07:31 -0700 Subject: [PATCH 04/14] 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. --- package.json | 1 - .../addon-info/src/components/PropTable.js | 6 +- packages/addon-info/src/components/PropVal.js | 100 +++++++++--------- packages/addon-info/src/components/Story.js | 20 ++++ 4 files changed, 73 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 451d200e4ce6..00b8b912664a 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ }, "scripts": { "bootstrap": "lerna bootstrap", - "postinstall": "lerna bootstrap --hoist", "lint": "eslint .", "test": "jest --config ./.jestrc.json", "test:watch": "npm test -- --watch", diff --git a/packages/addon-info/src/components/PropTable.js b/packages/addon-info/src/components/PropTable.js index 002629b053af..cb6d66ce0f12 100644 --- a/packages/addon-info/src/components/PropTable.js +++ b/packages/addon-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 }; @@ -82,7 +82,7 @@ export default class PropTable extends React.Component { propType required default - description> + description diff --git a/packages/addon-info/src/components/PropVal.js b/packages/addon-info/src/components/PropVal.js index f03af69feb4b..4f488787b0fc 100644 --- a/packages/addon-info/src/components/PropVal.js +++ b/packages/addon-info/src/components/PropVal.js @@ -1,119 +1,119 @@ -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}`] = ; - items[`c${i}`] = ', '; - }); + items[`n${i}`] = + 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 ( [{createFragment(items)}] - ); + ) } -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}`] = {name}; - items[`c${i}`] = ': '; - items[`v${i}`] = ; - items[`m${i}`] = ', '; - }); + items[`k${i}`] = {name} + items[`c${i}`] = ': ' + items[`v${i}`] = + 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 ( {'{'}{createFragment(items)}{'}'} - ); + ) } -function previewProp(val) { - let braceWrap = true; - let content = null; +function previewProp (val) { + let braceWrap = true + let content = null if (typeof val === 'number') { - content = {val}; + content = {val} } else if (typeof val === 'string') { if (val.length > 50) { - val = `${val.slice(0, 50)}…`; + val = `${val.slice(0, 50)}…` } - content = "{val}"; - braceWrap = false; + content = "{val}" + braceWrap = false } else if (typeof val === 'boolean') { - content = {`${val}`}; + content = {`${val}`} } else if (Array.isArray(val)) { - content = previewArray(val); + content = previewArray(val) } else if (typeof val === 'function') { - content = {val.name ? `${val.name}()` : 'anonymous()'}; + content = {val.name ? `${val.name}()` : 'anonymous()'} } else if (!val) { - content = {`${val}`}; + content = {`${val}`} } else if (typeof val !== 'object') { - content = …; + content = … } else if (React.isValidElement(val)) { content = ( {`<${val.type.displayName || val.type.name || val.type} />`} - ); + ) } else { - content = previewObject(val); + content = previewObject(val) } - if (!braceWrap) return content; - return {{ content }}; + if (!braceWrap) return content + return {content} } 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 diff --git a/packages/addon-info/src/components/Story.js b/packages/addon-info/src/components/Story.js index 471375262700..351bab8960b3 100644 --- a/packages/addon-info/src/components/Story.js +++ b/packages/addon-info/src/components/Story.js @@ -121,6 +121,7 @@ export default class Story extends React.Component {
{this._getInfoContent()} + {this._getComponentDescription()} {this._getSourceCode()} {this._getPropTables()}
@@ -162,6 +163,7 @@ export default class Story extends React.Component {
{this._getInfoHeader()} {this._getInfoContent()} + {this._getComponentDescription()} {this._getSourceCode()} {this._getPropTables()}
@@ -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 = ( +
+ {window.STORYBOOK_REACT_CLASSES[key].docgenInfo.description} +
+ ); + } + }); + } + + return retDiv; + } + _getSourceCode() { if (!this.props.showSource) { return null; From d61acd68377b6e0347b6fc4157723f728561546c Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Sat, 13 May 2017 14:09:34 -0700 Subject: [PATCH 05/14] removed version number. --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 00b8b912664a..553657eb7e37 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "name": "storybook", - "version": "1.0.0", "devDependencies": { "babel-cli": "^6.14.0", "babel-core": "^6.24.1", From 2ba65113899f3e5fe90001e14ea62cad5ccfaff4 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 17 May 2017 14:40:05 -0700 Subject: [PATCH 06/14] removed reference to `window` since it is not needed. --- packages/addon-info/src/components/Story.js | 202 ++++++++++---------- 1 file changed, 100 insertions(+), 102 deletions(-) diff --git a/packages/addon-info/src/components/Story.js b/packages/addon-info/src/components/Story.js index 351bab8960b3..9365ccb65c94 100644 --- a/packages/addon-info/src/components/Story.js +++ b/packages/addon-info/src/components/Story.js @@ -1,10 +1,10 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import MTRC from 'markdown-to-react-components'; -import PropTable from './PropTable'; -import Node from './Node'; -import { baseFonts } from './theme'; -import { Pre } from './markdown'; +import PropTypes from 'prop-types' +import React from 'react' +import MTRC from 'markdown-to-react-components' +import PropTable from './PropTable' +import Node from './Node' +import { baseFonts } from './theme' +import { Pre } from './markdown' const stylesheet = { link: { @@ -17,13 +17,13 @@ const stylesheet = { background: '#28c', color: '#fff', padding: '5px 15px', - cursor: 'pointer', + cursor: 'pointer' }, topRight: { top: 0, right: 0, - borderRadius: '0 0 0 5px', - }, + borderRadius: '0 0 0 5px' + } }, info: { position: 'fixed', @@ -33,81 +33,81 @@ const stylesheet = { left: 0, right: 0, padding: '0 40px', - overflow: 'auto', + overflow: 'auto' }, children: { position: 'relative', - zIndex: 0, + zIndex: 0 }, infoBody: { ...baseFonts, fontWeight: 300, lineHeight: 1.45, - fontSize: '15px', + fontSize: '15px' }, infoContent: { - marginBottom: 0, + marginBottom: 0 }, jsxInfoContent: { borderTop: '1px solid #eee', - margin: '20px 0 0 0', + margin: '20px 0 0 0' }, header: { h1: { margin: 0, padding: 0, - fontSize: '35px', + fontSize: '35px' }, h2: { margin: '0 0 10px 0', padding: 0, fontWeight: 400, - fontSize: '22px', + fontSize: '22px' }, body: { borderBottom: '1px solid #eee', paddingTop: 10, - marginBottom: 10, - }, + marginBottom: 10 + } }, source: { h1: { margin: '20px 0 0 0', padding: '0 0 5px 0', fontSize: '25px', - borderBottom: '1px solid #EEE', - }, + borderBottom: '1px solid #EEE' + } }, propTableHead: { - margin: '20px 0 0 0', - }, -}; + margin: '20px 0 0 0' + } +} export default class Story extends React.Component { - constructor(...args) { - super(...args); + constructor (...args) { + super(...args) this.state = { open: false, - stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), - }; - MTRC.configure(this.props.mtrcConf); + stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))) + } + MTRC.configure(this.props.mtrcConf) } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps (nextProps) { this.setState({ - stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))), - }); + stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))) + }) } - _renderStory() { + _renderStory () { return (
{this.props.children}
- ); + ) } - _renderInline() { + _renderInline () { return (
@@ -127,29 +127,29 @@ export default class Story extends React.Component {
- ); + ) } - _renderOverlay() { + _renderOverlay () { const linkStyle = { ...stylesheet.link.base, - ...stylesheet.link.topRight, - }; + ...stylesheet.link.topRight + } - const infoStyle = Object.assign({}, stylesheet.info); + const infoStyle = Object.assign({}, stylesheet.info) if (!this.state.open) { - infoStyle.display = 'none'; + infoStyle.display = 'none' } const openOverlay = () => { - this.setState({ open: true }); - return false; - }; + this.setState({ open: true }) + return false + } const closeOverlay = () => { - this.setState({ open: false }); - return false; - }; + this.setState({ open: false }) + return false + } return (
@@ -170,12 +170,12 @@ export default class Story extends React.Component {
- ); + ) } - _getInfoHeader() { + _getInfoHeader () { if (!this.props.context || !this.props.showHeader) { - return null; + return null } return ( @@ -183,12 +183,12 @@ export default class Story extends React.Component {

{this.props.context.kind}

{this.props.context.story}

- ); + ) } - _getInfoContent() { + _getInfoContent () { if (!this.props.info) { - return ''; + return '' } if (React.isValidElement(this.props.info)) { @@ -196,47 +196,47 @@ export default class Story extends React.Component {
{this.props.info}
- ); + ) } - const lines = this.props.info.split('\n'); + const lines = this.props.info.split('\n') while (lines[0].trim() === '') { - lines.shift(); + lines.shift() } - let padding = 0; - const matches = lines[0].match(/^ */); + let padding = 0 + const matches = lines[0].match(/^ */) if (matches) { - padding = matches[0].length; + padding = matches[0].length } - const source = lines.map(s => s.slice(padding)).join('\n'); + const source = lines.map(s => s.slice(padding)).join('\n') return (
{MTRC(source).tree}
- ); + ) } - _getComponentDescription() { - let retDiv = null; + _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) { + 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 = (
- {window.STORYBOOK_REACT_CLASSES[key].docgenInfo.description} + {STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
- ); + ) } - }); + }) } - return retDiv; + return retDiv } - _getSourceCode() { + _getSourceCode () { if (!this.props.showSource) { - return null; + return null } return ( @@ -248,53 +248,53 @@ export default class Story extends React.Component { ))} - ); + ) } - _getPropTables() { - const types = new Map(); + _getPropTables () { + const types = new Map() if (this.props.propTables === null) { - return null; + return null } if (!this.props.children) { - return null; + return null } if (this.props.propTables) { this.props.propTables.forEach(type => { - types.set(type, true); - }); + types.set(type, true) + }) } // depth-first traverse and collect types const extract = children => { if (!children) { - return; + return } if (Array.isArray(children)) { - children.forEach(extract); - return; + children.forEach(extract) + return } if (children.props && children.props.children) { - extract(children.props.children); + extract(children.props.children) } if (typeof children === 'string' || typeof children.type === 'string' || (Array.isArray(this.props.propTablesExclude) && // also ignore excluded types ~this.props.propTablesExclude.indexOf(children.type))) { - return; + return } if (children.type && !types.has(children.type)) { - types.set(children.type, true); + types.set(children.type, true) } - }; + } // extract components from children - extract(this.props.children); + extract(this.props.children) - const array = Array.from(types.keys()); - array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)); + const array = Array.from(types.keys()) + array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)) const propTables = array.map((type, idx) => (
@@ -303,10 +303,10 @@ export default class Story extends React.Component {
- )); + )) if (!propTables || propTables.length === 0) { - return null; + return null } return ( @@ -314,21 +314,19 @@ export default class Story extends React.Component {

Prop Types

{propTables} - ); - - return; + ) } - render() { + render () { if (this.props.showInline) { - return this._renderInline(); + return this._renderInline() } - return this._renderOverlay(); + return this._renderOverlay() } } -Story.displayName = 'Story'; +Story.displayName = 'Story' Story.propTypes = { context: PropTypes.object, info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), @@ -339,12 +337,12 @@ Story.propTypes = { showSource: PropTypes.bool, styles: PropTypes.func.isRequired, children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - mtrcConf: PropTypes.object, -}; + mtrcConf: PropTypes.object +} Story.defaultProps = { showInline: false, showHeader: true, showSource: true, - mtrcConf: {}, -}; + mtrcConf: {} +} From cd3ab0fbad1e5ce1977297ed33d1c2ffe55e2725 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Thu, 18 May 2017 15:23:40 -0700 Subject: [PATCH 07/14] fixed code style problems. --- .../addon-info/src/components/PropTable.js | 7 +- packages/addon-info/src/components/PropVal.js | 100 ++++----- packages/addon-info/src/components/Story.js | 199 +++++++++--------- 3 files changed, 157 insertions(+), 149 deletions(-) diff --git a/packages/addon-info/src/components/PropTable.js b/packages/addon-info/src/components/PropTable.js index cb6d66ce0f12..96000bb1182a 100644 --- a/packages/addon-info/src/components/PropTable.js +++ b/packages/addon-info/src/components/PropTable.js @@ -44,7 +44,12 @@ 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] && 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; } } diff --git a/packages/addon-info/src/components/PropVal.js b/packages/addon-info/src/components/PropVal.js index 4f488787b0fc..7fe7bf3603c3 100644 --- a/packages/addon-info/src/components/PropVal.js +++ b/packages/addon-info/src/components/PropVal.js @@ -1,119 +1,119 @@ -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}`] = - items[`c${i}`] = ', ' - }) + items[`n${i}`] = ; + 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 ( [{createFragment(items)}] - ) + ); } -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}`] = {name} - items[`c${i}`] = ': ' - items[`v${i}`] = - items[`m${i}`] = ', ' - }) + items[`k${i}`] = {name}; + items[`c${i}`] = ': '; + items[`v${i}`] = ; + 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 ( {'{'}{createFragment(items)}{'}'} - ) + ); } -function previewProp (val) { - let braceWrap = true - let content = null +function previewProp(val) { + let braceWrap = true; + let content = null; if (typeof val === 'number') { - content = {val} + content = {val}; } else if (typeof val === 'string') { if (val.length > 50) { - val = `${val.slice(0, 50)}…` + val = `${val.slice(0, 50)}…`; } - content = "{val}" - braceWrap = false + content = "{val}"; + braceWrap = false; } else if (typeof val === 'boolean') { - content = {`${val}`} + content = {`${val}`}; } else if (Array.isArray(val)) { - content = previewArray(val) + content = previewArray(val); } else if (typeof val === 'function') { - content = {val.name ? `${val.name}()` : 'anonymous()'} + content = {val.name ? `${val.name}()` : 'anonymous()'}; } else if (!val) { - content = {`${val}`} + content = {`${val}`}; } else if (typeof val !== 'object') { - content = … + content = …; } else if (React.isValidElement(val)) { content = ( {`<${val.type.displayName || val.type.name || val.type} />`} - ) + ); } else { - content = previewObject(val) + content = previewObject(val); } - if (!braceWrap) return content - return {content} + if (!braceWrap) return content; + return {content}; } 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; diff --git a/packages/addon-info/src/components/Story.js b/packages/addon-info/src/components/Story.js index 9365ccb65c94..a3736a479cb3 100644 --- a/packages/addon-info/src/components/Story.js +++ b/packages/addon-info/src/components/Story.js @@ -1,10 +1,10 @@ -import PropTypes from 'prop-types' -import React from 'react' -import MTRC from 'markdown-to-react-components' -import PropTable from './PropTable' -import Node from './Node' -import { baseFonts } from './theme' -import { Pre } from './markdown' +import PropTypes from 'prop-types'; +import React from 'react'; +import MTRC from 'markdown-to-react-components'; +import PropTable from './PropTable'; +import Node from './Node'; +import { baseFonts } from './theme'; +import { Pre } from './markdown'; const stylesheet = { link: { @@ -17,13 +17,13 @@ const stylesheet = { background: '#28c', color: '#fff', padding: '5px 15px', - cursor: 'pointer' + cursor: 'pointer', }, topRight: { top: 0, right: 0, - borderRadius: '0 0 0 5px' - } + borderRadius: '0 0 0 5px', + }, }, info: { position: 'fixed', @@ -33,81 +33,81 @@ const stylesheet = { left: 0, right: 0, padding: '0 40px', - overflow: 'auto' + overflow: 'auto', }, children: { position: 'relative', - zIndex: 0 + zIndex: 0, }, infoBody: { ...baseFonts, fontWeight: 300, lineHeight: 1.45, - fontSize: '15px' + fontSize: '15px', }, infoContent: { - marginBottom: 0 + marginBottom: 0, }, jsxInfoContent: { borderTop: '1px solid #eee', - margin: '20px 0 0 0' + margin: '20px 0 0 0', }, header: { h1: { margin: 0, padding: 0, - fontSize: '35px' + fontSize: '35px', }, h2: { margin: '0 0 10px 0', padding: 0, fontWeight: 400, - fontSize: '22px' + fontSize: '22px', }, body: { borderBottom: '1px solid #eee', paddingTop: 10, - marginBottom: 10 - } + marginBottom: 10, + }, }, source: { h1: { margin: '20px 0 0 0', padding: '0 0 5px 0', fontSize: '25px', - borderBottom: '1px solid #EEE' - } + borderBottom: '1px solid #EEE', + }, }, propTableHead: { - margin: '20px 0 0 0' - } -} + margin: '20px 0 0 0', + }, +}; export default class Story extends React.Component { - constructor (...args) { - super(...args) + constructor(...args) { + super(...args); this.state = { open: false, - stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))) - } - MTRC.configure(this.props.mtrcConf) + stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), + }; + MTRC.configure(this.props.mtrcConf); } - componentWillReceiveProps (nextProps) { + componentWillReceiveProps(nextProps) { this.setState({ - stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))) - }) + stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))), + }); } - _renderStory () { + _renderStory() { return (
{this.props.children}
- ) + ); } - _renderInline () { + _renderInline() { return (
@@ -127,29 +127,29 @@ export default class Story extends React.Component {
- ) + ); } - _renderOverlay () { + _renderOverlay() { const linkStyle = { ...stylesheet.link.base, - ...stylesheet.link.topRight - } + ...stylesheet.link.topRight, + }; - const infoStyle = Object.assign({}, stylesheet.info) + const infoStyle = Object.assign({}, stylesheet.info); if (!this.state.open) { - infoStyle.display = 'none' + infoStyle.display = 'none'; } const openOverlay = () => { - this.setState({ open: true }) - return false - } + this.setState({ open: true }); + return false; + }; const closeOverlay = () => { - this.setState({ open: false }) - return false - } + this.setState({ open: false }); + return false; + }; return (
@@ -170,12 +170,12 @@ export default class Story extends React.Component {
- ) + ); } - _getInfoHeader () { + _getInfoHeader() { if (!this.props.context || !this.props.showHeader) { - return null + return null; } return ( @@ -183,12 +183,12 @@ export default class Story extends React.Component {

{this.props.context.kind}

{this.props.context.story}

- ) + ); } - _getInfoContent () { + _getInfoContent() { if (!this.props.info) { - return '' + return ''; } if (React.isValidElement(this.props.info)) { @@ -196,28 +196,28 @@ export default class Story extends React.Component {
{this.props.info}
- ) + ); } - const lines = this.props.info.split('\n') + const lines = this.props.info.split('\n'); while (lines[0].trim() === '') { - lines.shift() + lines.shift(); } - let padding = 0 - const matches = lines[0].match(/^ */) + let padding = 0; + const matches = lines[0].match(/^ */); if (matches) { - padding = matches[0].length + padding = matches[0].length; } - const source = lines.map(s => s.slice(padding)).join('\n') + const source = lines.map(s => s.slice(padding)).join('\n'); return (
{MTRC(source).tree}
- ) + ); } - _getComponentDescription () { - let retDiv = null + _getComponentDescription() { + let retDiv = null; if (Object.keys(STORYBOOK_REACT_CLASSES).length) { Object.keys(STORYBOOK_REACT_CLASSES).forEach((key, index) => { @@ -226,17 +226,17 @@ export default class Story extends React.Component {
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
- ) + ); } - }) + }); } - return retDiv + return retDiv; } - _getSourceCode () { + _getSourceCode() { if (!this.props.showSource) { - return null + return null; } return ( @@ -248,53 +248,56 @@ export default class Story extends React.Component { ))} - ) + ); } - _getPropTables () { - const types = new Map() + _getPropTables() { + const types = new Map(); if (this.props.propTables === null) { - return null + return null; } if (!this.props.children) { - return null + return null; } if (this.props.propTables) { this.props.propTables.forEach(type => { - types.set(type, true) - }) + types.set(type, true); + }); } // depth-first traverse and collect types const extract = children => { if (!children) { - return + return; } if (Array.isArray(children)) { - children.forEach(extract) - return + children.forEach(extract); + return; } if (children.props && children.props.children) { - extract(children.props.children) + extract(children.props.children); } - if (typeof children === 'string' || typeof children.type === 'string' || + if ( + typeof children === 'string' || + typeof children.type === 'string' || (Array.isArray(this.props.propTablesExclude) && // also ignore excluded types - ~this.props.propTablesExclude.indexOf(children.type))) { - return + ~this.props.propTablesExclude.indexOf(children.type)) + ) { + return; } if (children.type && !types.has(children.type)) { - types.set(children.type, true) + types.set(children.type, true); } - } + }; // extract components from children - extract(this.props.children) + extract(this.props.children); - const array = Array.from(types.keys()) - array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)) + const array = Array.from(types.keys()); + array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)); const propTables = array.map((type, idx) => (
@@ -303,10 +306,10 @@ export default class Story extends React.Component {
- )) + )); if (!propTables || propTables.length === 0) { - return null + return null; } return ( @@ -314,19 +317,19 @@ export default class Story extends React.Component {

Prop Types

{propTables} - ) + ); } - render () { + render() { if (this.props.showInline) { - return this._renderInline() + return this._renderInline(); } - return this._renderOverlay() + return this._renderOverlay(); } } -Story.displayName = 'Story' +Story.displayName = 'Story'; Story.propTypes = { context: PropTypes.object, info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), @@ -337,12 +340,12 @@ Story.propTypes = { showSource: PropTypes.bool, styles: PropTypes.func.isRequired, children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - mtrcConf: PropTypes.object -} + mtrcConf: PropTypes.object, +}; Story.defaultProps = { showInline: false, showHeader: true, showSource: true, - mtrcConf: {} -} + mtrcConf: {}, +}; From a984acc52b3c3433eef3586be47acc212b2ada9c Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 10 May 2017 12:52:24 -0700 Subject: [PATCH 08/14] added version number. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 4aa157f36bb8..a5ac9b4cb088 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "storybook", + "version": "1.0.0", "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.24.1", From edd6b6920a296b1e2c7104706e4077b7a33fe427 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 10 May 2017 13:01:42 -0700 Subject: [PATCH 09/14] working on getting more documentation. --- addons/info/src/components/PropTable.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js index 5fdec2d4ddf0..3aa67e5a8606 100644 --- a/addons/info/src/components/PropTable.js +++ b/addons/info/src/components/PropTable.js @@ -36,13 +36,18 @@ 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]) { + propType = type.__docgenInfo.props[property].type; + } + } props[property] = { property, propType, required, description }; } } From 7958923c23b49cdd85141b374a2cdd2188808c50 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 10 May 2017 13:16:54 -0700 Subject: [PATCH 10/14] added a post install script. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a5ac9b4cb088..6ec45574df23 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ }, "scripts": { "bootstrap": "lerna bootstrap", + "postinstall": "lerna bootstrap --hoist", "lint": "eslint .", "test": "jest", "test:watch": "npm test -- --watch", From ad15e80cc2de3af977d9006dea9785bf8842deb3 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Sat, 13 May 2017 14:07:31 -0700 Subject: [PATCH 11/14] 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 | 4 +- addons/info/src/components/PropVal.js | 96 ++++++++++++------------- addons/info/src/components/Story.js | 20 ++++++ package.json | 1 - 4 files changed, 70 insertions(+), 51 deletions(-) diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js index 3aa67e5a8606..cb6d66ce0f12 100644 --- a/addons/info/src/components/PropTable.js +++ b/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 }; diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js index 7fe7bf3603c3..6f066ccfe521 100644 --- a/addons/info/src/components/PropVal.js +++ b/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}`] = ; - items[`c${i}`] = ', '; - }); + items[`n${i}`] = + 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 ( [{createFragment(items)}] - ); + ) } -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}`] = {name}; - items[`c${i}`] = ': '; - items[`v${i}`] = ; - items[`m${i}`] = ', '; - }); + items[`k${i}`] = {name} + items[`c${i}`] = ': ' + items[`v${i}`] = + 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 ( {'{'}{createFragment(items)}{'}'} - ); + ) } -function previewProp(val) { - let braceWrap = true; - let content = null; +function previewProp (val) { + let braceWrap = true + let content = null if (typeof val === 'number') { - content = {val}; + content = {val} } else if (typeof val === 'string') { if (val.length > 50) { - val = `${val.slice(0, 50)}…`; + val = `${val.slice(0, 50)}…` } - content = "{val}"; - braceWrap = false; + content = "{val}" + braceWrap = false } else if (typeof val === 'boolean') { - content = {`${val}`}; + content = {`${val}`} } else if (Array.isArray(val)) { - content = previewArray(val); + content = previewArray(val) } else if (typeof val === 'function') { - content = {val.name ? `${val.name}()` : 'anonymous()'}; + content = {val.name ? `${val.name}()` : 'anonymous()'} } else if (!val) { - content = {`${val}`}; + content = {`${val}`} } else if (typeof val !== 'object') { - content = …; + content = … } else if (React.isValidElement(val)) { content = ( {`<${val.type.displayName || val.type.name || val.type} />`} - ); + ) } 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 diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index e8ef89f5c398..0f8ee56cddd0 100644 --- 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 {
{this._getInfoContent()} + {this._getComponentDescription()} {this._getSourceCode()} {this._getPropTables()}
@@ -162,6 +163,7 @@ export default class Story extends React.Component {
{this._getInfoHeader()} {this._getInfoContent()} + {this._getComponentDescription()} {this._getSourceCode()} {this._getPropTables()}
@@ -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 = ( +
+ {window.STORYBOOK_REACT_CLASSES[key].docgenInfo.description} +
+ ); + } + }); + } + + return retDiv; + } + _getSourceCode() { if (!this.props.showSource) { return null; diff --git a/package.json b/package.json index 6ec45574df23..a5ac9b4cb088 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ }, "scripts": { "bootstrap": "lerna bootstrap", - "postinstall": "lerna bootstrap --hoist", "lint": "eslint .", "test": "jest", "test:watch": "npm test -- --watch", From 8dc13690c5942a6151c7e5c97e44027ece8ff3fa Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Sat, 13 May 2017 14:09:34 -0700 Subject: [PATCH 12/14] removed version number. --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index a5ac9b4cb088..4aa157f36bb8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "name": "storybook", - "version": "1.0.0", "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.24.1", From 622dadb4ef804952207fcac3bf75860ce2bb4608 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 17 May 2017 14:40:05 -0700 Subject: [PATCH 13/14] removed reference to `window` since it is not needed. --- addons/info/src/components/Story.js | 200 ++++++++++++++-------------- 1 file changed, 99 insertions(+), 101 deletions(-) diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 0f8ee56cddd0..48ef0758a290 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -1,10 +1,10 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import MTRC from 'markdown-to-react-components'; -import PropTable from './PropTable'; -import Node from './Node'; -import { baseFonts } from './theme'; -import { Pre } from './markdown'; +import PropTypes from 'prop-types' +import React from 'react' +import MTRC from 'markdown-to-react-components' +import PropTable from './PropTable' +import Node from './Node' +import { baseFonts } from './theme' +import { Pre } from './markdown' const stylesheet = { link: { @@ -17,13 +17,13 @@ const stylesheet = { background: '#28c', color: '#fff', padding: '5px 15px', - cursor: 'pointer', + cursor: 'pointer' }, topRight: { top: 0, right: 0, - borderRadius: '0 0 0 5px', - }, + borderRadius: '0 0 0 5px' + } }, info: { position: 'fixed', @@ -33,81 +33,81 @@ const stylesheet = { left: 0, right: 0, padding: '0 40px', - overflow: 'auto', + overflow: 'auto' }, children: { position: 'relative', - zIndex: 0, + zIndex: 0 }, infoBody: { ...baseFonts, fontWeight: 300, lineHeight: 1.45, - fontSize: '15px', + fontSize: '15px' }, infoContent: { - marginBottom: 0, + marginBottom: 0 }, jsxInfoContent: { borderTop: '1px solid #eee', - margin: '20px 0 0 0', + margin: '20px 0 0 0' }, header: { h1: { margin: 0, padding: 0, - fontSize: '35px', + fontSize: '35px' }, h2: { margin: '0 0 10px 0', padding: 0, fontWeight: 400, - fontSize: '22px', + fontSize: '22px' }, body: { borderBottom: '1px solid #eee', paddingTop: 10, - marginBottom: 10, - }, + marginBottom: 10 + } }, source: { h1: { margin: '20px 0 0 0', padding: '0 0 5px 0', fontSize: '25px', - borderBottom: '1px solid #EEE', - }, + borderBottom: '1px solid #EEE' + } }, propTableHead: { - margin: '20px 0 0 0', - }, -}; + margin: '20px 0 0 0' + } +} export default class Story extends React.Component { - constructor(...args) { - super(...args); + constructor (...args) { + super(...args) this.state = { open: false, - stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), - }; - MTRC.configure(this.props.mtrcConf); + stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))) + } + MTRC.configure(this.props.mtrcConf) } - componentWillReceiveProps(nextProps) { + componentWillReceiveProps (nextProps) { this.setState({ - stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))), - }); + stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))) + }) } - _renderStory() { + _renderStory () { return (
{this.props.children}
- ); + ) } - _renderInline() { + _renderInline () { return (
@@ -127,29 +127,29 @@ export default class Story extends React.Component {
- ); + ) } - _renderOverlay() { + _renderOverlay () { const linkStyle = { ...stylesheet.link.base, - ...stylesheet.link.topRight, - }; + ...stylesheet.link.topRight + } - const infoStyle = Object.assign({}, stylesheet.info); + const infoStyle = Object.assign({}, stylesheet.info) if (!this.state.open) { - infoStyle.display = 'none'; + infoStyle.display = 'none' } const openOverlay = () => { - this.setState({ open: true }); - return false; - }; + this.setState({ open: true }) + return false + } const closeOverlay = () => { - this.setState({ open: false }); - return false; - }; + this.setState({ open: false }) + return false + } return (
@@ -170,12 +170,12 @@ export default class Story extends React.Component {
- ); + ) } - _getInfoHeader() { + _getInfoHeader () { if (!this.props.context || !this.props.showHeader) { - return null; + return null } return ( @@ -183,12 +183,12 @@ export default class Story extends React.Component {

{this.props.context.kind}

{this.props.context.story}

- ); + ) } - _getInfoContent() { + _getInfoContent () { if (!this.props.info) { - return ''; + return '' } if (React.isValidElement(this.props.info)) { @@ -196,47 +196,47 @@ export default class Story extends React.Component {
{this.props.info}
- ); + ) } - const lines = this.props.info.split('\n'); + const lines = this.props.info.split('\n') while (lines[0].trim() === '') { - lines.shift(); + lines.shift() } - let padding = 0; - const matches = lines[0].match(/^ */); + let padding = 0 + const matches = lines[0].match(/^ */) if (matches) { - padding = matches[0].length; + padding = matches[0].length } - const source = lines.map(s => s.slice(padding)).join('\n'); + const source = lines.map(s => s.slice(padding)).join('\n') return (
{MTRC(source).tree}
- ); + ) } - _getComponentDescription() { - let retDiv = null; + _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) { + 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 = (
- {window.STORYBOOK_REACT_CLASSES[key].docgenInfo.description} + {STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
- ); + ) } - }); + }) } - return retDiv; + return retDiv } - _getSourceCode() { + _getSourceCode () { if (!this.props.showSource) { - return null; + return null } return ( @@ -248,37 +248,37 @@ export default class Story extends React.Component { ))} - ); + ) } - _getPropTables() { - const types = new Map(); + _getPropTables () { + const types = new Map() if (this.props.propTables === null) { - return null; + return null } if (!this.props.children) { - return null; + return null } if (this.props.propTables) { this.props.propTables.forEach(type => { - types.set(type, true); - }); + types.set(type, true) + }) } // depth-first traverse and collect types const extract = children => { if (!children) { - return; + return } if (Array.isArray(children)) { - children.forEach(extract); - return; + children.forEach(extract) + return } if (children.props && children.props.children) { - extract(children.props.children); + extract(children.props.children) } if ( typeof children === 'string' || @@ -289,15 +289,15 @@ export default class Story extends React.Component { return; } if (children.type && !types.has(children.type)) { - types.set(children.type, true); + types.set(children.type, true) } - }; + } // extract components from children - extract(this.props.children); + extract(this.props.children) - const array = Array.from(types.keys()); - array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)); + const array = Array.from(types.keys()) + array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)) const propTables = array.map((type, idx) => (
@@ -306,10 +306,10 @@ export default class Story extends React.Component {
- )); + )) if (!propTables || propTables.length === 0) { - return null; + return null } return ( @@ -317,21 +317,19 @@ export default class Story extends React.Component {

Prop Types

{propTables} - ); - - return; + ) } - render() { + render () { if (this.props.showInline) { - return this._renderInline(); + return this._renderInline() } - return this._renderOverlay(); + return this._renderOverlay() } } -Story.displayName = 'Story'; +Story.displayName = 'Story' Story.propTypes = { context: PropTypes.object, info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), @@ -342,12 +340,12 @@ Story.propTypes = { showSource: PropTypes.bool, styles: PropTypes.func.isRequired, children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - mtrcConf: PropTypes.object, -}; + mtrcConf: PropTypes.object +} Story.defaultProps = { showInline: false, showHeader: true, showSource: true, - mtrcConf: {}, -}; + mtrcConf: {} +} From ad0fcfe94f39ff4472295bf3ed36443b1e0847dc Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Thu, 18 May 2017 15:23:40 -0700 Subject: [PATCH 14/14] fixed code style problems. --- addons/info/src/components/PropTable.js | 7 +- addons/info/src/components/PropVal.js | 96 ++++++------ addons/info/src/components/Story.js | 190 ++++++++++++------------ 3 files changed, 149 insertions(+), 144 deletions(-) diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js index cb6d66ce0f12..96000bb1182a 100644 --- a/addons/info/src/components/PropTable.js +++ b/addons/info/src/components/PropTable.js @@ -44,7 +44,12 @@ 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] && 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; } } diff --git a/addons/info/src/components/PropVal.js b/addons/info/src/components/PropVal.js index 6f066ccfe521..7fe7bf3603c3 100644 --- a/addons/info/src/components/PropVal.js +++ b/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}`] = - items[`c${i}`] = ', ' - }) + items[`n${i}`] = ; + 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 ( [{createFragment(items)}] - ) + ); } -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}`] = {name} - items[`c${i}`] = ': ' - items[`v${i}`] = - items[`m${i}`] = ', ' - }) + items[`k${i}`] = {name}; + items[`c${i}`] = ': '; + items[`v${i}`] = ; + 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 ( {'{'}{createFragment(items)}{'}'} - ) + ); } -function previewProp (val) { - let braceWrap = true - let content = null +function previewProp(val) { + let braceWrap = true; + let content = null; if (typeof val === 'number') { - content = {val} + content = {val}; } else if (typeof val === 'string') { if (val.length > 50) { - val = `${val.slice(0, 50)}…` + val = `${val.slice(0, 50)}…`; } - content = "{val}" - braceWrap = false + content = "{val}"; + braceWrap = false; } else if (typeof val === 'boolean') { - content = {`${val}`} + content = {`${val}`}; } else if (Array.isArray(val)) { - content = previewArray(val) + content = previewArray(val); } else if (typeof val === 'function') { - content = {val.name ? `${val.name}()` : 'anonymous()'} + content = {val.name ? `${val.name}()` : 'anonymous()'}; } else if (!val) { - content = {`${val}`} + content = {`${val}`}; } else if (typeof val !== 'object') { - content = … + content = …; } else if (React.isValidElement(val)) { content = ( {`<${val.type.displayName || val.type.name || val.type} />`} - ) + ); } 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; diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js index 48ef0758a290..a3736a479cb3 100644 --- a/addons/info/src/components/Story.js +++ b/addons/info/src/components/Story.js @@ -1,10 +1,10 @@ -import PropTypes from 'prop-types' -import React from 'react' -import MTRC from 'markdown-to-react-components' -import PropTable from './PropTable' -import Node from './Node' -import { baseFonts } from './theme' -import { Pre } from './markdown' +import PropTypes from 'prop-types'; +import React from 'react'; +import MTRC from 'markdown-to-react-components'; +import PropTable from './PropTable'; +import Node from './Node'; +import { baseFonts } from './theme'; +import { Pre } from './markdown'; const stylesheet = { link: { @@ -17,13 +17,13 @@ const stylesheet = { background: '#28c', color: '#fff', padding: '5px 15px', - cursor: 'pointer' + cursor: 'pointer', }, topRight: { top: 0, right: 0, - borderRadius: '0 0 0 5px' - } + borderRadius: '0 0 0 5px', + }, }, info: { position: 'fixed', @@ -33,81 +33,81 @@ const stylesheet = { left: 0, right: 0, padding: '0 40px', - overflow: 'auto' + overflow: 'auto', }, children: { position: 'relative', - zIndex: 0 + zIndex: 0, }, infoBody: { ...baseFonts, fontWeight: 300, lineHeight: 1.45, - fontSize: '15px' + fontSize: '15px', }, infoContent: { - marginBottom: 0 + marginBottom: 0, }, jsxInfoContent: { borderTop: '1px solid #eee', - margin: '20px 0 0 0' + margin: '20px 0 0 0', }, header: { h1: { margin: 0, padding: 0, - fontSize: '35px' + fontSize: '35px', }, h2: { margin: '0 0 10px 0', padding: 0, fontWeight: 400, - fontSize: '22px' + fontSize: '22px', }, body: { borderBottom: '1px solid #eee', paddingTop: 10, - marginBottom: 10 - } + marginBottom: 10, + }, }, source: { h1: { margin: '20px 0 0 0', padding: '0 0 5px 0', fontSize: '25px', - borderBottom: '1px solid #EEE' - } + borderBottom: '1px solid #EEE', + }, }, propTableHead: { - margin: '20px 0 0 0' - } -} + margin: '20px 0 0 0', + }, +}; export default class Story extends React.Component { - constructor (...args) { - super(...args) + constructor(...args) { + super(...args); this.state = { open: false, - stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))) - } - MTRC.configure(this.props.mtrcConf) + stylesheet: this.props.styles(JSON.parse(JSON.stringify(stylesheet))), + }; + MTRC.configure(this.props.mtrcConf); } - componentWillReceiveProps (nextProps) { + componentWillReceiveProps(nextProps) { this.setState({ - stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))) - }) + stylesheet: nextProps.styles(JSON.parse(JSON.stringify(stylesheet))), + }); } - _renderStory () { + _renderStory() { return (
{this.props.children}
- ) + ); } - _renderInline () { + _renderInline() { return (
@@ -127,29 +127,29 @@ export default class Story extends React.Component {
- ) + ); } - _renderOverlay () { + _renderOverlay() { const linkStyle = { ...stylesheet.link.base, - ...stylesheet.link.topRight - } + ...stylesheet.link.topRight, + }; - const infoStyle = Object.assign({}, stylesheet.info) + const infoStyle = Object.assign({}, stylesheet.info); if (!this.state.open) { - infoStyle.display = 'none' + infoStyle.display = 'none'; } const openOverlay = () => { - this.setState({ open: true }) - return false - } + this.setState({ open: true }); + return false; + }; const closeOverlay = () => { - this.setState({ open: false }) - return false - } + this.setState({ open: false }); + return false; + }; return (
@@ -170,12 +170,12 @@ export default class Story extends React.Component {
- ) + ); } - _getInfoHeader () { + _getInfoHeader() { if (!this.props.context || !this.props.showHeader) { - return null + return null; } return ( @@ -183,12 +183,12 @@ export default class Story extends React.Component {

{this.props.context.kind}

{this.props.context.story}

- ) + ); } - _getInfoContent () { + _getInfoContent() { if (!this.props.info) { - return '' + return ''; } if (React.isValidElement(this.props.info)) { @@ -196,28 +196,28 @@ export default class Story extends React.Component {
{this.props.info}
- ) + ); } - const lines = this.props.info.split('\n') + const lines = this.props.info.split('\n'); while (lines[0].trim() === '') { - lines.shift() + lines.shift(); } - let padding = 0 - const matches = lines[0].match(/^ */) + let padding = 0; + const matches = lines[0].match(/^ */); if (matches) { - padding = matches[0].length + padding = matches[0].length; } - const source = lines.map(s => s.slice(padding)).join('\n') + const source = lines.map(s => s.slice(padding)).join('\n'); return (
{MTRC(source).tree}
- ) + ); } - _getComponentDescription () { - let retDiv = null + _getComponentDescription() { + let retDiv = null; if (Object.keys(STORYBOOK_REACT_CLASSES).length) { Object.keys(STORYBOOK_REACT_CLASSES).forEach((key, index) => { @@ -226,17 +226,17 @@ export default class Story extends React.Component {
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
- ) + ); } - }) + }); } - return retDiv + return retDiv; } - _getSourceCode () { + _getSourceCode() { if (!this.props.showSource) { - return null + return null; } return ( @@ -248,37 +248,37 @@ export default class Story extends React.Component { ))} - ) + ); } - _getPropTables () { - const types = new Map() + _getPropTables() { + const types = new Map(); if (this.props.propTables === null) { - return null + return null; } if (!this.props.children) { - return null + return null; } if (this.props.propTables) { this.props.propTables.forEach(type => { - types.set(type, true) - }) + types.set(type, true); + }); } // depth-first traverse and collect types const extract = children => { if (!children) { - return + return; } if (Array.isArray(children)) { - children.forEach(extract) - return + children.forEach(extract); + return; } if (children.props && children.props.children) { - extract(children.props.children) + extract(children.props.children); } if ( typeof children === 'string' || @@ -289,15 +289,15 @@ export default class Story extends React.Component { return; } if (children.type && !types.has(children.type)) { - types.set(children.type, true) + types.set(children.type, true); } - } + }; // extract components from children - extract(this.props.children) + extract(this.props.children); - const array = Array.from(types.keys()) - array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)) + const array = Array.from(types.keys()); + array.sort((a, b) => (a.displayName || a.name) > (b.displayName || b.name)); const propTables = array.map((type, idx) => (
@@ -306,10 +306,10 @@ export default class Story extends React.Component {
- )) + )); if (!propTables || propTables.length === 0) { - return null + return null; } return ( @@ -317,19 +317,19 @@ export default class Story extends React.Component {

Prop Types

{propTables} - ) + ); } - render () { + render() { if (this.props.showInline) { - return this._renderInline() + return this._renderInline(); } - return this._renderOverlay() + return this._renderOverlay(); } } -Story.displayName = 'Story' +Story.displayName = 'Story'; Story.propTypes = { context: PropTypes.object, info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), @@ -340,12 +340,12 @@ Story.propTypes = { showSource: PropTypes.bool, styles: PropTypes.func.isRequired, children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - mtrcConf: PropTypes.object -} + mtrcConf: PropTypes.object, +}; Story.defaultProps = { showInline: false, showHeader: true, showSource: true, - mtrcConf: {} -} + mtrcConf: {}, +};