m1ngsama/chat-bubbles-for-yt
1
0
Fork 0
mirror of https://github.com/m1ngsama/chat-bubbles-for-yt.git synced 2025-12-24 10:51:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(*): Converts Codebase to TypeScript (#10)

Browse source 
* upgrade react and convert to typescript project

* adds some typing to the useMessages hook

* changes dev server port back to previous default

* adds types to all files

* moves static prop to inner div as it's prevent text wrapping the bubble. `style` is not a valid motion.div prop.

* fixes bouncing bubbles on when disappearing.

* organizes imports

* revert unintended change of timeout length
This commit is contained in:
peetzweg/ 2023-02-28 01:30:00 +01:00 committed by GitHub
parent a71e89dae9
commit c4cce3c900
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 1083 additions and 1807 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.jsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

2746
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

16
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "chat-bubbles", "name": "chat-bubbles",
"private": true, "private": true,
"version": "0.1.0", "version": "0.2.0",
"license": "Apache-2.0", "license": "Apache-2.0",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@ -9,13 +9,15 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"framer-motion": "^6.2.8", "framer-motion": "^9.0.7",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2" "react-dom": "^18.2.0"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^1.0.7", "@types/react": "^18.0.27",
"prettier": "^2.5.1", "@types/react-dom": "^18.0.10",
"vite": "^2.8.0" "@vitejs/plugin-react-swc": "^3.0.0",
"typescript": "^4.9.3",
"vite": "^4.1.0"
} }
} }

8
src/App.jsx → src/App.tsx
View file

@ -1,17 +1,17 @@
import { useState, useCallback } from 'react' import { AnimatePresence } from 'framer-motion'
import { useCallback, useState } from 'react'
import './App.css' import './App.css'
import Chat from './chat'
import Bubble from './bubble' import Bubble from './bubble'
import BubbleInput from './bubble-input' import BubbleInput from './bubble-input'
import Chat from './chat'
import useMessages from './use-messages' import useMessages from './use-messages'
import { motion, AnimatePresence } from 'framer-motion'
function App() { function App() {
const [messages, addMessage] = useMessages([]) const [messages, addMessage] = useMessages([])
const [newMessage, setNewMessage] = useState('') const [newMessage, setNewMessage] = useState('')
const handleSubmit = useCallback( const handleSubmit = useCallback(
bubbleHeight => { (bubbleHeight: number) => {
if (newMessage.length > 0) { if (newMessage.length > 0) {
addMessage({ addMessage({
id: +new Date(), id: +new Date(),

26
src/bubble-input.jsx → src/bubble-input.tsx
View file

@ -1,14 +1,28 @@
import React, { useCallback, useState, useRef, useEffect } from 'react' import {
KeyboardEventHandler,
useCallback,
useEffect,
useRef,
useState
} from 'react'
import './bubble-input.css' import './bubble-input.css'
const BubbleInput = ({ onChange, onSubmit, value }) => { interface BubbleInputProps {
const refEditable = useRef() onChange: (value: string) => void
const refContainer = useRef() onSubmit: (height: number) => void
value: string
}
const BubbleInput = ({ onChange, onSubmit, value }: BubbleInputProps) => {
const refEditable = useRef<HTMLDivElement>(null)
const refContainer = useRef<HTMLDivElement>(null)
const [submitted, setSubmitted] = useState(false) const [submitted, setSubmitted] = useState(false)
const handleKeyDown = e => { const handleKeyDown: KeyboardEventHandler = e => {
const { current: elContainer } = refContainer const { current: elContainer } = refContainer
const { current: elEditable } = refEditable const { current: elEditable } = refEditable
if (elContainer === null || elEditable === null) return
const { isComposing } = e.nativeEvent const { isComposing } = e.nativeEvent
if (e.key === 'Enter' && !isComposing) { if (e.key === 'Enter' && !isComposing) {
const height = elContainer.clientHeight const height = elContainer.clientHeight
@ -45,7 +59,7 @@ const BubbleInput = ({ onChange, onSubmit, value }) => {
spellCheck="false" spellCheck="false"
onBlur={handleBlur} onBlur={handleBlur}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onInput={e => onChange(e.target.innerText)} onInput={e => onChange(e.currentTarget.innerText)}
/> />
</div> </div>
) )

17
src/bubble.jsx → src/bubble.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { motion, usePresence } from 'framer-motion' import { motion, usePresence } from 'framer-motion'
import React from 'react'
import './bubble.css' import './bubble.css'
const transition = { const transition = {
@ -11,15 +11,18 @@ const transition = {
} }
} }
const Bubble = ({ id, children, sender, dy }) => { interface BubbleProps {
id: number
dy: number
children: React.ReactNode
}
const Bubble = ({ id, children, dy }: BubbleProps) => {
const [isPresent, safeToRemove] = usePresence() const [isPresent, safeToRemove] = usePresence()
const animations = { const animations = {
layout: true, layout: true,
initial: 'out', initial: 'out',
style: {
position: 'static'
},
animate: 'in', animate: 'in',
variants: { variants: {
in: { opacity: 1, translateY: 0 }, in: { opacity: 1, translateY: 0 },
@ -32,7 +35,9 @@ const Bubble = ({ id, children, sender, dy }) => {
return ( return (
<motion.div key={id} className="bubble" {...animations}> <motion.div key={id} className="bubble" {...animations}>
<div className="bubble-content">{children}</div> <div style={{ position: 'static' }}>
<div className="bubble-content">{children}</div>
</div>
</motion.div> </motion.div>
) )
} }

4
src/chat.jsx → src/chat.tsx
View file

@ -1,7 +1,7 @@
import React from 'react' import { ReactNode } from 'react'
import './chat.css' import './chat.css'
const Chat = ({ children }) => { const Chat = ({ children }: { children: ReactNode }) => {
return <div className="chat">{children}</div> return <div className="chat">{children}</div>
} }

11
src/main.jsx
View file

@ -1,11 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)

10
src/main.tsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

14
src/use-messages.js → src/use-messages.ts
View file

@ -1,10 +1,16 @@
import { useState, useCallback } from 'react' import { useCallback, useState } from 'react'
const useMessages = (initialValue = []) => { export interface Message {
id: number
text: string
height: number
}
const useMessages = (initialValue: Array<Message> = []) => {
const [messages, setMessages] = useState(initialValue) const [messages, setMessages] = useState(initialValue)
const addMessage = useCallback( const addMessage = useCallback(
msg => { (msg: Message) => {
setMessages(messages => [...messages, msg]) setMessages(messages => [...messages, msg])
setTimeout(() => { setTimeout(() => {
setMessages(current => { setMessages(current => {
@ -17,7 +23,7 @@ const useMessages = (initialValue = []) => {
[setMessages] [setMessages]
) )
return [messages, addMessage] return [messages, addMessage] as const
} }
export default useMessages export default useMessages

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
tsconfig.json Normal file
View file

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

9
tsconfig.node.json Normal file
View file

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

5
vite.config.js → vite.config.ts
View file

@ -1,7 +1,10 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
server: {
port: 3000
},
plugins: [react()] plugins: [react()]
}) })