create-fluxstack 1.8.1 → 1.9.1

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

@@ -1,391 +0,0 @@
-// 🔥 Sidebar Navigation Component
-
-import { useHybridLiveComponent } from '@/core/client'
-import { 
-  FaHome, 
-  FaUser, 
-  FaCog, 
-  FaFolder, 
-  FaServer,
-  FaBars,
-  FaTimes,
-  FaMoon,
-  FaSun,
-  FaBell,
-  FaTools
-} from 'react-icons/fa'
-
-export interface SidebarNavigationState {
-  currentPage: 'dashboard' | 'profile' | 'settings' | 'files' | 'analytics' | 'config'
-  isCollapsed: boolean
-  theme: 'light' | 'dark'
-  notifications: {
-    profile: number
-    settings: number
-    files: number
-    analytics: number
-    config: number
-  }
-  lastNavigation: number
-}
-
-const initialState: SidebarNavigationState = {
-  currentPage: 'dashboard',
-  isCollapsed: false,
-  theme: 'light',
-  notifications: {
-    profile: 0,
-    settings: 0,
-    files: 0,
-    analytics: 0,
-    config: 0
-  },
-  lastNavigation: Date.now()
-}
-
-interface SidebarNavigationProps {
-  onPageChange: (page: string) => void
-}
-
-export function SidebarNavigation({ onPageChange }: SidebarNavigationProps) {
-  const { state, call, connected, status, error } = useHybridLiveComponent<SidebarNavigationState>(
-    'SidebarNavigation', 
-    initialState,
-    { debug: true }
-  )
-
-  // Show loading state
-  if (!connected || status !== 'synced') {
-    const getStatusMessage = () => {
-      switch (status) {
-        case 'connecting':
-          return '🔄 Conectando navegação...'
-        case 'reconnecting':
-          return '🔄 Reconectando menu...'
-        case 'mounting':
-          return '🚀 Carregando menu...'
-        case 'loading':
-          return '⏳ Carregando...'
-        case 'error':
-          return '❌ Erro na navegação'
-        default:
-          return '🔄 Preparando menu...'
-      }
-    }
-
-    return (
-      <div style={{
-        width: '280px',
-        height: '100vh',
-        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-        color: 'white',
-        padding: '2rem',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center'
-      }}>
-        <FaBars size={32} style={{ marginBottom: '1rem' }} />
-        <p>{getStatusMessage()}</p>
-        {error && (
-          <p style={{ fontSize: '0.9rem', marginTop: '0.5rem', opacity: 0.8 }}>
-            {error}
-          </p>
-        )}
-      </div>
-    )
-  }
-
-  const isDark = state.theme === 'dark'
-  const sidebarWidth = state.isCollapsed ? '80px' : '280px'
-  
-  const menuItems = [
-    {
-      id: 'dashboard',
-      label: 'Dashboard',
-      icon: FaHome,
-      notifications: 0
-    },
-    {
-      id: 'profile',
-      label: 'Perfil',
-      icon: FaUser,
-      notifications: state.notifications.profile
-    },
-    {
-      id: 'settings',
-      label: 'Configurações',
-      icon: FaCog,
-      notifications: state.notifications.settings
-    },
-    {
-      id: 'files',
-      label: 'Arquivos',
-      icon: FaFolder,
-      notifications: state.notifications.files
-    },
-    {
-      id: 'analytics',
-      label: 'Monitoramento',
-      icon: FaServer,
-      notifications: state.notifications.analytics
-    },
-    {
-      id: 'config',
-      label: 'FluxStack Config',
-      icon: FaTools,
-      notifications: state.notifications.config
-    }
-  ]
-
-  const handleNavigate = async (page: string) => {
-    try {
-      await call('navigateTo', { page })
-      onPageChange(page)
-    } catch (error) {
-      console.error('Navigation error:', error)
-    }
-  }
-
-  const handleToggleSidebar = async () => {
-    try {
-      await call('toggleSidebar')
-    } catch (error) {
-      console.error('Toggle sidebar error:', error)
-    }
-  }
-
-  const handleToggleTheme = async () => {
-    try {
-      const newTheme = state.theme === 'light' ? 'dark' : 'light'
-      await call('setTheme', { theme: newTheme })
-    } catch (error) {
-      console.error('Theme toggle error:', error)
-    }
-  }
-
-  const handleClearNotifications = async () => {
-    try {
-      await call('clearAllNotifications')
-    } catch (error) {
-      console.error('Clear notifications error:', error)
-    }
-  }
-
-  return (
-    <div style={{
-      width: sidebarWidth,
-      height: '100vh',
-      backgroundColor: isDark ? '#1f2937' : '#ffffff',
-      borderRight: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
-      display: 'flex',
-      flexDirection: 'column',
-      transition: 'width 0.3s ease',
-      overflow: 'hidden',
-      boxShadow: '2px 0 10px rgba(0, 0, 0, 0.1)'
-    }}>
-      {/* Header */}
-      <div style={{
-        padding: '1.5rem',
-        borderBottom: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }}>
-        {!state.isCollapsed && (
-          <h2 style={{
-            color: isDark ? '#f9fafb' : '#111827',
-            margin: 0,
-            fontSize: '1.25rem',
-            fontWeight: 'bold'
-          }}>
-            🔥 FluxStack
-          </h2>
-        )}
-        
-        <button
-          onClick={handleToggleSidebar}
-          style={{
-            background: 'none',
-            border: 'none',
-            color: isDark ? '#9ca3af' : '#6b7280',
-            cursor: 'pointer',
-            padding: '0.5rem',
-            borderRadius: '0.5rem',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '1.1rem'
-          }}
-        >
-          {state.isCollapsed ? <FaBars /> : <FaTimes />}
-        </button>
-      </div>
-
-      {/* Navigation Menu */}
-      <nav style={{
-        flex: 1,
-        padding: '1rem',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.5rem'
-      }}>
-        {menuItems.map((item) => {
-          const Icon = item.icon
-          const isActive = state.currentPage === item.id
-          const hasNotifications = item.notifications > 0
-          
-          return (
-            <button
-              key={item.id}
-              onClick={() => handleNavigate(item.id)}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '1rem',
-                padding: '1rem',
-                borderRadius: '0.75rem',
-                border: 'none',
-                cursor: 'pointer',
-                transition: 'all 0.2s ease',
-                backgroundColor: isActive 
-                  ? (isDark ? '#3b82f6' : '#2563eb')
-                  : 'transparent',
-                color: isActive
-                  ? '#ffffff'
-                  : (isDark ? '#d1d5db' : '#374151'),
-                position: 'relative',
-                justifyContent: state.isCollapsed ? 'center' : 'flex-start',
-                minHeight: '3rem'
-              }}
-              onMouseEnter={(e) => {
-                if (!isActive) {
-                  e.currentTarget.style.backgroundColor = isDark ? '#374151' : '#f3f4f6'
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!isActive) {
-                  e.currentTarget.style.backgroundColor = 'transparent'
-                }
-              }}
-            >
-              <Icon size={20} />
-              
-              {!state.isCollapsed && (
-                <>
-                  <span style={{ 
-                    fontSize: '0.95rem',
-                    fontWeight: isActive ? 'bold' : 'normal'
-                  }}>
-                    {item.label}
-                  </span>
-                  
-                  {hasNotifications && (
-                    <span style={{
-                      backgroundColor: '#ef4444',
-                      color: 'white',
-                      borderRadius: '50%',
-                      width: '20px',
-                      height: '20px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      fontSize: '0.75rem',
-                      fontWeight: 'bold',
-                      marginLeft: 'auto'
-                    }}>
-                      {item.notifications}
-                    </span>
-                  )}
-                </>
-              )}
-              
-              {state.isCollapsed && hasNotifications && (
-                <div style={{
-                  position: 'absolute',
-                  top: '0.5rem',
-                  right: '0.5rem',
-                  backgroundColor: '#ef4444',
-                  borderRadius: '50%',
-                  width: '12px',
-                  height: '12px',
-                  border: '2px solid white'
-                }} />
-              )}
-            </button>
-          )
-        })}
-      </nav>
-
-      {/* Footer Actions */}
-      <div style={{
-        padding: '1rem',
-        borderTop: `1px solid ${isDark ? '#374151' : '#e5e7eb'}`,
-        display: 'flex',
-        flexDirection: state.isCollapsed ? 'column' : 'row',
-        gap: '0.5rem'
-      }}>
-        {/* Theme Toggle */}
-        <button
-          onClick={handleToggleTheme}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: state.isCollapsed ? 0 : '0.5rem',
-            padding: '0.75rem',
-            borderRadius: '0.5rem',
-            border: 'none',
-            cursor: 'pointer',
-            backgroundColor: isDark ? '#374151' : '#f3f4f6',
-            color: isDark ? '#d1d5db' : '#374151',
-            flex: state.isCollapsed ? 'none' : 1,
-            fontSize: '0.9rem'
-          }}
-        >
-          {isDark ? <FaSun /> : <FaMoon />}
-          {!state.isCollapsed && (
-            <span>{isDark ? 'Claro' : 'Escuro'}</span>
-          )}
-        </button>
-
-        {/* Clear Notifications */}
-        {!state.isCollapsed && (
-          <button
-            onClick={handleClearNotifications}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '0.5rem',
-              padding: '0.75rem',
-              borderRadius: '0.5rem',
-              border: 'none',
-              cursor: 'pointer',
-              backgroundColor: isDark ? '#374151' : '#f3f4f6',
-              color: isDark ? '#d1d5db' : '#374151',
-              flex: 1,
-              fontSize: '0.9rem'
-            }}
-          >
-            <FaBell />
-            <span>Limpar</span>
-          </button>
-        )}
-      </div>
-
-      {/* Connection Status (when collapsed) */}
-      {state.isCollapsed && (
-        <div style={{
-          padding: '0.5rem',
-          textAlign: 'center',
-          fontSize: '0.75rem',
-          color: isDark ? '#6b7280' : '#9ca3af'
-        }}>
-          {connected ? '🟢' : '🔴'}
-        </div>
-      )}
-    </div>
-  )
-}

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

@@ -1,178 +0,0 @@
-/**
- * State Management Demo Component
- * Demonstrates the usage of FluxStack state management system with Zustand
- */
-
-import React from 'react'
-import { useNotifications } from '../hooks/useNotifications'
-import { useAuth } from '../hooks/useAuth'
-import { useUIStore } from '../store/slices/uiSlice'
-
-export function StateDemo() {
-  const {
-    theme,
-    sidebarOpen,
-    notifications,
-    loading,
-    setTheme,
-    toggleSidebar,
-    setGlobalLoading
-  } = useUIStore()
-
-  const { success, error, warning, info, clearNotifications } = useNotifications()
-  const { currentUser, isAuthenticated, login, logout } = useAuth()
-
-  const handleThemeChange = (newTheme: 'light' | 'dark' | 'system') => {
-    setTheme(newTheme)
-  }
-
-  const handleToggleSidebar = () => {
-    toggleSidebar()
-  }
-
-  const handleToggleLoading = () => {
-    setGlobalLoading(!loading.global)
-  }
-
-  const handleTestNotifications = () => {
-    success('Success!', 'This is a success notification')
-    setTimeout(() => error('Error!', 'This is an error notification'), 1000)
-    setTimeout(() => warning('Warning!', 'This is a warning notification'), 2000)
-    setTimeout(() => info('Info!', 'This is an info notification'), 3000)
-  }
-
-  const handleTestAuth = async () => {
-    if (isAuthenticated) {
-      await logout()
-    } else {
-      try {
-        await login({ email: 'test@example.com', password: 'password' })
-      } catch (error) {
-        // Error is handled by the hook
-      }
-    }
-  }
-
-  return (
-    <div className="p-6 bg-white rounded-lg shadow-lg">
-      <h2 className="text-2xl font-bold mb-6 text-gray-800">
-        🔄 State Management Demo
-      </h2>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {/* Theme Controls */}
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-700">Theme</h3>
-          <div className="flex space-x-2">
-            {(['light', 'dark', 'system'] as const).map((themeOption) => (
-              <button
-                key={themeOption}
-                onClick={() => handleThemeChange(themeOption)}
-                className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${theme === themeOption
-                  ? 'bg-blue-500 text-white'
-                  : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-                  }`}
-              >
-                {themeOption.charAt(0).toUpperCase() + themeOption.slice(1)}
-              </button>
-            ))}
-          </div>
-          <p className="text-sm text-gray-600">Current theme: {theme}</p>
-        </div>
-
-        {/* UI Controls */}
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-700">UI State</h3>
-          <div className="space-y-2">
-            <button
-              onClick={handleToggleSidebar}
-              className="block w-full px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
-            >
-              {sidebarOpen ? 'Close Sidebar' : 'Open Sidebar'}
-            </button>
-            <button
-              onClick={handleToggleLoading}
-              className="block w-full px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors"
-            >
-              {loading.global ? 'Stop Loading' : 'Start Loading'}
-            </button>
-          </div>
-          <div className="text-sm text-gray-600">
-            <p>Sidebar: {sidebarOpen ? 'Open' : 'Closed'}</p>
-            <p>Loading: {loading.global ? 'Yes' : 'No'}</p>
-          </div>
-        </div>
-
-        {/* Notifications */}
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-700">Notifications</h3>
-          <div className="space-y-2">
-            <button
-              onClick={handleTestNotifications}
-              className="block w-full px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600 transition-colors"
-            >
-              Test Notifications
-            </button>
-            <button
-              onClick={clearNotifications}
-              className="block w-full px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
-            >
-              Clear Notifications
-            </button>
-          </div>
-          <p className="text-sm text-gray-600">
-            Active notifications: {notifications.length}
-          </p>
-        </div>
-
-        {/* Authentication */}
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-gray-700">Authentication</h3>
-          <button
-            onClick={handleTestAuth}
-            className={`block w-full px-4 py-2 rounded-md transition-colors ${isAuthenticated
-              ? 'bg-red-500 text-white hover:bg-red-600'
-              : 'bg-blue-500 text-white hover:bg-blue-600'
-              }`}
-          >
-            {isAuthenticated ? 'Logout' : 'Login (Demo)'}
-          </button>
-          <div className="text-sm text-gray-600">
-            <p>Status: {isAuthenticated ? 'Authenticated' : 'Not authenticated'}</p>
-            {currentUser && (
-              <p>User: {currentUser.name} ({currentUser.email})</p>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* State Inspector */}
-      <div className="mt-8 p-4 bg-gray-50 rounded-md">
-        <h4 className="text-md font-semibold text-gray-700 mb-2">State Inspector</h4>
-        <details className="text-sm">
-          <summary className="cursor-pointer text-blue-600 hover:text-blue-800">
-            View Current State (Click to expand)
-          </summary>
-          <pre className="mt-2 p-2 bg-white rounded border text-xs overflow-auto">
-            {JSON.stringify({
-              ui: {
-                theme,
-                sidebarOpen,
-                notificationCount: notifications.length,
-                globalLoading: loading.global
-              },
-              user: {
-                isAuthenticated,
-                currentUser: currentUser ? {
-                  id: currentUser.id,
-                  name: currentUser.name,
-                  email: currentUser.email
-                } : null
-              }
-            }, null, 2)}
-          </pre>
-        </details>
-      </div>
-    </div>
-  )
-}