feat(voiceSearch): add voice search widget

[eunjae-lee]

Summary

This adds a new widget, connector and component for voice search.

Usage

stories.add('default', () => (
  <WrapWithHits
    searchBox={false}
    hasPlayground={true}
    linkedStoryGroup="VoiceSearch"
  >
    <VoiceSearch searchAsYouSpeak={boolean} />
  </WrapWithHits>
)).add('fully customized', () => (
  <WrapWithHits
    searchBox={false}
    hasPlayground={true}
    linkedStoryGroup="VoiceSearch"
  >
    <VoiceSearch
      searchAsYouSpeak={searchAsYouSpeak}
      buttonComponent={ButtonComponent}
      StatusComponent={StatusComponent}
    />
  </WrapWithHits>
));

Checklist

• component
• connector (using connectSearchBox)
• widget
• tests
• stories

[algobot]

Deploy preview for react-instantsearch ready!

Built with commit d0b843d

https://deploy-preview-2316--react-instantsearch.netlify.com

[eunjae-lee]

This is a draft pull request to check if the implementation is okay for connectVoiceSearch and VoiceSearch.tsx before going further. It is not property typed. Here's what's done so far. Please let me know what you think.

VoiceSearch.tsx

This components receives props from connector like

• isBrowserSupported
• isListening
• toggleListening
• voiceListeningState
• searchAsYouSpeak

When user clicks the button, it will execute toggleListening which triggers toggleListeneing of VoiceSearchHelper inside the connector. The function will start a recognition and according to the lifecycle, its state will change. And it will be delivered to the component via voiceListeneingState.

This component also receives these two props.

• buttonComponent
• statusComponent

It is to let user customise the UI like the way we provide templates in InstantSearch.js.

connectVoiceSearch

This is a tricky part. We have VoiceSearchHelper copy&pasted from InstantSearch.js. As we know, it handles SpeechRecognition api. To keep the current structure of widget, connector and component, the instance of VoiceSearchHelper should be inside the connector, so that the connector can deliver the states from the instance to the component.

To achieve this, connectVoiceSearch doesn't export createConnector(...) but a function wrapping it. So VoiceSearchHelper is instantiated inside the function.

For VoiceSearchHelper to notify its internal changes(query or state), two callbacks are being used. In the current draft, the callbacks are set in getProvidedProps which is invoked inside the constructor of the component. And when the state changes, it calls this.context.ais.widgetsManager.update(); to trigger re-render in order to deliver new voiceListeningState to the component. I'm not sure if this is the good way (or aligned in the existing convention).

[Haroenv]

looks good! I haven't tried it out yet, but have some code style comments

[francoischalifour]

Waiting for the connector tests to review everything.

[Haroenv]

looks good, just one small comment about file organisation

[Haroenv]

I can't see the custom button example

[eunjae-lee]

I can't see the custom button example

Right. That's fixed at 9656c5a

All the feedbacks are addressed.