frontend-hamroun 1.2.2 → 1.2.3

package/templates/basic/src/components/Counter.tsx

@@ -0,0 +1,26 @@
+import { useState } from 'front-package';
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="text-center">
+      <h2 className="text-xl font-bold mb-4">Counter Example</h2>
+      <p className="mb-4">Count: <span className="font-bold">{count}</span></p>
+      <div className="flex justify-center gap-2">
+        <button 
+          onClick={() => setCount(count - 1)}
+          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition"
+        >
+          Decrement
+        </button>
+        <button 
+          onClick={() => setCount(count + 1)}
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition"
+        >
+          Increment
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/basic/src/components/Header.tsx

@@ -0,0 +1,9 @@
+export function Header({ title }: { title: string }) {
+  return (
+    <header className="bg-primary-600 text-white shadow-lg">
+      <div className="container mx-auto px-4 py-6">
+        <h1 className="text-2xl font-bold">{title}</h1>
+      </div>
+    </header>
+  );
+}

package/templates/basic/src/components/TodoList.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'front-package';
+import { ApiClient, Todo } from '../api';
+
+interface TodoListProps {
+  todos: Todo[];
+  api: ApiClient;
+  setTodos: (todos: Todo[]) => void;
+}
+
+export function TodoList({ todos, api, setTodos }: TodoListProps) {
+  const [newTodoText, setNewTodoText] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  async function handleAddTodo(e: Event) {
+    e.preventDefault();
+    if (!newTodoText.trim()) return;
+    
+    try {
+      setIsSubmitting(true);
+      const newTodo = await api.addTodo({
+        title: newTodoText,
+        completed: false
+      });
+      
+      setTodos([...todos, newTodo]);
+      setNewTodoText('');
+    } catch (err) {
+      console.error('Failed to add todo:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  async function handleToggleTodo(id: string, completed: boolean) {
+    try {
+      await api.updateTodo(id, { completed });
+      setTodos(
+        todos.map(todo => 
+          todo.id === id ? { ...todo, completed } : todo
+        )
+      );
+    } catch (err) {
+      console.error('Failed to update todo:', err);
+    }
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleAddTodo} className="mb-4">
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={newTodoText}
+            onChange={(e) => setNewTodoText(e.target.value)}
+            placeholder="Add a new todo..."
+            className="flex-1 border rounded px-3 py-2"
+            disabled={isSubmitting}
+          />
+          <button 
+            type="submit" 
+            className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition"
+            disabled={isSubmitting || !newTodoText.trim()}
+          >
+            {isSubmitting ? 'Adding...' : 'Add'}
+          </button>
+        </div>
+      </form>
+
+      <ul className="space-y-2">
+        {todos.length === 0 ? (
+          <li className="text-center py-2 text-gray-500">No todos yet</li>
+        ) : (
+          todos.map(todo => (
+            <li key={todo.id} className="flex items-center gap-2 p-2 border-b">
+              <input
+                type="checkbox"
+                checked={todo.completed}
+                onChange={(e) => handleToggleTodo(todo.id, e.target.checked)}
+                className="h-5 w-5 text-blue-600"
+              />
+              <span className={todo.completed ? 'line-through text-gray-500' : ''}>
+                {todo.title}
+              </span>
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}

package/templates/basic/src/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/basic/src/main.ts

@@ -0,0 +1,20 @@
+import './main.css';
+import { render } from 'frontend-hamroun';
+import { App } from './App';
+import { createApiClient } from './api';
+
+// Initialize API client
+const api = createApiClient({
+  baseUrl: import.meta.env.VITE_API_URL || '/api'
+});
+
+// Render the app into the DOM
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('app');
+  if (rootElement) {
+    render(<App api={api} />, rootElement);
+    console.log('App rendered successfully');
+  } else {
+    console.error('Root element #app not found');
+  }
+});

package/templates/basic/src/main.tsx

@@ -0,0 +1,144 @@
+import { render, useState, useEffect, useMemo, useRef, useErrorBoundary, createContext, useContext } from 'frontend-hamroun';
+import './main.css';
+
+// Create a theme context
+const ThemeContext = createContext<'light' | 'dark'>('light');
+
+// Create a component that will throw an error when clicked
+function BuggyComponent() {
+  const [shouldError, setShouldError] = useState(false);
+  
+  if (shouldError) {
+    throw new Error("Test error from BuggyComponent");
+  }
+  
+  return (
+    <button 
+      onClick={() => setShouldError(true)}
+      className="bg-red-600 text-white px-4 py-2 rounded mt-4 hover:bg-red-700"
+    >
+      Trigger Error
+    </button>
+  );
+}
+
+function App() {
+  const [count, setCount] = useState(0);
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const renderCount = useRef(0);
+  const [error, resetError] = useErrorBoundary();
+  
+  // Demonstrate useEffect
+  useEffect(() => {
+    document.title = `Count: ${count}`;
+    renderCount.current += 1;
+    
+    return () => {
+      console.log('Cleanup effect');
+    };
+  }, [count]);
+  
+  // Demonstrate useMemo
+  const doubled = useMemo(() => count * 2, [count]);
+  
+  if (error) {
+    return (
+      <div className="p-8 max-w-md mx-auto bg-red-50 rounded-lg shadow-lg">
+        <h1 className="text-2xl font-bold text-red-600 mb-4">Something went wrong!</h1>
+        <button 
+          onClick={resetError}
+          className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <div className={`p-8 max-w-4xl mx-auto rounded-lg shadow-lg transition-colors ${
+        theme === 'dark' 
+          ? 'bg-gray-800 text-white' 
+          : 'bg-white text-gray-900'
+      }`}>
+        <h1 className="text-3xl font-bold mb-6">Welcome to Frontend Hamroun</h1>
+        
+        <div className="mb-6">
+          <button 
+            onClick={() => setCount(count - 1)}
+            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
+          >-</button>
+          <span className="mx-4 text-xl">{count}</span>
+          <button 
+            onClick={() => setCount(count + 1)}
+            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
+          >+</button>
+        </div>
+        
+        <p className="mb-2 text-lg">Doubled value: <span className="font-semibold">{doubled}</span></p>
+        <p className="mb-4 text-lg">Render count: <span className="font-semibold">{renderCount.current}</span></p>
+        
+        <button 
+          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+          className={`px-4 py-2 rounded mb-8 ${
+            theme === 'dark'
+              ? 'bg-yellow-400 text-gray-900 hover:bg-yellow-300'
+              : 'bg-gray-800 text-white hover:bg-gray-700'
+          }`}
+        >
+          Toggle Theme ({theme})
+        </button>
+        
+        <div className="mt-8 border-t pt-6">
+          <h2 className="text-2xl font-bold mb-4">Test Error Boundary</h2>
+          <BuggyComponent />
+        </div>
+        
+        <div className="mt-8 border-t pt-6">
+          <h2 className="text-2xl font-bold mb-4">Test Context</h2>
+          <ContextConsumer />
+        </div>
+      </div>
+    </ThemeContext.Provider>
+  );
+}
+
+// Component to test context
+function ContextConsumer() {
+  // Get the full context object for debugging
+  const themeContext = useContext(ThemeContext);
+  console.log('Theme context object:', themeContext);
+  
+  // Access the current theme from the parent component instead
+  // This is a workaround until context is properly implemented
+  return (
+    <div className={`mt-4 p-4 rounded-md border ${
+      themeContext === 'dark' ? 'border-gray-600' : 'border-gray-300'
+    }`}>
+      <p className="mb-2"><strong>Note:</strong> Context API needs a fix in the framework.</p>
+      <p className="mb-1">Context object type: {typeof themeContext}</p>
+      <p className="mb-4">Context object keys: {Object.keys(themeContext as object).join(', ') || 'none'}</p>
+      
+      <button 
+        onClick={() => {
+          // Since we can't get the value directly from context,
+          // Let's add a button to demonstrate we can still use the Provider
+          const newTheme = document.body.style.backgroundColor === 'rgb(51, 51, 51)' 
+            ? 'light' : 'dark';
+          
+          console.log('Manually changing theme to:', newTheme);
+          // This won't work yet, but demonstrates the intent
+          if (ThemeContext) {
+            console.log('Provider exists, would set value to:', newTheme);
+          }
+        }}
+        className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded"
+      >
+        Check Context Implementation
+      </button>
+    </div>
+  );
+}
+
+render(<App />, document.getElementById('root')!);

package/templates/basic/src/server.ts

@@ -0,0 +1,99 @@
+import { createServer, Router, Database, ApiRoute } from 'front-package';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import fs from 'fs';
+
+// Setup paths for server
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const DIST_PATH = process.env.NODE_ENV === 'production' 
+  ? join(__dirname, '..') 
+  : join(__dirname, '../dist');
+
+// Initialize database
+const db = new Database({
+  filePath: join(__dirname, '../data/db.json'),
+  defaultData: {
+    todos: [
+      { id: '1', title: 'Learn Front Package', completed: false },
+      { id: '2', title: 'Build an app', completed: false },
+      { id: '3', title: 'Deploy to production', completed: false }
+    ]
+  }
+});
+
+// Create API routes
+const apiRouter = new Router();
+
+// GET /api/todos
+apiRouter.get('/todos', async (req, res) => {
+  const todos = await db.getAll('todos');
+  res.json(todos);
+});
+
+// GET /api/todos/:id
+apiRouter.get('/todos/:id', async (req, res) => {
+  const todo = await db.getById('todos', req.params.id);
+  if (!todo) {
+    return res.status(404).json({ error: 'Todo not found' });
+  }
+  res.json(todo);
+});
+
+// POST /api/todos
+apiRouter.post('/todos', async (req, res) => {
+  const { title, completed = false } = req.body;
+  
+  if (!title) {
+    return res.status(400).json({ error: 'Title is required' });
+  }
+  
+  const newTodo = {
+    id: Date.now().toString(),
+    title,
+    completed
+  };
+  
+  await db.insert('todos', newTodo);
+  res.status(201).json(newTodo);
+});
+
+// PATCH /api/todos/:id
+apiRouter.patch('/todos/:id', async (req, res) => {
+  const todo = await db.getById('todos', req.params.id);
+  if (!todo) {
+    return res.status(404).json({ error: 'Todo not found' });
+  }
+  
+  const updatedTodo = { ...todo, ...req.body };
+  await db.update('todos', req.params.id, updatedTodo);
+  res.json(updatedTodo);
+});
+
+// DELETE /api/todos/:id
+apiRouter.delete('/todos/:id', async (req, res) => {
+  const todo = await db.getById('todos', req.params.id);
+  if (!todo) {
+    return res.status(404).json({ error: 'Todo not found' });
+  }
+  
+  await db.delete('todos', req.params.id);
+  res.status(204).end();
+});
+
+// Create server
+const server = createServer({
+  port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
+  staticDir: DIST_PATH,
+  routes: [
+    new ApiRoute('/api', apiRouter)
+  ]
+});
+
+// Start server
+server.start().then(() => {
+  console.log(`Server running at http://localhost:${server.port}`);
+}).catch(err => {
+  console.error('Failed to start server:', err);
+  process.exit(1);
+});

package/templates/basic/tailwind.config.js

@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter var', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+}

package/templates/basic/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/templates/basic/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment'
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    rollupOptions: {
+      // Mark testing dependencies as external so they won't be included in the bundle
+      external: [
+        'mock-aws-s3',
+        'aws-sdk',
+        'nock',
+        'jest',
+        'jest-mock',
+        '@testing-library/react',
+        '@testing-library/jest-dom'
+      ]
+    }
+  },
+  server: {
+    port: 3000,
+    open: true
+  }
+});

package/templates/basic-app/vite.config.ts

@@ -6,6 +6,8 @@ export default defineConfig({
     jsxFragment: 'Fragment'
   },
   build: {
+    outDir: 'dist',
+    emptyOutDir: true,
     rollupOptions: {
       // Mark testing dependencies as external so they won't be included in the bundle
       external: [
@@ -18,5 +20,9 @@ export default defineConfig({
         '@testing-library/jest-dom'
       ]
     }
+  },
+  server: {
+    port: 3000,
+    open: true
   }
 });

package/bin/cli.js

@@ -1,16 +0,0 @@
-#!/usr/bin/env node
-
-const path = require('path');
-const fs = require('fs');
-
-try {
-  // Try to load the ESM version
-  import('../dist/cli/index.js')
-    .catch(err => {
-      console.error('Failed to load CLI:', err);
-      process.exit(1);
-    });
-} catch (error) {
-  console.error('Error loading CLI:', error);
-  process.exit(1);
-}