From be1ac9c765516a1af90b13d7627919551d850b5a Mon Sep 17 00:00:00 2001 From: Aymeric Duchein Date: Fri, 16 Mar 2018 16:47:42 +0100 Subject: [PATCH 1/8] feat(notes): add marked options --- addons/notes/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/notes/src/index.js b/addons/notes/src/index.js index 247210ab1e3..8e709f0b20f 100644 --- a/addons/notes/src/index.js +++ b/addons/notes/src/index.js @@ -3,10 +3,10 @@ import addons from '@storybook/addons'; import marked from 'marked'; import { WithNotes as ReactWithNotes } from './react'; -export const withMarkdownNotes = text => { +export const withMarkdownNotes = (text, options) => { const channel = addons.getChannel(); - return getStory => context => { + marked.setOptions({ ...marked.defaults, options }); // send the notes to the channel before the story is rendered channel.emit('storybook/notes/add_notes', marked(text)); return getStory(context); From 31dd196f745dea20d1620aa659be9626e64a0e34 Mon Sep 17 00:00:00 2001 From: Hypnosphi Date: Sun, 1 Apr 2018 01:47:12 +0300 Subject: [PATCH 2/8] Fix HtmlWebpackPlugin error --- app/angular/src/server/config/webpack.config.js | 2 ++ app/angular/src/server/config/webpack.config.prod.js | 2 ++ app/mithril/src/server/config/webpack.config.js | 2 ++ app/mithril/src/server/config/webpack.config.prod.js | 2 ++ app/polymer/src/server/config/webpack.config.js | 2 ++ app/polymer/src/server/config/webpack.config.prod.js | 2 ++ app/react/src/server/config/webpack.config.js | 2 ++ app/react/src/server/config/webpack.config.prod.js | 2 ++ app/vue/src/server/config/webpack.config.js | 2 ++ app/vue/src/server/config/webpack.config.prod.js | 2 ++ 10 files changed, 20 insertions(+) diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js index 5d3988a875b..2551fbab846 100644 --- a/app/angular/src/server/config/webpack.config.js +++ b/app/angular/src/server/config/webpack.config.js @@ -33,6 +33,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -42,6 +43,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js index 84a38cc8936..51ee6b7c5f2 100644 --- a/app/angular/src/server/config/webpack.config.prod.js +++ b/app/angular/src/server/config/webpack.config.prod.js @@ -34,6 +34,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -43,6 +44,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/mithril/src/server/config/webpack.config.js b/app/mithril/src/server/config/webpack.config.js index e6508ec5a18..dec06b97b79 100644 --- a/app/mithril/src/server/config/webpack.config.js +++ b/app/mithril/src/server/config/webpack.config.js @@ -33,6 +33,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -42,6 +43,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/mithril/src/server/config/webpack.config.prod.js b/app/mithril/src/server/config/webpack.config.prod.js index b02fc3c5a0e..c97eedc9264 100644 --- a/app/mithril/src/server/config/webpack.config.prod.js +++ b/app/mithril/src/server/config/webpack.config.prod.js @@ -32,6 +32,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -41,6 +42,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/polymer/src/server/config/webpack.config.js b/app/polymer/src/server/config/webpack.config.js index c94ddf9765f..eee970fdba3 100644 --- a/app/polymer/src/server/config/webpack.config.js +++ b/app/polymer/src/server/config/webpack.config.js @@ -34,6 +34,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -43,6 +44,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/polymer/src/server/config/webpack.config.prod.js b/app/polymer/src/server/config/webpack.config.prod.js index a14a5189add..85197a6ca1e 100644 --- a/app/polymer/src/server/config/webpack.config.prod.js +++ b/app/polymer/src/server/config/webpack.config.prod.js @@ -33,6 +33,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -42,6 +43,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/react/src/server/config/webpack.config.js b/app/react/src/server/config/webpack.config.js index e6508ec5a18..dec06b97b79 100644 --- a/app/react/src/server/config/webpack.config.js +++ b/app/react/src/server/config/webpack.config.js @@ -33,6 +33,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -42,6 +43,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/react/src/server/config/webpack.config.prod.js b/app/react/src/server/config/webpack.config.prod.js index b02fc3c5a0e..c97eedc9264 100644 --- a/app/react/src/server/config/webpack.config.prod.js +++ b/app/react/src/server/config/webpack.config.prod.js @@ -32,6 +32,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -41,6 +42,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/vue/src/server/config/webpack.config.js b/app/vue/src/server/config/webpack.config.js index 159b53a45b0..506115039a5 100644 --- a/app/vue/src/server/config/webpack.config.js +++ b/app/vue/src/server/config/webpack.config.js @@ -33,6 +33,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -42,6 +43,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, diff --git a/app/vue/src/server/config/webpack.config.prod.js b/app/vue/src/server/config/webpack.config.prod.js index 4bf755efb58..59fb4265ec4 100644 --- a/app/vue/src/server/config/webpack.config.prod.js +++ b/app/vue/src/server/config/webpack.config.prod.js @@ -32,6 +32,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['manager'], + chunksSortMode: 'none', data: { managerHead: getManagerHeadHtml(configDir), version, @@ -41,6 +42,7 @@ export default function(configDir) { new HtmlWebpackPlugin({ filename: 'iframe.html', excludeChunks: ['manager'], + chunksSortMode: 'none', data: { previewHead: getPreviewHeadHtml(configDir), }, From 5359e298b4eaacfd27d4c87e1b82a1cb8c2a453f Mon Sep 17 00:00:00 2001 From: Hypnosphi Date: Sun, 1 Apr 2018 17:50:04 +0300 Subject: [PATCH 3/8] Migrate to ws@5 --- app/react-native/package.json | 2 +- app/react-native/src/server/index.js | 7 ------- yarn.lock | 7 +++---- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/app/react-native/package.json b/app/react-native/package.json index a4bbf39306b..b7046939b92 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -65,7 +65,7 @@ "webpack": "^4.4.1", "webpack-dev-middleware": "^3.1.0", "webpack-hot-middleware": "^2.21.2", - "ws": "^4.1.0" + "ws": "^5.1.0" }, "devDependencies": { "react-native": "^0.52.2" diff --git a/app/react-native/src/server/index.js b/app/react-native/src/server/index.js index c00d8cb05d8..09e0a34284b 100755 --- a/app/react-native/src/server/index.js +++ b/app/react-native/src/server/index.js @@ -24,13 +24,6 @@ export default class Server { } } - // see https://github.com/websockets/ws/issues/1256#issuecomment-364988689 - socket.on('error', err => { - // Ignore network errors like `ECONNRESET`, `EPIPE`, etc. - if (err.errno) return; - throw err; - }); - socket.on('message', data => { this.wsServer.clients.forEach(c => { if (!this.options.manualId || (socket.pairedId && socket.pairedId === c.pairedId)) { diff --git a/yarn.lock b/yarn.lock index 03fc4a105c4..9b61ac5d5ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17270,12 +17270,11 @@ ws@^3.0.0, ws@~3.3.1: safe-buffer "~5.1.0" ultron "~1.1.0" -ws@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/ws/-/ws-4.1.0.tgz#a979b5d7d4da68bf54efe0408967c324869a7289" +ws@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-5.1.0.tgz#ad7f95a65c625d47c24f2b8e5928018cf965e2a6" dependencies: async-limiter "~1.0.0" - safe-buffer "~5.1.0" x-is-function@^1.0.4: version "1.0.4" From a87bd2de769539a563903bd26e040d93134bffd3 Mon Sep 17 00:00:00 2001 From: Hypnosphi Date: Sun, 1 Apr 2018 22:12:20 +0300 Subject: [PATCH 4/8] Scroll to top of the page when changing story --- .../addon-links.stories.storyshot | 30 +++++++++++++++++++ .../stories/addon-links.stories.js | 10 +++++++ lib/core/src/client/preview/start.js | 12 +++++++- 3 files changed, 51 insertions(+), 1 deletion(-) diff --git a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot index b02867dfb0f..7fe4396b8c8 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot @@ -34,6 +34,36 @@ exports[`Storyshots Addons|Links.Link Second 1`] = ` `; +exports[`Storyshots Addons|Links.Scroll position First 1`] = ` +Array [ +
+ Scroll down to see the link +
, + + Go to Second + , +] +`; + +exports[`Storyshots Addons|Links.Scroll position Second 1`] = ` +Array [ +
+ Scroll down to see the link +
, + + Go to First + , +] +`; + exports[`Storyshots Addons|Links.Select First 1`] = ` { return See action logger; }); + +storiesOf('Addons|Links.Scroll position', module) + .addDecorator(story => ( + +
Scroll down to see the link
+ {story()} + + )) + .add('First', () => Go to Second) + .add('Second', () => Go to First); diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index 426f887ad95..4319a46f808 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -1,6 +1,6 @@ import { createStore } from 'redux'; import addons from '@storybook/addons'; -import { navigator, window } from 'global'; +import { navigator, window, document } from 'global'; import createChannel from '@storybook/channel-postmessage'; import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events'; @@ -52,10 +52,20 @@ export default function start(render, { decorateStory } = {}) { const { clearDecorators } = clientApi; const configApi = new ConfigApi({ clearDecorators, ...context }); + let prevKind; + let prevStory; + // initialize the UI const renderUI = () => { if (isBrowser) { render(context); + const { selectedKind, selectedStory } = reduxStore.getState(); + if (selectedKind !== prevKind || selectedStory !== prevStory) { + // Scroll to top of the page when changing story + document.documentElement.scrollTop = 0; + prevKind = selectedKind; + prevStory = selectedStory; + } } }; From 5b6d0a77384b8dc41600373cdfae3b04fc488fb1 Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Sun, 1 Apr 2018 02:06:46 -0700 Subject: [PATCH 5/8] adding currentBackground for @addon/background --- addons/background/src/BackgroundPanel.js | 11 +++++++++-- .../background/src/__tests__/BackgroundPanel.js | 15 +++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/addons/background/src/BackgroundPanel.js b/addons/background/src/BackgroundPanel.js index bf1172ba923..363aac7ade5 100644 --- a/addons/background/src/BackgroundPanel.js +++ b/addons/background/src/BackgroundPanel.js @@ -72,11 +72,11 @@ export default class BackgroundPanel extends Component { this.channel = addons.getChannel(); } - this.state = { backgrounds: [] }; + this.state = { backgrounds: [], currentBackground: null }; this.channel.on('background-set', backgrounds => { this.setState({ backgrounds }); - const currentBackground = api.getQueryParam('background'); + const currentBackground = api.getQueryParam('background') || this.state.currentBackground; if (currentBackground) { this.updateIframe(currentBackground); @@ -106,6 +106,7 @@ export default class BackgroundPanel extends Component { } setBackgroundFromSwatch = background => { + this.updateCurrentBackground(background); this.updateIframe(background); this.props.api.setQueryParams({ background }); }; @@ -114,6 +115,12 @@ export default class BackgroundPanel extends Component { this.iframe.style.background = background; } + updateCurrentBackground(background) { + this.setState({ + currentBackground: background, + }); + } + render() { const backgrounds = [...this.state.backgrounds]; diff --git a/addons/background/src/__tests__/BackgroundPanel.js b/addons/background/src/__tests__/BackgroundPanel.js index 2489d4c9d01..85170359902 100644 --- a/addons/background/src/__tests__/BackgroundPanel.js +++ b/addons/background/src/__tests__/BackgroundPanel.js @@ -129,4 +129,19 @@ describe('Background Panel', () => { background: backgrounds[0].value, }); }); + + it('should persist the current background color in state', () => { + const SpiedChannel = new EventEmitter(); + const backgroundPanel = mount(); + backgroundPanel.setState({ backgrounds }); // force re-render + + expect(backgroundPanel.state('currentBackground')).toEqual(null); + + backgroundPanel + .find('h4') + .first() + .simulate('click'); + + expect(backgroundPanel.state('currentBackground')).toEqual(backgrounds[0].value); + }); }); From aae7de5453f98fc4e5ed1b1f4c64da39bcedd9e2 Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Sun, 1 Apr 2018 19:41:48 -0700 Subject: [PATCH 6/8] Revert "adding currentBackground for @addon/background" This reverts commit 12c5af9e513f989e03db87475811b86a4cdd718a. --- addons/background/src/BackgroundPanel.js | 11 ++--------- .../background/src/__tests__/BackgroundPanel.js | 15 --------------- 2 files changed, 2 insertions(+), 24 deletions(-) diff --git a/addons/background/src/BackgroundPanel.js b/addons/background/src/BackgroundPanel.js index 363aac7ade5..bf1172ba923 100644 --- a/addons/background/src/BackgroundPanel.js +++ b/addons/background/src/BackgroundPanel.js @@ -72,11 +72,11 @@ export default class BackgroundPanel extends Component { this.channel = addons.getChannel(); } - this.state = { backgrounds: [], currentBackground: null }; + this.state = { backgrounds: [] }; this.channel.on('background-set', backgrounds => { this.setState({ backgrounds }); - const currentBackground = api.getQueryParam('background') || this.state.currentBackground; + const currentBackground = api.getQueryParam('background'); if (currentBackground) { this.updateIframe(currentBackground); @@ -106,7 +106,6 @@ export default class BackgroundPanel extends Component { } setBackgroundFromSwatch = background => { - this.updateCurrentBackground(background); this.updateIframe(background); this.props.api.setQueryParams({ background }); }; @@ -115,12 +114,6 @@ export default class BackgroundPanel extends Component { this.iframe.style.background = background; } - updateCurrentBackground(background) { - this.setState({ - currentBackground: background, - }); - } - render() { const backgrounds = [...this.state.backgrounds]; diff --git a/addons/background/src/__tests__/BackgroundPanel.js b/addons/background/src/__tests__/BackgroundPanel.js index 85170359902..2489d4c9d01 100644 --- a/addons/background/src/__tests__/BackgroundPanel.js +++ b/addons/background/src/__tests__/BackgroundPanel.js @@ -129,19 +129,4 @@ describe('Background Panel', () => { background: backgrounds[0].value, }); }); - - it('should persist the current background color in state', () => { - const SpiedChannel = new EventEmitter(); - const backgroundPanel = mount(); - backgroundPanel.setState({ backgrounds }); // force re-render - - expect(backgroundPanel.state('currentBackground')).toEqual(null); - - backgroundPanel - .find('h4') - .first() - .simulate('click'); - - expect(backgroundPanel.state('currentBackground')).toEqual(backgrounds[0].value); - }); }); From 436263823acc5d370d302ddb14bf2f8bedb08d77 Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Sun, 1 Apr 2018 19:50:21 -0700 Subject: [PATCH 7/8] dont unset query string on story change --- addons/background/src/BackgroundPanel.js | 1 - addons/background/src/__tests__/BackgroundPanel.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/addons/background/src/BackgroundPanel.js b/addons/background/src/BackgroundPanel.js index bf1172ba923..0cd6b3604ab 100644 --- a/addons/background/src/BackgroundPanel.js +++ b/addons/background/src/BackgroundPanel.js @@ -88,7 +88,6 @@ export default class BackgroundPanel extends Component { this.channel.on('background-unset', () => { this.setState({ backgrounds: [] }); - api.setQueryParams({ background: null }); this.updateIframe('none'); }); } diff --git a/addons/background/src/__tests__/BackgroundPanel.js b/addons/background/src/__tests__/BackgroundPanel.js index 2489d4c9d01..b4282e55fb5 100644 --- a/addons/background/src/__tests__/BackgroundPanel.js +++ b/addons/background/src/__tests__/BackgroundPanel.js @@ -54,12 +54,12 @@ describe('Background Panel', () => { expect(mockedApi.getQueryParam).toBeCalledWith('background'); }); - it('should unset the query string', () => { + it('should not unset the query string', () => { const SpiedChannel = new EventEmitter(); mount(); SpiedChannel.emit('background-unset', []); - expect(mockedApi.setQueryParams).toBeCalledWith({ background: null }); + expect(mockedApi.setQueryParams).not.toHaveBeenCalled(); }); it('should accept colors through channel and render the correct swatches with a default swatch', () => { From e65a3a582735c12ae2915fa92a4fbd86be7636bd Mon Sep 17 00:00:00 2001 From: Rahul <134624+Primigenus@users.noreply.github.com> Date: Sun, 1 Apr 2018 23:28:11 -0700 Subject: [PATCH 8/8] Tweaks for range labels Aligns the font size with the knob label and ensures the range label doesn't wrap. --- addons/knobs/src/components/types/Number.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/addons/knobs/src/components/types/Number.js b/addons/knobs/src/components/types/Number.js index a31cbf161fe..b9575ffc7b8 100644 --- a/addons/knobs/src/components/types/Number.js +++ b/addons/knobs/src/components/types/Number.js @@ -23,6 +23,8 @@ const styles = { rangeLabel: { paddingLeft: 5, paddingRight: 5, + fontSize: 12, + whiteSpace: 'nowrap', }, rangeWrapper: { display: 'flex',