+
+
+
+
+
+
+ diff --git a/examples/nextjs-flow/app/websocket/test.tsx b/examples/nextjs-flow/app/websocket/test.tsx deleted file mode 100644 index 3d7b5155..00000000 --- a/examples/nextjs-flow/app/websocket/test.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export function TestComponent() { - return
TEST
; -} diff --git a/examples/remix/.eslintrc.cjs b/examples/remix/.eslintrc.cjs new file mode 100644 index 00000000..05f2e989 --- /dev/null +++ b/examples/remix/.eslintrc.cjs @@ -0,0 +1,84 @@ +/** + * This is intended to be a basic starting point for linting in your app. + * It relies on recommended configs out of the box for simplicity, but you can + * and should modify this configuration to best suit your team's needs. + */ + +/** @type {import('eslint').Linter.Config} */ +module.exports = { + root: true, + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + env: { + browser: true, + commonjs: true, + es6: true, + }, + ignorePatterns: ['!**/.server', '!**/.client'], + + // Base config + extends: ['eslint:recommended'], + + overrides: [ + // React + { + files: ['**/*.{js,jsx,ts,tsx}'], + plugins: ['react', 'jsx-a11y'], + extends: [ + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + 'plugin:jsx-a11y/recommended', + ], + settings: { + react: { + version: 'detect', + }, + formComponents: ['Form'], + linkComponents: [ + { name: 'Link', linkAttribute: 'to' }, + { name: 'NavLink', linkAttribute: 'to' }, + ], + 'import/resolver': { + typescript: {}, + }, + }, + }, + + // Typescript + { + files: ['**/*.{ts,tsx}'], + plugins: ['@typescript-eslint', 'import'], + parser: '@typescript-eslint/parser', + settings: { + 'import/internal-regex': '^~/', + 'import/resolver': { + node: { + extensions: ['.ts', '.tsx'], + }, + typescript: { + alwaysTryTypes: true, + }, + }, + }, + extends: [ + 'plugin:@typescript-eslint/recommended', + 'plugin:import/recommended', + 'plugin:import/typescript', + ], + }, + + // Node + { + files: ['.eslintrc.cjs'], + env: { + node: true, + }, + }, + ], +}; diff --git a/examples/remix/.gitignore b/examples/remix/.gitignore new file mode 100644 index 00000000..80ec311f --- /dev/null +++ b/examples/remix/.gitignore @@ -0,0 +1,5 @@ +node_modules + +/.cache +/build +.env diff --git a/examples/remix/README.md b/examples/remix/README.md new file mode 100644 index 00000000..6c4d2168 --- /dev/null +++ b/examples/remix/README.md @@ -0,0 +1,40 @@ +# Welcome to Remix! + +- 📖 [Remix docs](https://remix.run/docs) + +## Development + +Run the dev server: + +```shellscript +npm run dev +``` + +## Deployment + +First, build your app for production: + +```sh +npm run build +``` + +Then run the app in production mode: + +```sh +npm start +``` + +Now you'll need to pick a host to deploy it to. + +### DIY + +If you're familiar with deploying Node applications, the built-in Remix app server is production-ready. + +Make sure to deploy the output of `npm run build` + +- `build/server` +- `build/client` + +## Styling + +This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information. diff --git a/examples/remix/app/components/MicrophoneSelect.tsx b/examples/remix/app/components/MicrophoneSelect.tsx new file mode 100644 index 00000000..c1b649cd --- /dev/null +++ b/examples/remix/app/components/MicrophoneSelect.tsx @@ -0,0 +1,55 @@ +import { useAudioDevices } from '@speechmatics/browser-audio-input-react'; +import type { ChangeEvent } from 'react'; + +export function MicrophoneSelect({ + setDeviceId, +}: { setDeviceId: (deviceId: string) => void }) { + const devices = useAudioDevices(); + + switch (devices.permissionState) { + case 'prompt': + return ( + + ); + case 'prompting': + return ( + + ); + case 'granted': { + const onChange = (e: ChangeEvent