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_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;