Add left panel hierarchy support

addons/actions/README.md

@@ -25,9 +25,7 @@ npm i -D @storybook/addon-actions
 
 Then, add following content to `.storybook/addons.js`
 
-```
-import '@storybook/addon-actions/register';
-```
+    import '@storybook/addon-actions/register';
 
 Import the `action` function and use it to create actions handlers. When creating action handlers, provide a **name** to make it easier to identify.
 

docs/pages/basics/faq/index.md

@@ -17,5 +17,5 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
 
 Next automatically defines `React` for all of your files via a babel plugin. You must define `React` for JSX to work. You can solve this either by:
 
-1. Adding `import React from 'react'` to your component files.
-1. Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require)
+1.  Adding `import React from 'react'` to your component files.
+2.  Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require)

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

@@ -11,7 +11,8 @@ setOptions({
   showSearchBox: false,
   downPanelInRight: true,
   sortStoriesByKind: false,
-})
+  leftPanelHierarchy: true
+});
 
 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('Atoms.Molecules.Cells.simple', module)
+  .addDecorator(withKnobs)
+  .add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
+  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+
+storiesOf('Atoms.Molecules.Cells.more', module)
+  .add('with text2', () => <Button>Hello Button</Button>)
+  .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
+
+storiesOf('Atoms.Molecules', module)
+  .add('with text', () => <Button>Hello Button</Button>)
+  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+
+storiesOf('Atoms.Molecules.Cells', 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,
+      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',
+        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/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/src/libs/key_events.js

@@ -10,6 +10,7 @@ export const features = {
   PREV_STORY: 7,
   SEARCH: 8,
   DOWN_PANEL_IN_RIGHT: 9,
+  STORIES_HIERARCHY: 10,
 };
 
 export function isModifierPressed(e) {
@@ -58,6 +59,9 @@ export default function handle(e) {
     case keycode('J'):
       e.preventDefault();
       return features.DOWN_PANEL_IN_RIGHT;
+    case keycode('H'):
+      e.preventDefault();
+      return features.STORIES_HIERARCHY;
     default:
       return false;
   }

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/shortcuts/actions/shortcuts.js

@@ -22,13 +22,18 @@ export function keyEventToOptions(currentOptions, event) {
 export default {
   handleEvent(context, event) {
     const { clientStore } = context;
+    const uiOptions = clientStore.get('uiOptions');
+
     switch (event) {
       case features.NEXT_STORY:
         apiActions.api.jumpToStory(context, 1);
         break;
       case features.PREV_STORY:
         apiActions.api.jumpToStory(context, -1);
         break;
+      case features.STORIES_HIERARCHY:
+        apiActions.api.setOptions(context, { leftPanelHierarchy: !uiOptions.leftPanelHierarchy });
+        break;
       default:
         clientStore.update(state => {
           const newOptions = keyEventToOptions(state.shortcutOptions, event);

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

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