Add left panel hierarchy support

lib/ui/example/client/provider.js

@@ -78,25 +78,53 @@ export default class ReactProvider extends Provider {
     this.api = api;
     this.api.setOptions({
       name: 'REACT-STORYBOOK',
+      leftPanelHierarchy: true
     });
 
     // set stories
-    this.api.setStories([
+    this.api.setStories(this.createStories());
+
+    // listen to the story change and update the preview.
+    this.api.onStory((kind, story) => {
+      this.globalState.emit('change', kind, story);
+    });
+  }
+
+  createStories() {
+    return [
       {
-        kind: 'Component 1',
+        kind: 'some.name.Component 1',
         stories: ['State 1', 'State 2'],
       },
-
       {
-        kind: 'Component 2',
+        kind: 'some.name.Component 2',
         stories: ['State a', 'State b'],
       },
-    ]);
-
-    // listen to the story change and update the preview.
-    this.api.onStory((kind, story) => {
-      this.globalState.emit('change', kind, story);
-    });
+      {
+        kind: 'some.name2.Component 3',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'some.name2.Component 4',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'some2.name3.Component 5',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'some2.name3.Component 6',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'Bla 1',
+        stories: ['State 1', 'State 2'],
+      },
+      {
+        kind: 'Bla 2',
+        stories: ['State 1', 'State 2'],
+      }
+    ]
   }
 
   _handlePreviewEvents() {

lib/ui/example/webpack.config.js

@@ -18,7 +18,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: require.resolve('babel-loader'),
-        query: { presets: ['react', 'es2015', 'stage-0'] },
+        query: { presets: ['babel-preset-es2015', 'babel-preset-react', 'babel-preset-stage-0'].map(require.resolve) },
         include: [path.join(__dirname, 'client'), path.resolve(__dirname, '../src')],
       },
     ],

lib/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "Core Storybook UI",
   "license": "MIT",
   "main": "dist/index.js",

lib/ui/src/modules/api/index.js

@@ -8,6 +8,7 @@ export default {
       name: 'STORYBOOK',
       url: 'https://github.com/storybooks/storybook',
       sortStoriesByKind: false,
+      leftPanelHierarchy: false,
     },
   },
   load({ clientStore, provider }, _actions) {

lib/ui/src/modules/ui/components/left_panel/index.js

@@ -15,7 +15,13 @@ const mainStyle = {
   padding: '10px 0 10px 10px',
 };
 
-const storyProps = ['stories', 'selectedKind', 'selectedStory', 'onSelectStory'];
+const storyProps = [
+  'stories',
+  'selectedKind',
+  'leftPanelHierarchy',
+  'selectedStory',
+  'onSelectStory',
+];
 
 const LeftPanel = props =>
   <div style={mainStyle}>

lib/ui/src/modules/ui/components/left_panel/stories.js

@@ -9,13 +9,18 @@ const listStyle = {
 const listStyleType = {
   listStyleType: 'none',
   paddingLeft: 0,
+  margin: 0,
 };
 
 const kindStyle = {
   fontSize: 15,
   padding: '10px 0px',
   cursor: 'pointer',
-  borderBottom: '1px solid #EEE',
+};
+
+const nestedListStyle = {
+  paddingLeft: '10px',
+  borderLeft: '1px solid #BBB',
 };
 
 const storyStyle = {
@@ -41,6 +46,61 @@ class Stories extends React.Component {
     if (onSelectStory) onSelectStory(selectedKind, story);
   }
 
+  fillHierarchy(namespaces, hierarchy, story) {
+    if (namespaces.length === 1) {
+      hierarchy.stories.push(story);
+      return;
+    }
+
+    const namespace = namespaces[0];
+    let childHierarchy = hierarchy.map.get(namespace);
+
+    if (!childHierarchy) {
+      childHierarchy = {
+        stories: [],
+        current: namespace,
+        namespace: hierarchy.namespace ? `${hierarchy.namespace}${namespace}.` : `${namespace}.`,
+        firstKind: story.kind,
+        map: new Map(),
+      };
+
+      hierarchy.map.set(namespace, childHierarchy);
+    }
+
+    this.fillHierarchy(namespaces.slice(1), childHierarchy, story);
+  }
+
+  createStoriesHierarchy(stories) {
+    const groupedStories = stories.map(story => {
+      const namespaces = story.kind.split('.');
+
+      return {
+        namespaces,
+        name: namespaces[namespaces.length - 1],
+        ...story,
+      };
+    });
+
+    const hierarchyRoot = {
+      stories: [],
+      namespace: '',
+      current: '',
+      map: new Map(),
+    };
+
+    groupedStories.forEach(story => this.fillHierarchy(story.namespaces, hierarchyRoot, story));
+
+    return hierarchyRoot;
+  }
+
+  renderMenuItem(item, style, onClick, displayName) {
+    return (
+      <a title={`Open ${item}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
+        {displayName}
+      </a>
+    );
+  }
+
   renderStory(story) {
     const { selectedStory } = this.props;
     const style = { display: 'block', ...storyStyle };
@@ -54,31 +114,22 @@ class Stories extends React.Component {
 
     return (
       <li key={story}>
-        <a
-          title={`Open ${story}`}
-          style={style}
-          onClick={props.onClick}
-          role="menuitem"
-          tabIndex="0"
-        >
-          {story}
-        </a>
+        {this.renderMenuItem(story, style, props.onClick, story)}
       </li>
     );
   }
 
-  renderKind({ kind, stories }) {
+  renderKind({ kind, stories, name }) {
     const { selectedKind } = this.props;
     const style = { display: 'block', ...kindStyle };
     const onClick = this.fireOnKind.bind(this, kind);
+    const displayName = name || kind;
 
     if (kind === selectedKind) {
       style.fontWeight = 'bold';
       return (
         <li key={kind}>
-          <a title={`Open ${kind}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
-            {kind}
-          </a>
+          {this.renderMenuItem(kind, style, onClick, displayName)}
           <div>
             <ul style={listStyleType} role="menu">
               {stories.map(this.renderStory)}
@@ -90,15 +141,61 @@ class Stories extends React.Component {
 
     return (
       <li key={kind}>
-        <a title={`Open ${kind}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
-          {kind}
-        </a>
+        {this.renderMenuItem(kind, style, onClick, displayName)}
       </li>
     );
   }
 
+  renderHierarchy({ stories, namespace, map }) {
+    const { selectedKind } = this.props;
+    const children = [];
+
+    if (stories.length) {
+      children.push(
+        <ul style={listStyleType} role="menu" key={namespace ? `${namespace}menu` : ''}>
+          {stories.map(this.renderKind)}
+        </ul>
+      );
+    }
+
+    map.forEach((value, key) => {
+      const style = { display: 'block', ...kindStyle };
+      const onClick = this.fireOnKind.bind(this, value.firstKind);
+      const isSelectedHierarchy = selectedKind.indexOf(value.namespace) >= 0;
+
+      if (isSelectedHierarchy) {
+        style.fontWeight = 'bold';
+      }
+
+      children.push(
+        <ul style={listStyleType} role="menu" key={`${value.current}_container`}>
+          <li key={value.current}>
+            {this.renderMenuItem(key, style, onClick, key)}
+          </li>
+          {isSelectedHierarchy &&
+            <li key={`${value.current}_children`} style={nestedListStyle}>
+              {this.renderHierarchy(value)}
+            </li>}
+        </ul>
+      );
+    });
+
+    return children;
+  }
+
   render() {
-    const { stories } = this.props;
+    const { stories, leftPanelHierarchy } = this.props;
+
+    if (leftPanelHierarchy) {
+      const hierarchy = this.createStoriesHierarchy(stories);
+
+      return (
+        <div style={listStyle}>
+          {this.renderHierarchy(hierarchy)}
+        </div>
+      );
+    }
+
     return (
       <div style={listStyle}>
         <ul style={listStyleType} role="menu">
@@ -123,6 +220,7 @@ Stories.propTypes = {
   ),
   selectedKind: PropTypes.string.isRequired,
   selectedStory: PropTypes.string.isRequired,
+  leftPanelHierarchy: PropTypes.bool.isRequired,
   onSelectStory: PropTypes.func,
 };
 

lib/ui/src/modules/ui/components/left_panel/stories.test.js

@@ -22,6 +22,58 @@ describe('manager.ui.components.left_panel.stories', () => {
       expect(output).toMatch(/20/);
       expect(output).toMatch(/b2/);
     });
+
+    test('should render stories with hierarchy - leftPanelHierarchy is true', () => {
+      const data = [
+        { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+        { kind: 'another.space.20', stories: ['b1', 'b2'] },
+      ];
+      const wrap = shallow(
+        <Stories
+          stories={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          leftPanelHierarchy
+        />
+      );
+
+      const output = wrap.html();
+
+      expect(output).toMatch(/some/);
+      expect(output).not.toMatch(/name/);
+      expect(output).not.toMatch(/item1/);
+      expect(output).not.toMatch(/a1/);
+      expect(output).not.toMatch(/a2/);
+      expect(output).toMatch(/another/);
+      expect(output).toMatch(/space/);
+      expect(output).toMatch(/20/);
+      expect(output).toMatch(/b1/);
+      expect(output).toMatch(/b2/);
+    });
+
+    test('should render stories without hierarchy - leftPanelHierarchy is false', () => {
+      const data = [
+        { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+        { kind: 'another.space.20', stories: ['b1', 'b2'] },
+      ];
+      const wrap = shallow(
+        <Stories
+          stories={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          leftPanelHierarchy={false}
+        />
+      );
+
+      const output = wrap.html();
+
+      expect(output).toMatch(/some.name.item1/);
+      expect(output).not.toMatch(/a1/);
+      expect(output).not.toMatch(/a2/);
+      expect(output).toMatch(/another.space.20/);
+      expect(output).toMatch(/b1/);
+      expect(output).toMatch(/b2/);
+    });
   });
 
   describe('events', () => {
@@ -50,5 +102,27 @@ describe('manager.ui.components.left_panel.stories', () => {
 
       expect(onSelectStory).toHaveBeenCalledWith('b', 'b1');
     });
+
+    test('should call the onSelectStory prop when a namespace is clicked - leftPanelHierarchy is true', () => {
+      const data = [
+        { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+        { kind: 'another.space.20', stories: ['b1', 'b2'] },
+      ];
+      const onSelectStory = jest.fn();
+      const wrap = shallow(
+        <Stories
+          stories={data}
+          selectedKind="some.name.item1"
+          selectedStory="a2"
+          onSelectStory={onSelectStory}
+          leftPanelHierarchy
+        />
+      );
+
+      const kind = wrap.find('a').filterWhere(el => el.text() === 'another').last();
+      kind.simulate('click');
+
+      expect(onSelectStory).toHaveBeenCalledWith('another.space.20', null);
+    });
   });
 });

lib/ui/src/modules/ui/containers/left_panel.js

@@ -6,7 +6,7 @@ import compose from '../../../compose';
 export const mapper = (state, props, { actions }) => {
   const actionMap = actions();
   const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state;
-  const { name, url, sortStoriesByKind } = uiOptions;
+  const { name, url, sortStoriesByKind, leftPanelHierarchy } = uiOptions;
 
   const data = {
     stories: filters.storyFilter(stories, storyFilter, selectedKind, sortStoriesByKind),
@@ -20,6 +20,7 @@ export const mapper = (state, props, { actions }) => {
     openShortcutsHelp: actionMap.ui.toggleShortcutsHelp,
     name,
     url,
+    leftPanelHierarchy,
   };
 
   return data;