baraqex 1.0.64 → 1.0.65

package/templates/fullstack-template/src/components/Dashboard.tsx

@@ -0,0 +1,129 @@
+import { jsx, useState, useEffect } from 'frontend-hamroun';
+import { useAuth } from '../contexts/AuthContext';
+import { useApi } from '../contexts/ApiContext';
+
+export function Dashboard() {
+  const { user } = useAuth();
+  const api = useApi();
+  const [stats, setStats] = useState({
+    totalTodos: 0,
+    completedTodos: 0,
+    pendingTodos: 0
+  });
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadDashboardData();
+  }, []);
+
+  const loadDashboardData = async () => {
+    try {
+      const response = await api.get('/api/todos');
+      const todos = response.data.todos;
+      
+      setStats({
+        totalTodos: todos.length,
+        completedTodos: todos.filter((todo: any) => todo.completed).length,
+        pendingTodos: todos.filter((todo: any) => !todo.completed).length
+      });
+    } catch (error) {
+      console.error('Failed to load dashboard data:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="dashboard">
+        <div className="dashboard-loading">
+          <div className="spinner"></div>
+          <p>Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="dashboard">
+      <div className="dashboard-header">
+        <h2>Welcome back, {user?.name || user?.username}! 👋</h2>
+        <p className="dashboard-subtitle">Here's your productivity overview</p>
+      </div>
+
+      <div className="stats-grid">
+        <div className="stat-card">
+          <div className="stat-icon">📝</div>
+          <div className="stat-content">
+            <h3 className="stat-number">{stats.totalTodos}</h3>
+            <p className="stat-label">Total Todos</p>
+          </div>
+        </div>
+
+        <div className="stat-card">
+          <div className="stat-icon">✅</div>
+          <div className="stat-content">
+            <h3 className="stat-number">{stats.completedTodos}</h3>
+            <p className="stat-label">Completed</p>
+          </div>
+        </div>
+
+        <div className="stat-card">
+          <div className="stat-icon">⏳</div>
+          <div className="stat-content">
+            <h3 className="stat-number">{stats.pendingTodos}</h3>
+            <p className="stat-label">Pending</p>
+          </div>
+        </div>
+
+        <div className="stat-card">
+          <div className="stat-icon">📈</div>
+          <div className="stat-content">
+            <h3 className="stat-number">
+              {stats.totalTodos > 0 ? Math.round((stats.completedTodos / stats.totalTodos) * 100) : 0}%
+            </h3>
+            <p className="stat-label">Completion Rate</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="dashboard-actions">
+        <div className="action-card">
+          <h3>🚀 Quick Actions</h3>
+          <div className="action-buttons">
+            <button className="action-btn primary">
+              ➕ Add New Todo
+            </button>
+            <button className="action-btn secondary">
+              📊 View Reports
+            </button>
+            <button className="action-btn secondary">
+              ⚙️ Settings
+            </button>
+          </div>
+        </div>
+
+        <div className="recent-activity">
+          <h3>📅 Recent Activity</h3>
+          <div className="activity-list">
+            <div className="activity-item">
+              <span className="activity-icon">✅</span>
+              <span className="activity-text">Completed todo: "Learn Baraqex"</span>
+              <span className="activity-time">2 hours ago</span>
+            </div>
+            <div className="activity-item">
+              <span className="activity-icon">➕</span>
+              <span className="activity-text">Added new todo</span>
+              <span className="activity-time">1 day ago</span>
+            </div>
+            <div className="activity-item">
+              <span className="activity-icon">👤</span>
+              <span className="activity-text">Updated profile</span>
+              <span className="activity-time">3 days ago</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fullstack-template/src/components/Header.tsx

@@ -0,0 +1,76 @@
+import { jsx } from 'frontend-hamroun';
+import { useAuth } from '../contexts/AuthContext';
+
+interface User {
+  id: number;
+  username: string;
+  name: string;
+  roles: string[];
+}
+
+interface HeaderProps {
+  user: User | null;
+  onNavigate: (view: string) => void;
+  currentView: string;
+}
+
+export function Header({ user, onNavigate, currentView }: HeaderProps) {
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  return (
+    <header className="app-header">
+      <div className="header-content">
+        <div className="header-left">
+          <h1 className="app-title">
+            <span className="logo">⚡</span>
+            Fullstack App
+          </h1>
+        </div>
+
+        {user && (
+          <nav className="header-nav">
+            <button 
+              className={`nav-button ${currentView === 'dashboard' ? 'active' : ''}`}
+              onClick={() => onNavigate('dashboard')}
+            >
+              📊 Dashboard
+            </button>
+            <button 
+              className={`nav-button ${currentView === 'todos' ? 'active' : ''}`}
+              onClick={() => onNavigate('todos')}
+            >
+              ✅ Todos
+            </button>
+            <button 
+              className={`nav-button ${currentView === 'profile' ? 'active' : ''}`}
+              onClick={() => onNavigate('profile')}
+            >
+              👤 Profile
+            </button>
+          </nav>
+        )}
+
+        <div className="header-right">
+          {user ? (
+            <div className="user-menu">
+              <span className="user-greeting">
+                Hello, {user.name || user.username}
+              </span>
+              <button className="logout-button" onClick={handleLogout}>
+                🚪 Logout
+              </button>
+            </div>
+          ) : (
+            <div className="auth-status">
+              Please log in to continue
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/fullstack-template/src/contexts/ApiContext.tsx

@@ -0,0 +1,69 @@
+import { jsx, createContext, useContext } from 'frontend-hamroun';
+
+interface ApiContextType {
+  request: (url: string, options?: RequestInit) => Promise<any>;
+  get: (url: string) => Promise<any>;
+  post: (url: string, data?: any) => Promise<any>;
+  put: (url: string, data?: any) => Promise<any>;
+  delete: (url: string) => Promise<any>;
+}
+
+const ApiContext = createContext<ApiContextType | undefined>(undefined);
+
+export function ApiProvider({ children }: { children: any }) {
+  const request = async (url: string, options: RequestInit = {}) => {
+    const token = localStorage.getItem('auth_token');
+    
+    const config: RequestInit = {
+      ...options,
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+        ...(token && { 'Authorization': `Bearer ${token}` })
+      }
+    };
+
+    const response = await fetch(url, config);
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new Error(data.message || `HTTP error! status: ${response.status}`);
+    }
+
+    return data;
+  };
+
+  const get = (url: string) => request(url, { method: 'GET' });
+  
+  const post = (url: string, data?: any) => request(url, {
+    method: 'POST',
+    body: data ? JSON.stringify(data) : undefined
+  });
+  
+  const put = (url: string, data?: any) => request(url, {
+    method: 'PUT',
+    body: data ? JSON.stringify(data) : undefined
+  });
+  
+  const del = (url: string) => request(url, { method: 'DELETE' });
+
+  return (
+    <ApiContext.Provider value={{
+      request,
+      get,
+      post,
+      put,
+      delete: del
+    }}>
+      {children}
+    </ApiContext.Provider>
+  );
+}
+
+export function useApi() {
+  const context = useContext(ApiContext);
+  if (context === undefined) {
+    throw new Error('useApi must be used within an ApiProvider');
+  }
+  return context;
+}

package/templates/fullstack-template/src/contexts/AuthContext.tsx

@@ -0,0 +1,155 @@
+import { jsx, createContext, useContext, useState, useEffect } from 'frontend-hamroun';
+
+interface User {
+  id: number;
+  username: string;
+  email: string;
+  name: string;
+  roles: string[];
+}
+
+interface AuthContextType {
+  user: User | null;
+  login: (credentials: LoginCredentials) => Promise<void>;
+  register: (userData: RegisterData) => Promise<void>;
+  logout: () => void;
+  loading: boolean;
+  error: string | null;
+}
+
+interface LoginCredentials {
+  username: string;
+  password: string;
+}
+
+interface RegisterData {
+  username: string;
+  password: string;
+  email: string;
+  name: string;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: any }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Check for existing token on mount
+  useEffect(() => {
+    const token = localStorage.getItem('auth_token');
+    if (token) {
+      validateToken(token);
+    } else {
+      setLoading(false);
+    }
+  }, []);
+
+  const validateToken = async (token: string) => {
+    try {
+      const response = await fetch('/api/auth/me', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.data.user);
+      } else {
+        localStorage.removeItem('auth_token');
+      }
+    } catch (error) {
+      console.error('Token validation failed:', error);
+      localStorage.removeItem('auth_token');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const login = async (credentials: LoginCredentials) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(credentials)
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        localStorage.setItem('auth_token', data.data.token);
+        setUser(data.data.user);
+      } else {
+        throw new Error(data.message || 'Login failed');
+      }
+    } catch (error: any) {
+      setError(error.message);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const register = async (userData: RegisterData) => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch('/api/auth/register', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(userData)
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        localStorage.setItem('auth_token', data.data.token);
+        setUser(data.data.user);
+      } else {
+        throw new Error(data.message || 'Registration failed');
+      }
+    } catch (error: any) {
+      setError(error.message);
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem('auth_token');
+    setUser(null);
+    setError(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{
+      user,
+      login,
+      register,
+      logout,
+      loading,
+      error
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

package/templates/fullstack-template/src/server.ts

@@ -0,0 +1,167 @@
+import { createServer, AuthService, Database } from 'baraqex/server';
+import helmet from 'helmet';
+import compression from 'compression';
+import rateLimit from 'express-rate-limit';
+import morgan from 'morgan';
+import dotenv from 'dotenv';
+
+// Load environment variables
+dotenv.config();
+
+// Server configuration
+const config = {
+  port: parseInt(process.env.PORT || '3000'),
+  apiDir: './src/api',
+  pagesDir: './src/pages',
+  staticDir: './public',
+  enableCors: true,
+  corsOptions: {
+    origin: process.env.NODE_ENV === 'production' 
+      ? process.env.FRONTEND_URL || false 
+      : true,
+    credentials: true
+  },
+  db: process.env.DATABASE_URL ? {
+    url: process.env.DATABASE_URL,
+    type: (process.env.DATABASE_TYPE as 'mongodb' | 'mysql' | 'postgres') || 'mongodb'
+  } : undefined,
+  auth: {
+    secret: process.env.JWT_SECRET || 'your-secret-key-change-in-production',
+    expiresIn: process.env.JWT_EXPIRES_IN || '7d'
+  }
+};
+
+// Create server instance
+const server = createServer(config);
+
+// Get Express app for additional middleware
+const app = server.getExpressApp();
+
+// Security middleware
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+      scriptSrc: ["'self'"],
+      imgSrc: ["'self'", "data:", "https:"],
+    },
+  },
+}));
+
+// Compression middleware
+app.use(compression());
+
+// Request logging
+if (process.env.NODE_ENV !== 'test') {
+  app.use(morgan(process.env.NODE_ENV === 'production' ? 'combined' : 'dev'));
+}
+
+// Rate limiting
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: process.env.NODE_ENV === 'production' ? 100 : 1000, // limit each IP to 100 requests per windowMs in production
+  message: {
+    error: 'Too many requests from this IP, please try again later.'
+  }
+});
+app.use('/api', limiter);
+
+// Health check endpoint
+app.get('/health', (req, res) => {
+  res.json({ 
+    status: 'ok', 
+    timestamp: new Date().toISOString(),
+    version: process.env.npm_package_version || '1.0.0',
+    environment: process.env.NODE_ENV || 'development'
+  });
+});
+
+// API status endpoint
+app.get('/api/status', (req, res) => {
+  const db = server.getDatabase();
+  res.json({
+    api: 'online',
+    database: db ? 'connected' : 'not configured',
+    authentication: server.getAuth() ? 'enabled' : 'disabled',
+    timestamp: new Date().toISOString()
+  });
+});
+
+// Enable SSR with hydration
+server.enableSSR({ hydratable: true });
+
+// Database connection
+async function connectDatabase() {
+  const db = server.getDatabase();
+  if (db) {
+    try {
+      await db.connect();
+      console.log('✅ Database connected successfully');
+    } catch (error) {
+      console.error('❌ Database connection failed:', error);
+      if (process.env.NODE_ENV === 'production') {
+        process.exit(1);
+      }
+    }
+  } else {
+    console.log('⚠️  No database configured');
+  }
+}
+
+// Graceful shutdown
+process.on('SIGTERM', async () => {
+  console.log('🔄 SIGTERM received, shutting down gracefully...');
+  
+  try {
+    await server.stop();
+    const db = server.getDatabase();
+    if (db) {
+      await db.disconnect();
+    }
+    console.log('✅ Server shut down complete');
+    process.exit(0);
+  } catch (error) {
+    console.error('❌ Error during shutdown:', error);
+    process.exit(1);
+  }
+});
+
+// Start server
+async function startServer() {
+  try {
+    // Connect to database first
+    await connectDatabase();
+    
+    // Start the server
+    await server.start();
+    
+    console.log(`🚀 Fullstack server running on http://localhost:${config.port}`);
+    console.log(`📊 Environment: ${process.env.NODE_ENV || 'development'}`);
+    console.log(`🔑 Auth: ${server.getAuth() ? 'enabled' : 'disabled'}`);
+    console.log(`💾 Database: ${server.getDatabase() ? 'connected' : 'not configured'}`);
+    console.log(`🌐 API docs: http://localhost:${config.port}/api-docs`);
+    console.log(`❤️  Health check: http://localhost:${config.port}/health`);
+    
+  } catch (error) {
+    console.error('❌ Failed to start server:', error);
+    process.exit(1);
+  }
+}
+
+// Handle unhandled promise rejections
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('Unhandled Rejection at:', promise, 'reason:', reason);
+  process.exit(1);
+});
+
+// Handle uncaught exceptions
+process.on('uncaughtException', (error) => {
+  console.error('Uncaught Exception:', error);
+  process.exit(1);
+});
+
+// Start the server
+startServer();
+
+export default server;