baraqex 2.0.2 → 2.0.4

package/templates/fullstack-app/src/pages/about/index.tsx

@@ -1,67 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-import Layout from '../../components/Layout';
-
-const AboutPage = ({ initialState }) => {
-  return (
-    <Layout title="About This App">
-      <div className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
-        <div className="p-8">
-          <p className="text-lg text-gray-700 mb-6">
-            This is a frontend application built with Frontend Hamroun framework and styled with Tailwind CSS.
-          </p>
-          <p className="text-gray-600 mb-8">
-            It features server-side rendering, client-side navigation, and websocket-based live reloading during development.
-          </p>
-          
-          <div className="bg-gray-50 p-6 rounded-lg border border-gray-200 mb-8">
-            <h2 className="text-xl font-semibold text-gray-800 mb-4">Key Features</h2>
-            <ul className="space-y-2 text-gray-700">
-              <li className="flex items-center">
-                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                Server-side rendering
-              </li>
-              <li className="flex items-center">
-                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                Client-side navigation
-              </li>
-              <li className="flex items-center">
-                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                Component-based architecture
-              </li>
-              <li className="flex items-center">
-                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                Integrated API backend
-              </li>
-              <li className="flex items-center">
-                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                Live reload during development
-              </li>
-              <li className="flex items-center">
-                <svg className="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
-                </svg>
-                Tailwind CSS for styling
-              </li>
-            </ul>
-          </div>
-          
-          <a href="/" className="inline-block px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
-            Back to Home
-          </a>
-        </div>
-      </div>
-    </Layout>
-  );
-};
-
-export default AboutPage;

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

@@ -1,71 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-import Layout from '../components/Layout';
-
-export default function AboutPage({ initialState }) {
-  return (
-    <Layout title="About - Frontend Hamroun">
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-3xl font-bold text-blue-600 mb-6">
-          About Frontend Hamroun
-        </h1>
-        
-        <div className="bg-white shadow-lg rounded-lg p-8 mb-8">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">What is Frontend Hamroun?</h2>
-          <p className="text-gray-600 mb-4">
-            Frontend Hamroun is a lightweight JavaScript framework for building modern web applications.
-            It provides a familiar component-based architecture with hooks, JSX support, and 
-            server-side rendering capabilities.
-          </p>
-          <p className="text-gray-600 mb-4">
-            This framework is designed to be simple yet powerful, offering the essential features
-            needed for web application development without the complexity of larger frameworks.
-          </p>
-          
-          <h3 className="text-lg font-medium text-gray-700 mt-6 mb-2">Key Features:</h3>
-          <ul className="list-disc pl-6 text-gray-600 space-y-2">
-            <li>Component-based architecture</li>
-            <li>JSX support</li>
-            <li>Hooks for state and effects</li>
-            <li>Server-side rendering</li>
-            <li>Minimal API surface</li>
-            <li>File-based routing</li>
-            <li>Built-in API routes</li>
-          </ul>
-        </div>
-        
-        <div className="bg-white shadow-lg rounded-lg p-8">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">Getting Started</h2>
-          <p className="text-gray-600 mb-4">
-            This application was created using the Frontend Hamroun fullstack template,
-            which provides a complete setup for building applications with server-side rendering,
-            API routes, and client-side navigation.
-          </p>
-          
-          <div className="bg-gray-50 p-4 rounded-md mt-4">
-            <h3 className="text-md font-medium text-gray-700 mb-2">Quick Start:</h3>
-            <pre className="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto">
-              <code>{`# Create a new application
-npx frontend-hamroun create my-app
-
-# Change directory
-cd my-app
-
-# Start the development server
-npm run dev`}</code>
-            </pre>
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-}
-
-// Server-side data fetching
-export async function getServerSideProps() {
-  return {
-    props: {
-      pageTitle: 'About Frontend Hamroun',
-      description: 'Learn more about the Frontend Hamroun framework'
-    }
-  };
-}

package/templates/fullstack-app/src/pages/api/users/[id].ts

@@ -1,73 +0,0 @@
-// Dynamic API Route for individual user operations
-import { Request, Response } from 'express';
-
-// Sample data store
-const users = [
-  { 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' }
-];
-
-// Utility to find user by ID
-const findUser = (id: number) => users.find(user => user.id === id);
-
-// GET handler for retrieving a specific user
-export async function get(req: Request, res: Response) {
-  const userId = parseInt(req.params.id);
-  
-  if (isNaN(userId)) {
-    return res.status(400).json({ error: 'Invalid user ID' });
-  }
-  
-  const user = findUser(userId);
-  
-  if (!user) {
-    return res.status(404).json({ error: 'User not found' });
-  }
-  
-  res.json(user);
-}
-
-// PUT handler for updating a user
-export async function put(req: Request, res: Response) {
-  const userId = parseInt(req.params.id);
-  
-  if (isNaN(userId)) {
-    return res.status(400).json({ error: 'Invalid user ID' });
-  }
-  
-  const userIndex = users.findIndex(user => user.id === userId);
-  
-  if (userIndex === -1) {
-    return res.status(404).json({ error: 'User not found' });
-  }
-  
-  // Update user, but preserve the ID
-  const updatedUser = { ...req.body, id: userId };
-  users[userIndex] = updatedUser;
-  
-  res.json(updatedUser);
-}
-
-// DELETE handler for removing a user
-export async function del(req: Request, res: Response) {
-  const userId = parseInt(req.params.id);
-  
-  if (isNaN(userId)) {
-    return res.status(400).json({ error: 'Invalid user ID' });
-  }
-  
-  const userIndex = users.findIndex(user => user.id === userId);
-  
-  if (userIndex === -1) {
-    return res.status(404).json({ error: 'User not found' });
-  }
-  
-  // Remove the user
-  users.splice(userIndex, 1);
-  
-  res.status(204).end();
-}
-
-// Use delete handler for DELETE method since 'delete' is a reserved word
-export const DELETE = del;

package/templates/fullstack-app/src/pages/api/users/index.ts

@@ -1,43 +0,0 @@
-// Next.js-like API Route for Users
-import { Request, Response } from 'express';
-
-// Sample data store
-const users = [
-  { 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' }
-];
-
-// GET handler for retrieving all users
-export async function get(req: Request, res: Response) {
-  // Option to simulate delay for testing loading states
-  const delay = req.query.delay ? parseInt(req.query.delay as string) : 0;
-  
-  if (delay) {
-    await new Promise(resolve => setTimeout(resolve, delay));
-  }
-  
-  res.json(users);
-}
-
-// POST handler for creating a new user
-export async function post(req: Request, res: Response) {
-  try {
-    const newUser = req.body;
-    
-    // Validation
-    if (!newUser.name || !newUser.email) {
-      return res.status(400).json({ error: 'Name and email are required' });
-    }
-    
-    // Generate new ID
-    const newId = Math.max(0, ...users.map(u => u.id)) + 1;
-    const createdUser = { ...newUser, id: newId };
-    
-    users.push(createdUser);
-    
-    res.status(201).json(createdUser);
-  } catch (error) {
-    res.status(500).json({ error: 'Failed to create user' });
-  }
-}

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

@@ -1,110 +0,0 @@
-import { jsx, useState, useEffect, batchUpdates } from 'frontend-hamroun';
-import UserList from '../components/UserList';
-import StateDemo from '../components/StateDemo';
-import { ErrorBoundary } from '../components/ErrorBoundary';
-import { UserApi } from '../data/api';
-
-// Home Page Component with Server Side Props
-export default function HomePage({ users, posts, initialState }) {
-  const [state, setState] = useState(initialState || {});
-  const [refreshTrigger, setRefreshTrigger] = useState(0);
-  
-  // Fetch data when refresh is triggered
-  useEffect(() => {
-    if (refreshTrigger === 0) return; // Skip initial render
-    
-    async function fetchData() {
-      try {
-        const [users, posts] = await Promise.all([
-          UserApi.getAll(),
-          UserApi.getPosts()
-        ]);
-        
-        // Use batch updates for efficiency
-        batchUpdates(() => {
-          setState(prev => ({
-            ...prev,
-            data: {
-              ...prev.data,
-              users,
-              posts
-            },
-            lastUpdate: new Date().toISOString()
-          }));
-        });
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    }
-    
-    fetchData();
-  }, [refreshTrigger]);
-  
-  const handleRefresh = () => {
-    setRefreshTrigger(t => t + 1);
-  };
-
-  return (
-    <div className="max-w-4xl mx-auto py-8">
-      <h1 className="text-3xl font-bold text-blue-600 mb-6">
-        Welcome to your Next-style Frontend Hamroun application!
-      </h1>
-      
-      <div className="mb-8">
-        <button 
-          className="mb-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
-          onClick={handleRefresh}
-        >
-          Refresh Data
-        </button>
-        
-        <div className="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
-          <p className="text-blue-700">
-            Last updated: {state.lastUpdate || 'Never'} 
-          </p>
-        </div>
-      </div>
-      
-      <ErrorBoundary>
-        <div className="bg-white shadow-lg rounded-lg p-6 mb-8">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">User List</h2>
-          <UserList users={users || state.data?.users || []} />
-        </div>
-      </ErrorBoundary>
-      
-      <ErrorBoundary>
-        <StateDemo />
-      </ErrorBoundary>
-      
-      <div className="bg-gray-50 rounded-lg p-6 border border-gray-200 mt-8">
-        <h3 className="text-lg font-medium text-gray-700 mb-3">Application State</h3>
-        <pre className="overflow-auto p-4 bg-gray-100 rounded-md text-sm text-gray-800">
-          {JSON.stringify({ users, posts, ...state }, null, 2)}
-        </pre>
-      </div>
-    </div>
-  );
-}
-
-// Server-side data fetching (Next.js style)
-export async function getServerSideProps() {
-  try {
-    const users = await UserApi.getAll();
-    const posts = await UserApi.getPosts();
-    
-    return {
-      props: {
-        users,
-        posts
-      }
-    };
-  } catch (error) {
-    console.error('Error fetching initial data:', error);
-    return {
-      props: {
-        users: [],
-        posts: []
-      }
-    };
-  }
-}

package/templates/fullstack-app/src/pages/users/[id].tsx

@@ -1,153 +0,0 @@
-import { jsx, useState, useEffect } from 'frontend-hamroun';
-import { UserApi } from '../../data/api';
-
-export default function UserDetail({ user, posts, initialState }) {
-  // State for client-side data fetching when needed
-  const [userData, setUserData] = useState(user);
-  const [userPosts, setUserPosts] = useState(posts || []);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  
-  // Get user ID from route params
-  const { id } = initialState?.params || {};
-  
-  // Fetch user data if not provided from server
-  useEffect(() => {
-    if (!userData && id) {
-      setLoading(true);
-      
-      Promise.all([
-        UserApi.getById(id),
-        UserApi.getPosts(id)
-      ])
-        .then(([userData, postsData]) => {
-          setUserData(userData);
-          setUserPosts(postsData);
-          setLoading(false);
-        })
-        .catch(err => {
-          console.error('Error fetching user data:', err);
-          setError(err.message || 'Failed to load user data');
-          setLoading(false);
-        });
-    }
-  }, [userData, id]);
-
-  if (loading) {
-    return (
-      <div className="max-w-4xl mx-auto p-4">
-        <div className="animate-pulse rounded-md bg-gray-100 p-8">
-          <div className="h-8 bg-gray-200 rounded w-1/4 mb-4"></div>
-          <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
-          <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
-          <div className="h-40 bg-gray-200 rounded mb-4"></div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="max-w-4xl mx-auto p-4">
-        <div className="rounded-md bg-red-50 p-4 border border-red-200">
-          <h2 className="text-lg font-bold text-red-700">Error Loading User</h2>
-          <p className="text-red-600">{error}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!userData) {
-    return (
-      <div className="max-w-4xl mx-auto p-4">
-        <div className="rounded-md bg-yellow-50 p-4 border border-yellow-200">
-          <h2 className="text-lg font-bold text-yellow-700">User Not Found</h2>
-          <p className="text-yellow-600">Could not find user with ID: {id}</p>
-          <a href="/users" className="text-blue-600 hover:underline mt-2 block">
-            Back to Users List
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-4xl mx-auto p-4">
-      <div className="bg-white shadow-lg rounded-lg p-6 mb-6">
-        <h1 className="text-2xl font-bold text-gray-800 mb-4">{userData.name}</h1>
-        <div className="user-info mb-6">
-          <p className="text-gray-600">
-            <span className="font-bold">ID:</span> {userData.id}
-          </p>
-          <p className="text-gray-600">
-            <span className="font-bold">Email:</span> {userData.email}
-          </p>
-        </div>
-        
-        <a href="/users" className="text-blue-600 hover:underline">
-          Back to Users List
-        </a>
-      </div>
-      
-      {userPosts && userPosts.length > 0 ? (
-        <div className="bg-white shadow-lg rounded-lg p-6">
-          <h2 className="text-xl font-bold text-gray-800 mb-4">Posts by {userData.name}</h2>
-          <div className="space-y-4">
-            {userPosts.map(post => (
-              <div key={post.id} className="border-b pb-4">
-                <h3 className="text-lg font-semibold">{post.title}</h3>
-                <p className="text-gray-600">{post.content}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      ) : (
-        <div className="bg-white shadow-lg rounded-lg p-6">
-          <h2 className="text-xl font-bold text-gray-800 mb-4">Posts by {userData.name}</h2>
-          <p className="text-gray-500 italic">No posts found for this user.</p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Next.js style server-side data fetching
-export async function getServerSideProps({ params }) {
-  try {
-    const userId = params.id;
-    
-    // Parallel data fetching
-    const [user, posts] = await Promise.all([
-      UserApi.getById(parseInt(userId)),
-      UserApi.getPosts(parseInt(userId))
-    ]);
-    
-    // Handle user not found
-    if (!user) {
-      return {
-        notFound: true
-      };
-    }
-    
-    return {
-      props: {
-        user,
-        posts
-      }
-    };
-  } catch (error) {
-    console.error(`Error fetching user ${params.id}:`, error);
-    
-    // Pass the error for client-side handling
-    return {
-      props: {
-        error: {
-          message: error.message,
-          status: error.status || 500
-        },
-        user: null,
-        posts: []
-      }
-    };
-  }
-}

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

@@ -1,60 +0,0 @@
-import { jsx } from 'frontend-hamroun';
-import Layout from '../components/Layout';
-import { UserApi } from '../data/api';
-
-const UsersPage = ({ initialState }) => {
-  const users = initialState.data?.users || [];
-
-  return (
-    <Layout title="User Management">
-      <div className="max-w-4xl mx-auto">
-        <div className="bg-blue-50 p-6 rounded-lg mb-8 border border-blue-100">
-          <h2 className="text-xl font-semibold text-blue-800 mb-2">Data Fetching Demo</h2>
-          <p className="text-blue-700">This page demonstrates dynamic data fetching with the Users API.</p>
-        </div>
-        
-        <div className="bg-white shadow-md rounded-lg overflow-hidden">
-          <div className="px-6 py-4 border-b border-gray-200">
-            <h2 className="text-xl font-semibold text-gray-800">User List</h2>
-          </div>
-          
-          {users.length === 0 ? (
-            <div className="p-6 text-center text-gray-500">
-              <p>No users found.</p>
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="bg-gray-50">
-                    <th className="text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b">ID</th>
-                    <th className="text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b">Name</th>
-                    <th className="text-left py-3 px-6 font-medium text-gray-600 text-sm uppercase tracking-wider border-b">Email</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {users.map(user => (
-                    <tr key={user.id} className="hover:bg-gray-50">
-                      <td className="py-4 px-6 text-sm text-gray-900">{user.id}</td>
-                      <td className="py-4 px-6 text-sm font-medium text-gray-900">{user.name}</td>
-                      <td className="py-4 px-6 text-sm text-gray-500">{user.email}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-    </Layout>
-  );
-};
-
-// Static method to fetch initial data for this page
-UsersPage.getInitialData = async () => {
-  return {
-    users: await UserApi.getAll()
-  };
-};
-
-export default UsersPage;

package/templates/fullstack-app/src/pages/wasm-demo.tsx

@@ -1 +0,0 @@
-// This file will be removed as it contains WASM functionality