GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

REFACTOR preview in prep for Addon type wrapper

Browse Source 
I think we even need need an addon type Context... hmm
This commit is contained in:
Norbert de Langen 2019-01-27 10:53:49 +01:00
parent 7e5ac469e5
commit 292d9152f7
13 changed files with 433 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
addons/a11y/src/components/ColorBlindness.js
View File

@ -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,69 +40,6 @@ class ColorBlindness extends Component {
const { filter } = this.state;
return (
<Fragment>
<Hidden>
<svg key="svg">
<defs>
<filter id="protanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="protanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="deuteranopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="deuteranomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="tritanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="tritanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="achromatopsia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="achromatomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
</defs>
</svg>
</Hidden>
<Popout key="filters">
<IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
<Icons icon="mirror" />
@ -155,7 +88,6 @@ class ColorBlindness extends Component {
</List>
)}
</Popout>
</Fragment>
);
}
}

79
addons/a11y/src/register.js
View File

@ -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: () => <ColorBlindness />,
});
@ -18,4 +24,75 @@ addons.register(ADDON_ID, api => {
// eslint-disable-next-line react/prop-types
render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
});
addons.add(PANEL_ID, {
type: types.PREVIEW,
render: ({ children }) => (
<Fragment>
{children}
<Hidden>
<svg key="svg">
<defs>
<filter id="protanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="protanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="deuteranopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="deuteranomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="tritanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="tritanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="achromatopsia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
<filter id="achromatomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
/>
</filter>
</defs>
</svg>
</Hidden>
</Fragment>
),
});
});

2
addons/backgrounds/src/Tool.js
View File

@ -92,7 +92,6 @@ export default class BackgroundTool extends Component {
}
return (
<Fragment>
<Popout key="backgrounds">
<IconButton key="background" title="Backgrounds">
<Icons icon="photo" />
@ -131,7 +130,6 @@ export default class BackgroundTool extends Component {
</List>
)}
</Popout>
</Fragment>
);
}
}

1
addons/backgrounds/src/register.js
View File

@ -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: () => <Tool api={api} />,
});
});

1
addons/viewport/src/register.js
View File

@ -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: () => <Tool channel={channel} api={api} />,
});
});

1
lib/addons/src/types.ts
View File

@ -2,6 +2,7 @@ export enum types {
TAB = 'tab',
PANEL = 'panel',
TOOL = 'tool',
PREVIEW = 'preview',
}
export type Types = types | string;

28
lib/components/src/preview/background.js Normal file
View File

@ -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 (
<Context.Provider value={{ value, setValue, grid, setGrid }}>{children}</Context.Provider>
);
}
}
const { Consumer } = Context;
export { Consumer as BackgroundConsumer, Provider as BackgroundProvider };

33
lib/components/src/preview/iframe.js Normal file
View File

@ -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 (
<Fragment>
<Global
styles={css({
iframe: {
border: '0 none',
},
})}
/>
<iframe id={id} title={title} src={src} allowFullScreen={allowFullScreen} {...rest} />
</Fragment>
);
}
}
IFrame.propTypes = {
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
src: PropTypes.string.isRequired,
allowFullScreen: PropTypes.bool.isRequired,
};

273
lib/components/src/preview/preview.js
View File

@ -1,11 +1,10 @@
import { window } from 'global';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import memoize from 'memoizerific';
import Events from '@storybook/core-events';
import { SET_CURRENT_STORY } from '@storybook/core-events';
import { types } from '@storybook/addons';
import { Global, css } from '@storybook/theming';
import { Route } from '@storybook/router';
import Helmet from 'react-helmet-async';
@ -17,60 +16,82 @@ import Zoom from './tools/zoom';
import { Grid, Background } from './tools/background';
import * as S from './components';
class IFrame extends Component {
shouldComponentUpdate() {
// this component renders an iframe, which gets updates via post-messages
return false;
}
import { ZoomProvider, ZoomConsumer } from './zoom';
import { BackgroundProvider, BackgroundConsumer } from './background';
render() {
const { id, title, src, allowFullScreen, ...rest } = this.props;
return (
<Fragment>
<Global
styles={css({
iframe: {
border: '0 none',
},
})}
import { IFrame } from './iframe';
const renderIframe = ({ storyId, id }) => (
<IFrame
key="iframe"
id="storybook-preview-iframe"
title={id || 'preview'}
src={`iframe.html?id=${storyId}`}
allowFullScreen
/>
<iframe id={id} title={title} src={src} allowFullScreen={allowFullScreen} {...rest} />
</Fragment>
);
}
}
IFrame.propTypes = {
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
src: PropTypes.string.isRequired,
allowFullScreen: PropTypes.bool.isRequired,
};
const getElementList = memoize(10)((getFn, type, base) => base.concat(Object.values(getFn(type))));
const ActualPreview = ({ wrappers, id, storyId, active }) =>
wrappers.reduceRight(
(acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }),
renderIframe({ id, storyId })
);
const defaultWrappers = [
{ render: ({ children, active }) => <div hidden={!active}>{children}</div> },
{
render: ({ children }) => (
<BackgroundConsumer>
{({ value, grid }) => (
<Background id="storybook-preview-background" value={value}>
{grid ? <Grid /> : null}
{children}
</Background>
)}
</BackgroundConsumer>
),
},
{
render: ({ children }) => (
<ZoomConsumer>
{({ value }) => (
<S.Frame
style={{
width: `${100 * value}%`,
height: `${100 * value}%`,
transform: `scale(${1 / value})`,
}}
>
{children}
</S.Frame>
)}
</ZoomConsumer>
),
},
];
const RightTools = () => <Fragment />;
// eslint-disable-next-line react/no-multi-comp
class Preview extends Component {
state = {
zoom: 1,
grid: false,
};
shouldComponentUpdate({ storyId, viewMode, options }, { zoom, grid }) {
const { props, state } = this;
shouldComponentUpdate({ storyId, viewMode, options }) {
const { props } = this;
return (
options.isFullscreen !== props.options.isFullscreen ||
options.isToolshown !== props.options.isToolshown ||
viewMode !== props.viewMode ||
storyId !== props.storyId ||
zoom !== state.zoom ||
grid !== state.grid
storyId !== props.storyId
);
}
componentDidUpdate(prevProps) {
const { api, storyId } = this.props;
const { path: prevStoryId } = prevProps;
const { storyId: prevStoryId } = prevProps;
if (storyId && storyId !== prevStoryId) {
api.emit(Events.SET_CURRENT_STORY, { storyId });
api.emit(SET_CURRENT_STORY, { storyId });
}
}
@ -87,38 +108,25 @@ class Preview extends Component {
description,
} = this.props;
const { zoom, grid } = this.state;
const tools = getElements(types.TOOL);
const toolList = Object.values(tools);
const toolbarHeight = options.isToolshown ? 40 : 0;
const toolbarHeight = options.isToolshown ? 41 : 0;
const panels = getElements(types.TAB);
const panelList = Object.values(panels);
const tabsList = [
const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers);
const panels = getElementList(getElements, types.TAB, [
{
route: () => `/story/${storyId}`,
match: () => viewMode === 'story',
route: ({ storyId }) => `/story/${storyId}`,
match: ({ viewMode }) => viewMode === 'story',
render: ({ active, id, storyId }) => (
<ActualPreview active={active} wrappers={wrappers} id={id} storyId={storyId} />
),
title: 'Canvas',
key: 'canvas',
},
].concat(panelList);
return (
<Fragment>
{id === 'main' && (
<Helmet>
<title>{description ? `${description} ⋅ ` : ''}Storybook</title>
</Helmet>
)}
<Toolbar
key="toolbar"
shown={options.isToolshown}
left={[]
.concat(
tabsList.length > 1
? [
]);
const tools = getElementList(getElements, types.TOOL, [
{
render: () => (
<TabBar key="tabs" scroll={false}>
{tabsList.map((t, index) => {
{panels.map((t, index) => {
const to = t.route({ storyId, viewMode, path, location });
const isActive = t.match({ storyId, viewMode, path, location });
return (
@ -127,62 +135,103 @@ class Preview extends Component {
</S.UnstyledLink>
);
})}
</TabBar>,
<Separator key="1" />,
]
: [<Spacer key="1" />]
)
.concat([
<Zoom
key="zoom"
current={zoom}
set={v => this.setState({ zoom: zoom * v })}
reset={() => this.setState({ zoom: 1 })}
/>,
<Separator key="2" />,
<IconButton active={!!grid} key="grid" onClick={() => this.setState({ grid: !grid })}>
</TabBar>
),
},
{
match: ({ viewmode }) => viewMode === 'story',
render: () => (
<ZoomConsumer>
{({ set, value }) => (
<Zoom key="zoom" current={value} set={v => set(value * v)} reset={() => set(1)} />
)}
</ZoomConsumer>
),
},
{
match: ({ viewmode }) => viewMode === 'story',
render: () => (
<BackgroundConsumer>
{({ setGrid, grid }) => (
<IconButton active={!!grid} key="grid" onClick={() => setGrid(!grid)}>
<Icons icon="grid" />
</IconButton>,
...toolList.map((t, index) => (
<Fragment key={t.id || `t${index}`}>{t.render()}</Fragment>
)),
])}
right={[
<Separator key="1" />,
</IconButton>
)}
</BackgroundConsumer>
),
},
]);
const extraTools = [
{
match: ({ viewmode }) => viewMode === 'story',
render: () => (
<IconButton key="full" onClick={actions.toggleFullscreen}>
<Icons icon={options.isFullscreen ? 'cross' : 'expand'} />
</IconButton>,
<Separator key="2" />,
</IconButton>
),
},
{
match: ({ viewmode }) => viewMode === 'story',
render: () => (
<IconButton key="opener" onClick={() => window.open(`iframe.html?id=${storyId}`)}>
<Icons icon="share" />
</IconButton>,
]}
/>
</IconButton>
),
},
];
const left = tools
.filter(item => !item.match || item.match({ storyId, viewMode, location, path }))
.reduce((acc, item, index) => {
const content = item.render();
return content ? (
<Fragment key={item.id || item.key || `tool-${index}`}>
{acc}
{index > 0 ? <Separator title={index} key={`separator-${index}`} /> : null}
{content}
</Fragment>
) : (
acc
);
}, '');
const right = extraTools
.filter(item => !item.match || item.match({ storyId, viewMode, location, path }))
.reduce((acc, item, index) => {
const content = item.render();
return content ? (
<Fragment key={item.id || item.key || `tool-${index}`}>
{acc}
{index > 0 ? <Separator title={index} key={`separator-${index}`} /> : null}
{content}
</Fragment>
) : (
acc
);
}, '');
return (
<BackgroundProvider>
<ZoomProvider>
<Fragment>
{id === 'main' && (
<Helmet key="description">
<title>{description ? `${description} ⋅ ` : ''}Storybook</title>
</Helmet>
)}
<Toolbar key="toolbar" shown={options.isToolshown} left={left} right={right} />
<S.FrameWrap key="frame" offset={toolbarHeight}>
<div hidden={viewMode !== 'story'}>
<S.Frame
style={{
width: `${100 * zoom}%`,
height: `${100 * zoom}%`,
transform: `scale(${1 / zoom})`,
}}
>
<Background id="storybook-preview-background">{grid ? <Grid /> : null}</Background>
<IFrame
id="storybook-preview-iframe"
title={id || 'preview'}
src={`iframe.html?id=${storyId}`}
allowFullScreen
/>
</S.Frame>
{panelList.map(panel => (
<Fragment key={panel.id}>
{panel.render({ active: panel.match({ storyId, viewMode, location, path }) })}
{panels.map(({ id, key, render, match }) => (
<Fragment key={id || key}>
{render({ active: match({ storyId, viewMode, location, path }) })}
</Fragment>
))}
</div>
</S.FrameWrap>
</Fragment>
</ZoomProvider>
</BackgroundProvider>
);
}
}

1
lib/components/src/preview/toolbar.js
View File

@ -63,7 +63,6 @@ const Wrapper = styled.div(({ theme, shown }) => ({
left: 0,
height: 40,
width: '100%',
boxSizing: 'border-box',
borderBottom: theme.mainBorder,
background: theme.barFill,
color: '#999999',

23
lib/components/src/preview/zoom.js Normal file
View File

@ -0,0 +1,23 @@
import React, { Component } from 'react';
const Context = React.createContext();
class Provider extends Component {
state = {
value: 1,
};
set = value => this.setState({ value });
render() {
const { children } = this.props;
const { set } = this;
const { value } = this.state;
return <Context.Provider value={{ value, set }}>{children}</Context.Provider>;
}
}
const { Consumer } = Context;
export { Consumer as ZoomConsumer, Provider as ZoomProvider };

2
lib/core/src/server/dev-server.js
View File

@ -55,7 +55,7 @@ export default function(options) {
logger.line();
try {
previewReject(error);
previewProcess.close();
// previewProcess.close();
logger.warn('force closed preview build');
} catch (e) {
logger.warn('Unable to close preview build!');

7
lib/ui/src/components/preview/preview.stories.js
View File

@ -15,7 +15,9 @@ export const previewProps = {
path: 'string',
viewMode: 'story',
location: {},
getElements: () => [
getElements: type =>
type === types.TAB
? [
{
type: types.TAB,
title: 'Notes',
@ -23,7 +25,8 @@ export const previewProps = {
match: ({ viewMode }) => viewMode === 'info', // todo add type
render: () => null,
},
],
]
: [],
options: {
isFullscreen: false,
isToolshown: true,