├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── vocode.svg ├── src ├── App.css ├── App.test.js ├── App.tsx ├── DarkModeProvider.js ├── components │ ├── AudioVisualization.tsx │ ├── Conversation.css │ ├── Conversation.tsx │ └── MicrophoneIcon.tsx ├── index.css ├── index.tsx ├── logo.svg ├── reportWebVitals.js └── setupTests.js └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | .env 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vocode React demo 2 | 3 | This is deprecated - refer to https://replit.com/@vocode/Simple-Conversation for the latest version of the vocode-react-sdk quickstart! 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "marv-frontend", 3 | "version": "0.1.1", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/icons": "^2.0.17", 7 | "@chakra-ui/react": "^2.4.9", 8 | "@emotion/react": "^11.10.5", 9 | "@emotion/styled": "^11.10.5", 10 | "@fontsource/inter": "^4.5.15", 11 | "@fortawesome/fontawesome-svg-core": "^6.3.0", 12 | "@fortawesome/free-solid-svg-icons": "^6.3.0", 13 | "@fortawesome/react-fontawesome": "^0.2.0", 14 | "@react-spring/three": "^9.6.1", 15 | "@react-three/drei": "^9.56.25", 16 | "@react-three/fiber": "^8.11.2", 17 | "@testing-library/jest-dom": "^5.16.5", 18 | "@testing-library/react": "^13.4.0", 19 | "@testing-library/user-event": "^13.5.0", 20 | "@types/react": "^18.0.27", 21 | "@types/react-dom": "^18.0.10", 22 | "@types/three": "^0.149.0", 23 | "@types/wavesurfer.js": "^6.0.3", 24 | "buffer": "^6.0.3", 25 | "debounce": "^1.2.1", 26 | "extendable-media-recorder": "^7.1.2", 27 | "extendable-media-recorder-wav-encoder": "^7.0.82", 28 | "ffmpeg.js": "^4.2.9003", 29 | "framer-motion": "^9.0.1", 30 | "react": "^18.2.0", 31 | "react-device-detect": "^2.2.3", 32 | "react-dom": "^18.2.0", 33 | "react-icons": "^4.7.1", 34 | "react-scripts": "5.0.1", 35 | "react-siriwave": "^2.1.0", 36 | "snake-case": "^3.0.4", 37 | "three": "^0.149.0", 38 | "vocode": "^1.0.36", 39 | "wavesurfer.js": "^6.4.0", 40 | "web-vitals": "^2.1.4" 41 | }, 42 | "scripts": { 43 | "start": "react-scripts start", 44 | "build": "react-scripts build", 45 | "test": "react-scripts test", 46 | "eject": "react-scripts eject" 47 | }, 48 | "eslintConfig": { 49 | "extends": [ 50 | "react-app", 51 | "react-app/jest" 52 | ] 53 | }, 54 | "browserslist": { 55 | "production": [ 56 | ">0.2%", 57 | "not dead", 58 | "not op_mini all" 59 | ], 60 | "development": [ 61 | "last 1 chrome version", 62 | "last 1 firefox version", 63 | "last 1 safari version" 64 | ] 65 | }, 66 | "devDependencies": { 67 | "source-map-loader": "^4.0.1", 68 | "ts-loader": "^9.4.2", 69 | "typescript": "^4.9.5" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vocodedev/vocode-react-demo/c4d61060267fbe1f193cc425d4898c59b9093d53/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 18 | 69 | 70 | 71 | 72 | 73 | 74 | 78 | 79 | 88 | demo 89 | 90 | 91 | 92 |
93 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vocodedev/vocode-react-demo/c4d61060267fbe1f193cc425d4898c59b9093d53/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vocodedev/vocode-react-demo/c4d61060267fbe1f193cc425d4898c59b9093d53/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Vocode", 3 | "name": "Vocode", 4 | "icons": [ 5 | { 6 | "src": "vocode.svg", 7 | "sizes": "64x64 32x32 24x24 16x16 192x192 512x512", 8 | "type": "image/svg+xml", 9 | "purpose": "any" 10 | } 11 | ], 12 | "start_url": ".", 13 | "display": "standalone", 14 | "theme_color": "#000000", 15 | "background_color": "#ffffff" 16 | } 17 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/vocode.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .wavesurfer { 2 | display: none; 3 | visibility: hidden; 4 | } 5 | 6 | /* .wavesurfer > * { 7 | display: none; 8 | visibility: hidden; 9 | } */ 10 | 11 | .App { 12 | text-align: center; 13 | } 14 | 15 | .App-logo { 16 | height: 40vmin; 17 | pointer-events: none; 18 | } 19 | 20 | @media (prefers-reduced-motion: no-preference) { 21 | .App-logo { 22 | animation: App-logo-spin infinite 20s linear; 23 | } 24 | } 25 | 26 | .App-header { 27 | background-color: #282c34; 28 | min-height: 100vh; 29 | display: flex; 30 | flex-direction: column; 31 | align-items: center; 32 | justify-content: center; 33 | font-size: calc(10px + 2vmin); 34 | color: white; 35 | } 36 | 37 | .App-link { 38 | color: #61dafb; 39 | } 40 | 41 | @keyframes App-logo-spin { 42 | from { 43 | transform: rotate(0deg); 44 | } 45 | to { 46 | transform: rotate(360deg); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import "@fontsource/inter"; 2 | import "./App.css"; 3 | 4 | import { 5 | Box, 6 | ChakraProvider, 7 | Flex, 8 | Spacer, 9 | Text, 10 | VStack, 11 | } from "@chakra-ui/react"; 12 | import Conversation from "./components/Conversation"; 13 | 14 | import { isChrome, isMobile, isSafari } from "react-device-detect"; 15 | import { WarningIcon } from "@chakra-ui/icons"; 16 | import { 17 | DeepgramTranscriberConfig, 18 | LLMAgentConfig, 19 | AzureSynthesizerConfig, 20 | VocodeConfig, 21 | EchoAgentConfig, 22 | ChatGPTAgentConfig, 23 | RESTfulUserImplementedAgentConfig, 24 | WebSocketUserImplementedAgentConfig, 25 | } from "vocode"; 26 | 27 | const App = () => { 28 | const transcriberConfig: Omit< 29 | DeepgramTranscriberConfig, 30 | "samplingRate" | "audioEncoding" 31 | > = { 32 | type: "transcriber_deepgram", 33 | chunkSize: 2048, 34 | endpointingConfig: { 35 | type: "endpointing_punctuation_based", 36 | }, 37 | }; 38 | const agentConfig: ChatGPTAgentConfig = { 39 | type: "agent_chat_gpt", 40 | initialMessage: { type: "message_base", text: "Hello!" }, 41 | promptPreamble: 42 | "Vocode is an SDK that allows developers to create voice bots like this one in less than 10 lines of code. The AI is explaining to the human what Vocode is.", 43 | endConversationOnGoodbye: true, 44 | generateResponses: true, 45 | cutOffResponse: {}, 46 | }; 47 | const synthesizerConfig: Omit< 48 | AzureSynthesizerConfig, 49 | "samplingRate" | "audioEncoding" 50 | > = { 51 | type: "synthesizer_azure", 52 | shouldEncodeAsWav: true, 53 | voiceName: "en-US-SteffanNeural", 54 | }; 55 | const vocodeConfig: VocodeConfig = { 56 | apiKey: process.env.REACT_APP_VOCODE_API_KEY || "", 57 | baseUrl: process.env.REACT_APP_BACKEND_URL || "", 58 | }; 59 | 60 | return ( 61 | 62 | {(isMobile || !isChrome) && !isSafari ? ( 63 | 64 | 65 | 66 | This demo works on: Chrome (desktop) and Safari (desktop, mobile) 67 | only! 68 | 69 | 70 | ) : ( 71 | 79 | )} 80 | 81 | ); 82 | }; 83 | 84 | export default App; 85 | -------------------------------------------------------------------------------- /src/DarkModeProvider.js: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Flex, 4 | FormControl, 5 | Spacer, 6 | Switch, 7 | useColorMode, 8 | } from "@chakra-ui/react"; 9 | 10 | const DarkModeProvider = (props) => { 11 | const { colorMode, toggleColorMode } = useColorMode(); 12 | return ( 13 | <> 14 |
15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 26 |
27 | {props.children} 28 | 29 | ); 30 | }; 31 | 32 | export default DarkModeProvider; 33 | -------------------------------------------------------------------------------- /src/components/AudioVisualization.tsx: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | 3 | import React from "react"; 4 | import { isSafari } from "react-device-detect"; 5 | 6 | const AudioVisualization = ({ analyser }: { analyser: AnalyserNode }) => { 7 | const canvasRef = React.useRef(null); 8 | 9 | React.useEffect(() => { 10 | const canvas = canvasRef.current; 11 | if (!canvas) return; 12 | const ctx = canvas.getContext("2d"); 13 | // canvas.width = canvas.height = 1000; 14 | // canvas.width = 1920; 15 | // canvas.height = 1080; 16 | document.body.style.margin = "0"; 17 | document.body.style.overflow = "hidden"; 18 | 19 | let dt = 0; 20 | const start = Date.now(); 21 | 22 | function render() { 23 | if (!ctx || !canvas) return; 24 | dt = Date.now() - start; 25 | ctx.resetTransform(); 26 | ctx.clearRect(0, 0, canvas.width, canvas.height); 27 | ctx.globalAlpha = 1; 28 | ctx.translate(canvas.width / 2, canvas.height / 2); 29 | const max = Math.max(canvas.width, canvas.height); 30 | const grd = ctx.createLinearGradient(-max / 2, 0, max, 0); 31 | grd.addColorStop(0, "hsl(190,100%,15%)"); 32 | grd.addColorStop(1, "hsl(270,100%,15%)"); 33 | ctx.rotate(Math.PI / 4); 34 | ctx.fillStyle = grd; 35 | ctx.fillRect(-max, -max, max * 2, max * 2); 36 | ctx.rotate(-Math.PI / 4); 37 | if (!isSafari) { 38 | ctx.fillStyle = "#99F"; 39 | ctx.beginPath(); 40 | ctx.arc(-50, -50, 170, 0, Math.PI * 2); 41 | ctx.filter = "blur(100px)"; 42 | ctx.globalAlpha = 0.4; 43 | ctx.fill(); 44 | } 45 | ctx.filter = "none"; 46 | ctx.scale(1.3, 1.3); 47 | ctx.globalAlpha = 1; 48 | ctx.strokeStyle = "#FFF"; 49 | ctx.lineWidth = 9; 50 | // ctx.beginPath(); 51 | // ctx.arc(0, 0, 55, 0, Math.PI * 2); 52 | // ctx.stroke(); 53 | // const width = 12; 54 | // const height = 18; 55 | // ctx.lineCap = "round"; 56 | // ctx.moveTo(-width, -height); 57 | // ctx.lineTo(-width, height); 58 | // ctx.stroke(); 59 | // ctx.moveTo(width, -height); 60 | // ctx.lineTo(width, height); 61 | // ctx.stroke(); 62 | var rings = [ 63 | // { 64 | // color: "hsl( 205, 70%, 55% )", 65 | // opacity: 0.03, 66 | // distance: 230, 67 | // variance: 8, 68 | // innerRings: 10, 69 | // lineWidth: 7, 70 | // direction: -1, 71 | // sections: 5, 72 | // }, 73 | // { 74 | // color: "hsl( 205, 70%, 55% )", 75 | // opacity: 0.05, 76 | // distance: 230, 77 | // variance: 7, 78 | // innerRings: 10, 79 | // lineWidth: 10, 80 | // direction: -1, 81 | // sections: 5, 82 | // }, 83 | { 84 | color: "hsl( 205, 60%, 55% )", 85 | opacity: 0.05, 86 | distance: 140, 87 | variance: 5, 88 | innerRings: 10, 89 | lineWidth: 7, 90 | direction: -1, 91 | sections: 4, 92 | }, 93 | { 94 | color: "hsl( 205, 60%, 55% )", 95 | opacity: 0.2, 96 | distance: 140, 97 | variance: 4, 98 | innerRings: 10, 99 | lineWidth: 7, 100 | direction: -1, 101 | sections: 4, 102 | }, 103 | // { 104 | // color: "hsl( 205, 80%, 55% )", 105 | // opacity: 0.15, 106 | // distance: 115, 107 | // variance: 3.5, 108 | // innerRings: 20, 109 | // lineWidth: 3, 110 | // direction: 1, 111 | // sections: 3, 112 | // }, 113 | // { 114 | // color: "hsl( 205, 80%, 55% )", 115 | // opacity: 0.7, 116 | // distance: 120, 117 | // variance: 3, 118 | // innerRings: 10, 119 | // lineWidth: 3, 120 | // direction: 1, 121 | // sections: 3, 122 | // }, 123 | ]; 124 | 125 | analyser.getByteFrequencyData(dataArray); 126 | 127 | function calculatePosition(ring, j, a, func) { 128 | if (!ctx) return; 129 | var dist = ring.distance; 130 | var audioOffset = (ring.audioOffset + ring.lastAudio) / 2; 131 | var sections = 3; 132 | var variance = ring.variance; 133 | variance = 0.5 * variance + (audioOffset / 512) * 0.5 * variance; 134 | variance += audioOffset / 100; 135 | dist += 136 | Math.cos(j * sections + dt / (170 - rings.indexOf(ring) * 12)) * 137 | 5 * 138 | variance; 139 | dist += 140 | Math.sin(j * sections + (a * a) / 25 + dt / 1000) * 3 * variance; 141 | dist += ((audioOffset / 2) * ring.distance) / 130; 142 | var angle = j; 143 | angle += a / 10; 144 | angle += dt / (1000 - rings.indexOf(ring) * 70); 145 | angle += rings.indexOf(ring); 146 | ctx[func]( 147 | Math.cos(angle) * dist * ring.direction, 148 | Math.sin(angle) * dist * ring.direction 149 | ); 150 | } 151 | 152 | var da = (Math.PI * 2) / 50; 153 | for (var i = 0; i < rings.length; i++) { 154 | if (rings[i].lastAudio == undefined) { 155 | rings[i].lastAudio = 0; 156 | } else { 157 | rings[i].lastAudio = rings[i].audioOffset; 158 | } 159 | rings[i].audioOffset = 160 | dataArray[Math.floor(Math.max(0.1, i / rings.length) * bufferLength)]; 161 | if (i < 4) { 162 | if (rings[i].audioOffset < 100) { 163 | rings[i].audioOffset /= 2; 164 | } else { 165 | rings[i].audioOffset -= 50; 166 | } 167 | } else { 168 | rings[i].audioOffset *= 1.4; 169 | } 170 | rings[i].audioOffset *= 1.2; 171 | 172 | ctx.globalAlpha = rings[i].opacity; 173 | ctx.strokeStyle = rings[i].color; 174 | for (var a = 0; a < rings[i].innerRings; a++) { 175 | ctx.beginPath(); 176 | ctx.lineWidth = 177 | rings[i].lineWidth - 178 | (rings[i].lineWidth * a) / rings[i].innerRings / 2; 179 | calculatePosition(rings[i], 0, a, "moveTo"); 180 | for (var j = 0; j < Math.PI * 2; j += da) { 181 | calculatePosition(rings[i], j, a, "lineTo"); 182 | } 183 | calculatePosition(rings[i], 0, a, "lineTo"); 184 | ctx.stroke(); 185 | } 186 | } 187 | ctx.resetTransform(); 188 | ctx.filter = "blur(20px)"; 189 | ctx.globalCompositeOperation = "soft-light"; 190 | ctx.globalAlpha = 1; 191 | ctx.drawImage(canvas, 0, 0); 192 | ctx.filter = "blur(5px)"; 193 | ctx.globalCompositeOperation = "lighter"; 194 | ctx.globalAlpha = 0.3; 195 | ctx.drawImage(canvas, 0, 0); 196 | ctx.globalCompositeOperation = "source-over"; 197 | ctx.filter = "blur(8px)"; 198 | ctx.globalAlpha = 0.4; 199 | ctx.drawImage(canvas, 0, 0); 200 | ctx.filter = "none"; 201 | 202 | for (var i = 0; i < 256; i++) { 203 | //ctx.fillRect( 0, i * 4, dataArray[ Math.floor( i / 256 * bufferLength ) ], 4 ); 204 | } 205 | 206 | requestAnimationFrame(render); 207 | } 208 | 209 | var bufferLength = analyser.frequencyBinCount; 210 | var dataArray = new Uint8Array(bufferLength); 211 | 212 | function resize() { 213 | canvas.width = window.innerWidth; 214 | canvas.height = window.innerHeight; 215 | } 216 | 217 | window.onresize = resize; 218 | resize(); 219 | render(); 220 | }, []); 221 | 222 | return ; 223 | }; 224 | 225 | export default AudioVisualization; 226 | -------------------------------------------------------------------------------- /src/components/Conversation.css: -------------------------------------------------------------------------------- 1 | .micContainer { 2 | border-radius: 50%; 3 | } 4 | 5 | .pulse { 6 | border-radius: 50%; 7 | background: #ffffff; 8 | cursor: pointer; 9 | box-shadow: 0 0 0 rgba(204, 169, 44, 0.4); 10 | animation: pulse 2s infinite; 11 | } 12 | .pulse:hover { 13 | animation: none; 14 | } 15 | 16 | .mic { 17 | color: rgba(204, 169, 44, 0.4); 18 | } 19 | 20 | @-webkit-keyframes pulse { 21 | 0% { 22 | -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4); 23 | } 24 | 70% { 25 | -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0); 26 | } 27 | 100% { 28 | -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0); 29 | } 30 | } 31 | @keyframes pulse { 32 | 0% { 33 | -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); 34 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); 35 | } 36 | 70% { 37 | -moz-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); 38 | box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); 39 | } 40 | 100% { 41 | -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 42 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/Conversation.tsx: -------------------------------------------------------------------------------- 1 | import { Box, Button, HStack, VStack, Select, Spinner } from "@chakra-ui/react"; 2 | import React from "react"; 3 | import { useConversation, AudioDeviceConfig, ConversationConfig } from "vocode"; 4 | import MicrophoneIcon from "./MicrophoneIcon"; 5 | import AudioVisualization from "./AudioVisualization"; 6 | import { isMobile } from "react-device-detect"; 7 | 8 | const Conversation = ({ 9 | config, 10 | }: { 11 | config: Omit; 12 | }) => { 13 | const [audioDeviceConfig, setAudioDeviceConfig] = 14 | React.useState({}); 15 | const [inputDevices, setInputDevices] = React.useState([]); 16 | const [outputDevices, setOutputDevices] = React.useState( 17 | [] 18 | ); 19 | let transcripts: any[] = []; 20 | const { status, start, stop, analyserNode } = useConversation( 21 | Object.assign(config, { audioDeviceConfig }) 22 | ); 23 | // const { status, start, stop, analyserNode, transcripts } = useConversation({ 24 | // backendUrl: "wss://56686e955e8c.ngrok.app/conversation", 25 | // subscribeTranscript: false, 26 | // audioDeviceConfig, 27 | // }); 28 | 29 | React.useEffect(() => { 30 | navigator.mediaDevices 31 | .enumerateDevices() 32 | .then((devices) => { 33 | setInputDevices( 34 | devices.filter( 35 | (device) => device.deviceId && device.kind === "audioinput" 36 | ) 37 | ); 38 | setOutputDevices( 39 | devices.filter( 40 | (device) => device.deviceId && device.kind === "audiooutput" 41 | ) 42 | ); 43 | }) 44 | .catch((err) => { 45 | console.error(err); 46 | }); 47 | }); 48 | 49 | return ( 50 | <> 51 | {analyserNode && } 52 | 65 | 66 | {status === "connecting" && ( 67 | 74 | 75 | 76 | )} 77 | {!isMobile && ( 78 | 79 | {inputDevices.length > 0 && ( 80 | 99 | )} 100 | {outputDevices.length > 0 && ( 101 | 120 | )} 121 | 142 | 143 | )} 144 | { transcripts.length > 0 && ( 145 | 146 | { 147 | transcripts.map((item, index) => { 148 | return {item.sender}: {item.text} 149 | }) 150 | } 151 | 152 | )} 153 | 154 | ); 155 | }; 156 | 157 | export default Conversation; 158 | -------------------------------------------------------------------------------- /src/components/MicrophoneIcon.tsx: -------------------------------------------------------------------------------- 1 | import { FaMicrophone, FaMicrophoneSlash } from "react-icons/fa"; 2 | import { Box, Center, Icon } from "@chakra-ui/react"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | import { isSafari } from "react-device-detect"; 5 | 6 | const MicrophoneIcon = ({ 7 | muted, 8 | color, 9 | }: { 10 | muted: boolean; 11 | color: string; 12 | }) => { 13 | return ( 14 | 15 | 26 | {/* 27 | 34 | */} 35 | 36 | {/* */} 37 | 47 | {/* */} 48 | 49 | 50 | ); 51 | }; 52 | 53 | export default MicrophoneIcon; 54 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | * { 16 | box-sizing: border-box; 17 | } 18 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById("root") as HTMLElement 9 | ); 10 | root.render(); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | --------------------------------------------------------------------------------