create-fluxstack 1.9.1 → 1.12.0

package/app/client/src/live/CounterDemo.tsx

@@ -0,0 +1,206 @@
+// 🔥 CounterDemo - Contador isolado e compartilhado
+
+import { useMemo } from 'react'
+import { Live } from '@/core/client'
+import { LiveCounter } from '@server/live/LiveCounter'
+import { LiveLocalCounter } from '@server/live/LiveLocalCounter'
+
+export function CounterDemo() {
+  const isolatedRoom = useMemo(() => {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+      return `local-${crypto.randomUUID()}`
+    }
+    return `local-${Math.random().toString(36).slice(2)}`
+  }, [])
+
+  const sharedCounter = Live.use(LiveCounter, {
+    room: 'global-counter',
+    initialState: LiveCounter.defaultState
+  })
+
+  const isolatedCounter = Live.use(LiveCounter, {
+    room: isolatedRoom,
+    initialState: LiveCounter.defaultState,
+    persistState: false
+  })
+
+  const localCounter = Live.use(LiveLocalCounter, {
+    initialState: LiveLocalCounter.defaultState,
+    persistState: false
+  })
+  
+  const renderCounter = (
+    title: string,
+    description: string,
+    counter: ReturnType<typeof Live.use>
+  ) => {
+    const handleIncrement = async () => {
+      await counter.increment()
+    }
+
+    const handleDecrement = async () => {
+      await counter.decrement()
+    }
+
+    const handleReset = async () => {
+      await counter.reset()
+    }
+
+    return (
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 max-w-md w-full">
+        <h2 className="text-2xl font-bold text-white mb-2 text-center">
+          {title}
+        </h2>
+
+        <p className="text-gray-400 text-sm text-center mb-6">
+          {description}
+        </p>
+
+        <div className="flex justify-center gap-4 mb-6">
+          <div className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs ${
+            counter.$connected
+              ? 'bg-emerald-500/20 text-emerald-300'
+              : 'bg-red-500/20 text-red-300'
+          }`}>
+            <div className={`w-2 h-2 rounded-full ${
+              counter.$connected ? 'bg-emerald-400' : 'bg-red-400'
+            }`} />
+            {counter.$connected ? 'Conectado' : 'Desconectado'}
+          </div>
+
+          <div className="flex items-center gap-2 px-3 py-1 rounded-full text-xs bg-blue-500/20 text-blue-300">
+            <span>👥</span>
+            {counter.$state.connectedUsers} usuário(s)
+          </div>
+        </div>
+
+        <div className="text-center mb-8">
+          <div className="text-8xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+            {counter.$state.count}
+          </div>
+
+          {counter.$state.lastUpdatedBy && (
+            <p className="text-gray-500 text-sm mt-2">
+              Última atualização: {counter.$state.lastUpdatedBy}
+            </p>
+          )}
+        </div>
+
+        <div className="flex gap-4 justify-center">
+          <button
+            onClick={handleDecrement}
+            disabled={counter.$loading}
+            className="w-14 h-14 flex items-center justify-center text-3xl bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 text-red-300 rounded-xl transition-all disabled:opacity-50"
+          >
+            −
+          </button>
+
+          <button
+            onClick={handleReset}
+            disabled={counter.$loading}
+            className="px-6 h-14 flex items-center justify-center text-sm bg-gray-500/20 hover:bg-gray-500/30 border border-gray-500/30 text-gray-300 rounded-xl transition-all disabled:opacity-50"
+          >
+            Reset
+          </button>
+
+          <button
+            onClick={handleIncrement}
+            disabled={counter.$loading}
+            className="w-14 h-14 flex items-center justify-center text-3xl bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/30 text-emerald-300 rounded-xl transition-all disabled:opacity-50"
+          >
+            +
+          </button>
+        </div>
+
+        {counter.$loading && (
+          <div className="flex justify-center mt-4">
+            <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+          </div>
+        )}
+
+        <div className="mt-8 pt-6 border-t border-white/10">
+          <p className="text-gray-500 text-xs text-center">
+            ✨ Usando <code className="text-purple-400">Room Events</code>
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const renderLocalCounter = () => {
+    const handleIncrement = async () => {
+      await localCounter.increment()
+    }
+    const handleDecrement = async () => {
+      await localCounter.decrement()
+    }
+    const handleReset = async () => {
+      await localCounter.reset()
+    }
+
+    return (
+      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 max-w-md w-full">
+        <h2 className="text-2xl font-bold text-white mb-2 text-center">
+          Contador Local (sem Room)
+        </h2>
+        <p className="text-gray-400 text-sm text-center mb-6">
+          Estado local do componente, sem eventos de sala.
+        </p>
+
+        <div className="text-center mb-8">
+          <div className="text-8xl font-bold bg-gradient-to-r from-amber-400 via-orange-400 to-rose-400 bg-clip-text text-transparent">
+            {localCounter.$state.count}
+          </div>
+        </div>
+
+        <div className="flex gap-4 justify-center">
+          <button
+            onClick={handleDecrement}
+            disabled={localCounter.$loading}
+            className="w-14 h-14 flex items-center justify-center text-3xl bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 text-red-300 rounded-xl transition-all disabled:opacity-50"
+          >
+            −
+          </button>
+
+          <button
+            onClick={handleReset}
+            disabled={localCounter.$loading}
+            className="px-6 h-14 flex items-center justify-center text-sm bg-gray-500/20 hover:bg-gray-500/30 border border-gray-500/30 text-gray-300 rounded-xl transition-all disabled:opacity-50"
+          >
+            Reset
+          </button>
+
+          <button
+            onClick={handleIncrement}
+            disabled={localCounter.$loading}
+            className="w-14 h-14 flex items-center justify-center text-3xl bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/30 text-emerald-300 rounded-xl transition-all disabled:opacity-50"
+          >
+            +
+          </button>
+        </div>
+
+        {localCounter.$loading && (
+          <div className="flex justify-center mt-4">
+            <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6 items-start justify-center">
+      {renderLocalCounter()}
+      {renderCounter(
+        'Contador Isolado',
+        'Cada aba tem seu próprio valor (room único).',
+        isolatedCounter
+      )}
+      {renderCounter(
+        'Contador Compartilhado',
+        'Abra em várias abas - todos veem o mesmo valor!',
+        sharedCounter
+      )}
+    </div>
+  )
+}

package/app/client/src/live/FormDemo.tsx

@@ -0,0 +1,119 @@
+// 🔥 FormDemo - Exemplo de Live Component
+import { Live } from '@/core/client'
+import { LiveForm } from '@server/live/LiveForm'
+
+export function FormDemo() {
+  // ✨ Usa defaultState do backend automaticamente
+  const form = Live.use(LiveForm)
+
+  // Sucesso
+  if (form.submitted) {
+    return (
+      <div className="p-6 bg-green-500/20 border border-green-500/30 rounded-xl text-center">
+        <div className="text-4xl mb-3">✅</div>
+        <h2 className="text-xl font-bold text-white mb-2">Enviado!</h2>
+        <p className="text-gray-300">Obrigado, <span className="text-green-400">{form.name}</span>!</p>
+        <p className="text-gray-400 text-sm mt-2">
+          Enviado em: {form.submittedAt ? new Date(form.submittedAt).toLocaleString() : '-'}
+        </p>
+        <button
+          onClick={() => form.reset()}
+          className="mt-4 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all"
+        >
+          Novo Formulário
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-6 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-bold text-white">Live Form</h2>
+        <span className={`px-3 py-1 rounded-full text-xs ${
+          form.$connected ? 'bg-green-500/20 text-green-300' : 'bg-red-500/20 text-red-300'
+        }`}>
+          {form.$connected ? '🟢 Conectado' : '🔴 Desconectado'}
+        </span>
+      </div>
+
+      <div className="space-y-4">
+        {/* Nome - sync on blur */}
+        <div>
+          <label className="block text-gray-300 text-sm mb-1">
+            Nome <span className="text-purple-400 text-xs">(sync: blur)</span>
+          </label>
+          <input
+            {...form.$field('name', { syncOn: 'blur' })}
+            placeholder="Seu nome"
+            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Email - sync on change with debounce */}
+        <div>
+          <label className="block text-gray-300 text-sm mb-1">
+            Email <span className="text-blue-400 text-xs">(sync: 500ms)</span>
+          </label>
+          <input
+            {...form.$field('email', { syncOn: 'change', debounce: 500 })}
+            type="email"
+            placeholder="seu@email.com"
+            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Mensagem - sync on blur */}
+        <div>
+          <label className="block text-gray-300 text-sm mb-1">
+            Mensagem <span className="text-orange-400 text-xs">(sync: blur)</span>
+          </label>
+          <textarea
+            {...form.$field('message', { syncOn: 'blur' })}
+            rows={3}
+            placeholder="Sua mensagem..."
+            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none resize-none"
+          />
+        </div>
+
+        {/* Botões */}
+        <div className="flex gap-2">
+          <button
+            onClick={async () => {
+              try {
+                await form.$sync()
+                await form.submit()
+              } catch (err: any) {
+                alert(err.message || 'Erro ao enviar')
+              }
+            }}
+            disabled={!form.$connected}
+            className="flex-1 px-4 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50"
+          >
+            {form.$loading ? 'Enviando...' : 'Enviar'}
+          </button>
+          <button
+            onClick={() => form.reset()}
+            className="px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-500 transition-all"
+          >
+            Limpar
+          </button>
+        </div>
+      </div>
+
+      {/* Legenda */}
+      <div className="mt-4 p-3 bg-white/5 rounded-lg text-xs text-gray-400 space-y-1">
+        <p><span className="text-purple-400">blur:</span> Sincroniza ao sair do campo</p>
+        <p><span className="text-blue-400">500ms:</span> Sincroniza 500ms após parar de digitar</p>
+      </div>
+
+      {/* Debug */}
+      <details className="mt-4">
+        <summary className="text-gray-400 text-sm cursor-pointer">Debug State (servidor)</summary>
+        <pre className="mt-2 p-3 bg-black/40 rounded-lg text-xs text-green-400 overflow-auto">
+{JSON.stringify(form.$state, null, 2)}
+        </pre>
+      </details>
+    </div>
+  )
+}

package/app/client/src/live/RoomChatDemo.tsx

@@ -0,0 +1,242 @@
+// 🔥 RoomChatDemo - Demo do chat com múltiplas salas
+//
+// Demonstra o uso do sistema $room para:
+// - Entrar/sair de múltiplas salas
+// - Enviar mensagens para sala ativa
+// - Ver quem está digitando
+// - Trocar entre salas
+
+import { useState, useEffect, useRef, useMemo } from 'react'
+import { Live } from '@/core/client'
+import { LiveRoomChat } from '@server/live/LiveRoomChat'
+
+// Salas disponíveis
+const AVAILABLE_ROOMS = [
+  { id: 'geral', name: '💬 Geral' },
+  { id: 'tech', name: '💻 Tecnologia' },
+  { id: 'random', name: '🎲 Random' },
+  { id: 'vip', name: '⭐ VIP' }
+]
+
+export function RoomChatDemo() {
+  const [text, setText] = useState('')
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+
+  // Username aleatório
+  const defaultUsername = useMemo(() => {
+    const adjectives = ['Happy', 'Cool', 'Fast', 'Smart', 'Brave']
+    const nouns = ['Panda', 'Tiger', 'Eagle', 'Wolf', 'Bear']
+    const adj = adjectives[Math.floor(Math.random() * adjectives.length)]
+    const noun = nouns[Math.floor(Math.random() * nouns.length)]
+    const num = Math.floor(Math.random() * 100)
+    return `${adj}${noun}${num}`
+  }, [])
+
+  // Live component - estado sincronizado automaticamente
+  const chat = Live.use(LiveRoomChat, {
+    initialState: { ...LiveRoomChat.defaultState, username: defaultUsername }
+  })
+
+  // Mensagens e typing vêm diretamente do estado sincronizado
+  const activeRoom = chat.$state.activeRoom
+  const activeMessages = activeRoom ? (chat.$state.messages[activeRoom] || []) : []
+  const activeTyping = activeRoom ? (chat.$state.typingUsers[activeRoom] || []) : []
+
+  // Auto scroll quando mensagens mudam
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [activeMessages.length])
+
+  // Handlers
+  const handleJoinRoom = async (roomId: string, roomName: string) => {
+    if (chat.$rooms.includes(roomId)) {
+      await chat.switchRoom({ roomId })
+    } else {
+      await chat.joinRoom({ roomId, roomName })
+    }
+  }
+
+  const handleLeaveRoom = async (roomId: string) => {
+    await chat.leaveRoom({ roomId })
+  }
+
+  const handleSendMessage = async () => {
+    if (!text.trim() || !chat.$state.activeRoom) return
+    await chat.sendMessage({ text })
+    setText('')
+  }
+
+  const handleTyping = () => {
+    chat.startTyping({})
+  }
+
+  return (
+    <div className="flex h-[600px] bg-gray-900 rounded-2xl overflow-hidden border border-white/10">
+      {/* Sidebar - Lista de Salas */}
+      <div className="w-64 bg-gray-800/50 border-r border-white/10 flex flex-col">
+        {/* Header */}
+        <div className="p-4 border-b border-white/10">
+          <h2 className="text-lg font-bold text-white mb-2">💬 Room Chat</h2>
+          <div className="flex items-center gap-2">
+            <div className={`w-2 h-2 rounded-full ${chat.$connected ? 'bg-emerald-400' : 'bg-red-400'}`} />
+            <span className="text-sm text-gray-400">{chat.$state.username}</span>
+          </div>
+        </div>
+
+        {/* Salas Disponíveis */}
+        <div className="flex-1 overflow-auto p-2">
+          <p className="text-xs text-gray-500 px-2 py-1">SALAS</p>
+          {AVAILABLE_ROOMS.map(room => {
+            const isJoined = chat.$rooms.includes(room.id)
+            const isActive = chat.$state.activeRoom === room.id
+            const unreadCount = 0 // TODO: implementar contagem
+
+            return (
+              <div
+                key={room.id}
+                onClick={() => handleJoinRoom(room.id, room.name)}
+                className={`
+                  flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer mb-1
+                  transition-all group
+                  ${isActive
+                    ? 'bg-purple-500/20 text-purple-300'
+                    : isJoined
+                      ? 'bg-white/5 text-gray-300 hover:bg-white/10'
+                      : 'text-gray-500 hover:bg-white/5 hover:text-gray-400'
+                  }
+                `}
+              >
+                <span className="flex items-center gap-2">
+                  {room.name}
+                  {isJoined && (
+                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+                  )}
+                </span>
+
+                {isJoined && !isActive && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleLeaveRoom(room.id)
+                    }}
+                    className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 text-xs"
+                  >
+                    ✕
+                  </button>
+                )}
+              </div>
+            )
+          })}
+        </div>
+
+        {/* Salas ativas */}
+        <div className="p-3 border-t border-white/10">
+          <p className="text-xs text-gray-500 mb-1">
+            Em {chat.$rooms.length} sala(s)
+          </p>
+        </div>
+      </div>
+
+      {/* Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {activeRoom ? (
+          <>
+            {/* Header da sala */}
+            <div className="px-4 py-3 border-b border-white/10 flex items-center justify-between">
+              <div>
+                <h3 className="text-white font-semibold">
+                  {chat.$state.rooms.find(r => r.id === activeRoom)?.name || activeRoom}
+                </h3>
+                <p className="text-xs text-gray-500">
+                  {activeMessages.length} mensagens
+                </p>
+              </div>
+              <button
+                onClick={() => handleLeaveRoom(activeRoom)}
+                className="px-3 py-1 text-sm bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30 transition-all"
+              >
+                Sair
+              </button>
+            </div>
+
+            {/* Mensagens */}
+            <div className="flex-1 overflow-auto p-4 space-y-3">
+              {activeMessages.length === 0 ? (
+                <div className="text-center text-gray-500 py-8">
+                  <p>Nenhuma mensagem ainda</p>
+                  <p className="text-sm">Seja o primeiro a enviar!</p>
+                </div>
+              ) : (
+                activeMessages.map(msg => (
+                  <div
+                    key={msg.id}
+                    className={`flex flex-col ${msg.user === chat.$state.username ? 'items-end' : 'items-start'}`}
+                  >
+                    <div
+                      className={`
+                        max-w-[80%] rounded-2xl px-4 py-2
+                        ${msg.user === chat.$state.username
+                          ? 'bg-purple-500/30 text-purple-100'
+                          : 'bg-white/10 text-gray-200'
+                        }
+                      `}
+                    >
+                      <p className="text-xs text-gray-400 mb-1">{msg.user}</p>
+                      <p>{msg.text}</p>
+                    </div>
+                    <span className="text-xs text-gray-600 mt-1">
+                      {new Date(msg.timestamp).toLocaleTimeString()}
+                    </span>
+                  </div>
+                ))
+              )}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Typing indicator */}
+            {activeTyping.length > 0 && (
+              <div className="px-4 py-1 text-xs text-gray-500">
+                {activeTyping.filter(u => u !== chat.$state.username).join(', ')} está digitando...
+              </div>
+            )}
+
+            {/* Input */}
+            <div className="p-4 border-t border-white/10">
+              <div className="flex gap-2">
+                <input
+                  value={text}
+                  onChange={(e) => {
+                    setText(e.target.value)
+                    handleTyping()
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault()
+                      handleSendMessage()
+                    }
+                  }}
+                  placeholder="Digite uma mensagem..."
+                  className="flex-1 px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
+                />
+                <button
+                  onClick={handleSendMessage}
+                  disabled={!text.trim()}
+                  className="px-6 py-2 rounded-xl bg-purple-500/30 text-purple-200 hover:bg-purple-500/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  Enviar
+                </button>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-gray-500">
+            <div className="text-center">
+              <p className="text-4xl mb-4">👈</p>
+              <p>Selecione uma sala para começar</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/app/client/src/live/UploadDemo.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { LiveUploadWidget } from '../components/LiveUploadWidget'
+import { useLiveUpload } from '@/core/client'
+
+export function UploadDemo() {
+  const [lastUrl, setLastUrl] = useState<string | null>(null)
+  const { live } = useLiveUpload({
+    onComplete: (response) => setLastUrl(response.fileUrl || null)
+  })
+
+  return (
+    <div className="flex flex-col gap-4 max-w-xl w-full mx-auto">
+      <LiveUploadWidget live={live} />
+      {lastUrl && (
+        <div className="text-xs text-gray-500 text-center">
+          Ultimo arquivo: {lastUrl}
+        </div>
+      )}
+    </div>
+  )
+}

package/app/client/src/main.tsx

@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)