create-fluxstack 1.9.1 → 1.12.0

package/app/client/SIMPLIFICATION.md

@@ -1,140 +0,0 @@
-# 🎨 FluxStack Client - Simplified Version
-
-This is a **simplified, single-page version** of the FluxStack client, inspired by the clean and modern design of Vite's landing page.
-
-## 🚀 What Changed?
-
-### ✅ **Kept (Essential)**
-- ✅ **Eden Treaty** - Core type-safe API client
-- ✅ **React 19** - Modern React with hooks
-- ✅ **Vite 7** - Lightning-fast dev server
-- ✅ **TailwindCSS** - Utility-first styling
-- ✅ **TypeScript** - Full type safety
-- ✅ **react-icons** - Icon library
-
-### ❌ **Removed (Complexity)**
-- ❌ **React Router** - No more multi-page routing
-- ❌ **Zustand** - Removed complex state management (using simple `useState`)
-- ❌ **Multiple Pages** - Consolidated into single page (Overview, Demo, HybridLive, ApiDocs, CryptoAuth)
-- ❌ **Complex Error System** - Simplified error handling
-- ❌ **Navigation System** - No more tabs and complex navigation
-- ❌ **Detailed API Status Section** - Replaced with simple badge
-- ❌ **Complex Live Component UIs** - Simplified to minimal clock display
-
-### ✅ **Kept (Advanced Features)**
-- ✅ **LiveComponents** - Live Clock provido via LiveComponent
-- ✅ **LiveComponentsProvider** - Full real-time capabilities maintained
-- ✅ **Hybrid Live Component** - Clock synced with server in real-time
-
-## 📊 Comparison
-
-| Metric | Before | After | Reduction |
-|--------|--------|-------|-----------|
-| **Files** | 43 | ~10 | **-76%** |
-| **Components** | 11 | 2 | **-82%** |
-| **Pages** | 5 | 1 | **-80%** |
-| **Dependencies** | 27 | 19 | **-30%** |
-| **Lines in App.tsx** | 331 | 213 | **-36%** |
-| **Live Components** | 6 complex | 1 minimal | **-83%** |
-
-## 🎯 What Does It Show?
-
-The simplified client demonstrates:
-
-1. **🎨 Minimalist Design** - Clean, centered design inspired by Next.js, React, and Vite
-2. **⚡ Simple API Status** - Single badge showing API online/offline
-3. **🚀 Core Features** - 4 feature cards highlighting main capabilities
-4. **🕐 Live Clock** - Real LiveComponent synced with server in real-time
-5. **📖 Quick Actions** - Direct links to API Docs, GitHub, and API Demo
-6. **🔥 Clean but Powerful** - Minimalist UI with full real-time capabilities
-
-## 📝 Structure
-
-```
-app/client/src/
-├── App.tsx              # Single-page application (213 lines)
-│                        # - AppContent component (main UI)
-│                        # - MinimalLiveClock component (LiveComponent)
-│                        # - LiveComponentsProvider wrapper
-├── main.tsx             # Entry point (simplified)
-├── index.css            # Minimal global styles
-├── vite-env.d.ts        # Vite type definitions
-├── assets/              # Static assets
-│   └── react.svg        # React logo
-└── lib/                 # Core utilities
-    ├── eden-api.ts      # Eden Treaty API client
-    └── errors.ts        # Error handling utilities
-```
-
-**Total files in src/**: 6 core files (vs 43+ before)
-
-## 🎨 Design Philosophy
-
-Inspired by **Next.js, React, and Vite landing pages**:
-- Everything centered vertically and horizontally
-- Large animated logo (fire icon with pulse animation)
-- Minimal text, maximum impact
-- Simple API status badge (online/offline)
-- 4 feature cards in responsive grid
-- **Live Clock via LiveComponent** - Real-time sync with server
-- Clean action buttons at bottom
-- No background blob animations (clean and fast)
-- Mobile-first responsive design
-- **Full Live Components support** - Maintains advanced real-time features
-
-## 🔧 How to Use
-
-```bash
-# Start development server (backend + frontend)
-bun run dev
-
-# Frontend only
-bun run dev:frontend
-
-# Backend only
-bun run dev:backend
-```
-
-The page will automatically show:
-- ✅ **Green badge** - Backend is running and healthy
-- ⚠️ **Yellow badge** - Checking backend status
-- ❌ **Red badge** - Backend is offline
-
-## 🎯 When to Use This Version?
-
-**Use this ultra-simplified version when:**
-- You want the cleanest possible presentation
-- You're showcasing FluxStack to newcomers or investors
-- You need a professional landing page
-- You want maximum simplicity (like Next.js/React/Vite)
-- You prefer minimalism over features
-- You want fast loading and minimal JavaScript
-
-**Use the full version when:**
-- You need multiple pages/routes
-- You require complex state management
-- You want real-time features (WebSocket)
-- You need complete demos (CRUD, Auth, etc.)
-- You're building a full application with all features
-
-## 💡 Future Enhancements (Optional)
-
-If you want to extend this simplified version, consider adding:
-- [ ] Simple counter demo using Eden Treaty
-- [ ] User CRUD with minimal UI
-- [ ] Dark/Light theme toggle
-- [ ] Smooth scroll to sections
-- [ ] More feature cards
-
-## 📚 References
-
-- [FluxStack Documentation](../../ai-context/)
-- [Eden Treaty Guide](../../ai-context/development/eden-treaty-guide.md)
-- [Vite Documentation](https://vite.dev)
-- [React Documentation](https://react.dev)
-
----
-
-**🎯 Goal**: Provide a clean, simple, and beautiful client that showcases FluxStack's core value proposition without overwhelming complexity.
-
-**Made with ❤️ by FluxStack Team**

package/app/client/frontend-only.ts

@@ -1,12 +0,0 @@
-// Frontend standalone entry point
-import { startFrontendOnly } from "@/core/client/standalone"
-
-// Configuração para frontend standalone
-const frontendConfig = {
-  clientPath: "app/client",
-  vitePort: (globalThis as any).process?.env?.FRONTEND_PORT || 5173,
-  apiUrl: (globalThis as any).process?.env?.API_URL || "http://localhost:3001"
-}
-
-// Iniciar apenas o frontend
-startFrontendOnly(frontendConfig)

package/app/client/tsconfig.app.json

@@ -1,44 +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/*"],
-      "@/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/routes/env-test.ts

@@ -1,110 +0,0 @@
-/**
- * 🔧 Environment Test Route
- * Displays current configuration for debugging purposes
- */
-
-import { Elysia, t } from 'elysia'
-import { appConfig } from '@/config/app.config'
-import { serverConfig } from '@/config/server.config'
-import { loggerConfig } from '@/config/logger.config'
-import { appRuntimeConfig } from '@/config/runtime.config'
-import { helpers } from '@/core/utils/env'
-
-// Response schema for environment test
-const EnvTestResponseSchema = t.Object({
-  message: t.String(),
-  timestamp: t.String(),
-  serverConfig: t.Object({
-    port: t.Number(),
-    host: t.String(),
-    apiPrefix: t.String(),
-    appName: t.String(),
-    appVersion: t.String(),
-    cors: t.Object({
-      origins: t.Array(t.String()),
-      methods: t.Array(t.String()),
-      credentials: t.Boolean()
-    }),
-    client: t.Object({
-      port: t.Number(),
-      target: t.String(),
-      sourceMaps: t.Boolean()
-    }),
-    features: t.Object({
-      enableSwagger: t.Boolean(),
-      enableMetrics: t.Boolean(),
-      enableMonitoring: t.Boolean()
-    })
-  }),
-  environment: t.Object({
-    NODE_ENV: t.String(),
-    DEBUG: t.Boolean(),
-    LOG_LEVEL: t.String()
-  }),
-  urls: t.Object({
-    server: t.String(),
-    client: t.String(),
-    swagger: t.String()
-  }),
-  system: t.Object({
-    version: t.String(),
-    features: t.Array(t.String())
-  })
-}, {
-  description: 'Environment and configuration information for debugging'
-})
-
-/**
- * Environment test endpoint
- * Shows declarative config system information
- */
-export const envTestRoute = new Elysia({ prefix: '/api', tags: ['Development'] })
-  .get('/env-test', () => {
-    return {
-      message: '⚡ Declarative Config System!',
-      timestamp: new Date().toISOString(),
-      serverConfig: {
-        port: serverConfig.server.port,
-        host: serverConfig.server.host,
-        apiPrefix: serverConfig.server.apiPrefix,
-        appName: appConfig.name,
-        appVersion: appConfig.version,
-        cors: {
-          origins: serverConfig.cors.origins,
-          methods: serverConfig.cors.methods,
-          credentials: serverConfig.cors.credentials
-        },
-        client: {
-          port: serverConfig.server.backendPort,
-          target: 'es2020',
-          sourceMaps: false
-        },
-        features: {
-          enableSwagger: appRuntimeConfig.values.enableSwagger,
-          enableMetrics: appRuntimeConfig.values.enableMetrics,
-          enableMonitoring: appRuntimeConfig.values.enableMonitoring
-        }
-      },
-      environment: {
-        NODE_ENV: appConfig.env,
-        DEBUG: appRuntimeConfig.values.enableDebugMode,
-        LOG_LEVEL: loggerConfig.level
-      },
-      urls: {
-        server: helpers.getServerUrl(),
-        client: helpers.getClientUrl(),
-        swagger: `${helpers.getServerUrl()}/swagger`
-      },
-      system: {
-        version: 'declarative-config',
-        features: ['type-safe', 'validated', 'declarative', 'runtime-reload']
-      }
-    }
-  }, {
-    detail: {
-      summary: 'Environment Configuration Test',
-      description: 'Returns current environment configuration, server settings, and runtime features for debugging and validation',
-      tags: ['Development', 'Configuration', 'Debug']
-    },
-    response: EnvTestResponseSchema
-  })

package/core/client/hooks/index.ts

@@ -1,7 +0,0 @@
-/**
- * Core Client Hooks
- * FluxStack hook utilities exports
- */
-
-export { createAuthHook } from './useAuth'
-export type { AuthHook } from './useAuth'