Story Hierarchy improved UI

examples/cra-kitchen-sink/.storybook/config.js

@@ -11,7 +11,8 @@ setOptions({
   showSearchBox: false,
   downPanelInRight: true,
   sortStoriesByKind: false,
-})
+  hierarchySeparator: '\\/|\\.|¯\\\\_\\(ツ\\)_\\/¯'
+});
 
 setAddon(infoAddon);
 

examples/cra-kitchen-sink/src/stories/index.js

@@ -153,3 +153,43 @@ storiesOf('WithEvents', module)
     </WithEvents>
   )
   .add('Logger', () => <Logger emiter={emiter} />);
+
+storiesOf('component.base.Link')
+  .addDecorator(withKnobs)
+  .add('first', () => <a>{text('firstLink', 'first link')}</a>)
+  .add('second', () => <a>{text('secondLink', 'second link')}</a>);
+
+storiesOf('component.base.Span')
+  .add('first', () => <span>first span</span>)
+  .add('second', () => <span>second span</span>);
+
+storiesOf('component.common.Div')
+  .add('first', () => <div>first div</div>)
+  .add('second', () => <div>second div</div>);
+
+storiesOf('component.common.Table')
+  .add('first', () => <table><tr><td>first table</td></tr></table>)
+  .add('second', () => <table><tr><td>first table</td></tr></table>);
+
+storiesOf('component.Button')
+  .add('first', () => <button>first button</button>)
+  .add('second', () => <button>first second</button>);
+
+// Atomic
+
+storiesOf('Cells¯\\_(ツ)_/¯Molecules.Atoms/simple', module)
+  .addDecorator(withKnobs)
+  .add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
+  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+
+storiesOf('Cells/Molecules/Atoms.more', module)
+  .add('with text2', () => <Button>Hello Button</Button>)
+  .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
+
+storiesOf('Cells/Molecules', module)
+  .add('with text', () => <Button>Hello Button</Button>)
+  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+
+storiesOf('Cells.Molecules.Atoms', module)
+  .add('with text2', () => <Button>Hello Button</Button>)
+  .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);

lib/ui/example/client/provider.js

@@ -78,25 +78,62 @@ export default class ReactProvider extends Provider {
     this.api = api;
     this.api.setOptions({
       name: 'REACT-STORYBOOK',
+      sortStoriesByKind: true,
+      hierarchySeparator: '/'
     });
 
     // 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',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'some/name2/Component 4',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'another/name3/Component 5',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'another/name3/Component 6',
+        stories: ['State a', 'State b'],
+      },
+      {
+        kind: 'Bla 1',
+        stories: ['State 1', 'State 2'],
+      },
+      {
+        kind: 'Bla 2',
+        stories: ['State 1', 'State 2'],
+      },
+      {
+        kind: 'anotherComponent in the middle',
+        stories: ['State a', 'State b'],
+      },
+    ]
   }
 
   _handlePreviewEvents() {

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

@@ -8,6 +8,7 @@ export default {
       name: 'STORYBOOK',
       url: 'https://github.com/storybooks/storybook',
       sortStoriesByKind: false,
+      hierarchySeparator: '',
     },
   },
   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 = [
+  'storiesHierarchy',
+  'selectedKind',
+  'selectedHierarchy',
+  'selectedStory',
+  'onSelectStory',
+];
 
 const LeftPanel = props =>
   <div style={mainStyle}>
@@ -26,12 +32,12 @@ const LeftPanel = props =>
       onChange={text => props.onStoryFilter(text)}
     />
     <div style={scrollStyle}>
-      {props.stories ? <Stories {...pick(props, storyProps)} /> : null}
+      {props.storiesHierarchy ? <Stories {...pick(props, storyProps)} /> : null}
     </div>
   </div>;
 
 LeftPanel.defaultProps = {
-  stories: null,
+  storiesHierarchy: null,
   storyFilter: null,
   onStoryFilter: () => {},
   openShortcutsHelp: null,
@@ -40,7 +46,11 @@ LeftPanel.defaultProps = {
 };
 
 LeftPanel.propTypes = {
-  stories: PropTypes.arrayOf(PropTypes.object),
+  storiesHierarchy: PropTypes.shape({
+    namespaces: PropTypes.arrayOf(PropTypes.string),
+    current: PropTypes.string,
+    map: PropTypes.object,
+  }),
   storyFilter: PropTypes.string,
   onStoryFilter: PropTypes.func,
 

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

@@ -4,6 +4,7 @@ import LeftPanel from './index';
 import Header from './header';
 import TextFilter from './text_filter';
 import Stories from './stories';
+import { createHierarchy } from '../../libs/hierarchy';
 
 describe('manager.ui.components.left_panel.index', () => {
   test('should render Header and TextFilter by default', () => {
@@ -22,17 +23,22 @@ describe('manager.ui.components.left_panel.index', () => {
     expect(wrap.find(Stories)).toBeEmpty();
   });
 
-  test('should render stories only if stories prop exists', () => {
+  test('should render stories only if storiesHierarchy prop exists', () => {
     const selectedKind = 'kk';
     const selectedStory = 'bb';
-    const stories = [{ kind: 'kk', stories: ['bb'] }];
+    const storiesHierarchy = createHierarchy([{ kind: 'kk', stories: ['bb'] }]);
     const wrap = shallow(
-      <LeftPanel stories={stories} selectedKind={selectedKind} selectedStory={selectedStory} />
+      <LeftPanel
+        storiesHierarchy={storiesHierarchy}
+        selectedKind={selectedKind}
+        selectedStory={selectedStory}
+        selectedHierarchy={['kk']}
+      />
     );
 
     const header = wrap.find(Stories).first();
     expect(header.props()).toMatchObject({
-      stories,
+      storiesHierarchy,
       selectedKind,
       selectedStory,
     });