Move decorators to separate file

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

@@ -1,8 +1,9 @@
-import { Treebeard, decorators } from 'react-treebeard';
+import { Treebeard } from 'react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { IoFolder, IoDocumentText, IoCode } from 'react-icons/lib/io';
-import { baseFonts } from '../theme';
+import treeNodeTypes from './tree_node_type';
+import treeDecorators from './tree_decorators';
+import { baseFonts } from '../../theme';
 
 const namespaceSeparator = '@';
 
@@ -77,75 +78,6 @@ const treeStyle = {
   },
 };
 
-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,
-  };
-
-  let Icon = IoCode;
-
-  if (node.type === 'namespace') {
-    Icon = IoFolder;
-  } else if (node.type === 'component') {
-    Icon = IoDocumentText;
-  } else if (node.type === 'story') {
-    Icon = IoCode;
-  }
-
-  if (!node.children || !node.children.length) {
-    newStyleTitle.fontSize = '13px';
-  }
-
-  return (
-    <div style={style.base}>
-      {Icon && <Icon color="7d8890" />}
-      <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,
-};
-
-const treeDecorators = {
-  ...decorators,
-  Header: HeaderDecorator,
-  Container: ContainerDecorator,
-};
-
 class Stories extends React.Component {
   constructor(...args) {
     super(...args);
@@ -210,7 +142,7 @@ class Stories extends React.Component {
 
     if (storiesHierarchy.isNamespace) {
       treeModel.name = storiesHierarchy.current;
-      treeModel.type = 'namespace';
+      treeModel.type = treeNodeTypes.NAMESPACE;
 
       if (storiesHierarchy.map.size > 0) {
         treeModel.children = [];
@@ -226,14 +158,14 @@ class Stories extends React.Component {
 
       treeModel.name = storiesHierarchy.name;
       treeModel.kind = storiesHierarchy.kind;
-      treeModel.type = 'component';
+      treeModel.type = treeNodeTypes.COMPONENT;
 
       treeModel.children = storiesHierarchy.stories.map(story => ({
         kind: storiesHierarchy.kind,
         story,
         name: story,
         active: selectedStory === story && selectedKind === storiesHierarchy.kind,
-        treeModel: 'story',
+        type: treeNodeTypes.STORY,
       }));
     }
 

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

@@ -1,7 +1,7 @@
 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', () => {

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

@@ -0,0 +1,74 @@
+import { decorators } from '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_node_type.js

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