chore: update to react 19 (#598)

* chore: update to react 19

* update bun file

* add potato and tomato dance

services/ecran/package.json

@@ -23,19 +23,19 @@
     "migrations": "tsx ./src/db/migrate.ts"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "1.0.2",
+    "@ai-sdk/anthropic": "1.0.4",
     "@anthropic-ai/sdk": "0.32.1",
     "@auth/drizzle-adapter": "1.7.4",
-    "@dotenvx/dotenvx": "1.26.0",
+    "@dotenvx/dotenvx": "1.28.0",
     "@headlessui/react": "2.2.0",
     "@heroicons/react": "2.2.0",
     "@hookform/resolvers": "3.9.1",
     "@kubernetes/client-node": "0.22.3",
     "@mdx-js/loader": "3.1.0",
     "@mdx-js/react": "3.1.0",
     "@monaco-editor/react": "4.6.0",
-    "@next/mdx": "15.0.3",
-    "@next/third-parties": "15.0.3",
+    "@next/mdx": "15.0.4",
+    "@next/third-parties": "15.0.4",
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-dropdown-menu": "2.1.2",
@@ -49,46 +49,45 @@
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-tooltip": "1.1.4",
-    "@react-three/drei": "9.118.0",
+    "@react-three/drei": "9.120.3",
     "@react-three/fiber": "9.0.0-rc.1",
     "@tailwindcss/typography": "0.5.15",
-    "@tanstack/react-query": "5.62.0",
-    "@tanstack/react-query-devtools": "5.62.0",
+    "@tanstack/react-query": "5.62.3",
+    "@tanstack/react-query-devtools": "5.62.3",
     "@tanstack/react-table": "8.20.5",
-    "@tanstack/react-virtual": "3.10.9",
+    "@tanstack/react-virtual": "3.11.0",
     "@temporalio/activity": "1.11.5",
     "@temporalio/client": "1.11.5",
     "@temporalio/worker": "1.11.5",
     "@temporalio/workflow": "1.11.5",
-    "ai": "4.0.9",
+    "ai": "4.0.13",
     "bcrypt": "5.1.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "dotenv": "16.4.5",
-    "drizzle-orm": "0.36.4",
+    "dotenv": "16.4.7",
+    "drizzle-orm": "0.37.0",
     "esbuild": "0.24.0",
     "esbuild-loader": "4.2.2",
     "framer-motion": "12.0.0-alpha.2",
     "highlight.js": "11.10.0",
     "immer": "10.1.1",
     "logrocket": "9.0.0",
-    "lucide-react": "0.462.0",
+    "lucide-react": "0.468.0",
     "monaco-editor": "0.52.0",
-    "next": "15.0.3",
+    "next": "15.0.4",
     "next-auth": "5.0.0-beta.25",
     "next-mdx-remote": "5.0.0",
-    "next-themes": "0.4.3",
+    "next-themes": "0.4.4",
     "pino": "9.5.0",
     "pino-pretty": "13.0.0",
     "postgres": "3.4.5",
-    "react": "next",
-    "react-dom": "next",
-    "react-hook-form": "7.53.2",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-hook-form": "7.54.0",
     "rehype-highlight": "7.0.1",
     "resend": "4.0.1",
     "sharp": "0.33.5",
     "tailwind-merge": "2.5.5",
-    "tailwindcss-animate": "1.0.7",
     "three": "0.171.0",
     "tsx": "4.19.2",
     "turndown": "7.2.0",
@@ -106,25 +105,19 @@
     "@types/bcrypt": "5.0.2",
     "@types/mdx": "2.0.13",
     "@types/node": "22.10.1",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
     "@types/three": "0.170.0",
     "@types/turndown": "5.0.5",
     "@types/uuid": "10.0.0",
-    "drizzle-kit": "0.28.1",
+    "drizzle-kit": "0.29.1",
     "eslint": "8.57.0",
-    "eslint-config-next": "15.0.3",
+    "eslint-config-next": "15.0.4",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.49",
     "prettier-plugin-tailwindcss": "0.6.9",
-    "tailwindcss": "3.4.15",
+    "tailwindcss": "3.4.16",
     "tailwindcss-motion": "0.4.3-beta",
     "typescript": "5.7.2"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "npm:[email protected]",
-      "@types/react-dom": "npm:[email protected]"
-    }
   }
 }

services/ecran/src/app/potato/page.tsx

@@ -0,0 +1,5 @@
+import { Potato } from '@/components/potato'
+
+export default function PotatoPage() {
+  return <Potato />
+}

services/ecran/src/components/potato.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import Image from 'next/image'
+import { cn } from '@/lib/utils'
+import { useRef, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Music } from 'lucide-react'
+
+const VEGETABLES = [
+  { id: 1, delay: '0ms', scale: 1, type: 'potato', rotation: 6 },
+  { id: 2, delay: '200ms', scale: 0.8, type: 'tomato', rotation: -8 },
+  { id: 3, delay: '400ms', scale: 0.9, type: 'potato', rotation: 12 },
+  { id: 4, delay: '600ms', scale: 0.7, type: 'tomato', rotation: -6 },
+]
+
+export function Potato() {
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  const toggleMusic = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause()
+      } else {
+        audioRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  return (
+    <div className="relative flex h-full items-center justify-center">
+      <Button
+        onClick={toggleMusic}
+        variant="outline"
+        size="icon"
+        className="absolute right-4 top-4"
+        aria-label={`${isPlaying ? 'Stop' : 'Play'} music`}
+      >
+        <Music className={cn('h-4 w-4', isPlaying ? 'opacity-50' : 'opacity-100')} />
+      </Button>
+
+      <div className="relative grid grid-cols-2 gap-8">
+        {VEGETABLES.map((veg) => (
+          <div key={veg.id} className="relative" style={{ animationDelay: veg.delay }}>
+            <div
+              className={cn(
+                'motion-ease-elastic motion-preset-bounce',
+                veg.type === 'potato' ? 'motion-preset-float' : 'motion-preset-spin',
+                'motion-duration-500',
+                'animate-[pulse_500ms_ease-in-out_infinite]',
+                veg.type === 'tomato' ? 'motion-preset-shake' : 'motion-preset-wobble',
+                'rounded-full p-4',
+                isPlaying && [`motion-rotate-loop-${veg.rotation}/mirror`, 'motion-duration-300', 'motion-ease-linear'],
+              )}
+            >
+              <div
+                className={cn(
+                  'absolute inset-0 -z-10',
+                  'rounded-full',
+                  'animate-[ping_1s_ease-in-out_infinite]',
+                  veg.type === 'potato' ? 'bg-indigo-500/20' : 'bg-red-500/20',
+                  isPlaying && 'opacity-100',
+                  !isPlaying && 'opacity-0',
+                  'transition-opacity duration-300',
+                )}
+              />
+
+              <div
+                className="relative"
+                style={{
+                  transform: `scale(${veg.scale})`,
+                  animationDelay: `calc(${veg.delay} + 100ms)`,
+                }}
+              >
+                <Image
+                  src={`/${veg.type}.png`}
+                  alt={`Dancing ${veg.type}`}
+                  width={150}
+                  height={150}
+                  className={cn(
+                    veg.type === 'potato' ? 'motion-preset-wobble' : 'motion-preset-bounce',
+                    'motion-duration-1500',
+                    'motion-reduce:transform-none',
+                    isPlaying && veg.type === 'potato'
+                      ? 'animate-[bounce_500ms_ease-in-out_infinite]'
+                      : 'animate-[spin_700ms_ease-in-out_infinite]',
+                  )}
+                  priority
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <audio ref={audioRef} src="/techno-beat.mp3" loop className="hidden">
+        <track kind="captions" src="/techno-beat.vtt" srcLang="en" default />
+      </audio>
+    </div>
+  )
+}

services/ecran/tailwind.config.ts

@@ -1,5 +1,6 @@
 import type { Config } from 'tailwindcss'
 import plugin from 'tailwindcss/plugin'
+import tailwindcssMotion from 'tailwindcss-motion'
 
 const config = {
   darkMode: ['class'],
@@ -111,8 +112,7 @@ const config = {
   },
   plugins: [
     require('@tailwindcss/typography'),
-    require('tailwindcss-animate'),
-    require('tailwindcss-motion'),
+    tailwindcssMotion,
     plugin(({ addVariant }) => {
       addVariant('prose-inline-code', '& :where(:not(pre) > code)')
     }),