Merge pull request #1679 from storybooks/revert-1640-improve-search-a…

…nd-highlighting

Revert "Improve search and highlighting"

lib/ui/package.json

@@ -19,7 +19,7 @@
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
     "events": "^1.1.1",
-    "@hypnosphi/fuse.js": "^3.0.9",
+    "fuzzysearch": "^1.0.3",
     "global": "^4.3.2",
     "json-stringify-safe": "^5.0.1",
     "keycode": "^2.1.8",

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

@@ -26,7 +26,7 @@ describe('manager.ui.components.left_panel.index', () => {
   test('should render stories only if storiesHierarchy prop exists', () => {
     const selectedKind = 'kk';
     const selectedStory = 'bb';
-    const storiesHierarchy = createHierarchy([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
+    const storiesHierarchy = createHierarchy([{ kind: 'kk', stories: ['bb'] }]);
     const wrap = shallow(
       <LeftPanel
         storiesHierarchy={storiesHierarchy}

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

@@ -34,14 +34,29 @@ function getSelectedNodes(selectedHierarchy) {
     .reduce((nodesMap, node) => ({ ...nodesMap, [createNodeKey(node)]: true }), {});
 }
 
+function getStoryFilterRegex(storyFilter) {
+  if (!storyFilter) {
+    return null;
+  }
+
+  const validFilter = storyFilter.replace(/[$^*()+[\]{}|\\.?<>'"/;`%]/g, '\\$&');
+
+  if (!validFilter) {
+    return null;
+  }
+
+  return new RegExp(`(${validFilter})`, 'i');
+}
+
 class Stories extends React.Component {
   constructor(...args) {
     super(...args);
     this.onToggle = this.onToggle.bind(this);
 
-    const { selectedHierarchy } = this.props;
+    const { selectedHierarchy, storyFilter } = this.props;
 
     this.state = {
+      storyFilter: getStoryFilterRegex(storyFilter),
       overriddenFilteredNodes: {},
       nodes: getSelectedNodes(selectedHierarchy),
     };
@@ -65,6 +80,7 @@ class Stories extends React.Component {
       const selectedNodes = getSelectedNodes(nextSelectedHierarchy);
 
       this.setState(prevState => ({
+        storyFilter: getStoryFilterRegex(nextStoryFilter),
         overriddenFilteredNodes: shouldClearFilteredNodes ? {} : prevState.overriddenFilteredNodes,
         nodes: {
           ...prevState.nodes,
@@ -108,10 +124,11 @@ class Stories extends React.Component {
   }
 
   mapStoriesHierarchy(storiesHierarchy) {
+    const { storyFilter } = this.state;
+
     const treeModel = {
       namespaces: storiesHierarchy.namespaces,
       name: storiesHierarchy.name,
-      highlight: storiesHierarchy.highlight,
     };
 
     if (storiesHierarchy.isNamespace) {
@@ -133,17 +150,18 @@ class Stories extends React.Component {
       treeModel.type = treeNodeTypes.COMPONENT;
 
       treeModel.children = storiesHierarchy.stories.map(story => ({
-        name: story.name,
-        story: story.name,
+        story,
+        storyFilter,
         kind: storiesHierarchy.kind,
-        active: selectedStory === story.name && selectedKind === storiesHierarchy.kind,
+        name: story,
+        active: selectedStory === story && selectedKind === storiesHierarchy.kind,
         type: treeNodeTypes.STORY,
-        highlight: story.highlight,
       }));
     }
 
     treeModel.key = createNodeKey(treeModel);
     treeModel.toggled = this.isToggled(treeModel);
+    treeModel.storyFilter = storyFilter;
 
     return treeModel;
   }
@@ -153,7 +171,7 @@ class Stories extends React.Component {
   }
 
   isFilteredNode(key) {
-    if (!this.props.storyFilter) {
+    if (!this.state.storyFilter) {
       return false;
     }
 

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

@@ -2,8 +2,7 @@ import { shallow, mount } from 'enzyme';
 import React from 'react';
 import Stories from './index';
 import { setContext } from '../../../../../compose';
-import { createHierarchy, prepareStoriesForHierarchy } from '../../../libs/hierarchy';
-import { storyFilter } from '../../../libs/filters';
+import { createHierarchy } from '../../../libs/hierarchy';
 
 const leftClick = { button: 0 };
 
@@ -22,23 +21,20 @@ describe('manager.ui.components.left_panel.stories', () => {
   afterEach(() => setContext(null));
 
   const data = createHierarchy([
-    { kind: 'a', name: 'a', namespaces: ['a'], stories: ['a1', 'a2'] },
-    { kind: 'b', name: 'b', namespaces: ['b'], stories: ['b1', 'b2'] },
+    { kind: 'a', stories: ['a1', 'a2'] },
+    { kind: 'b', stories: ['b1', 'b2'] },
   ]);
-
-  const initialData = [
-    {
-      kind: 'some.name.item1',
-      stories: ['a1', 'a2'],
-    },
-    {
-      kind: 'another.space.20',
-      stories: ['b1', 'b2'],
-    },
-  ];
-
-  const dataWithoutSeparator = createHierarchy(prepareStoriesForHierarchy(initialData));
-  const dataWithSeparator = createHierarchy(prepareStoriesForHierarchy(initialData, '\\.'));
+  const dataWithoutSeparator = createHierarchy([
+    { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+    { kind: 'another.space.20', stories: ['b1', 'b2'] },
+  ]);
+  const dataWithSeparator = createHierarchy(
+    [
+      { kind: 'some.name.item1', stories: ['a1', 'a2'] },
+      { kind: 'another.space.20', stories: ['b1', 'b2'] },
+    ],
+    '\\.'
+  );
 
   describe('render', () => {
     test('should render stories - empty', () => {
@@ -223,24 +219,13 @@ describe('manager.ui.components.left_panel.stories', () => {
     });
 
     test('should render stories with with highlighting when storiesFilter is provided', () => {
-      const filter = 'th';
-      const selectedKind = 'another.space.20';
-
-      const filteredData = storyFilter(
-        prepareStoriesForHierarchy(initialData, '\\.'),
-        filter,
-        selectedKind
-      );
-
-      const filteredDataHierarchy = createHierarchy(filteredData);
-
       const wrap = mount(
         <Stories
-          storiesHierarchy={filteredDataHierarchy}
-          selectedKind={selectedKind}
+          storiesHierarchy={dataWithSeparator}
+          selectedKind="another.space.20"
           selectedStory="b2"
           selectedHierarchy={['another', 'space', '20']}
-          storyFilter={filter}
+          storyFilter="th"
         />
       );
 

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

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import { MenuLink } from '../../../containers/routed_link';
 import MenuItem from '../../menu_item';
 import treeNodeTypes from './tree_node_type';
-import { highlightNode } from './tree_decorators_utils';
 
 function noop() {}
 
@@ -81,26 +80,56 @@ ContainerDecorator.propTypes = {
   onClick: PropTypes.func.isRequired,
 };
 
-function HeaderDecorator(props) {
-  const { style, node, ...restProps } = props;
+class HeaderDecorator extends React.Component {
+  decorateNameMatchedToSearchTerm(node, style) {
+    const { storyFilter, name } = node;
+
+    if (!storyFilter) {
+      return name;
+    }
+
+    const nameParts = name.split(storyFilter);
+
+    return nameParts.filter(part => part).map((part, index) => {
+      const key = `${part}-${index}`;
+
+      if (!storyFilter.test(part)) {
+        return (
+          <span key={key}>
+            {part}
+          </span>
+        );
+      }
+
+      return (
+        <strong key={key} style={style.highLightText}>
+          {part}
+        </strong>
+      );
+    });
+  }
 
-  let newStyle = style;
+  render() {
+    const { style, node, ...restProps } = this.props;
 
-  if (node.type === treeNodeTypes.STORY) {
-    newStyle = {
-      ...style,
-      title: null,
-    };
-  }
+    let newStyle = style;
 
-  const name = highlightNode(node, style);
+    if (node.type === treeNodeTypes.STORY) {
+      newStyle = {
+        ...style,
+        title: null,
+      };
+    }
 
-  const newNode = {
-    ...node,
-    name,
-  };
+    const name = this.decorateNameMatchedToSearchTerm(node, style);
 
-  return <decorators.Header style={newStyle} node={newNode} {...restProps} />;
+    const newNode = {
+      ...node,
+      name,
+    };
+
+    return <decorators.Header style={newStyle} node={newNode} {...restProps} />;
+  }
 }
 
 HeaderDecorator.propTypes = {
@@ -110,7 +139,7 @@ HeaderDecorator.propTypes = {
   }).isRequired,
   node: PropTypes.shape({
     type: PropTypes.oneOf([treeNodeTypes.NAMESPACE, treeNodeTypes.COMPONENT, treeNodeTypes.STORY]),
-    highlight: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+    storyFilter: PropTypes.instanceOf(RegExp),
   }).isRequired,
 };