From 3911153b8c055d61adc2d8ba4c55d03fa69c6559 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 23 Dec 2019 17:35:29 +0100 Subject: [PATCH 1/8] ADD prototype of layout functionality --- .../stories/core/layout.stories.js | 43 +++++++++++++++++++ lib/core/package.json | 1 + lib/core/src/client/preview/start.js | 25 ++++++++++- 3 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 examples/official-storybook/stories/core/layout.stories.js diff --git a/examples/official-storybook/stories/core/layout.stories.js b/examples/official-storybook/stories/core/layout.stories.js new file mode 100644 index 000000000000..babef24261a5 --- /dev/null +++ b/examples/official-storybook/stories/core/layout.stories.js @@ -0,0 +1,43 @@ +import React from 'react'; +import { Button } from '@storybook/components'; + +export default { + title: 'Core/Layout', + parameters: { + layout: 'padded', + }, +}; + +export const InheritedLayout = () => ; + +export const PaddedLayout = () => ; +PaddedLayout.story = { + parameters: { + layout: 'padded', + }, +}; + +export const CenteredLayout = () => ; +CenteredLayout.story = { + parameters: { + layout: 'centered', + }, +}; + +export const CenteredBlockLayout = () => ( +
+ +
+); +CenteredBlockLayout.story = { + parameters: { + layout: 'centered', + }, +}; + +export const FullScreenLayout = () => ; +FullScreenLayout.story = { + parameters: { + layout: 'fullscreen', + }, +}; diff --git a/lib/core/package.json b/lib/core/package.json index 7d6da9e1f21c..f5262423d2bd 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -74,6 +74,7 @@ "ip": "^1.1.5", "json5": "^2.1.1", "lazy-universal-dotenv": "^3.0.1", + "memoizerific": "^1.11.3", "micromatch": "^4.0.2", "node-fetch": "^2.6.0", "open": "^7.0.0", diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index cee434775453..4f03da3b539d 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -3,6 +3,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import deprecate from 'util-deprecate'; import AnsiToHtml from 'ansi-to-html'; +import memoize from 'memoizerific'; import addons from '@storybook/addons'; import createChannel from '@storybook/channel-postmessage'; @@ -121,6 +122,25 @@ function focusInInput(event) { ); } +const applyLayout = memoize(1)(layout => { + switch (layout) { + case 'centered': { + document.body.style = + 'margin: 0px;display: flex;justify-content: center;align-items: center;min-height: 100vh;padding: 1rem;box-sizing: border-box;'; + break; + } + case 'fullscreen': { + document.body.style = 'margin: 0;'; + break; + } + case 'padded': + default: { + document.body.style = 'margin: 0;padding: 1rem'; + break; + } + } +}); + export default function start(render, { decorateStory } = {}) { const context = getContext(decorateStory); @@ -142,7 +162,10 @@ export default function start(render, { decorateStory } = {}) { const { kind, name, getDecorated, id, parameters, error } = data || {}; - const viewMode = parameters && parameters.docsOnly ? 'docs' : urlViewMode; + const { docsOnly, layout } = parameters; + applyLayout(layout); + + const viewMode = parameters && docsOnly ? 'docs' : urlViewMode; const renderContext = { ...context, From 324e25285ab7320b00528971aab954c3595b1d45 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 23 Dec 2019 18:46:25 +0100 Subject: [PATCH 2/8] FIX linting --- lib/core/src/client/preview/start.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index 4f03da3b539d..fcf9ea1dae86 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -160,12 +160,12 @@ export default function start(render, { decorateStory } = {}) { const data = storyStore.fromId(storyId); - const { kind, name, getDecorated, id, parameters, error } = data || {}; + const { kind, name, getDecorated, id, parameters = {}, error } = data || {}; const { docsOnly, layout } = parameters; applyLayout(layout); - const viewMode = parameters && docsOnly ? 'docs' : urlViewMode; + const viewMode = docsOnly ? 'docs' : urlViewMode; const renderContext = { ...context, From d96077052033b8f2babb6c1a2985aab44b822aa5 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Dec 2019 15:08:02 +0100 Subject: [PATCH 3/8] Use an example component without transparent background. --- .../official-storybook/stories/core/layout.stories.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/official-storybook/stories/core/layout.stories.js b/examples/official-storybook/stories/core/layout.stories.js index babef24261a5..13c8b62dafdf 100644 --- a/examples/official-storybook/stories/core/layout.stories.js +++ b/examples/official-storybook/stories/core/layout.stories.js @@ -8,16 +8,16 @@ export default { }, }; -export const InheritedLayout = () => ; +export const InheritedLayout = () => ; -export const PaddedLayout = () => ; +export const PaddedLayout = () => ; PaddedLayout.story = { parameters: { layout: 'padded', }, }; -export const CenteredLayout = () => ; +export const CenteredLayout = () => ; CenteredLayout.story = { parameters: { layout: 'centered', @@ -26,7 +26,7 @@ CenteredLayout.story = { export const CenteredBlockLayout = () => (
- +
); CenteredBlockLayout.story = { @@ -35,7 +35,7 @@ CenteredBlockLayout.story = { }, }; -export const FullScreenLayout = () => ; +export const FullScreenLayout = () => ; FullScreenLayout.story = { parameters: { layout: 'fullscreen', From 0dc65f328d23961019299ad780e59c7298b7420b Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Dec 2019 15:08:46 +0100 Subject: [PATCH 4/8] Drop memoization in favor of a local variable and cleanup some code. --- lib/core/package.json | 1 - lib/core/src/client/preview/start.js | 42 ++++++++++++++++------------ 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/lib/core/package.json b/lib/core/package.json index f5262423d2bd..7d6da9e1f21c 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -74,7 +74,6 @@ "ip": "^1.1.5", "json5": "^2.1.1", "lazy-universal-dotenv": "^3.0.1", - "memoizerific": "^1.11.3", "micromatch": "^4.0.2", "node-fetch": "^2.6.0", "open": "^7.0.0", diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index fcf9ea1dae86..79ee397212d0 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -3,7 +3,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import deprecate from 'util-deprecate'; import AnsiToHtml from 'ansi-to-html'; -import memoize from 'memoizerific'; import addons from '@storybook/addons'; import createChannel from '@storybook/channel-postmessage'; @@ -122,24 +121,31 @@ function focusInInput(event) { ); } -const applyLayout = memoize(1)(layout => { - switch (layout) { - case 'centered': { - document.body.style = - 'margin: 0px;display: flex;justify-content: center;align-items: center;min-height: 100vh;padding: 1rem;box-sizing: border-box;'; - break; - } - case 'fullscreen': { - document.body.style = 'margin: 0;'; - break; - } - case 'padded': - default: { - document.body.style = 'margin: 0;padding: 1rem'; - break; - } +let previousLayout; +const applyLayout = layout => { + const styles = { + centered: ` + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + padding: 1rem; + box-sizing: border-box; + `, + fullscreen: ` + margin: 0; + `, + padded: ` + margin: 0; + padding: 1rem; + `, + }[layout]; + if (styles && layout !== previousLayout) { + document.body.style = styles; + previousLayout = layout; } -}); +}; export default function start(render, { decorateStory } = {}) { const context = getContext(decorateStory); From b72326e2285899737fe335f59d5e414beb70ef06 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 30 Dec 2019 15:50:09 +0100 Subject: [PATCH 5/8] Allow setting layout based on story context. --- .../stories/core/layout.stories.js | 54 ++++++++----------- lib/core/src/client/preview/start.js | 15 +++--- 2 files changed, 31 insertions(+), 38 deletions(-) diff --git a/examples/official-storybook/stories/core/layout.stories.js b/examples/official-storybook/stories/core/layout.stories.js index 13c8b62dafdf..b8ec19cae8b8 100644 --- a/examples/official-storybook/stories/core/layout.stories.js +++ b/examples/official-storybook/stories/core/layout.stories.js @@ -1,43 +1,35 @@ import React from 'react'; -import { Button } from '@storybook/components'; + +// eslint-disable-next-line react/prop-types +const Box = ({ children, display = 'block' }) => ( +
{children}
+); export default { title: 'Core/Layout', parameters: { - layout: 'padded', + layout: ctx => ctx.name.toLowerCase().split(' ')[1], }, }; -export const InheritedLayout = () => ; +export const AutoPadded = () => padded layout based on story name; +export const AutoFullscreen = () => fullscreen layout based on story name; +export const AutoCentered = () => centered layout based on story name; -export const PaddedLayout = () => ; -PaddedLayout.story = { - parameters: { - layout: 'padded', - }, -}; +export const PaddedBlock = () => padded; +PaddedBlock.story = { parameters: { layout: 'padded' } }; -export const CenteredLayout = () => ; -CenteredLayout.story = { - parameters: { - layout: 'centered', - }, -}; +export const PaddedInline = () => padded; +PaddedInline.story = { parameters: { layout: 'padded' } }; -export const CenteredBlockLayout = () => ( -
- -
-); -CenteredBlockLayout.story = { - parameters: { - layout: 'centered', - }, -}; +export const FullscreenBlock = () => fullscreen; +FullscreenBlock.story = { parameters: { layout: 'fullscreen' } }; -export const FullScreenLayout = () => ; -FullScreenLayout.story = { - parameters: { - layout: 'fullscreen', - }, -}; +export const FullscreenInline = () => fullscreen; +FullscreenInline.story = { parameters: { layout: 'fullscreen' } }; + +export const CenteredBlock = () => centered; +CenteredBlock.story = { parameters: { layout: 'centered' } }; + +export const CenteredInline = () => centered; +CenteredInline.story = { parameters: { layout: 'centered' } }; diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index 79ee397212d0..c555dcf5449e 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -121,9 +121,9 @@ function focusInInput(event) { ); } -let previousLayout; -const applyLayout = layout => { - const styles = { +let previousStyles; +const applyLayout = (layout, ctx) => { + const layouts = { centered: ` display: flex; justify-content: center; @@ -140,10 +140,11 @@ const applyLayout = layout => { margin: 0; padding: 1rem; `, - }[layout]; - if (styles && layout !== previousLayout) { + }; + const styles = layouts[typeof layout === 'function' ? layout(ctx) : layout] || layouts.padded; + if (styles !== previousStyles) { document.body.style = styles; - previousLayout = layout; + previousStyles = styles; } }; @@ -169,7 +170,7 @@ export default function start(render, { decorateStory } = {}) { const { kind, name, getDecorated, id, parameters = {}, error } = data || {}; const { docsOnly, layout } = parameters; - applyLayout(layout); + applyLayout(layout, data); const viewMode = docsOnly ? 'docs' : urlViewMode; From b1ff89df2b39e92488e6eba19123a8048bbe2bbf Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 8 Jan 2020 19:09:38 +0100 Subject: [PATCH 6/8] FIX linting --- lib/core/src/client/preview/start.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index d7fd1e2238f0..f03e482086cf 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -250,7 +250,7 @@ export default function start(render, { decorateStory } = {}) { // Given a cleaned up state, render the appropriate view mode switch (viewMode) { case 'docs': { - const docs = (parameters && parameters.docs) || {}; + const docs = parameters.docs || {}; const DocsContainer = docs.container || (({ children }) => <>{children}); const Page = docs.page || NoDocs; ReactDOM.render( From 67b6c40acb2c25f09a8fabebd267b4d2eff3f259 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 9 Jan 2020 10:48:15 +0100 Subject: [PATCH 7/8] REMOVE function option for layout --- .../stories/core/layout.stories.js | 7 --- lib/core/src/client/preview/start.js | 56 ++++++++++--------- 2 files changed, 30 insertions(+), 33 deletions(-) diff --git a/examples/official-storybook/stories/core/layout.stories.js b/examples/official-storybook/stories/core/layout.stories.js index b8ec19cae8b8..c3020bec5b92 100644 --- a/examples/official-storybook/stories/core/layout.stories.js +++ b/examples/official-storybook/stories/core/layout.stories.js @@ -7,15 +7,8 @@ const Box = ({ children, display = 'block' }) => ( export default { title: 'Core/Layout', - parameters: { - layout: ctx => ctx.name.toLowerCase().split(' ')[1], - }, }; -export const AutoPadded = () => padded layout based on story name; -export const AutoFullscreen = () => fullscreen layout based on story name; -export const AutoCentered = () => centered layout based on story name; - export const PaddedBlock = () => padded; PaddedBlock.story = { parameters: { layout: 'padded' } }; diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index f03e482086cf..53ab88102542 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -121,32 +121,36 @@ function focusInInput(event) { ); } -let previousStyles; -const applyLayout = (layout, ctx) => { - const layouts = { - centered: ` - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - margin: 0; - padding: 1rem; - box-sizing: border-box; - `, - fullscreen: ` - margin: 0; - `, - padded: ` - margin: 0; - padding: 1rem; - `, +const applyLayout = (() => { + let previousStyles; + + return layout => { + const layouts = { + centered: ` + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + padding: 1rem; + box-sizing: border-box; + `, + fullscreen: ` + margin: 0; + `, + padded: ` + margin: 0; + padding: 1rem; + `, + }; + const styles = layouts[layout] || layouts.padded; + + if (styles !== previousStyles) { + document.body.style = styles; + previousStyles = styles; + } }; - const styles = layouts[typeof layout === 'function' ? layout(ctx) : layout] || layouts.padded; - if (styles !== previousStyles) { - document.body.style = styles; - previousStyles = styles; - } -}; +})(); export default function start(render, { decorateStory } = {}) { const context = getContext(decorateStory); @@ -170,7 +174,7 @@ export default function start(render, { decorateStory } = {}) { const { kind, name, getDecorated, id, parameters = {}, error } = data || {}; const { docsOnly, layout } = parameters; - applyLayout(layout, data); + applyLayout(layout); const viewMode = docsOnly ? 'docs' : urlViewMode; From 32ea52105cb4a926b2b1422fd762da223bcbb203 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 9 Jan 2020 10:53:28 +0100 Subject: [PATCH 8/8] Add default and invalid stories. --- examples/official-storybook/stories/core/layout.stories.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/examples/official-storybook/stories/core/layout.stories.js b/examples/official-storybook/stories/core/layout.stories.js index c3020bec5b92..b347acb6c8c2 100644 --- a/examples/official-storybook/stories/core/layout.stories.js +++ b/examples/official-storybook/stories/core/layout.stories.js @@ -9,6 +9,8 @@ export default { title: 'Core/Layout', }; +export const Default = () => padded by default; + export const PaddedBlock = () => padded; PaddedBlock.story = { parameters: { layout: 'padded' } }; @@ -26,3 +28,6 @@ CenteredBlock.story = { parameters: { layout: 'centered' } }; export const CenteredInline = () => centered; CenteredInline.story = { parameters: { layout: 'centered' } }; + +export const Invalid = () => invalid layout value; +CenteredInline.story = { parameters: { layout: '!invalid!' } };