@untemps/react-vocal 1.7.37 → 2.0.0-beta.10

package/jest/jest.setup.js

@@ -1,72 +0,0 @@
-import '@testing-library/jest-dom/extend-expect'
-import { toBeInTheDocument, toHaveAttribute, toHaveStyle } from '@testing-library/jest-dom/matchers'
-
-expect.extend({ toBeInTheDocument, toHaveAttribute, toHaveStyle })
-
-Object.defineProperty(global, 'navigator', {
-	value: { userAgent: 'node.js' },
-	writable: true,
-	configurable: true,
-})
-global.PermissionStatus = jest.fn(() => ({
-	state: 'granted',
-	addEventListener: jest.fn(),
-}))
-const status = new PermissionStatus()
-global.Permissions = jest.fn(() => ({
-	query: jest.fn().mockResolvedValue(status),
-}))
-Object.defineProperty(global.navigator, 'permissions', {
-	value: new Permissions(),
-	writable: true,
-	configurable: true,
-})
-global.MediaDevices = jest.fn(() => ({
-	getUserMedia: jest.fn().mockResolvedValue('foo'),
-}))
-Object.defineProperty(global.navigator, 'mediaDevices', {
-	value: new MediaDevices(),
-	writable: true,
-	configurable: true,
-})
-global.SpeechGrammarList = jest.fn(() => ({
-	length: 0,
-}))
-global.SpeechRecognition = jest.fn(() => {
-	const handlers = {}
-	return {
-		addEventListener: jest.fn((type, callback) => {
-			handlers[type] = callback
-		}),
-		removeEventListener: jest.fn(),
-		dispatchEvent: jest.fn(),
-		start: jest.fn(() => {
-			!!handlers.start && handlers.start()
-		}),
-		stop: jest.fn(() => {
-			!!handlers.end && handlers.end()
-		}),
-		abort: jest.fn(() => {
-			!!handlers.end && handlers.end()
-		}),
-		say: jest.fn((sentence) => {
-			!!handlers.speechstart && handlers.speechstart()
-
-			const resultEvent = new Event('result')
-			resultEvent.resultIndex = 0
-			resultEvent.results = [
-				[
-					{
-						transcript: sentence,
-					},
-				],
-			]
-			if (sentence) {
-				!!handlers.result && handlers.result(resultEvent)
-			} else {
-				!!handlers.nomatch && handlers.nomatch()
-			}
-			!!handlers.speechend && handlers.speechend()
-		}),
-	}
-})

package/rollup.config.js

@@ -1,42 +0,0 @@
-import babel from '@rollup/plugin-babel'
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import filesize from 'rollup-plugin-sizes'
-import { terser } from 'rollup-plugin-terser'
-import visualizer from 'rollup-plugin-visualizer'
-
-const production = process.env.NODE_ENV === 'production'
-const target = process.env.BABEL_ENV
-
-export default {
-	input: 'src/index.js',
-	output: {
-		name: 'react-vocal',
-		file: {
-			cjs: 'dist/index.js',
-			es: 'dist/index.es.js',
-			umd: 'dist/index.umd.js',
-		}[target],
-		format: target,
-		globals: {
-			react: 'React',
-			'react-dom': 'ReactDOM',
-			'prop-types': 'PropTypes',
-		},
-		sourcemap: 'inline',
-	},
-	external: ['react', 'react-dom', 'prop-types', '@babel/plugin-transform-runtime'],
-	plugins: [
-		babel({
-			exclude: 'node_modules/**',
-			babelHelpers: 'bundled',
-		}),
-		resolve(),
-		commonjs(),
-		production && terser(),
-		filesize(),
-		visualizer({
-			sourcemap: true
-		})
-	],
-}

package/src/components/Icon.js

@@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const Icon = ({ color, activeColor, isActive }) => {
-	return (
-		<svg
-			data-testid="__icon-root__"
-			xmlns="http://www.w3.org/2000/svg"
-			width="100%"
-			height="100%"
-			viewBox="0 0 24 24"
-		>
-			<g>
-				<path
-					data-testid="__icon-path__"
-					fill={color}
-					d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
-				/>
-				{isActive && <circle data-testid="__icon-active__" fill={activeColor} cx="16" cy="4" r="4" />}
-			</g>
-		</svg>
-	)
-}
-
-Icon.propTypes = {
-	color: PropTypes.string,
-	activeColor: PropTypes.string,
-	isActive: PropTypes.bool,
-}
-
-Icon.defaultProps = {
-	color: 'black',
-	activeColor: 'red',
-	isActive: false,
-}
-
-export default Icon

package/src/components/Vocal.js

@@ -1,235 +0,0 @@
-import React, { cloneElement, isValidElement, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
-import { isFunction } from '@untemps/utils/function/isFunction'
-
-import useVocal from '../hooks/useVocal'
-import useTimeout from '../hooks/useTimeout'
-import useCommands from '../hooks/useCommands'
-
-import Icon from './Icon'
-
-const Vocal = ({
-	children,
-	commands,
-	lang,
-	grammars,
-	timeout,
-	ariaLabel,
-	style,
-	className,
-	outlineStyle,
-	onStart,
-	onEnd,
-	onSpeechStart,
-	onSpeechEnd,
-	onResult,
-	onError,
-	onNoMatch,
-	__rsInstance,
-}) => {
-	const buttonRef = useRef(null)
-	const [isListening, setIsListening] = useState(false)
-
-	const [, { start, stop, subscribe, unsubscribe }] = useVocal(lang, grammars, __rsInstance)
-	const triggerCommand = useCommands(commands)
-
-	const _onEnd = (e) => {
-		stopTimer()
-		stopRecognition()
-
-		unsubscribe('start', _onStart)
-		unsubscribe('end', _onEnd)
-		unsubscribe('speechstart', _onSpeechStart)
-		unsubscribe('speechend', _onSpeechEnd)
-		unsubscribe('result', _onResult)
-		unsubscribe('error', _onError)
-		unsubscribe('nomatch', _onNoMatch)
-
-		!!onEnd && onEnd(e)
-	}
-
-	const [startTimer, stopTimer] = useTimeout(_onEnd, timeout)
-
-	const startRecognition = () => {
-		try {
-			setIsListening(true)
-
-			subscribe('start', _onStart)
-			subscribe('end', _onEnd)
-			subscribe('speechstart', _onSpeechStart)
-			subscribe('speechend', _onSpeechEnd)
-			subscribe('result', _onResult)
-			subscribe('error', _onError)
-			subscribe('nomatch', _onNoMatch)
-
-			start()
-		} catch (error) {
-			_onError(error)
-		}
-	}
-
-	const stopRecognition = () => {
-		try {
-			setIsListening(false)
-
-			stop()
-		} catch (error) {
-			!!onError && onError(error)
-		}
-	}
-
-	const _onClick = () => {
-		startRecognition()
-	}
-
-	const _onFocus = () => {
-		if (!className && outlineStyle) {
-			buttonRef.current.style.outline = outlineStyle
-		}
-	}
-
-	const _onBlur = () => {
-		if (!className && outlineStyle) {
-			buttonRef.current.style.outline = 'none'
-		}
-	}
-
-	const _onStart = (e) => {
-		startTimer()
-
-		!!onStart && onStart(e)
-	}
-
-	const _onSpeechStart = (e) => {
-		stopTimer()
-
-		!!onSpeechStart && onSpeechStart(e)
-	}
-
-	const _onSpeechEnd = (e) => {
-		startTimer()
-
-		!!onSpeechEnd && onSpeechEnd(e)
-	}
-
-	const _onResult = (event, result) => {
-		stopTimer()
-		stopRecognition()
-
-		triggerCommand(result)
-
-		!!onResult && onResult(result, event)
-	}
-
-	const _onError = (error) => {
-		stopRecognition()
-
-		!!onError && onError(error)
-	}
-
-	const _onNoMatch = (e) => {
-		stopTimer()
-		stopRecognition()
-
-		!!onNoMatch && onNoMatch(e)
-	}
-
-	const _renderDefault = () => (
-		<button
-			data-testid="__vocal-root__"
-			ref={buttonRef}
-			role="button"
-			aria-label={ariaLabel}
-			style={
-				className
-					? null
-					: {
-							width: 24,
-							height: 24,
-							background: 'none',
-							border: 'none',
-							padding: 0,
-							cursor: !isListening ? 'pointer' : 'default',
-							...style,
-					  }
-			}
-			className={className}
-			onFocus={_onFocus}
-			onBlur={_onBlur}
-			onClick={_onClick}
-		>
-			<Icon isActive={isListening} iconColor="#aaa" />
-		</button>
-	)
-
-	const _renderChildren = (children) => {
-		if (SpeechRecognitionWrapper.isSupported) {
-			if (isFunction(children)) {
-				return children(startRecognition, stopRecognition, isListening)
-			} else if (isValidElement(children)) {
-				return cloneElement(children, {
-					...(!isListening && { onClick: _onClick }),
-				})
-			} else {
-				return _renderDefault()
-			}
-		}
-		return null
-	}
-
-	return _renderChildren(children)
-}
-
-Vocal.propTypes = {
-	/** Defines callbacks to be triggered when keys are detected by the recognition */
-	commands: PropTypes.objectOf(PropTypes.func),
-	/** Defines the language understood by the recognition (https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/lang) */
-	lang: PropTypes.string,
-	/** Defines the grammars understood by the recognition (https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/grammars) */
-	grammars: PropTypes.object,
-	/** Defines the time in ms to wait before discarding the recognition */
-	timeout: PropTypes.number,
-	/** Defines the a11y label for the default button */
-	ariaLabel: PropTypes.string,
-	/** Defines the styles of the default element if className is not specified */
-	style: PropTypes.object,
-	/** Defines the class of the default element */
-	className: PropTypes.string,
-	/** Defines the default style of the focus outline. if null the default behaviour is used */
-	outlineStyle: PropTypes.string,
-	/** Defines the handler called when the recognition starts */
-	onStart: PropTypes.func,
-	/** Defines the handler called when the recognition ends */
-	onEnd: PropTypes.func,
-	/** Defines the handler called when the speech starts */
-	onSpeechStart: PropTypes.func,
-	/** Defines the handler called when the speech ends */
-	onSpeechEnd: PropTypes.func,
-	/** Defines the handler called when a result is returned from te recognition */
-	onResult: PropTypes.func,
-	/** Defines the handler called when an error occurs */
-	onError: PropTypes.func,
-	/** Defines the handler called when no result can be recognized */
-	onNoMatch: PropTypes.func,
-}
-
-Vocal.defaultProps = {
-	commands: null,
-	lang: 'en-US',
-	grammars: null,
-	timeout: 3000,
-	ariaLabel: 'start recognition',
-	style: null,
-	className: null,
-	outlineStyle: '2px solid',
-	onStart: null,
-	onEnd: null,
-	onSpeechStart: null,
-	onSpeechEnd: null,
-	onResult: null,
-	onError: null,
-	onNoMatch: null,
-}
-
-export default Vocal

package/src/components/__tests__/Icon.test.js

@@ -1,42 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import Icon from '../Icon'
-
-const defaultProps = {}
-const getInstance = (props = {}) => <Icon {...defaultProps} {...props} />
-
-describe('Icon', () => {
-	it('matches snapshot', () => {
-		const { asFragment } = render(getInstance())
-		expect(asFragment()).toMatchSnapshot()
-	})
-
-	it('renders component', () => {
-		const { queryByTestId } = render(getInstance())
-		expect(queryByTestId('__icon-root__')).toBeInTheDocument()
-	})
-
-	it('renders component color', () => {
-		const color = 'green'
-		const { queryByTestId } = render(getInstance({ color }))
-		expect(queryByTestId('__icon-path__')).toHaveAttribute('fill', color)
-	})
-
-	it('renders active component', () => {
-		const isActive = true
-		const { queryByTestId } = render(getInstance({ isActive }))
-		expect(queryByTestId('__icon-active__')).toBeInTheDocument()
-	})
-
-	it('renders active component color', () => {
-		const isActive = true
-		const activeColor = 'blue'
-		const { queryByTestId } = render(getInstance({ isActive, activeColor }))
-		expect(queryByTestId('__icon-active__')).toHaveAttribute('fill', activeColor)
-	})
-})

package/src/components/__tests__/Vocal.test.js

@@ -1,273 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react'
-import { waitFor } from '@testing-library/dom'
-import { act, fireEvent, render } from '@testing-library/react'
-import { Vocal as SpeechRecognitionWrapper } from '@untemps/vocal'
-
-import Vocal from '../Vocal'
-
-const defaultProps = {}
-const getInstance = (props = {}, children = null) => (
-	<Vocal {...defaultProps} {...props}>
-		{children}
-	</Vocal>
-)
-
-describe('Vocal', () => {
-	it('matches snapshot', () => {
-		const { asFragment } = render(getInstance())
-		expect(asFragment()).toMatchSnapshot()
-	})
-
-	it('renders default children', () => {
-		const { queryByTestId } = render(getInstance())
-		expect(queryByTestId('__vocal-root__')).toBeInTheDocument()
-	})
-
-	it('renders custom children element', () => {
-		const { queryByTestId } = render(getInstance(null, <div data-testid="__vocal-custom-root__" />))
-		expect(queryByTestId('__vocal-root__')).not.toBeInTheDocument()
-		expect(queryByTestId('__vocal-custom-root__')).toBeInTheDocument()
-	})
-
-	it('renders no children element if SpeechRecognition is not supported', () => {
-		jest.spyOn(SpeechRecognitionWrapper, 'isSupported', 'get').mockReturnValueOnce(false)
-		const { queryByTestId } = render(getInstance(null, <div data-testid="__vocal-custom-root__" />))
-		expect(queryByTestId('__vocal-root__')).not.toBeInTheDocument()
-		expect(queryByTestId('__vocal-custom-root__')).not.toBeInTheDocument()
-		jest.clearAllMocks()
-	})
-
-	it('renders custom children function', () => {
-		const { queryByTestId } = render(getInstance(null, () => <div data-testid="__vocal-custom-root__" />))
-		expect(queryByTestId('__vocal-root__')).not.toBeInTheDocument()
-		expect(queryByTestId('__vocal-custom-root__')).toBeInTheDocument()
-	})
-
-	it('starts recognition with custom children function', async () => {
-		const onStart = jest.fn()
-		const { queryByTestId } = render(
-			getInstance({ onStart }, (start) => <div data-testid="__vocal-custom-root__" onClick={start} />)
-		)
-		await act(async () => {
-			fireEvent.click(queryByTestId('__vocal-custom-root__'))
-			await waitFor(() => expect(onStart).toHaveBeenCalled())
-		})
-	})
-
-	it('stops recognition with custom children function', async () => {
-		const onEnd = jest.fn()
-		const { queryByText } = render(
-			getInstance({ onEnd }, (start, stop) => (
-				<div data-testid="__vocal-custom-root__">
-					<button onClick={start}>start</button>
-					<button onClick={stop}>stop</button>
-				</div>
-			))
-		)
-		await act(async () => {
-			fireEvent.click(queryByText('start'))
-			fireEvent.click(queryByText('stop'))
-			await waitFor(() => expect(onEnd).toHaveBeenCalled())
-		})
-	})
-
-	it('gets recognition status with custom children function', async () => {
-		const onEnd = jest.fn()
-		const { queryByText } = render(
-			getInstance({ onEnd }, (start, stop, isStarted) => (
-				<div data-testid="__vocal-custom-root__">
-					<div>{isStarted ? 'Started' : 'Stopped'}</div>
-					<button onClick={start}>start</button>
-					<button onClick={stop}>stop</button>
-				</div>
-			))
-		)
-		await act(async () => {
-			fireEvent.click(queryByText('start'))
-			await waitFor(() => {
-				expect(queryByText('Started')).toBeInTheDocument()
-			})
-			fireEvent.click(queryByText('stop'))
-			await waitFor(() => {
-				expect(queryByText('Stopped')).toBeInTheDocument()
-			})
-		})
-	})
-
-	it('renders pointer cursor when idle', () => {
-		const { getByTestId } = render(getInstance())
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'pointer' })
-	})
-
-	it('renders default cursor when listening', () => {
-		const { getByTestId } = render(getInstance())
-		fireEvent.click(getByTestId('__vocal-root__'))
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ cursor: 'default' })
-	})
-
-	it('renders outline when focused', () => {
-		const { getByTestId } = render(getInstance())
-		fireEvent.focus(getByTestId('__vocal-root__'))
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ outline: '2px solid' })
-	})
-
-	it('remove outline when blurred', () => {
-		const { getByTestId } = render(getInstance())
-		fireEvent.blur(getByTestId('__vocal-root__'))
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ outline: 'none' })
-	})
-
-	it('not uses style when className is set', () => {
-		const { getByTestId } = render(getInstance({ className: 'foo' }))
-		expect(getByTestId('__vocal-root__')).not.toHaveStyle({ cursor: 'pointer' })
-	})
-
-	it('uses custom styles', () => {
-		const { getByTestId } = render(getInstance({ style: { backgroundColor: 'blue' } }))
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ backgroundColor: 'blue' })
-	})
-
-	it('responds to command', async () => {
-		const callback = jest.fn()
-		const recognition = new SpeechRecognitionWrapper()
-		const commands = { foo: callback }
-		const { getByTestId } = render(getInstance({ __rsInstance: recognition, commands }))
-
-		let flag = false
-		recognition.addEventListener('start', async () => {
-			flag = true
-		})
-
-		await act(async () => {
-			fireEvent.click(getByTestId('__vocal-root__'))
-
-			await waitFor(() => flag)
-
-			recognition.instance.say('Foo')
-			await waitFor(() => expect(callback).toHaveBeenCalledWith('Foo'))
-		})
-	})
-
-	it('triggers onStart handler', async () => {
-		const onStart = jest.fn()
-		const { queryByTestId } = render(getInstance({ onStart }))
-		await act(async () => {
-			fireEvent.click(queryByTestId('__vocal-root__'))
-			await waitFor(() => expect(onStart).toHaveBeenCalled())
-		})
-	})
-
-	it('triggers onResult handler', async () => {
-		const onResult = jest.fn()
-		const recognition = new SpeechRecognitionWrapper()
-		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onResult }))
-
-		let flag = false
-		recognition.addEventListener('start', async () => {
-			flag = true
-		})
-
-		await act(async () => {
-			fireEvent.click(getByTestId('__vocal-root__'))
-
-			await waitFor(() => flag)
-
-			recognition.instance.say('Foo')
-			await waitFor(() => expect(onResult).toHaveBeenCalledWith('Foo', expect.anything()))
-		})
-	})
-
-	it('triggers onNoMatch handler', async () => {
-		const onNoMatch = jest.fn()
-		const recognition = new SpeechRecognitionWrapper()
-		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onNoMatch }))
-
-		let flag = false
-		recognition.addEventListener('start', async () => {
-			flag = true
-		})
-
-		await act(async () => {
-			fireEvent.click(getByTestId('__vocal-root__'))
-
-			await waitFor(() => flag)
-
-			recognition.instance.say(null)
-			await waitFor(() => expect(onNoMatch).toHaveBeenCalled())
-		})
-	})
-
-	it('triggers onSpeechStart handler', async () => {
-		const onSpeechStart = jest.fn()
-		const recognition = new SpeechRecognitionWrapper()
-		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onSpeechStart }))
-
-		let flag = false
-		recognition.addEventListener('start', async () => {
-			flag = true
-		})
-
-		await act(async () => {
-			fireEvent.click(getByTestId('__vocal-root__'))
-
-			await waitFor(() => flag)
-
-			recognition.instance.say('Foo')
-			await waitFor(() => expect(onSpeechStart).toHaveBeenCalled())
-		})
-	})
-
-	it('triggers onSpeechEnd handler', async () => {
-		const onSpeechEnd = jest.fn()
-		const recognition = new SpeechRecognitionWrapper()
-		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onSpeechEnd }))
-
-		let flag = false
-		recognition.addEventListener('start', async () => {
-			flag = true
-		})
-
-		await act(async () => {
-			fireEvent.click(getByTestId('__vocal-root__'))
-
-			await waitFor(() => flag)
-
-			recognition.instance.say('Foo')
-			await waitFor(() => expect(onSpeechEnd).toHaveBeenCalled())
-		})
-	})
-
-	it('triggers onEnd handler after timeout', async () => {
-		const timeout = 100
-		const onEnd = jest.fn()
-		const { getByTestId } = render(getInstance({ timeout, onEnd }))
-		await act(async () => {
-			fireEvent.click(getByTestId('__vocal-root__'))
-			await waitFor(() => expect(onEnd).toHaveBeenCalled(), { timeout: timeout * 2 })
-		})
-	})
-
-	it('triggers onEnd handler after speech', async () => {
-		const onEnd = jest.fn()
-		const recognition = new SpeechRecognitionWrapper()
-		const { getByTestId } = render(getInstance({ __rsInstance: recognition, onEnd }))
-
-		let flag = false
-		recognition.addEventListener('start', async () => {
-			flag = true
-		})
-
-		await act(async () => {
-			fireEvent.click(getByTestId('__vocal-root__'))
-
-			await waitFor(() => flag)
-
-			recognition.instance.say('Foo')
-			await waitFor(() => expect(onEnd).toHaveBeenCalled())
-		})
-	})
-})