baraqex 1.0.71 → 1.0.73

package/templates/fullstack-template/src/api/users.js

@@ -1,39 +0,0 @@
-// In-memory user storage for demo
-let users = [
-  { id: 1, name: 'John Doe', email: 'john@example.com' },
-  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
-];
-
-// GET /api/users
-export async function get(req, res) {
-  res.json({ 
-    success: true,
-    users,
-    count: users.length
-  });
-}
-
-// POST /api/users
-export async function post(req, res) {
-  const { name, email } = req.body;
-  
-  if (!name || !email) {
-    return res.status(400).json({
-      success: false,
-      error: 'Name and email are required'
-    });
-  }
-  
-  const newUser = {
-    id: users.length + 1,
-    name,
-    email
-  };
-  
-  users.push(newUser);
-  
-  res.status(201).json({
-    success: true,
-    user: newUser
-  });
-}

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

@@ -1,129 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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/pages/index.tsx

@@ -1,200 +0,0 @@
-import { useState, useEffect } from 'baraqex';
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-export default function HomePage() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [newUser, setNewUser] = useState({ name: '', email: '' });
-  const [loading, setLoading] = useState(false);
-
-  // Fetch users on component mount
-  useEffect(() => {
-    fetchUsers();
-  }, []);
-
-  const fetchUsers = async () => {
-    try {
-      const response = await fetch('/api/users');
-      const data = await response.json();
-      if (data.success) {
-        setUsers(data.users);
-      }
-    } catch (error) {
-      console.error('Error fetching users:', error);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      const response = await fetch('/api/users', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(newUser),
-      });
-
-      const data = await response.json();
-      
-      if (data.success) {
-        setUsers([...users, data.user]);
-        setNewUser({ name: '', email: '' });
-      } else {
-        alert('Error: ' + data.error);
-      }
-    } catch (error) {
-      console.error('Error creating user:', error);
-      alert('Error creating user');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ 
-      fontFamily: 'system-ui, sans-serif', 
-      maxWidth: '800px', 
-      margin: '0 auto', 
-      padding: '20px' 
-    }}>
-      <h1 style={{ color: '#333', marginBottom: '30px' }}>
-        🚀 Baraqex Fullstack Demo
-      </h1>
-      
-      <p style={{ color: '#666', marginBottom: '40px' }}>
-        This page demonstrates server-side rendering with API integration. 
-        The page is rendered on the server and then hydrated on the client.
-      </p>
-
-      {/* Add User Form */}
-      <div style={{ 
-        background: '#f5f5f5', 
-        padding: '20px', 
-        borderRadius: '8px', 
-        marginBottom: '30px' 
-      }}>
-        <h2 style={{ marginTop: '0', color: '#333' }}>Add New User</h2>
-        <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: '15px' }}>
-            <input
-              type="text"
-              placeholder="Name"
-              value={newUser.name}
-              onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-              required
-            />
-          </div>
-          <div style={{ marginBottom: '15px' }}>
-            <input
-              type="email"
-              placeholder="Email"
-              value={newUser.email}
-              onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-              required
-            />
-          </div>
-          <button
-            type="submit"
-            disabled={loading}
-            style={{
-              background: loading ? '#ccc' : '#007bff',
-              color: 'white',
-              border: 'none',
-              padding: '10px 20px',
-              borderRadius: '4px',
-              cursor: loading ? 'not-allowed' : 'pointer',
-              fontSize: '14px'
-            }}
-          >
-            {loading ? 'Adding...' : 'Add User'}
-          </button>
-        </form>
-      </div>
-
-      {/* Users List */}
-      <div>
-        <h2 style={{ color: '#333' }}>Users ({users.length})</h2>
-        {users.length === 0 ? (
-          <p style={{ color: '#666', fontStyle: 'italic' }}>
-            No users found. Add some users using the form above!
-          </p>
-        ) : (
-          <div style={{ display: 'grid', gap: '10px' }}>
-            {users.map((user) => (
-              <div
-                key={user.id}
-                style={{
-                  background: 'white',
-                  border: '1px solid #ddd',
-                  borderRadius: '6px',
-                  padding: '15px',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
-                }}
-              >
-                <div>
-                  <strong style={{ color: '#333' }}>{user.name}</strong>
-                  <br />
-                  <span style={{ color: '#666', fontSize: '14px' }}>{user.email}</span>
-                </div>
-                <div style={{ 
-                  background: '#28a745', 
-                  color: 'white', 
-                  padding: '4px 8px', 
-                  borderRadius: '4px', 
-                  fontSize: '12px' 
-                }}>
-                  ID: {user.id}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* API Info */}
-      <div style={{ 
-        marginTop: '40px', 
-        padding: '20px', 
-        background: '#e7f3ff', 
-        borderRadius: '8px' 
-      }}>
-        <h3 style={{ marginTop: '0', color: '#0066cc' }}>🔗 API Endpoints</h3>
-        <ul style={{ color: '#333' }}>
-          <li><code>GET /api/users</code> - Fetch all users</li>
-          <li><code>POST /api/users</code> - Create a new user</li>
-          <li><code>GET /api/hello</code> - Simple hello endpoint</li>
-        </ul>
-        <p style={{ color: '#666', fontSize: '14px', marginBottom: '0' }}>
-          Try visiting <a href="/api/users" target="_blank">/api/users</a> or <a href="/api/hello" target="_blank">/api/hello</a> to see the API responses.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// Page metadata for SEO
-HomePage.title = 'Baraqex Fullstack Demo';
-HomePage.description = 'A demonstration of Baraqex fullstack capabilities with SSR and API integration';