create-fluxstack 1.0.13 → 1.0.14

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

@@ -0,0 +1,391 @@
+// 🔥 Sidebar Navigation Component
+
+import { useHybridLiveComponent } from 'fluxstack'
+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

@@ -0,0 +1,178 @@
+/**
+ * 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>
+  )
+}