create-fluxstack 1.0.13 → 1.0.15

package/app/client/src/lib/hooks/useErrorHandler.ts

@@ -0,0 +1,258 @@
+import React, { useState, useCallback, useRef } from 'react'
+import { logClientError } from '../errors'
+import { getErrorMessage, isRetryableError, shouldShowErrorToUser } from '../eden-api'
+
+export interface ErrorState {
+  error: Error | null
+  isRetrying: boolean
+  retryCount: number
+  canRetry: boolean
+  userMessage: string | null
+}
+
+export interface UseErrorHandlerOptions {
+  maxRetries?: number
+  showUserFriendlyMessages?: boolean
+  logErrors?: boolean
+  onError?: (error: Error) => void
+  onRetry?: (retryCount: number) => void
+  onMaxRetriesReached?: (error: Error) => void
+}
+
+export function useErrorHandler(options: UseErrorHandlerOptions = {}) {
+  const {
+    maxRetries = 3,
+    showUserFriendlyMessages = true,
+    logErrors = true,
+    onError,
+    onRetry,
+    onMaxRetriesReached
+  } = options
+
+  const [errorState, setErrorState] = useState<ErrorState>({
+    error: null,
+    isRetrying: false,
+    retryCount: 0,
+    canRetry: false,
+    userMessage: null
+  })
+
+  const retryTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
+
+  const handleError = useCallback((error: Error) => {
+    if (logErrors) {
+      logClientError(error, undefined)
+    }
+
+    setErrorState(prevState => {
+      const currentRetryCount = prevState?.retryCount || 0
+      const canRetry = isRetryableError(error) && currentRetryCount < maxRetries
+      const userMessage = showUserFriendlyMessages && shouldShowErrorToUser(error)
+        ? getErrorMessage(error)
+        : null
+
+      return {
+        error,
+        isRetrying: false,
+        retryCount: currentRetryCount,
+        canRetry,
+        userMessage
+      }
+    })
+
+    onError?.(error)
+  }, [maxRetries, showUserFriendlyMessages, logErrors, onError])
+
+  const retry = useCallback(async (operation: () => Promise<any>) => {
+    if (!errorState.canRetry || errorState.isRetrying) {
+      return
+    }
+
+    const newRetryCount = (errorState?.retryCount || 0) + 1
+    
+    setErrorState(prev => ({
+      ...prev,
+      isRetrying: true,
+      retryCount: newRetryCount
+    }))
+
+    onRetry?.(newRetryCount)
+
+    try {
+      // Add exponential backoff delay
+      const delay = Math.min(1000 * Math.pow(2, newRetryCount - 1), 10000)
+      await new Promise(resolve => {
+        retryTimeoutRef.current = setTimeout(resolve, delay)
+      })
+
+      const result = await operation()
+      
+      // Clear error state on successful retry
+      setErrorState({
+        error: null,
+        isRetrying: false,
+        retryCount: 0,
+        canRetry: false,
+        userMessage: null
+      })
+
+      return result
+    } catch (error) {
+      const canRetryAgain = isRetryableError(error as Error) && newRetryCount < maxRetries
+      
+      setErrorState(prev => ({
+        ...prev,
+        error: error as Error,
+        isRetrying: false,
+        retryCount: newRetryCount,
+        canRetry: canRetryAgain,
+        userMessage: showUserFriendlyMessages && shouldShowErrorToUser(error)
+          ? getErrorMessage(error)
+          : null
+      }))
+
+      if (!canRetryAgain) {
+        onMaxRetriesReached?.(error as Error)
+      }
+
+      throw error
+    }
+  }, [errorState?.retryCount, errorState?.canRetry, errorState?.isRetrying, maxRetries, showUserFriendlyMessages, onRetry, onMaxRetriesReached])
+
+  const clearError = useCallback(() => {
+    if (retryTimeoutRef.current) {
+      clearTimeout(retryTimeoutRef.current)
+    }
+
+    setErrorState({
+      error: null,
+      isRetrying: false,
+      retryCount: 0,
+      canRetry: false,
+      userMessage: null
+    })
+  }, [])
+
+  const executeWithErrorHandling = useCallback(async <T>(
+    operation: () => Promise<T>
+  ): Promise<T | null> => {
+    try {
+      clearError()
+      return await operation()
+    } catch (error) {
+      handleError(error as Error)
+      return null
+    }
+  }, [handleError, clearError])
+
+  return {
+    ...errorState,
+    handleError,
+    retry,
+    clearError,
+    executeWithErrorHandling
+  }
+}
+
+// Hook for handling API calls with automatic error handling
+export function useApiCall<T>(
+  apiCall: () => Promise<T>,
+  options: UseErrorHandlerOptions & {
+    immediate?: boolean
+    dependencies?: any[]
+  } = {}
+) {
+  const { immediate = false, dependencies = [], ...errorOptions } = options
+  
+  const [data, setData] = useState<T | null>(null)
+  const [loading, setLoading] = useState(immediate)
+  
+  const errorHandler = useErrorHandler(errorOptions)
+
+  const execute = useCallback(async (): Promise<T | null> => {
+    setLoading(true)
+    
+    try {
+      const result = await apiCall()
+      setData(result)
+      errorHandler.clearError()
+      return result
+    } catch (error) {
+      errorHandler.handleError(error as Error)
+      return null
+    } finally {
+      setLoading(false)
+    }
+  }, [apiCall, errorHandler])
+
+  const retryCall = useCallback(async () => {
+    return errorHandler.retry(async () => {
+      setLoading(true)
+      try {
+        const result = await apiCall()
+        setData(result)
+        return result
+      } finally {
+        setLoading(false)
+      }
+    })
+  }, [apiCall, errorHandler])
+
+  // Execute immediately if requested
+  React.useEffect(() => {
+    if (immediate) {
+      execute()
+    }
+  }, [immediate, ...dependencies])
+
+  const { retry: errorHandlerRetry, ...restErrorHandler } = errorHandler
+  
+  return {
+    data,
+    loading,
+    execute,
+    retry: retryCall,
+    ...restErrorHandler
+  }
+}
+
+// Hook for form submission with error handling
+export function useFormSubmission<T>(
+  submitFunction: (data: any) => Promise<T>,
+  options: UseErrorHandlerOptions = {}
+) {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [submitData, setSubmitData] = useState<T | null>(null)
+  
+  const errorHandler = useErrorHandler(options)
+
+  const submit = useCallback(async (formData: any): Promise<T | null> => {
+    setIsSubmitting(true)
+    
+    try {
+      const result = await submitFunction(formData)
+      setSubmitData(result)
+      errorHandler.clearError()
+      return result
+    } catch (error) {
+      errorHandler.handleError(error as Error)
+      return null
+    } finally {
+      setIsSubmitting(false)
+    }
+  }, [submitFunction, errorHandler])
+
+  const retrySubmit = useCallback(async (formData: any) => {
+    return errorHandler.retry(() => submit(formData))
+  }, [submit, errorHandler])
+
+  const { retry: errorHandlerRetry, ...restErrorHandler } = errorHandler
+
+  return {
+    submit,
+    retry: retrySubmit,
+    isSubmitting,
+    submitData,
+    ...restErrorHandler
+  }
+}

package/app/client/src/lib/index.ts

@@ -0,0 +1,45 @@
+// Enhanced error handling exports
+export * from './errors'
+export * from './eden-api'
+export * from './hooks/useErrorHandler'
+
+// Re-export components
+export { ErrorBoundary, useErrorBoundary } from '../components/ErrorBoundary'
+export { 
+  ErrorDisplay, 
+  ErrorToast, 
+  InlineError, 
+  LoadingWithError, 
+  ErrorSummary 
+} from '../components/ErrorDisplay'
+
+// Convenience exports for common patterns
+export {
+  apiCall,
+  simpleApiCall,
+  criticalApiCall,
+  backgroundApiCall,
+  userActionApiCall,
+  getErrorMessage,
+  isRetryableError,
+  shouldShowErrorToUser,
+  getCircuitBreakerState,
+  resetCircuitBreaker
+} from './eden-api'
+
+export {
+  ClientAPIError,
+  NetworkError,
+  TimeoutError,
+  withRetry,
+  withFallback,
+  CircuitBreaker,
+  getDefaultUserMessage,
+  logClientError
+} from './errors'
+
+export {
+  useErrorHandler,
+  useApiCall,
+  useFormSubmission
+} from './hooks/useErrorHandler'

package/app/client/src/main.tsx

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

package/app/client/src/pages/ApiDocs.tsx

@@ -0,0 +1,182 @@
+import {
+  FaBook, FaClipboardList, FaRocket, FaFileAlt, FaCog, FaLock, FaSync, FaCode, FaEye,
+  FaBolt
+} from 'react-icons/fa';
+
+
+export function ApiDocsPage() {
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="text-center">
+        <div className="flex items-center justify-center gap-3 mb-4">
+          <FaBook className="text-3xl text-blue-500" />
+          <h2 className="text-3xl font-bold text-gray-900">Documentação da API</h2>
+        </div>
+        <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+          Documentação interativa gerada automaticamente com Swagger UI
+        </p>
+      </div>
+      
+      {/* Quick Links */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="group bg-white rounded-2xl p-6 shadow-lg border border-gray-200 hover:shadow-xl hover:border-blue-300 transition-all duration-300">
+          <div className="text-center">
+            <div className="text-4xl mb-4">
+              <FaClipboardList className="text-blue-500 mx-auto" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">Swagger UI Interativo</h3>
+            <p className="text-gray-600 mb-6">Interface completa para testar todos os endpoints da API</p>
+            <a 
+              href="/swagger" 
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-medium rounded-xl hover:from-blue-700 hover:to-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 shadow-lg hover:shadow-xl"
+            >
+              <FaRocket className="w-4 h-4" />
+              Abrir em Nova Aba
+            </a>
+          </div>
+        </div>
+        
+        <div className="group bg-white rounded-2xl p-6 shadow-lg border border-gray-200 hover:shadow-xl hover:border-purple-300 transition-all duration-300">
+          <div className="text-center">
+            <div className="text-4xl mb-4">
+              <FaFileAlt className="text-purple-500 mx-auto" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-900 mb-2">OpenAPI Spec (JSON)</h3>
+            <p className="text-gray-600 mb-6">Especificação OpenAPI em formato JSON para integração</p>
+            <a 
+              href="/swagger/json" 
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white font-medium rounded-xl hover:from-purple-700 hover:to-purple-800 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all duration-200 shadow-lg hover:shadow-xl"
+            >
+              <FaClipboardList className="w-4 h-4" />
+              Ver JSON
+            </a>
+          </div>
+        </div>
+      </div>
+
+      {/* Embedded Swagger */}
+      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+        <div className="bg-gradient-to-r from-gray-50 to-slate-100 px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center gap-2">
+            <FaCog className="text-gray-900" />
+            <h3 className="text-lg font-semibold text-gray-900">Documentação Integrada</h3>
+          </div>
+        </div>
+        <iframe 
+          src="/swagger"
+          className="w-full h-[600px] border-0"
+          title="Swagger UI"
+        />
+      </div>
+
+      {/* Eden Treaty Guide */}
+      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+        <div className="bg-gradient-to-r from-gray-50 to-slate-100 px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center gap-2">
+            <FaCog className="text-gray-900" />
+            <h3 className="text-lg font-semibold text-gray-900">Como usar Eden Treaty</h3>
+          </div>
+        </div>
+        <div className="p-6 space-y-6">
+          <div>
+            <h4 className="text-base font-semibold text-gray-900 mb-3">Configuração do Cliente:</h4>
+            <pre className="bg-gray-900 text-gray-100 p-4 rounded-xl overflow-x-auto text-sm border border-gray-700">
+{`import { treaty } from '@elysiajs/eden'
+import type { App } from './server'
+
+const client = treaty<App>('http://localhost:3000')
+export const api = client.api`}
+            </pre>
+          </div>
+
+          <div>
+            <h4 className="text-base font-semibold text-gray-900 mb-3">Exemplos de Uso:</h4>
+            <pre className="bg-gray-900 text-gray-100 p-4 rounded-xl overflow-x-auto text-sm border border-gray-700">
+{`// Listar usuários
+const users = await api.users.get()
+
+// Criar usuário
+const newUser = await api.users.post({
+  name: "João Silva",
+  email: "joao@example.com"
+})
+
+// Deletar usuário
+await api.users["1"].delete()
+
+// Health check
+const health = await api.health.get()`}
+            </pre>
+          </div>
+
+          <div>
+            <h4 className="text-base font-semibold text-gray-900 mb-3">Com tratamento de erros:</h4>
+            <pre className="bg-gray-900 text-gray-100 p-4 rounded-xl overflow-x-auto text-sm border border-gray-700">
+{`try {
+  const result = await apiCall(api.users.post({
+    name: "Maria Silva",
+    email: "maria@example.com"
+  }))
+  
+  if (result.success) {
+    console.log('Usuário criado:', result.user)
+  }
+} catch (error) {
+  console.error('Erro:', getErrorMessage(error))
+}`}
+            </pre>
+          </div>
+        </div>
+      </div>
+
+      {/* Features */}
+      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+        <div className="bg-gradient-to-r from-gray-50 to-slate-100 px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center justify-center gap-2">
+            <FaBolt className="text-gray-900" />
+            <h3 className="text-lg font-semibold text-gray-900">Funcionalidades</h3>
+          </div>
+        </div>
+        <div className="p-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {[
+              {
+                icon: <FaLock className="text-blue-500" />,
+                title: "Type Safety",
+                description: "Tipos TypeScript inferidos automaticamente"
+              },
+              {
+                icon: <FaBolt className="text-yellow-500" />,
+                title: "Auto-complete",
+                description: "IntelliSense completo no editor"
+              },
+              {
+                icon: <FaSync className="text-green-500" />,
+                title: "Sincronização",
+                description: "Mudanças no backend refletem automaticamente no frontend"
+              },
+              {
+                icon: <FaCode className="text-purple-500" />,
+                title: "Debugging",
+                description: "Erros de tipo detectados em tempo de compilação"
+              }
+            ].map((feature, index) => (
+              <div key={index} className="flex items-start gap-4 p-4 rounded-xl bg-gray-50 hover:bg-gray-100 transition-colors duration-200">
+                <div className="text-2xl">{feature.icon}</div>
+                <div>
+                  <h4 className="font-semibold text-gray-900 mb-1">{feature.title}</h4>
+                  <p className="text-gray-600 text-sm">{feature.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/client/src/pages/Demo.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  FaFire, FaRocket, FaCheckCircle, FaTimesCircle, FaSpinner, FaSync, FaUsers, FaPlus, FaTrash
+} from 'react-icons/fa';
+
+// This component will receive a lot of props from App.tsx initially.
+// A good next step would be to move this state to a shared context.
+export function DemoPage({ 
+  users, 
+  apiStatus, 
+  loading, 
+  submitting, 
+  name, 
+  email, 
+  setName, 
+  setEmail, 
+  handleSubmit, 
+  handleDelete, 
+  loadUsers, 
+  getInitials 
+}) {
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="text-center">
+        <div className="flex items-center justify-center gap-3 mb-4">
+          <FaFire className="text-3xl text-orange-500" />
+          <h2 className="text-3xl font-bold text-gray-900">Demo Interativo</h2>
+        </div>
+        <div className="flex items-center justify-center gap-2">
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            Teste a API em tempo real com hot reload coordenado e Eden Treaty
+          </p>
+          <FaRocket className="text-lg text-blue-500" />
+        </div>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-2xl p-6 text-center">
+          <div className="text-4xl font-bold text-blue-600 mb-2">{users.length}</div>
+          <div className="text-sm font-medium text-blue-700 uppercase tracking-wide">Usuários</div>
+        </div>
+        <div className={`bg-gradient-to-br ${apiStatus === 'online' ? 'from-emerald-50 to-emerald-100 border-emerald-200' : 'from-red-50 to-red-100 border-red-200'} border rounded-2xl p-6 text-center`}>
+          <div className="text-4xl mb-2">
+            {apiStatus === 'online' ? (
+              <FaCheckCircle className="text-emerald-500 mx-auto" />
+            ) : (
+              <FaTimesCircle className="text-red-500 mx-auto" />
+            )}
+          </div>
+          <div className={`text-sm font-medium uppercase tracking-wide ${apiStatus === 'online' ? 'text-emerald-700' : 'text-red-700'}`}>
+            API {apiStatus === 'online' ? 'Online' : 'Offline'}
+          </div>
+        </div>
+        <div className="bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-2xl p-6 text-center">
+          <div className="text-4xl mb-2">
+            <FaRocket className="text-purple-500 mx-auto" />
+          </div>
+          <div className="text-sm font-medium text-purple-700 uppercase tracking-wide">Eden Treaty</div>
+        </div>
+      </div>
+
+      {/* Add User Form */}
+      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+        <div className="bg-gradient-to-r from-gray-50 to-slate-100 px-6 py-4 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">Adicionar Usuário</h3>
+        </div>
+        <div className="p-6">
+          <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-700">Nome</label>
+              <input
+                type="text"
+                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 placeholder-gray-400"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="Nome completo"
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <label className="block text-sm font-medium text-gray-700">Email</label>
+              <input
+                type="email"
+                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 placeholder-gray-400"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="email@exemplo.com"
+                required
+              />
+            </div>
+            <div className="md:col-span-2">
+              <button 
+                type="submit" 
+                className="w-full md:w-auto px-8 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-medium rounded-xl hover:from-blue-700 hover:to-blue-800 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-lg hover:shadow-xl"
+                disabled={submitting || !name.trim() || !email.trim()}
+              >
+                {submitting ? (
+                  <span className="flex items-center gap-2">
+                    <FaSpinner className="w-4 h-4 animate-spin" />
+                    Adicionando...
+                  </span>
+                ) : (
+                  <span className="flex items-center gap-2">
+                    <FaPlus className="w-4 h-4" />
+                    Adicionar Usuário
+                  </span>
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      {/* Users List */}
+      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+        <div className="bg-gradient-to-r from-gray-50 to-slate-100 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+          <h3 className="text-lg font-semibold text-gray-900">Usuários ({users.length})</h3>
+          <button 
+            className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 transition-all duration-200"
+            onClick={loadUsers}
+            disabled={loading}
+          >
+            {loading ? (
+              <FaSpinner className="w-4 h-4 animate-spin" />
+            ) : (
+              <FaSync className="w-4 h-4" />
+            )}
+            Atualizar
+          </button>
+        </div>
+
+        <div className="p-6">
+          {loading ? (
+            <div className="text-center py-12">
+              <FaSpinner className="w-8 h-8 text-blue-600 animate-spin mx-auto mb-4" />
+              <p className="text-gray-600">Carregando usuários...</p>
+            </div>
+          ) : users.length === 0 ? (
+            <div className="text-center py-12">
+              <FaUsers className="text-6xl text-gray-400 mx-auto mb-4" />
+              <h4 className="text-lg font-medium text-gray-900 mb-2">Nenhum usuário encontrado</h4>
+              <p className="text-gray-600">Adicione o primeiro usuário usando o formulário acima</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {users.map(user => (
+                <div key={user.id} className="group bg-gray-50 border border-gray-200 rounded-xl p-4 hover:shadow-lg hover:border-blue-300 transition-all duration-200">
+                  <div className="flex items-start gap-3">
+                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
+                      {getInitials(user.name)}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <h4 className="font-medium text-gray-900 truncate">{user.name}</h4>
+                      <p className="text-sm text-gray-600 truncate">{user.email}</p>
+                      <button 
+                        className="mt-3 w-full px-3 py-2 bg-red-50 text-red-700 border border-red-200 rounded-lg hover:bg-red-100 hover:border-red-300 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-200 text-sm font-medium flex items-center justify-center gap-2"
+                        onClick={() => handleDelete(user.id, user.name)}
+                      >
+                        <FaTrash className="w-3 h-3" />
+                        Remover
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}