create-fluxstack 1.10.1 → 1.12.1

package/app/client/src/components/AppLayout.tsx

@@ -0,0 +1,68 @@
+import { Link, Outlet, useLocation } from 'react-router'
+import { FaBook, FaGithub } from 'react-icons/fa'
+
+const navItems = [
+  { to: '/', label: 'Home' },
+  { to: '/counter', label: 'Counter' },
+  { to: '/form', label: 'Form' },
+  { to: '/upload', label: 'Upload' },
+  { to: '/chat', label: 'Chat' },
+  { to: '/room-chat', label: 'Room Chat' },
+  { to: '/api-test', label: 'API Test' }
+]
+
+export function AppLayout() {
+  const location = useLocation()
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      <header className="sticky top-0 z-10 backdrop-blur-md bg-slate-900/60 border-b border-white/10">
+        <div className="container mx-auto px-6 py-4 flex flex-wrap items-center justify-between gap-4">
+          <div className="text-white font-semibold tracking-wide">
+            FluxStack
+          </div>
+          <nav className="flex flex-wrap items-center gap-2">
+            {navItems.map((item) => {
+              const active = location.pathname === item.to
+              return (
+                <Link
+                  key={item.to}
+                  to={item.to}
+                  className={`px-3 py-1.5 rounded-lg text-sm transition-all ${
+                    active
+                      ? 'bg-white/15 text-white'
+                      : 'text-gray-300 hover:bg-white/10'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              )
+            })}
+          </nav>
+          <div className="flex items-center gap-2">
+            <a
+              href="/swagger"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
+            >
+              <FaBook />
+              Docs
+            </a>
+            <a
+              href="https://github.com/MarcosBrendonDePaula/FluxStack"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 border border-white/20 text-white rounded-lg text-sm hover:bg-white/20 transition-all"
+            >
+              <FaGithub />
+              GitHub
+            </a>
+          </div>
+        </div>
+      </header>
+
+      <Outlet />
+    </div>
+  )
+}

package/app/client/src/components/BackButton.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from 'react-router'
+
+export function BackButton() {
+  const navigate = useNavigate()
+  return (
+    <button
+      onClick={() => navigate(-1)}
+      className="px-4 py-2 bg-white/10 backdrop-blur-sm border border-white/20 text-white rounded-lg font-medium hover:bg-white/20 transition-all"
+    >
+      ← Voltar
+    </button>
+  )
+}

package/app/client/src/components/DemoPage.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { BackButton } from './BackButton'
+
+export function DemoPage({ children, note }: { children: ReactNode; note?: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex flex-col items-center justify-center px-4">
+      <div className="mb-8">
+        <BackButton />
+      </div>
+      <div className="w-full max-w-6xl">
+        {children}
+      </div>
+      {note && (
+        <p className="mt-6 text-gray-400 text-sm max-w-md text-center">
+          {note}
+        </p>
+      )}
+    </div>
+  )
+}

package/app/client/src/components/LiveUploadWidget.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useLiveChunkedUpload } from '@/core/client'
+import type { LiveChunkedUploadOptions } from '@/core/client'
+import type { FileUploadCompleteResponse } from '@core/types/types'
+type LiveUploadActions = {
+  $componentId: string | null
+  $connected: boolean
+  $state: {
+    status: 'idle' | 'uploading' | 'complete' | 'error'
+    progress: number
+    fileName: string
+    fileSize: number
+    fileType: string
+    fileUrl: string
+    bytesUploaded: number
+    totalBytes: number
+    error: string | null
+  }
+  $error?: string | null
+  startUpload: (payload: { fileName: string; fileSize: number; fileType: string }) => Promise<any>
+  updateProgress: (payload: { progress: number; bytesUploaded: number; totalBytes: number }) => Promise<any>
+  completeUpload: (payload: { fileUrl: string }) => Promise<any>
+  failUpload: (payload: { error: string }) => Promise<any>
+  reset: () => Promise<any>
+}
+
+export interface LiveUploadWidgetProps {
+  live: LiveUploadActions
+  title?: string
+  description?: string
+  allowPreview?: boolean
+  options?: LiveChunkedUploadOptions
+  onComplete?: (response: FileUploadCompleteResponse) => void
+}
+
+export function LiveUploadWidget({
+  live,
+  title = 'Upload em Chunks',
+  description = 'Envio via WebSocket com Live Components e reatividade server-side.',
+  allowPreview = true,
+  options,
+  onComplete
+}: LiveUploadWidgetProps) {
+  // live is expected to be a LiveUpload-compatible component
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [localError, setLocalError] = useState<string | null>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+
+  const mergedOptions = useMemo<LiveChunkedUploadOptions>(() => {
+    return {
+      allowedTypes: [],
+      maxFileSize: 500 * 1024 * 1024,
+      adaptiveChunking: true,
+      fileUrlResolver: (fileUrl) => fileUrl.startsWith('/uploads/') ? `/api${fileUrl}` : fileUrl,
+      onComplete,
+      ...options
+    }
+  }, [options, onComplete])
+
+  const {
+    uploading,
+    bytesUploaded,
+    totalBytes,
+    uploadFile,
+    cancelUpload,
+    reset
+  } = useLiveChunkedUpload(live, mergedOptions)
+
+  const canUpload = live.$connected && !!live.$componentId && !uploading
+
+  const handleSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] ?? null
+    setSelectedFile(file)
+    setLocalError(null)
+
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl)
+      setPreviewUrl(null)
+    }
+
+    if (allowPreview && file && file.type.startsWith('image/')) {
+      setPreviewUrl(URL.createObjectURL(file))
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl)
+      }
+    }
+  }, [previewUrl])
+
+  const handleStartUpload = async () => {
+    if (!selectedFile) {
+      setLocalError('Selecione um arquivo primeiro.')
+      return
+    }
+
+    if (!live.$connected || !live.$componentId) {
+      setLocalError('WebSocket ainda nao conectou. Tente novamente em alguns segundos.')
+      return
+    }
+
+    setLocalError(null)
+    await uploadFile(selectedFile)
+  }
+
+  const handleReset = async () => {
+    setSelectedFile(null)
+    setLocalError(null)
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl)
+      setPreviewUrl(null)
+    }
+    await reset()
+  }
+
+  const resolvedUrl = live.$state.fileUrl
+
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 max-w-xl w-full mx-auto">
+      <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="space-y-4">
+        <input
+          type="file"
+          onChange={handleSelectFile}
+          className="w-full text-sm text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-white/10 file:text-white hover:file:bg-white/20"
+          disabled={!live.$connected}
+        />
+
+        <div className="flex gap-3">
+          <button
+            onClick={handleStartUpload}
+            disabled={!canUpload || !selectedFile}
+            className="flex-1 px-4 py-2 rounded-lg bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 hover:bg-emerald-500/30 transition-all disabled:opacity-50"
+          >
+            Iniciar Upload
+          </button>
+          <button
+            onClick={cancelUpload}
+            disabled={!uploading}
+            className="px-4 py-2 rounded-lg bg-red-500/20 border border-red-500/30 text-red-300 hover:bg-red-500/30 transition-all disabled:opacity-50"
+          >
+            Cancelar
+          </button>
+          <button
+            onClick={handleReset}
+            className="px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white hover:bg-white/20 transition-all"
+          >
+            Reset
+          </button>
+        </div>
+
+        {(localError || live.$state.error || live.$error) && (
+          <div className="text-sm text-red-300 bg-red-500/10 border border-red-500/30 rounded-lg px-3 py-2">
+            {localError || live.$state.error || live.$error}
+          </div>
+        )}
+
+        <div className="bg-black/40 border border-white/10 rounded-xl p-4">
+          <div className="flex justify-between text-xs text-gray-400 mb-2">
+            <span>Status: {live.$state.status}</span>
+            <span>{Math.round(live.$state.progress)}%</span>
+          </div>
+          <div className="w-full h-3 bg-white/10 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all"
+              style={{ width: `${live.$state.progress}%` }}
+            />
+          </div>
+          <div className="flex justify-between text-xs text-gray-500 mt-2">
+            <span>{live.$state.fileName || 'Nenhum arquivo selecionado'}</span>
+            <span>{bytesUploaded > 0 ? `${Math.round(bytesUploaded / 1024)} KB` : ''}{totalBytes > 0 ? ` / ${Math.round(totalBytes / 1024)} KB` : ''}</span>
+          </div>
+        </div>
+
+        {previewUrl && (
+          <div className="bg-white/5 border border-white/10 rounded-xl p-4">
+            <div className="text-xs text-gray-400 mb-2">Preview</div>
+            <img
+              src={previewUrl}
+              alt="Preview"
+              className="max-h-48 w-full object-contain rounded-lg border border-white/10"
+            />
+          </div>
+        )}
+
+        {resolvedUrl && live.$state.status === 'complete' && (
+          <div className="bg-emerald-500/10 border border-emerald-500/30 rounded-xl p-4 text-sm text-emerald-200">
+            Upload concluido: <a className="underline" href={resolvedUrl} target="_blank" rel="noopener noreferrer">abrir arquivo</a>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/app/client/src/lib/eden-api.ts

@@ -1,74 +1,99 @@
-// Eden Treaty API Client - Full Type Inference
-import { treaty } from '@elysiajs/eden'
-import type { App } from '../../../server/app'
-
 /**
- * Get base URL dynamically
+ * Eden Treaty API Client
+ * Configured for this application
+ *
+ * This file extends the core Eden client with app-specific customizations.
+ * Modify the options below to change API behavior across the entire app.
  */
-export const getBaseUrl = () => {
-  if (typeof window === 'undefined') return 'http://localhost:3000'
-
-  // Always use current origin - works for both dev and production
-  return window.location.origin
-}
 
-/**
- * Get auth token from localStorage (optional)
- */
-const getAuthToken = (): string | null => {
-  if (typeof window === 'undefined') return null
-  return localStorage.getItem('accessToken')
-}
+import { createEdenClient, getErrorMessage } from '@/core/client/api'
+import type { App } from '@server/app'
 
 /**
- * Create Eden Treaty client with authentication and logging
- * Based on official ElysiaJS Chan example
+ * API client with full type inference from server routes
+ *
+ * @example
+ * ```typescript
+ * // GET request
+ * const { data, error } = await api.users.get()
+ *
+ * // POST request
+ * const { data, error } = await api.users.post({
+ *   name: 'John',
+ *   email: 'john@example.com'
+ * })
+ *
+ * // With query params
+ * const { data } = await api.users.get({ query: { page: 1, limit: 10 } })
+ *
+ * // With path params
+ * const { data } = await api.users({ id: 123 }).get()
+ * ```
  */
-export const api = treaty<App>(getBaseUrl(), {
-  // Dynamic headers for every request
-  headers(_path, _options) {
-    const token = getAuthToken()
-    return token ? { Authorization: `Bearer ${token}` } : undefined
-  },
+export const api = createEdenClient<App>({
+  // ┌─────────────────────────────────────────────────────────────────┐
+  // │ CUSTOMIZATION EXAMPLES                                         │
+  // │ Uncomment and modify the options below as needed                │
+  // └─────────────────────────────────────────────────────────────────┘
 
-  // Custom fetcher with logging and error handling
-  // Use 'as any' to bypass Bun's strict fetch type (includes preconnect property)
-  fetcher: (async (url, init) => {
-    if (import.meta.env.DEV) {
-      console.log(`🌐 ${init?.method ?? 'GET'} ${url}`)
-    }
+  // ── Authentication ──────────────────────────────────────────────────
+  // Custom token key (default: 'accessToken')
+  // tokenKey: 'authToken',
 
-    const res = await fetch(url, init)
+  // Custom token getter (e.g., from a state manager)
+  // getAuthToken: () => {
+  //   return useAuthStore.getState().token
+  // },
 
-    if (import.meta.env.DEV) {
-      console.log(`📡 ${url} → ${res.status}`)
-    }
+  // ── Unauthorized Handler ────────────────────────────────────────────
+  // Redirect to login on 401
+  // onUnauthorized: () => {
+  //   localStorage.removeItem('accessToken')
+  //   window.location.href = '/login'
+  // },
 
-    // Auto-logout on 401
-    if (res.status === 401) {
-      console.warn('🔒 Token expired')
-      localStorage.removeItem('accessToken')
-      // window.location.href = '/login' // Uncomment if you have auth
-    }
+  // Show toast notification on 401
+  // onUnauthorized: () => {
+  //   toast.error('Session expired. Please login again.')
+  //   router.push('/login')
+  // },
 
-    return res
-  }) as typeof fetch
-}).api // ← expose the generated API object
+  // ── Base URL ────────────────────────────────────────────────────────
+  // Custom base URL (e.g., for different environments)
+  // getBaseUrl: () => {
+  //   if (import.meta.env.PROD) return 'https://api.myapp.com'
+  //   return 'http://localhost:3000'
+  // },
 
-/**
- * Get user-friendly error message
- */
-export function getErrorMessage(error: unknown): string {
-  // Eden Treaty error format
-  if (error && typeof error === 'object' && 'value' in error) {
-    const edenError = error as { value?: { message?: string; userMessage?: string } }
-    return edenError.value?.userMessage || edenError.value?.message || 'An error occurred'
-  }
+  // ── Logging ─────────────────────────────────────────────────────────
+  // Force enable/disable logging (default: auto based on DEV mode)
+  // enableLogging: true,
+})
 
-  // Standard Error
-  if (error instanceof Error) {
-    return error.message
-  }
+// Re-export utility for convenience
+export { getErrorMessage }
 
-  return 'An unexpected error occurred'
-}
+// ┌─────────────────────────────────────────────────────────────────────┐
+// │ ADVANCED: Creating Multiple API Clients                            │
+// │                                                                     │
+// │ You can create additional clients for different purposes:          │
+// └─────────────────────────────────────────────────────────────────────┘
+//
+// // Public API (no auth)
+// export const publicApi = createEdenClient<App>({
+//   getAuthToken: () => null,
+// })
+//
+// // Admin API (different token)
+// export const adminApi = createEdenClient<App>({
+//   tokenKey: 'adminToken',
+//   onUnauthorized: () => {
+//     window.location.href = '/admin/login'
+//   },
+// })
+//
+// // External API (different base URL)
+// import type { ExternalApp } from './external-types'
+// export const externalApi = createEdenClient<ExternalApp>({
+//   getBaseUrl: () => 'https://external-api.com',
+// })

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

@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Live } from '@/core/client'
+import { LiveChat } from '@server/live/LiveChat'
+
+export function ChatDemo() {
+  const [text, setText] = useState('')
+  const [user, setUser] = useState('')
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const wasNearBottomRef = useRef(true)
+  const defaultUser = useMemo(() => {
+    if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+      return `user-${crypto.randomUUID().slice(0, 6)}`
+    }
+    return `user-${Math.random().toString(36).slice(2, 8)}`
+  }, [])
+
+  const chat = Live.use(LiveChat, {
+    room: 'global-chat',
+    initialState: LiveChat.defaultState,
+    persistState: false
+  })
+
+  const handleSend = async () => {
+    if (!text.trim()) return
+    const finalUser = user.trim() || defaultUser
+    await chat.sendMessage({ user: finalUser, text })
+    setText('')
+  }
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+
+    if (wasNearBottomRef.current) {
+      el.scrollTop = el.scrollHeight
+    }
+  }, [chat.$state.messages.length])
+
+  const handleScroll = () => {
+    const el = containerRef.current
+    if (!el) return
+    const distance = el.scrollHeight - (el.scrollTop + el.clientHeight)
+    wasNearBottomRef.current = distance < 80
+  }
+
+  return (
+    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8 w-full mx-auto">
+      <h2 className="text-2xl font-bold text-white mb-2 text-center">Chat Compartilhado</h2>
+      <p className="text-gray-400 text-sm text-center mb-4">
+        Sala global em tempo real. Abra em várias abas para testar.
+      </p>
+
+      <div className="flex flex-wrap items-center gap-2 mb-4 text-xs">
+        <span className={`px-3 py-1 rounded-full ${chat.$connected ? 'bg-emerald-500/20 text-emerald-300' : 'bg-red-500/20 text-red-300'}`}>
+          {chat.$connected ? 'Conectado' : 'Desconectado'}
+        </span>
+        <span className="text-gray-400">Você: {user.trim() || defaultUser}</span>
+      </div>
+
+      <div className="mb-4">
+        <label className="block text-xs text-gray-400 mb-2">Seu nome</label>
+        <input
+          value={user}
+          onChange={(e) => setUser(e.target.value)}
+          placeholder={`Ex: ${defaultUser}`}
+          className="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
+        />
+      </div>
+
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="bg-black/40 border border-white/10 rounded-xl p-5 h-[28rem] overflow-auto space-y-3"
+      >
+        {chat.$state.messages.length === 0 && (
+          <div className="text-gray-500 text-sm text-center">Nenhuma mensagem ainda</div>
+        )}
+        {chat.$state.messages.map((m) => (
+          <div key={m.id} className="text-sm">
+            <span className="text-purple-300 font-semibold">{m.user}</span>
+            <span className="text-gray-500 text-xs ml-2">{new Date(m.timestamp).toLocaleTimeString()}</span>
+            <div className="text-gray-200">{m.text}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-4 flex gap-2">
+        <input
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') void handleSend()
+          }}
+          placeholder="Digite uma mensagem..."
+          className="flex-1 px-4 py-2 rounded-lg 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={handleSend}
+          disabled={!chat.$connected}
+          className="px-4 py-2 rounded-lg bg-purple-500/20 border border-purple-500/30 text-purple-200 hover:bg-purple-500/30 transition-all disabled:opacity-50"
+        >
+          Enviar
+        </button>
+      </div>
+    </div>
+  )
+}