From f5237574cd2a8ce0f7eb540f001f9f4be0f0a7a7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 08:59:26 +1000 Subject: [PATCH 01/24] v3.0.0-alpha.5 --- addons/comments/package.json | 2 +- addons/info/package.json | 2 +- addons/storyshots/package.json | 2 +- lerna.json | 2 +- lib/cli/package.json | 6 +++--- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/addons/comments/package.json b/addons/comments/package.json index 591038888ccb..6a5e19a6c72c 100644 --- a/addons/comments/package.json +++ b/addons/comments/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-comments", - "version": "3.0.0-alpha.4", + "version": "3.0.0-alpha.5", "description": "Comments addon for Storybook", "keywords": [ "storybook" diff --git a/addons/info/package.json b/addons/info/package.json index 0099869e8101..843921c12f5a 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "3.0.0-alpha.4", + "version": "3.0.0-alpha.5", "description": "A Storybook addon to show additional information for your stories.", "repository": { "type": "git", diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index 06d84269230e..fff48d87337b 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "3.0.0-alpha.4", + "version": "3.0.0-alpha.5", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "repository": { "type": "git", diff --git a/lerna.json b/lerna.json index 2a06194610ce..06c36438fb93 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "2.0.0-rc.5", - "version": "3.0.0-alpha.4", + "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ diff --git a/lib/cli/package.json b/lib/cli/package.json index 7ae6d2a71ce0..7cc9b1e16607 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "3.0.0-alpha.4", + "version": "3.0.0-alpha.5", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "bin": { "getstorybook": "./bin/generate.js" @@ -26,9 +26,9 @@ "cross-spawn": "^5.0.1", "json5": "^0.5.1", "merge-dirs": "^0.2.1", + "opencollective": "^1.0.3", "shelljs": "^0.7.7", - "update-notifier": "^2.1.0", - "opencollective": "^1.0.3" + "update-notifier": "^2.1.0" }, "scripts": { "postinstall": "opencollective postinstall" From ec597d590d63dea7ef0aaa4c930efe5fd44ab3b4 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 09:12:04 +1000 Subject: [PATCH 02/24] vundefined --- lerna.json | 1 - 1 file changed, 1 deletion(-) diff --git a/lerna.json b/lerna.json index 06c36438fb93..b12248895982 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,5 @@ { "lerna": "2.0.0-rc.5", - "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From 054d6776a59acadc0f9e7001c719f7c05a9d13a5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 09:14:37 +1000 Subject: [PATCH 03/24] Fix bad learn commit --- lerna.json | 1 + 1 file changed, 1 insertion(+) diff --git a/lerna.json b/lerna.json index b12248895982..06c36438fb93 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,6 @@ { "lerna": "2.0.0-rc.5", + "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From 5c7e5147bc981a2f1e4bc1c90ca54a30e779ac38 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 09:31:42 +1000 Subject: [PATCH 04/24] vundefined --- lerna.json | 1 - 1 file changed, 1 deletion(-) diff --git a/lerna.json b/lerna.json index 06c36438fb93..b12248895982 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,5 @@ { "lerna": "2.0.0-rc.5", - "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From 734b35c3014eac43659a62ddda385b460e85b059 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 09:33:33 +1000 Subject: [PATCH 05/24] Fix bad Lerna commit --- lerna.json | 1 + 1 file changed, 1 insertion(+) diff --git a/lerna.json b/lerna.json index b12248895982..06c36438fb93 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,6 @@ { "lerna": "2.0.0-rc.5", + "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From 0f16e44ef79f462f4fc8800fee8b899ba1823147 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 10:22:00 +1000 Subject: [PATCH 06/24] Revert "Fix bad Lerna commit" This reverts commit 734b35c3014eac43659a62ddda385b460e85b059. --- lerna.json | 1 - 1 file changed, 1 deletion(-) diff --git a/lerna.json b/lerna.json index 06c36438fb93..b12248895982 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,5 @@ { "lerna": "2.0.0-rc.5", - "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From 0d67f1bbd25597c8331c46c490e1faeab1730db2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 10:22:06 +1000 Subject: [PATCH 07/24] Revert "vundefined" This reverts commit 5c7e5147bc981a2f1e4bc1c90ca54a30e779ac38. --- lerna.json | 1 + 1 file changed, 1 insertion(+) diff --git a/lerna.json b/lerna.json index b12248895982..06c36438fb93 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,6 @@ { "lerna": "2.0.0-rc.5", + "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From 8ee4fdf9e3bd716c4a607d3c13e58d9b1fd12951 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 10:22:08 +1000 Subject: [PATCH 08/24] Revert "Fix bad learn commit" This reverts commit 054d6776a59acadc0f9e7001c719f7c05a9d13a5. --- lerna.json | 1 - 1 file changed, 1 deletion(-) diff --git a/lerna.json b/lerna.json index 06c36438fb93..b12248895982 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,5 @@ { "lerna": "2.0.0-rc.5", - "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From 5a327128ffd03501246e1084924c481aa658fb0b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 10:22:09 +1000 Subject: [PATCH 09/24] Revert "vundefined" This reverts commit ec597d590d63dea7ef0aaa4c930efe5fd44ab3b4. --- lerna.json | 1 + 1 file changed, 1 insertion(+) diff --git a/lerna.json b/lerna.json index b12248895982..06c36438fb93 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,6 @@ { "lerna": "2.0.0-rc.5", + "version": "3.0.0-alpha.5", "commands": { "bootstrap": { "ignore": [ From ffe31ef67651aef6ae62ff0251067484f17de323 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 13:48:13 +1000 Subject: [PATCH 10/24] Update all package.json with monorepo metadata - correct repository/homepage/bugs info --- addons/actions/package.json | 2 +- addons/comments/package.json | 2 +- addons/graphql/package.json | 2 +- addons/links/package.json | 6 +++--- addons/options/package.json | 2 +- app/react-native/package.json | 6 +++--- app/react/package.json | 6 +++++- lib/cli/package.json | 2 +- 8 files changed, 16 insertions(+), 12 deletions(-) diff --git a/addons/actions/package.json b/addons/actions/package.json index 2558f907937f..4b3355158601 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -19,7 +19,7 @@ "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, - "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-actions", + "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions", "devDependencies": { "@storybook/addons": "^3.0.0-alpha.0", "@storybook/react": "^3.0.0-alpha.4", diff --git a/addons/comments/package.json b/addons/comments/package.json index 6a5e19a6c72c..776d90256dfb 100644 --- a/addons/comments/package.json +++ b/addons/comments/package.json @@ -5,7 +5,7 @@ "keywords": [ "storybook" ], - "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-comments", + "homepage": "https://github.com/storybooks/storybook/tree/master/addons/comments", "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, diff --git a/addons/graphql/package.json b/addons/graphql/package.json index f3a4a166f04e..c80721dfa6d1 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -19,7 +19,7 @@ "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, - "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-graphql", + "homepage": "https://github.com/storybooks/storybook/tree/master/addons/graphql", "devDependencies": { "@storybook/react": "^3.0.0-alpha.4", "react": "^15.5.4", diff --git a/addons/links/package.json b/addons/links/package.json index b268e301eed0..2f1c1030edae 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -10,16 +10,16 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/kadirahq/storybook-addon-links.git" + "url": "git+https://github.com/storybooks/storybook.git" }, "keywords": [ "storybook" ], "license": "MIT", "bugs": { - "url": "https://github.com/kadirahq/storybook-addon-links/issues" + "url": "https://github.com/storybooks/storybook/issues" }, - "homepage": "https://github.com/kadirahq/storybook-addon-links#readme", + "homepage": "https://github.com/storybooks/storybook/tree/master/addons/links", "devDependencies": { "@storybook/addons": "^3.0.0-alpha.0", "@storybook/react": "^3.0.0-alpha.4", diff --git a/addons/options/package.json b/addons/options/package.json index 4b03124e88f9..78d295167d36 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -18,7 +18,7 @@ "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, - "homepage": "https://github.com/storybooks/storybook/tree/master/packages/addon-options", + "homepage": "https://github.com/storybooks/storybook/tree/master/addons/options", "devDependencies": { "@storybook/addons": "^3.0.0-alpha.0", "@storybook/react": "^3.0.0-alpha.4", diff --git a/app/react-native/package.json b/app/react-native/package.json index 0adfd09636dd..4dde355b862e 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -11,7 +11,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/kadirahq/react-native-storybook.git" + "url": "git+https://github.com/storybooks/storybook.git" }, "keywords": [ "react", @@ -20,9 +20,9 @@ ], "license": "MIT", "bugs": { - "url": "https://github.com/kadirahq/react-native-storybook/issues" + "url": "https://github.com/storybooks/storybook/issues" }, - "homepage": "https://github.com/kadirahq/react-native-storybook#readme", + "homepage": "https://github.com/storybooks/storybook/tree/master/app/react-native", "peerDependencies": { "react": "*", "react-native": "0.27.0 - 0.43.x" diff --git a/app/react/package.json b/app/react/package.json index 4a818cdb2b25..aee52745a4b1 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -12,8 +12,12 @@ }, "repository": { "type": "git", - "url": "https://github.com/storybooks/react-storybook.git" + "url": "https://github.com/storybooks/storybook.git" }, + "bugs": { + "url": "https://github.com/storybooks/storybook/issues" + }, + "homepage": "https://github.com/storybooks/storybook/tree/master/apps/react", "scripts": { "dev": "DEV_BUILD=1 nodemon --watch ./src --exec 'npm run prepublish'", "prepublish": "node ../../scripts/prepublish.js" diff --git a/lib/cli/package.json b/lib/cli/package.json index 7cc9b1e16607..d482226334db 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -19,7 +19,7 @@ "bugs": { "url": "https://github.com/storybooks/storybook/issues" }, - "homepage": "https://github.com/storybooks/storybook/tree/master/packages/getstorybook", + "homepage": "https://github.com/storybooks/storybook/tree/master/lib/cli", "dependencies": { "chalk": "^1.1.3", "commander": "^2.9.0", From 50a781d4e343eb811a011e14d3d0797d36f9ae23 Mon Sep 17 00:00:00 2001 From: Gytis Vinclovas Date: Tue, 16 May 2017 17:39:26 +0300 Subject: [PATCH 11/24] Fixing performance issues. Added timestamps to setKnobs event. Added ability to pass debounce option when adding decorator --- addons/knobs/package.json | 1 + addons/knobs/src/KnobManager.js | 3 +- addons/knobs/src/components/Panel.js | 59 ++++++++++++++----- addons/knobs/src/components/WrapStory.js | 6 +- .../knobs/src/components/__tests__/Panel.js | 4 +- addons/knobs/src/index.js | 9 +++ addons/knobs/storybook-addon-knobs.d.ts | 6 +- 7 files changed, 65 insertions(+), 23 deletions(-) diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 6b6283973b56..982cd8fd8445 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -34,6 +34,7 @@ "babel-runtime": "^6.23.0", "deep-equal": "^1.0.1", "insert-css": "^1.0.0", + "lodash.debounce": "^4.0.8", "moment": "^2.18.1", "prop-types": "^15.5.8", "react-color": "^2.11.4", diff --git a/addons/knobs/src/KnobManager.js b/addons/knobs/src/KnobManager.js index fb83c872fa4b..d7b0be8218be 100644 --- a/addons/knobs/src/KnobManager.js +++ b/addons/knobs/src/KnobManager.js @@ -65,11 +65,12 @@ export default class KnobManager { return; } this.calling = true; + const timestamp = +new Date(); setTimeout(() => { this.calling = false; // emit to the channel and trigger a panel re-render - this.channel.emit('addon:knobs:setKnobs', this.knobStore.getAll()); + this.channel.emit('addon:knobs:setKnobs', { knobs: this.knobStore.getAll(), timestamp }); }, PANEL_UPDATE_INTERVAL); } } diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index 1ac699a1ffd1..29151ffbf67e 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -1,8 +1,11 @@ import PropTypes from 'prop-types'; import React from 'react'; +import debounce from 'lodash.debounce'; import PropForm from './PropForm'; import Types from './types'; +const getTimestamp = () => +new Date(); + const styles = { panelWrapper: { width: '100%', @@ -44,35 +47,54 @@ export default class Panel extends React.Component { this.handleChange = this.handleChange.bind(this); this.setKnobs = this.setKnobs.bind(this); this.reset = this.reset.bind(this); + this.setOptions = this.setOptions.bind(this); this.state = { knobs: {} }; + this.options = {}; + + this.lastEdit = getTimestamp(); this.loadedFromUrl = false; this.props.channel.on('addon:knobs:setKnobs', this.setKnobs); + this.props.channel.on('addon:knobs:setOptions', this.setOptions); } componentWillUnmount() { this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs); } - setKnobs(knobs) { + setOptions(options = { debounce: false, timestamps: false }) { + this.options = options; + + if (options.debounce) { + this.emitChange = debounce( + this.emitChange, + options.debounce.wait, + { leading: options.debounce.leading } + ); + } + } + + setKnobs({ knobs, timestamp }) { const queryParams = {}; const { api, channel } = this.props; - Object.keys(knobs).forEach(name => { - const knob = knobs[name]; - // For the first time, get values from the URL and set them. - if (!this.loadedFromUrl) { - const urlValue = api.getQueryParam(`knob-${name}`); - - if (urlValue !== undefined) { - // If the knob value present in url - knob.value = Types[knob.type].deserialize(urlValue); - channel.emit('addon:knobs:knobChange', knob); + if (!this.options.timestamps || !timestamp || this.lastEdit <= timestamp) { + Object.keys(knobs).forEach(name => { + const knob = knobs[name]; + // For the first time, get values from the URL and set them. + if (!this.loadedFromUrl) { + const urlValue = api.getQueryParam(`knob-${name}`); + + if (urlValue !== undefined) { + // If the knob value present in url + knob.value = Types[knob.type].deserialize(urlValue); + channel.emit('addon:knobs:knobChange', knob); + } } - } - queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value); - }); + queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value); + }); + } this.loadedFromUrl = true; api.setQueryParams(queryParams); @@ -83,8 +105,13 @@ export default class Panel extends React.Component { this.props.channel.emit('addon:knobs:reset'); } + emitChange(changedKnob) { + this.props.channel.emit('addon:knobs:knobChange', changedKnob); + } + handleChange(changedKnob) { - const { api, channel } = this.props; + this.lastEdit = getTimestamp(); + const { api } = this.props; const { knobs } = this.state; const { name, type, value } = changedKnob; const newKnobs = { ...knobs }; @@ -99,7 +126,7 @@ export default class Panel extends React.Component { queryParams[`knob-${name}`] = Types[type].serialize(value); api.setQueryParams(queryParams); - channel.emit('addon:knobs:knobChange', changedKnob); + this.setState({ knobs: newKnobs }, this.emitChange(changedKnob)); } render() { diff --git a/addons/knobs/src/components/WrapStory.js b/addons/knobs/src/components/WrapStory.js index 1293a070ec86..85b4f77240a7 100644 --- a/addons/knobs/src/components/WrapStory.js +++ b/addons/knobs/src/components/WrapStory.js @@ -33,9 +33,9 @@ export default class WrapStory extends React.Component { this.props.knobStore.unsubscribe(this.setPaneKnobs); } - setPaneKnobs() { + setPaneKnobs(timestamp = +new Date()) { const { channel, knobStore } = this.props; - channel.emit('addon:knobs:setKnobs', knobStore.getAll()); + channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp}); } knobChanged(change) { @@ -52,7 +52,7 @@ export default class WrapStory extends React.Component { const { knobStore, storyFn, context } = this.props; knobStore.reset(); this.setState({ storyContent: storyFn(context) }); - this.setPaneKnobs(); + this.setPaneKnobs(false); } render() { diff --git a/addons/knobs/src/components/__tests__/Panel.js b/addons/knobs/src/components/__tests__/Panel.js index 4198d0cf236e..6d2d68e581d7 100644 --- a/addons/knobs/src/components/__tests__/Panel.js +++ b/addons/knobs/src/components/__tests__/Panel.js @@ -46,7 +46,7 @@ describe('Panel', () => { }, }; - setKnobsHandler(knobs); + setKnobsHandler({ knobs, timestamp: +new Date() }); const knobFromUrl = { name: 'foo', value: testQueryParams['knob-foo'], @@ -95,7 +95,7 @@ describe('Panel', () => { // Make it act like that url params are already checked wrapper.instance().loadedFromUrl = true; - setKnobsHandler(knobs); + setKnobsHandler({ knobs, timestamp: +new Date() }); const knobFromStory = { 'knob-foo': knobs.foo.value, 'knob-baz': knobs.baz.value, diff --git a/addons/knobs/src/index.js b/addons/knobs/src/index.js index 1928354167e6..8e8239d244cd 100644 --- a/addons/knobs/src/index.js +++ b/addons/knobs/src/index.js @@ -59,3 +59,12 @@ export function withKnobs(storyFn, context) { const channel = addons.getChannel(); return manager.wrapStory(channel, storyFn, context); } + +export function withKnobsOptions(options = {}) { + return (...args) => { + const channel = addons.getChannel(); + channel.emit('addon:knobs:setOptions', options); + + return withKnobs(...args); + }; +} diff --git a/addons/knobs/storybook-addon-knobs.d.ts b/addons/knobs/storybook-addon-knobs.d.ts index 526ea574f939..80e7fc4f109d 100644 --- a/addons/knobs/storybook-addon-knobs.d.ts +++ b/addons/knobs/storybook-addon-knobs.d.ts @@ -17,6 +17,10 @@ interface NumberOptions { step: number, } +interface withKnobs { + (storyFn: Function, context: StoryContext): React.ReactElement; +} + export function knob(name: string, options: KnobOption): T; export function text(name: string, value: string | null): string; @@ -42,4 +46,4 @@ interface IWrapStoryProps { initialContent?: Object; } -export function withKnobs(storyFn: Function, context: StoryContext): React.ReactElement; +export function withKnobsOptions(options: Object): (storyFn: Function, context: StoryContext) => withKnobs; From 7a920bd4bea20f18996c1ce36434cc5098ee3313 Mon Sep 17 00:00:00 2001 From: Gytis Vinclovas Date: Tue, 16 May 2017 18:15:04 +0300 Subject: [PATCH 12/24] Fixed lint issues. --- addons/knobs/src/components/Panel.js | 6 +----- addons/knobs/src/components/WrapStory.js | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index 29151ffbf67e..822cbf123ddc 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -66,11 +66,7 @@ export default class Panel extends React.Component { this.options = options; if (options.debounce) { - this.emitChange = debounce( - this.emitChange, - options.debounce.wait, - { leading: options.debounce.leading } - ); + this.emitChange = debounce(this.emitChange, options.debounce.wait, { leading: options.debounce.leading }); } } diff --git a/addons/knobs/src/components/WrapStory.js b/addons/knobs/src/components/WrapStory.js index 85b4f77240a7..25cb5b7a0b24 100644 --- a/addons/knobs/src/components/WrapStory.js +++ b/addons/knobs/src/components/WrapStory.js @@ -35,7 +35,7 @@ export default class WrapStory extends React.Component { setPaneKnobs(timestamp = +new Date()) { const { channel, knobStore } = this.props; - channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp}); + channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp }); } knobChanged(change) { From 3e2673b96297a948fa11ed040b61b81686385a94 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 24 May 2017 23:34:29 +1000 Subject: [PATCH 13/24] Add CRNA support 1. detect CRNA projects 2. simplify RN and CRNA templates by consolidating app into single `index.js` instead of `index.ios.js` and `index.android.js` 3. notify user of extra setup steps in CLI 4. document CRNA idiosyncrasies in README --- app/react-native/readme.md | 41 ++++++++++++++++--- lib/cli/bin/generate.js | 21 ++++++++++ lib/cli/generators/REACT_NATIVE/index.js | 3 +- .../storybook/{index.android.js => index.js} | 1 + .../generators/REACT_NATIVE_SCRIPTS/index.js | 26 ++++++++++++ .../template/storybook/addons.js | 2 + .../template/storybook/index.js} | 2 +- .../storybook/stories/Button/index.android.js | 10 +++++ .../storybook/stories/Button/index.ios.js | 10 +++++ .../storybook/stories/CenterView/index.js | 11 +++++ .../storybook/stories/CenterView/style.js | 8 ++++ .../storybook/stories/Welcome/index.js | 40 ++++++++++++++++++ .../template/storybook/stories/index.js | 25 +++++++++++ lib/cli/lib/detect.js | 4 ++ lib/cli/lib/project_types.js | 1 + 15 files changed, 197 insertions(+), 8 deletions(-) rename lib/cli/generators/REACT_NATIVE/template/storybook/{index.android.js => index.js} (92%) create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/addons.js rename lib/cli/generators/{REACT_NATIVE/template/storybook/index.ios.js => REACT_NATIVE_SCRIPTS/template/storybook/index.js} (80%) create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.android.js create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.ios.js create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/index.js create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/style.js create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Welcome/index.js create mode 100644 lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/index.js diff --git a/app/react-native/readme.md b/app/react-native/readme.md index 5a0bda54c8c1..cccc6dfde3ca 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -21,7 +21,30 @@ npm -g i @storybook/cli getstorybook ``` -## Start the Storybook +After you have installed, there are additional steps for `create-react-native-app` apps. See the section for details, otherwise skip to [Start Storybook](#start-storybook) +to see the next step. + +## Create React Native App (CRNA) + +If you run `getstorybook` inside a CRNA app, you'll be notified that there is an extra step required to use Storybook. + +The easiest way to use Storybook inside CRNA is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code: + +```js +export default from './storybook'; +``` + +This will get you up and running quickly, but then you lose your app! +There are multiple options here. for example, you can export conditionally: + +```js +import StorybookUI from './storybook'; +module.exports = __DEV__ ? StorybookUI : App; +``` + +Alternatively, `StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen. + +## Start Storybook After initial setup start the storybook server with the storybook npm script. @@ -29,14 +52,22 @@ After initial setup start the storybook server with the storybook npm script. npm run storybook ``` -also start your mobile app with the `react-native` command. +Now, you can open to view your storybook menus in the browser. + +## Start App +To see your Storybook stories on the device, you should start your mobile app for the `` of your choice (typically `ios` or `android`). + +For CRNA apps: +``` +npm run +``` +For RN apps: ``` -react-native run-ios -react-native run-android +react-native run- ``` -Now, you can open to view your storybook. +Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app. ## Learn More diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js index 5b73e5e03ce3..433414d694f9 100755 --- a/lib/cli/bin/generate.js +++ b/lib/cli/bin/generate.js @@ -61,6 +61,9 @@ const end = () => { logger.log(); }; +const CRNA_DISCUSSION = + 'https://github.com/storybooks/storybook/blob/master/app/react-native/docs/manual-setup.md'; + switch (projectType) { case types.ALREADY_HAS_STORYBOOK: logger.log(); @@ -83,6 +86,24 @@ switch (projectType) { .then(end); break; + case types.REACT_NATIVE_SCRIPTS: + require('../generators/REACT_NATIVE_SCRIPTS') + .then(commandLog('Adding storybook support to your "Create React Native App" app')) + .then(end) + .then(() => { + logger.log(chalk.red('NOTE: CRNA app installation is not 100% automated.')); + logger.log( + 'To quickly run storybook, replace contents of', + chalk.bold('\'./App.js\''), + 'with:\n' + ); + codeLog(["export default from './storybook';"]); + logger.log('\nFor a more complete discussion of options, see:\n'); + logger.log(chalk.cyan(CRNA_DISCUSSION)); + logger.log(); + }); + break; + case types.REACT_NATIVE: require('../generators/REACT_NATIVE') .then(commandLog('Adding storybook support to your "React Native" app')) diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js index 0b0dd6410153..0d707edafed9 100644 --- a/lib/cli/generators/REACT_NATIVE/index.js +++ b/lib/cli/generators/REACT_NATIVE/index.js @@ -13,8 +13,7 @@ module.exports = latestVersion('@storybook/react-native').then(version => { const projectName = dirname && dirname.slice('ios/'.length, dirname.length - '.xcodeproj'.length - 1); if (projectName) { - shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.ios.js'); - shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.android.js'); + shell.sed('-i', '%APP_NAME%', projectName, 'storybook/index.js'); } const packageJson = helpers.getPackageJson(); diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/index.android.js b/lib/cli/generators/REACT_NATIVE/template/storybook/index.js similarity index 92% rename from lib/cli/generators/REACT_NATIVE/template/storybook/index.android.js rename to lib/cli/generators/REACT_NATIVE/template/storybook/index.js index 72e2ce02ca71..87262c017095 100644 --- a/lib/cli/generators/REACT_NATIVE/template/storybook/index.android.js +++ b/lib/cli/generators/REACT_NATIVE/template/storybook/index.js @@ -8,3 +8,4 @@ configure(() => { const StorybookUI = getStorybookUI({ port: 7007, host: 'localhost' }); AppRegistry.registerComponent('%APP_NAME%', () => StorybookUI); +export default StorybookUI; diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js new file mode 100644 index 000000000000..802e9df0268c --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js @@ -0,0 +1,26 @@ +const mergeDirs = require('merge-dirs').default; +const helpers = require('../../lib/helpers'); +const path = require('path'); +const shell = require('shelljs'); +const latestVersion = require('latest-version'); + +module.exports = latestVersion('@storybook/react-native').then(version => { + // copy all files from the template directory to project directory + mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite'); + + const packageJson = helpers.getPackageJson(); + + packageJson.dependencies = packageJson.dependencies || {}; + packageJson.devDependencies = packageJson.devDependencies || {}; + + packageJson.devDependencies['@storybook/react-native'] = `^${version}`; + + if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) { + packageJson.devDependencies['react-dom'] = '^15.5.4'; + } + + packageJson.scripts = packageJson.scripts || {}; + packageJson.scripts['storybook'] = 'storybook start -p 7007'; + + helpers.writePackageJson(packageJson); +}); diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/addons.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/addons.js new file mode 100644 index 000000000000..6aed412d04af --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/addons.js @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/index.ios.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/index.js similarity index 80% rename from lib/cli/generators/REACT_NATIVE/template/storybook/index.ios.js rename to lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/index.js index 72e2ce02ca71..9b59334992dd 100644 --- a/lib/cli/generators/REACT_NATIVE/template/storybook/index.ios.js +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/index.js @@ -7,4 +7,4 @@ configure(() => { }, module); const StorybookUI = getStorybookUI({ port: 7007, host: 'localhost' }); -AppRegistry.registerComponent('%APP_NAME%', () => StorybookUI); +export default StorybookUI; diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.android.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.android.js new file mode 100644 index 000000000000..2bdb364d5e7c --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.android.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { TouchableNativeFeedback } from 'react-native'; + +export default function Button(props) { + return ( + + {props.children} + + ); +} diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.ios.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.ios.js new file mode 100644 index 000000000000..0447eb95078c --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Button/index.ios.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { TouchableHighlight } from 'react-native'; + +export default function Button(props) { + return ( + + {props.children} + + ); +} diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/index.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/index.js new file mode 100644 index 000000000000..ab98f2df0a80 --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { View } from 'react-native'; +import style from './style'; + +export default function CenterView(props) { + return ( + + {props.children} + + ); +} diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/style.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/style.js new file mode 100644 index 000000000000..ff347fd9841f --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/CenterView/style.js @@ -0,0 +1,8 @@ +export default { + main: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, +}; diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Welcome/index.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Welcome/index.js new file mode 100644 index 000000000000..2305b830c30f --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/Welcome/index.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { View, Text } from 'react-native'; + +export default class Welcome extends React.Component { + styles = { + wrapper: { + flex: 1, + padding: 24, + justifyContent: 'center', + }, + header: { + fontSize: 18, + marginBottom: 18, + }, + content: { + fontSize: 12, + marginBottom: 10, + lineHeight: 18, + }, + }; + + showApp(e) { + e.preventDefault(); + if (this.props.showApp) this.props.showApp(); + } + + render() { + return ( + + Welcome to React Native Storybook + + This is a UI Component development environment for your React Native app. Here you can display and interact with your UI components as stories. A story is a single state of one or more UI components. You can have as many stories as you want. In other words a story is like a visual test case. + + + We have added some stories inside the "storybook/stories" directory for examples. Try editing the "storybook/stories/Welcome.js" file to edit this message. + + + ); + } +} diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/index.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/index.js new file mode 100644 index 000000000000..63f1a6266717 --- /dev/null +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/template/storybook/stories/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Text } from 'react-native'; + +import { storiesOf } from '@storybook/react-native'; +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; + +import Button from './Button'; +import CenterView from './CenterView'; +import Welcome from './Welcome'; + +storiesOf('Welcome', module).add('to Storybook', () => ); + +storiesOf('Button', module) + .addDecorator(getStory => {getStory()}) + .add('with text', () => ( + + )) + .add('with some emoji', () => ( + + )); diff --git a/lib/cli/lib/detect.js b/lib/cli/lib/detect.js index ef62f94435a1..0394655e4fd4 100644 --- a/lib/cli/lib/detect.js +++ b/lib/cli/lib/detect.js @@ -34,6 +34,10 @@ module.exports = function detect(options) { return types.REACT_PROJECT; } + if (packageJson.dependencies && packageJson.devDependencies['react-native-scripts']) { + return types.REACT_NATIVE_SCRIPTS; + } + if (packageJson.dependencies && packageJson.dependencies['react-native']) { return types.REACT_NATIVE; } diff --git a/lib/cli/lib/project_types.js b/lib/cli/lib/project_types.js index 1c3bbe537434..e38b0c969481 100644 --- a/lib/cli/lib/project_types.js +++ b/lib/cli/lib/project_types.js @@ -4,6 +4,7 @@ module.exports = { METEOR: 'METEOR', REACT: 'REACT', REACT_NATIVE: 'REACT_NATIVE', + REACT_NATIVE_SCRIPTS: 'REACT_NATIVE_SCRIPTS', REACT_PROJECT: 'REACT_PROJECT', WEBPACK_REACT: 'WEBPACK_REACT', ALREADY_HAS_STORYBOOK: 'ALREADY_HAS_STORYBOOK', From 3618a1aa17c55214ad8f31ab8546dde215bb6eaa Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Thu, 25 May 2017 09:59:44 +1000 Subject: [PATCH 14/24] This was a mistake, should not have been included See https://github.com/storybooks/storybook/issues/995#issuecomment-303733775 --- addons/storyshots/src/test-bodies.js | 1 - 1 file changed, 1 deletion(-) diff --git a/addons/storyshots/src/test-bodies.js b/addons/storyshots/src/test-bodies.js index 2f7bfb694ae4..a91b710ca177 100644 --- a/addons/storyshots/src/test-bodies.js +++ b/addons/storyshots/src/test-bodies.js @@ -1,5 +1,4 @@ import renderer from 'react-test-renderer'; -import shallow from 'react-test-renderer/shallow'; export const snapshotWithOptions = options => ({ story, context }) => { const storyElement = story.render(context); From cfe52395d3121855fed88b707e1060682bb2dfd5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 25 May 2017 21:51:23 +1000 Subject: [PATCH 15/24] Fix linting and simplify code in CRNA generator --- lib/cli/bin/generate.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js index 433414d694f9..4ed176a39705 100755 --- a/lib/cli/bin/generate.js +++ b/lib/cli/bin/generate.js @@ -87,16 +87,13 @@ switch (projectType) { break; case types.REACT_NATIVE_SCRIPTS: + const app = chalk.bold('"./App.js"'); require('../generators/REACT_NATIVE_SCRIPTS') .then(commandLog('Adding storybook support to your "Create React Native App" app')) .then(end) .then(() => { logger.log(chalk.red('NOTE: CRNA app installation is not 100% automated.')); - logger.log( - 'To quickly run storybook, replace contents of', - chalk.bold('\'./App.js\''), - 'with:\n' - ); + logger.log(`To quickly run storybook, replace contents of ${app} with:\n`); codeLog(["export default from './storybook';"]); logger.log('\nFor a more complete discussion of options, see:\n'); logger.log(chalk.cyan(CRNA_DISCUSSION)); From fbb5a86d5e7c1b84858f08380a1d137b18919849 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 25 May 2017 22:06:50 +1000 Subject: [PATCH 16/24] Fix linting err in CRNA script --- lib/cli/bin/generate.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js index 4ed176a39705..0bb023b1d38f 100755 --- a/lib/cli/bin/generate.js +++ b/lib/cli/bin/generate.js @@ -86,7 +86,7 @@ switch (projectType) { .then(end); break; - case types.REACT_NATIVE_SCRIPTS: + case types.REACT_NATIVE_SCRIPTS: { const app = chalk.bold('"./App.js"'); require('../generators/REACT_NATIVE_SCRIPTS') .then(commandLog('Adding storybook support to your "Create React Native App" app')) @@ -100,6 +100,7 @@ switch (projectType) { logger.log(); }); break; + } case types.REACT_NATIVE: require('../generators/REACT_NATIVE') From b7df231b958adb9d6ae12294fb0c45e375156bb5 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 25 May 2017 22:09:05 +1000 Subject: [PATCH 17/24] Remove unused variable in CRNA --- lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js b/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js index 802e9df0268c..9712064c96d6 100644 --- a/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js +++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js @@ -1,7 +1,6 @@ const mergeDirs = require('merge-dirs').default; const helpers = require('../../lib/helpers'); const path = require('path'); -const shell = require('shelljs'); const latestVersion = require('latest-version'); module.exports = latestVersion('@storybook/react-native').then(version => { From d29326105109d95e1f3c0d144d616fefe0c38984 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 May 2017 17:36:31 +0200 Subject: [PATCH 18/24] ADD a global to storyshots to make it work for series with info addon --- addons/storyshots/package.json | 1 + addons/storyshots/src/index.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index fff48d87337b..d846e39ebc28 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "babel-runtime": "^6.23.0", + "global": "^4.3.2", "prop-types": "^15.5.8", "read-pkg-up": "^2.0.0" }, diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js index 6c5f9ab39bce..44e06397e081 100644 --- a/addons/storyshots/src/index.js +++ b/addons/storyshots/src/index.js @@ -1,4 +1,5 @@ import path from 'path'; +import global from 'global'; import readPkgUp from 'read-pkg-up'; import addons from '@storybook/addons'; import runWithRequireContext from './require_context'; @@ -10,6 +11,7 @@ export { snapshotWithOptions, snapshot, renderOnly } from './test-bodies'; let storybook; let configPath; +global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || {}; const babel = require('babel-core'); From 6be44e97886427f77c52bed1f99d8a9f0727400d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 May 2017 17:42:27 +0200 Subject: [PATCH 19/24] FIX linting --- addons/knobs/src/components/Panel.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index 822cbf123ddc..d56aca665da8 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -66,7 +66,9 @@ export default class Panel extends React.Component { this.options = options; if (options.debounce) { - this.emitChange = debounce(this.emitChange, options.debounce.wait, { leading: options.debounce.leading }); + this.emitChange = debounce(this.emitChange, options.debounce.wait, { + leading: options.debounce.leading, + }); } } From 01db55980b899a3b7b7e8fad50c071daa4343ae0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 26 May 2017 01:58:27 +1000 Subject: [PATCH 20/24] Suppress lint error --- lib/cli/bin/generate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js index 0bb023b1d38f..8dce91cf2298 100755 --- a/lib/cli/bin/generate.js +++ b/lib/cli/bin/generate.js @@ -94,7 +94,7 @@ switch (projectType) { .then(() => { logger.log(chalk.red('NOTE: CRNA app installation is not 100% automated.')); logger.log(`To quickly run storybook, replace contents of ${app} with:\n`); - codeLog(["export default from './storybook';"]); + codeLog(["export default from './storybook';"]); // eslint-disable-line logger.log('\nFor a more complete discussion of options, see:\n'); logger.log(chalk.cyan(CRNA_DISCUSSION)); logger.log(); From f88dfc37ea0abcdb5c000339f51ab33a240c3fe2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 May 2017 18:28:23 +0200 Subject: [PATCH 21/24] v3.0.0-rc.0 --- addons/actions/package.json | 10 +++++----- addons/centered/package.json | 5 ++--- addons/comments/package.json | 10 +++++----- addons/graphql/package.json | 4 ++-- addons/info/package.json | 4 ++-- addons/knobs/package.json | 4 ++-- addons/links/package.json | 10 +++++----- addons/notes/package.json | 4 ++-- addons/options/package.json | 10 +++++----- addons/storyshots/package.json | 2 +- app/react-native/package.json | 12 ++++++------ app/react/package.json | 12 ++++++------ lerna.json | 2 +- lib/addons/package.json | 2 +- lib/channel-postmessage/package.json | 4 ++-- lib/channel-websocket/package.json | 4 ++-- lib/channels/package.json | 2 +- lib/cli/package.json | 2 +- lib/codemod/package.json | 2 +- lib/ui/package.json | 2 +- 20 files changed, 53 insertions(+), 54 deletions(-) diff --git a/addons/actions/package.json b/addons/actions/package.json index 4b3355158601..1a8ef8583343 100644 --- a/addons/actions/package.json +++ b/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "3.0.0-alpha.4", + "version": "3.0.0-rc.0", "description": "Action Logger addon for storybook", "main": "dist/index.js", "scripts": { @@ -21,9 +21,9 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions", "devDependencies": { - "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.4", - "@storybook/ui": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", + "@storybook/react": "^3.0.0-rc.0", + "@storybook/ui": "^3.0.0-rc.0", "react": "^15.5.4", "react-dom": "^15.5.4", "react-test-renderer": "^15.5.4", @@ -36,7 +36,7 @@ "react-inspector": "^2.0.0" }, "peerDependencies": { - "@storybook/addons": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", "react": "*", "react-dom": "*" } diff --git a/addons/centered/package.json b/addons/centered/package.json index ba3a9d7f2101..bbc872249231 100644 --- a/addons/centered/package.json +++ b/addons/centered/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-centered", - "version": "3.0.0-alpha.0", + "version": "3.0.0-rc.0", "description": "Storybook decorator to center components", "main": "build/index.js", "scripts": { @@ -12,6 +12,5 @@ "transform": [ "babelify" ] - }, - "devDependencies": {} + } } diff --git a/addons/comments/package.json b/addons/comments/package.json index 776d90256dfb..1f0ccdafa23a 100644 --- a/addons/comments/package.json +++ b/addons/comments/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-comments", - "version": "3.0.0-alpha.5", + "version": "3.0.0-rc.0", "description": "Comments addon for Storybook", "keywords": [ "storybook" @@ -36,9 +36,9 @@ "devDependencies": { "@kadira/storybook-database-cloud": "*", "@kadira/storybook-deployer": "*", - "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.4", - "@storybook/ui": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", + "@storybook/react": "^3.0.0-rc.0", + "@storybook/ui": "^3.0.0-rc.0", "git-url-parse": "^6.2.2", "react": "^15.5.4", "react-dom": "^15.5.4", @@ -46,7 +46,7 @@ "shelljs": "^0.7.7" }, "peerDependencies": { - "@storybook/addons": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", "react": "*", "react-dom": "*" } diff --git a/addons/graphql/package.json b/addons/graphql/package.json index c80721dfa6d1..4b0ebf204491 100644 --- a/addons/graphql/package.json +++ b/addons/graphql/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-graphql", - "version": "3.0.0-alpha.4", + "version": "3.0.0-rc.0", "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/addons/graphql", "devDependencies": { - "@storybook/react": "^3.0.0-alpha.4", + "@storybook/react": "^3.0.0-rc.0", "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 843921c12f5a..16a6d5232f83 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-info", - "version": "3.0.0-alpha.5", + "version": "3.0.0-rc.0", "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.4", + "@storybook/react": "^3.0.0-rc.0", "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 982cd8fd8445..0bbf419edd12 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-knobs", - "version": "3.0.0-alpha.4", + "version": "3.0.0-rc.0", "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.4", + "@storybook/react": "^3.0.0-rc.0", "@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 2f1c1030edae..2c547669165c 100644 --- a/addons/links/package.json +++ b/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "3.0.0-alpha.4", + "version": "3.0.0-rc.0", "description": "Story Links addon for storybook", "main": "dist/index.js", "scripts": { @@ -21,15 +21,15 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/links", "devDependencies": { - "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.4", - "@storybook/ui": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", + "@storybook/react": "^3.0.0-rc.0", + "@storybook/ui": "^3.0.0-rc.0", "react": "^15.5.4", "react-dom": "^15.5.4", "shelljs": "^0.7.7" }, "peerDependencies": { - "@storybook/addons": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", "react": "*", "react-dom": "*" } diff --git a/addons/notes/package.json b/addons/notes/package.json index 2343e24884b7..e43eebcf7ece 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-notes", - "version": "3.0.0-alpha.4", + "version": "3.0.0-rc.0", "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.4", + "@storybook/react": "^3.0.0-rc.0", "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 78d295167d36..f5b0a4787fc7 100644 --- a/addons/options/package.json +++ b/addons/options/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-options", - "version": "3.0.0-alpha.4", + "version": "3.0.0-rc.0", "description": "Options addon for storybook", "main": "preview.js", "scripts": { @@ -20,16 +20,16 @@ }, "homepage": "https://github.com/storybooks/storybook/tree/master/addons/options", "devDependencies": { - "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/react": "^3.0.0-alpha.4", - "@storybook/ui": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", + "@storybook/react": "^3.0.0-rc.0", + "@storybook/ui": "^3.0.0-rc.0", "react": "^15.5.4", "react-dom": "^15.5.4", "react-test-renderer": "^15.5.4", "shelljs": "^0.7.7" }, "peerDependencies": { - "@storybook/addons": "^3.0.0-alpha.0", + "@storybook/addons": "^3.0.0-rc.0", "react": "*", "react-dom": "*" }, diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json index d846e39ebc28..03c1e0863d7b 100644 --- a/addons/storyshots/package.json +++ b/addons/storyshots/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "3.0.0-alpha.5", + "version": "3.0.0-rc.0", "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.", "repository": { "type": "git", diff --git a/app/react-native/package.json b/app/react-native/package.json index 4dde355b862e..b11768580ba0 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.4", + "version": "3.0.0-rc.0", "description": "A better way to develop React Native Components for your app", "main": "dist/index.js", "bin": { @@ -34,11 +34,11 @@ "react-native": "^0.43.3" }, "dependencies": { - "@storybook/addon-actions": "^3.0.0-alpha.4", - "@storybook/addon-links": "^3.0.0-alpha.4", - "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/channel-websocket": "^3.0.0-alpha.0", - "@storybook/ui": "^3.0.0-alpha.0", + "@storybook/addon-actions": "^3.0.0-rc.0", + "@storybook/addon-links": "^3.0.0-rc.0", + "@storybook/addons": "^3.0.0-rc.0", + "@storybook/channel-websocket": "^3.0.0-rc.0", + "@storybook/ui": "^3.0.0-rc.0", "autoprefixer": "^7.0.1", "babel-core": "^6.24.1", "babel-loader": "^7.0.0", diff --git a/app/react/package.json b/app/react/package.json index aee52745a4b1..b8b859b7a8d5 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "3.0.0-alpha.4", + "version": "3.0.0-rc.0", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "license": "MIT", "main": "dist/client/index.js", @@ -23,11 +23,11 @@ "prepublish": "node ../../scripts/prepublish.js" }, "dependencies": { - "@storybook/addon-actions": "^3.0.0-alpha.4", - "@storybook/addon-links": "^3.0.0-alpha.4", - "@storybook/addons": "^3.0.0-alpha.0", - "@storybook/channel-postmessage": "^3.0.0-alpha.0", - "@storybook/ui": "^3.0.0-alpha.0", + "@storybook/addon-actions": "^3.0.0-rc.0", + "@storybook/addon-links": "^3.0.0-rc.0", + "@storybook/addons": "^3.0.0-rc.0", + "@storybook/channel-postmessage": "^3.0.0-rc.0", + "@storybook/ui": "^3.0.0-rc.0", "airbnb-js-shims": "^1.1.1", "autoprefixer": "^7.1.1", "babel-core": "^6.24.1", diff --git a/lerna.json b/lerna.json index 06c36438fb93..4a413a50d52c 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "2.0.0-rc.5", - "version": "3.0.0-alpha.5", + "version": "3.0.0-rc.0", "commands": { "bootstrap": { "ignore": [ diff --git a/lib/addons/package.json b/lib/addons/package.json index 3f573eaa096c..408d107cf9a6 100644 --- a/lib/addons/package.json +++ b/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "3.0.0-alpha.0", + "version": "3.0.0-rc.0", "description": "Storybook addons store", "main": "dist/index.js", "scripts": { diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json index c220f82e441b..0bd1650836e8 100644 --- a/lib/channel-postmessage/package.json +++ b/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "3.0.0-alpha.0", + "version": "3.0.0-rc.0", "description": "", "main": "dist/index.js", "scripts": { @@ -11,7 +11,7 @@ "shelljs": "^0.7.7" }, "dependencies": { - "@storybook/channels": "^3.0.0-alpha.0", + "@storybook/channels": "^3.0.0-rc.0", "json-stringify-safe": "^5.0.1" } } diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json index db08520c62c1..b6f40c055210 100644 --- a/lib/channel-websocket/package.json +++ b/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "3.0.0-alpha.0", + "version": "3.0.0-rc.0", "description": "", "main": "dist/index.js", "scripts": { @@ -11,6 +11,6 @@ "shelljs": "^0.7.7" }, "dependencies": { - "@storybook/channels": "^3.0.0-alpha.0" + "@storybook/channels": "^3.0.0-rc.0" } } diff --git a/lib/channels/package.json b/lib/channels/package.json index c1e15f2aa189..a5af9e56bebe 100644 --- a/lib/channels/package.json +++ b/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "3.0.0-alpha.0", + "version": "3.0.0-rc.0", "description": "", "main": "dist/index.js", "scripts": { diff --git a/lib/cli/package.json b/lib/cli/package.json index d482226334db..32dbb6cd0a19 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "3.0.0-alpha.5", + "version": "3.0.0-rc.0", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "bin": { "getstorybook": "./bin/generate.js" diff --git a/lib/codemod/package.json b/lib/codemod/package.json index a0e052fce995..490da844ead7 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.1", + "version": "3.0.0-rc.0", "license": "MIT", "repository": { "type": "git", diff --git a/lib/ui/package.json b/lib/ui/package.json index b922cba0993d..5d99989a474d 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ui", - "version": "3.0.0-alpha.0", + "version": "3.0.0-rc.0", "description": "Core Storybook UI", "repository": { "type": "git", From 9889b1422b057adcfc0a47303aa32034b109a6b8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 May 2017 19:29:26 +0200 Subject: [PATCH 22/24] FIX open collective notice on installing cli --- lib/cli/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/cli/package.json b/lib/cli/package.json index 32dbb6cd0a19..2c3d2bbbe73c 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -31,6 +31,6 @@ "update-notifier": "^2.1.0" }, "scripts": { - "postinstall": "opencollective postinstall" + "postinstall": "opencollective postinstall --collective=storybook" } } From 985ba14f53e4ad46d711b25028db2f1ed5af8eb9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 25 May 2017 19:52:40 +0200 Subject: [PATCH 23/24] v3.0.0-rc.1 --- lerna.json | 2 +- lib/cli/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lerna.json b/lerna.json index 4a413a50d52c..d5d716611c83 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "lerna": "2.0.0-rc.5", - "version": "3.0.0-rc.0", + "version": "3.0.0-rc.1", "commands": { "bootstrap": { "ignore": [ diff --git a/lib/cli/package.json b/lib/cli/package.json index 2c3d2bbbe73c..ec5529f703cc 100644 --- a/lib/cli/package.json +++ b/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "3.0.0-rc.0", + "version": "3.0.0-rc.1", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "bin": { "getstorybook": "./bin/generate.js" From 9462027f28eecf2b128b15d9bd2ba1fdb37326f6 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 26 May 2017 10:05:20 +0200 Subject: [PATCH 24/24] FIX linting --- .eslintrc.js | 2 +- .../containers/CommentsPanel/dataStore.js | 2 +- addons/info/example/story.js | 20 +++++++++---------- addons/info/src/components/Props.js | 4 ++-- .../knobs/src/components/__tests__/Array.js | 2 +- addons/knobs/src/typescript.test.js | 2 +- app/react-native/src/bin/storybook-start.js | 2 +- app/react-native/src/index.js | 4 ++-- app/react-native/src/preview/story_kind.js | 2 +- app/react-native/src/server/addons.js | 2 +- app/react-native/src/server/middleware.js | 2 +- app/react/addons.js | 2 +- app/react/src/client/index.js | 4 ++-- app/react/src/client/preview/client_api.js | 2 +- app/react/src/server/build.js | 2 +- app/react/src/server/index.js | 6 +++--- lib/cli/generators/METEOR/index.js | 4 ++-- .../update-organisation-name.test.js | 2 +- lib/ui/README.md | 2 ++ lib/ui/src/modules/api/actions/api.js | 2 +- .../ui/components/down_panel/index.test.js | 4 ++-- .../ui/components/layout/index.test.js | 8 ++++---- .../ui/components/left_panel/index.test.js | 4 ++-- .../ui/components/left_panel/stories.test.js | 14 ++----------- 24 files changed, 46 insertions(+), 54 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index ea25eb04850a..2cb6471214a0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -19,7 +19,7 @@ module.exports = { printWidth: 100, tabWidth: 2, bracketSpacing: true, - trailingComma: 'all', + trailingComma: 'es5', singleQuote: true, }], quotes: ['warn', 'single'], diff --git a/addons/comments/src/manager/containers/CommentsPanel/dataStore.js b/addons/comments/src/manager/containers/CommentsPanel/dataStore.js index 25707d1bc564..169cabb87070 100644 --- a/addons/comments/src/manager/containers/CommentsPanel/dataStore.js +++ b/addons/comments/src/manager/containers/CommentsPanel/dataStore.js @@ -53,7 +53,7 @@ export default class DataStore { () => { this._loadUsers().then(() => this._loadComments()); }, - 1000 * 60, // Reload for every minute + 1000 * 60 // Reload for every minute ); } diff --git a/addons/info/example/story.js b/addons/info/example/story.js index a89f76b6f17b..ca357f89a9db 100644 --- a/addons/info/example/story.js +++ b/addons/info/example/story.js @@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions'; import backgrounds from 'react-storybook-addon-backgrounds'; storiesOf( - 'Button', + 'Button' ).addWithInfo( 'simple usage', 'This is the basic usage with the button with providing a label to show the text.', @@ -18,7 +18,7 @@ storiesOf( Click the "?" mark at top-right to view the info.

- ), + ) ); storiesOf('Button').addWithInfo( @@ -27,7 +27,7 @@ storiesOf('Button').addWithInfo( This is the basic usage with the button with providing a label to show the text. `, () =>