Merge pull request #1387 from storybooks/151-story-hierarchy

Story Hierarchy (UI improvements)

lib/ui/package.json

@@ -28,11 +28,13 @@
     "podda": "^1.2.2",
     "prop-types": "^15.5.8",
     "qs": "^6.4.0",
+    "react-icons": "^2.2.5",
     "react-inspector": "^2.0.0",
     "react-komposer": "^2.0.0",
     "react-modal": "^1.7.6",
     "react-split-pane": "^0.1.63",
-    "redux": "^3.6.0"
+    "redux": "^3.6.0",
+    "storybook-react-treebeard": "^1.1.6"
   },
   "devDependencies": {
     "enzyme": "^2.8.2"

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

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import pick from 'lodash.pick';
 import Header from './header';
-import Stories from './stories';
+import Stories from './stories_tree';
 import TextFilter from './text_filter';
 
 const scrollStyle = {
@@ -48,7 +48,7 @@ LeftPanel.defaultProps = {
 LeftPanel.propTypes = {
   storiesHierarchy: PropTypes.shape({
     namespaces: PropTypes.arrayOf(PropTypes.string),
-    current: PropTypes.string,
+    name: PropTypes.string,
     map: PropTypes.object,
   }),
   storyFilter: PropTypes.string,

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

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import LeftPanel from './index';
 import Header from './header';
 import TextFilter from './text_filter';
-import Stories from './stories';
+import Stories from './stories_tree';
 import { createHierarchy } from '../../libs/hierarchy';
 
 describe('manager.ui.components.left_panel.index', () => {

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

@@ -1,196 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { baseFonts } from '../theme';
-import { isSelectedHierarchy } from '../../libs/hierarchy';
-
-const hierarchySeparatorColor = '#CCC';
-const hierarchySeparatorOffset = '15px';
-
-const baseListItemStyle = {
-  display: 'block',
-  cursor: 'pointer',
-};
-
-const kindStyle = {
-  ...baseListItemStyle,
-  fontSize: 15,
-  padding: '5px 0px',
-};
-
-const nameSpaceStyle = {
-  ...kindStyle,
-  color: '#8aa4d1',
-};
-
-const storyStyle = {
-  ...baseListItemStyle,
-  fontSize: 13,
-  padding: '5px 0px',
-};
-
-const listStyle = {
-  ...baseFonts,
-};
-
-const listStyleType = {
-  listStyleType: 'none',
-  paddingLeft: 0,
-  margin: 0,
-};
-
-const nestedListStyle = {
-  ...listStyleType,
-  paddingLeft: hierarchySeparatorOffset,
-  borderLeft: `1px solid ${hierarchySeparatorColor}`,
-};
-
-const separatorStyle = {
-  margin: 0,
-  padding: 0,
-  width: '5px',
-  position: 'absolute',
-  left: `-${hierarchySeparatorOffset}`,
-  top: '50%',
-  border: 'none',
-  borderTop: `1px solid ${hierarchySeparatorColor}`,
-};
-
-class Stories extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.renderKind = this.renderKind.bind(this);
-    this.renderStory = this.renderStory.bind(this);
-  }
-
-  fireOnKind(kind) {
-    const { onSelectStory } = this.props;
-    if (onSelectStory) onSelectStory(kind, null);
-  }
-
-  fireOnStory(story) {
-    const { onSelectStory, selectedKind } = this.props;
-    if (onSelectStory) onSelectStory(selectedKind, story);
-  }
-
-  renderMenuItem(item, style, onClick, displayName) {
-    return (
-      <a title={`Open ${item}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
-        {displayName}
-      </a>
-    );
-  }
-
-  renderMenuListItem(item, style, onClick, displayName) {
-    const listItemStyle = { position: 'relative' };
-
-    return (
-      <li key={item} style={listItemStyle}>
-        <hr style={separatorStyle} />
-        {this.renderMenuItem(item, style, onClick, displayName)}
-      </li>
-    );
-  }
-
-  renderStory(story) {
-    const { selectedStory } = this.props;
-    const style = { ...storyStyle };
-    const props = {
-      onClick: this.fireOnStory.bind(this, story),
-    };
-
-    if (story === selectedStory) {
-      style.fontWeight = 'bold';
-    }
-
-    return this.renderMenuListItem(story, style, props.onClick, story);
-  }
-
-  renderKind({ kind, stories, name }) {
-    const { selectedKind } = this.props;
-    const storyKindStyle = { ...kindStyle };
-    const onClick = this.fireOnKind.bind(this, kind);
-    const displayName = name || kind;
-
-    const children = [this.renderMenuListItem(kind, storyKindStyle, onClick, displayName)];
-
-    if (kind === selectedKind) {
-      storyKindStyle.fontWeight = 'bold';
-
-      children.push(
-        <li key={`${kind}_stories`}>
-          <ul style={nestedListStyle} role="menu">
-            {stories.map(this.renderStory)}
-          </ul>
-        </li>
-      );
-    }
-
-    return children;
-  }
-
-  renderHierarchy({ map }) {
-    const { selectedHierarchy } = this.props;
-    const children = [];
-
-    map.forEach((childItems, key) => {
-      childItems.forEach(value => {
-        const style = { ...nameSpaceStyle };
-        const onClick = this.fireOnKind.bind(this, value.firstKind);
-        const isSelected = isSelectedHierarchy(value.namespaces, selectedHierarchy);
-
-        if (isSelected) {
-          style.fontWeight = 'bold';
-        }
-
-        if (value.isNamespace) {
-          children.push(
-            <ul style={listStyleType} role="menu" key={`${value.current}_container`}>
-              {this.renderMenuListItem(value.current, style, onClick, key)}
-              {isSelected &&
-                <li key={`${value.current}_children`} style={nestedListStyle}>
-                  {this.renderHierarchy(value)}
-                </li>}
-            </ul>
-          );
-        } else {
-          children.push(
-            <ul style={listStyleType} role="menu" key={`${value.kind}_menu`}>
-              {this.renderKind(value)}
-            </ul>
-          );
-        }
-      });
-    });
-
-    return children;
-  }
-
-  render() {
-    const { storiesHierarchy } = this.props;
-
-    return (
-      <div style={listStyle}>
-        {this.renderHierarchy(storiesHierarchy)}
-      </div>
-    );
-  }
-}
-
-Stories.defaultProps = {
-  onSelectStory: null,
-  storiesHierarchy: null,
-};
-
-Stories.propTypes = {
-  storiesHierarchy: PropTypes.shape({
-    namespaces: PropTypes.arrayOf(PropTypes.string),
-    current: PropTypes.string,
-    map: PropTypes.object,
-  }),
-  selectedHierarchy: PropTypes.arrayOf(PropTypes.string).isRequired,
-  selectedKind: PropTypes.string.isRequired,
-  selectedStory: PropTypes.string.isRequired,
-  onSelectStory: PropTypes.func,
-};
-
-export default Stories;

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

@@ -0,0 +1,153 @@
+import { Treebeard } from 'storybook-react-treebeard';
+import PropTypes from 'prop-types';
+import React from 'react';
+import treeNodeTypes from './tree_node_type';
+import treeDecorators from './tree_decorators';
+import treeStyle from './tree_style';
+
+const namespaceSeparator = '@';
+
+function createNodeKey({ namespaces, type }) {
+  return [...namespaces, [type]].join(namespaceSeparator);
+}
+
+function getSelectedNodes(selectedHierarchy) {
+  return selectedHierarchy
+    .reduce((nodes, namespace, index) => {
+      const node = {};
+
+      node.type = selectedHierarchy.length - 1 === index
+        ? treeNodeTypes.COMPONENT
+        : treeNodeTypes.NAMESPACE;
+
+      if (!nodes.length) {
+        node.namespaces = [namespace];
+      } else {
+        const lastNode = nodes[nodes.length - 1];
+        node.namespaces = [...lastNode.namespaces, [namespace]];
+      }
+
+      nodes.push(node);
+
+      return nodes;
+    }, [])
+    .reduce((nodesMap, node) => ({ ...nodesMap, [createNodeKey(node)]: true }), {});
+}
+
+class Stories extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.onToggle = this.onToggle.bind(this);
+
+    const { selectedHierarchy } = this.props;
+
+    this.state = {
+      nodes: getSelectedNodes(selectedHierarchy),
+    };
+  }
+
+  onToggle(node, toggled) {
+    if (node.story) {
+      this.fireOnKindAndStory(node.kind, node.story);
+    } else if (node.kind) {
+      this.fireOnKind(node.kind);
+    }
+
+    if (!node.namespaces) {
+      return;
+    }
+
+    this.setState(prevState => ({
+      nodes: {
+        ...prevState.nodes,
+        [node.key]: toggled,
+      },
+    }));
+  }
+
+  fireOnKind(kind) {
+    const { onSelectStory } = this.props;
+    if (onSelectStory) onSelectStory(kind, null);
+  }
+
+  fireOnKindAndStory(kind, story) {
+    const { onSelectStory } = this.props;
+    if (onSelectStory) onSelectStory(kind, story);
+  }
+
+  mapStoriesHierarchy(storiesHierarchy) {
+    const treeModel = {
+      namespaces: storiesHierarchy.namespaces,
+      name: storiesHierarchy.name,
+    };
+
+    if (storiesHierarchy.isNamespace) {
+      treeModel.type = treeNodeTypes.NAMESPACE;
+
+      if (storiesHierarchy.map.size > 0) {
+        treeModel.children = [];
+
+        storiesHierarchy.map.forEach(childItems => {
+          childItems.forEach(item => {
+            treeModel.children.push(this.mapStoriesHierarchy(item));
+          });
+        });
+      }
+    } else {
+      const { selectedStory, selectedKind } = this.props;
+
+      treeModel.kind = storiesHierarchy.kind;
+      treeModel.type = treeNodeTypes.COMPONENT;
+
+      treeModel.children = storiesHierarchy.stories.map(story => ({
+        kind: storiesHierarchy.kind,
+        story,
+        name: story,
+        active: selectedStory === story && selectedKind === storiesHierarchy.kind,
+        type: treeNodeTypes.STORY,
+      }));
+    }
+
+    treeModel.key = createNodeKey(treeModel);
+    treeModel.toggled = this.state.nodes[treeModel.key];
+
+    return treeModel;
+  }
+
+  render() {
+    const { storiesHierarchy } = this.props;
+
+    const data = this.mapStoriesHierarchy(storiesHierarchy);
+    data.toggled = true;
+    data.name = 'stories';
+    data.root = true;
+
+    return (
+      <Treebeard
+        style={treeStyle}
+        data={data}
+        onToggle={this.onToggle}
+        decorators={treeDecorators}
+      />
+    );
+  }
+}
+
+Stories.defaultProps = {
+  onSelectStory: null,
+  storiesHierarchy: null,
+};
+
+Stories.propTypes = {
+  storiesHierarchy: PropTypes.shape({
+    namespaces: PropTypes.arrayOf(PropTypes.string),
+    name: PropTypes.string,
+    map: PropTypes.object,
+  }),
+  selectedHierarchy: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selectedKind: PropTypes.string.isRequired,
+  selectedStory: PropTypes.string.isRequired,
+  onSelectStory: PropTypes.func,
+};
+
+export default Stories;

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

@@ -1,7 +1,7 @@
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import React from 'react';
-import Stories from './stories';
-import { createHierarchy } from '../../libs/hierarchy';
+import Stories from './index';
+import { createHierarchy } from '../../../libs/hierarchy';
 
 describe('manager.ui.components.left_panel.stories', () => {
   describe('render', () => {
@@ -95,6 +95,62 @@ describe('manager.ui.components.left_panel.stories', () => {
       expect(output).toMatch(/b1/);
       expect(output).toMatch(/b2/);
     });
+
+    test('should render stories with initially selected nodes according to the selectedHierarchy', () => {
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = shallow(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={['another', 'space', '20']}
+        />
+      );
+
+      const { nodes } = wrap.state();
+
+      expect(nodes).toEqual({
+        'another@namespace': true,
+        'another@space@namespace': true,
+        'another@space@20@component': true,
+      });
+    });
+
+    test('should contain state with all selected nodes after clicking on the nodes', () => {
+      const data = createHierarchy(
+        [
+          { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+          { kind: 'another.space.20', stories: ['b1', 'b2'] },
+        ],
+        '\\.'
+      );
+      const wrap = mount(
+        <Stories
+          storiesHierarchy={data}
+          selectedKind="another.space.20"
+          selectedStory="b2"
+          selectedHierarchy={['another', 'space', '20']}
+        />
+      );
+
+      const kind = wrap.find('a').filterWhere(el => el.text() === 'some').last();
+      kind.simulate('click');
+
+      const { nodes } = wrap.state();
+
+      expect(nodes).toEqual({
+        'another@namespace': true,
+        'another@space@namespace': true,
+        'another@space@20@component': true,
+        'some@namespace': true,
+      });
+    });
   });
 
   describe('events', () => {
@@ -104,7 +160,7 @@ describe('manager.ui.components.left_panel.stories', () => {
         { kind: 'b', stories: ['b1', 'b2'] },
       ]);
       const onSelectStory = jest.fn();
-      const wrap = shallow(
+      const wrap = mount(
         <Stories
           storiesHierarchy={data}
           selectedKind="b"
@@ -126,7 +182,7 @@ describe('manager.ui.components.left_panel.stories', () => {
         { kind: 'b', stories: ['b1', 'b2'] },
       ]);
       const onSelectStory = jest.fn();
-      const wrap = shallow(
+      const wrap = mount(
         <Stories
           storiesHierarchy={data}
           selectedKind="b"
@@ -142,7 +198,7 @@ describe('manager.ui.components.left_panel.stories', () => {
       expect(onSelectStory).toHaveBeenCalledWith('b', 'b1');
     });
 
-    test('should call the onSelectStory prop when a namespace is clicked - hierarchySeparator is defined', () => {
+    test('should call the onSelectStory prop when a story is clicked - hierarchySeparator is defined', () => {
       const data = createHierarchy(
         [
           { kind: 'some.name.item1', stories: ['a1', 'a2'] },
@@ -152,7 +208,7 @@ describe('manager.ui.components.left_panel.stories', () => {
       );
 
       const onSelectStory = jest.fn();
-      const wrap = shallow(
+      const wrap = mount(
         <Stories
           storiesHierarchy={data}
           selectedKind="some.name.item1"
@@ -162,10 +218,15 @@ describe('manager.ui.components.left_panel.stories', () => {
         />
       );
 
-      const kind = wrap.find('a').filterWhere(el => el.text() === 'another').last();
-      kind.simulate('click');
+      wrap.find('a').filterWhere(el => el.text() === 'another').last().simulate('click');
+      wrap.find('a').filterWhere(el => el.text() === 'space').last().simulate('click');
+      wrap.find('a').filterWhere(el => el.text() === '20').last().simulate('click');
 
       expect(onSelectStory).toHaveBeenCalledWith('another.space.20', null);
+
+      wrap.find('a').filterWhere(el => el.text() === 'b2').last().simulate('click');
+
+      expect(onSelectStory).toHaveBeenCalledWith('another.space.20', 'b2');
     });
   });
 });

lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js

@@ -0,0 +1,74 @@
+import { decorators } from 'storybook-react-treebeard';
+import { IoFolder, IoDocumentText, IoCode } from 'react-icons/lib/io';
+import React from 'react';
+import PropTypes from 'prop-types';
+import treeNodeTypes from './tree_node_type';
+
+const iconsColor = '#7d8890';
+
+const iconsMap = {
+  [treeNodeTypes.NAMESPACE]: IoFolder,
+  [treeNodeTypes.COMPONENT]: IoDocumentText,
+  [treeNodeTypes.STORY]: IoCode,
+};
+
+function ContainerDecorator(props) {
+  const { node, style } = props;
+
+  if (node.root) {
+    style.subtree.paddingLeft = '0';
+    return null;
+  }
+
+  style.subtree.paddingLeft = '19px';
+
+  return <decorators.Container {...props} />;
+}
+
+ContainerDecorator.propTypes = {
+  style: PropTypes.shape({
+    subtree: PropTypes.object,
+  }).isRequired,
+  node: PropTypes.shape({
+    root: PropTypes.bool,
+  }).isRequired,
+};
+
+function HeaderDecorator(props) {
+  const { style, node } = props;
+
+  const newStyleTitle = {
+    ...style.title,
+  };
+
+  const Icon = iconsMap[node.type];
+
+  if (!node.children || !node.children.length) {
+    newStyleTitle.fontSize = '13px';
+  }
+
+  return (
+    <div style={style.base}>
+      {Icon && <Icon color={iconsColor} />}
+      <a style={newStyleTitle}>
+        {node.name}
+      </a>
+    </div>
+  );
+}
+
+HeaderDecorator.propTypes = {
+  style: PropTypes.shape({
+    title: PropTypes.object,
+    base: PropTypes.object,
+  }).isRequired,
+  node: PropTypes.shape({
+    name: PropTypes.string,
+  }).isRequired,
+};
+
+export default {
+  ...decorators,
+  Header: HeaderDecorator,
+  Container: ContainerDecorator,
+};

lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_node_type.js

@@ -0,0 +1,5 @@
+export default {
+  NAMESPACE: 'namespace',
+  COMPONENT: 'component',
+  STORY: 'story',
+};

lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js

@@ -0,0 +1,72 @@
+import { baseFonts } from '../../theme';
+
+export default {
+  tree: {
+    base: {
+      listStyle: 'none',
+      margin: 0,
+      padding: 0,
+      fontFamily: baseFonts.fontFamily,
+      fontSize: '15px',
+    },
+    node: {
+      base: {
+        position: 'relative',
+      },
+      link: {
+        cursor: 'pointer',
+        position: 'relative',
+        padding: '0px 5px',
+        display: 'block',
+      },
+      activeLink: {
+        fontWeight: 'bold',
+        backgroundColor: '#EEE',
+      },
+      toggle: {
+        base: {
+          position: 'relative',
+          display: 'inline-block',
+          verticalAlign: 'top',
+          marginLeft: '-5px',
+          height: '24px',
+          width: '24px',
+        },
+        wrapper: {
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          margin: '-10px 0 0 -4px',
+        },
+        height: 10,
+        width: 10,
+        arrow: {
+          fill: '#9DA5AB',
+          strokeWidth: 0,
+        },
+      },
+      header: {
+        base: {
+          display: 'inline-block',
+          verticalAlign: 'top',
+        },
+        connector: {
+          width: '2px',
+          height: '12px',
+          borderLeft: 'solid 2px black',
+          borderBottom: 'solid 2px black',
+          position: 'absolute',
+          top: '0px',
+          left: '-21px',
+        },
+        title: {
+          lineHeight: '24px',
+          verticalAlign: 'middle',
+        },
+      },
+      subtree: {
+        listStyle: 'none',
+      },
+    },
+  },
+};

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

@@ -15,7 +15,7 @@ function fillHierarchy(namespaces, hierarchy, story) {
   if (!childHierarchy) {
     childHierarchy = {
       isNamespace: true,
-      current: namespace,
+      name: namespace,
       namespaces: [...hierarchy.namespaces, namespace],
       firstKind: story.kind,
       map: new Map(),
@@ -38,8 +38,9 @@ export function resolveStoryHierarchy(storyName, hierarchySeparator) {
 
 export function createHierarchy(stories, hierarchySeparator) {
   const hierarchyRoot = {
+    isNamespace: true,
     namespaces: [],
-    current: '',
+    name: '',
     map: new Map(),
   };
 
@@ -61,18 +62,3 @@ export function createHierarchy(stories, hierarchySeparator) {
 
   return hierarchyRoot;
 }
-
-export function isSelectedHierarchy(namespaces, selectedHierarchy) {
-  if (!namespaces || !selectedHierarchy) {
-    return false;
-  }
-
-  if (namespaces.length > selectedHierarchy.length) {
-    return false;
-  }
-
-  return namespaces.reduce(
-    (isSelected, namespace, index) => isSelected && namespace === selectedHierarchy[index],
-    true
-  );
-}

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

@@ -1,4 +1,4 @@
-import { createHierarchy, isSelectedHierarchy, resolveStoryHierarchy } from './hierarchy';
+import { createHierarchy, resolveStoryHierarchy } from './hierarchy';
 
 describe('manager.ui.libs.hierarchy', () => {
   describe('createHierarchy', () => {
@@ -7,7 +7,8 @@ describe('manager.ui.libs.hierarchy', () => {
 
       expect(result).toEqual({
         namespaces: [],
-        current: '',
+        name: '',
+        isNamespace: true,
         map: new Map(),
       });
     });
@@ -17,7 +18,8 @@ describe('manager.ui.libs.hierarchy', () => {
 
       expect(result).toEqual({
         namespaces: [],
-        current: '',
+        name: '',
+        isNamespace: true,
         map: new Map(),
       });
     });
@@ -71,7 +73,7 @@ describe('manager.ui.libs.hierarchy', () => {
           'some',
           [
             {
-              current: 'some',
+              name: 'some',
               firstKind: 'some.name.item1',
               isNamespace: true,
               namespaces: ['some'],
@@ -80,7 +82,7 @@ describe('manager.ui.libs.hierarchy', () => {
                   'name',
                   [
                     {
-                      current: 'name',
+                      name: 'name',
                       firstKind: 'some.name.item1',
                       isNamespace: true,
                       namespaces: ['some', 'name'],
@@ -108,7 +110,7 @@ describe('manager.ui.libs.hierarchy', () => {
           'another',
           [
             {
-              current: 'another',
+              name: 'another',
               firstKind: 'another.space.20',
               isNamespace: true,
               namespaces: ['another'],
@@ -117,7 +119,7 @@ describe('manager.ui.libs.hierarchy', () => {
                   'space',
                   [
                     {
-                      current: 'space',
+                      name: 'space',
                       firstKind: 'another.space.20',
                       isNamespace: true,
                       namespaces: ['another', 'space'],
@@ -147,50 +149,6 @@ describe('manager.ui.libs.hierarchy', () => {
     });
   });
 
-  describe('isSelectedHierarchy', () => {
-    test('no parameters', () => {
-      const result = isSelectedHierarchy();
-
-      expect(result).toBeFalsy();
-    });
-
-    test('namespaces array is bigger then selectedHierarchy array', () => {
-      const namespaces = ['some', 'namespace', 'here', 'it', 'is'];
-      const selectedHierarchy = ['some', 'namespace'];
-
-      const result = isSelectedHierarchy(namespaces, selectedHierarchy);
-
-      expect(result).toBeFalsy();
-    });
-
-    test('namespaces array is not matching selectedHierarchy array', () => {
-      const namespaces = ['some', 'namespace'];
-      const selectedHierarchy = ['some', 'namespace2'];
-
-      const result = isSelectedHierarchy(namespaces, selectedHierarchy);
-
-      expect(result).toBeFalsy();
-    });
-
-    test('namespaces array is matching selectedHierarchy array', () => {
-      const namespaces = ['some', 'namespace'];
-      const selectedHierarchy = ['some', 'namespace'];
-
-      const result = isSelectedHierarchy(namespaces, selectedHierarchy);
-
-      expect(result).toBeTruthy();
-    });
-
-    test('namespaces array is matching selectedHierarchy array when selectedHierarchy is bigger', () => {
-      const namespaces = ['some', 'namespace'];
-      const selectedHierarchy = ['some', 'namespace', 'here', 'it', 'is'];
-
-      const result = isSelectedHierarchy(namespaces, selectedHierarchy);
-
-      expect(result).toBeTruthy();
-    });
-  });
-
   describe('resolveStoryHierarchy', () => {
     test('should return array with initial namespace when hierarchySeparator is undefined', () => {
       const result = resolveStoryHierarchy('some.name.item1');