create-fluxstack 1.0.13 → 1.0.15

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

@@ -0,0 +1,263 @@
+import React from 'react';
+import {
+  FaBolt, FaRocket, FaSync, FaCheckCircle,  FaCog, FaFire,
+  FaEye,
+  FaBullseye,
+  FaTimesCircle
+} from 'react-icons/fa';
+import { HybridLiveCounter } from '../components/HybridLiveCounter';
+import { UserProfile } from '../components/UserProfile';
+import { LiveClock } from '../components/LiveClock';
+
+export function HybridLivePage() {
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="text-center">
+        <div className="flex items-center justify-center gap-3 mb-4">
+          <FaBolt className="text-3xl text-yellow-500" />
+          <h2 className="text-3xl font-bold text-gray-900">Hybrid Live Components</h2>
+        </div>
+        <div className="flex items-center justify-center gap-2">
+          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
+            Sistema híbrido combinando <strong>Zustand (cliente)</strong> + <strong>Live Components (servidor)</strong> 
+            para máxima performance com fallback offline e validação de estado!
+          </p>
+          <FaRocket className="text-lg text-blue-500" />
+        </div>
+      </div>
+
+      {/* Architecture Info Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-2xl p-4 text-center">
+          <div className="text-3xl mb-2">
+            <FaBolt className="text-blue-500 mx-auto" />
+          </div>
+          <div className="text-sm font-medium text-blue-700 uppercase tracking-wide">Zustand</div>
+          <div className="text-xs text-blue-600 mt-1">Client State</div>
+        </div>
+        <div className="bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-2xl p-4 text-center">
+          <div className="text-3xl mb-2">
+            <FaSync className="text-purple-500 mx-auto" />
+          </div>
+          <div className="text-sm font-medium text-purple-700 uppercase tracking-wide">Sync</div>
+          <div className="text-xs text-purple-600 mt-1">Real-time</div>
+        </div>
+        <div className="bg-gradient-to-br from-orange-50 to-orange-100 border border-orange-200 rounded-2xl p-4 text-center">
+          <div className="text-3xl mb-2">
+            <FaCheckCircle className="text-orange-500 mx-auto" />
+          </div>
+          <div className="text-sm font-medium text-orange-700 uppercase tracking-wide">Validation</div>
+          <div className="text-xs text-orange-600 mt-1">State Integrity</div>
+        </div>
+        <div className="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-2xl p-4 text-center">
+          <div className="text-3xl mb-2">
+            <FaEye className="text-green-500 mx-auto" />
+          </div>
+          <div className="text-sm font-medium text-green-700 uppercase tracking-wide">Offline</div>
+          <div className="text-xs text-green-600 mt-1">Fallback Ready</div>
+        </div>
+      </div>
+
+      {/* Hybrid Counter Demo */}
+      <div className="bg-gradient-to-br from-slate-50 to-purple-50 rounded-2xl p-8 border-2 border-purple-200">
+        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+          {/* Default Counter */}
+          <HybridLiveCounter />
+          
+          {/* Customized Counter */}
+          <HybridLiveCounter 
+            initialCount={10}
+            title="Custom Counter"
+            step={5}
+            room="demo-room"
+            userId="user-123"
+          />
+          <UserProfile />
+          
+          {/* Live Clock Component */}
+          <LiveClock />
+        </div>
+        
+        <div className="mt-6 p-4 bg-blue-50 rounded-lg">
+          <div className="flex items-center gap-2 mb-2">
+            <FaBullseye className="text-blue-800" />
+            <h4 className="font-semibold text-blue-800">Configurable via Props:</h4>
+          </div>
+          <code className="text-sm text-blue-700">
+            {`<HybridLiveCounter 
+  initialCount={10}
+  title="Custom Counter" 
+  step={5}
+  room="demo-room"
+  userId="user-123"
+/>`}
+          </code>
+        </div>
+      </div>
+
+      {/* Features Comparison */}
+      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+        <div className="bg-gradient-to-r from-purple-50 to-blue-100 px-6 py-4 border-b border-gray-200">
+          <div className="flex items-center gap-2">
+            <FaEye className="text-gray-900" />
+            <h3 className="text-lg font-semibold text-gray-900">Live vs Hybrid Comparison</h3>
+          </div>
+        </div>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Feature</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <div className="flex items-center gap-2">
+                    <FaFire className="text-orange-500" />
+                    Live Components
+                  </div>
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  <div className="flex items-center gap-2">
+                    <FaBolt className="text-yellow-500" />
+                    Hybrid Live
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">State Location</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Server Only</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">Client + Server</td>
+              </tr>
+              <tr className="bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Offline Support</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-red-500">
+                  <div className="flex items-center gap-2">
+                    <FaTimesCircle />
+                    None
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">
+                  <div className="flex items-center gap-2">
+                    <FaCheckCircle />
+                    Full Fallback
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Performance</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">
+                  <div className="flex items-center gap-2">
+                    <FaEye />
+                    Network Dependent
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">
+                  <div className="flex items-center gap-2">
+                    <FaRocket />
+                    Optimistic Updates
+                  </div>
+                </td>
+              </tr>
+              <tr className="bg-gray-50">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Conflict Resolution</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">
+                  <div className="flex items-center gap-2">
+                    <FaCog />
+                    Manual
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">
+                  <div className="flex items-center gap-2">
+                    <FaSync />
+                    Auto + Manual
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">State Validation</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-yellow-600">
+                  <div className="flex items-center gap-2">
+                    <FaCog />
+                    Basic
+                  </div>
+                </td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-green-600">
+                  <div className="flex items-center gap-2">
+                    <FaCheckCircle />
+                    Checksum + Version
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Architecture Explanation */}
+      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+        <div className="bg-gradient-to-r from-gray-50 to-purple-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">Hybrid Architecture</h3>
+          </div>
+        </div>
+        <div className="p-6 space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <FaCog className="text-gray-900" />
+                <h4 className="text-base font-semibold text-gray-900">Frontend (useHybridLiveComponent):</h4>
+              </div>
+              <pre className="bg-gray-900 text-gray-100 p-4 rounded-xl overflow-x-auto text-sm">
+{`const { 
+  state, status, conflicts,
+  call, sync, resolveConflict 
+} = useHybridLiveComponent('Counter', {
+  count: 0,
+  title: 'Hybrid Counter'
+}, {
+  enableValidation: true,
+  conflictResolution: 'auto',
+  syncStrategy: 'optimistic'
+})`}
+              </pre>
+            </div>
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <FaCog className="text-gray-900" />
+                <h4 className="text-base font-semibold text-gray-900">Features:</h4>
+              </div>
+              <ul className="space-y-2 text-sm text-gray-700">
+                <li className="flex items-center">
+                  <FaCheckCircle className="text-green-500 mr-2" />
+                  <strong>Estado inicial do frontend</strong> (component props)
+                </li>
+                <li className="flex items-center">
+                  <FaCheckCircle className="text-green-500 mr-2" />
+                  <strong>Zustand store local</strong> (performance + cache)
+                </li>
+                <li className="flex items-center">
+                  <FaCheckCircle className="text-green-500 mr-2" />
+                  <strong>Live Components sync</strong> (servidor autoritativo)
+                </li>
+                <li className="flex items-center">
+                  <FaCheckCircle className="text-green-500 mr-2" />
+                  <strong>Conflict detection</strong> (checksum + versioning)
+                </li>
+                <li className="flex items-center">
+                  <FaCheckCircle className="text-green-500 mr-2" />
+                  <strong>Auto reconnection</strong> (state sync on reconnect)
+                </li>
+                <li className="flex items-center">
+                  <FaCheckCircle className="text-green-500 mr-2" />
+                  <strong>Optimistic updates</strong> (immediate UI feedback)
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import {
+  FaRocket, FaReact, FaLink, FaDocker, FaFlask, FaPalette, FaFire, FaEye,
+  FaBolt
+} from 'react-icons/fa';
+
+export function OverviewPage() {
+  return (
+    <div className="relative">
+      {/* Hero Section with gradient background */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 rounded-3xl mb-12">
+        <div className="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20"></div>
+        <div className="relative px-8 py-16 text-center">
+          <div className="mx-auto max-w-4xl">
+            <div className="flex items-center justify-center gap-4 mb-6">
+              <FaFire className="text-5xl text-orange-400" />
+              <h1 className="text-5xl font-bold text-white bg-gradient-to-r from-blue-400 via-purple-400 to-emerald-400 bg-clip-text text-transparent">
+                FluxStack v1.4.0
+              </h1>
+              <FaBolt className="text-5xl text-yellow-400" />
+            </div>
+            <div className="flex items-center justify-center gap-2 mb-8">
+              <p className="text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
+                Framework full-stack TypeScript moderno com hot reload coordenado e Tailwind CSS 4!
+              </p>
+              <FaRocket className="text-xl text-blue-400" />
+            </div>
+            <div className="flex flex-wrap justify-center gap-3 mb-8">
+              <span className="px-4 py-2 bg-blue-500/20 text-blue-300 rounded-full text-sm font-medium border border-blue-500/30">
+                TypeScript
+              </span>
+              <span className="px-4 py-2 bg-purple-500/20 text-purple-300 rounded-full text-sm font-medium border border-purple-500/30">
+                Elysia.js
+              </span>
+              <span className="px-4 py-2 bg-emerald-500/20 text-emerald-300 rounded-full text-sm font-medium border border-emerald-500/30">
+                React 19
+              </span>
+              <span className="px-4 py-2 bg-orange-500/20 text-orange-300 rounded-full text-sm font-medium border border-orange-500/30">
+                Tailwind CSS 4
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Features Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-12">
+        {[
+          {
+            icon: <FaRocket className="text-blue-500" />,
+            title: "Elysia.js",
+            description: "Backend rápido e type-safe com Bun runtime",
+            color: "from-blue-500 to-cyan-500"
+          },
+          {
+            icon: <FaReact className="text-purple-500" />,
+            title: "React + Vite",
+            description: "Frontend moderno com hot-reload ultrarrápido",
+            color: "from-purple-500 to-pink-500"
+          },
+          {
+            icon: <FaLink className="text-emerald-500" />,
+            title: "Eden Treaty",
+            description: "API type-safe com inferência automática de tipos",
+            color: "from-emerald-500 to-teal-500"
+          },
+          {
+            icon: <FaDocker className="text-indigo-500" />,
+            title: "Docker Ready",
+            description: "Deploy fácil com configurações otimizadas",
+            color: "from-indigo-500 to-purple-500"
+          },
+          {
+            icon: <FaFlask className="text-orange-500" />,
+            title: "Testing",
+            description: "Vitest + Testing Library configurados",
+            color: "from-orange-500 to-red-500"
+          },
+          {
+            icon: <FaPalette className="text-teal-500" />,
+            title: "Tailwind CSS 4",
+            description: "Styling moderno e responsivo",
+            color: "from-teal-500 to-green-500"
+          }
+        ].map((feature, index) => (
+          <div
+            key={index}
+            className="group relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-200"
+          >
+            <div className={`absolute inset-0 bg-gradient-to-r ${feature.color} opacity-0 group-hover:opacity-5 rounded-2xl transition-opacity duration-300`}></div>
+            <div className="relative">
+              <div className="text-4xl mb-4">{feature.icon}</div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">{feature.title}</h3>
+              <p className="text-gray-600 leading-relaxed">{feature.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Tech Stack Section */}
+      <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-8 py-6 border-b border-gray-200">
+          <h2 className="text-2xl font-bold text-gray-900 text-center">Stack Tecnológica</h2>
+        </div>
+        <div className="p-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {[
+              {
+                title: "Backend",
+                color: "blue",
+                items: [
+                  "Elysia.js - Web framework",
+                  "Bun - Runtime & package manager",
+                  "TypeScript - Type safety"
+                ]
+              },
+              {
+                title: "Frontend",
+                color: "purple",
+                items: [
+                  "React 19 - UI library",
+                  "Vite - Build tool",
+                  "Tailwind CSS 4 - Styling"
+                ]
+              },
+              {
+                title: "Comunicação",
+                color: "emerald",
+                items: [
+                  "Eden Treaty - Type-safe API",
+                  "End-to-end TypeScript",
+                  "Automatic type inference"
+                ]
+              }
+            ].map((category, index) => (
+              <div key={index} className="space-y-4">
+                <h3 className={`text-lg font-semibold text-${category.color}-600 pb-2 border-b-2 border-${category.color}-100`}>
+                  {category.title}
+                </h3>
+                <ul className="space-y-3">
+                  {category.items.map((item, itemIndex) => (
+                    <li key={itemIndex} className="flex items-start gap-3 text-gray-600">
+                      <div className={`w-2 h-2 rounded-full bg-${category.color}-400 flex-shrink-0 mt-2`}></div>
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/client/src/store/README.md

@@ -0,0 +1,43 @@
+# FluxStack State Management
+
+This directory contains your application's state management using FluxStack's core state utilities.
+
+## Using FluxStack Core State
+
+FluxStack provides core utilities for state management that are protected from accidental modification:
+
+```typescript
+// Import from core
+import { createUserStore, createFluxStore } from '../../../core/client/state/index.js'
+
+// Create stores using FluxStack conventions
+export const useUserStore = createUserStore({
+  name: 'user-store',
+  persist: true
+})
+
+// Create custom stores
+export const useAppStore = createFluxStore(
+  (set, get) => ({
+    // Your app-specific state
+  }),
+  {
+    name: 'app-store',
+    persist: false
+  }
+)
+```
+
+## Available Core Features
+
+- **createUserStore()**: Pre-built user authentication store
+- **createFluxStore()**: Factory for custom stores with persistence
+- **createAuthHook()**: Authentication hook factory
+
+## Benefits
+
+- ✅ **Protected Core**: Framework code is safe from accidental changes
+- ✅ **Consistent API**: All stores follow FluxStack conventions
+- ✅ **Built-in Features**: Persistence, logging, error handling
+- ✅ **Type Safety**: Full TypeScript support
+- ✅ **Extensible**: Easy to customize for your needs

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

@@ -0,0 +1,16 @@
+/**
+ * FluxStack Store Index
+ * Re-exports all Zustand stores and utilities
+ */
+
+// Stores
+export { useUserStore } from './slices/userSlice'
+export { useUIStore } from './slices/uiSlice'
+
+// Types
+export type { User, LoginCredentials, RegisterData } from './slices/userSlice'
+export type { Notification, Modal } from './slices/uiSlice'
+
+// Utility hooks
+export { useAuth } from '../hooks/useAuth'
+export { useNotifications } from '../hooks/useNotifications'

package/app/client/src/store/slices/uiSlice.ts

@@ -0,0 +1,151 @@
+/**
+ * UI Store with Zustand
+ * Manages global UI state like modals, notifications, theme, etc.
+ */
+
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+export interface Notification {
+  id: string
+  type: 'success' | 'error' | 'warning' | 'info'
+  title: string
+  message: string
+  duration?: number
+  timestamp: number
+}
+
+export interface Modal {
+  id: string
+  component: string
+  props?: Record<string, any>
+  closable?: boolean
+}
+
+interface UIState {
+  // State
+  theme: 'light' | 'dark' | 'system'
+  sidebarOpen: boolean
+  notifications: Notification[]
+  modals: Modal[]
+  loading: {
+    global: boolean
+    operations: Record<string, boolean>
+  }
+
+  // Actions
+  setTheme: (theme: 'light' | 'dark' | 'system') => void
+  toggleSidebar: () => void
+  setSidebarOpen: (open: boolean) => void
+  
+  // Notifications
+  addNotification: (notification: Omit<Notification, 'id' | 'timestamp'>) => void
+  removeNotification: (id: string) => void
+  clearNotifications: () => void
+  
+  // Modals
+  openModal: (modal: Omit<Modal, 'id'>) => void
+  closeModal: (id: string) => void
+  closeAllModals: () => void
+  
+  // Loading
+  setGlobalLoading: (loading: boolean) => void
+  setOperationLoading: (operation: string, loading: boolean) => void
+  clearOperationLoading: (operation: string) => void
+}
+
+export const useUIStore = create<UIState>()(
+  persist(
+    (set, get) => ({
+      // Initial state
+      theme: 'system',
+      sidebarOpen: true,
+      notifications: [],
+      modals: [],
+      loading: {
+        global: false,
+        operations: {}
+      },
+
+      // Theme actions
+      setTheme: (theme) => set({ theme }),
+
+      // Sidebar actions
+      toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+      setSidebarOpen: (open) => set({ sidebarOpen: open }),
+
+      // Notification actions
+      addNotification: (notification) => {
+        const newNotification: Notification = {
+          ...notification,
+          id: Math.random().toString(36).substr(2, 9),
+          timestamp: Date.now()
+        }
+        
+        set((state) => ({
+          notifications: [...state.notifications, newNotification]
+        }))
+
+        // Auto-remove notification after duration
+        if (notification.duration !== 0) {
+          setTimeout(() => {
+            get().removeNotification(newNotification.id)
+          }, notification.duration || 5000)
+        }
+      },
+
+      removeNotification: (id) => set((state) => ({
+        notifications: state.notifications.filter(n => n.id !== id)
+      })),
+
+      clearNotifications: () => set({ notifications: [] }),
+
+      // Modal actions
+      openModal: (modal) => {
+        const newModal: Modal = {
+          ...modal,
+          id: Math.random().toString(36).substr(2, 9)
+        }
+        
+        set((state) => ({
+          modals: [...state.modals, newModal]
+        }))
+      },
+
+      closeModal: (id) => set((state) => ({
+        modals: state.modals.filter(m => m.id !== id)
+      })),
+
+      closeAllModals: () => set({ modals: [] }),
+
+      // Loading actions
+      setGlobalLoading: (loading) => set((state) => ({
+        loading: { ...state.loading, global: loading }
+      })),
+
+      setOperationLoading: (operation, loading) => set((state) => ({
+        loading: {
+          ...state.loading,
+          operations: {
+            ...state.loading.operations,
+            [operation]: loading
+          }
+        }
+      })),
+
+      clearOperationLoading: (operation) => set((state) => {
+        const { [operation]: _, ...operations } = state.loading.operations
+        return {
+          loading: { ...state.loading, operations }
+        }
+      })
+    }),
+    {
+      name: 'ui-store',
+      partialize: (state) => ({
+        theme: state.theme,
+        sidebarOpen: state.sidebarOpen
+      })
+    }
+  )
+)