feat(voiceSearch): add voice search widget (#2316)

* feat(voiceSearch): WIP add VoiceSearch component * feat(voiceSearch): WIP add voice search helper * feat(voiceSearch): WIP adding connector * Update packages/react-instantsearch-dom/src/components/VoiceSearch.tsx Co-Authored-By: eunjae-lee <karis612@gmail.com> * Update packages/react-instantsearch-dom/src/components/VoiceSearch.tsx Co-Authored-By: eunjae-lee <karis612@gmail.com> * Update packages/react-instantsearch-dom/src/components/VoiceSearch.tsx Co-Authored-By: eunjae-lee <karis612@gmail.com> * Update packages/react-instantsearch-dom/src/components/VoiceSearch.tsx Co-Authored-By: eunjae-lee <karis612@gmail.com> * Update packages/react-instantsearch-dom/src/components/VoiceSearch.tsx Co-Authored-By: eunjae-lee <karis612@gmail.com> * Apply suggestions from code review Co-Authored-By: eunjae-lee <karis612@gmail.com> * feat(voiceSearch): rename variables * feat(voiceSearch): rename helper to voiceSearch * type(voiceSearch): fix lint error * test(voiceSearch): add tests for component * chore(voiceSearch): fix lint error * chore(voiceSearch): disable tslint for unused parameter * test(voiceSearch): add stories * fix(voiceSearch): fix wrong props * chore(voiceSearch): fix lint error * test(voiceSearch): add story for custom button * chore(voiceSearch): change to curly brace * Apply suggestions from code review Co-Authored-By: eunjae-lee <karis612@gmail.com> * chore(voiceSearch): remove comments since the config is now global * chore(voiceSearch): add default value to searchAsYouSpeak and put typing for setSearchAsYouSpeak * chore(voiceSearch): clean up svg * fix(voiceSearch): fix class name for status * chore(voiceSearch): remove unnecessary comment * test(voiceSearch): remove unused test case * test(voiceSearch): change way to match snapshot * chore(voiceSearch): remove 'else' * chore(voiceSearch): remove unnecessary $ * test(voiceSearch): add stories * fix(voiceSearch): provide one voiceSearchHelper instancer per component * refactor(voiceSearch): move voiceSearchHelper-related logic from the connector to the component * test(voiceSearch): fix tests for the component * test(voiceSearch): add tests for VoiceSearchHelper (copied from IS.js) * chore(voiceSearch): increase limit of bundlesize * test(voiceSearch): improve tests * chore(voiceSearch): increase bundlesize limit * chore(voiceSearch): increase limit of bundlesize * Update packages/react-instantsearch-dom/src/components/VoiceSearch.tsx Co-Authored-By: eunjae-lee <karis612@gmail.com> * chore(voiceSearch): update voiceSearchHelper from IS.js * chore(voiceSearch): change code using Fragment * type(voiceSearch): Update packages/react-instantsearch-core/src/types/translatable.ts Co-Authored-By: Samuel Vaillant <samuel.vllnt@gmail.com> * chore(voiceSearch): use defaultProps * fix(types): improve types for voiceSearch * test(voiceSearch): improve test * fix(voiceSearch): rename buttonComponent to buttonTextComponent * chore(voiceSearch): change the path to import directly from source * type(voiceSearch): add accessibility modifier to defaultProps * test(voiceSearch): extract styles from stories to util.css * test(voiceSearch): clean up mocks after each test * feat(voiceSearch): add dispose to voiceSearchHelper * chore(voiceSearch): rename voiceSearchHelper to createVoiceSearchHelper * feat(voiceSearch): dispose voiceSearchHelper on unmount * chore(voiceSearch): extract svg element to a component to remove duplicates * type(voiceSearch): add accessibility modifier * chore: update bundlesize * chore: adjust bundlesize * test(voiceSearch): fix wrong cleanup * fix(voiceSearch): use defaultProps for searchAsYouSpeak * fix(types): introduce Status, ErrorCode types * fix(voiceSearch): initialize voiceSearchHelper at componentDidMount * fix(voiceSearch): stopping voice recognition also removes event listeners * chore(voiceSearch): rename index.js to index.ts and modify rollup config * chore(voiceSearch): fix wrong prop name on story * feat(voiceSearch): export createVoiceSearchHelper for users to create custom component
algolia · Jun 4, 2019 · 0e3b124 · 0e3b124
1 parent 7f5b57f
commit 0e3b124
Show file tree

Hide file tree

Showing 14 changed files with 925 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -134,15 +134,15 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Dom.min.js",
-      "maxSize": "62.00 kB"
+      "maxSize": "64.20 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
       "maxSize": "41.50 kB"
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",
-      "maxSize": "63.00 kB"
+      "maxSize": "64.00 kB"
     },
     {
       "path": "packages/react-instantsearch-dom-maps/dist/umd/ReactInstantSearchDOMMaps.min.js",

diff --git a/packages/react-instantsearch-core/rollup.config.js b/packages/react-instantsearch-core/rollup.config.js
@@ -38,7 +38,7 @@ const plugins = [
 ];
 
 const createConfiguration = ({ name, minify = false } = {}) => ({
-  input: 'src/index.js',
+  input: 'src/index.ts',
   external: ['react'],
   output: {
     file: `dist/umd/ReactInstantSearch${name}${minify ? '.min' : ''}.js`,

diff --git a/...ges/react-instantsearch-core/src/index.js → ...ges/react-instantsearch-core/src/index.ts b/...ges/react-instantsearch-core/src/index.js → ...ges/react-instantsearch-core/src/index.ts
@@ -51,3 +51,6 @@ export {
   default as connectToggleRefinement,
 } from './connectors/connectToggleRefinement';
 export { default as connectHitInsights } from './connectors/connectHitInsights';
+
+// Types
+export * from './types';
diff --git a/packages/react-instantsearch-core/src/types/index.ts b/packages/react-instantsearch-core/src/types/index.ts
@@ -0,0 +1 @@
+export * from './translatable';
diff --git a/packages/react-instantsearch-core/src/types/translatable.ts b/packages/react-instantsearch-core/src/types/translatable.ts
@@ -0,0 +1 @@
+export type Translate = (key: string, ...params: any[]) => string;
diff --git a/packages/react-instantsearch-dom/src/components/VoiceSearch.tsx b/packages/react-instantsearch-dom/src/components/VoiceSearch.tsx
@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import { translatable, Translate } from 'react-instantsearch-core';
+import { createClassNames } from '../core/utils';
+import createVoiceSearchHelper, {
+  VoiceSearchHelper,
+  VoiceListeningState,
+  Status,
+  ErrorCode,
+} from '../lib/voiceSearchHelper';
+const cx = createClassNames('VoiceSearch');
+
+type InnerComponentProps = {
+  status: Status;
+  errorCode?: ErrorCode;
+  isListening: boolean;
+  transcript: string;
+  isSpeechFinal: boolean;
+  isBrowserSupported: boolean;
+};
+
+type VoiceSearchProps = {
+  searchAsYouSpeak: boolean;
+  refine: (query: string) => void;
+  translate: Translate;
+  buttonTextComponent: React.FC<InnerComponentProps>;
+  statusComponent: React.FC<InnerComponentProps>;
+};
+
+const ButtonSvg = ({ children }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    {children}
+  </svg>
+);
+
+const DefaultButtonText: React.FC<InnerComponentProps> = ({
+  status,
+  errorCode,
+  isListening,
+}) => {
+  return status === 'error' && errorCode === 'not-allowed' ? (
+    <ButtonSvg>
+      <line x1="1" y1="1" x2="23" y2="23" />
+      <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" />
+      <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </ButtonSvg>
+  ) : (
+    <ButtonSvg>
+      <path
+        d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"
+        fill={isListening ? 'currentColor' : ''}
+      />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </ButtonSvg>
+  );
+};
+
+const DefaultStatus: React.FC<InnerComponentProps> = ({ transcript }) => (
+  <p>{transcript}</p>
+);
+
+class VoiceSearch extends Component<VoiceSearchProps, VoiceListeningState> {
+  protected static defaultProps = {
+    searchAsYouSpeak: false,
+    buttonTextComponent: DefaultButtonText,
+    statusComponent: DefaultStatus,
+  };
+  private voiceSearchHelper?: VoiceSearchHelper;
+
+  public componentDidMount() {
+    const { searchAsYouSpeak, refine } = this.props;
+    this.voiceSearchHelper = createVoiceSearchHelper({
+      searchAsYouSpeak,
+      onQueryChange: query => refine(query),
+      onStateChange: () => {
+        this.setState(this.voiceSearchHelper!.getState());
+      },
+    });
+    this.setState(this.voiceSearchHelper.getState());
+  }
+
+  public render() {
+    if (!this.voiceSearchHelper) {
+      return null;
+    }
+
+    const { status, transcript, isSpeechFinal, errorCode } = this.state;
+    const { isListening, isBrowserSupported } = this.voiceSearchHelper;
+    const {
+      translate,
+      buttonTextComponent: ButtonTextComponent,
+      statusComponent: StatusComponent,
+    } = this.props;
+    const innerProps: InnerComponentProps = {
+      status,
+      errorCode,
+      isListening: isListening(),
+      transcript,
+      isSpeechFinal,
+      isBrowserSupported: isBrowserSupported(),
+    };
+
+    return (
+      <div className={cx('')}>
+        <button
+          className={cx('button')}
+          type="button"
+          title={
+            isBrowserSupported()
+              ? translate('buttonTitle')
+              : translate('disabledButtonTitle')
+          }
+          onClick={this.onClick}
+          disabled={!isBrowserSupported()}
+        >
+          <ButtonTextComponent {...innerProps} />
+        </button>
+        <div className={cx('status')}>
+          <StatusComponent {...innerProps} />
+        </div>
+      </div>
+    );
+  }
+
+  public componentWillUnmount() {
+    if (this.voiceSearchHelper) {
+      this.voiceSearchHelper.dispose();
+    }
+  }
+
+  private onClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (!this.voiceSearchHelper) {
+      return;
+    }
+    event.currentTarget.blur();
+    const { toggleListening } = this.voiceSearchHelper;
+    toggleListening();
+  };
+}
+
+export default translatable({
+  buttonTitle: 'Search by voice',
+  disabledButtonTitle: 'Search by voice (not supported on this browser)',
+})(VoiceSearch);
diff --git a/packages/react-instantsearch-dom/src/components/__tests__/VoiceSearch.tsx b/packages/react-instantsearch-dom/src/components/__tests__/VoiceSearch.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import VoiceSearch from '../VoiceSearch';
+
+const mockGetState = jest.fn().mockImplementation(() => ({}));
+const mockIsBrowserSupported = jest.fn().mockImplementation(() => true);
+const mockIsListening = jest.fn();
+const mockToggleListening = jest.fn();
+const mockDispose = jest.fn();
+
+jest.mock('../../lib/voiceSearchHelper', () => {
+  return () => {
+    return {
+      getState: mockGetState,
+      isBrowserSupported: mockIsBrowserSupported,
+      isListening: mockIsListening,
+      toggleListening: mockToggleListening,
+      dispose: mockDispose,
+    };
+  };
+});
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('VoiceSearch', () => {
+  afterEach(() => {
+    mockGetState.mockImplementation(() => ({}));
+    mockIsBrowserSupported.mockImplementation(() => true);
+    mockIsListening.mockClear();
+    mockToggleListening.mockClear();
+  });
+
+  describe('button', () => {
+    it('calls toggleListening when button is clicked', () => {
+      const wrapper = mount(<VoiceSearch />);
+      wrapper.find('button').simulate('click');
+      expect(mockToggleListening).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Rendering', () => {
+    it('with default props', () => {
+      const wrapper = mount(<VoiceSearch />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('with custom component for button with isListening: false', () => {
+      const customButtonText = ({ isListening }) =>
+        isListening ? 'Stop' : 'Start';
+
+      const wrapper = mount(
+        <VoiceSearch buttonTextComponent={customButtonText} />
+      );
+      expect(wrapper.find('button').text()).toBe('Start');
+    });
+
+    it('with custom component for button with isListening: true', () => {
+      const customButtonText = ({ isListening }) =>
+        isListening ? 'Stop' : 'Start';
+      mockIsListening.mockImplementation(() => true);
+
+      const wrapper = mount(
+        <VoiceSearch buttonTextComponent={customButtonText} />
+      );
+      expect(wrapper.find('button').text()).toBe('Stop');
+    });
+
+    it('renders a disabled button when the browser is not supported', () => {
+      mockIsBrowserSupported.mockImplementation(() => false);
+      const wrapper = mount(<VoiceSearch />);
+      expect(wrapper.find('button').prop('title')).toBe(
+        'Search by voice (not supported on this browser)'
+      );
+      expect(wrapper.find('button').prop('disabled')).toBe(true);
+    });
+
+    it('with custom template for status', () => {
+      const customStatus = ({
+        status,
+        errorCode,
+        isListening,
+        transcript,
+        isSpeechFinal,
+        isBrowserSupported,
+      }) => (
+        <div>
+          <p>status: {status}</p>
+          <p>errorCode: {errorCode}</p>
+          <p>isListening: {isListening ? 'true' : 'false'}</p>
+          <p>transcript: {transcript}</p>
+          <p>isSpeechFinal: {isSpeechFinal ? 'true' : 'false'}</p>
+          <p>isBrowserSupported: {isBrowserSupported ? 'true' : 'false'}</p>
+        </div>
+      );
+
+      mockIsListening.mockImplementation(() => true);
+      mockGetState.mockImplementation(() => ({
+        status: 'recognizing',
+        transcript: 'Hello',
+        isSpeechFinal: false,
+        errorCode: undefined,
+      }));
+
+      const wrapper = mount(<VoiceSearch statusComponent={customStatus} />);
+      expect(wrapper.find('.ais-VoiceSearch-status')).toMatchSnapshot();
+    });
+
+    it('calls voiceSearchHelper.dispose() on unmount', () => {
+      const wrapper = mount(<VoiceSearch />);
+      wrapper.find('button').simulate('click');
+      wrapper.unmount();
+      expect(mockDispose).toHaveBeenCalledTimes(1);
+    });
+  });
+});