Merge pull request #1697 from storybooks/original-react-fuzzy

Search box: make found options selectable with click

lib/ui/package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@hypnosphi/fuse.js": "^3.0.9",
     "@storybook/components": "^3.2.7",
-    "@storybook/react-fuzzy": "^0.4.0",
     "babel-runtime": "^6.23.0",
     "deep-equal": "^1.0.1",
     "events": "^1.1.1",
@@ -30,6 +29,7 @@
     "podda": "^1.2.2",
     "prop-types": "^15.5.10",
     "qs": "^6.4.0",
+    "react-fuzzy": "^0.4.1",
     "react-icons": "^2.2.5",
     "react-inspector": "^2.1.1",
     "react-komposer": "^2.0.0",

lib/ui/src/modules/ui/components/search_box.js

@@ -2,7 +2,7 @@ import { document } from 'global';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactModal from 'react-modal';
-import FuzzySearch from '@storybook/react-fuzzy';
+import FuzzySearch from 'react-fuzzy';
 
 import { baseFonts } from '@storybook/components';
 
@@ -48,11 +48,18 @@ const formatStories = stories => {
   return formattedStories;
 };
 
-const suggestionTemplate = (props, state, styles) =>
+const suggestionTemplate = (props, state, styles, clickHandler) =>
   state.results.map((val, i) => {
     const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
     return (
-      <div key={val.value} style={style}>
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+      <div
+        role="option"
+        aria-selected={state.selectedIndex === i}
+        key={val.value}
+        style={style}
+        onClick={() => clickHandler(i)}
+      >
         {val.value}
         <span style={{ float: 'right', opacity: 0.5 }}>
           {val.type === 'story' ? `in ${val.kind}` : 'Kind'}

lib/ui/src/modules/ui/components/search_box.test.js

@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import ReactModal from 'react-modal';
-import FuzzySearch from '@storybook/react-fuzzy';
+import FuzzySearch from 'react-fuzzy';
 
 import SearchBox from './search_box';
 
@@ -95,5 +95,30 @@ describe('manager.ui.components.search_box', () => {
       expect(onSelectStory).toHaveBeenCalledWith('b', 'a');
       expect(onClose).toHaveBeenCalled();
     });
+
+    test('should handle selecting a story with click', () => {
+      const stories = [
+        {
+          kind: 'a',
+          stories: ['b', 'c'],
+        },
+      ];
+      const onSelectStory = jest.fn();
+      const onClose = jest.fn();
+      const wrap = shallow(
+        <SearchBox onSelectStory={onSelectStory} onClose={onClose} stories={stories} />
+      );
+
+      const modal = wrap.find(FuzzySearch).dive();
+      modal.find('input').simulate('change', {
+        target: { value: 'b' },
+      });
+
+      const option = modal.findWhere(el => el.key() === 'b');
+      option.simulate('click');
+
+      expect(onSelectStory).toHaveBeenCalledWith('a', 'b');
+      expect(onClose).toHaveBeenCalled();
+    });
   });
 });

package.json

@@ -61,7 +61,7 @@
     "husky": "^0.14.3",
     "jest": "^20.0.4",
     "jest-enzyme": "^3.6.1",
-    "lerna": "2.0.0",
+    "lerna": "2.1.0",
     "lint-staged": "^4.0.2",
     "lodash": "^4.17.4",
     "nodemon": "^1.11.0",