Story Hierarchy improved UI

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

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

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

@@ -177,16 +177,16 @@ storiesOf('component.Button')
 
 // Atomic
 
-storiesOf('Atoms.Molecules.Cells.simple', module)
+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)
+storiesOf('Atoms/Molecules/Cells.more', module)
   .add('with text2', () => <Button>Hello Button</Button>)
   .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
 
-storiesOf('Atoms.Molecules', module)
+storiesOf('Atoms/Molecules', module)
   .add('with text', () => <Button>Hello Button</Button>)
   .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
 

lib/ui/example/client/provider.js

@@ -79,7 +79,7 @@ export default class ReactProvider extends Provider {
     this.api.setOptions({
       name: 'REACT-STORYBOOK',
       sortStoriesByKind: true,
-      resolveStoryHierarchy: storyName => storyName.split('/')
+      hierarchySeparator: '/'
     });
 
     // set stories

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

@@ -8,7 +8,7 @@ export default {
       name: 'STORYBOOK',
       url: 'https://github.com/storybooks/storybook',
       sortStoriesByKind: false,
-      resolveStoryHierarchy: storyName => [storyName],
+      hierarchySeparator: '',
     },
   },
   load({ clientStore, provider }, _actions) {

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

@@ -41,13 +41,13 @@ describe('manager.ui.components.left_panel.stories', () => {
       expect(output).toMatch(/b2/);
     });
 
-    test('should render stories with hierarchy - resolveStoryHierarchy is defined', () => {
+    test('should render stories with hierarchy - hierarchySeparator is defined', () => {
       const data = createHierarchy(
         [
           { kind: 'some.name.item1', stories: ['a1', 'a2'] },
           { kind: 'another.space.20', stories: ['b1', 'b2'] },
         ],
-        name => name.split('.')
+        '\\.'
       );
       const wrap = shallow(
         <Stories
@@ -72,7 +72,7 @@ describe('manager.ui.components.left_panel.stories', () => {
       expect(output).toMatch(/b2/);
     });
 
-    test('should render stories without hierarchy - resolveStoryHierarchy is not defined', () => {
+    test('should render stories without hierarchy - hierarchySeparator is not defined', () => {
       const data = createHierarchy([
         { kind: 'some.name.item1', stories: ['a1', 'a2'] },
         { kind: 'another.space.20', stories: ['b1', 'b2'] },
@@ -142,13 +142,13 @@ describe('manager.ui.components.left_panel.stories', () => {
       expect(onSelectStory).toHaveBeenCalledWith('b', 'b1');
     });
 
-    test('should call the onSelectStory prop when a namespace is clicked - resolveStoryHierarchy is defined', () => {
+    test('should call the onSelectStory prop when a namespace is clicked - hierarchySeparator is defined', () => {
       const data = createHierarchy(
         [
           { kind: 'some.name.item1', stories: ['a1', 'a2'] },
           { kind: 'another.space.20', stories: ['b1', 'b2'] },
         ],
-        name => name.split('.')
+        '\\.'
       );
 
       const onSelectStory = jest.fn();

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

@@ -2,18 +2,16 @@ import LeftPanel from '../components/left_panel';
 import * as filters from '../libs/filters';
 import genPoddaLoader from '../libs/gen_podda_loader';
 import compose from '../../../compose';
-import { createHierarchy } from '../libs/hierarchy';
+import { createHierarchy, resolveStoryHierarchy } from '../libs/hierarchy';
 
 export const mapper = (state, props, { actions }) => {
   const actionMap = actions();
   const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state;
-  const { name, url, sortStoriesByKind, resolveStoryHierarchy } = uiOptions;
+  const { name, url, sortStoriesByKind, hierarchySeparator } = uiOptions;
   const filteredStores = filters.storyFilter(stories, storyFilter, selectedKind, sortStoriesByKind);
 
-  const storiesHierarchy = createHierarchy(filteredStores, resolveStoryHierarchy);
-  const selectedHierarchy = resolveStoryHierarchy
-    ? resolveStoryHierarchy(selectedKind)
-    : [selectedKind];
+  const storiesHierarchy = createHierarchy(filteredStores, hierarchySeparator);
+  const selectedHierarchy = resolveStoryHierarchy(selectedKind, hierarchySeparator);
 
   const data = {
     storiesHierarchy,

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

@@ -10,7 +10,6 @@ describe('manager.ui.containers.left_panel', () => {
       const uiOptions = {
         name: 'foo',
         url: 'bar',
-        resolveStoryHierarchy: name => [name],
       };
       const selectStory = () => 'selectStory';
       const toggleShortcutsHelp = () => 'toggleShortcutsHelp';
@@ -59,7 +58,6 @@ describe('manager.ui.containers.left_panel', () => {
       const uiOptions = {
         name: 'foo',
         url: 'bar',
-        resolveStoryHierarchy: name => [name],
       };
       const selectStory = () => 'selectStory';
       const toggleShortcutsHelp = () => 'toggleShortcutsHelp';
@@ -105,7 +103,6 @@ describe('manager.ui.containers.left_panel', () => {
         name: 'foo',
         url: 'bar',
         sortStoriesByKind: true,
-        resolveStoryHierarchy: name => [name],
       };
       const selectStory = () => 'selectStory';
       const toggleShortcutsHelp = () => 'toggleShortcutsHelp';

lib/ui/src/modules/ui/libs/hierarchy.js

@@ -28,7 +28,15 @@ function fillHierarchy(namespaces, hierarchy, story) {
   fillHierarchy(namespaces.slice(1), childHierarchy, story);
 }
 
-export function createHierarchy(stories, resolveNamespace) {
+export function resolveStoryHierarchy(storyName, hierarchySeparator) {
+  if (!hierarchySeparator) {
+    return [storyName];
+  }
+
+  return storyName.split(new RegExp(hierarchySeparator));
+}
+
+export function createHierarchy(stories, hierarchySeparator) {
   const hierarchyRoot = {
     namespaces: [],
     current: '',
@@ -40,7 +48,7 @@ export function createHierarchy(stories, resolveNamespace) {
   }
 
   const groupedStories = stories.map(story => {
-    const namespaces = resolveNamespace ? resolveNamespace(story.kind) : [story.kind];
+    const namespaces = resolveStoryHierarchy(story.kind, hierarchySeparator);
 
     return {
       namespaces,

lib/ui/src/modules/ui/libs/hierarchy.test.js

@@ -1,4 +1,4 @@
-import { createHierarchy, isSelectedHierarchy } from './hierarchy';
+import { createHierarchy, isSelectedHierarchy, resolveStoryHierarchy } from './hierarchy';
 
 describe('manager.ui.libs.hierarchy', () => {
   describe('createHierarchy', () => {
@@ -22,7 +22,7 @@ describe('manager.ui.libs.hierarchy', () => {
       });
     });
 
-    test('should return flat hierarchy if resolve function is undefined', () => {
+    test('should return flat hierarchy if hierarchySeparator is undefined', () => {
       const stories = [
         { kind: 'some.name.item1', stories: ['a1', 'a2'] },
         { kind: 'another.space.20', stories: ['b1', 'b2'] },
@@ -58,13 +58,13 @@ describe('manager.ui.libs.hierarchy', () => {
       expect(result.map).toEqual(new Map(expected));
     });
 
-    test('should return hierarchy if resolve function is defined', () => {
+    test('should return hierarchy if hierarchySeparator is defined', () => {
       const stories = [
         { kind: 'some.name.item1', stories: ['a1', 'a2'] },
         { kind: 'another.space.20', stories: ['b1', 'b2'] },
       ];
 
-      const result = createHierarchy(stories, name => name.split('.'));
+      const result = createHierarchy(stories, '\\.');
 
       const expected = new Map([
         [
@@ -190,4 +190,18 @@ describe('manager.ui.libs.hierarchy', () => {
       expect(result).toBeTruthy();
     });
   });
+
+  describe('resolveStoryHierarchy', () => {
+    test('should return array with initial namespace when hierarchySeparator is undefined', () => {
+      const result = resolveStoryHierarchy('some.name.item1');
+
+      expect(result).toEqual(['some.name.item1']);
+    });
+
+    test('should return array with separated namespaces when hierarchySeparator is defined', () => {
+      const result = resolveStoryHierarchy('some/name.item1', '\\.|\\/');
+
+      expect(result).toEqual(['some', 'name', 'item1']);
+    });
+  });
 });