mirror of
https://github.com/m1ngsama/chat-bubbles-for-yt.git
synced 2025-12-24 10:51:21 +00:00
feat(*): Converts Codebase to TypeScript (#10)
* 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/
GitHub
parent
a71e89dae9
commit
c4cce3c900
14 changed files with 1083 additions and 1807 deletions
|
|
@ -8,6 +8,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
2746
package-lock.json
generated
2746
package-lock.json
generated
File diff suppressed because it is too large
Load diff
16
package.json
16
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "chat-bubbles",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"version": "0.2.0",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
|
@ -9,13 +9,15 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^6.2.8",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"framer-motion": "^9.0.7",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^1.0.7",
|
||||
"prettier": "^2.5.1",
|
||||
"vite": "^2.8.0"
|
||||
"@types/react": "^18.0.27",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"@vitejs/plugin-react-swc": "^3.0.0",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
import { useState, useCallback } from 'react'
|
||||
import { AnimatePresence } from 'framer-motion'
|
||||
import { useCallback, useState } from 'react'
|
||||
import './App.css'
|
||||
import Chat from './chat'
|
||||
import Bubble from './bubble'
|
||||
import BubbleInput from './bubble-input'
|
||||
import Chat from './chat'
|
||||
import useMessages from './use-messages'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
function App() {
|
||||
const [messages, addMessage] = useMessages([])
|
||||
const [newMessage, setNewMessage] = useState('')
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
bubbleHeight => {
|
||||
(bubbleHeight: number) => {
|
||||
if (newMessage.length > 0) {
|
||||
addMessage({
|
||||
id: +new Date(),
|
||||
|
|
@ -1,14 +1,28 @@
|
|||
import React, { useCallback, useState, useRef, useEffect } from 'react'
|
||||
import {
|
||||
KeyboardEventHandler,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react'
|
||||
import './bubble-input.css'
|
||||
|
||||
const BubbleInput = ({ onChange, onSubmit, value }) => {
|
||||
const refEditable = useRef()
|
||||
const refContainer = useRef()
|
||||
interface BubbleInputProps {
|
||||
onChange: (value: string) => void
|
||||
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 handleKeyDown = e => {
|
||||
const handleKeyDown: KeyboardEventHandler = e => {
|
||||
const { current: elContainer } = refContainer
|
||||
const { current: elEditable } = refEditable
|
||||
if (elContainer === null || elEditable === null) return
|
||||
|
||||
const { isComposing } = e.nativeEvent
|
||||
if (e.key === 'Enter' && !isComposing) {
|
||||
const height = elContainer.clientHeight
|
||||
|
|
@ -45,7 +59,7 @@ const BubbleInput = ({ onChange, onSubmit, value }) => {
|
|||
spellCheck="false"
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
onInput={e => onChange(e.target.innerText)}
|
||||
onInput={e => onChange(e.currentTarget.innerText)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react'
|
||||
import { motion, usePresence } from 'framer-motion'
|
||||
import React from 'react'
|
||||
import './bubble.css'
|
||||
|
||||
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 animations = {
|
||||
layout: true,
|
||||
initial: 'out',
|
||||
style: {
|
||||
position: 'static'
|
||||
},
|
||||
animate: 'in',
|
||||
variants: {
|
||||
in: { opacity: 1, translateY: 0 },
|
||||
|
|
@ -32,7 +35,9 @@ const Bubble = ({ id, children, sender, dy }) => {
|
|||
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react'
|
||||
import { ReactNode } from 'react'
|
||||
import './chat.css'
|
||||
|
||||
const Chat = ({ children }) => {
|
||||
const Chat = ({ children }: { children: ReactNode }) => {
|
||||
return <div className="chat">{children}</div>
|
||||
}
|
||||
|
||||
11
src/main.jsx
11
src/main.jsx
|
|
@ -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
10
src/main.tsx
Normal 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>
|
||||
)
|
||||
|
|
@ -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 addMessage = useCallback(
|
||||
msg => {
|
||||
(msg: Message) => {
|
||||
setMessages(messages => [...messages, msg])
|
||||
setTimeout(() => {
|
||||
setMessages(current => {
|
||||
|
|
@ -17,7 +23,7 @@ const useMessages = (initialValue = []) => {
|
|||
[setMessages]
|
||||
)
|
||||
|
||||
return [messages, addMessage]
|
||||
return [messages, addMessage] as const
|
||||
}
|
||||
|
||||
export default useMessages
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
21
tsconfig.json
Normal file
21
tsconfig.json
Normal 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
9
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 3000
|
||||
},
|
||||
plugins: [react()]
|
||||
})
|
||||
Loading…
Reference in a new issue