From 292d9152f73b2fb450432cedd89082b2a02a86bc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 27 Jan 2019 10:53:49 +0100 Subject: [PATCH] REFACTOR preview in prep for Addon type wrapper I think we even need need an addon type Context... hmm --- addons/a11y/src/components/ColorBlindness.js | 154 +++------ addons/a11y/src/register.js | 79 ++++- addons/backgrounds/src/Tool.js | 66 ++-- addons/backgrounds/src/register.js | 1 + addons/viewport/src/register.js | 1 + lib/addons/src/types.ts | 1 + lib/components/src/preview/background.js | 28 ++ lib/components/src/preview/iframe.js | 33 ++ lib/components/src/preview/preview.js | 311 ++++++++++-------- lib/components/src/preview/toolbar.js | 1 - lib/components/src/preview/zoom.js | 23 ++ lib/core/src/server/dev-server.js | 2 +- .../src/components/preview/preview.stories.js | 21 +- 13 files changed, 433 insertions(+), 288 deletions(-) create mode 100644 lib/components/src/preview/background.js create mode 100644 lib/components/src/preview/iframe.js create mode 100644 lib/components/src/preview/zoom.js diff --git a/addons/a11y/src/components/ColorBlindness.js b/addons/a11y/src/components/ColorBlindness.js index 115846a6689..f005db90a47 100644 --- a/addons/a11y/src/components/ColorBlindness.js +++ b/addons/a11y/src/components/ColorBlindness.js @@ -1,5 +1,5 @@ import { document } from 'global'; -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; import memoize from 'memoizerific'; import { styled } from '@storybook/theming'; @@ -17,10 +17,6 @@ const ColorIcon = styled.span( }) ); -const Hidden = styled.div(() => ({ - display: 'none', -})); - class ColorBlindness extends Component { state = { filter: false, @@ -44,118 +40,54 @@ class ColorBlindness extends Component { const { filter } = this.state; return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {({ hide }) => ( - - {[ - 'protanopia', - 'protanomaly', - 'deuteranopia', - 'deuteranomaly', - 'tritanopia', - 'tritanomaly', - 'achromatopsia', - 'achromatomaly', - ].map(i => ( - { - this.setFilter(filter === i ? null : i); - hide(); - }} - > - } /> - {i} - - ))} + + + + + {({ hide }) => ( + + {[ + 'protanopia', + 'protanomaly', + 'deuteranopia', + 'deuteranomaly', + 'tritanopia', + 'tritanomaly', + 'achromatopsia', + 'achromatomaly', + ].map(i => ( { - this.setFilter(filter === 'mono' ? null : 'mono'); + this.setFilter(filter === i ? null : i); hide(); }} > - } /> - mono + } /> + {i} - { - this.setFilter(null); - hide(); - }} - > - } /> - Off - - - )} - - + ))} + { + this.setFilter(filter === 'mono' ? null : 'mono'); + hide(); + }} + > + } /> + mono + + { + this.setFilter(null); + hide(); + }} + > + } /> + Off + + + )} + ); } } diff --git a/addons/a11y/src/register.js b/addons/a11y/src/register.js index 93c83c7f6d7..ada0ba6ba4e 100644 --- a/addons/a11y/src/register.js +++ b/addons/a11y/src/register.js @@ -1,14 +1,20 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import addons, { types } from '@storybook/addons'; +import { styled } from '@storybook/theming'; import Panel from './components/Panel'; import ColorBlindness from './components/ColorBlindness'; import { ADDON_ID, PANEL_ID } from './constants'; +const Hidden = styled.div(() => ({ + display: 'none', +})); + addons.register(ADDON_ID, api => { addons.add(PANEL_ID, { type: types.TOOL, + match: ({ viewMode }) => viewMode === 'story', render: () => , }); @@ -18,4 +24,75 @@ addons.register(ADDON_ID, api => { // eslint-disable-next-line react/prop-types render: ({ active, key }) => , }); + + addons.add(PANEL_ID, { + type: types.PREVIEW, + render: ({ children }) => ( + + {children} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }); }); diff --git a/addons/backgrounds/src/Tool.js b/addons/backgrounds/src/Tool.js index bca70454f90..6c7a458b559 100644 --- a/addons/backgrounds/src/Tool.js +++ b/addons/backgrounds/src/Tool.js @@ -92,46 +92,44 @@ export default class BackgroundTool extends Component { } return ( - - - - - - {({ hide }) => ( - - {selected !== undefined ? ( - - { - hide(); - this.change(undefined); - }} - > - - Reset - transparent - - - ) : null} - - {list.map(([key, value]) => ( + + + + + {({ hide }) => ( + + {selected !== undefined ? ( + { hide(); - this.change(key); + this.change(undefined); }} > - } /> - {key} - {value} + + Reset + transparent - ))} - - )} - - + + ) : null} + + {list.map(([key, value]) => ( + { + hide(); + this.change(key); + }} + > + } /> + {key} + {value} + + ))} + + )} + ); } } diff --git a/addons/backgrounds/src/register.js b/addons/backgrounds/src/register.js index bc5bb19b1cc..7f398493438 100644 --- a/addons/backgrounds/src/register.js +++ b/addons/backgrounds/src/register.js @@ -7,6 +7,7 @@ import Tool from './Tool'; addons.register(ADDON_ID, api => { addons.add(ADDON_ID, { type: types.TOOL, + match: ({ viewMode }) => viewMode === 'story', render: () => , }); }); diff --git a/addons/viewport/src/register.js b/addons/viewport/src/register.js index 4245e37f0fa..522cbb55de7 100644 --- a/addons/viewport/src/register.js +++ b/addons/viewport/src/register.js @@ -10,6 +10,7 @@ addons.register(ADDON_ID, api => { addons.add(ADDON_ID, { type: types.TOOL, title: 'viewport / media-queries', + match: ({ viewMode }) => viewMode === 'story', render: () => , }); }); diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts index 66d357d73ce..c3a1c43e9aa 100644 --- a/lib/addons/src/types.ts +++ b/lib/addons/src/types.ts @@ -2,6 +2,7 @@ export enum types { TAB = 'tab', PANEL = 'panel', TOOL = 'tool', + PREVIEW = 'preview', } export type Types = types | string; diff --git a/lib/components/src/preview/background.js b/lib/components/src/preview/background.js new file mode 100644 index 00000000000..3822c9a35a2 --- /dev/null +++ b/lib/components/src/preview/background.js @@ -0,0 +1,28 @@ +import React, { Component } from 'react'; + +const Context = React.createContext(); + +class Provider extends Component { + state = { + value: 'transparent', + grid: false, + }; + + setValue = value => this.setState({ value }); + + setGrid = grid => this.setState({ grid }); + + render() { + const { children } = this.props; + const { setValue, setGrid } = this; + const { value, grid } = this.state; + + return ( + {children} + ); + } +} + +const { Consumer } = Context; + +export { Consumer as BackgroundConsumer, Provider as BackgroundProvider }; diff --git a/lib/components/src/preview/iframe.js b/lib/components/src/preview/iframe.js new file mode 100644 index 00000000000..252ce69d0c9 --- /dev/null +++ b/lib/components/src/preview/iframe.js @@ -0,0 +1,33 @@ +import React, { Component, Fragment } from 'react'; +import PropTypes from 'prop-types'; + +import { Global, css } from '@storybook/theming'; + +export class IFrame extends Component { + // this component renders an iframe, which gets updates via post-messages + shouldComponentUpdate() { + return false; + } + + render() { + const { id, title, src, allowFullScreen, ...rest } = this.props; + return ( + + +