From e0084b534748e4eefc30f9c7f68175af0a747d6f Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Fri, 8 Dec 2017 20:59:29 +0100
Subject: [PATCH 01/18] enable multiple hierarchies

---
 lib/ui/src/modules/api/index.js               |  1 +
 .../ui/components/stories_panel/index.js      | 30 ++++---
 .../ui/components/stories_panel/index.test.js | 54 ++++++++++--
 .../stories_panel/stories_tree/index.test.js  | 16 ++--
 .../ui/components/stories_panel/sub_header.js | 36 ++++++++
 .../modules/ui/containers/stories_panel.js    | 22 +++--
 .../ui/containers/stories_panel.test.js       |  6 +-
 lib/ui/src/modules/ui/libs/hierarchy.js       | 39 +++++++--
 lib/ui/src/modules/ui/libs/hierarchy.test.js  | 85 +++++++++++++++----
 9 files changed, 230 insertions(+), 59 deletions(-)
 create mode 100644 lib/ui/src/modules/ui/components/stories_panel/sub_header.js

diff --git a/lib/ui/src/modules/api/index.js b/lib/ui/src/modules/api/index.js
index 123b7beaac83..a164a1d6f564 100755
--- a/lib/ui/src/modules/api/index.js
+++ b/lib/ui/src/modules/api/index.js
@@ -9,6 +9,7 @@ export default {
       url: 'https://github.com/storybooks/storybook',
       sortStoriesByKind: false,
       hierarchySeparator: '/',
+      rootSeparator: false,
       sidebarAnimations: true,
     },
   },
diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.js b/lib/ui/src/modules/ui/components/stories_panel/index.js
index 6e1bc12615a0..71d705a3cfdc 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/index.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import pick from 'lodash-es/pick';
 import Header from './header';
+import SubHeader from './sub_header';
 import Stories from './stories_tree';
 import TextFilter from './text_filter';
 
@@ -16,7 +17,6 @@ const mainStyle = {
 };
 
 const storyProps = [
-  'storiesHierarchy',
   'selectedKind',
   'selectedHierarchy',
   'selectedStory',
@@ -36,7 +36,7 @@ class StoriesPanel extends Component {
       name,
       onStoryFilter,
       openShortcutsHelp,
-      storiesHierarchy,
+      storiesHierarchies,
       storyFilter,
       url,
     } = this.props;
@@ -50,9 +50,15 @@ class StoriesPanel extends Component {
           onChange={text => onStoryFilter(text)}
         />
         <div style={scrollStyle}>
-          {hierarchyContainsStories(storiesHierarchy) ? (
-            <Stories {...pick(this.props, storyProps)} />
-          ) : null}
+          {storiesHierarchies.map(
+            hierarchy =>
+              hierarchyContainsStories(hierarchy) && (
+                <div key={hierarchy.name}>
+                  {hierarchy.name && <SubHeader name={hierarchy.name} />}
+                  <Stories {...pick(this.props, storyProps)} storiesHierarchy={hierarchy} />
+                </div>
+              )
+          )}
         </div>
       </div>
     );
@@ -60,7 +66,7 @@ class StoriesPanel extends Component {
 }
 
 StoriesPanel.defaultProps = {
-  storiesHierarchy: null,
+  storiesHierarchies: [],
   storyFilter: null,
   onStoryFilter: () => {},
   openShortcutsHelp: null,
@@ -69,11 +75,13 @@ StoriesPanel.defaultProps = {
 };
 
 StoriesPanel.propTypes = {
-  storiesHierarchy: PropTypes.shape({
-    namespaces: PropTypes.arrayOf(PropTypes.string),
-    name: PropTypes.string,
-    map: PropTypes.object,
-  }),
+  storiesHierarchies: PropTypes.arrayOf(
+    PropTypes.shape({
+      namespaces: PropTypes.arrayOf(PropTypes.string),
+      name: PropTypes.string,
+      map: PropTypes.object,
+    })
+  ),
   storyFilter: PropTypes.string,
   onStoryFilter: PropTypes.func,
 
diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/index.test.js
index c618b6b4ae25..664af54aa4ee 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/index.test.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.test.js
@@ -4,7 +4,7 @@ import StoriesPanel from './index';
 import Header from './header';
 import TextFilter from './text_filter';
 import Stories from './stories_tree';
-import { createHierarchy } from '../../libs/hierarchy';
+import { createHierarchies } from '../../libs/hierarchy';
 
 describe('manager.ui.components.stories_panel.index', () => {
   test('should render Header and TextFilter by default', () => {
@@ -23,30 +23,66 @@ describe('manager.ui.components.stories_panel.index', () => {
     expect(wrap.find(Stories)).toBeEmpty();
   });
 
-  test('should render stories only if storiesHierarchy prop exists', () => {
+  test('should render stories only if storiesHierarchies prop exists', () => {
     const selectedKind = 'kk';
     const selectedStory = 'bb';
-    const storiesHierarchy = createHierarchy([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
+    const storiesHierarchies = createHierarchies([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
     const wrap = shallow(
       <StoriesPanel
-        storiesHierarchy={storiesHierarchy}
+        storiesHierarchies={storiesHierarchies}
         selectedKind={selectedKind}
         selectedStory={selectedStory}
         selectedHierarchy={['kk']}
       />
     );
 
-    const header = wrap.find(Stories).first();
-    expect(header.props()).toMatchObject({
-      storiesHierarchy,
+    expect(wrap.find(Stories)).toHaveLength(1);
+
+    const element = wrap.find(Stories).first();
+    expect(element.props()).toMatchObject({
+      storiesHierarchy: storiesHierarchies[0],
+      selectedKind,
+      selectedStory,
+    });
+  });
+
+  test('should render multiple stories if multiple storiesHierarchies exist', () => {
+    const selectedKind = 'kk';
+    const selectedStory = 'bb';
+    const stories = [
+      { kind: 'kk', namespaces: ['kk'], stories: ['bb'], rootName: 'a' },
+      { kind: 'kk', namespaces: ['kk'], stories: ['bb'], rootName: 'b' },
+    ];
+    const storiesHierarchies = createHierarchies(stories);
+    const wrap = shallow(
+      <LeftPanel
+        storiesHierarchies={storiesHierarchies}
+        selectedKind={selectedKind}
+        selectedStory={selectedStory}
+        selectedHierarchy={['kk']}
+      />
+    );
+
+    expect(wrap.find(Stories)).toHaveLength(2);
+
+    const first = wrap.find(Stories).first();
+    expect(first.props()).toMatchObject({
+      storiesHierarchy: storiesHierarchies[0],
+      selectedKind,
+      selectedStory,
+    });
+
+    const second = wrap.find(Stories).at(1);
+    expect(second.props()).toMatchObject({
+      storiesHierarchy: storiesHierarchies[1],
       selectedKind,
       selectedStory,
     });
   });
 
   test('should not render stories if storiesHierarchy exists but is empty', () => {
-    const storiesHierarchy = createHierarchy([]);
-    const wrap = shallow(<StoriesPanel storiesHierarchy={storiesHierarchy} />);
+    const storiesHierarchies = createHierarchies([]);
+    const wrap = shallow(<StoriesPanel storiesHierarchies={storiesHierarchies} />);
 
     expect(wrap.find(Stories).exists()).toBe(false);
   });
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
index 6cca86627cfe..649f8a046557 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
@@ -2,7 +2,7 @@ import { shallow, mount } from 'enzyme';
 import React from 'react';
 import Stories from './index';
 import { setContext } from '../../../../../compose';
-import { createHierarchy, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
+import { createHierarchies, createHierarchyRoot, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
 import { storyFilter } from '../../../libs/filters';
 
 const leftClick = { button: 0 };
@@ -21,10 +21,10 @@ describe('manager.ui.components.left_panel.stories', () => {
 
   afterEach(() => setContext(null));
 
-  const data = createHierarchy([
+  const data = createHierarchies([
     { kind: 'a', name: 'a', namespaces: ['a'], stories: ['a1', 'a2'] },
     { kind: 'b', name: 'b', namespaces: ['b'], stories: ['b1', 'b2'] },
-  ]);
+  ])[0];
 
   const initialData = [
     {
@@ -37,14 +37,14 @@ describe('manager.ui.components.left_panel.stories', () => {
     },
   ];
 
-  const dataWithoutSeparator = createHierarchy(prepareStoriesForHierarchy(initialData));
-  const dataWithSeparator = createHierarchy(prepareStoriesForHierarchy(initialData, '\\.'));
+  const dataWithoutSeparator = createHierarchies(prepareStoriesForHierarchy(initialData))[0];
+  const dataWithSeparator = createHierarchies(prepareStoriesForHierarchy(initialData, '\\.'))[0];
 
   describe('render', () => {
     test('should render stories - empty', () => {
       const wrap = shallow(
         <Stories
-          storiesHierarchy={createHierarchy([])}
+          storiesHierarchy={createHierarchyRoot()}
           selectedKind=""
           selectedStory=""
           selectedHierarchy={[]}
@@ -245,11 +245,11 @@ describe('manager.ui.components.left_panel.stories', () => {
         selectedKind
       );
 
-      const filteredDataHierarchy = createHierarchy(filteredData);
+      const filteredDataHierarchy = createHierarchies(filteredData);
 
       const wrap = mount(
         <Stories
-          storiesHierarchy={filteredDataHierarchy}
+          storiesHierarchy={filteredDataHierarchy[0]}
           selectedKind={selectedKind}
           selectedStory="b2"
           selectedHierarchy={['another', 'space', '20']}
diff --git a/lib/ui/src/modules/ui/components/stories_panel/sub_header.js b/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
new file mode 100644
index 000000000000..db5fe35d2ee4
--- /dev/null
+++ b/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { baseFonts } from '@storybook/components';
+
+const wrapperStyle = {
+  marginTop: 20,
+};
+
+const headingStyle = {
+  ...baseFonts,
+  textTransform: 'uppercase',
+  // letterSpacing: '1.5px',
+  fontSize: '12px',
+  fontWeight: 'normal',
+  color: '#828282',
+  textAlign: 'left',
+  padding: '5px 13px',
+  margin: 0,
+  overflow: 'hidden',
+};
+
+const SubHeader = ({ name }) => (
+  <div style={wrapperStyle}>
+    <h4 style={headingStyle}>{name}</h4>
+  </div>
+);
+
+SubHeader.defaultProps = {
+  name: '',
+};
+
+SubHeader.propTypes = {
+  name: PropTypes.string,
+};
+
+export default SubHeader;
diff --git a/lib/ui/src/modules/ui/containers/stories_panel.js b/lib/ui/src/modules/ui/containers/stories_panel.js
index c8b95e99419e..48afa93ea9d3 100755
--- a/lib/ui/src/modules/ui/containers/stories_panel.js
+++ b/lib/ui/src/modules/ui/containers/stories_panel.js
@@ -6,16 +6,24 @@ import compose from '../../../compose';
 import {
   prepareStoriesForHierarchy,
   resolveStoryHierarchy,
-  createHierarchy,
+  resolveStoryRoots,
+  createHierarchies,
 } from '../libs/hierarchy';
 
 export const mapper = (state, props, { actions }) => {
   const actionMap = actions();
 
   const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state;
-  const { name, url, sortStoriesByKind, hierarchySeparator, sidebarAnimations } = uiOptions;
+  const {
+    name,
+    url,
+    sortStoriesByKind,
+    hierarchySeparator,
+    rootSeparator,
+    sidebarAnimations,
+  } = uiOptions;
 
-  const preparedStories = prepareStoriesForHierarchy(stories, hierarchySeparator);
+  const preparedStories = prepareStoriesForHierarchy(stories, hierarchySeparator, rootSeparator);
 
   const filteredStories = filters.storyFilter(
     preparedStories,
@@ -25,11 +33,13 @@ export const mapper = (state, props, { actions }) => {
     sortStoriesByKind
   );
 
-  const storiesHierarchy = createHierarchy(filteredStories);
-  const selectedHierarchy = resolveStoryHierarchy(selectedKind, hierarchySeparator);
+  const storiesHierarchies = createHierarchies(filteredStories);
+
+  const [, storyName] = resolveStoryRoots(selectedKind, rootSeparator);
+  const selectedHierarchy = resolveStoryHierarchy(storyName, hierarchySeparator);
 
   return {
-    storiesHierarchy,
+    storiesHierarchies,
     selectedKind,
     selectedStory,
     selectedHierarchy,
diff --git a/lib/ui/src/modules/ui/containers/stories_panel.test.js b/lib/ui/src/modules/ui/containers/stories_panel.test.js
index d599c25b13f9..a95ff17d36a6 100755
--- a/lib/ui/src/modules/ui/containers/stories_panel.test.js
+++ b/lib/ui/src/modules/ui/containers/stories_panel.test.js
@@ -35,7 +35,7 @@ describe('manager.ui.containers.stories_panel', () => {
       };
       const result = mapper(state, props, env);
 
-      expect(result.storiesHierarchy.map).toEqual(
+      expect(result.storiesHierarchies[0].map).toEqual(
         new Map([
           [
             'sk',
@@ -96,7 +96,7 @@ describe('manager.ui.containers.stories_panel', () => {
       };
       const result = mapper(state, props, env);
 
-      expect(result.storiesHierarchy.map).toEqual(
+      expect(result.storiesHierarchies[0].map).toEqual(
         new Map([
           [
             'pk', // selected kind is always there. That's why this is here.
@@ -163,7 +163,7 @@ describe('manager.ui.containers.stories_panel', () => {
       };
       const result = mapper(state, props, env);
 
-      expect(result.storiesHierarchy.map).toEqual(
+      expect(result.storiesHierarchies[0].map).toEqual(
         new Map([
           // selected kind is always there. That's why this is here.
           [
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js
index d0cb54ca91aa..43e56e0961bc 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.js
@@ -46,24 +46,47 @@ function fillHierarchy(namespaces, hierarchy, story) {
   fillHierarchy(namespaces.slice(1), childHierarchy, story);
 }
 
-export function createHierarchy(stories) {
-  const hierarchyRoot = {
+export function createHierarchyRoot(name = '') {
+  return {
     isNamespace: true,
     namespaces: [],
-    name: '',
+    name,
     map: new Map(),
   };
+}
+
+export function createHierarchies(stories) {
+  const rootMap = {};
 
   if (stories) {
     stories.forEach(story => {
-      const { namespaces } = story;
+      const { rootName = '', namespaces } = story;
       const name = namespaces[namespaces.length - 1];
+      const hierarchyRoot =
+        rootMap[rootName] || (rootMap[rootName] = createHierarchyRoot(rootName));
 
       fillHierarchy(namespaces, hierarchyRoot, { ...story, name });
     });
   }
 
-  return hierarchyRoot;
+  return Object.keys(rootMap).map(rootName => rootMap[rootName]);
+}
+
+export function resolveStoryRoots(storyName = '', rootSeparator) {
+  if (!rootSeparator) {
+    return ['', storyName];
+  }
+
+  const segments = storyName.split(new RegExp(rootSeparator));
+
+  switch (segments.length) {
+    case 1:
+      return ['', storyName];
+    case 2:
+      return segments;
+    default:
+      throw new Error(`multiple root separators found in story name: ${storyName}`);
+  }
 }
 
 export function resolveStoryHierarchy(storyName = '', hierarchySeparator) {
@@ -74,16 +97,18 @@ export function resolveStoryHierarchy(storyName = '', hierarchySeparator) {
   return storyName.split(new RegExp(hierarchySeparator));
 }
 
-export function prepareStoriesForHierarchy(stories, hierarchySeparator) {
+export function prepareStoriesForHierarchy(stories, hierarchySeparator, rootSeparator) {
   if (!stories) {
     return null;
   }
 
   return stories.map(story => {
-    const namespaces = resolveStoryHierarchy(story.kind, hierarchySeparator);
+    const [rootName, storyName] = resolveStoryRoots(story.kind, rootSeparator);
+    const namespaces = resolveStoryHierarchy(storyName, hierarchySeparator);
 
     return {
       ...story,
+      rootName,
       namespaces,
     };
   });
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.test.js b/lib/ui/src/modules/ui/libs/hierarchy.test.js
index 83869495ea16..dd4d7b4e114f 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.test.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.test.js
@@ -1,9 +1,15 @@
-import { createHierarchy, resolveStoryHierarchy, prepareStoriesForHierarchy } from './hierarchy';
+import {
+  createHierarchyRoot,
+  createHierarchies,
+  resolveStoryHierarchy,
+  resolveStoryRoots,
+  prepareStoriesForHierarchy,
+} from './hierarchy';
 
 describe('manager.ui.libs.hierarchy', () => {
-  describe('createHierarchy', () => {
-    test('should return root hierarchy node if stories are undefined', () => {
-      const result = createHierarchy();
+  describe('createHierarchyRoot', () => {
+    test('should return root hierarchy node', () => {
+      const result = createHierarchyRoot();
 
       expect(result).toEqual({
         namespaces: [],
@@ -13,16 +19,30 @@ describe('manager.ui.libs.hierarchy', () => {
       });
     });
 
-    test('should return root hierarchy node if stories are empty', () => {
-      const result = createHierarchy([]);
+    test('should return root hierarchy node with root name', () => {
+      const result = createHierarchyRoot('root name');
 
       expect(result).toEqual({
         namespaces: [],
-        name: '',
+        name: 'root name',
         isNamespace: true,
         map: new Map(),
       });
     });
+  });
+
+  describe('createHierarchies', () => {
+    test('should return empty array if stories are undefined', () => {
+      const result = createHierarchies();
+
+      expect(result).toHaveLength(0);
+    });
+
+    test('should return empty array if stories are empty', () => {
+      const result = createHierarchies([]);
+
+      expect(result).toHaveLength(0);
+    });
 
     test('should return flat hierarchy if kind is not separated', () => {
       const stories = [
@@ -38,7 +58,7 @@ describe('manager.ui.libs.hierarchy', () => {
         },
       ];
 
-      const result = createHierarchy(stories);
+      const result = createHierarchies(stories);
 
       const expected = [
         [
@@ -67,7 +87,8 @@ describe('manager.ui.libs.hierarchy', () => {
         ],
       ];
 
-      expect(result.map).toEqual(new Map(expected));
+      expect(result).toHaveLength(1);
+      expect(result[0].map).toEqual(new Map(expected));
     });
 
     test('should return hierarchy if kind is separated', () => {
@@ -84,7 +105,7 @@ describe('manager.ui.libs.hierarchy', () => {
         },
       ];
 
-      const result = createHierarchy(stories, '\\.');
+      const result = createHierarchies(stories, '\\.');
 
       const expected = new Map([
         [
@@ -157,7 +178,8 @@ describe('manager.ui.libs.hierarchy', () => {
         ],
       ]);
 
-      expect(result.map).toEqual(expected);
+      expect(result).toHaveLength(1);
+      expect(result[0].map).toEqual(expected);
     });
   });
 
@@ -175,6 +197,28 @@ describe('manager.ui.libs.hierarchy', () => {
     });
   });
 
+  describe('resolveStoryRoots', () => {
+    test('should return empty root name when rootSeparator is undefined', () => {
+      const [rootName, storyName] = resolveStoryRoots('some|name.item1');
+
+      expect(rootName).toEqual('');
+      expect(storyName).toEqual('some|name.item1');
+    });
+
+    test('should return array with separated root name and story name when rootSeparator is defined', () => {
+      const [rootName, storyName] = resolveStoryRoots('some|name.item1', '\\|');
+
+      expect(rootName).toEqual('some');
+      expect(storyName).toEqual('name.item1');
+    });
+
+    test('should throw error when rootSeparator is found multiple times', () => {
+      expect(() => {
+        resolveStoryRoots('some|name|item1', '\\|');
+      }).toThrow();
+    });
+  });
+
   describe('prepareStoriesForHierarchy', () => {
     test('should return null when nothing provided', () => {
       const result = prepareStoriesForHierarchy();
@@ -188,8 +232,8 @@ describe('manager.ui.libs.hierarchy', () => {
       const result = prepareStoriesForHierarchy(stories);
 
       expect(result).toEqual([
-        { kind: 'some.name.item1', namespaces: ['some.name.item1'] },
-        { kind: 'another.space.20', namespaces: ['another.space.20'] },
+        { kind: 'some.name.item1', namespaces: ['some.name.item1'], 'rootName': '' },
+        { kind: 'another.space.20', namespaces: ['another.space.20'], 'rootName': '' },
       ]);
     });
 
@@ -199,8 +243,19 @@ describe('manager.ui.libs.hierarchy', () => {
       const result = prepareStoriesForHierarchy(stories, '\\.');
 
       expect(result).toEqual([
-        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'] },
-        { kind: 'another.space.20', namespaces: ['another', 'space', '20'] },
+        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'], 'rootName': '' },
+        { kind: 'another.space.20', namespaces: ['another', 'space', '20'], 'rootName': '' },
+      ]);
+    });
+
+    test('should return filled root name when root separator is provided', () => {
+      const stories = [{ kind: 'some|name.item1' }, { kind: 'another.space.20' }];
+
+      const result = prepareStoriesForHierarchy(stories, '\\.', '\\|');
+
+      expect(result).toEqual([
+        { kind: 'some|name.item1', namespaces: ['name', 'item1'], rootName: 'some' },
+        { kind: 'another.space.20', namespaces: ['another', 'space', '20'], rootName: '' },
       ]);
     });
   });

From dbaf4e56908f8d208db849150978fd6ddfcc51c9 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Fri, 8 Dec 2017 21:00:51 +0100
Subject: [PATCH 02/18] extend kitchen sink example with multiple hierarchies

---
 .../cra-kitchen-sink/.storybook/config.js     |  3 ++-
 .../src/stories/addon-actions.stories.js      | 20 +++++++++++++++++++
 .../stories/addon-a11y.stories.js             |  2 +-
 .../stories/addon-actions.stories.js          |  2 +-
 .../stories/addon-backgrounds.stories.js      |  2 +-
 .../stories/addon-info.stories.js             | 20 +++++++++----------
 .../stories/addon-jest.stories.js             |  2 +-
 .../stories/addon-knobs.stories.js            |  4 ++--
 .../stories/addon-notes.stories.js            |  2 +-
 9 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 examples/cra-kitchen-sink/src/stories/addon-actions.stories.js

diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index 631e70c75c1f..03436ba44ed9 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -13,7 +13,8 @@ setOptions({
   showSearchBox: false,
   addonPanelInRight: true,
   sortStoriesByKind: false,
-  hierarchySeparator: /\/|\./,
+  hierarchySeparator: /\./,
+  rootSeparator: /\|/,
 });
 
 // deprecated usage of infoAddon
diff --git a/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js b/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
new file mode 100644
index 000000000000..2da2917090f6
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action, decorateAction } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+const pickFirst = decorateAction([args => args.slice(0, 1)]);
+
+storiesOf('Addons|Addon Actions', module)
+  .add('Hello World', () => <Button onClick={action('hello-world')}>Hello World</Button>)
+  .add('Decorated Action', () => <Button onClick={pickFirst('decorated')}>First Argument</Button>)
+  .add('Circular Payload', () => {
+    const circular = { foo: {} };
+    circular.foo.circular = circular;
+    return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
+  })
+  .add('Function Name', () => {
+    const fn = action('fnName');
+    return <Button onClick={fn}>Action.name: {fn.name}</Button>;
+  })
+  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>);
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
index d1892ec7a7bb..ca0509706d89 100644
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ b/examples/official-storybook/stories/addon-a11y.stories.js
@@ -6,7 +6,7 @@ import BaseButton from '../components/BaseButton';
 
 const text = 'Testing the a11y addon';
 
-storiesOf('Addon a11y', module)
+storiesOf('Addons|Addon a11y', module)
   .addDecorator(checkA11y)
   .add('Default', () => <BaseButton label="" />)
   .add('Label', () => <BaseButton label={text} />)
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index ba9355f9f928..b353ddaf3014 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -8,7 +8,7 @@ import { File } from 'global';
 
 const pickFirst = decorateAction([args => args.slice(0, 1)]);
 
-storiesOf('Addon Actions', module)
+storiesOf('Addons|Actions', module)
   .add('Hello World', () => <Button onClick={action('hello-world')}>Hello World</Button>)
   .add('Decorated Action', () => <Button onClick={pickFirst('decorated')}>First Argument</Button>)
   .add('Circular Payload', () => {
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index 9a0627118bb9..442e8acb40d2 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import backgrounds from '@storybook/addon-backgrounds';
 import BaseButton from '../components/BaseButton';
 
-storiesOf('Addon Backgrounds', module)
+storiesOf('Addons|Addon Backgrounds', module)
   .addDecorator(
     backgrounds([
       { name: 'twitter', value: '#00aced' },
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index d6fad18d2c58..131f3a5fe16d 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -8,7 +8,7 @@ import FlowTypeButton from '../components/FlowTypeButton';
 import BaseButton from '../components/BaseButton';
 import TableComponent from '../components/TableComponent';
 
-storiesOf('Addon Info.React Docgen', module)
+storiesOf('Addons|Addon Info.React Docgen', module)
   .add(
     'Comments from PropType declarations',
     withInfo(
@@ -39,12 +39,12 @@ const Button = () => <button />;
 Maybe include a [link](http://storybook.js.org) to your project as well.
 `;
 
-storiesOf('Addon Info.Markdown', module).add(
+storiesOf('Addons|Addon Info.Markdown', module).add(
   'Displays Markdown in description',
   withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
 );
 
-storiesOf('Addon Info.Options.inline', module).add(
+storiesOf('Addons|Addon Info.Options.inline', module).add(
   'Inlines component inside story',
   withInfo({
     text: 'Component should be inlined between description and PropType table',
@@ -52,7 +52,7 @@ storiesOf('Addon Info.Options.inline', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.header', module).add(
+storiesOf('Addons|Addon Info.Options.header', module).add(
   'Shows or hides Info Addon header',
   withInfo({
     text: 'The Info Addon header should be hidden',
@@ -60,7 +60,7 @@ storiesOf('Addon Info.Options.header', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.source', module).add(
+storiesOf('Addons|Addon Info.Options.source', module).add(
   'Shows or hides Info Addon source',
   withInfo({
     text: 'The Info Addon source section should be hidden',
@@ -68,7 +68,7 @@ storiesOf('Addon Info.Options.source', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.propTables', module).add(
+storiesOf('Addons|Addon Info.Options.propTables', module).add(
   'Shows additional component prop tables',
   withInfo({
     text: 'There should be a prop table added for a component not included in the story',
@@ -76,7 +76,7 @@ storiesOf('Addon Info.Options.propTables', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Options.propTablesExclude', module).add(
+storiesOf('Addons|Addon Info.Options.propTablesExclude', module).add(
   'Exclude component from prop tables',
   withInfo({
     text: 'This can exclude extraneous components from being displayed in prop tables.',
@@ -89,7 +89,7 @@ storiesOf('Addon Info.Options.propTablesExclude', module).add(
   ))
 );
 
-storiesOf('Addon Info.Options.styles', module)
+storiesOf('Addons|Info.Options.styles', module)
   .add(
     'Extend info styles with an object',
     withInfo({
@@ -123,7 +123,7 @@ storiesOf('Addon Info.Options.styles', module)
     })(() => <BaseButton label="Button" />)
   );
 
-storiesOf('Addon Info.Options.TableComponent', module).add(
+storiesOf('Addons|Addon Info.Options.TableComponent', module).add(
   'Use a custom component for the table',
   withInfo({
     TableComponent,
@@ -142,7 +142,7 @@ const Input = hoc(() => <input type="text" />);
 
 const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
 
-storiesOf('Addon Info.GitHub issues', module).add(
+storiesOf('Addons|Addon Info.GitHub issues', module).add(
   '#1814',
   withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
     <div>
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index a53ba301a683..212949483f93 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -8,7 +8,7 @@ const withTestsFiles = withTests({
   results,
 });
 
-storiesOf('Addon jest', module)
+storiesOf('Addons|Addon jest', module)
   .addDecorator(withTestsFiles('addon-jest'))
   .add('withTests', () => (
     <div>
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index c009a428cf18..64e1bcf93959 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -45,7 +45,7 @@ class AsyncItemLoader extends React.Component {
   }
 }
 
-storiesOf('Addon Knobs.withKnobs', module)
+storiesOf('Addons|Addon Knobs.withKnobs', module)
   .addDecorator(withKnobs)
   .add('tweaks static values', () => {
     const name = text('Name', 'Storyteller');
@@ -97,7 +97,7 @@ storiesOf('Addon Knobs.withKnobs', module)
     </div>
   ));
 
-storiesOf('Addon Knobs.withKnobsOptions', module)
+storiesOf('Addons|Addon Knobs.withKnobsOptions', module)
   .addDecorator(
     withKnobsOptions({
       debounce: { wait: 100, leading: boolean }, // Same as lodash debounce.
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index f6c850dddfeb..e430066cc863 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 import BaseButton from '../components/BaseButton';
 import markdownNotes from './notes/notes.md';
 
-storiesOf('Addon Notes', module)
+storiesOf('Addons|Addon Notes', module)
   .add(
     'withNotes',
     withNotes(

From 212acb8ab34d9dcdd59702c7836daa62145efcec Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Fri, 8 Dec 2017 21:02:36 +0100
Subject: [PATCH 03/18] extend options addon to enable rootSeparator

---
 addons/options/src/preview/index.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/addons/options/src/preview/index.js b/addons/options/src/preview/index.js
index c97b594824ac..846cb71e5812 100644
--- a/addons/options/src/preview/index.js
+++ b/addons/options/src/preview/index.js
@@ -7,6 +7,10 @@ export function init() {
   // NOTE nothing to do here
 }
 
+function hasOwnProp(object, propName) {
+  return Object.prototype.hasOwnProperty.call(object, propName);
+}
+
 function regExpStringify(exp) {
   if (typeof exp === 'string') return exp;
   if (Object.prototype.toString.call(exp) === '[object RegExp]') return exp.source;
@@ -23,16 +27,17 @@ export function setOptions(newOptions) {
     );
   }
 
-  let options = newOptions;
-
   // since 'undefined' and 'null' are the valid values we don't want to
-  // override the hierarchySeparator if the prop is missing
-  if (Object.prototype.hasOwnProperty.call(newOptions, 'hierarchySeparator')) {
-    options = {
-      ...newOptions,
-      hierarchySeparator: regExpStringify(newOptions.hierarchySeparator),
-    };
-  }
+  // override the hierarchySeparator or rootSeparator if the prop is missing
+  const options = {
+    ...newOptions,
+    ...(hasOwnProp(newOptions, 'hierarchySeparator')
+      ? { hierarchySeparator: regExpStringify(newOptions.hierarchySeparator) }
+      : {}),
+    ...(hasOwnProp(newOptions, 'rootSeparator')
+      ? { rootSeparator: regExpStringify(newOptions.rootSeparator) }
+      : {}),
+  };
 
   channel.emit(EVENT_ID, { options });
 }

From 94e8da1527ce6309be29120c10d7a41cb6677ae1 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 12:37:32 +0100
Subject: [PATCH 04/18] updated documentation and rootSeparator default null

---
 addons/options/README.md        | 10 ++++++++--
 lib/ui/src/modules/api/index.js |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/addons/options/README.md b/addons/options/README.md
index e19aa601ecda..78de806b3bc7 100644
--- a/addons/options/README.md
+++ b/addons/options/README.md
@@ -90,13 +90,19 @@ setOptions({
    * @type {Regex}
    */
   hierarchySeparator: null,
-
+  /**
+   * regex for finding the hierarchy root separator
+   * @example:
+   *   null - turn off mulitple hierarchy roots
+   *   /\|/ - split by `|`
+   * @type {Regex}
+   */
+  rootSeparator: null,
   /**
    * sidebar tree animations
    * @type {Boolean}
    */
   sidebarAnimations: true,
-
   /**
    * id to select an addon panel
    * @type {String}
diff --git a/lib/ui/src/modules/api/index.js b/lib/ui/src/modules/api/index.js
index a164a1d6f564..e53e85dda3f8 100755
--- a/lib/ui/src/modules/api/index.js
+++ b/lib/ui/src/modules/api/index.js
@@ -9,7 +9,7 @@ export default {
       url: 'https://github.com/storybooks/storybook',
       sortStoriesByKind: false,
       hierarchySeparator: '/',
-      rootSeparator: false,
+      rootSeparator: null,
       sidebarAnimations: true,
     },
   },

From 748b26e0e97b3217a81d9ee20c999d187235d767 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 13:21:04 +0100
Subject: [PATCH 05/18] omit Addon prefix from addon stories

---
 .../src/stories/addon-actions.stories.js       |  2 +-
 .../stories/addon-a11y.stories.js              |  2 +-
 .../stories/addon-backgrounds.stories.js       |  2 +-
 .../stories/addon-info.stories.js              | 18 +++++++++---------
 .../stories/addon-jest.stories.js              |  2 +-
 .../stories/addon-knobs.stories.js             |  4 ++--
 .../stories/addon-notes.stories.js             |  2 +-
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js b/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
index 2da2917090f6..4f726e58015a 100644
--- a/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
@@ -5,7 +5,7 @@ import { Button } from '@storybook/react/demo';
 
 const pickFirst = decorateAction([args => args.slice(0, 1)]);
 
-storiesOf('Addons|Addon Actions', module)
+storiesOf('Addons|Actions', module)
   .add('Hello World', () => <Button onClick={action('hello-world')}>Hello World</Button>)
   .add('Decorated Action', () => <Button onClick={pickFirst('decorated')}>First Argument</Button>)
   .add('Circular Payload', () => {
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
index ca0509706d89..18ea68caad68 100644
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ b/examples/official-storybook/stories/addon-a11y.stories.js
@@ -6,7 +6,7 @@ import BaseButton from '../components/BaseButton';
 
 const text = 'Testing the a11y addon';
 
-storiesOf('Addons|Addon a11y', module)
+storiesOf('Addons|a11y', module)
   .addDecorator(checkA11y)
   .add('Default', () => <BaseButton label="" />)
   .add('Label', () => <BaseButton label={text} />)
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index 442e8acb40d2..f1458f4d81dd 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import backgrounds from '@storybook/addon-backgrounds';
 import BaseButton from '../components/BaseButton';
 
-storiesOf('Addons|Addon Backgrounds', module)
+storiesOf('Addons|Backgrounds', module)
   .addDecorator(
     backgrounds([
       { name: 'twitter', value: '#00aced' },
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index 131f3a5fe16d..c85aa9078169 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -8,7 +8,7 @@ import FlowTypeButton from '../components/FlowTypeButton';
 import BaseButton from '../components/BaseButton';
 import TableComponent from '../components/TableComponent';
 
-storiesOf('Addons|Addon Info.React Docgen', module)
+storiesOf('Addons|Info.React Docgen', module)
   .add(
     'Comments from PropType declarations',
     withInfo(
@@ -39,12 +39,12 @@ const Button = () => <button />;
 Maybe include a [link](http://storybook.js.org) to your project as well.
 `;
 
-storiesOf('Addons|Addon Info.Markdown', module).add(
+storiesOf('Addons|Info.Markdown', module).add(
   'Displays Markdown in description',
   withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
 );
 
-storiesOf('Addons|Addon Info.Options.inline', module).add(
+storiesOf('Addons|Info.Options.inline', module).add(
   'Inlines component inside story',
   withInfo({
     text: 'Component should be inlined between description and PropType table',
@@ -52,7 +52,7 @@ storiesOf('Addons|Addon Info.Options.inline', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addons|Addon Info.Options.header', module).add(
+storiesOf('Addons|Info.Options.header', module).add(
   'Shows or hides Info Addon header',
   withInfo({
     text: 'The Info Addon header should be hidden',
@@ -60,7 +60,7 @@ storiesOf('Addons|Addon Info.Options.header', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addons|Addon Info.Options.source', module).add(
+storiesOf('Addons|Info.Options.source', module).add(
   'Shows or hides Info Addon source',
   withInfo({
     text: 'The Info Addon source section should be hidden',
@@ -68,7 +68,7 @@ storiesOf('Addons|Addon Info.Options.source', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addons|Addon Info.Options.propTables', module).add(
+storiesOf('Addons|Info.Options.propTables', module).add(
   'Shows additional component prop tables',
   withInfo({
     text: 'There should be a prop table added for a component not included in the story',
@@ -76,7 +76,7 @@ storiesOf('Addons|Addon Info.Options.propTables', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addons|Addon Info.Options.propTablesExclude', module).add(
+storiesOf('Addons|Info.Options.propTablesExclude', module).add(
   'Exclude component from prop tables',
   withInfo({
     text: 'This can exclude extraneous components from being displayed in prop tables.',
@@ -123,7 +123,7 @@ storiesOf('Addons|Info.Options.styles', module)
     })(() => <BaseButton label="Button" />)
   );
 
-storiesOf('Addons|Addon Info.Options.TableComponent', module).add(
+storiesOf('Addons|Info.Options.TableComponent', module).add(
   'Use a custom component for the table',
   withInfo({
     TableComponent,
@@ -142,7 +142,7 @@ const Input = hoc(() => <input type="text" />);
 
 const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
 
-storiesOf('Addons|Addon Info.GitHub issues', module).add(
+storiesOf('Addons|Info.GitHub issues', module).add(
   '#1814',
   withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
     <div>
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index 212949483f93..3cb6f9135907 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -8,7 +8,7 @@ const withTestsFiles = withTests({
   results,
 });
 
-storiesOf('Addons|Addon jest', module)
+storiesOf('Addons|jest', module)
   .addDecorator(withTestsFiles('addon-jest'))
   .add('withTests', () => (
     <div>
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index 64e1bcf93959..d5ddfd0e7a55 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -45,7 +45,7 @@ class AsyncItemLoader extends React.Component {
   }
 }
 
-storiesOf('Addons|Addon Knobs.withKnobs', module)
+storiesOf('Addons|Knobs.withKnobs', module)
   .addDecorator(withKnobs)
   .add('tweaks static values', () => {
     const name = text('Name', 'Storyteller');
@@ -97,7 +97,7 @@ storiesOf('Addons|Addon Knobs.withKnobs', module)
     </div>
   ));
 
-storiesOf('Addons|Addon Knobs.withKnobsOptions', module)
+storiesOf('Addons|Knobs.withKnobsOptions', module)
   .addDecorator(
     withKnobsOptions({
       debounce: { wait: 100, leading: boolean }, // Same as lodash debounce.
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index e430066cc863..fbeb2aa2d295 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions';
 import BaseButton from '../components/BaseButton';
 import markdownNotes from './notes/notes.md';
 
-storiesOf('Addons|Addon Notes', module)
+storiesOf('Addons|Notes', module)
   .add(
     'withNotes',
     withNotes(

From f9c3320530e5c50d5006120d88a99f224ba00bc9 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 13:33:09 +0100
Subject: [PATCH 06/18] fix test after rebase on release/3.3 branch

---
 .../src/modules/ui/components/stories_panel/index.test.js   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/index.test.js
index 664af54aa4ee..f88a67057779 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/index.test.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.test.js
@@ -26,7 +26,9 @@ describe('manager.ui.components.stories_panel.index', () => {
   test('should render stories only if storiesHierarchies prop exists', () => {
     const selectedKind = 'kk';
     const selectedStory = 'bb';
-    const storiesHierarchies = createHierarchies([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
+    const storiesHierarchies = createHierarchies([
+      { kind: 'kk', namespaces: ['kk'], stories: ['bb'] },
+    ]);
     const wrap = shallow(
       <StoriesPanel
         storiesHierarchies={storiesHierarchies}
@@ -55,7 +57,7 @@ describe('manager.ui.components.stories_panel.index', () => {
     ];
     const storiesHierarchies = createHierarchies(stories);
     const wrap = shallow(
-      <LeftPanel
+      <StoriesPanel
         storiesHierarchies={storiesHierarchies}
         selectedKind={selectedKind}
         selectedStory={selectedStory}

From fba5b3bc7a91f3ebdba866d867e7a78a101134b1 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 14:43:06 +0100
Subject: [PATCH 07/18] added missing addons to addon hierarchy

---
 examples/official-storybook/stories/addon-info.stories.js | 2 +-
 .../official-storybook/stories/addon-links.stories.js     | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index c85aa9078169..c4f0c4d53e5d 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -130,7 +130,7 @@ storiesOf('Addons|Info.Options.TableComponent', module).add(
   })(() => <BaseButton label="Button" />)
 );
 
-storiesOf('Addon Info.Decorator', module)
+storiesOf('Addons|Info.Decorator', module)
   .addDecorator((story, context) =>
     withInfo('Info could be used as a global or local decorator as well.')(story)(context)
   )
diff --git a/examples/official-storybook/stories/addon-links.stories.js b/examples/official-storybook/stories/addon-links.stories.js
index fada321e6a72..884cdfd58596 100644
--- a/examples/official-storybook/stories/addon-links.stories.js
+++ b/examples/official-storybook/stories/addon-links.stories.js
@@ -4,11 +4,11 @@ import { linkTo, hrefTo } from '@storybook/addon-links';
 import LinkTo from '@storybook/addon-links/react';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon Links.Link', module)
+storiesOf('Addons|Links.Link', module)
   .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
   .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
 
-storiesOf('Addon Links.Button', module)
+storiesOf('Addons|Links.Button', module)
   .add('First', () => (
     <button onClick={linkTo('Addon Links.Button', 'Second')}>Go to "Second"</button>
   ))
@@ -16,7 +16,7 @@ storiesOf('Addon Links.Button', module)
     <button onClick={linkTo('Addon Links.Button', 'First')}>Go to "First"</button>
   ));
 
-storiesOf('Addon Links.Select', module)
+storiesOf('Addons|Links.Select', module)
   .add('Index', () => (
     <select value="Index" onChange={linkTo('Addon Links.Select', e => e.currentTarget.value)}>
       <option>Index</option>
@@ -29,7 +29,7 @@ storiesOf('Addon Links.Select', module)
   .add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
   .add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
 
-storiesOf('Addon Links.Href', module).add('log', () => {
+storiesOf('Addons|Links.Href', module).add('log', () => {
   hrefTo('Addon Links.Href', 'log').then(href => action('URL of this story')({ href }));
 
   return <span>See action logger</span>;

From ae6d3134d95893e262b9830cc0b1c8e73f5d4c66 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 14:52:56 +0100
Subject: [PATCH 08/18] restored letterspacing sub header

---
 lib/ui/src/modules/ui/components/stories_panel/sub_header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ui/src/modules/ui/components/stories_panel/sub_header.js b/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
index db5fe35d2ee4..f485d52224d1 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
@@ -9,7 +9,7 @@ const wrapperStyle = {
 const headingStyle = {
   ...baseFonts,
   textTransform: 'uppercase',
-  // letterSpacing: '1.5px',
+  letterSpacing: '1.2px',
   fontSize: '12px',
   fontWeight: 'normal',
   color: '#828282',

From 1276f256e89b4c714cb30e572dbed59d8eb8aaf8 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 15:02:15 +0100
Subject: [PATCH 09/18] updated snapshots

---
 .../addon-actions.stories.storyshot           | 41 +++++++++++++++++++
 .../addon-backgrounds.stories.storyshot       |  4 +-
 .../addon-jest.stories.storyshot              |  2 +-
 .../addon-knobs.stories.storyshot             |  8 ++--
 .../addon-links.stories.storyshot             | 18 ++++----
 .../addon-notes.stories.storyshot             |  6 +--
 6 files changed, 60 insertions(+), 19 deletions(-)
 create mode 100644 examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
new file mode 100644
index 000000000000..fc9ac6baeee2
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Actions Circular Payload 1`] = `
+<button
+  class="css-1yjiefr"
+>
+  Circular Payload
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Decorated Action 1`] = `
+<button
+  class="css-1yjiefr"
+>
+  First Argument
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Function Name 1`] = `
+<button
+  class="css-1yjiefr"
+>
+  Action.name: fnName
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Hello World 1`] = `
+<button
+  class="css-1yjiefr"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
+<button
+  class="css-1yjiefr"
+>
+  Delete
+</button>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
index 47cb40abe1be..1d884b6c1c4f 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Backgrounds story 1 1`] = `
+exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 <div
   style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >
@@ -10,7 +10,7 @@ exports[`Storyshots Addon Backgrounds story 1 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Backgrounds story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 <div
   style="overflow:scroll;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
index 652ddaa6b0a7..906dfc2bbc47 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-jest.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon jest withTests 1`] = `
+exports[`Storyshots Addons|jest withTests 1`] = `
 <div>
   <p>
     Hello
diff --git a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
index 7ff7c24426eb..0bf3a0717c79 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobs triggers actions via button 1`] = `
 <div>
   <p>
     Hit the knob load button and it should trigger an async load after a short delay
@@ -11,7 +11,7 @@ exports[`Storyshots Addon Knobs.withKnobs triggers actions via button 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobs tweaks static values 1`] = `
 <div
   style="background-color:#ffff00;border:3px solid #ff00ff;padding:10px"
 >
@@ -51,7 +51,7 @@ exports[`Storyshots Addon Knobs.withKnobs tweaks static values 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobsOptions triggers actions via button with debounce delay 1`] = `
 <div>
   <p>
     Hit the knob load button and it should trigger an async load after a short delay
@@ -62,7 +62,7 @@ exports[`Storyshots Addon Knobs.withKnobsOptions triggers actions via button wit
 </div>
 `;
 
-exports[`Storyshots Addon Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
+exports[`Storyshots Addons|Knobs.withKnobsOptions tweaks static values with debounce delay 1`] = `
 <div
   style="background-color:#ffff00;border:3px solid #ff00ff;padding:10px"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
index b95a4d1e1ca3..b02867dfb0fd 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Links.Button First 1`] = `
+exports[`Storyshots Addons|Links.Button First 1`] = `
 <button>
   Go to "Second"
 </button>
 `;
 
-exports[`Storyshots Addon Links.Button Second 1`] = `
+exports[`Storyshots Addons|Links.Button Second 1`] = `
 <button>
   Go to "First"
 </button>
 `;
 
-exports[`Storyshots Addon Links.Href log 1`] = `
+exports[`Storyshots Addons|Links.Href log 1`] = `
 <span>
   See action logger
 </span>
 `;
 
-exports[`Storyshots Addon Links.Link First 1`] = `
+exports[`Storyshots Addons|Links.Link First 1`] = `
 <a
   href="/"
 >
@@ -26,7 +26,7 @@ exports[`Storyshots Addon Links.Link First 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Link Second 1`] = `
+exports[`Storyshots Addons|Links.Link Second 1`] = `
 <a
   href="/"
 >
@@ -34,7 +34,7 @@ exports[`Storyshots Addon Links.Link Second 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Select First 1`] = `
+exports[`Storyshots Addons|Links.Select First 1`] = `
 <a
   href="/"
 >
@@ -42,7 +42,7 @@ exports[`Storyshots Addon Links.Select First 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Select Index 1`] = `
+exports[`Storyshots Addons|Links.Select Index 1`] = `
 <select>
   <option
     selected=""
@@ -61,7 +61,7 @@ exports[`Storyshots Addon Links.Select Index 1`] = `
 </select>
 `;
 
-exports[`Storyshots Addon Links.Select Second 1`] = `
+exports[`Storyshots Addons|Links.Select Second 1`] = `
 <a
   href="/"
 >
@@ -69,7 +69,7 @@ exports[`Storyshots Addon Links.Select Second 1`] = `
 </a>
 `;
 
-exports[`Storyshots Addon Links.Select Third 1`] = `
+exports[`Storyshots Addons|Links.Select Third 1`] = `
 <a
   href="/"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
index 9c221f6c80ab..c63bb34386ea 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Notes using deprecated API 1`] = `
+exports[`Storyshots Addons|Notes using deprecated API 1`] = `
 <button>
   😀 😎 👍 💯
 </button>
 `;
 
-exports[`Storyshots Addon Notes withNotes 1`] = `
+exports[`Storyshots Addons|Notes withNotes 1`] = `
 <button>
   Button with notes - check the notes panel for details
 </button>
 `;
 
-exports[`Storyshots Addon Notes withNotes rendering imported markdown 1`] = `
+exports[`Storyshots Addons|Notes withNotes rendering imported markdown 1`] = `
 <button>
   Button with notes - check the notes panel for details
 </button>

From bd025b73f6975def2bb5c62ba51cb41daaf0a8ab Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 15:51:38 +0100
Subject: [PATCH 10/18] change rootSeparator to hierarchyRootSeparator

---
 addons/options/README.md                      |  2 +-
 addons/options/src/preview/index.js           | 22 +++++++++----------
 .../cra-kitchen-sink/.storybook/config.js     |  2 +-
 lib/ui/src/modules/api/index.js               |  2 +-
 .../modules/ui/containers/stories_panel.js    | 10 ++++++---
 lib/ui/src/modules/ui/libs/hierarchy.js       | 10 ++++-----
 lib/ui/src/modules/ui/libs/hierarchy.test.js  | 14 ++++++------
 7 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/addons/options/README.md b/addons/options/README.md
index 78de806b3bc7..92dcb099570b 100644
--- a/addons/options/README.md
+++ b/addons/options/README.md
@@ -97,7 +97,7 @@ setOptions({
    *   /\|/ - split by `|`
    * @type {Regex}
    */
-  rootSeparator: null,
+  hierarchyRootSeparator: null,
   /**
    * sidebar tree animations
    * @type {Boolean}
diff --git a/addons/options/src/preview/index.js b/addons/options/src/preview/index.js
index 846cb71e5812..b4eb3d67fab4 100644
--- a/addons/options/src/preview/index.js
+++ b/addons/options/src/preview/index.js
@@ -7,16 +7,20 @@ export function init() {
   // NOTE nothing to do here
 }
 
-function hasOwnProp(object, propName) {
-  return Object.prototype.hasOwnProperty.call(object, propName);
-}
-
 function regExpStringify(exp) {
   if (typeof exp === 'string') return exp;
   if (Object.prototype.toString.call(exp) === '[object RegExp]') return exp.source;
   return null;
 }
 
+function hasOwnProp(object, propName) {
+  return Object.prototype.hasOwnProperty.call(object, propName);
+}
+
+function withRegexProp(object, propName) {
+  return hasOwnProp(object, propName) ? { [propName]: regExpStringify(object[propName]) } : {};
+}
+
 // setOptions function will send Storybook UI options when the channel is
 // ready. If called before, options will be cached until it can be sent.
 export function setOptions(newOptions) {
@@ -28,15 +32,11 @@ export function setOptions(newOptions) {
   }
 
   // since 'undefined' and 'null' are the valid values we don't want to
-  // override the hierarchySeparator or rootSeparator if the prop is missing
+  // override the hierarchySeparator or hierarchyRootSeparator if the prop is missing
   const options = {
     ...newOptions,
-    ...(hasOwnProp(newOptions, 'hierarchySeparator')
-      ? { hierarchySeparator: regExpStringify(newOptions.hierarchySeparator) }
-      : {}),
-    ...(hasOwnProp(newOptions, 'rootSeparator')
-      ? { rootSeparator: regExpStringify(newOptions.rootSeparator) }
-      : {}),
+    ...withRegexProp(newOptions, 'hierarchySeparator'),
+    ...withRegexProp(newOptions, 'hierarchyRootSeparator'),
   };
 
   channel.emit(EVENT_ID, { options });
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index 03436ba44ed9..3ee683d25cdd 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -14,7 +14,7 @@ setOptions({
   addonPanelInRight: true,
   sortStoriesByKind: false,
   hierarchySeparator: /\./,
-  rootSeparator: /\|/,
+  hierarchyRootSeparator: /\|/,
 });
 
 // deprecated usage of infoAddon
diff --git a/lib/ui/src/modules/api/index.js b/lib/ui/src/modules/api/index.js
index e53e85dda3f8..ad9e9ad04574 100755
--- a/lib/ui/src/modules/api/index.js
+++ b/lib/ui/src/modules/api/index.js
@@ -9,7 +9,7 @@ export default {
       url: 'https://github.com/storybooks/storybook',
       sortStoriesByKind: false,
       hierarchySeparator: '/',
-      rootSeparator: null,
+      hierarchyRootSeparator: null,
       sidebarAnimations: true,
     },
   },
diff --git a/lib/ui/src/modules/ui/containers/stories_panel.js b/lib/ui/src/modules/ui/containers/stories_panel.js
index 48afa93ea9d3..c82101aecc0b 100755
--- a/lib/ui/src/modules/ui/containers/stories_panel.js
+++ b/lib/ui/src/modules/ui/containers/stories_panel.js
@@ -19,11 +19,15 @@ export const mapper = (state, props, { actions }) => {
     url,
     sortStoriesByKind,
     hierarchySeparator,
-    rootSeparator,
+    hierarchyRootSeparator,
     sidebarAnimations,
   } = uiOptions;
 
-  const preparedStories = prepareStoriesForHierarchy(stories, hierarchySeparator, rootSeparator);
+  const preparedStories = prepareStoriesForHierarchy(
+    stories,
+    hierarchySeparator,
+    hierarchyRootSeparator
+  );
 
   const filteredStories = filters.storyFilter(
     preparedStories,
@@ -35,7 +39,7 @@ export const mapper = (state, props, { actions }) => {
 
   const storiesHierarchies = createHierarchies(filteredStories);
 
-  const [, storyName] = resolveStoryRoots(selectedKind, rootSeparator);
+  const [, storyName] = resolveStoryRoots(selectedKind, hierarchyRootSeparator);
   const selectedHierarchy = resolveStoryHierarchy(storyName, hierarchySeparator);
 
   return {
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js
index 43e56e0961bc..a1bc94c6139d 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.js
@@ -72,12 +72,12 @@ export function createHierarchies(stories) {
   return Object.keys(rootMap).map(rootName => rootMap[rootName]);
 }
 
-export function resolveStoryRoots(storyName = '', rootSeparator) {
-  if (!rootSeparator) {
+export function resolveStoryRoots(storyName = '', hierarchyRootSeparator) {
+  if (!hierarchyRootSeparator) {
     return ['', storyName];
   }
 
-  const segments = storyName.split(new RegExp(rootSeparator));
+  const segments = storyName.split(new RegExp(hierarchyRootSeparator));
 
   switch (segments.length) {
     case 1:
@@ -97,13 +97,13 @@ export function resolveStoryHierarchy(storyName = '', hierarchySeparator) {
   return storyName.split(new RegExp(hierarchySeparator));
 }
 
-export function prepareStoriesForHierarchy(stories, hierarchySeparator, rootSeparator) {
+export function prepareStoriesForHierarchy(stories, hierarchySeparator, hierarchyRootSeparator) {
   if (!stories) {
     return null;
   }
 
   return stories.map(story => {
-    const [rootName, storyName] = resolveStoryRoots(story.kind, rootSeparator);
+    const [rootName, storyName] = resolveStoryRoots(story.kind, hierarchyRootSeparator);
     const namespaces = resolveStoryHierarchy(storyName, hierarchySeparator);
 
     return {
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.test.js b/lib/ui/src/modules/ui/libs/hierarchy.test.js
index dd4d7b4e114f..e6c3f103da44 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.test.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.test.js
@@ -198,21 +198,21 @@ describe('manager.ui.libs.hierarchy', () => {
   });
 
   describe('resolveStoryRoots', () => {
-    test('should return empty root name when rootSeparator is undefined', () => {
+    test('should return empty root name when hierarchyRootSeparator is undefined', () => {
       const [rootName, storyName] = resolveStoryRoots('some|name.item1');
 
       expect(rootName).toEqual('');
       expect(storyName).toEqual('some|name.item1');
     });
 
-    test('should return array with separated root name and story name when rootSeparator is defined', () => {
+    test('should return array with separated root name and story name when hierarchyRootSeparator is defined', () => {
       const [rootName, storyName] = resolveStoryRoots('some|name.item1', '\\|');
 
       expect(rootName).toEqual('some');
       expect(storyName).toEqual('name.item1');
     });
 
-    test('should throw error when rootSeparator is found multiple times', () => {
+    test('should throw error when hierarchyRootSeparator is found multiple times', () => {
       expect(() => {
         resolveStoryRoots('some|name|item1', '\\|');
       }).toThrow();
@@ -232,8 +232,8 @@ describe('manager.ui.libs.hierarchy', () => {
       const result = prepareStoriesForHierarchy(stories);
 
       expect(result).toEqual([
-        { kind: 'some.name.item1', namespaces: ['some.name.item1'], 'rootName': '' },
-        { kind: 'another.space.20', namespaces: ['another.space.20'], 'rootName': '' },
+        { kind: 'some.name.item1', namespaces: ['some.name.item1'], rootName: '' },
+        { kind: 'another.space.20', namespaces: ['another.space.20'], rootName: '' },
       ]);
     });
 
@@ -243,8 +243,8 @@ describe('manager.ui.libs.hierarchy', () => {
       const result = prepareStoriesForHierarchy(stories, '\\.');
 
       expect(result).toEqual([
-        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'], 'rootName': '' },
-        { kind: 'another.space.20', namespaces: ['another', 'space', '20'], 'rootName': '' },
+        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'], rootName: '' },
+        { kind: 'another.space.20', namespaces: ['another', 'space', '20'], rootName: '' },
       ]);
     });
 

From a13ac2285e1c02453e4172ac4135422aba919284 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 15:58:10 +0100
Subject: [PATCH 11/18] sub header text as required children

---
 .../ui/components/stories_panel/index.js        |  2 +-
 .../ui/components/stories_panel/sub_header.js   | 17 +++--------------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.js b/lib/ui/src/modules/ui/components/stories_panel/index.js
index 71d705a3cfdc..343ffd23fdcb 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/index.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.js
@@ -54,7 +54,7 @@ class StoriesPanel extends Component {
             hierarchy =>
               hierarchyContainsStories(hierarchy) && (
                 <div key={hierarchy.name}>
-                  {hierarchy.name && <SubHeader name={hierarchy.name} />}
+                  {hierarchy.name && <SubHeader>{hierarchy.name}</SubHeader>}
                   <Stories {...pick(this.props, storyProps)} storiesHierarchy={hierarchy} />
                 </div>
               )
diff --git a/lib/ui/src/modules/ui/components/stories_panel/sub_header.js b/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
index f485d52224d1..9777ab77e6ba 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
@@ -2,10 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { baseFonts } from '@storybook/components';
 
-const wrapperStyle = {
-  marginTop: 20,
-};
-
 const headingStyle = {
   ...baseFonts,
   textTransform: 'uppercase',
@@ -16,21 +12,14 @@ const headingStyle = {
   textAlign: 'left',
   padding: '5px 13px',
   margin: 0,
+  marginTop: 20,
   overflow: 'hidden',
 };
 
-const SubHeader = ({ name }) => (
-  <div style={wrapperStyle}>
-    <h4 style={headingStyle}>{name}</h4>
-  </div>
-);
-
-SubHeader.defaultProps = {
-  name: '',
-};
+const SubHeader = ({ children }) => <h4 style={headingStyle}>{children}</h4>;
 
 SubHeader.propTypes = {
-  name: PropTypes.string,
+  children: PropTypes.string.isRequired,
 };
 
 export default SubHeader;

From fccff4f9dce9795d47ed5b4e6e1a58e4988a6871 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 17:00:38 +0100
Subject: [PATCH 12/18] refactor stories panel

---
 .../ui/components/stories_panel/index.js      | 37 +++++++++----------
 .../stories_panel/stories_tree/index.js       | 18 +++++----
 .../tree_header.js}                           |  6 +--
 3 files changed, 31 insertions(+), 30 deletions(-)
 rename lib/ui/src/modules/ui/components/stories_panel/{sub_header.js => stories_tree/tree_header.js} (76%)

diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.js b/lib/ui/src/modules/ui/components/stories_panel/index.js
index 343ffd23fdcb..4deadaeba8a6 100755
--- a/lib/ui/src/modules/ui/components/stories_panel/index.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import pick from 'lodash-es/pick';
 import Header from './header';
-import SubHeader from './sub_header';
 import Stories from './stories_tree';
 import TextFilter from './text_filter';
 
@@ -31,15 +30,23 @@ function hierarchyContainsStories(storiesHierarchy) {
 
 // eslint-disable-next-line react/prefer-stateless-function
 class StoriesPanel extends Component {
+  renderStories() {
+    const { storiesHierarchies } = this.props;
+
+    return storiesHierarchies.map(
+      hierarchy =>
+        hierarchyContainsStories(hierarchy) && (
+          <Stories
+            key={hierarchy.name}
+            {...pick(this.props, storyProps)}
+            storiesHierarchy={hierarchy}
+          />
+        )
+    );
+  }
+
   render() {
-    const {
-      name,
-      onStoryFilter,
-      openShortcutsHelp,
-      storiesHierarchies,
-      storyFilter,
-      url,
-    } = this.props;
+    const { name, onStoryFilter, openShortcutsHelp, storyFilter, url } = this.props;
 
     return (
       <div style={mainStyle}>
@@ -49,17 +56,7 @@ class StoriesPanel extends Component {
           onClear={() => onStoryFilter('')}
           onChange={text => onStoryFilter(text)}
         />
-        <div style={scrollStyle}>
-          {storiesHierarchies.map(
-            hierarchy =>
-              hierarchyContainsStories(hierarchy) && (
-                <div key={hierarchy.name}>
-                  {hierarchy.name && <SubHeader>{hierarchy.name}</SubHeader>}
-                  <Stories {...pick(this.props, storyProps)} storiesHierarchy={hierarchy} />
-                </div>
-              )
-          )}
-        </div>
+        <div style={scrollStyle}>{this.renderStories()}</div>
       </div>
     );
   }
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
index 977fc52a3600..907a1db89439 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.js
@@ -2,6 +2,7 @@ import { Treebeard } from 'react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
 import deepEqual from 'deep-equal';
+import TreeHeader from './tree_header';
 import treeNodeTypes from './tree_node_type';
 import treeDecorators from './tree_decorators';
 import treeStyle from './tree_style';
@@ -158,13 +159,16 @@ class Stories extends React.Component {
     data.root = true;
 
     return (
-      <Treebeard
-        style={treeStyle}
-        data={data}
-        onToggle={this.onToggle}
-        animations={sidebarAnimations ? undefined : false}
-        decorators={treeDecorators}
-      />
+      <div>
+        {storiesHierarchy.name && <TreeHeader>{storiesHierarchy.name}</TreeHeader>}
+        <Treebeard
+          style={treeStyle}
+          data={data}
+          onToggle={this.onToggle}
+          animations={sidebarAnimations ? undefined : false}
+          decorators={treeDecorators}
+        />
+      </div>
     );
   }
 }
diff --git a/lib/ui/src/modules/ui/components/stories_panel/sub_header.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
similarity index 76%
rename from lib/ui/src/modules/ui/components/stories_panel/sub_header.js
rename to lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
index 9777ab77e6ba..bf638bdbd9ce 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/sub_header.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
@@ -16,10 +16,10 @@ const headingStyle = {
   overflow: 'hidden',
 };
 
-const SubHeader = ({ children }) => <h4 style={headingStyle}>{children}</h4>;
+const TreeHeader = ({ children }) => <h4 style={headingStyle}>{children}</h4>;
 
-SubHeader.propTypes = {
+TreeHeader.propTypes = {
   children: PropTypes.string.isRequired,
 };
 
-export default SubHeader;
+export default TreeHeader;

From 283c7cef0ba1df70b7738c08d8eeec8bc68551f6 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 17:02:15 +0100
Subject: [PATCH 13/18] refactor and fix hierarchy helpers

---
 .../modules/ui/containers/stories_panel.js    |  4 +-
 lib/ui/src/modules/ui/libs/filters.js         |  2 +
 lib/ui/src/modules/ui/libs/hierarchy.js       | 21 ++++--
 lib/ui/src/modules/ui/libs/hierarchy.test.js  | 69 ++++++++++++++++---
 4 files changed, 80 insertions(+), 16 deletions(-)

diff --git a/lib/ui/src/modules/ui/containers/stories_panel.js b/lib/ui/src/modules/ui/containers/stories_panel.js
index c82101aecc0b..bf0f0a6f07ae 100755
--- a/lib/ui/src/modules/ui/containers/stories_panel.js
+++ b/lib/ui/src/modules/ui/containers/stories_panel.js
@@ -6,7 +6,7 @@ import compose from '../../../compose';
 import {
   prepareStoriesForHierarchy,
   resolveStoryHierarchy,
-  resolveStoryRoots,
+  resolveStoryHierarchyRoots,
   createHierarchies,
 } from '../libs/hierarchy';
 
@@ -39,7 +39,7 @@ export const mapper = (state, props, { actions }) => {
 
   const storiesHierarchies = createHierarchies(filteredStories);
 
-  const [, storyName] = resolveStoryRoots(selectedKind, hierarchyRootSeparator);
+  const { storyName } = resolveStoryHierarchyRoots(selectedKind, hierarchyRootSeparator);
   const selectedHierarchy = resolveStoryHierarchy(storyName, hierarchySeparator);
 
   return {
diff --git a/lib/ui/src/modules/ui/libs/filters.js b/lib/ui/src/modules/ui/libs/filters.js
index 947f67f5d9a4..ca869e3e2195 100755
--- a/lib/ui/src/modules/ui/libs/filters.js
+++ b/lib/ui/src/modules/ui/libs/filters.js
@@ -26,6 +26,7 @@ function flattenStories(items) {
   return items.reduce((arr, item) => {
     const flatten = item.stories.map(story => ({
       kind: item.kind,
+      rootName: item.rootName,
       namespaces: item.namespaces,
       storyName: story,
     }));
@@ -53,6 +54,7 @@ function getGroupedStoryItem(map, item, matches) {
   if (!storyItem) {
     storyItem = {
       kind: item.kind,
+      rootName: item.rootName,
       namespaces: item.namespaces,
       stories: [],
       matches: matches.filter(match => match.key === 'namespaces'),
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js
index a1bc94c6139d..3d2cdd147533 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.js
@@ -69,21 +69,30 @@ export function createHierarchies(stories) {
     });
   }
 
-  return Object.keys(rootMap).map(rootName => rootMap[rootName]);
+  const rootNames = Object.keys(rootMap);
+  const hierarchies = rootNames.map(rootName => rootMap[rootName]);
+
+  // make sure the main root is the first
+  const mainRootIndex = rootNames.indexOf('');
+  if (mainRootIndex > -1) {
+    Array.prototype.unshift.apply(hierarchies, hierarchies.splice(mainRootIndex, 1));
+  }
+
+  return hierarchies;
 }
 
-export function resolveStoryRoots(storyName = '', hierarchyRootSeparator) {
+export function resolveStoryHierarchyRoots(storyName = '', hierarchyRootSeparator) {
   if (!hierarchyRootSeparator) {
-    return ['', storyName];
+    return { rootName: '', storyName };
   }
 
   const segments = storyName.split(new RegExp(hierarchyRootSeparator));
 
   switch (segments.length) {
     case 1:
-      return ['', storyName];
+      return { rootName: '', storyName };
     case 2:
-      return segments;
+      return { rootName: segments[0], storyName: segments[1] };
     default:
       throw new Error(`multiple root separators found in story name: ${storyName}`);
   }
@@ -103,7 +112,7 @@ export function prepareStoriesForHierarchy(stories, hierarchySeparator, hierarch
   }
 
   return stories.map(story => {
-    const [rootName, storyName] = resolveStoryRoots(story.kind, hierarchyRootSeparator);
+    const { rootName, storyName } = resolveStoryHierarchyRoots(story.kind, hierarchyRootSeparator);
     const namespaces = resolveStoryHierarchy(storyName, hierarchySeparator);
 
     return {
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.test.js b/lib/ui/src/modules/ui/libs/hierarchy.test.js
index e6c3f103da44..e0cfff0ce15e 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.test.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.test.js
@@ -2,7 +2,7 @@ import {
   createHierarchyRoot,
   createHierarchies,
   resolveStoryHierarchy,
-  resolveStoryRoots,
+  resolveStoryHierarchyRoots,
   prepareStoriesForHierarchy,
 } from './hierarchy';
 
@@ -181,6 +181,59 @@ describe('manager.ui.libs.hierarchy', () => {
       expect(result).toHaveLength(1);
       expect(result[0].map).toEqual(expected);
     });
+
+    test('should return multiple roots with main root first when different root names are given', () => {
+      const stories = [
+        {
+          kind: 'second|some.name.item1',
+          rootName: 'second',
+          namespaces: ['some.name.item1'],
+          stories: ['a1', 'a2'],
+        },
+        {
+          kind: 'another.space.20',
+          rootName: '', // main
+          namespaces: ['another.space.20'],
+          stories: ['b1', 'b2'],
+        },
+      ];
+
+      const result = createHierarchies(stories);
+
+      const expectedMain = [
+        [
+          'another.space.20',
+          {
+            kind: 'another.space.20',
+            name: 'another.space.20',
+            namespaces: ['another.space.20'],
+            highlight: null,
+            isNamespace: true,
+            map: new Map(),
+            stories: [{ name: 'b1', highlight: null }, { name: 'b2', highlight: null }],
+          },
+        ],
+      ];
+
+      const expectedSecond = [
+        [
+          'some.name.item1',
+          {
+            kind: 'second|some.name.item1',
+            name: 'some.name.item1',
+            namespaces: ['some.name.item1'],
+            highlight: null,
+            isNamespace: true,
+            map: new Map(),
+            stories: [{ name: 'a1', highlight: null }, { name: 'a2', highlight: null }],
+          },
+        ],
+      ];
+
+      expect(result).toHaveLength(2);
+      expect(result[0].map).toEqual(new Map(expectedMain));
+      expect(result[1].map).toEqual(new Map(expectedSecond));
+    });
   });
 
   describe('resolveStoryHierarchy', () => {
@@ -197,16 +250,16 @@ describe('manager.ui.libs.hierarchy', () => {
     });
   });
 
-  describe('resolveStoryRoots', () => {
+  describe('resolveStoryHierarchyRoots', () => {
     test('should return empty root name when hierarchyRootSeparator is undefined', () => {
-      const [rootName, storyName] = resolveStoryRoots('some|name.item1');
+      const { rootName, storyName } = resolveStoryHierarchyRoots('some|name.item1');
 
       expect(rootName).toEqual('');
       expect(storyName).toEqual('some|name.item1');
     });
 
     test('should return array with separated root name and story name when hierarchyRootSeparator is defined', () => {
-      const [rootName, storyName] = resolveStoryRoots('some|name.item1', '\\|');
+      const { rootName, storyName } = resolveStoryHierarchyRoots('some|name.item1', '\\|');
 
       expect(rootName).toEqual('some');
       expect(storyName).toEqual('name.item1');
@@ -214,7 +267,7 @@ describe('manager.ui.libs.hierarchy', () => {
 
     test('should throw error when hierarchyRootSeparator is found multiple times', () => {
       expect(() => {
-        resolveStoryRoots('some|name|item1', '\\|');
+        resolveStoryHierarchyRoots('some|name|item1', '\\|');
       }).toThrow();
     });
   });
@@ -249,13 +302,13 @@ describe('manager.ui.libs.hierarchy', () => {
     });
 
     test('should return filled root name when root separator is provided', () => {
-      const stories = [{ kind: 'some|name.item1' }, { kind: 'another.space.20' }];
+      const stories = [{ kind: 'some.name.item1' }, { kind: 'another|space.20' }];
 
       const result = prepareStoriesForHierarchy(stories, '\\.', '\\|');
 
       expect(result).toEqual([
-        { kind: 'some|name.item1', namespaces: ['name', 'item1'], rootName: 'some' },
-        { kind: 'another.space.20', namespaces: ['another', 'space', '20'], rootName: '' },
+        { kind: 'some.name.item1', namespaces: ['some', 'name', 'item1'], rootName: '' },
+        { kind: 'another|space.20', namespaces: ['space', '20'], rootName: 'another' },
       ]);
     });
   });

From f6775ceac02178478a63518ab3c16d814ff3fbd2 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sat, 9 Dec 2017 19:33:42 +0100
Subject: [PATCH 14/18] improved tests touched files

---
 .../stories_panel/stories_tree/index.test.js  |  8 ++-
 .../stories_tree/tree_header.test.js          | 12 +++++
 lib/ui/src/modules/ui/libs/filters.test.js    | 52 +++++++++----------
 3 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.test.js

diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
index 649f8a046557..d5b8ade2e6c4 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.test.js
@@ -2,12 +2,16 @@ import { shallow, mount } from 'enzyme';
 import React from 'react';
 import Stories from './index';
 import { setContext } from '../../../../../compose';
-import { createHierarchies, createHierarchyRoot, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
+import {
+  createHierarchies,
+  createHierarchyRoot,
+  prepareStoriesForHierarchy,
+} from '../../../libs/hierarchy';
 import { storyFilter } from '../../../libs/filters';
 
 const leftClick = { button: 0 };
 
-describe('manager.ui.components.left_panel.stories', () => {
+describe('manager.ui.components.stories_panel.stories_tree', () => {
   beforeEach(() =>
     setContext({
       clientStore: {
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.test.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.test.js
new file mode 100644
index 000000000000..407c5be7343a
--- /dev/null
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.test.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import TreeHeader from './tree_header';
+
+describe('manager.ui.components.stories_panel.stories_tree.tree_header', () => {
+  test('should render tree header content', () => {
+    const content = 'abcd';
+    const wrap = shallow(<TreeHeader>{content}</TreeHeader>);
+
+    expect(wrap.text()).toEqual(content);
+  });
+});
diff --git a/lib/ui/src/modules/ui/libs/filters.test.js b/lib/ui/src/modules/ui/libs/filters.test.js
index 2e24b4eb77c7..104dbba25699 100755
--- a/lib/ui/src/modules/ui/libs/filters.test.js
+++ b/lib/ui/src/modules/ui/libs/filters.test.js
@@ -8,15 +8,15 @@ describe('manager.ui.libs.filters', () => {
     });
 
     test('should original stories if there is no filter', () => {
-      const stories = [{ kind: ['aa'], namespaces: ['aa'], stories: ['bb'] }];
+      const stories = [{ kind: ['aa'], namespaces: ['aa'], stories: ['bb'], rootName: '' }];
       const res = storyFilter(stories);
       expect(res).toBe(stories);
     });
 
     test('should always return the selectedKind', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
       ];
 
       const selectedKind = 'bb';
@@ -28,8 +28,8 @@ describe('manager.ui.libs.filters', () => {
 
     test('should always return the selectedKind with the single selectedStory', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb', 'cc', 'dd'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb', 'cc', 'dd'], rootName: '' },
       ];
 
       const selectedKind = 'bb';
@@ -41,9 +41,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should filter kinds correctly', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
-        { kind: 'ss', namespaces: ['ss'], stories: ['bb'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
+        { kind: 'ss', namespaces: ['ss'], stories: ['bb'], rootName: '' },
       ];
       const selectedKind = 'bb';
       const selectedStory = 'bb';
@@ -54,9 +54,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should not sort stories by kind', () => {
       const stories = [
-        { kind: 'ss', namespaces: ['ss'], stories: ['bb'] },
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
+        { kind: 'ss', namespaces: ['ss'], stories: ['bb'], rootName: '' },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
       ];
       const res = storyFilter(stories);
 
@@ -65,9 +65,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should sort stories by kind', () => {
       const stories = [
-        { kind: 'ss', namespaces: ['ss'], stories: ['bb'] },
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'bb', namespaces: ['bb'], stories: ['bb'] },
+        { kind: 'ss', namespaces: ['ss'], stories: ['bb'], rootName: '' },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'bb', namespaces: ['bb'], stories: ['bb'], rootName: '' },
       ];
       const res = storyFilter(stories, null, null, null, true);
 
@@ -76,9 +76,9 @@ describe('manager.ui.libs.filters', () => {
 
     test('should filter on story level', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd'] },
-        { kind: 'ee', namespaces: ['ee'], stories: ['ff'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd'], rootName: '' },
+        { kind: 'ee', namespaces: ['ee'], stories: ['ff'], rootName: '' },
       ];
       const selectedKind = 'aa';
       const selectedStory = 'bb';
@@ -89,21 +89,21 @@ describe('manager.ui.libs.filters', () => {
 
     test('should filter out unmatched stories at lowest level', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd'] },
-        { kind: 'ee', namespaces: ['ee'], stories: ['ff', 'gg'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd'], rootName: '' },
+        { kind: 'ee', namespaces: ['ee'], stories: ['ff', 'gg'], rootName: '' },
       ];
       const selectedKind = 'aa';
       const selectedStory = 'bb';
       const res = storyFilter(stories, 'ff', selectedKind, selectedStory);
 
-      expect(res).toMatchObject([stories[0], { kind: 'ee', stories: ['ff'] }]);
+      expect(res).toMatchObject([stories[0], { kind: 'ee', stories: ['ff'], rootName: '' }]);
     });
 
     test('should be case insensitive at tree level', () => {
       const stories = [
-        { kind: 'Aa', namespaces: ['aA'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd'] },
+        { kind: 'Aa', namespaces: ['aA'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd'], rootName: '' },
       ];
       const selectedKind = 'aA';
       const res = storyFilter(stories, 'aa', selectedKind);
@@ -113,14 +113,14 @@ describe('manager.ui.libs.filters', () => {
 
     test('should be case insensitive at story level', () => {
       const stories = [
-        { kind: 'aa', namespaces: ['aa'], stories: ['bb'] },
-        { kind: 'cc', namespaces: ['cc'], stories: ['dd', 'eE'] },
+        { kind: 'aa', namespaces: ['aa'], stories: ['bb'], rootName: '' },
+        { kind: 'cc', namespaces: ['cc'], stories: ['dd', 'eE'], rootName: '' },
       ];
       const selectedKind = 'aa';
       const selectedStory = 'bb';
       const res = storyFilter(stories, 'ee', selectedKind, selectedStory);
 
-      expect(res).toMatchObject([stories[0], { kind: 'cc', stories: ['eE'] }]);
+      expect(res).toMatchObject([stories[0], { kind: 'cc', stories: ['eE'], rootName: '' }]);
     });
   });
 });

From a12726f1fc2b8e4986605351dc31a38d1bd055a0 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Sun, 10 Dec 2017 11:38:28 +0100
Subject: [PATCH 15/18] extracted main root is first of hierarchies

---
 lib/ui/src/modules/ui/libs/hierarchy.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js
index 3d2cdd147533..2e1be8a2af7d 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.js
@@ -46,6 +46,15 @@ function fillHierarchy(namespaces, hierarchy, story) {
   fillHierarchy(namespaces.slice(1), childHierarchy, story);
 }
 
+function ensureMainRootIsFirst(hierarchies) {
+  const mainRoot = hierarchies.find(hierarchy => hierarchy.name === '');
+  const mainRootIndex = hierarchies.indexOf(mainRoot);
+  if (mainRootIndex > -1) {
+    hierarchies.unshift(...hierarchies.splice(mainRootIndex, 1));
+  }
+  return hierarchies;
+}
+
 export function createHierarchyRoot(name = '') {
   return {
     isNamespace: true,
@@ -69,16 +78,7 @@ export function createHierarchies(stories) {
     });
   }
 
-  const rootNames = Object.keys(rootMap);
-  const hierarchies = rootNames.map(rootName => rootMap[rootName]);
-
-  // make sure the main root is the first
-  const mainRootIndex = rootNames.indexOf('');
-  if (mainRootIndex > -1) {
-    Array.prototype.unshift.apply(hierarchies, hierarchies.splice(mainRootIndex, 1));
-  }
-
-  return hierarchies;
+  return ensureMainRootIsFirst(Object.values(rootMap));
 }
 
 export function resolveStoryHierarchyRoots(storyName = '', hierarchyRootSeparator) {

From b3a6b014462efd1d3d305fb08774fb56d46820c4 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Wed, 27 Dec 2017 10:39:31 +0100
Subject: [PATCH 16/18] post rebase origin/master fixes

---
 .../src/stories/addon-actions.stories.js      | 20 -------------------
 examples/official-storybook/config.js         |  6 ++++++
 .../stories/addon-events.stories.js           |  2 +-
 .../components/stories_panel/index.stories.js | 12 +++++------
 .../stories_tree/index.stories.js             | 20 +++++++++----------
 lib/ui/src/modules/ui/libs/hierarchy.js       | 20 ++++++++++---------
 lib/ui/src/modules/ui/libs/hierarchy.test.js  | 18 +++++++++++++----
 7 files changed, 48 insertions(+), 50 deletions(-)
 delete mode 100644 examples/cra-kitchen-sink/src/stories/addon-actions.stories.js

diff --git a/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js b/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
deleted file mode 100644
index 4f726e58015a..000000000000
--- a/examples/cra-kitchen-sink/src/stories/addon-actions.stories.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action, decorateAction } from '@storybook/addon-actions';
-import { Button } from '@storybook/react/demo';
-
-const pickFirst = decorateAction([args => args.slice(0, 1)]);
-
-storiesOf('Addons|Actions', module)
-  .add('Hello World', () => <Button onClick={action('hello-world')}>Hello World</Button>)
-  .add('Decorated Action', () => <Button onClick={pickFirst('decorated')}>First Argument</Button>)
-  .add('Circular Payload', () => {
-    const circular = { foo: {} };
-    circular.foo.circular = circular;
-    return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
-  })
-  .add('Function Name', () => {
-    const fn = action('fnName');
-    return <Button onClick={fn}>Action.name: {fn.name}</Button>;
-  })
-  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>);
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index ccb8caff5c6a..4adaf5c5c536 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,5 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 import { configure } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+  hierarchySeparator: /\/|\./,
+  hierarchyRootSeparator: /\|/,
+});
 
 function loadStories() {
   let req;
diff --git a/examples/official-storybook/stories/addon-events.stories.js b/examples/official-storybook/stories/addon-events.stories.js
index 9621e03fbeef..2e0c6712a672 100644
--- a/examples/official-storybook/stories/addon-events.stories.js
+++ b/examples/official-storybook/stories/addon-events.stories.js
@@ -15,7 +15,7 @@ const EVENTS = {
 const emitter = new EventEmitter();
 const emit = emitter.emit.bind(emitter);
 
-storiesOf('Addon Events', module)
+storiesOf('Addons|Events', module)
   .addDecorator(getStory => (
     <WithEvents
       emit={emit}
diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
index 034d83cac3be..67ae67516fe2 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import StoriesPanel from './index';
-import { createHierarchy } from '../../libs/hierarchy';
+import { createHierarchies } from '../../libs/hierarchy';
 import withLifecyle from '../../../../libs/withLifecycleDecorator';
 import { setContext } from '../../../../compose';
 
@@ -23,7 +23,7 @@ const decorator = withLifecyle({
   },
 });
 
-const storiesHierarchy = createHierarchy([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
+const storiesHierarchies = createHierarchies([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
 const openShortcutsHelp = action('openShortcutsHelp');
 const onStoryFilter = action('onStoryFilter');
 storiesOf('ui/stories/StoriesPanel', module)
@@ -35,9 +35,9 @@ storiesOf('ui/stories/StoriesPanel', module)
       onStoryFilter={onStoryFilter}
     />
   ))
-  .add('with storiesHierarchy prop', () => (
+  .add('with storiesHierarchies prop', () => (
     <StoriesPanel
-      storiesHierarchy={storiesHierarchy}
+      storiesHierarchies={storiesHierarchies}
       selectedKind="kk"
       selectedStory="bb"
       selectedHierarchy={['kk']}
@@ -45,9 +45,9 @@ storiesOf('ui/stories/StoriesPanel', module)
       onStoryFilter={onStoryFilter}
     />
   ))
-  .add('storiesHierarchy exists but is empty', () => (
+  .add('storiesHierarchies exists but is empty', () => (
     <StoriesPanel
-      storiesHierarchy={createHierarchy([])}
+      storiesHierarchies={createHierarchies([])}
       openShortcutsHelp={openShortcutsHelp}
       onStoryFilter={onStoryFilter}
     />
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
index a9936d9ee470..dff9e319cdd5 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
@@ -3,11 +3,11 @@ import { storiesOf } from '@storybook/react';
 
 import Stories from './index';
 import { setContext } from '../../../../../compose';
-import { createHierarchy, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
+import { createHierarchies, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
 import { storyFilter } from '../../../libs/filters';
 import withLifecyle from '../../../../../libs/withLifecycleDecorator';
 
-const data = createHierarchy([
+const data = createHierarchies([
   { kind: 'a', name: 'a', namespaces: ['a'], stories: ['a1', 'a2'] },
   { kind: 'b', name: 'b', namespaces: ['b'], stories: ['b1', 'b2'] },
 ]);
@@ -22,8 +22,8 @@ const initialData = [
     stories: ['b1', 'b2'],
   },
 ];
-const dataWithoutSeparator = createHierarchy(prepareStoriesForHierarchy(initialData));
-const dataWithSeparator = createHierarchy(prepareStoriesForHierarchy(initialData, '\\.'));
+const dataWithoutSeparator = createHierarchies(prepareStoriesForHierarchy(initialData));
+const dataWithSeparator = createHierarchies(prepareStoriesForHierarchy(initialData, '\\.'));
 
 const filter = 'th';
 const selectedKind = 'another.space.20';
@@ -34,7 +34,7 @@ const filteredData = storyFilter(
   selectedKind
 );
 
-const filteredDataHierarchy = createHierarchy(filteredData);
+const filteredDataHierarchy = createHierarchies(filteredData);
 
 const decorator = withLifecyle({
   beforeEach() {
@@ -56,7 +56,7 @@ storiesOf('ui/stories/Stories', module)
   .addDecorator(decorator)
   .add('empty', () => (
     <Stories
-      storiesHierarchy={createHierarchy([])}
+      storiesHierarchy={createHierarchies([])[0]}
       selectedKind=""
       selectedStory=""
       selectedHierarchy={[]}
@@ -64,7 +64,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('simple', () => (
     <Stories
-      storiesHierarchy={data}
+      storiesHierarchy={data[0]}
       selectedKind="b"
       selectedStory="b2"
       selectedHierarchy={['b']}
@@ -72,7 +72,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('with hierarchy - hierarchySeparator is defined', () => (
     <Stories
-      storiesHierarchy={dataWithSeparator}
+      storiesHierarchy={dataWithSeparator[0]}
       selectedKind="another.space.20"
       selectedStory="b2"
       selectedHierarchy={['another', 'space', '20']}
@@ -80,7 +80,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('without hierarchy - hierarchySeparator is defined', () => (
     <Stories
-      storiesHierarchy={dataWithoutSeparator}
+      storiesHierarchy={dataWithoutSeparator[0]}
       selectedKind="another.space.20"
       selectedStory="b2"
       selectedHierarchy={['another.space.20']}
@@ -88,7 +88,7 @@ storiesOf('ui/stories/Stories', module)
   ))
   .add('with highlighting when storiesFilter is provided', () => (
     <Stories
-      storiesHierarchy={filteredDataHierarchy}
+      storiesHierarchy={filteredDataHierarchy[0]}
       selectedKind={selectedKind}
       selectedStory="b2"
       selectedHierarchy={['another', 'space', '20']}
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.js b/lib/ui/src/modules/ui/libs/hierarchy.js
index 2e1be8a2af7d..397a3f6a2362 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.js
@@ -46,15 +46,6 @@ function fillHierarchy(namespaces, hierarchy, story) {
   fillHierarchy(namespaces.slice(1), childHierarchy, story);
 }
 
-function ensureMainRootIsFirst(hierarchies) {
-  const mainRoot = hierarchies.find(hierarchy => hierarchy.name === '');
-  const mainRootIndex = hierarchies.indexOf(mainRoot);
-  if (mainRootIndex > -1) {
-    hierarchies.unshift(...hierarchies.splice(mainRootIndex, 1));
-  }
-  return hierarchies;
-}
-
 export function createHierarchyRoot(name = '') {
   return {
     isNamespace: true,
@@ -64,6 +55,17 @@ export function createHierarchyRoot(name = '') {
   };
 }
 
+function ensureMainRootIsFirst(hierarchies) {
+  const mainRoot = hierarchies.find(hierarchy => hierarchy.name === '');
+  const mainRootIndex = hierarchies.indexOf(mainRoot);
+  if (mainRootIndex === -1 && hierarchies.length === 0) {
+    hierarchies.push(createHierarchyRoot());
+  } else if (mainRootIndex > 0) {
+    hierarchies.unshift(...hierarchies.splice(mainRootIndex, 1));
+  }
+  return hierarchies;
+}
+
 export function createHierarchies(stories) {
   const rootMap = {};
 
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.test.js b/lib/ui/src/modules/ui/libs/hierarchy.test.js
index e0cfff0ce15e..1255f0fdff08 100644
--- a/lib/ui/src/modules/ui/libs/hierarchy.test.js
+++ b/lib/ui/src/modules/ui/libs/hierarchy.test.js
@@ -32,16 +32,26 @@ describe('manager.ui.libs.hierarchy', () => {
   });
 
   describe('createHierarchies', () => {
-    test('should return empty array if stories are undefined', () => {
+    test('should return empty root hierarchy if stories are undefined', () => {
       const result = createHierarchies();
 
-      expect(result).toHaveLength(0);
+      expect(result[0]).toEqual({
+        namespaces: [],
+        name: '',
+        isNamespace: true,
+        map: new Map(),
+      });
     });
 
-    test('should return empty array if stories are empty', () => {
+    test('should return empty root hierarchy if stories are empty', () => {
       const result = createHierarchies([]);
 
-      expect(result).toHaveLength(0);
+      expect(result[0]).toEqual({
+        namespaces: [],
+        name: '',
+        isNamespace: true,
+        map: new Map(),
+      });
     });
 
     test('should return flat hierarchy if kind is not separated', () => {

From 05a0699107c685e0f857747b616189d9643383b9 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Wed, 27 Dec 2017 10:39:55 +0100
Subject: [PATCH 17/18] update snapshots

---
 .../addon-actions.stories.storyshot           |   41 -
 .../addon-a11y.stories.storyshot              |    8 +-
 .../addon-actions.stories.storyshot           |   12 +-
 .../addon-events.stories.storyshot            |    2 +-
 .../addon-info.stories.storyshot              |   54 +-
 .../__snapshots__/index.stories.storyshot     |  140 +-
 .../__snapshots__/index.stories.storyshot     | 1194 +++++++++--------
 7 files changed, 712 insertions(+), 739 deletions(-)
 delete mode 100644 examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot

diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index fc9ac6baeee2..000000000000
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Actions Circular Payload 1`] = `
-<button
-  class="css-1yjiefr"
->
-  Circular Payload
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Decorated Action 1`] = `
-<button
-  class="css-1yjiefr"
->
-  First Argument
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Function Name 1`] = `
-<button
-  class="css-1yjiefr"
->
-  Action.name: fnName
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Hello World 1`] = `
-<button
-  class="css-1yjiefr"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
-<button
-  class="css-1yjiefr"
->
-  Delete
-</button>
-`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
index d85b387dd973..40a2739f4999 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon a11y Default 1`] = `<button />`;
+exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
 
-exports[`Storyshots Addon a11y Disabled 1`] = `
+exports[`Storyshots Addons|a11y Disabled 1`] = `
 <button
   disabled=""
 >
@@ -10,7 +10,7 @@ exports[`Storyshots Addon a11y Disabled 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon a11y Invalid contrast 1`] = `
+exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
 <button
   style="color:black;background-color:black"
 >
@@ -18,7 +18,7 @@ exports[`Storyshots Addon a11y Invalid contrast 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon a11y Label 1`] = `
+exports[`Storyshots Addons|a11y Label 1`] = `
 <button>
   Testing the a11y addon
 </button>
diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index d245eb9a062c..14d27e909bd3 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Actions All types 1`] = `
+exports[`Storyshots Addons|Actions All types 1`] = `
 <div>
   <button
     class="css-1yjiefr"
@@ -100,7 +100,7 @@ exports[`Storyshots Addon Actions All types 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Actions Circular Payload 1`] = `
+exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -108,7 +108,7 @@ exports[`Storyshots Addon Actions Circular Payload 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Decorated Action 1`] = `
+exports[`Storyshots Addons|Actions Decorated Action 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -116,7 +116,7 @@ exports[`Storyshots Addon Actions Decorated Action 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Function Name 1`] = `
+exports[`Storyshots Addons|Actions Function Name 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -124,7 +124,7 @@ exports[`Storyshots Addon Actions Function Name 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Hello World 1`] = `
+exports[`Storyshots Addons|Actions Hello World 1`] = `
 <button
   class="css-1yjiefr"
 >
@@ -132,7 +132,7 @@ exports[`Storyshots Addon Actions Hello World 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon Actions Reserved keyword as name 1`] = `
+exports[`Storyshots Addons|Actions Reserved keyword as name 1`] = `
 <button
   class="css-1yjiefr"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
index 8e6394975064..b7d57931d0c5 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Events Logger 1`] = `
+exports[`Storyshots Addons|Events Logger 1`] = `
 <div
   style="padding:20px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
       \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif;color:rgb(51, 51, 51)"
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index c581d34dc47a..7a57c1477b52 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
+exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -34,7 +34,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Decorator
+            Addons|Info.Decorator
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -274,7 +274,7 @@ exports[`Storyshots Addon Info.Decorator Use Info as story decorator 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
+exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -311,7 +311,7 @@ exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.GitHub issues
+            Addons|Info.GitHub issues
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -428,7 +428,7 @@ exports[`Storyshots Addon Info.GitHub issues #1814 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
+exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -462,7 +462,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Markdown
+            Addons|Info.Markdown
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -753,7 +753,7 @@ exports[`Storyshots Addon Info.Markdown Displays Markdown in description 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.TableComponent Use a custom component for the table 1`] = `
+exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component for the table 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -787,7 +787,7 @@ exports[`Storyshots Addon Info.Options.TableComponent Use a custom component for
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.TableComponent
+            Addons|Info.Options.TableComponent
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -920,7 +920,7 @@ exports[`Storyshots Addon Info.Options.TableComponent Use a custom component for
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1`] = `
+exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1180,7 +1180,7 @@ exports[`Storyshots Addon Info.Options.header Shows or hides Info Addon header 1
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`] = `
+exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`] = `
 <div>
   <div>
     <div
@@ -1192,7 +1192,7 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
         <h1
           style="margin:0;padding:0;font-size:35px"
         >
-          Addon Info.Options.inline
+          Addons|Info.Options.inline
         </h1>
         <h2
           style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -1442,7 +1442,7 @@ exports[`Storyshots Addon Info.Options.inline Inlines component inside story 1`]
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.propTables Shows additional component prop tables 1`] = `
+exports[`Storyshots Addons|Info.Options.propTables Shows additional component prop tables 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1476,7 +1476,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.propTables
+            Addons|Info.Options.propTables
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -1828,7 +1828,7 @@ exports[`Storyshots Addon Info.Options.propTables Shows additional component pro
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
+exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1867,7 +1867,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.propTablesExclude
+            Addons|Info.Options.propTablesExclude
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2166,7 +2166,7 @@ exports[`Storyshots Addon Info.Options.propTablesExclude Exclude component from
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1`] = `
+exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2200,7 +2200,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.Options.source
+            Addons|Info.Options.source
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2396,7 +2396,7 @@ exports[`Storyshots Addon Info.Options.source Shows or hides Info Addon source 1
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.styles Extend info styles with an object 1`] = `
+exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2430,7 +2430,7 @@ exports[`Storyshots Addon Info.Options.styles Extend info styles with an object
           <h1
             style="margin:0;padding:0;font-size:35px;color:green"
           >
-            Addon Info.Options.styles
+            Addons|Info.Options.styles
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2661,7 +2661,7 @@ exports[`Storyshots Addon Info.Options.styles Extend info styles with an object
 </div>
 `;
 
-exports[`Storyshots Addon Info.Options.styles Full control over styles using a function 1`] = `
+exports[`Storyshots Addons|Info.Options.styles Full control over styles using a function 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2695,7 +2695,7 @@ exports[`Storyshots Addon Info.Options.styles Full control over styles using a f
           <h1
             style="margin:0;padding:0;font-size:35px;color:red"
           >
-            Addon Info.Options.styles
+            Addons|Info.Options.styles
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -2926,7 +2926,7 @@ exports[`Storyshots Addon Info.Options.styles Full control over styles using a f
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`] = `
+exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2960,7 +2960,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.React Docgen
+            Addons|Info.React Docgen
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -3166,7 +3166,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from Flow declarations 1`]
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations 1`] = `
+exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -3200,7 +3200,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.React Docgen
+            Addons|Info.React Docgen
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
@@ -3627,7 +3627,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from PropType declarations
 </div>
 `;
 
-exports[`Storyshots Addon Info.React Docgen Comments from component declaration 1`] = `
+exports[`Storyshots Addons|Info.React Docgen Comments from component declaration 1`] = `
 <div>
   <div
     style="position:relative;z-index:0"
@@ -3661,7 +3661,7 @@ exports[`Storyshots Addon Info.React Docgen Comments from component declaration
           <h1
             style="margin:0;padding:0;font-size:35px"
           >
-            Addon Info.React Docgen
+            Addons|Info.React Docgen
           </h1>
           <h2
             style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
diff --git a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
index 5386fff943d4..63be349d9fd8 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
@@ -44,7 +44,7 @@ exports[`Storyshots ui/stories/StoriesPanel default 1`] = `
 </div>
 `;
 
-exports[`Storyshots ui/stories/StoriesPanel storiesHierarchy exists but is empty 1`] = `
+exports[`Storyshots ui/stories/StoriesPanel storiesHierarchies exists but is empty 1`] = `
 <div
   style="padding:10px 0 10px 10px"
 >
@@ -84,11 +84,13 @@ exports[`Storyshots ui/stories/StoriesPanel storiesHierarchy exists but is empty
   </div>
   <div
     style="height:calc(100vh - 105px);margin-top:10px;overflow:auto"
-  />
+  >
+    0
+  </div>
 </div>
 `;
 
-exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchy prop 1`] = `
+exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchies prop 1`] = `
 <div
   style="padding:10px 0 10px 10px"
 >
@@ -129,94 +131,96 @@ exports[`Storyshots ui/stories/StoriesPanel with storiesHierarchy prop 1`] = `
   <div
     style="height:calc(100vh - 105px);margin-top:10px;overflow:auto"
   >
-    <ul
-      style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
-    >
-      <li
-        style="position:relative"
+    <div>
+      <ul
+        style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
       >
-        <span>
-          <ul
-            style="padding-left:19px;list-style:none"
-          >
-            <li
-              style="position:relative"
+        <li
+          style="position:relative"
+        >
+          <span>
+            <ul
+              style="padding-left:19px;list-style:none"
             >
-              <div
-                data-name="kk"
-                role="menuitem"
-                style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                tabindex="0"
+              <li
+                style="position:relative"
               >
                 <div
-                  data-radium="true"
+                  data-name="kk"
+                  role="menuitem"
+                  style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                  tabindex="0"
                 >
                   <div
-                    style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                    data-radium="true"
                   >
                     <div
-                      style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                      style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="10"
-                        preserveAspectRatio="xMidYMid meet"
-                        style="vertical-align:top;fill:#9DA5AB"
-                        viewBox="0 0 40 40"
-                        width="10"
+                      <div
+                        style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                       >
-                        <g>
-                          <path
-                            d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                          />
-                        </g>
-                      </svg>
+                        <svg
+                          fill="currentColor"
+                          height="10"
+                          preserveAspectRatio="xMidYMid meet"
+                          style="vertical-align:top;fill:#9DA5AB"
+                          viewBox="0 0 40 40"
+                          width="10"
+                        >
+                          <g>
+                            <path
+                              d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                            />
+                          </g>
+                        </svg>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                  >
                     <div
-                      style="line-height:18px;padding:1px 0 5px"
+                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                     >
-                      kk
+                      <div
+                        style="line-height:18px;padding:1px 0 5px"
+                      >
+                        kk
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-              <span>
-                <ul
-                  style="padding-left:19px;list-style:none"
-                >
-                  <li
-                    style="position:relative"
+                <span>
+                  <ul
+                    style="padding-left:19px;list-style:none"
                   >
-                    <a
-                      class="css-1enjukp"
-                      data-name="bb"
-                      href="?selectedKind=kk&selectedStory=bb&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                    <li
+                      style="position:relative"
                     >
-                      <div
-                        data-radium="true"
+                      <a
+                        class="css-1enjukp"
+                        data-name="bb"
+                        href="?selectedKind=kk&selectedStory=bb&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                       >
                         <div
-                          style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                          data-radium="true"
                         >
-                          <div>
-                            bb
+                          <div
+                            style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                          >
+                            <div>
+                              bb
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    </a>
-                    <span />
-                  </li>
-                </ul>
-              </span>
-            </li>
-          </ul>
-        </span>
-      </li>
-    </ul>
+                      </a>
+                      <span />
+                    </li>
+                  </ul>
+                </span>
+              </li>
+            </ul>
+          </span>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 `;
diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
index 56c657c48830..0a3bea905f3d 100644
--- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
+++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
@@ -1,828 +1,838 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots ui/stories/Stories empty 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      />
-    </span>
-  </li>
-</ul>
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
+        />
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories simple 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="a"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="a"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  a
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    a
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span />
-        </li>
-        <li
-          style="position:relative"
-        >
-          <div
-            data-name="b"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+            <span />
+          </li>
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="b"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  b
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    b
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <a
-                  class="css-1b2u8sb"
-                  data-name="b1"
-                  href="?selectedKind=b&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1b2u8sb"
+                    data-name="b1"
+                    href="?selectedKind=b&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b1
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b1
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-              <li
-                style="position:relative"
-              >
-                <a
-                  class="css-1enjukp"
-                  data-name="b2"
-                  href="?selectedKind=b&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                  </a>
+                  <span />
+                </li>
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1enjukp"
+                    data-name="b2"
+                    href="?selectedKind=b&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b2
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b2
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                  </a>
+                  <span />
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories with hierarchy - hierarchySeparator is defined 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="some"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="some"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  some
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    some
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span />
-        </li>
-        <li
-          style="position:relative"
-        >
-          <div
-            data-name="another"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+            <span />
+          </li>
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="another"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  another
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    another
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <div
-                  data-name="space"
-                  role="menuitem"
-                  style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                  tabindex="0"
+                <li
+                  style="position:relative"
                 >
                   <div
-                    data-radium="true"
+                    data-name="space"
+                    role="menuitem"
+                    style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                    tabindex="0"
                   >
                     <div
-                      style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                      data-radium="true"
                     >
                       <div
-                        style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                        style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="10"
-                          preserveAspectRatio="xMidYMid meet"
-                          style="vertical-align:top;fill:#9DA5AB"
-                          viewBox="0 0 40 40"
-                          width="10"
+                        <div
+                          style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                         >
-                          <g>
-                            <path
-                              d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                            />
-                          </g>
-                        </svg>
+                          <svg
+                            fill="currentColor"
+                            height="10"
+                            preserveAspectRatio="xMidYMid meet"
+                            style="vertical-align:top;fill:#9DA5AB"
+                            viewBox="0 0 40 40"
+                            width="10"
+                          >
+                            <g>
+                              <path
+                                d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                              />
+                            </g>
+                          </svg>
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                    >
                       <div
-                        style="line-height:18px;padding:1px 0 5px"
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                       >
-                        space
+                        <div
+                          style="line-height:18px;padding:1px 0 5px"
+                        >
+                          space
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <span>
-                  <ul
-                    style="padding-left:19px;list-style:none"
-                  >
-                    <li
-                      style="position:relative"
+                  <span>
+                    <ul
+                      style="padding-left:19px;list-style:none"
                     >
-                      <div
-                        data-name="20"
-                        role="menuitem"
-                        style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                        tabindex="0"
+                      <li
+                        style="position:relative"
                       >
                         <div
-                          data-radium="true"
+                          data-name="20"
+                          role="menuitem"
+                          style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                          tabindex="0"
                         >
                           <div
-                            style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                            data-radium="true"
                           >
                             <div
-                              style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                              style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                             >
-                              <svg
-                                fill="currentColor"
-                                height="10"
-                                preserveAspectRatio="xMidYMid meet"
-                                style="vertical-align:top;fill:#9DA5AB"
-                                viewBox="0 0 40 40"
-                                width="10"
+                              <div
+                                style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                               >
-                                <g>
-                                  <path
-                                    d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                                  />
-                                </g>
-                              </svg>
+                                <svg
+                                  fill="currentColor"
+                                  height="10"
+                                  preserveAspectRatio="xMidYMid meet"
+                                  style="vertical-align:top;fill:#9DA5AB"
+                                  viewBox="0 0 40 40"
+                                  width="10"
+                                >
+                                  <g>
+                                    <path
+                                      d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                                    />
+                                  </g>
+                                </svg>
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                          >
                             <div
-                              style="line-height:18px;padding:1px 0 5px"
+                              style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                             >
-                              20
+                              <div
+                                style="line-height:18px;padding:1px 0 5px"
+                              >
+                                20
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <span>
-                        <ul
-                          style="padding-left:19px;list-style:none"
-                        >
-                          <li
-                            style="position:relative"
+                        <span>
+                          <ul
+                            style="padding-left:19px;list-style:none"
                           >
-                            <a
-                              class="css-1b2u8sb"
-                              data-name="b1"
-                              href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1b2u8sb"
+                                data-name="b1"
+                                href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b1
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b1
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                          <li
-                            style="position:relative"
-                          >
-                            <a
-                              class="css-1enjukp"
-                              data-name="b2"
-                              href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                              </a>
+                              <span />
+                            </li>
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1enjukp"
+                                data-name="b2"
+                                href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b2
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b2
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                        </ul>
-                      </span>
-                    </li>
-                  </ul>
-                </span>
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                              </a>
+                              <span />
+                            </li>
+                          </ul>
+                        </span>
+                      </li>
+                    </ul>
+                  </span>
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories with highlighting when storiesFilter is provided 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="another"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="another"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  <span>
-                    ano
-                  </span>
-                  <strong
-                    style="background-color:#FFFEAA;font-weight:inherit"
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
                   >
-                    th
-                  </strong>
-                  <span>
-                    er
-                  </span>
+                    <span>
+                      ano
+                    </span>
+                    <strong
+                      style="background-color:#FFFEAA;font-weight:inherit"
+                    >
+                      th
+                    </strong>
+                    <span>
+                      er
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <div
-                  data-name="space"
-                  role="menuitem"
-                  style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                  tabindex="0"
+                <li
+                  style="position:relative"
                 >
                   <div
-                    data-radium="true"
+                    data-name="space"
+                    role="menuitem"
+                    style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                    tabindex="0"
                   >
                     <div
-                      style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                      data-radium="true"
                     >
                       <div
-                        style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                        style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                       >
-                        <svg
-                          fill="currentColor"
-                          height="10"
-                          preserveAspectRatio="xMidYMid meet"
-                          style="vertical-align:top;fill:#9DA5AB"
-                          viewBox="0 0 40 40"
-                          width="10"
+                        <div
+                          style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                         >
-                          <g>
-                            <path
-                              d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                            />
-                          </g>
-                        </svg>
+                          <svg
+                            fill="currentColor"
+                            height="10"
+                            preserveAspectRatio="xMidYMid meet"
+                            style="vertical-align:top;fill:#9DA5AB"
+                            viewBox="0 0 40 40"
+                            width="10"
+                          >
+                            <g>
+                              <path
+                                d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                              />
+                            </g>
+                          </svg>
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                    >
                       <div
-                        style="line-height:18px;padding:1px 0 5px"
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                       >
-                        space
+                        <div
+                          style="line-height:18px;padding:1px 0 5px"
+                        >
+                          space
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-                <span>
-                  <ul
-                    style="padding-left:19px;list-style:none"
-                  >
-                    <li
-                      style="position:relative"
+                  <span>
+                    <ul
+                      style="padding-left:19px;list-style:none"
                     >
-                      <div
-                        data-name="20"
-                        role="menuitem"
-                        style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-                        tabindex="0"
+                      <li
+                        style="position:relative"
                       >
                         <div
-                          data-radium="true"
+                          data-name="20"
+                          role="menuitem"
+                          style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+                          tabindex="0"
                         >
                           <div
-                            style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                            data-radium="true"
                           >
                             <div
-                              style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                              style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                             >
-                              <svg
-                                fill="currentColor"
-                                height="10"
-                                preserveAspectRatio="xMidYMid meet"
-                                style="vertical-align:top;fill:#9DA5AB"
-                                viewBox="0 0 40 40"
-                                width="10"
+                              <div
+                                style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                               >
-                                <g>
-                                  <path
-                                    d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                                  />
-                                </g>
-                              </svg>
+                                <svg
+                                  fill="currentColor"
+                                  height="10"
+                                  preserveAspectRatio="xMidYMid meet"
+                                  style="vertical-align:top;fill:#9DA5AB"
+                                  viewBox="0 0 40 40"
+                                  width="10"
+                                >
+                                  <g>
+                                    <path
+                                      d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                                    />
+                                  </g>
+                                </svg>
+                              </div>
                             </div>
-                          </div>
-                          <div
-                            style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-                          >
                             <div
-                              style="line-height:18px;padding:1px 0 5px"
+                              style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                             >
-                              20
+                              <div
+                                style="line-height:18px;padding:1px 0 5px"
+                              >
+                                20
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                      <span>
-                        <ul
-                          style="padding-left:19px;list-style:none"
-                        >
-                          <li
-                            style="position:relative"
+                        <span>
+                          <ul
+                            style="padding-left:19px;list-style:none"
                           >
-                            <a
-                              class="css-1b2u8sb"
-                              data-name="b1"
-                              href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1b2u8sb"
+                                data-name="b1"
+                                href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b1
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b1
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                          <li
-                            style="position:relative"
-                          >
-                            <a
-                              class="css-1enjukp"
-                              data-name="b2"
-                              href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                              </a>
+                              <span />
+                            </li>
+                            <li
+                              style="position:relative"
                             >
-                              <div
-                                data-radium="true"
+                              <a
+                                class="css-1enjukp"
+                                data-name="b2"
+                                href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                               >
                                 <div
-                                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  data-radium="true"
                                 >
-                                  <div>
-                                    b2
+                                  <div
+                                    style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                                  >
+                                    <div>
+                                      b2
+                                    </div>
                                   </div>
                                 </div>
-                              </div>
-                            </a>
-                            <span />
-                          </li>
-                        </ul>
-                      </span>
-                    </li>
-                  </ul>
-                </span>
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                              </a>
+                              <span />
+                            </li>
+                          </ul>
+                        </span>
+                      </li>
+                    </ul>
+                  </span>
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;
 
 exports[`Storyshots ui/stories/Stories without hierarchy - hierarchySeparator is defined 1`] = `
-<ul
-  style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
->
-  <li
-    style="position:relative"
+<div>
+  <ul
+    style="list-style:none;margin:0;padding:5px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;font-size:15px;min-width:200px;margin-left:-19px"
   >
-    <span>
-      <ul
-        style="padding-left:19px;list-style:none"
-      >
-        <li
-          style="position:relative"
+    <li
+      style="position:relative"
+    >
+      <span>
+        <ul
+          style="padding-left:19px;list-style:none"
         >
-          <div
-            data-name="some.name.item1"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="some.name.item1"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  some.name.item1
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    some.name.item1
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span />
-        </li>
-        <li
-          style="position:relative"
-        >
-          <div
-            data-name="another.space.20"
-            role="menuitem"
-            style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
-            tabindex="0"
+            <span />
+          </li>
+          <li
+            style="position:relative"
           >
             <div
-              data-radium="true"
+              data-name="another.space.20"
+              role="menuitem"
+              style="cursor:pointer;position:relative;overflow:hidden;padding:0px 5px;display:block;z-index:1"
+              tabindex="0"
             >
               <div
-                style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
+                data-radium="true"
               >
                 <div
-                  style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
+                  style="position:relative;display:inline-block;vertical-align:top;margin-left:-5px;height:24px;width:24px;transform-origin:50% 11px"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="10"
-                    preserveAspectRatio="xMidYMid meet"
-                    style="vertical-align:top;fill:#9DA5AB"
-                    viewBox="0 0 40 40"
-                    width="10"
+                  <div
+                    style="position:absolute;top:50%;left:50%;margin:-6px 0 0 -5px"
                   >
-                    <g>
-                      <path
-                        d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
-                      />
-                    </g>
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="10"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align:top;fill:#9DA5AB"
+                      viewBox="0 0 40 40"
+                      width="10"
+                    >
+                      <g>
+                        <path
+                          d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z"
+                        />
+                      </g>
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
-              >
                 <div
-                  style="line-height:18px;padding:1px 0 5px"
+                  style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
                 >
-                  another.space.20
+                  <div
+                    style="line-height:18px;padding:1px 0 5px"
+                  >
+                    another.space.20
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <span>
-            <ul
-              style="padding-left:19px;list-style:none"
-            >
-              <li
-                style="position:relative"
+            <span>
+              <ul
+                style="padding-left:19px;list-style:none"
               >
-                <a
-                  class="css-1b2u8sb"
-                  data-name="b1"
-                  href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1b2u8sb"
+                    data-name="b1"
+                    href="?selectedKind=another.space.20&selectedStory=b1&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b1
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b1
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-              <li
-                style="position:relative"
-              >
-                <a
-                  class="css-1enjukp"
-                  data-name="b2"
-                  href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
+                  </a>
+                  <span />
+                </li>
+                <li
+                  style="position:relative"
                 >
-                  <div
-                    data-radium="true"
+                  <a
+                    class="css-1enjukp"
+                    data-name="b2"
+                    href="?selectedKind=another.space.20&selectedStory=b2&full=NaN&addons=NaN&stories=NaN&panelRight=NaN"
                   >
                     <div
-                      style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      data-radium="true"
                     >
-                      <div>
-                        b2
+                      <div
+                        style="display:inline-block;vertical-align:top;max-width:calc(100% - 24px)"
+                      >
+                        <div>
+                          b2
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </a>
-                <span />
-              </li>
-            </ul>
-          </span>
-        </li>
-      </ul>
-    </span>
-  </li>
-</ul>
+                  </a>
+                  <span />
+                </li>
+              </ul>
+            </span>
+          </li>
+        </ul>
+      </span>
+    </li>
+  </ul>
+</div>
 `;

From b38efdedc7a70c68726468a6d482f94f3099ea18 Mon Sep 17 00:00:00 2001
From: MJ Meinders <max.meinders@gmail.com>
Date: Wed, 27 Dec 2017 11:17:26 +0100
Subject: [PATCH 18/18] updated cli snapshots

---
 lib/cli/test/snapshots/angular-cli/package.json           | 8 ++++----
 lib/cli/test/snapshots/meteor/package.json                | 6 +++---
 lib/cli/test/snapshots/react/package.json                 | 6 +++---
 lib/cli/test/snapshots/react_native/package.json          | 6 +++---
 lib/cli/test/snapshots/react_native_scripts/package.json  | 6 +++---
 lib/cli/test/snapshots/react_project/package.json         | 6 +++---
 lib/cli/test/snapshots/react_scripts/package.json         | 6 +++---
 lib/cli/test/snapshots/sfc_vue/package.json               | 6 +++---
 .../snapshots/update_package_organisations/package.json   | 2 +-
 lib/cli/test/snapshots/vue/package.json                   | 6 +++---
 lib/cli/test/snapshots/webpack_react/package.json         | 6 +++---
 11 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/lib/cli/test/snapshots/angular-cli/package.json b/lib/cli/test/snapshots/angular-cli/package.json
index 09c6b48af46f..786b15ddcb06 100644
--- a/lib/cli/test/snapshots/angular-cli/package.json
+++ b/lib/cli/test/snapshots/angular-cli/package.json
@@ -44,10 +44,10 @@
     "ts-node": "1.2.1",
     "tslint": "^4.3.0",
     "typescript": "~2.4.0",
-    "@storybook/angular": "^3.3.0",
-    "@storybook/addon-notes": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0",
+    "@storybook/angular": "^3.3.1",
+    "@storybook/addon-notes": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1",
     "@types/lodash-es": "^4.17.0"
   }
 }
diff --git a/lib/cli/test/snapshots/meteor/package.json b/lib/cli/test/snapshots/meteor/package.json
index 687a3029d6a5..c882804a44e6 100644
--- a/lib/cli/test/snapshots/meteor/package.json
+++ b/lib/cli/test/snapshots/meteor/package.json
@@ -18,8 +18,8 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "babel-root-slash-import": "^1.1.0",
-    "@storybook/react": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0"
+    "@storybook/react": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1"
   }
 }
diff --git a/lib/cli/test/snapshots/react/package.json b/lib/cli/test/snapshots/react/package.json
index 4605df9f3857..0201f6e4498a 100644
--- a/lib/cli/test/snapshots/react/package.json
+++ b/lib/cli/test/snapshots/react/package.json
@@ -20,8 +20,8 @@
     "rollup-plugin-commonjs": "^8.2.0",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^1.1.1",
-    "@storybook/react": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0"
+    "@storybook/react": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1"
   }
 }
diff --git a/lib/cli/test/snapshots/react_native/package.json b/lib/cli/test/snapshots/react_native/package.json
index 6a053d69f817..3481aa266892 100644
--- a/lib/cli/test/snapshots/react_native/package.json
+++ b/lib/cli/test/snapshots/react_native/package.json
@@ -16,9 +16,9 @@
     "babel-preset-react-native": "3.0.1",
     "jest": "20.0.4",
     "react-test-renderer": "16.0.0-alpha.12",
-    "@storybook/react-native": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0",
+    "@storybook/react-native": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1",
     "react-dom": "16.0.0-alpha.12",
     "prop-types": "^15.6.0"
   },
diff --git a/lib/cli/test/snapshots/react_native_scripts/package.json b/lib/cli/test/snapshots/react_native_scripts/package.json
index 8f31fb7d75a6..60906b123441 100644
--- a/lib/cli/test/snapshots/react_native_scripts/package.json
+++ b/lib/cli/test/snapshots/react_native_scripts/package.json
@@ -6,9 +6,9 @@
     "react-native-scripts": "1.3.1",
     "jest-expo": "~20.0.0",
     "react-test-renderer": "16.0.0-alpha.12",
-    "@storybook/react-native": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0",
+    "@storybook/react-native": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1",
     "react-dom": "16.0.0-alpha.12",
     "prop-types": "^15.6.0"
   },
diff --git a/lib/cli/test/snapshots/react_project/package.json b/lib/cli/test/snapshots/react_project/package.json
index ae71c2036893..52a18a81d4de 100644
--- a/lib/cli/test/snapshots/react_project/package.json
+++ b/lib/cli/test/snapshots/react_project/package.json
@@ -13,9 +13,9 @@
     "babel-preset-react": "^6.24.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
-    "@storybook/react": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0"
+    "@storybook/react": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1"
   },
   "peerDependencies": {
     "react": "*",
diff --git a/lib/cli/test/snapshots/react_scripts/package.json b/lib/cli/test/snapshots/react_scripts/package.json
index 687ad0b26928..46ecf7798fca 100644
--- a/lib/cli/test/snapshots/react_scripts/package.json
+++ b/lib/cli/test/snapshots/react_scripts/package.json
@@ -16,8 +16,8 @@
     "build-storybook": "build-storybook -s public"
   },
   "devDependencies": {
-    "@storybook/react": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0"
+    "@storybook/react": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1"
   }
 }
diff --git a/lib/cli/test/snapshots/sfc_vue/package.json b/lib/cli/test/snapshots/sfc_vue/package.json
index 53868820894b..8065219ea383 100644
--- a/lib/cli/test/snapshots/sfc_vue/package.json
+++ b/lib/cli/test/snapshots/sfc_vue/package.json
@@ -49,9 +49,9 @@
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0",
-    "@storybook/vue": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0",
+    "@storybook/vue": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1",
     "babel-preset-vue": "^2.0.0"
   },
   "engines": {
diff --git a/lib/cli/test/snapshots/update_package_organisations/package.json b/lib/cli/test/snapshots/update_package_organisations/package.json
index 918d7630768a..541d861ce8ab 100644
--- a/lib/cli/test/snapshots/update_package_organisations/package.json
+++ b/lib/cli/test/snapshots/update_package_organisations/package.json
@@ -8,7 +8,7 @@
     "react-scripts": "0.9.x"
   },
   "devDependencies": {
-    "@storybook/react": "^3.3.0"
+    "@storybook/react": "^3.3.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/lib/cli/test/snapshots/vue/package.json b/lib/cli/test/snapshots/vue/package.json
index 7a20c3794faf..a7bc9a57a43e 100644
--- a/lib/cli/test/snapshots/vue/package.json
+++ b/lib/cli/test/snapshots/vue/package.json
@@ -34,9 +34,9 @@
     "rollup-plugin-serve": "^0.4.0",
     "rollup-plugin-vue": "^2.4.0",
     "rollup-watch": "^4.0.0",
-    "@storybook/vue": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0",
+    "@storybook/vue": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1",
     "babel-preset-vue": "^2.0.0"
   }
 }
diff --git a/lib/cli/test/snapshots/webpack_react/package.json b/lib/cli/test/snapshots/webpack_react/package.json
index c63fb0213844..ef47ab91d1c5 100644
--- a/lib/cli/test/snapshots/webpack_react/package.json
+++ b/lib/cli/test/snapshots/webpack_react/package.json
@@ -17,8 +17,8 @@
     "babel-loader": "^7.1.2",
     "babel-preset-react": "^6.24.1",
     "webpack": "^3.5.5",
-    "@storybook/react": "^3.3.0",
-    "@storybook/addon-actions": "^3.3.0",
-    "@storybook/addon-links": "^3.3.0"
+    "@storybook/react": "^3.3.1",
+    "@storybook/addon-actions": "^3.3.1",
+    "@storybook/addon-links": "^3.3.1"
   }
 }