Global Decorator
+ {s()} + + ) : ( + s() + ) +); + +export default { + title: 'Core|Decorators', + decorators: [ + s => ( + <> +Kind Decorator
+ {s()} + + ), + ], +}; + +export const all = () =>Story
; +all.parameters = { + decorators: [ + s => ( + <> +Local Decorator
+ {s()} + + ), + ], +}; diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap index 7762dadd29e..02e96712272 100644 --- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap +++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap @@ -5077,6 +5077,23 @@ exports[`Storyshots Basics|ScrollArea vertical 1`] = ` `; +exports[`Storyshots Core|Decorators all 1`] = ` +Array [ ++ Global Decorator +
, ++ Kind Decorator +
, ++ Local Decorator +
, ++ Story +
, +] +`; + exports[`Storyshots Core|Events Force re-render 1`] = ` .emotion-0 { border: 0; diff --git a/lib/client-api/src/client_api.js b/lib/client-api/src/client_api.js index 4d011d6da79..b9b7925fff8 100644 --- a/lib/client-api/src/client_api.js +++ b/lib/client-api/src/client_api.js @@ -203,7 +203,12 @@ export default class ClientApi { }, { applyDecorators: this._decorateStory, - getDecorators: () => [...localDecorators, ..._globalDecorators, withSubscriptionTracking], + getDecorators: () => [ + ...(allParam.decorators || []), + ...localDecorators, + ..._globalDecorators, + withSubscriptionTracking, + ], } ); return api; diff --git a/lib/components/src/tooltip/WithTooltip.js b/lib/components/src/tooltip/WithTooltip.js index 4077bbe4473..8ad6fe259a2 100644 --- a/lib/components/src/tooltip/WithTooltip.js +++ b/lib/components/src/tooltip/WithTooltip.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { styled } from '@storybook/theming'; -import { withState } from 'recompose'; +import { withState, lifecycle } from 'recompose'; +import { document } from 'global'; import TooltipTrigger from 'react-popper-tooltip'; import Tooltip from './Tooltip'; @@ -17,7 +18,8 @@ const TargetSvgContainer = styled.g` cursor: ${props => (props.mode === 'hover' ? 'default' : 'pointer')}; `; -const WithTooltip = ({ +// Pure, does not bind to the body +const WithTooltipPure = ({ svg, trigger, closeOnClick, @@ -69,7 +71,7 @@ const WithTooltip = ({ ); }; -WithTooltip.propTypes = { +WithTooltipPure.propTypes = { svg: PropTypes.bool, trigger: PropTypes.string, closeOnClick: PropTypes.bool, @@ -82,7 +84,7 @@ WithTooltip.propTypes = { onVisibilityChange: PropTypes.func.isRequired, }; -WithTooltip.defaultProps = { +WithTooltipPure.defaultProps = { svg: false, trigger: 'hover', closeOnClick: false, @@ -92,6 +94,44 @@ WithTooltip.defaultProps = { tooltipShown: false, }; +const WithTooltip = lifecycle({ + componentDidMount() { + const { onVisibilityChange } = this.props; + const hide = () => onVisibilityChange(false); + document.addEventListener('keydown', hide, false); + + // Find all iframes on the screen and bind to clicks inside them (waiting until the iframe is ready) + const iframes = Array.from(document.getElementsByTagName('iframe')); + const unbinders = []; + iframes.forEach(iframe => { + const bind = () => { + iframe.contentDocument.addEventListener('click', hide); + unbinders.push(() => { + iframe.contentDocument.removeEventListener('click', hide); + }); + }; + + bind(); // I don't know how to find out if it's already loaded so I potentially will bind twice + iframe.addEventListener('load', bind); + unbinders.push(() => { + iframe.removeEventListener('load', bind); + }); + }); + + this.unbind = () => { + document.removeEventListener('keydown', hide); + unbinders.forEach(unbind => { + unbind(); + }); + }; + }, + componentWillUnmount() { + if (this.unbind) { + this.unbind(); + } + }, +})(WithTooltipPure); + export default WithTooltip; const WithToolTipState = withState( @@ -100,4 +140,4 @@ const WithToolTipState = withState( ({ startOpen }) => startOpen )(WithTooltip); -export { WithToolTipState }; +export { WithTooltipPure, WithToolTipState }; diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js index 26a95c60c88..3cb4ac5e0fd 100644 --- a/lib/core/src/server/preview/iframe-webpack.config.js +++ b/lib/core/src/server/preview/iframe-webpack.config.js @@ -81,7 +81,6 @@ export default ({ resolve: { extensions: ['.mjs', '.js', '.jsx', '.json'], modules: ['node_modules'].concat(raw.NODE_PATH || []), - mainFields: ['browser', 'main', 'module'], alias: { 'core-js': path.dirname(require.resolve('core-js/package.json')), ...reactPaths, diff --git a/lib/ui/src/core/stories.js b/lib/ui/src/core/stories.js index 8eb896bf6df..0ca4f0d4b5d 100644 --- a/lib/ui/src/core/stories.js +++ b/lib/ui/src/core/stories.js @@ -134,7 +134,8 @@ const initStoriesApi = ({ }); const setStories = input => { - const storiesHash = Object.values(input).reduce((acc, item) => { + // This doesn't quite have the right order -- it does not group the top-level keys, see #5518 + const storiesHashOutOfOrder = Object.values(input).reduce((acc, item) => { const { kind, parameters } = item; const { hierarchyRootSeparator: rootSeparator, @@ -182,6 +183,22 @@ const initStoriesApi = ({ return acc; }, {}); + // When adding a group, also add all of its children, depth first + function addItem(acc, item) { + if (!acc[item]) { + // If we were already inserted as part of a group, that's great. + acc[item.id] = item; + const { children } = item; + if (children) { + children.forEach(id => addItem(acc, storiesHashOutOfOrder[id])); + } + } + return acc; + } + + // Now create storiesHash by reordering the above by group + const storiesHash = Object.values(storiesHashOutOfOrder).reduce(addItem, {}); + const { storyId, viewMode } = store.getState(); if (!storyId || !storiesHash[storyId]) { diff --git a/lib/ui/src/core/stories.test.js b/lib/ui/src/core/stories.test.js index a625c425381..c16c703ec72 100644 --- a/lib/ui/src/core/stories.test.js +++ b/lib/ui/src/core/stories.test.js @@ -144,6 +144,41 @@ describe('stories API', () => { }); }); + // Stories can get out of order for a few reasons -- see reproductions on + // https://github.com/storybooks/storybook/issues/5518 + it('does the right thing for out of order stories', () => { + const navigate = jest.fn(); + const store = createMockStore(); + + const { + api: { setStories }, + } = initStories({ store, navigate }); + + setStories({ + 'a--1': { kind: 'a', name: '1', parameters, path: 'a--1', id: 'a--1' }, + 'b--1': { kind: 'b', name: '1', parameters, path: 'b--1', id: 'b--1' }, + 'a--2': { kind: 'a', name: '2', parameters, path: 'a--2', id: 'a--2' }, + }); + + const { storiesHash: storedStoriesHash } = store.getState(); + + // We need exact key ordering, even if in theory JS doens't guarantee it + expect(Object.keys(storedStoriesHash)).toEqual(['a', 'a--1', 'a--2', 'b', 'b--1']); + expect(storedStoriesHash.a).toMatchObject({ + id: 'a', + children: ['a--1', 'a--2'], + isRoot: false, + isComponent: true, + }); + + expect(storedStoriesHash.b).toMatchObject({ + id: 'b', + children: ['b--1'], + isRoot: false, + isComponent: true, + }); + }); + it('navigates to the first story in the store if there is none selected', () => { const navigate = jest.fn(); const store = { getState: () => ({ viewMode: 'story' }), setState: jest.fn() };