baraqex 2.0.3 → 2.0.4

package/templates/fullstack-app/src/components/StateDemo.tsx

@@ -1,207 +0,0 @@
-import { jsx, useState, useEffect, useMemo } from 'frontend-hamroun';
-
-// Define our state types for better type safety
-interface CounterState {
-  count: number;
-  lastUpdated: string | null;
-  history: number[];
-}
-
-export default function StateDemo() {
-  // More comprehensive state with history tracking
-  const [state, setState] = useState<CounterState>({
-    count: 0,
-    lastUpdated: null,
-    history: []
-  });
-  
-  // Track UI state separately
-  const [isLoading, setIsLoading] = useState(false);
-  const [showHistory, setShowHistory] = useState(false);
-  
-  // Check for server-side rendering
-  const isSSR = typeof window === 'undefined';
-  
-  // Calculate derived state with useMemo for performance
-  const stats = useMemo(() => {
-    // Ensure we have a valid history array
-    if (isSSR || !state || !state.history || state.history.length === 0) {
-      return { avg: 0, max: 0, min: 0 };
-    }
-    
-    try {
-      const sum = state.history.reduce((a, b) => a + b, 0);
-      return {
-        avg: parseFloat((sum / state.history.length).toFixed(1)),
-        max: Math.max(...state.history),
-        min: Math.min(...state.history)
-      };
-    } catch (error) {
-      console.error('Error calculating stats:', error);
-      return { avg: 0, max: 0, min: 0 };
-    }
-  }, [state?.history]);
-  
-  // Handle increment with history tracking
-  const increment = () => {
-    if (isSSR) return;
-    
-    setIsLoading(true);
-    
-    // Simulate async operation
-    setTimeout(() => {
-      setState(prevState => ({
-        count: prevState.count + 1,
-        lastUpdated: new Date().toLocaleTimeString(),
-        history: [...(prevState.history || []), prevState.count + 1]
-      }));
-      setIsLoading(false);
-    }, 300);
-  };
-  
-  // Handle decrement with bounds checking
-  const decrement = () => {
-    if (isSSR) return;
-    
-    setIsLoading(true);
-    
-    // Simulate async operation
-    setTimeout(() => {
-      setState(prevState => ({
-        count: Math.max(0, prevState.count - 1),
-        lastUpdated: new Date().toLocaleTimeString(),
-        history: prevState.count > 0 ? [...(prevState.history || []), prevState.count - 1] : (prevState.history || [])
-      }));
-      setIsLoading(false);
-    }, 300);
-  };
-  
-  // Reset counter
-  const reset = () => {
-    if (isSSR) return;
-    
-    setState({
-      count: 0,
-      lastUpdated: new Date().toLocaleTimeString(),
-      history: []
-    });
-  };
-  
-  // Toggle history visibility
-  const toggleHistory = () => {
-    if (isSSR) return;
-    
-    setShowHistory(prev => !prev);
-  };
-  
-  // For SSR, return a simpler version of the component
-  if (isSSR) {
-    return (
-      <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
-        <h2 className="text-xl font-semibold text-gray-800 mb-4">
-          State Management Demo
-        </h2>
-        <div className="flex items-center justify-between mb-4">
-          <button className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg">-</button>
-          <span className="text-2xl font-bold mx-4">0</span>
-          <button className="px-4 py-2 bg-blue-600 text-white rounded-lg">+</button>
-        </div>
-        <p className="text-sm text-gray-500">Interactive counter (client-side only)</p>
-      </div>
-    );
-  }
-  
-  // Regular client-side render
-  return (
-    <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
-      <h2 className="text-xl font-semibold text-gray-800 mb-4">
-        State Management Demo
-      </h2>
-      
-      <div className="mb-6">
-        <div className="flex items-center justify-between mb-4">
-          <button 
-            onClick={decrement}
-            className="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 disabled:opacity-50"
-            disabled={state.count === 0 || isLoading}
-          >
-            {isLoading ? '...' : '-'}
-          </button>
-          
-          <span className="text-2xl font-bold mx-4">{state.count}</span>
-          
-          <button 
-            onClick={increment}
-            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
-            disabled={isLoading}
-          >
-            {isLoading ? '...' : '+'}
-          </button>
-        </div>
-        
-        <button
-          onClick={reset}
-          className="text-sm text-gray-600 hover:text-red-600"
-          disabled={state.count === 0 && (!state.history || state.history.length === 0)}
-        >
-          Reset Counter
-        </button>
-      </div>
-      
-      {state.lastUpdated && (
-        <div className="mb-4">
-          <p className="text-sm text-gray-500">
-            Last updated: {state.lastUpdated}
-          </p>
-        </div>
-      )}
-      
-      {state.history && state.history.length > 0 && (
-        <div className="border-t pt-4 mt-4">
-          <div className="flex items-center justify-between mb-2">
-            <h3 className="text-md font-medium text-gray-700">Statistics</h3>
-            <button
-              onClick={toggleHistory}
-              className="text-sm text-blue-600 hover:underline"
-            >
-              {showHistory ? 'Hide History' : 'Show History'}
-            </button>
-          </div>
-          
-          <div className="grid grid-cols-3 gap-2 mb-3">
-            <div className="bg-blue-50 p-2 rounded text-center">
-              <div className="text-xs text-gray-500">Average</div>
-              <div className="font-bold">{stats.avg}</div>
-            </div>
-            <div className="bg-green-50 p-2 rounded text-center">
-              <div className="text-xs text-gray-500">Maximum</div>
-              <div className="font-bold">{stats.max}</div>
-            </div>
-            <div className="bg-red-50 p-2 rounded text-center">
-              <div className="text-xs text-gray-500">Minimum</div>
-              <div className="font-bold">{stats.min}</div>
-            </div>
-          </div>
-          
-          {showHistory && (
-            <div className="mt-3">
-              <h4 className="text-sm font-medium text-gray-600 mb-1">
-                History ({state.history.length} events)
-              </h4>
-              <div className="bg-gray-50 p-2 rounded max-h-24 overflow-y-auto text-xs">
-                {state.history.map((value, index) => (
-                  <span 
-                    key={index} 
-                    className="inline-block bg-gray-200 rounded px-2 py-1 m-1"
-                  >
-                    {value}
-                  </span>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/fullstack-app/src/components/UserList.tsx

@@ -1,44 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-interface UserListProps {
-  users: User[];
-}
-
-export default function UserList({ users }: UserListProps) {
-  if (!users || users.length === 0) {
-    return (
-      <div className="empty-state p-4 text-center bg-gray-50 rounded">
-        <p className="text-gray-500">No users available</p>
-      </div>
-    );
-  }
-  
-  return (
-    <div className="user-list">
-      <ul className="divide-y divide-gray-100">
-        {users.map(user => (
-          <li key={user.id} className="py-3">
-            <div className="flex justify-between">
-              <div>
-                <p className="font-medium text-gray-900">{user.name}</p>
-                <p className="text-sm text-gray-500">{user.email}</p>
-              </div>
-              <a 
-                href={`/users/${user.id}`}
-                className="text-blue-600 hover:underline text-sm self-center"
-              >
-                View Profile
-              </a>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}

package/templates/fullstack-app/src/config.ts

@@ -1,42 +0,0 @@
-// Application configuration
-// Modify this file to customize your application without changing core files
-
-export const AppConfig = {
-  // App information
-  title: 'Frontend Hamroun App',
-  description: 'A full-stack application built with Frontend Hamroun',
-  
-  // Navigation
-  navigation: [
-    { path: '/', label: 'Home' },
-    { path: '/about', label: 'About' },
-    { path: '/users', label: 'Users' }
-  ],
-  
-  // API endpoints
-  api: {
-    baseUrl: '/api',
-    endpoints: {
-      users: '/users',
-      posts: '/posts'
-    }
-  },
-  
-  // Default meta tags
-  meta: {
-    viewport: 'width=device-width, initial-scale=1.0',
-    charset: 'UTF-8',
-    author: 'Your Name',
-    keywords: 'frontend-hamroun, fullstack, template'
-  },
-  
-  // Style customization
-  theme: {
-    primaryColor: '#0066cc',
-    backgroundColor: '#ffffff',
-    textColor: '#333333',
-    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif'
-  }
-};
-
-export default AppConfig;

package/templates/fullstack-app/src/data/api.ts

@@ -1,206 +0,0 @@
-/**
- * API utilities for making requests to the backend
- */
-import { batchUpdates } from 'frontend-hamroun';
-
-// Cache for API responses
-const apiCache = new Map<string, { data: any, timestamp: number }>();
-const CACHE_DURATION = 60000; // 1 minute cache
-
-/**
- * Fetch data from the API with caching
- */
-export async function fetchApi(
-  endpoint: string, 
-  options: RequestInit & { 
-    useCache?: boolean,
-    forceFresh?: boolean 
-  } = {}
-): Promise<any> {
-  const url = endpoint.startsWith('/') ? `/api${endpoint}` : `/api/${endpoint}`;
-  const { useCache = true, forceFresh = false, ...fetchOptions } = options;
-  
-  // Check cache first if enabled
-  if (useCache && !forceFresh) {
-    const cached = apiCache.get(url);
-    if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
-      console.log(`[API] Using cached data for: ${url}`);
-      return cached.data;
-    }
-  }
-  
-  try {
-    console.log(`[API] Fetching data from: ${url}`);
-    const response = await fetch(url, {
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-      },
-      ...fetchOptions
-    });
-    
-    if (!response.ok) {
-      throw new Error(`API request failed: ${response.status} ${response.statusText}`);
-    }
-    
-    const data = await response.json();
-    console.log(`[API] Successfully fetched data from: ${url}`);
-    
-    // Cache the response if caching is enabled
-    if (useCache) {
-      apiCache.set(url, { data, timestamp: Date.now() });
-    }
-    
-    return data;
-  } catch (error) {
-    console.error(`[API] Error fetching from ${url}:`, error);
-    throw error;
-  }
-}
-
-/**
- * Clear the API cache
- */
-export function clearApiCache(endpoint?: string): void {
-  if (endpoint) {
-    const url = endpoint.startsWith('/') ? `/api${endpoint}` : `/api/${endpoint}`;
-    apiCache.delete(url);
-  } else {
-    apiCache.clear();
-  }
-}
-
-// Sample data for development
-const sampleUsers = [
-  { id: 1, name: 'User 1', email: 'user1@example.com' },
-  { id: 2, name: 'User 2', email: 'user2@example.com' },
-  { id: 3, name: 'User 3', email: 'user3@example.com' }
-];
-
-const samplePosts = [
-  { id: 1, title: 'Post 1', content: 'Content for post 1', authorId: 1 },
-  { id: 2, title: 'Post 2', content: 'Content for post 2', authorId: 2 },
-  { id: 3, title: 'Post 3', content: 'Content for post 3', authorId: 1 }
-];
-
-// Helper to simulate network delay
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-
-// User API client
-export const UserApi = {
-  // Get all users
-  async getAll() {
-    try {
-      // In a real app, we'd fetch from API
-      // const response = await fetch('/api/users');
-      // if (!response.ok) throw new Error('Failed to fetch users');
-      // return await response.json();
-      
-      // Simulate API delay
-      await delay(300);
-      return [...sampleUsers]; // Return a copy to avoid mutations
-    } catch (error) {
-      console.error('Error fetching users:', error);
-      return [];
-    }
-  },
-  
-  // Get user by ID
-  async getById(id: number | string) {
-    try {
-      // In a real app, we'd fetch from API
-      // const response = await fetch(`/api/users/${id}`);
-      // if (!response.ok) throw new Error('User not found');
-      // return await response.json();
-      
-      // Convert ID to number if it's a string
-      const userId = typeof id === 'string' ? parseInt(id, 10) : id;
-      
-      // Simulate API delay
-      await delay(200);
-      
-      // Find user
-      const user = sampleUsers.find(u => u.id === userId);
-      if (!user) throw new Error('User not found');
-      
-      return { ...user }; // Return a copy to avoid mutations
-    } catch (error) {
-      console.error(`Error fetching user ${id}:`, error);
-      return null;
-    }
-  },
-  
-  // Get posts (all or by author)
-  async getPosts(authorId?: number | string) {
-    try {
-      // In a real app, we'd fetch from API
-      // const url = authorId ? `/api/posts?authorId=${authorId}` : '/api/posts';
-      // const response = await fetch(url);
-      // if (!response.ok) throw new Error('Failed to fetch posts');
-      // return await response.json();
-      
-      // Convert authorId to number if it's a string
-      const userId = authorId ? (typeof authorId === 'string' ? parseInt(authorId, 10) : authorId) : undefined;
-      
-      // Simulate API delay
-      await delay(400);
-      
-      // Filter posts if authorId is provided
-      const posts = userId
-        ? samplePosts.filter(p => p.authorId === userId)
-        : samplePosts;
-      
-      return [...posts]; // Return a copy to avoid mutations
-    } catch (error) {
-      console.error('Error fetching posts:', error);
-      return [];
-    }
-  }
-};
-
-// WASM API service
-export const WasmApi = {
-  calculate: (operation: 'add' | 'multiply', a: number, b: number) => 
-    fetchApi(`/wasm/calculate?op=${operation}&a=${a}&b=${b}`),
-    
-  processJson: (data: any) => fetchApi('/wasm/process-json', {
-    method: 'POST',
-    body: JSON.stringify(data),
-    useCache: false
-  })
-};
-
-// Batch multiple API calls for efficiency
-export const batchApiCalls = async <T>(
-  apiFunctions: Array<() => Promise<T>>
-): Promise<T[]> => {
-  const results: T[] = [];
-  let errors: Error[] = [];
-  
-  // Execute all API calls in parallel
-  const promises = apiFunctions.map(fn => fn());
-  
-  try {
-    const settledResults = await Promise.allSettled(promises);
-    
-    // Process results
-    batchUpdates(() => {
-      settledResults.forEach(result => {
-        if (result.status === 'fulfilled') {
-          results.push(result.value);
-        } else {
-          errors.push(result.reason);
-        }
-      });
-    });
-    
-    if (errors.length) {
-      console.error('[API] Some batch API calls failed:', errors);
-    }
-    
-    return results;
-  } catch (error) {
-    console.error('[API] Batch API calls failed:', error);
-    throw error;
-  }
-};

package/templates/fullstack-app/src/middleware.ts

@@ -1,28 +0,0 @@
-// Next.js-like global middleware
-import { Request, Response, NextFunction } from 'express';
-
-// Extend the Express Request interface
-declare global {
-  namespace Express {
-    interface Request {
-      timestamp: string;
-    }
-  }
-}
-
-// This middleware will be applied to all routes (API and pages)
-export default async function middleware(req: Request, res: Response, next?: NextFunction) {
-  // Add request timestamp
-  req.timestamp = await new Date().toISOString();
-  
-  // Log all requests in development mode
-  if (process.env.NODE_ENV !== 'production') {
-    console.log(`[${req.timestamp}] ${req.method} ${req.url}`);
-  }
-  
-  // Example of response header modification
-  res.setHeader('X-Powered-By', 'Frontend Hamroun');
-  
-  // Continue to next middleware
-  if (next) next();
-}

package/templates/fullstack-app/src/pages/404.tsx

@@ -1,28 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-
-export default function NotFound({ initialState }) {
-  return (
-    <div className="not-found-container max-w-4xl mx-auto p-6">
-      <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 shadow-sm">
-        <h1 className="text-3xl font-bold text-gray-700 mb-4">Page Not Found</h1>
-        
-        <p className="text-lg text-gray-600 mb-4">
-          The page you are looking for does not exist or has been moved.
-        </p>
-        
-        <p className="text-gray-600 mb-6">
-          Path: <code className="bg-gray-100 px-2 py-1 rounded">{initialState?.route || 'unknown'}</code>
-        </p>
-        
-        <div className="mt-6">
-          <a 
-            href="/"
-            className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-          >
-            Back to Home
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}

package/templates/fullstack-app/src/pages/_app.tsx

@@ -1,11 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-import Layout from '../components/Layout';
-
-// This is the main App wrapper component similar to Next.js _app.js
-export default function App({ Component, pageProps, initialState }) {
-  return (
-    <Layout>
-      <Component {...pageProps} initialState={initialState} />
-    </Layout>
-  );
-}

package/templates/fullstack-app/src/pages/_document.tsx

@@ -1,25 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-
-export default function Document({ 
-  title = 'Frontend Hamroun App',
-  headContent,
-  bodyContent,
-  scripts
-}) {
-  return (
-    <html lang="en">
-      <head>
-        <meta charSet="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>{title}</title>
-        <link rel="stylesheet" href="/styles.css" />
-        {headContent}
-      </head>
-      <body>
-        <div id="root">{bodyContent}</div>
-        <script src="/build/main.js" type="module"></script>
-        {scripts}
-      </body>
-    </html>
-  );
-}

package/templates/fullstack-app/src/pages/_error.tsx

@@ -1,45 +0,0 @@
-import { jsx, useState, useEffect } from 'frontend-hamroun';
-
-export default function ErrorPage({ initialState }) {
-  const { error } = initialState || {};
-  const [showDetails, setShowDetails] = useState(false);
-  const isDev = process.env.NODE_ENV !== 'production';
-  
-  return (
-    <div className="error-page-container max-w-4xl mx-auto p-6">
-      <div className="bg-red-50 border border-red-200 rounded-lg p-8 shadow-sm">
-        <h1 className="text-3xl font-bold text-red-700 mb-4">Something went wrong</h1>
-        
-        <p className="text-lg text-red-600 mb-4">
-          {error?.message || "An unexpected error occurred"}
-        </p>
-        
-        {isDev && error?.stack && (
-          <div className="mt-6">
-            <button
-              className="text-blue-600 underline mb-2"
-              onClick={() => setShowDetails(!showDetails)}
-            >
-              {showDetails ? "Hide" : "Show"} technical details
-            </button>
-            
-            {showDetails && (
-              <pre className="bg-gray-100 p-4 rounded-md text-sm overflow-auto max-h-96 text-gray-800">
-                {error.stack}
-              </pre>
-            )}
-          </div>
-        )}
-        
-        <div className="mt-6">
-          <a 
-            href="/"
-            className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-          >
-            Back to Home
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}