baraqex 1.0.70 → 1.0.72

package/templates/ssr-template/src/App.tsx

@@ -1,5 +1,14 @@
 import { useState, useEffect, useRef, useMemo } from 'baraqex';
 
+// JSX type declarations for TypeScript
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}
+
 // Custom hooks for better code organization
 function useTimer(initialTime = 0) {
   const [time, setTime] = useState(initialTime);
@@ -10,7 +19,7 @@ function useTimer(initialTime = 0) {
     if (!isRunning) {
       setIsRunning(true);
       intervalRef.current = setInterval(() => {
-        setTime((prev) => prev + 1);
+        setTime((prev: number) => prev + 1);
       }, 1000);
     }
   };
@@ -50,10 +59,10 @@ function useTimer(initialTime = 0) {
 function useCounter(initialValue = 0, step = 1) {
   const [count, setCount] = useState(initialValue);
   
-  const increment = () => setCount((prev) => prev + step);
-  const decrement = () => setCount((prev) => prev - step);
+  const increment = () => setCount((prev: number) => prev + step);
+  const decrement = () => setCount((prev: number) => prev - step);
   const reset = () => setCount(initialValue);
-  const setValue = (value) => setCount(typeof value === 'function' ? value : value);
+  const setValue = (value: any) => setCount(typeof value === 'function' ? value : value);
 
   return { count, increment, decrement, reset, setValue };
 }
@@ -67,10 +76,10 @@ function useTodos() {
   ]);
   const [filter, setFilter] = useState('all');
 
-  const addTodo = (text) => {
+  const addTodo = (text: any) => {
     const textString = String(text || '').trim();
     if (textString) {
-      setTodos((prev) => [...prev, {
+      setTodos((prev: any) => [...prev, {
         id: Date.now(),
         text: textString,
         completed: false
@@ -78,14 +87,14 @@ function useTodos() {
     }
   };
 
-  const toggleTodo = (id) => {
-    setTodos((prev) => prev.map((todo) => 
+  const toggleTodo = (id: any) => {
+    setTodos((prev: any[]) => prev.map((todo: { id: any; completed: any; }) => 
       todo.id === id ? { ...todo, completed: !todo.completed } : todo
     ));
   };
 
-  const deleteTodo = (id) => {
-    setTodos((prev) => prev.filter((todo) => todo.id !== id));
+  const deleteTodo = (id: any) => {
+    setTodos((prev: any[]) => prev.filter((todo: { id: any; }) => todo.id !== id));
   };
 
   const filteredTodos = useMemo(() => {
@@ -124,7 +133,7 @@ function useTheme() {
   const [theme, setTheme] = useState('light');
   
   const toggleTheme = () => {
-    setTheme((prev) => prev === 'light' ? 'dark' : 'light');
+    setTheme((prev: string) => prev === 'light' ? 'dark' : 'light');
   };
 
   const themeColors = useMemo(() => {
@@ -149,13 +158,13 @@ function useTheme() {
 }
 
 // Todo Item Component
-function TodoItem({ todo, onToggle, onDelete }) {
-  const handleToggle = (e) => {
+function TodoItem({ todo, onToggle, onDelete }: { todo: { id: number; text: string; completed: boolean; }; onToggle: (id: number) => void; onDelete: (id: number) => void; }) {
+  const handleToggle = (e: { preventDefault: () => void; }) => {
     e.preventDefault();
     onToggle(todo.id);
   };
 
-  const handleDelete = (e) => {
+  const handleDelete = (e: { preventDefault: () => void; }) => {
     e.preventDefault();
     onDelete(todo.id);
   };
@@ -199,7 +208,7 @@ function TodoItem({ todo, onToggle, onDelete }) {
 }
 
 // Stats Component
-function StatsCard({ title, value, color = '#3498db' }) {
+function StatsCard({ title, value, color = '#3498db' }: { title: string; value: string | number; color?: string }) {
   return (
     <div style={{
       background: 'white',
@@ -244,7 +253,7 @@ export function App() {
   const inputRef = useRef(null);
 
   // Handle todo form submission
-  const handleTodoSubmit = (e) => {
+  const handleTodoSubmit = (e: { preventDefault: () => void; stopPropagation: () => void; }) => {
     e.preventDefault();
     e.stopPropagation();
     
@@ -262,15 +271,15 @@ export function App() {
     }
   };
 
-  const handleNewTodoChange = (e) => {
+  const handleNewTodoChange = (e: { target: { value: any; }; }) => {
     setNewTodo(e.target.value);
   };
 
-  const handleStepChange = (e) => {
+  const handleStepChange = (e: { target: { value: string; }; }) => {
     setStep(parseInt(e.target.value) || 1);
   };
 
-  const handleSetValue = (e) => {
+  const handleSetValue = (e: { key: string; target: { value: string; }; }) => {
     if (e.key === 'Enter') {
       const value = parseInt(e.target.value) || 0;
       setValue(value);
@@ -738,7 +747,7 @@ export function App() {
                  '🎉 No completed todos yet!'}
               </div>
             ) : (
-              todos.map((todo) => (
+              todos.map((todo: { id: any; }) => (
                 <TodoItem
                   key={todo.id}
                   todo={todo}

package/templates/fullstack-template/src/App.tsx

@@ -1,271 +0,0 @@
-import { AuthProvider, useAuth } from './contexts/AuthContext';
-import { ApiProvider } from './contexts/ApiContext';
-import { Header } from './components/Header';
-import { Dashboard } from './components/Dashboard';
-import { LoginForm } from './components/LoginForm';
-import { TodoList } from './components/TodoList';
-import { UserProfile } from './components/UserProfile';
-import { LoadingSpinner } from './components/LoadingSpinner';
-import './styles/App.css';
-import { useState, useEffect } from 'baraqex';
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-type View = 'dashboard' | 'todos' | 'profile' | 'login';
-
-function AppContent() {
-  const { user, loading: authLoading } = useAuth();
-  const [currentView, setCurrentView] = useState<View>('dashboard');
-  const [loading, setLoading] = useState(true);
-  const [users, setUsers] = useState<User[]>([]);
-  const [newUser, setNewUser] = useState({ name: '', email: '' });
-  const [userLoading, setUserLoading] = useState(false);
-
-  useEffect(() => {
-    // Simulate app initialization
-    const timer = setTimeout(() => {
-      setLoading(false);
-    }, 1000);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  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();
-    setUserLoading(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 {
-      setUserLoading(false);
-    }
-  };
-
-  if (loading || authLoading) {
-    return <LoadingSpinner message="Loading application..." />;
-  }
-
-  if (!user) {
-    return (
-      <div className="app">
-        <Header 
-          user={null} 
-          onNavigate={setCurrentView} 
-          currentView={currentView}
-        />
-        <main className="main-content">
-          <LoginForm />
-        </main>
-      </div>
-    );
-  }
-
-  const renderView = () => {
-    switch (currentView) {
-      case 'dashboard':
-        return <Dashboard />;
-      case 'todos':
-        return <TodoList />;
-      case 'profile':
-        return <UserProfile />;
-      default:
-        return <Dashboard />;
-    }
-  };
-
-  return (
-    <div className="app">
-      <Header 
-        user={user} 
-        onNavigate={setCurrentView} 
-        currentView={currentView}
-      />
-      <main className="main-content">
-        {renderView()}
-      </main>
-      <footer className="app-footer">
-        <p>&copy; 2024 Fullstack Baraqex App. Built with ❤️ using Baraqex Framework.</p>
-      </footer>
-
-      {/* 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={userLoading}
-            style={{
-              background: userLoading ? '#ccc' : '#007bff',
-              color: 'white',
-              border: 'none',
-              padding: '10px 20px',
-              borderRadius: '4px',
-              cursor: userLoading ? 'not-allowed' : 'pointer',
-              fontSize: '14px'
-            }}
-          >
-            {userLoading ? '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>
-  );
-}
-
-export default function App() {
-  return (
-    <AuthProvider>
-      <ApiProvider>
-        <AppContent />
-      </ApiProvider>
-    </AuthProvider>
-  );
-}
-
-// SSR support
-App.getTitle = () => "Fullstack Baraqex App";
-App.getDescription = () => "A complete fullstack application with authentication, API integration, and modern UI";
-App.getMeta = () => ({
-  'og:title': 'Fullstack Baraqex App',
-  'og:description': 'Complete fullstack solution with Baraqex',
-  'og:type': 'website'
-});
-
-// Page metadata for SEO
-App.title = 'Baraqex Fullstack Demo';
-App.description = 'A demonstration of Baraqex fullstack capabilities with SSR and API integration';

package/templates/fullstack-template/src/api/auth/login.ts

@@ -1,75 +0,0 @@
-import { AuthService, sendSuccess, sendError, validateFields } from 'baraqex';
-
-// Login endpoint
-export async function post(req: any, res: any) {
-  try {
-    // Validate required fields
-    const validation = validateFields(req, ['username', 'password']);
-    if (!validation.valid) {
-      return sendError(res, 'Missing required fields', 400, { missing: validation.missing });
-    }
-
-    const { username, password } = req.body;
-
-    // Get auth service from server
-    const authService = req.app.locals.authService as AuthService;
-    if (!authService) {
-      return sendError(res, 'Authentication service not available', 500);
-    }
-
-    // In a real app, you'd fetch user from database
-    // This is a demo implementation
-    const demoUsers = [
-      {
-        id: 1,
-        username: 'admin',
-        password: '$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
-        email: 'admin@example.com',
-        roles: ['admin', 'user'],
-        name: 'Administrator'
-      },
-      {
-        id: 2,
-        username: 'user',
-        password: '$2a$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
-        email: 'user@example.com',
-        roles: ['user'],
-        name: 'Regular User'
-      }
-    ];
-
-    // Find user
-    const user = demoUsers.find(u => u.username === username);
-    if (!user) {
-      return sendError(res, 'Invalid credentials', 401);
-    }
-
-    // Verify password
-    const isValid = await authService.comparePasswords(password, user.password);
-    if (!isValid) {
-      return sendError(res, 'Invalid credentials', 401);
-    }
-
-    // Generate token
-    const userForToken = {
-      id: user.id,
-      username: user.username,
-      email: user.email,
-      roles: user.roles,
-      name: user.name
-    };
-
-    const token = authService.generateToken(userForToken);
-
-    // Send response
-    return sendSuccess(res, {
-      token,
-      user: userForToken,
-      expiresIn: '7d'
-    }, 'Login successful');
-
-  } catch (error: any) {
-    console.error('Login error:', error);
-    return sendError(res, 'Login failed', 500);
-  }
-}

package/templates/fullstack-template/src/api/auth/me.ts

@@ -1,66 +0,0 @@
-import { sendSuccess, sendError } from 'baraqex';
-
-// Middleware to require authentication
-export const middleware = [
-  (req: any, res: any, next: any) => {
-    if (!req.user) {
-      return sendError(res, 'Authentication required', 401);
-    }
-    next();
-  }
-];
-
-// Get current user endpoint
-export async function get(req: any, res: any) {
-  try {
-    const user = req.user;
-    
-    // In a real app, you might fetch fresh user data from database
-    // For demo, we'll just return the user from token
-    
-    return sendSuccess(res, {
-      user: {
-        id: user.id,
-        username: user.username,
-        email: user.email || `${user.username}@example.com`,
-        name: user.name || user.username,
-        roles: user.roles || ['user'],
-        lastLogin: new Date().toISOString()
-      }
-    }, 'User profile retrieved');
-
-  } catch (error: any) {
-    console.error('Get user error:', error);
-    return sendError(res, 'Failed to get user profile', 500);
-  }
-}
-
-// Update user profile
-export async function put(req: any, res: any) {
-  try {
-    const user = req.user;
-    const { name, email } = req.body;
-
-    // Basic validation
-    if (email && !email.includes('@')) {
-      return sendError(res, 'Invalid email format', 400);
-    }
-
-    // In a real app, you'd update the database
-    // For demo, we'll just return updated user data
-    const updatedUser = {
-      ...user,
-      name: name || user.name,
-      email: email || user.email,
-      updatedAt: new Date().toISOString()
-    };
-
-    return sendSuccess(res, {
-      user: updatedUser
-    }, 'Profile updated successfully');
-
-  } catch (error: any) {
-    console.error('Update user error:', error);
-    return sendError(res, 'Failed to update profile', 500);
-  }
-}

package/templates/fullstack-template/src/api/auth/register.ts

@@ -1,59 +0,0 @@
-import { AuthService, sendSuccess, sendError, validateFields } from 'baraqex';
-
-// Registration endpoint
-export async function post(req: any, res: any) {
-  try {
-    // Validate required fields
-    const validation = validateFields(req, ['username', 'password', 'email', 'name']);
-    if (!validation.valid) {
-      return sendError(res, 'Missing required fields', 400, { missing: validation.missing });
-    }
-
-    const { username, password, email, name } = req.body;
-
-    // Basic validation
-    if (password.length < 6) {
-      return sendError(res, 'Password must be at least 6 characters long', 400);
-    }
-
-    if (!email.includes('@')) {
-      return sendError(res, 'Invalid email format', 400);
-    }
-
-    // Get auth service
-    const authService = req.app.locals.authService as AuthService;
-    if (!authService) {
-      return sendError(res, 'Authentication service not available', 500);
-    }
-
-    // In a real app, you'd check if user exists in database
-    // For demo purposes, we'll just simulate registration
-    
-    // Hash password
-    const hashedPassword = await authService.hashPassword(password);
-
-    // Create user object (in real app, save to database)
-    const newUser = {
-      id: Date.now(), // In real app, this would be from database
-      username,
-      email,
-      name,
-      roles: ['user'],
-      createdAt: new Date().toISOString()
-    };
-
-    // Generate token
-    const token = authService.generateToken(newUser);
-
-    // Send response
-    return sendSuccess(res, {
-      token,
-      user: newUser,
-      expiresIn: '7d'
-    }, 'Registration successful');
-
-  } catch (error: any) {
-    console.error('Registration error:', error);
-    return sendError(res, 'Registration failed', 500);
-  }
-}

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

@@ -1,19 +0,0 @@
-// Example API route: GET /api/hello
-export async function get(req, res) {
-  res.json({ 
-    message: 'Hello from Baraqex API!', 
-    timestamp: new Date().toISOString(),
-    method: 'GET'
-  });
-}
-
-// POST /api/hello
-export async function post(req, res) {
-  const { name } = req.body;
-  res.json({ 
-    message: `Hello ${name || 'World'}!`,
-    timestamp: new Date().toISOString(),
-    method: 'POST',
-    body: req.body
-  });
-}