diff --git a/lib/ui/src/modules/ui/components/left_panel/stories.test.js b/lib/ui/src/modules/ui/components/left_panel/stories.test.js
index f73ec3dbd8b..9bea96acf8a 100755
--- a/lib/ui/src/modules/ui/components/left_panel/stories.test.js
+++ b/lib/ui/src/modules/ui/components/left_panel/stories.test.js
@@ -1,12 +1,13 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import Stories from './stories';
+import createHierarchy from '../../libs/hierarchy';
 
 describe('manager.ui.components.left_panel.stories', () => {
   describe('render', () => {
     test('should render stories - empty', () => {
-      const data = [];
-      const wrap = shallow(<Stories stories={data} />);
+      const data = createHierarchy([]);
+      const wrap = shallow(<Stories storiesHierarchy={data} />);
 
       const list = wrap.find('div').first().children('div').last();
 
@@ -14,8 +15,13 @@ describe('manager.ui.components.left_panel.stories', () => {
     });
 
     test('should render stories', () => {
-      const data = [{ kind: 'a', stories: ['a1', 'a2'] }, { kind: '20', stories: ['b1', 'b2'] }];
-      const wrap = shallow(<Stories stories={data} selectedKind="20" selectedStory="b2" />);
+      const data = createHierarchy([
+        { kind: 'a', stories: ['a1', 'a2'] },
+        { kind: '20', stories: ['b1', 'b2'] },
+      ]);
+      const wrap = shallow(
+        <Stories storiesHierarchy={data} selectedKind="20" selectedStory="b2" />
+      );
 
       const output = wrap.html();
 
@@ -23,18 +29,16 @@ describe('manager.ui.components.left_panel.stories', () => {
       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'] },
-      ];
+    test('should render stories with hierarchy - resolveStoryHierarchy 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
-          stories={data}
-          selectedKind="another.space.20"
-          selectedStory="b2"
-          leftPanelHierarchy
-        />
+        <Stories storiesHierarchy={data} selectedKind="another.space.20" selectedStory="b2" />
       );
 
       const output = wrap.html();
@@ -51,18 +55,13 @@ describe('manager.ui.components.left_panel.stories', () => {
       expect(output).toMatch(/b2/);
     });
 
-    test('should render stories without hierarchy - leftPanelHierarchy is false', () => {
-      const data = [
+    test('should render stories without hierarchy - resolveStoryHierarchy is not defined', () => {
+      const data = createHierarchy([
         { 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}
-        />
+        <Stories storiesHierarchy={data} selectedKind="another.space.20" selectedStory="b2" />
       );
 
       const output = wrap.html();
@@ -78,10 +77,18 @@ describe('manager.ui.components.left_panel.stories', () => {
 
   describe('events', () => {
     test('should call the onSelectStory prop when a kind is clicked', () => {
-      const data = [{ kind: 'a', stories: ['a1', 'a2'] }, { kind: 'b', stories: ['b1', 'b2'] }];
+      const data = createHierarchy([
+        { kind: 'a', stories: ['a1', 'a2'] },
+        { kind: 'b', stories: ['b1', 'b2'] },
+      ]);
       const onSelectStory = jest.fn();
       const wrap = shallow(
-        <Stories stories={data} selectedKind="b" selectedStory="b2" onSelectStory={onSelectStory} />
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="b"
+          selectedStory="b2"
+          onSelectStory={onSelectStory}
+        />
       );
 
       const kind = wrap.find('a').filterWhere(el => el.text() === 'a').last();
@@ -91,10 +98,18 @@ describe('manager.ui.components.left_panel.stories', () => {
     });
 
     test('should call the onSelectStory prop when a story is clicked', () => {
-      const data = [{ kind: 'a', stories: ['a1', 'a2'] }, { kind: 'b', stories: ['b1', 'b2'] }];
+      const data = createHierarchy([
+        { kind: 'a', stories: ['a1', 'a2'] },
+        { kind: 'b', stories: ['b1', 'b2'] },
+      ]);
       const onSelectStory = jest.fn();
       const wrap = shallow(
-        <Stories stories={data} selectedKind="b" selectedStory="b2" onSelectStory={onSelectStory} />
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="b"
+          selectedStory="b2"
+          onSelectStory={onSelectStory}
+        />
       );
 
       const kind = wrap.find('a').filterWhere(el => el.text() === 'b1').last();
@@ -103,19 +118,22 @@ 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'] },
-      ];
+    test('should call the onSelectStory prop when a namespace is clicked - resolveStoryHierarchy 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();
       const wrap = shallow(
         <Stories
-          stories={data}
+          storiesHierarchy={data}
           selectedKind="some.name.item1"
           selectedStory="a2"
           onSelectStory={onSelectStory}
-          leftPanelHierarchy
         />
       );
 
diff --git a/lib/ui/src/modules/ui/libs/hierarchy.test.js b/lib/ui/src/modules/ui/libs/hierarchy.test.js
new file mode 100644
index 00000000000..4183b2999c7
--- /dev/null
+++ b/lib/ui/src/modules/ui/libs/hierarchy.test.js
@@ -0,0 +1,155 @@
+import createHierarchy from './hierarchy';
+
+describe('manager.ui.libs.hierarchy', () => {
+  describe('should return root hierarchy node if stories are undefined', () => {
+    test('', () => {
+      const result = createHierarchy();
+
+      expect(result).toEqual({
+        namespace: '',
+        current: '',
+        map: new Map(),
+      });
+    });
+  });
+
+  describe('should return root hierarchy node if stories are empty', () => {
+    test('', () => {
+      const result = createHierarchy([]);
+
+      expect(result).toEqual({
+        namespace: '',
+        current: '',
+        map: new Map(),
+      });
+    });
+  });
+
+  describe('should return flat hierarchy if resolve function is undefined', () => {
+    test('', () => {
+      const stories = [
+        { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+        { kind: 'another.space.20', stories: ['b1', 'b2'] },
+      ];
+
+      const result = createHierarchy(stories);
+
+      const expected = [
+        [
+          'some.name.item1',
+          [
+            {
+              kind: 'some.name.item1',
+              name: 'some.name.item1',
+              namespaces: ['some.name.item1'],
+              stories: ['a1', 'a2'],
+            },
+          ],
+        ],
+        [
+          'another.space.20',
+          [
+            {
+              kind: 'another.space.20',
+              name: 'another.space.20',
+              namespaces: ['another.space.20'],
+              stories: ['b1', 'b2'],
+            },
+          ],
+        ],
+      ];
+
+      expect(result.map).toEqual(new Map(expected));
+    });
+  });
+
+  describe('should return hierarchy if resolve function is defined', () => {
+    test('', () => {
+      const stories = [
+        { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+        { kind: 'another.space.20', stories: ['b1', 'b2'] },
+      ];
+
+      const result = createHierarchy(stories, name => name.split('.'));
+
+      const expected = new Map([
+        [
+          'some',
+          [
+            {
+              current: 'some',
+              firstKind: 'some.name.item1',
+              isNamespace: true,
+              namespace: 'some.',
+              map: new Map([
+                [
+                  'name',
+                  [
+                    {
+                      current: 'name',
+                      firstKind: 'some.name.item1',
+                      isNamespace: true,
+                      namespace: 'some.name.',
+                      map: new Map([
+                        [
+                          'item1',
+                          [
+                            {
+                              kind: 'some.name.item1',
+                              name: 'item1',
+                              namespaces: ['some', 'name', 'item1'],
+                              stories: ['a1', 'a2'],
+                            },
+                          ],
+                        ],
+                      ]),
+                    },
+                  ],
+                ],
+              ]),
+            },
+          ],
+        ],
+        [
+          'another',
+          [
+            {
+              current: 'another',
+              firstKind: 'another.space.20',
+              isNamespace: true,
+              namespace: 'another.',
+              map: new Map([
+                [
+                  'space',
+                  [
+                    {
+                      current: 'space',
+                      firstKind: 'another.space.20',
+                      isNamespace: true,
+                      namespace: 'another.space.',
+                      map: new Map([
+                        [
+                          '20',
+                          [
+                            {
+                              kind: 'another.space.20',
+                              name: '20',
+                              namespaces: ['another', 'space', '20'],
+                              stories: ['b1', 'b2'],
+                            },
+                          ],
+                        ],
+                      ]),
+                    },
+                  ],
+                ],
+              ]),
+            },
+          ],
+        ],
+      ]);
+
+      expect(result.map).toEqual(expected);
+    });
+  });
+});