From 975cd9ee08fdaa12cfbf17fc8413cd7aa9f04708 Mon Sep 17 00:00:00 2001 From: Mohamed Shaaban Date: Sun, 20 May 2018 11:38:29 +0200 Subject: [PATCH 1/4] Fix Logger Item component --- examples/official-storybook/stories/Logger.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/official-storybook/stories/Logger.js b/examples/official-storybook/stories/Logger.js index 80f2f03fbbf..4b6571c9ebc 100644 --- a/examples/official-storybook/stories/Logger.js +++ b/examples/official-storybook/stories/Logger.js @@ -12,7 +12,7 @@ const Wrapper = styled('div')({ const Title = styled('h1')({ margin: 0, }); -const Item = () => ({ +const Item = styled('div')({ listStyle: 'none', marginBottom: 10, }); From 72918111cd9d6e2a7a088e83d21394eb58495340 Mon Sep 17 00:00:00 2001 From: Mohamed Shaaban Date: Sun, 20 May 2018 11:40:06 +0200 Subject: [PATCH 2/4] Use makeDecorator to create withViewport --- addons/viewport/src/preview/withViewport.js | 42 ++++++++++++--------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/addons/viewport/src/preview/withViewport.js b/addons/viewport/src/preview/withViewport.js index 1527080ee02..44a74228c27 100644 --- a/addons/viewport/src/preview/withViewport.js +++ b/addons/viewport/src/preview/withViewport.js @@ -1,4 +1,4 @@ -import addons from '@storybook/addons'; +import addons, { makeDecorator } from '@storybook/addons'; import CoreEvents from '@storybook/core-events'; import deprecate from 'util-deprecate'; @@ -11,36 +11,44 @@ import { function noop() {} let handler = noop; +const callHandler = (...args) => handler(...args) + const subscription = () => { const channel = addons.getChannel(); - channel.on(VIEWPORT_CHANGED_EVENT_ID, handler); - return () => channel.removeListener(VIEWPORT_CHANGED_EVENT_ID, handler); + channel.on(VIEWPORT_CHANGED_EVENT_ID, callHandler); + return () => channel.removeListener(VIEWPORT_CHANGED_EVENT_ID, callHandler); }; -const setViewport = options => { +const applyViewportOptions = (options = {}) => { const channel = addons.getChannel(); + handler = options.onViewportChange || noop; if (options.onViewportChange) { channel.emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription); } + channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, options.name || DEFAULT_VIEWPORT); }; -export default function withViewport(nameOrOptions) { - const options = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions; +const withViewport = makeDecorator({ + name: 'withViewport', + parameterName: 'viewport', + wrapper: (getStory, context, { options, parameters }) => { + const storyOptions = parameters || options; + const viewportOptions = + typeof storyOptions === 'string' ? { name: storyOptions } : storyOptions; + + if (viewportOptions) { + applyViewportOptions(viewportOptions); + } - return (story, context) => { - const decorated = () => { - setViewport(options); - return story(); - }; + return getStory(context); + }, +}); - // Absent context means a direct call, withViewport(viewport)(storyFn) - return context ? decorated() : decorated; - }; -} +export default withViewport; export const Viewport = deprecate(({ children, ...options }) => { - setViewport(options); + applyViewportOptions(options); return children; -}, ` usage is deprecated, use .addDecorator(withViewport(viewport)) instead`); +}, ` usage is deprecated, use .addParameters({ viewport }) instead`); From b594d6c0d98c42fb8dc902ae479f33be83551906 Mon Sep 17 00:00:00 2001 From: Mohamed Shaaban Date: Sun, 20 May 2018 11:42:04 +0200 Subject: [PATCH 3/4] Use the parameterized style in viewport examples --- .../__snapshots__/addon-viewport.stories.storyshot | 14 +++++++++++++- .../stories/addon-viewport.stories.js | 11 ++++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot index 67479d9354a..17da990704e 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot @@ -32,7 +32,7 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden vi `; -exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" decorator 1`] = ` +exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" decorator (deprecated) 1`] = `
@@ -44,6 +44,18 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden vi
`; +exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = ` +
+ I respect my parents but I should be looking good on + + iPad + + . +
+`; + exports[`Storyshots Addons|Viewport.withViewport onViewportChange 1`] = `
)) .add( - 'Overridden via "withViewport" decorator', + 'Overridden via "withViewport" parameterized decorator', + () => ( + + I respect my parents but I should be looking good on iPad. + + ), + { viewport: 'ipad' } + ) + .add( + 'Overridden via "withViewport" decorator (deprecated)', withViewport('iphone6')(() => ( I respect my parents but I should be looking good on iPhone 6. From 3c13771fdc2334919c3d8b08fd822cff3c857955 Mon Sep 17 00:00:00 2001 From: Mohamed Shaaban Date: Sun, 20 May 2018 12:34:15 +0200 Subject: [PATCH 4/4] Update viewport documentation --- addons/viewport/README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/addons/viewport/README.md b/addons/viewport/README.md index a7817f11070..78dcae25c40 100644 --- a/addons/viewport/README.md +++ b/addons/viewport/README.md @@ -188,6 +188,19 @@ storiesOf('Decorator with string', module) )); +// Single +storiesOf('Parameterized story', module) + .addDecorator(withViewport()) + .add( + 'iPad', + () => ( +

+ Do I look good on iPad? +

+ ), + { viewport: 'ipad' } + ); + storiesOf('Decorator with object', module) .addDecorator( withViewport({