Story Hierarchy improved UI

.gitignore

@@ -15,4 +15,3 @@ yarn.lock
 /**/LICENSE
 docs/public
 packs/*.tgz
-package-lock.json

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.
 

addons/info/README.md

@@ -55,24 +55,6 @@ storiesOf('Component')
 
 > Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.
 
-
-To customize your defaults:
-
-```js
-// config.js
-import infoAddon, { setDefaults } from '@storybook/addon-info';
-
-// addon-info
-setDefaults({
-  inline: true,
-  maxPropsIntoLine: 1,
-  maxPropObjectKeys: 10,
-  maxPropArrayLength: 10,
-  maxPropStringLength: 100,
-});
-setAddon(infoAddon);
-```
-
 ## The FAQ
 
 **Components lose their names on static build**

addons/info/src/components/Story.js

@@ -125,7 +125,11 @@ export default class Story extends React.Component {
   _renderInline() {
     return (
       <div>
-        {this._renderInlineHeader()}
+        <div style={this.state.stylesheet.infoPage}>
+          <div style={this.state.stylesheet.infoBody}>
+            {this._getInfoHeader()}
+          </div>
+        </div>
         <div>
           {this._renderStory()}
         </div>
@@ -141,19 +145,6 @@ export default class Story extends React.Component {
     );
   }
 
-  _renderInlineHeader() {
-    const infoHeader = this._getInfoHeader();
-
-    return (
-      infoHeader &&
-      <div style={this.state.stylesheet.infoPage}>
-        <div style={this.state.stylesheet.infoBody}>
-          {infoHeader}
-        </div>
-      </div>
-    );
-  }
-
   _renderOverlay() {
     const linkStyle = {
       ...stylesheet.link.base,

app/react-native/src/server/index.js

@@ -12,12 +12,14 @@ export default class Server {
     this.expressApp.use(storybook(options));
     this.httpServer.on('request', this.expressApp);
     this.wsServer = new ws.Server({ server: this.httpServer });
-    this.wsServer.on('connection', (s, req) => this.handleWS(s, req));
+    this.wsServer.on('connection', s => this.handleWS(s));
   }
 
-  handleWS(socket, req) {
+  handleWS(socket) {
     if (this.options.manualId) {
-      const params = req.url ? querystring.parse(req.url.substr(1)) : {};
+      const params = socket.upgradeReq && socket.upgradeReq.url
+        ? querystring.parse(socket.upgradeReq.url.substr(1))
+        : {};
 
       if (params.pairedId) {
         socket.pairedId = params.pairedId; // eslint-disable-line

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,
-})
+  resolveStoryHierarchy: (storyName) => storyName.split('.'),
+});
 
 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/cli/generators/REACT_NATIVE/index.js

@@ -31,8 +31,7 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
   packageJson.devDependencies['@storybook/react-native'] = `^${version}`;
 
   if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    const reactVersion = packageJson.dependencies.react;
-    packageJson.devDependencies['react-dom'] = reactVersion;
+    packageJson.devDependencies['react-dom'] = '^15.5.4';
   }
 
   packageJson.scripts = packageJson.scripts || {};

lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js

@@ -15,8 +15,7 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
   packageJson.devDependencies['@storybook/react-native'] = `^${version}`;
 
   if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    const reactVersion = packageJson.dependencies.react;
-    packageJson.devDependencies['react-dom'] = reactVersion;
+    packageJson.devDependencies['react-dom'] = '^15.5.4';
   }
 
   packageJson.scripts = packageJson.scripts || {};

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,
+      resolveStoryHierarchy: storyName => storyName.split('/')
     });
 
     // 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,
+      resolveStoryHierarchy: storyName => [storyName],
     },
   },
   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,
     });