Merge remote-tracking branch 'upstream/main'

2025-12-24 10:51:21 +00:00 · 2023-06-27 15:26:57 +10:00 · 2023-06-27 15:26:57 +10:00 · e416d69920
commit e416d69920
parent 2c57f1403e c4cce3c900
17 changed files with 1158 additions and 1834 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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 --host",
@ -9,14 +9,17 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "framer-motion": "^6.2.8",
-    "react": "^17.0.2",
+    "framer-motion": "^9.0.7",
+    "react": "^18.2.0",
    "react-color": "^2.19.3",
-    "react-dom": "^17.0.2"
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
-    "@vitejs/plugin-react": "^1.0.7",
-    "prettier": "^2.5.1",
-    "vite": "^2.9.6"
+    "@types/react": "^18.0.27",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,10 +1,10 @@
-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'
 import { SketchPicker } from 'react-color'
 import React from 'react'

@ -15,7 +15,7 @@ function App() {
  const [strokeColour, setStrokeColour] = useState('#000')

  const handleSubmit = useCallback(
-    bubbleHeight => {
+    (bubbleHeight: number) => {
      if (newMessage.length > 0) {
        addMessage({
          id: +new Date(),
@ -28,12 +28,12 @@ function App() {
    [newMessage, messages]
  )

-  const handleFillColourChange = (color) => {
+  const handleFillColourChange = (color: { hex: string }) => {
    setFillColour(color.hex);
      console.log(color);
  };

-  const handleStrokeColourChange = (color) => {
+  const handleStrokeColourChange = (color: { hex: string }) => {
    setStrokeColour(color.hex);
      console.log(color);
  };
--- a/src/bubble-input.css
+++ b/src/bubble-input.css
@ -15,7 +15,7 @@
 }

 .bubble.input > div {
-  background-color: #eee;
+  background-color: var(--bubble-background-color);
  font-size: 32px;
  min-width: 30px;
 }
--- a/src/bubble-input.tsx
+++ b/src/bubble-input.tsx
@ -1,14 +1,30 @@
-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, fillColour, strokeColour }) => {
-  const refEditable = useRef()
-  const refContainer = useRef()
+interface BubbleInputProps {
+  onChange: (value: string) => void
+  onSubmit: (height: number) => void
+  value: string
+  fillColour: string
+  strokeColour: string
+}
+
+const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }: 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
@ -46,7 +62,7 @@ const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }) =>
        spellCheck="false"
        onBlur={handleBlur}
        onKeyDown={handleKeyDown}
-        onInput={e => onChange(e.target.innerText)}
+        onInput={e => onChange(e.currentTarget.innerText)}
      />
    </div>
  )
--- a/src/bubble.css
+++ b/src/bubble.css
@ -1,10 +1,10 @@
 .bubble {
  width: 100%;
+  color: var(--bubble-color);
 }

 .bubble-content {
-  max-width: 600px;
-  display: inline-block;
+  background-color: var(--background-color);
  border-radius: 30px;
  padding: 12px 20px;
  margin-top: 5px;
@ -16,13 +16,14 @@
 .bubble-content {
  margin-right: 25%;
  position: relative;
+  overflow-wrap: break-word;
 }

 .bubble:last-child .bubble-content:before,
 .bubble:nth-last-child(2) .bubble-content:before {
  content: '';
  position: absolute;
-  z-index: 50;
+  z-index: 0;
  bottom: 0;
  left: -12px;
  height: 26px;
@ -33,18 +34,13 @@

 .bubble:last-child .bubble-content:after,
 .bubble:nth-last-child(2) .bubble-content:after {
-  content: '';
-  position: absolute;
-  z-index: 100;
-  bottom: 0;
-  left: -15px;
-  width: 15px;
-  height: 27px;
-  background: #00a000;
+  background: #00a000!important;
  border-bottom-right-radius: 15px;
-}
-
-.bubble:last-child:before,
-.bubble:nth-last-child(2):before {
-  z-index: 75;
+  bottom: 0;
+  content: "";
+  height: 27px;
+  left: -15px;
+  position: absolute;
+  width: 15px;
+  z-index: 1;
 }
--- a/src/bubble.tsx
+++ b/src/bubble.tsx
@ -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,20 @@ const transition = {
  }
 }

-const Bubble = ({ id, children, sender, dy, fillColour, strokeColour }) => {
+interface BubbleProps {
+  id: number
+  dy: number
+  children: React.ReactNode
+  fillColour: string
+  strokeColour: string
+}
+
+const Bubble = ({ id, children, dy, fillColour, strokeColour }: BubbleProps) => {
  const [isPresent, safeToRemove] = usePresence()

  const animations = {
    layout: true,
    initial: 'out',
-    style: {
-      position: 'static'
-    },
    animate: 'in',
    variants: {
      in: { opacity: 1, translateY: 0 },
@ -32,7 +37,9 @@ const Bubble = ({ id, children, sender, dy, fillColour, strokeColour }) => {

  return (
    <motion.div key={id} className="bubble" {...animations}>
+      <div style={{ position: 'static' }}>
        <div className="bubble-content" style={{backgroundColor: fillColour, color: strokeColour}}>{children}</div>
+      </div>
    </motion.div>
  )
 }
--- a/src/chat.tsx
+++ b/src/chat.tsx
@ -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>
 }

--- a/src/index.css
+++ b/src/index.css
@ -1,8 +1,15 @@
+:root{
+  --bubble-background-color: #eee;
+  --bubble-color: #000;
+  --background-color: #00a000
+}
+
 html,
 body,
 #root {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+
 }

 body {
@ -14,8 +21,3 @@ body {
  -moz-osx-font-smoothing: grayscale;
  background-color: black;
 }
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
--- a/src/main.jsx
+++ b/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')
-)
--- a/src/main.tsx
+++ b/src/main.tsx
@ -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>
+)
--- a/src/use-messages.ts
+++ b/src/use-messages.ts
@ -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
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.json
+++ b/tsconfig.json
@ -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" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/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()]
 })