diff --git a/lib/ui/package.json b/lib/ui/package.json index 2c776f29a061..40176cdad273 100644 --- a/lib/ui/package.json +++ b/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", diff --git a/lib/ui/src/modules/ui/components/search_box.js b/lib/ui/src/modules/ui/components/search_box.js index 657618b55658..2a50d80769b4 100644 --- a/lib/ui/src/modules/ui/components/search_box.js +++ b/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 ( -
+ // eslint-disable-next-line jsx-a11y/interactive-supports-focus +
clickHandler(i)} + > {val.value} {val.type === 'story' ? `in ${val.kind}` : 'Kind'} diff --git a/lib/ui/src/modules/ui/components/search_box.test.js b/lib/ui/src/modules/ui/components/search_box.test.js index 97915daedb91..9d54bf57a765 100644 --- a/lib/ui/src/modules/ui/components/search_box.test.js +++ b/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( + + ); + + 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(); + }); }); }); diff --git a/package.json b/package.json index f26e56ad1492..824a05d649e6 100644 --- a/package.json +++ b/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",