Merge branch 'next' into fix/theming-flash

CHANGELOG.md

@@ -1,3 +1,33 @@
+## 5.0.0-rc.8 (March 1, 2019)
+
+### Features
+
+* Core: Allow local decorators via params ([#5806](https://github.com/storybooks/storybook/pull/5806))
+
+### Bug Fixes
+
+* UI: Sort storiesHash so grouped keys appear together ([#5805](https://github.com/storybooks/storybook/pull/5805))
+* UI: Close tooltips on iframe clicks on keypresses ([#5807](https://github.com/storybooks/storybook/pull/5807))
+* Addon-Info: Add font family to info panel ([#5759](https://github.com/storybooks/storybook/pull/5759))
+
+## 5.0.0-rc.7 (February 28, 2019)
+
+### Features
+
+* UI: Page load animation and `STORIES_CONFIGURED` event ([#5756](https://github.com/storybooks/storybook/pull/5756))
+* Theming: Improve `brand` API  ([#5733](https://github.com/storybooks/storybook/pull/5733))
+* UI: Fuzzy search improvement ([#5748](https://github.com/storybooks/storybook/pull/5748))
+* UI: Add toolbar animation ([#5742](https://github.com/storybooks/storybook/pull/5742))
+
+### Bug Fixes
+
+* UI: Fix update notifications placement ([#5716](https://github.com/storybooks/storybook/pull/5716))
+* Angular: Fix global style imports ([#5776](https://github.com/storybooks/storybook/pull/5776))
+* Addon-options: Add backwards compatibility ([#5758](https://github.com/storybooks/storybook/pull/5758))
+* Addon-options: Fix deprecated url/name options ([#5773](https://github.com/storybooks/storybook/pull/5773))
+* Addon-knobs: Remove call to `forceReRender()` on `STORY_CHANGED` ([#5753](https://github.com/storybooks/storybook/pull/5753))
+* UI: Fix active state in addon-background, addon-viewport tools ([#5749](https://github.com/storybooks/storybook/pull/5749))
+
 ## 5.0.0-rc.6 (February 25, 2019)
 
 ### Bug Fixes

docs/src/pages/examples/_examples.yml

@@ -179,3 +179,10 @@ vanilla:
   demo: https://vanilla-framework.github.io/vanilla-framework-react/
   source: https://github.com/vanilla-framework/vanilla-framework-react
   site: https://vanillaframework.io/
+govuk:
+  thumbnail: gov-uk.png
+  title: GOV.UK react
+  description: An implementation of the GOV.UK Design System in React using CSSinJS
+  demo: https://govuk-react.github.io/govuk-react/
+  source: https://github.com/govuk-react/govuk-react
+  site: https://design-system.service.gov.uk/

docs/static/versions.json

@@ -1,8 +1,8 @@
 {
   "next": {
-    "version": "5.0.0-rc.6",
+    "version": "5.0.0-rc.8",
     "info": {
-      "plain": "### Bug Fixes\n\n* Addon-actions: FIX performance by upgrading to telejson 2.1 ([#5751](https://github.com/storybooks/storybook/pull/5751))\n* UI: FIX bad treeview mockdata ([#5741](https://github.com/storybooks/storybook/pull/5741))\n* UI: About page styling fixes ([#5732](https://github.com/storybooks/storybook/pull/5732))\n* UI: Restore the toolbar eject button ([#5737](https://github.com/storybooks/storybook/pull/5737))"
+      "plain": "### Features\n\n* Core: Allow local decorators via params ([#5806](https://github.com/storybooks/storybook/pull/5806))\n\n### Bug Fixes\n\n* UI: Sort storiesHash so grouped keys appear together ([#5805](https://github.com/storybooks/storybook/pull/5805))\n* UI: Close tooltips on iframe clicks on keypresses ([#5807](https://github.com/storybooks/storybook/pull/5807))\n* Addon-Info: Add font family to info panel ([#5759](https://github.com/storybooks/storybook/pull/5759))"
     }
   },
   "latest": {

examples/official-storybook/stories/core/decorators.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+// We would need to add this in config.js idomatically however that would make this file a bit confusing
+import { addDecorator } from '@storybook/react';
+
+addDecorator((s, { kind }) =>
+  kind === 'Core|Decorators' ? (
+    <>
+      <p>Global Decorator</p>
+      {s()}
+    </>
+  ) : (
+    s()
+  )
+);
+
+export default {
+  title: 'Core|Decorators',
+  decorators: [
+    s => (
+      <>
+        <p>Kind Decorator</p>
+        {s()}
+      </>
+    ),
+  ],
+};
+
+export const all = () => <p>Story</p>;
+all.parameters = {
+  decorators: [
+    s => (
+      <>
+        <p>Local Decorator</p>
+        {s()}
+      </>
+    ),
+  ],
+};

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -5077,6 +5077,23 @@ exports[`Storyshots Basics|ScrollArea vertical 1`] = `
 </div>
 `;
 
+exports[`Storyshots Core|Decorators all 1`] = `
+Array [
+  <p>
+    Global Decorator
+  </p>,
+  <p>
+    Kind Decorator
+  </p>,
+  <p>
+    Local Decorator
+  </p>,
+  <p>
+    Story
+  </p>,
+]
+`;
+
 exports[`Storyshots Core|Events Force re-render 1`] = `
 .emotion-0 {
   border: 0;

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;

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 };

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,

lib/ui/src/core/stories.js

@@ -114,7 +114,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,
@@ -162,6 +163,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]) {

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() };