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

package/src/components/Vocal.jsx

@@ -1,168 +0,0 @@
-import React, { cloneElement, isValidElement, useRef, useState } from 'react'
-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 = 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,
-	__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()
-		unsubscribeAll()
-		onEnd?.(e)
-	}
-
-	const [startTimer, stopTimer] = useTimeout(_onEnd, timeout)
-
-	const startRecognition = () => {
-		try {
-			setIsListening(true)
-			subscribeAll()
-			start()
-		} catch (error) {
-			_onError(error)
-		}
-	}
-
-	const stopRecognition = () => {
-		try {
-			setIsListening(false)
-			stop()
-		} catch (error) {
-			onError?.(error)
-		}
-	}
-
-	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?.(e)
-	}
-
-	const _onSpeechStart = (e) => {
-		stopTimer()
-		onSpeechStart?.(e)
-	}
-
-	const _onSpeechEnd = (e) => {
-		startTimer()
-		onSpeechEnd?.(e)
-	}
-
-	const _onResult = (event, result) => {
-		stopTimer()
-		stopRecognition()
-		triggerCommand(result)
-		onResult?.(result, event)
-	}
-
-	const _onError = (error) => {
-		stopRecognition()
-		onError?.(error)
-	}
-
-	const _onNoMatch = (e) => {
-		stopTimer()
-		stopRecognition()
-		onNoMatch?.(e)
-	}
-
-	const HANDLERS = {
-		start: _onStart,
-		end: _onEnd,
-		speechstart: _onSpeechStart,
-		speechend: _onSpeechEnd,
-		result: _onResult,
-		error: _onError,
-		nomatch: _onNoMatch,
-	}
-
-	const subscribeAll = () => Object.entries(HANDLERS).forEach(([event, handler]) => subscribe(event, handler))
-	const unsubscribeAll = () => Object.entries(HANDLERS).forEach(([event, handler]) => unsubscribe(event, handler))
-
-	const _renderDefault = () => (
-		<button
-			data-testid="__vocal-root__"
-			ref={buttonRef}
-			role="button"
-			aria-label={ariaLabel}
-			style={
-				className
-					? null
-					: {
-							width: 24,
-							height: 24,
-							backgroundColor: 'transparent', // `background: none` shorthand resets all sub-properties; jsdom 29 + jest-dom v6 don't reflect that correctly via getComputedStyle
-							border: 'none',
-							padding: 0,
-							cursor: !isListening ? 'pointer' : 'default',
-							...style,
-					  }
-			}
-			className={className}
-			onFocus={_onFocus}
-			onBlur={_onBlur}
-			onClick={startRecognition}
-		>
-			<Icon isActive={isListening} color="#aaa" />
-		</button>
-	)
-
-	const _renderChildren = () => {
-		if (SpeechRecognitionWrapper.isSupported) {
-			if (isFunction(children)) {
-				return children(startRecognition, stopRecognition, isListening)
-			} else if (isValidElement(children)) {
-				return cloneElement(children, {
-					...(!isListening && { onClick: startRecognition }),
-				})
-			} else {
-				return _renderDefault()
-			}
-		}
-		return null
-	}
-
-	return _renderChildren()
-}
-
-export default Vocal

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

@@ -1,38 +0,0 @@
-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.jsx

@@ -1,270 +0,0 @@
-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', () => {
-		vi.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()
-		vi.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 = vi.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 = vi.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 = vi.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' } }))
-		// jest-dom v6 + jsdom 29: `div.style.color = 'blue'` reads back as 'blue' but getComputedStyle returns RGB; normalisation no longer bridges the gap
-		expect(getByTestId('__vocal-root__')).toHaveStyle({ backgroundColor: 'rgb(0, 0, 255)' })
-	})
-
-	it('responds to command', async () => {
-		const callback = vi.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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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 = vi.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())
-		})
-	})
-})

package/src/components/__tests__/VocalWithMockedUseVocal.test.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { waitFor } from '@testing-library/dom'
-import { act, fireEvent, render } from '@testing-library/react'
-
-import Vocal from '../Vocal'
-
-vi.mock('../../hooks/useVocal', () => {
-	return {
-		default: () => [
-			null,
-			{
-				subscribe: () => {
-					throw new Error('Foo')
-				},
-			},
-		],
-	}
-})
-
-const defaultProps = {}
-const getInstance = (props = {}, children = null) => (
-	<Vocal {...defaultProps} {...props}>
-		{children}
-	</Vocal>
-)
-
-describe('Vocal', () => {
-	it('triggers onError handler', async () => {
-		const onError = vi.fn()
-		const { queryByTestId } = render(getInstance({ onError }))
-		await act(async () => {
-			fireEvent.click(queryByTestId('__vocal-root__'))
-			await waitFor(() => expect(onError).toHaveBeenCalled())
-		})
-	})
-})
-
-// TODO: Merge this file with Vocal.test.js

package/src/components/__tests__/__snapshots__/Icon.test.jsx.snap

@@ -1,21 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Icon > matches snapshot 1`] = `
-<DocumentFragment>
-  <svg
-    data-testid="__icon-root__"
-    height="100%"
-    viewBox="0 0 24 24"
-    width="100%"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g>
-      <path
-        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"
-        data-testid="__icon-path__"
-        fill="black"
-      />
-    </g>
-  </svg>
-</DocumentFragment>
-`;

package/src/components/__tests__/__snapshots__/Vocal.test.jsx.snap

@@ -1,28 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Vocal > matches snapshot 1`] = `
-<DocumentFragment>
-  <button
-    aria-label="start recognition"
-    data-testid="__vocal-root__"
-    role="button"
-    style="width: 24px; height: 24px; background-color: transparent; border: medium; padding: 0px; cursor: pointer;"
-  >
-    <svg
-      data-testid="__icon-root__"
-      height="100%"
-      viewBox="0 0 24 24"
-      width="100%"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g>
-        <path
-          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"
-          data-testid="__icon-path__"
-          fill="#aaa"
-        />
-      </g>
-    </svg>
-  </button>
-</DocumentFragment>
-`;

package/src/hooks/__tests__/useCommands.test.js

@@ -1,64 +0,0 @@
-import { renderHook } from '@testing-library/react'
-
-import useCommands from '../useCommands'
-
-describe('useCommands', () => {
-	it('returns triggerCommand function', () => {
-		const triggerCommand = renderHook(() => useCommands())
-		expect(triggerCommand).toBeDefined()
-	})
-
-	it('triggers callback mapped to the exact input', () => {
-		const commands = {
-			foo: () => 'bar',
-		}
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		expect(triggerCommand('foo')).toBe('bar')
-	})
-
-	it('passes input as callback argument', () => {
-		const commands = {
-			foo: (input) => input,
-		}
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		expect(triggerCommand('foo')).toBe('foo')
-	})
-
-	describe('Approximate inputs', () => {
-		const value = 'foo'
-		it.each([
-			['Change la bordure en vert', 'Change la bordure en verre', value],
-			['Change la bordure en vert', 'Change la bordure en verres', value],
-			['Change la bordure en vert', 'Change la bordure en vers', value],
-			['Change la bordure en vert', 'Change la bordure en vairs', value],
-			['Change la bordure en vert', 'Changez la bordure en verre', value],
-			['Change la bordure en vert', 'Changez la bodure en verre', null],
-			['Change la bordure en vert', 'Change la bordure en rouge', null],
-			['Change la bordure en vert', 'Change la bordure en verre de rouge', null],
-			['Change la bordure en vert', 'Change la bordure en violet', null],
-			['Change la bordure en vert', 'Modifie la bordure en violet', null],
-		])('triggers callback mapped to approximate inputs', (command, input, expected) => {
-			const commands = {
-				[command]: () => value,
-			}
-			const {
-				result: { current: triggerCommand },
-			} = renderHook(() => useCommands(commands))
-			expect(triggerCommand(input)).toBe(expected)
-		})
-	})
-
-	it('returns null as no command is mapped to the input', () => {
-		const commands = {
-			foo: () => 'bar',
-		}
-		const {
-			result: { current: triggerCommand },
-		} = renderHook(() => useCommands(commands))
-		expect(triggerCommand('gag')).toBeNull()
-	})
-})

package/src/hooks/__tests__/useTimeout.test.js

@@ -1,69 +0,0 @@
-import { renderHook } from '@testing-library/react'
-
-import useTimeout from '../useTimeout'
-
-const wait = (delay) => {
-	return new Promise((resolve) => {
-		setTimeout(resolve, delay)
-	})
-}
-
-describe('useTimeout', () => {
-	it('not triggers handler before calling start', () => {
-		const handler = vi.fn()
-		renderHook(() => useTimeout(handler))
-		expect(handler).not.toHaveBeenCalled()
-	})
-
-	it('not triggers handler before timeout', async () => {
-		const handler = vi.fn()
-		const timeout = 500
-		const {
-			result: {
-				current: [start],
-			},
-		} = renderHook(() => useTimeout(handler, timeout))
-		start()
-		await wait(timeout - 50)
-		expect(handler).not.toHaveBeenCalled()
-	})
-
-	it('triggers handler immediately', async () => {
-		const handler = vi.fn()
-		const {
-			result: {
-				current: [start],
-			},
-		} = renderHook(() => useTimeout(handler))
-		start()
-		await wait(0)
-		expect(handler).toHaveBeenCalled()
-	})
-
-	it('triggers handler after delay', async () => {
-		const handler = vi.fn()
-		const timeout = 500
-		const {
-			result: {
-				current: [start],
-			},
-		} = renderHook(() => useTimeout(handler, timeout))
-		start()
-		await wait(timeout)
-		expect(handler).toHaveBeenCalled()
-	})
-
-	it('not triggers handler if stop is called before timeout', async () => {
-		const handler = vi.fn()
-		const timeout = 500
-		const {
-			result: {
-				current: [start, stop],
-			},
-		} = renderHook(() => useTimeout(handler, timeout))
-		start()
-		stop()
-		await wait(timeout)
-		expect(handler).not.toHaveBeenCalled()
-	})
-})