From b613d5320b875dce10e17602f3f1116221a38104 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 10 May 2017 12:52:24 -0700 Subject: [PATCH 01/27] added version number. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 553657eb7e3..00b8b912664 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/27] 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 d1b069c9b84..002629b053a 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/27] added a post install script. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 00b8b912664..451d200e4ce 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/27] 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 451d200e4ce..00b8b912664 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 002629b053a..cb6d66ce0f1 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 f03af69feb4..4f488787b0f 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 47137526270..351bab8960b 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/27] removed version number. --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 00b8b912664..553657eb7e3 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 64892e360474bd6ee5c03e835eefe6b1a2b80c3b Mon Sep 17 00:00:00 2001 From: Daniel Duan Date: Tue, 4 Apr 2017 18:57:06 -0400 Subject: [PATCH 06/27] Added error message for missing or invalid storyName --- app/react/src/client/preview/client_api.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/react/src/client/preview/client_api.js b/app/react/src/client/preview/client_api.js index ecbabc571fa..f5688faeb90 100644 --- a/app/react/src/client/preview/client_api.js +++ b/app/react/src/client/preview/client_api.js @@ -25,7 +25,7 @@ export default class ClientApi { storiesOf(kind, m) { if (!kind && typeof kind !== 'string') { - throw new Error('Invalid kind provided for stories, should be a string'); + throw new Error('Invalid or missing kind provided for stories, should be a string'); } if (m && m.hot) { @@ -49,6 +49,10 @@ export default class ClientApi { }); api.add = (storyName, getStory) => { + if (typeof storyName !== 'string') { + throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`); + } + if (this._storyStore.hasStory(kind, storyName)) { throw new Error(`Story of "${kind}" named "${storyName}" already exists`); } From 2ba65113899f3e5fe90001e14ea62cad5ccfaff4 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Wed, 17 May 2017 14:40:05 -0700 Subject: [PATCH 07/27] 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 351bab8960b..9365ccb65c9 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 03c3babe607036aecc92cb64148407f75d05c92a Mon Sep 17 00:00:00 2001 From: Andrew Hyndman Date: Thu, 18 May 2017 22:58:27 +1000 Subject: [PATCH 08/27] 1052-resolve-output-path Fixes #1052 I've tested this locally and it resolves the issue I encountered. --- app/react/src/server/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/react/src/server/build.js b/app/react/src/server/build.js index d63279f5449..ecd57702552 100644 --- a/app/react/src/server/build.js +++ b/app/react/src/server/build.js @@ -60,7 +60,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir); // custom `.babelrc` file and `webpack.config.js` files // NOTE changes to env should be done before calling `getBaseConfig` const config = loadConfig('PRODUCTION', getBaseConfig(), configDir); -config.output.path = outputDir; +config.output.path = path.resolve(outputDir); // copy all static files if (program.staticDir) { From 9535e02ca1ee8e547b469695ca3cc3b14434dd53 Mon Sep 17 00:00:00 2001 From: Daniel Duan Date: Thu, 18 May 2017 12:39:07 -0400 Subject: [PATCH 09/27] Upgraded webpack PostCSS plugin definition --- .../server/config/defaults/webpack.config.js | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/app/react/src/server/config/defaults/webpack.config.js b/app/react/src/server/config/defaults/webpack.config.js index b82ed7b4864..0dd3b719f35 100644 --- a/app/react/src/server/config/defaults/webpack.config.js +++ b/app/react/src/server/config/defaults/webpack.config.js @@ -5,18 +5,7 @@ import { includePaths, excludePaths } from '../utils'; // Add a default custom config which is similar to what React Create App does. module.exports = storybookBaseConfig => { const newConfig = { ...storybookBaseConfig }; - newConfig.plugins = [ - ...storybookBaseConfig.plugins, - new webpack.LoaderOptionsPlugin({ - options: { - postcss: [ - autoprefixer({ - browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'], - }), - ], - }, - }), - ]; + newConfig.module.rules = [ ...storybookBaseConfig.module.rules, { @@ -31,7 +20,16 @@ module.exports = storybookBaseConfig => { importLoaders: 1, }, }, - 'postcss-loader', + { + loader: 'postcss-loader', + options: { + plugins: () => [ + autoprefixer({ + browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'], + }), + ], + }, + }, ], }, { From 3732bcdf5006aecb70facf8c44254484c14aea4c Mon Sep 17 00:00:00 2001 From: Aaron Mc Adam Date: Wed, 17 May 2017 18:53:28 +0100 Subject: [PATCH 10/27] fix(codemod): update for new package names --- .../update-organisation-name.input.js | 22 +++++++++--- .../update-organisation-name.output.js | 22 +++++++++--- .../transforms/update-organisation-name.js | 36 ++++++++++++------- 3 files changed, 59 insertions(+), 21 deletions(-) diff --git a/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.input.js b/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.input.js index f5bb299e79b..ec039bdd8f7 100644 --- a/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.input.js +++ b/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.input.js @@ -1,5 +1,19 @@ /* eslint-disable */ -import '@kadira/storybook-addon-knobs/register'; -import '@kadira/storybook-addon-options/register'; -import '@kadira/storybook/addons'; -import { storiesOf } from '@kadira/storybook'; \ No newline at end of file +import '@kadira/storybook-addons'; +import '@kadira/react-storybook-decorator-centered'; +import '@kadira/storybook-addon-comments'; +import '@kadira/storybook-addon-graphql'; +import '@kadira/storybook-addon-info'; +import '@kadira/storybook-addon-knobs'; +import '@kadira/storybook-addon-links'; +import '@kadira/storybook-addon-notes'; +import '@kadira/storybook-addon-options'; +import 'storyshots'; +import '@kadira/storybook-channels'; +import '@kadira/storybook-channel-postmsg'; +import '@kadira/storybook-channel-websocket'; +import '@kadira/getstorybook'; +import '@kadira/react-storybook'; +import '@kadira/react-native-storybook'; +import '@kadira/storybook-ui'; +import { storiesOf } from '@kadira/react-storybook'; diff --git a/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.js b/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.js index efc7a34c91e..999ad944df6 100644 --- a/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.js +++ b/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.js @@ -1,5 +1,19 @@ /* eslint-disable */ -import '@storybook/storybook-addon-knobs/register'; -import '@storybook/storybook-addon-options/register'; -import '@storybook/storybook/addons'; -import { storiesOf } from '@storybook/storybook'; \ No newline at end of file +import '@storybook/addons'; +import '@storybook/addon-centered'; +import '@storybook/addon-comments'; +import '@storybook/addon-graphql'; +import '@storybook/addon-info'; +import '@storybook/addon-knobs'; +import '@storybook/addon-links'; +import '@storybook/addon-notes'; +import '@storybook/addon-options'; +import '@storybook/addon-storyshots'; +import '@storybook/channels'; +import '@storybook/channel-postmessage'; +import '@storybook/channel-websocket'; +import '@storybook/cli'; +import '@storybook/react'; +import '@storybook/react-native'; +import '@storybook/ui'; +import { storiesOf } from '@storybook/react'; diff --git a/lib/codemod/src/transforms/update-organisation-name.js b/lib/codemod/src/transforms/update-organisation-name.js index fb1c4bd5c1a..f66f76a90fa 100644 --- a/lib/codemod/src/transforms/update-organisation-name.js +++ b/lib/codemod/src/transforms/update-organisation-name.js @@ -1,26 +1,37 @@ // Demo at https://astexplorer.net/#/gist/f2d0b42c37e4556a4f816892be6ca402/latest export default function transformer(file, api) { const j = api.jscodeshift; - - /** - * Checks whether the node value matches a Storybook package - * @param {ImportDeclaration.Node} the import declaration node - * @returns {boolean} whether the node value matches a Storybook package - */ - const isStorybookPackage = node => node.value.source.value.includes('@kadira'); + const packageNames = { + '@kadira/storybook-addons': '@storybook/addons', + '@kadira/react-storybook-decorator-centered': '@storybook/addon-centered', + '@kadira/storybook-addon-comments': '@storybook/addon-comments', + '@kadira/storybook-addon-graphql': '@storybook/addon-graphql', + '@kadira/storybook-addon-info': '@storybook/addon-info', + '@kadira/storybook-addon-knobs': '@storybook/addon-knobs', + '@kadira/storybook-addon-links': '@storybook/addon-links', + '@kadira/storybook-addon-notes': '@storybook/addon-notes', + '@kadira/storybook-addon-options': '@storybook/addon-options', + storyshots: '@storybook/addon-storyshots', + '@kadira/storybook-channels': '@storybook/channels', + '@kadira/storybook-channel-postmsg': '@storybook/channel-postmessage', + '@kadira/storybook-channel-websocket': '@storybook/channel-websocket', + '@kadira/getstorybook': '@storybook/cli', + '@kadira/react-storybook': '@storybook/react', + '@kadira/react-native-storybook': '@storybook/react-native', + '@kadira/storybook-ui': '@storybook/ui', + }; /** * Returns the name of the Storybook packages with the organisation name, - * replacing the old `@storybook/` prefix. + * replacing the old `@kadira/` prefix. * @param {string} oldPackageName the name of the old package * @return {string} the new package name * @example - * // returns '@storybook/storybook' - * getNewPackageName('@storybook/storybook') + * // returns '@storybook/react' + * getNewPackageName('@kadira/react-storybook') */ const getNewPackageName = oldPackageName => { - const packageNameWithoutPrefix = oldPackageName.slice(7); - const packageNameWithOrganisation = `@storybook${packageNameWithoutPrefix}`; + const packageNameWithOrganisation = packageNames[oldPackageName]; return packageNameWithOrganisation; }; @@ -39,7 +50,6 @@ export default function transformer(file, api) { return j(file.source) .find(j.ImportDeclaration) - .filter(isStorybookPackage) .replaceWith(updatePackageName) .toSource({ quote: 'single' }); } From bb4a7ac8464441343ccd9594f1a0d6ffac612b49 Mon Sep 17 00:00:00 2001 From: Aaron Mc Adam Date: Thu, 18 May 2017 17:57:07 +0100 Subject: [PATCH 11/27] chore(jest): update to v20's default configuration file * we no longer have to pass a `--config` flag to Jest * renames .jestrc json to jest.config.js * jest-enzyme now includes snapshot support by default --- .jestrc.json | 23 ----------------------- jest.config.js | 14 ++++++++++++++ package.json | 13 ++++++------- 3 files changed, 20 insertions(+), 30 deletions(-) delete mode 100644 .jestrc.json create mode 100644 jest.config.js diff --git a/.jestrc.json b/.jestrc.json deleted file mode 100644 index 9d5dd48c424..00000000000 --- a/.jestrc.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "cacheDirectory": ".cache/jest", - "clearMocks": true, - "moduleNameMapper": { - "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", - "\\.(css|scss)$": "/__mocks__/styleMock.js" - }, - "projects": [ - "/packages/*", - "/examples/*" - ], - "collectCoverage": false, - "collectCoverageFrom": [ - "packages/**/*.{js,jsx}", - "!**/generators/**" - ], - "coverageDirectory": "coverage", - "testEnvironment": "jsdom", - "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js", - "snapshotSerializers": [ - "enzyme-to-json/serializer" - ] -} diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000000..9c2938d5b1d --- /dev/null +++ b/jest.config.js @@ -0,0 +1,14 @@ +module.exports = { + cacheDirectory: '.cache/jest', + clearMocks: true, + moduleNameMapper: { + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js', + '\\.(css|scss)$': '/__mocks__/styleMock.js', + }, + projects: ['/packages/*', '/examples/*'], + collectCoverage: false, + collectCoverageFrom: ['packages/**/*.{js,jsx}', '!**/generators/**'], + coverageDirectory: 'coverage', + testEnvironment: 'jsdom', + setupTestFrameworkScriptFile: './node_modules/jest-enzyme/lib/index.js', +}; diff --git a/package.json b/package.json index 277d7bea8bf..dd7b3a65e6e 100644 --- a/package.json +++ b/package.json @@ -11,26 +11,25 @@ "babel-preset-stage-0": "^6.24.1", "codecov": "^2.1.0", "enzyme": "^2.8.2", - "enzyme-to-json": "^1.5.1", "eslint": "^3.19.0", "eslint-config-airbnb-base": "^11.1.3", "eslint-plugin-import": "^2.2.0", - "eslint-plugin-jest": "^20.0.0", + "eslint-plugin-jest": "^20.0.3", "eslint-plugin-prettier": "^2.0.1", - "jest": "^20.0.0", - "jest-enzyme": "^3.1.0", + "jest": "^20.0.3", + "jest-enzyme": "^3.1.1", "lerna": "2.0.0-rc.4", "prettier": "^1.3.0", "react": "^15.5.4", - "react-addons-test-utils": "^15.5.1", + "react-test-renderer": "^15.5.4", "react-dom": "^15.5.4", "shelljs": "^0.7.7" }, "scripts": { "bootstrap": "lerna bootstrap", "lint": "eslint .", - "test": "jest --config ./.jestrc.json", + "test": "jest", "test:watch": "npm test -- --watch", "coverage": "codecov" } -} +} \ No newline at end of file From cd75e249174328fb84af542ce07b47dfff646f0f Mon Sep 17 00:00:00 2001 From: Daniel Duan Date: Thu, 18 May 2017 16:09:24 -0400 Subject: [PATCH 12/27] Removed `>` typo in Info prop table header --- addons/info/src/components/PropTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/info/src/components/PropTable.js b/addons/info/src/components/PropTable.js index d1b069c9b84..5fdec2d4ddf 100644 --- a/addons/info/src/components/PropTable.js +++ b/addons/info/src/components/PropTable.js @@ -77,7 +77,7 @@ export default class PropTable extends React.Component { propType required default - description> + description From 00e76f2d3b106ea16ca0fb87cdde951947ac3852 Mon Sep 17 00:00:00 2001 From: Xavier Damman Date: Thu, 18 May 2017 13:19:37 -0700 Subject: [PATCH 13/27] Added backers and sponsors on the README --- README.md | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) diff --git a/README.md b/README.md index 8d94819c0b7..ff1ba5a13f1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # Storybook +[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors) [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) @@ -52,3 +53,76 @@ For full documentation on using Storybook visit: [storybooks.js.org](https://sto We welcome contributions to Storybook! There are many ways to contribute to this project. [Get started here](CONTRIBUTING.md) + + +## Backers + +Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/storybook#backer)] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +## Sponsors + +Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/storybook#sponsor)] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 3aca1b0a6d0988ee893107adb05d59ebbaf57545 Mon Sep 17 00:00:00 2001 From: Xavier Damman Date: Thu, 18 May 2017 13:19:37 -0700 Subject: [PATCH 14/27] Added call to donate after npm install --- package.json | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 277d7bea8bf..6145062d4eb 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,14 @@ "lint": "eslint .", "test": "jest --config ./.jestrc.json", "test:watch": "npm test -- --watch", - "coverage": "codecov" + "coverage": "codecov", + "postinstall": "opencollective postinstall" + }, + "dependencies": { + "opencollective": "^1.0.3" + }, + "collective": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" } -} +} \ No newline at end of file From 98bf318e4234cd4c5f058bac9ad2900f37a1a4ae Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 May 2017 23:59:15 +0200 Subject: [PATCH 15/27] update Readme --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ff1ba5a13f1..1ef7d81708f 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,13 @@ # Storybook -[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors) [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/) [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) [![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847) -[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) +[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) [![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/) +[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors) + +--- Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. From 24bb606faaf10399319ece6eb50d30b0558a440b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 May 2017 00:04:45 +0200 Subject: [PATCH 16/27] Update Readme --- README.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 1ef7d81708f..c247fd29756 100644 --- a/README.md +++ b/README.md @@ -33,16 +33,18 @@ Once it's installed, you can `npm run storybook` and it will run the development For full documentation on using Storybook visit: [storybooks.js.org](https://storybooks.js.org) -## Main Projects +## Projects + +### Main Projects - [Storybook for react](app/react) - Storybook for React components - [Storybook for react-native](app/react-native) - Storybook for React components -## Sub Projects +### Sub Projects - [Storyshots](lib/storyshots) - Easy snapshot testing for storybook - [CLI](lib/cli) - Streamlined installation for a variety of app types - [examples](examples) - Code examples to illustrate different Storybook use cases -## Addons +### Addons - [addon-actions](addons/actions/) - Log actions as users interact with components in storybook - [addon-comments](addons/comments/) - Comment on storybook stories - [addon-graphql](addons/graphql/) - Query a GraphQL server within Storybook stories @@ -57,7 +59,7 @@ We welcome contributions to Storybook! There are many ways to contribute to this project. [Get started here](CONTRIBUTING.md) -## Backers +### Backers Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/storybook#backer)] @@ -93,7 +95,7 @@ Support us with a monthly donation and help us continue our activities. [[Become -## Sponsors +### Sponsors Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/storybook#sponsor)] From cd3ab0fbad1e5ce1977297ed33d1c2ffe55e2725 Mon Sep 17 00:00:00 2001 From: "Nelson, Joe" Date: Thu, 18 May 2017 15:23:40 -0700 Subject: [PATCH 17/27] 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 cb6d66ce0f1..96000bb1182 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 4f488787b0f..7fe7bf3603c 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 9365ccb65c9..a3736a479cb 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 18/27] added version number. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 4aa157f36bb..a5ac9b4cb08 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 19/27] 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 5fdec2d4ddf..3aa67e5a860 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 20/27] added a post install script. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a5ac9b4cb08..6ec45574df2 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 21/27] 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 3aa67e5a860..cb6d66ce0f1 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 7fe7bf3603c..6f066ccfe52 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 e8ef89f5c39..0f8ee56cddd 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 6ec45574df2..a5ac9b4cb08 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 22/27] removed version number. --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index a5ac9b4cb08..4aa157f36bb 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 23/27] 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 0f8ee56cddd..48ef0758a29 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 24/27] 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 cb6d66ce0f1..96000bb1182 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 6f066ccfe52..7fe7bf3603c 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 48ef0758a29..a3736a479cb 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: {}, +}; From 83e29d2f1f8dc1e8340d0631e68b0042f0de7845 Mon Sep 17 00:00:00 2001 From: Denis Evgrafov Date: Fri, 19 May 2017 21:23:43 +0300 Subject: [PATCH 25/27] Update link to Stroyshots addon --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c247fd29756..5bf75ef0669 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ For full documentation on using Storybook visit: [storybooks.js.org](https://sto - [Storybook for react-native](app/react-native) - Storybook for React components ### Sub Projects -- [Storyshots](lib/storyshots) - Easy snapshot testing for storybook +- [Storyshots](addons/storyshots) - Easy snapshot testing for storybook - [CLI](lib/cli) - Streamlined installation for a variety of app types - [examples](examples) - Code examples to illustrate different Storybook use cases From fce287ce4cf3793a056748a7d0eba6752cec2fd3 Mon Sep 17 00:00:00 2001 From: Denis Evgrafov Date: Fri, 19 May 2017 22:17:06 +0300 Subject: [PATCH 26/27] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5bf75ef0669..32953675a4b 100644 --- a/README.md +++ b/README.md @@ -40,11 +40,11 @@ For full documentation on using Storybook visit: [storybooks.js.org](https://sto - [Storybook for react-native](app/react-native) - Storybook for React components ### Sub Projects -- [Storyshots](addons/storyshots) - Easy snapshot testing for storybook - [CLI](lib/cli) - Streamlined installation for a variety of app types - [examples](examples) - Code examples to illustrate different Storybook use cases ### Addons +- [addon-storyshots](addons/storyshots) - Easy snapshot testing for storybook - [addon-actions](addons/actions/) - Log actions as users interact with components in storybook - [addon-comments](addons/comments/) - Comment on storybook stories - [addon-graphql](addons/graphql/) - Query a GraphQL server within Storybook stories From a81757b3331f707069a730febeb43d613998f1c0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 May 2017 22:40:47 +0200 Subject: [PATCH 27/27] v3.0.0-alpha.1 --- addons/actions/package.json | 4 ++-- addons/comments/package.json | 4 ++-- addons/graphql/package.json | 4 ++-- addons/info/package.json | 4 ++-- addons/knobs/package.json | 4 ++-- addons/links/package.json | 4 ++-- addons/notes/package.json | 4 ++-- addons/options/package.json | 4 ++-- addons/storyshots/package.json | 8 ++++---- app/react-native/package.json | 6 +++--- app/react/package.json | 6 +++--- lerna.json | 2 +- lib/codemod/package.json | 2 +- 13 files changed, 28 insertions(+), 28 deletions(-) diff --git a/addons/actions/package.json b/addons/actions/package.json index d16285f2ca8..2cc191f453c 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Action Logger addon for storybook", "main": "dist/index.js", "scripts": { @@ -22,7 +22,7 @@ "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-actions", "devDependencies": { "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "@storybook/ui": "^3.0.0-alpha.0", "react": "^15.5.4", "react-dom": "^15.5.4", diff --git a/addons/comments/package.json b/addons/comments/package.json index 6affec7ff96..33200117e28 100644 --- a/addons/comments/package.json +++ b/addons/comments/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-comments", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Comments addon for Storybook", "keywords": [ "storybook" @@ -37,7 +37,7 @@ "@kadira/storybook-database-cloud": "*", "@kadira/storybook-deployer": "*", "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "@storybook/ui": "^3.0.0-alpha.0", "git-url-parse": "^6.2.2", "react": "^15.5.4", diff --git a/addons/graphql/package.json b/addons/graphql/package.json index 6d7aa577aa0..d7cf2e3a004 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Storybook addon to display the GraphiQL IDE", "main": "dist/index.js", "scripts": { @@ -21,7 +21,7 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-graphql", "devDependencies": { - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "react": "^15.5.4", "react-dom": "^15.5.4", "shelljs": "^0.7.7" diff --git a/addons/info/package.json b/addons/info/package.json index 969e984c175..7326d6ed7a3 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "A Storybook addon to show additional information for your stories.", "repository": { "type": "git", @@ -13,7 +13,7 @@ "publish-storybook": "bash .scripts/publish_storybook.sh" }, "devDependencies": { - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "git-url-parse": "^6.2.2", "react": "^15.5.4", "react-dom": "^15.5.4", diff --git a/addons/knobs/package.json b/addons/knobs/package.json index f511b25f5aa..6c75d9c3b29 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-knobs", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Storybook Addon Prop Editor Component", "repository": { "type": "git", @@ -14,7 +14,7 @@ "publish-storybook": "bash .scripts/publish_storybook.sh" }, "devDependencies": { - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "@types/node": "^7.0.12", "@types/react": "^15.0.21", "git-url-parse": "^6.2.2", diff --git a/addons/links/package.json b/addons/links/package.json index 5889a09eb1b..905443cb151 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Story Links addon for storybook", "main": "dist/index.js", "scripts": { @@ -22,7 +22,7 @@ "homepage": "https://github.com/kadirahq/storybook-addon-links#readme", "devDependencies": { "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "@storybook/ui": "^3.0.0-alpha.0", "react": "^15.5.4", "react-dom": "^15.5.4", diff --git a/addons/notes/package.json b/addons/notes/package.json index e21d5d91958..50e4c9580ec 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Write notes for your Storybook stories.", "repository": { "type": "git", @@ -13,7 +13,7 @@ "publish-storybook": "bash .scripts/publish_storybook.sh" }, "devDependencies": { - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "git-url-parse": "^6.2.2", "react": "^15.5.4", "react-addons-test-utils": "^15.5.1", diff --git a/addons/options/package.json b/addons/options/package.json index 5fca182397b..2d9739f2597 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-options", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Options addon for storybook", "main": "preview.js", "scripts": { @@ -21,7 +21,7 @@ "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-options", "devDependencies": { "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "@storybook/ui": "^3.0.0-alpha.0", "react": "^15.5.4", "react-dom": "^15.5.4", diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index 9ccb7b36fc1..e564fcf327f 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "repository": { "type": "git", @@ -22,11 +22,11 @@ "react-dom": "^15.5.4" }, "dependencies": { - "@storybook/addon-actions": "^3.0.0-alpha.0", - "@storybook/addon-links": "^3.0.0-alpha.0", + "@storybook/addon-actions": "^3.0.0-alpha.1", + "@storybook/addon-links": "^3.0.0-alpha.1", "@storybook/addons": "^3.0.0-alpha.0", "@storybook/channels": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.0", + "@storybook/react": "^3.0.0-alpha.1", "babel-runtime": "^6.23.0", "prop-types": "^15.5.8", "read-pkg-up": "^2.0.0" diff --git a/app/react-native/package.json b/app/react-native/package.json index b14f1797553..8a7f3d780a4 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "A better way to develop React Native Components for your app", "main": "dist/index.js", "bin": { @@ -34,8 +34,8 @@ "react-native": "^0.43.3" }, "dependencies": { - "@storybook/addon-actions": "^3.0.0-alpha.0", - "@storybook/addon-links": "^3.0.0-alpha.0", + "@storybook/addon-actions": "^3.0.0-alpha.1", + "@storybook/addon-links": "^3.0.0-alpha.1", "@storybook/addons": "^3.0.0-alpha.0", "@storybook/channel-websocket": "^3.0.0-alpha.0", "@storybook/ui": "^3.0.0-alpha.0", diff --git a/app/react/package.json b/app/react/package.json index 928fec5c3cf..0f8c7c850b6 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "license": "MIT", "main": "dist/client/index.js", @@ -19,8 +19,8 @@ "prepublish": "node ../../scripts/prepublish.js" }, "dependencies": { - "@storybook/addon-actions": "^3.0.0-alpha.0", - "@storybook/addon-links": "^3.0.0-alpha.0", + "@storybook/addon-actions": "^3.0.0-alpha.1", + "@storybook/addon-links": "^3.0.0-alpha.1", "@storybook/addons": "^3.0.0-alpha.0", "@storybook/channel-postmessage": "^3.0.0-alpha.0", "@storybook/ui": "^3.0.0-alpha.0", diff --git a/lerna.json b/lerna.json index fe9e02dbfc7..60f49b59aa5 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "2.0.0-rc.3", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "commands": { "bootstrap": { "ignore": [ diff --git a/lib/codemod/package.json b/lib/codemod/package.json index 848d7dafe1b..a0e052fce99 100644 --- a/lib/codemod/package.json +++ b/lib/codemod/package.json @@ -1,7 +1,7 @@ { "name": "@storybook/codemod", "description": "A collection of codemod scripts written with JSCodeshift", - "version": "3.0.0-alpha.0", + "version": "3.0.0-alpha.1", "license": "MIT", "repository": { "type": "git",