create-fluxstack 1.10.1 → 1.12.0

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

@@ -1,193 +0,0 @@
-// 🚀 Quick Upload Test - Compact upload tester for home page
-import { useState, useRef } from 'react'
-import { useTypedLiveComponent, useChunkedUpload, useLiveComponents } from '@/core/client'
-
-// Import component type DIRECTLY from backend - full type inference!
-import type { LiveFileUploadComponent } from '@/server/live/LiveFileUploadComponent'
-
-export function QuickUploadTest() {
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
-
-  // Get sendMessageAndWait from LiveComponents context
-  const { sendMessageAndWait } = useLiveComponents()
-
-  // Setup Live Component with full type inference
-  const {
-    state,
-    call,
-    componentId,
-    connected
-  } = useTypedLiveComponent<LiveFileUploadComponent>('LiveFileUpload', {
-    uploadedFiles: [],
-    maxFiles: 10
-  })
-
-  // Setup Chunked Upload with Adaptive Chunking
-  const {
-    uploading,
-    progress,
-    error: uploadError,
-    uploadFile,
-    cancelUpload,
-    reset: resetUpload,
-    bytesUploaded,
-    totalBytes
-  } = useChunkedUpload(componentId || '', {
-    chunkSize: 64 * 1024,
-    maxFileSize: 500 * 1024 * 1024,
-    allowedTypes: [], // Aceita todos os tipos
-    sendMessageAndWait,
-
-    // Enable Adaptive Chunking
-    adaptiveChunking: true,
-    adaptiveConfig: {
-      minChunkSize: 16 * 1024,
-      maxChunkSize: 512 * 1024,
-      initialChunkSize: 64 * 1024,
-      targetLatency: 200,
-      adjustmentFactor: 1.5,
-      measurementWindow: 3
-    },
-
-    onComplete: async (response) => {
-      if (selectedFile && response.fileUrl) {
-        await call('onFileUploaded', {
-          filename: selectedFile.name,
-          fileUrl: response.fileUrl
-        })
-      }
-      setSelectedFile(null)
-      resetUpload()
-      if (fileInputRef.current) {
-        fileInputRef.current.value = ''
-      }
-    },
-
-    onError: (error) => {
-      console.error('Upload error:', error)
-    }
-  })
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      setSelectedFile(file)
-      resetUpload()
-    }
-  }
-
-  const handleUpload = async () => {
-    if (!selectedFile) return
-    await uploadFile(selectedFile)
-  }
-
-  const formatBytes = (bytes: number): string => {
-    if (bytes === 0) return '0 B'
-    const k = 1024
-    const sizes = ['B', 'KB', 'MB']
-    const i = Math.floor(Math.log(bytes) / Math.log(k))
-    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
-  }
-
-  if (!connected) {
-    return (
-      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
-        <div className="text-yellow-400 text-sm">🔌 Connecting...</div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-all">
-      <div className="flex items-center gap-3 mb-4">
-        <div className="text-3xl">📤</div>
-        <div>
-          <h3 className="text-lg font-semibold text-white">Adaptive Upload Test</h3>
-          <p className="text-xs text-gray-400">Dynamic chunk sizing enabled</p>
-        </div>
-      </div>
-
-      {/* File Input */}
-      <div className="space-y-3">
-        <input
-          ref={fileInputRef}
-          type="file"
-          onChange={handleFileSelect}
-          disabled={uploading}
-          className="block w-full text-sm text-gray-300 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-purple-600 file:text-white hover:file:bg-purple-700 disabled:opacity-50 cursor-pointer"
-        />
-
-        {/* Selected File */}
-        {selectedFile && !uploading && (
-          <div className="text-sm text-gray-300">
-            📁 {selectedFile.name} ({formatBytes(selectedFile.size)})
-          </div>
-        )}
-
-        {/* Upload Progress */}
-        {uploading && (
-          <div className="space-y-2">
-            <div className="flex justify-between text-xs text-gray-300">
-              <span>Uploading...</span>
-              <span>{progress.toFixed(1)}%</span>
-            </div>
-            <div className="w-full bg-gray-700 rounded-full h-2">
-              <div
-                className="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full transition-all duration-300"
-                style={{ width: `${progress}%` }}
-              />
-            </div>
-            <div className="text-xs text-gray-400">
-              {formatBytes(bytesUploaded)} / {formatBytes(totalBytes)}
-            </div>
-          </div>
-        )}
-
-        {/* Error */}
-        {uploadError && (
-          <div className="text-xs text-red-400">❌ {uploadError}</div>
-        )}
-
-        {/* Buttons */}
-        <div className="flex gap-2">
-          <button
-            onClick={handleUpload}
-            disabled={!selectedFile || uploading}
-            className="flex-1 px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:shadow-lg hover:shadow-purple-500/50 disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm transition-all"
-          >
-            {uploading ? '⏳ Uploading...' : '🚀 Upload'}
-          </button>
-
-          {uploading && (
-            <button
-              onClick={cancelUpload}
-              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium text-sm"
-            >
-              ❌
-            </button>
-          )}
-        </div>
-
-        {/* Last Upload Info */}
-        {state.uploadedFiles.length > 0 && !uploading && (
-          <div className="pt-3 border-t border-white/10">
-            <div className="text-xs text-green-400">
-              ✅ Last: {state.uploadedFiles[0].filename}
-            </div>
-          </div>
-        )}
-
-        {/* Quick Stats */}
-        <div className="pt-3 border-t border-white/10">
-          <div className="text-xs text-gray-400 space-y-1">
-            <div>🚀 Adaptive: 16KB - 512KB</div>
-            <div>📊 Target: 200ms/chunk</div>
-            <div>💾 Max: 500MB</div>
-            <div>📁 All file types</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}

package/app/client/tsconfig.app.json

@@ -1,45 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Path mapping (alias support) */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "@/components/*": ["./src/components/*"],
-      "@/utils/*": ["./src/utils/*"],
-      "@/hooks/*": ["./src/hooks/*"],
-      "@/assets/*": ["./src/assets/*"],
-      "@/lib/*": ["./src/lib/*"],
-      "@/types/*": ["./src/types/*"],
-      "@/shared/*": ["../shared/*"],
-      "@/server/*": ["../server/*"],
-      "@/core/*": ["../../core/*"],
-      "@/config/*": ["../../config/*"],
-      "fluxstack": ["../../core/client/fluxstack"],
-      "elysia": ["../../node_modules/elysia"]
-    },
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/app/client/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/app/client/zustand-setup.md

@@ -1,65 +0,0 @@
-# Zustand Setup for FluxStack
-
-## Installation
-
-Add Zustand to your project:
-
-```bash
-# Using npm
-npm install zustand
-
-# Using yarn
-yarn add zustand
-
-# Using pnpm
-pnpm add zustand
-
-# Using bun
-bun add zustand
-```
-
-## Package.json Dependencies
-
-Add to your `package.json`:
-
-```json
-{
-  "dependencies": {
-    "zustand": "^4.4.7"
-  }
-}
-```
-
-## TypeScript Support
-
-Zustand has built-in TypeScript support, no additional packages needed.
-
-## Optional: DevTools Integration
-
-For Redux DevTools integration (already included in our stores):
-
-```bash
-# No additional packages needed - works out of the box
-```
-
-## Middleware
-
-Our stores already use the `persist` middleware. Other useful middleware:
-
-```bash
-# For more advanced middleware (optional)
-npm install immer  # For immutable updates
-npm install zustand-middleware-yjs  # For collaborative editing
-```
-
-## Ready to Use
-
-The FluxStack template already includes:
-- ✅ User authentication store
-- ✅ UI state store  
-- ✅ Persistence middleware
-- ✅ DevTools integration
-- ✅ Utility hooks
-- ✅ TypeScript support
-
-Just start using the stores in your components!

package/app/server/backend-only.ts

@@ -1,18 +0,0 @@
-/**
- * Backend Standalone Entry Point
- *
- * This is a minimal wrapper for starting the backend in standalone mode.
- * The core logic is protected in @/core/server/backend-entry.ts
- *
- * You can customize the configuration here if needed.
- */
-
-import { startBackend, createBackendConfig } from "@/core/server/backend-entry"
-import { appInstance } from "./app"
-import { serverConfig } from "@/config/server.config"
-
-// Create backend configuration from declarative config
-const backendConfig = createBackendConfig(serverConfig)
-
-// Start backend in standalone mode
-startBackend(appInstance, backendConfig)

package/app/server/live/LiveClockComponent.ts

@@ -1,215 +0,0 @@
-// 🔥 LiveClock - Real-time Clock Live Component
-// Automatically updates every second and broadcasts to all connected clients
-import { LiveComponent } from "@/core/types/types";
-
-interface LiveClockState {
-  currentTime: string; // Formatted time string
-  timeZone: string; // IANA timezone (e.g., 'America/Sao_Paulo')
-  format: '12h' | '24h'; // Time format preference
-  showSeconds: boolean; // Toggle seconds display
-  showDate: boolean; // Toggle date display
-  lastSync: Date; // Last sync timestamp
-  serverUptime: number; // Server uptime in seconds
-}
-
-export class LiveClockComponent extends LiveComponent<LiveClockState> {
-  private clockInterval: NodeJS.Timeout | null = null;
-  private startTime: Date;
-
-  constructor(initialState: LiveClockState, ws: any, options?: { room?: string; userId?: string }) {
-    const now = new Date();
-    super({
-      currentTime: now.toLocaleTimeString('pt-BR'),
-      timeZone: 'America/Sao_Paulo',
-      format: '24h',
-      showSeconds: true,
-      showDate: true,
-      lastSync: now,
-      serverUptime: 0,
-      ...initialState
-    }, ws, options);
-    
-    this.startTime = now;
-    console.log(`🕐 ${this.constructor.name} created: ${this.id}`);
-    
-    // Start the real-time clock immediately
-    this.startClock();
-  }
-
-  private startClock() {
-    // Clear any existing interval
-    if (this.clockInterval) {
-      clearInterval(this.clockInterval);
-    }
-
-    // Update clock every second
-    this.clockInterval = setInterval(() => {
-      this.updateClock();
-    }, 1000);
-
-    // Initial update
-    this.updateClock();
-  }
-
-  private updateClock() {
-    const now = new Date();
-    const uptimeMs = now.getTime() - this.startTime.getTime();
-    
-    let timeString;
-    if (this.state.format === '12h') {
-      timeString = now.toLocaleTimeString('en-US', {
-        hour12: true,
-        hour: 'numeric',
-        minute: '2-digit',
-        second: this.state.showSeconds ? '2-digit' : undefined
-      });
-    } else {
-      timeString = now.toLocaleTimeString('pt-BR', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-        second: this.state.showSeconds ? '2-digit' : undefined
-      });
-    }
-
-    this.setState({
-      currentTime: timeString,
-      lastSync: now,
-      serverUptime: Math.floor(uptimeMs / 1000)
-    });
-
-    // Broadcast time update to all connected clients
-    if (this.room) {
-      this.broadcast('CLOCK_TICK', {
-        currentTime: timeString,
-        timestamp: now.toISOString(),
-        serverUptime: Math.floor(uptimeMs / 1000)
-      });
-    }
-  }
-
-  async setTimeFormat(payload: { format: '12h' | '24h' }) {
-    const { format } = payload;
-    
-    if (format !== '12h' && format !== '24h') {
-      throw new Error('Invalid time format. Use "12h" or "24h"');
-    }
-
-    this.setState({ 
-      format,
-      lastSync: new Date()
-    });
-
-    // Immediately update the clock display with new format
-    this.updateClock();
-
-    console.log(`🕐 Time format changed to: ${format}`);
-    return { success: true, format };
-  }
-
-  async toggleSeconds(payload?: { showSeconds?: boolean }) {
-    const showSeconds = payload?.showSeconds ?? !this.state.showSeconds;
-    
-    this.setState({ 
-      showSeconds,
-      lastSync: new Date()
-    });
-
-    // Update clock display immediately
-    this.updateClock();
-
-    console.log(`🕐 Seconds display: ${showSeconds ? 'ON' : 'OFF'}`);
-    return { success: true, showSeconds };
-  }
-
-  async toggleDate(payload?: { showDate?: boolean }) {
-    const showDate = payload?.showDate ?? !this.state.showDate;
-    
-    this.setState({ 
-      showDate,
-      lastSync: new Date()
-    });
-
-    console.log(`🕐 Date display: ${showDate ? 'ON' : 'OFF'}`);
-    return { success: true, showDate };
-  }
-
-  async setTimeZone(payload: { timeZone: string }) {
-    const { timeZone } = payload;
-    
-    // Basic timezone validation
-    try {
-      new Date().toLocaleString('en-US', { timeZone });
-    } catch (error) {
-      throw new Error(`Invalid timezone: ${timeZone}`);
-    }
-
-    this.setState({ 
-      timeZone,
-      lastSync: new Date()
-    });
-
-    console.log(`🕐 Timezone changed to: ${timeZone}`);
-    return { success: true, timeZone };
-  }
-
-  async getServerInfo() {
-    console.log(`🕐 getServerInfo called for component: ${this.id}`);
-    
-    const now = new Date();
-    const uptimeMs = now.getTime() - this.startTime.getTime();
-    
-    const result = {
-      success: true,
-      info: {
-        serverTime: now.toISOString(),
-        localTime: now.toLocaleString('pt-BR'),
-        uptime: Math.floor(uptimeMs / 1000),
-        uptimeFormatted: this.formatUptime(Math.floor(uptimeMs / 1000)),
-        timezone: this.state.timeZone,
-        componentId: this.id,
-        startTime: this.startTime.toISOString()
-      }
-    };
-    
-    console.log(`🕐 getServerInfo result:`, result);
-    return result;
-  }
-
-  async syncTime() {
-    // Force a manual time sync
-    this.updateClock();
-    
-    console.log(`🕐 Manual time sync performed`);
-    return { 
-      success: true, 
-      syncTime: new Date().toISOString(),
-      currentTime: this.state.currentTime
-    };
-  }
-
-  private formatUptime(seconds: number): string {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = seconds % 60;
-    
-    if (hours > 0) {
-      return `${hours}h ${minutes}m ${secs}s`;
-    } else if (minutes > 0) {
-      return `${minutes}m ${secs}s`;
-    } else {
-      return `${secs}s`;
-    }
-  }
-
-  public destroy() {
-    // Clean up the interval when component is destroyed
-    if (this.clockInterval) {
-      clearInterval(this.clockInterval);
-      this.clockInterval = null;
-      console.log(`🕐 Clock interval cleared for component: ${this.id}`);
-    }
-    
-    super.destroy();
-  }
-}

package/app/server/live/LiveFileUploadComponent.ts

@@ -1,77 +0,0 @@
-// 📤 Live File Upload Component - Universal file upload with chunking
-import { LiveComponent } from '@/core/types/types'
-
-interface FileUploadState {
-  uploadedFiles: Array<{
-    id: string
-    filename: string
-    url: string
-    uploadedAt: number
-  }>
-  maxFiles: number
-}
-
-export class LiveFileUploadComponent extends LiveComponent<FileUploadState> {
-  constructor(initialState: FileUploadState, ws: any, options?: { room?: string; userId?: string }) {
-    super({
-      uploadedFiles: [],
-      maxFiles: 10,
-      ...initialState
-    }, ws, options)
-  }
-
-  /**
-   * Handle successful file upload
-   * This is called from the client after useChunkedUpload completes
-   */
-  async onFileUploaded(payload: { filename: string; fileUrl: string }): Promise<void> {
-    const { filename, fileUrl } = payload
-
-    // Add new file to the list
-    const newFile = {
-      id: `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-      filename,
-      url: fileUrl,
-      uploadedAt: Date.now()
-    }
-
-    // Limit to maxFiles
-    const updatedFiles = [newFile, ...this.state.uploadedFiles].slice(0, this.state.maxFiles)
-
-    // Update state and broadcast to all clients
-    this.setState({
-      uploadedFiles: updatedFiles
-    })
-  }
-
-  /**
-   * Remove an uploaded file
-   */
-  async removeFile(payload: { fileId: string }): Promise<void> {
-    this.setState({
-      uploadedFiles: this.state.uploadedFiles.filter(file => file.id !== payload.fileId)
-    })
-  }
-
-  /**
-   * Clear all uploaded files
-   */
-  async clearAll(): Promise<void> {
-    this.setState({
-      uploadedFiles: []
-    })
-  }
-
-  /**
-   * Get upload statistics
-   */
-  async getStats(): Promise<{
-    totalFiles: number
-    remainingSlots: number
-  }> {
-    return {
-      totalFiles: this.state.uploadedFiles.length,
-      remainingSlots: this.state.maxFiles - this.state.uploadedFiles.length
-    }
-  }
-}