frontend-hamroun 1.2.80 → 1.2.83

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

@@ -1,59 +1,857 @@
-import { useState, useEffect, useMemo, useRef, createContext } from 'frontend-hamroun';
+import { 
+  jsx, 
+  useState, 
+  useEffect, 
+  useMemo, 
+  useErrorBoundary
+} from 'frontend-hamroun';
 
-// Create a theme context
-const ThemeContext = createContext('light');
+// Todo Item Component - simple props-based component
+function TodoItem({ todo, onToggle, onDelete }) {
+  return (
+    <div className={`todo-item ${todo.completed ? 'completed' : ''}`}>
+      <input
+        type="checkbox"
+        checked={todo.completed}
+        onChange={() => onToggle(todo.id)}
+        className="todo-checkbox"
+      />
+      <span className="todo-text">{todo.text}</span>
+      <span className={`todo-priority priority-${todo.priority}`}>
+        {todo.priority === 'high' && '🔴'}
+        {todo.priority === 'medium' && '🟡'}
+        {todo.priority === 'low' && '🟢'}
+        {todo.priority}
+      </span>
+      <div className="todo-actions">
+        <button 
+          onClick={() => onDelete(todo.id)}
+          className="btn btn-sm btn-danger"
+          title="Delete todo"
+        >
+          🗑️
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Theme Toggle Button Component
+function ThemeToggleButton({ theme, onToggle }) {
+  return (
+    <button 
+      onClick={onToggle} 
+      className="btn btn-secondary theme-toggle"
+      title="Toggle theme"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  );
+}
+
+// App Footer Component
+function AppFooter({ theme, isBrowser }) {
+  return (
+    <footer className="app-footer">
+      <div className="container">
+        <p>Built with Frontend Hamroun • Hooks: useState, useEffect, useMemo, useErrorBoundary</p>
+        <p>Theme: <strong>{theme}</strong> • Environment: <strong>{isBrowser ? 'Client' : 'Server'}</strong></p>
+      </div>
+    </footer>
+  );
+}
 
 export function App() {
-  // Initialize with a default state that works on both server and client
-  const [count, setCount] = useState(0);
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
-  const renderCount = useRef(0);
+  // State hooks
+  const [todos, setTodos] = useState([
+    { id: 1, text: 'Learn Frontend Hamroun hooks', completed: false, priority: 'high' },
+    { id: 2, text: 'Build a todo app', completed: false, priority: 'medium' },
+    { id: 3, text: 'Master SSR concepts', completed: true, priority: 'low' }
+  ]);
+  const [newTask, setNewTask] = useState('');
+  const [taskFilter, setTaskFilter] = useState('all');
+  const [taskPriority, setTaskPriority] = useState('medium');
+  const [theme, setTheme] = useState('light');
+  const [isLoading, setIsLoading] = useState(false);
   
-  // Client-side only effect
+  // Error boundary hook
+  const [error, resetError] = useErrorBoundary();
+  
+  // Check if we're in browser environment
+  const isBrowser = typeof window !== 'undefined';
+
+  // Mount effect
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      renderCount.current += 1;
-      console.log('Component rendered', renderCount.current, 'times');
+    if (!isBrowser) return;
+    
+    console.log('Todo App mounted');
+    
+    // Load saved todos from localStorage
+    const savedTodos = localStorage.getItem('todos');
+    const savedTheme = localStorage.getItem('theme');
+    
+    if (savedTodos) {
+      try {
+        setTodos(JSON.parse(savedTodos));
+      } catch (e) {
+        console.error('Failed to load saved todos');
+      }
     }
-    return () => console.log('Component unmounting');
-  }, [count]);
-  
-  // Memoized value
-  const doubled = useMemo(() => count * 2, [count]);
-  
-  return (
-    <ThemeContext.Provider value={theme}>
-      <div style={{ 
-        padding: '20px', 
-        backgroundColor: theme === 'dark' ? '#333' : '#fff',
-        color: theme === 'dark' ? '#fff' : '#333'
-      }}>
-        <h1>Server-Side Rendered App</h1>
-        <div>
-          <button 
-            onClick={() => setCount(count - 1)}
-            data-action="decrement"
-          >-</button>
-          <span style={{ margin: '0 10px' }}>{count}</span>
-          <button 
-            onClick={() => setCount(count + 1)}
-            data-action="increment"
-          >+</button>
-        </div>
-        <p>Doubled value: {doubled}</p>
-        {typeof window !== 'undefined' && (
-          <p>Render count: {renderCount.current}</p>
-        )}
-        <button 
-          onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-          style={{ marginTop: '10px' }}
-        >
-          Toggle Theme ({theme})
+    
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+    
+    return () => {
+      console.log('Todo App unmounting');
+    };
+  }, []);
+
+  // Theme effect
+  useEffect(() => {
+    if (!isBrowser) return;
+    
+    document.body.className = `theme-${theme}`;
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }, [theme, isBrowser]);
+
+  // Save todos effect
+  useEffect(() => {
+    if (!isBrowser || todos.length === 0) return;
+    
+    localStorage.setItem('todos', JSON.stringify(todos));
+  }, [todos, isBrowser]);
+
+  // Memoized filtered todos
+  const filteredTodos = useMemo(() => {
+    console.log('Filtering todos - memoized computation');
+    return todos.filter(todo => {
+      if (taskFilter === 'completed') return todo.completed;
+      if (taskFilter === 'active') return !todo.completed;
+      if (taskFilter === 'high') return todo.priority === 'high';
+      if (taskFilter === 'medium') return todo.priority === 'medium';
+      if (taskFilter === 'low') return todo.priority === 'low';
+      return true;
+    });
+  }, [todos, taskFilter]);
+
+  // Memoized todo stats
+  const todoStats = useMemo(() => {
+    const total = todos.length;
+    const completed = todos.filter(t => t.completed).length;
+    const active = total - completed;
+    const highPriority = todos.filter(t => t.priority === 'high' && !t.completed).length;
+    
+    return { total, completed, active, highPriority };
+  }, [todos]);
+
+  // Todo action handlers
+  const handleToggleTodo = (id) => {
+    console.log('Toggling todo:', id);
+    setTodos(prev => prev.map(todo => 
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+
+  const handleDeleteTodo = (id) => {
+    console.log('Deleting todo:', id);
+    setTodos(prev => prev.filter(todo => todo.id !== id));
+  };
+
+  const handleAddTodo = (text, priority) => {
+    if (!text || !text.trim()) return;
+    
+    const newTodo = {
+      id: Date.now(),
+      text: text.trim(),
+      completed: false,
+      priority: priority || 'medium'
+    };
+    setTodos(prev => [...prev, newTodo]);
+  };
+
+  // Event handlers
+  const addTask = () => {
+    if (newTask.trim()) {
+      setIsLoading(true);
+      
+      // Simulate async operation
+      setTimeout(() => {
+        handleAddTodo(newTask, taskPriority);
+        setNewTask('');
+        setIsLoading(false);
+      }, 300);
+    }
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      addTask();
+    }
+  };
+
+  const clearCompleted = () => {
+    setTodos(prev => prev.filter(todo => !todo.completed));
+  };
+
+  const markAllComplete = () => {
+    setTodos(prev => prev.map(todo => ({ ...todo, completed: true })));
+  };
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  const simulateError = () => {
+    throw new Error('Simulated error for testing error boundary');
+  };
+
+  if (error) {
+    return (
+      <div className="error-container">
+        <h2>Something went wrong!</h2>
+        <p>{error.message}</p>
+        <button onClick={resetError} className="btn btn-primary">
+          Try Again
         </button>
-        <script dangerouslySetInnerHTML={{
-          __html: `window.__INITIAL_STATE__ = ${JSON.stringify({ count: 0, theme: 'light' })};`
-        }} />
       </div>
-    </ThemeContext.Provider>
+    );
+  }
+
+  return (
+    <div className={`app theme-${theme}`}>
+      
+      {/* Header */}
+      <header className="app-header">
+        <div className="container">
+          <h1 className="app-title">
+            📝 Todo App
+            <span className="subtitle">Built with Frontend Hamroun</span>
+          </h1>
+          
+          <div className="header-controls">
+            <ThemeToggleButton theme={theme} onToggle={toggleTheme} />
+            <div className="stats">
+              <span className="stat">
+                Total: <strong>{todoStats.total}</strong>
+              </span>
+              <span className="stat">
+                Active: <strong>{todoStats.active}</strong>
+              </span>
+              <span className="stat">
+                Done: <strong>{todoStats.completed}</strong>
+              </span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="main-content">
+        <div className="container">
+          
+          {/* Add Todo Section */}
+          <section className="card add-todo-section">
+            <h2>➕ Add New Todo</h2>
+            
+            <div className="add-todo-form">
+              <input
+                type="text"
+                value={newTask}
+                onChange={(e) => setNewTask(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="What needs to be done?"
+                className="input todo-input"
+                disabled={isLoading}
+              />
+              
+              <select 
+                value={taskPriority} 
+                onChange={(e) => setTaskPriority(e.target.value)}
+                className="select priority-select"
+                disabled={isLoading}
+              >
+                <option value="low">🟢 Low Priority</option>
+                <option value="medium">🟡 Medium Priority</option>
+                <option value="high">🔴 High Priority</option>
+              </select>
+              
+              <button 
+                onClick={addTask} 
+                className={`btn btn-primary add-btn ${isLoading ? 'loading' : ''}`}
+                disabled={isLoading || !newTask.trim()}
+              >
+                {isLoading ? '⏳ Adding...' : '➕ Add Todo'}
+              </button>
+            </div>
+          </section>
+
+          {/* Filters Section */}
+          <section className="card filters-section">
+            <h2>🔍 Filter Todos</h2>
+            
+            <div className="filters">
+              {['all', 'active', 'completed', 'high', 'medium', 'low'].map(filterType => (
+                <button
+                  key={filterType}
+                  onClick={() => setTaskFilter(filterType)}
+                  className={`btn btn-sm filter-btn ${taskFilter === filterType ? 'btn-primary' : 'btn-outline'}`}
+                >
+                  {filterType === 'all' && '📋 All'}
+                  {filterType === 'active' && '⏳ Active'}
+                  {filterType === 'completed' && '✅ Completed'}
+                  {filterType === 'high' && '🔴 High Priority'}
+                  {filterType === 'medium' && '🟡 Medium Priority'}
+                  {filterType === 'low' && '🟢 Low Priority'}
+                </button>
+              ))}
+            </div>
+            
+            <div className="bulk-actions">
+              <button 
+                onClick={markAllComplete}
+                className="btn btn-success btn-sm"
+                disabled={todoStats.active === 0}
+              >
+                ✅ Mark All Complete
+              </button>
+              <button 
+                onClick={clearCompleted}
+                className="btn btn-warning btn-sm"
+                disabled={todoStats.completed === 0}
+              >
+                🗑️ Clear Completed
+              </button>
+            </div>
+          </section>
+
+          {/* Todos List Section */}
+          <section className="card todos-section">
+            <div className="section-header">
+              <h2>📋 Todo List</h2>
+              <div className="filter-info">
+                Showing <strong>{filteredTodos.length}</strong> of <strong>{todoStats.total}</strong> todos
+                {taskFilter !== 'all' && <span className="filter-badge">{taskFilter}</span>}
+              </div>
+            </div>
+
+            <div className="todos-list">
+              {filteredTodos.length > 0 ? (
+                filteredTodos.map(todo => (
+                  <TodoItem 
+                    key={todo.id} 
+                    todo={todo} 
+                    onToggle={handleToggleTodo}
+                    onDelete={handleDeleteTodo}
+                  />
+                ))
+              ) : (
+                <div className="empty-state">
+                  <p>
+                    {taskFilter === 'all' ? '🎉 No todos yet. Add one above!' : 
+                     taskFilter === 'completed' ? '📝 No completed todos yet.' :
+                     taskFilter === 'active' ? '🎯 No active todos. Great job!' :
+                     `🔍 No ${taskFilter} priority todos found.`}
+                  </p>
+                </div>
+              )}
+            </div>
+          </section>
+
+          {/* Actions Section */}
+          <section className="card actions-section">
+            <h2>⚙️ Actions</h2>
+            <div className="action-buttons">
+              <button onClick={simulateError} className="btn btn-danger">
+                💥 Test Error Boundary
+              </button>
+            </div>
+          </section>
+
+        </div>
+      </main>
+
+      {/* Footer */}
+      <AppFooter theme={theme} isBrowser={isBrowser} />
+
+      {/* Styles */}
+      <style>{`
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+
+        :root {
+          --primary: #3b82f6;
+          --primary-dark: #2563eb;
+          --secondary: #6b7280;
+          --success: #10b981;
+          --warning: #f59e0b;
+          --danger: #ef4444;
+          --background: #ffffff;
+          --surface: #f9fafb;
+          --text: #111827;
+          --text-muted: #6b7280;
+          --border: #e5e7eb;
+          --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+          --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+        }
+
+        [data-theme="dark"] {
+          --primary: #3b82f6;
+          --secondary: #9ca3af;
+          --success: #10b981;
+          --warning: #f59e0b;
+          --danger: #ef4444;
+          --background: #111827;
+          --surface: #1f2937;
+          --text: #f9fafb;
+          --text-muted: #9ca3af;
+          --border: #374151;
+        }
+
+        body {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          line-height: 1.6;
+          color: var(--text);
+          background-color: var(--background);
+          transition: all 0.3s ease;
+        }
+
+        .app {
+          min-height: 100vh;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .container {
+          max-width: 800px;
+          margin: 0 auto;
+          padding: 0 1rem;
+        }
+
+        /* Header */
+        .app-header {
+          background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+          color: white;
+          padding: 2rem 0;
+          box-shadow: var(--shadow-lg);
+        }
+
+        .app-header .container {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+
+        .app-title {
+          font-size: 2rem;
+          font-weight: 700;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+        }
+
+        .subtitle {
+          font-size: 1rem;
+          font-weight: 400;
+          opacity: 0.9;
+        }
+
+        .header-controls {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+
+        .stats {
+          display: flex;
+          gap: 1rem;
+          font-size: 0.875rem;
+        }
+
+        .stat {
+          background: rgba(255, 255, 255, 0.2);
+          padding: 0.5rem 0.75rem;
+          border-radius: 0.5rem;
+          backdrop-filter: blur(10px);
+        }
+
+        /* Main content */
+        .main-content {
+          flex: 1;
+          padding: 2rem 0;
+        }
+
+        /* Cards */
+        .card {
+          background: var(--surface);
+          border-radius: 1rem;
+          padding: 1.5rem;
+          margin-bottom: 1.5rem;
+          box-shadow: var(--shadow);
+          border: 1px solid var(--border);
+          transition: transform 0.2s ease;
+        }
+
+        .card:hover {
+          transform: translateY(-2px);
+        }
+
+        .card h2 {
+          font-size: 1.25rem;
+          margin-bottom: 1rem;
+          color: var(--text);
+        }
+
+        /* Add Todo Form */
+        .add-todo-form {
+          display: flex;
+          gap: 0.75rem;
+          flex-wrap: wrap;
+        }
+
+        .todo-input {
+          flex: 1;
+          min-width: 250px;
+        }
+
+        .priority-select {
+          min-width: 150px;
+        }
+
+        /* Filters */
+        .filters {
+          display: flex;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+        }
+
+        .filter-btn {
+          font-size: 0.875rem;
+        }
+
+        .bulk-actions {
+          display: flex;
+          gap: 0.5rem;
+          flex-wrap: wrap;
+        }
+
+        /* Section Header */
+        .section-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+          gap: 1rem;
+        }
+
+        .filter-info {
+          font-size: 0.875rem;
+          color: var(--text-muted);
+        }
+
+        .filter-badge {
+          background: var(--primary);
+          color: white;
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.75rem;
+          margin-left: 0.5rem;
+        }
+
+        /* Todos List */
+        .todos-list {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+
+        .todo-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 1rem;
+          background: var(--background);
+          border-radius: 0.5rem;
+          border: 1px solid var(--border);
+          transition: all 0.2s ease;
+        }
+
+        .todo-item:hover {
+          border-color: var(--primary);
+          box-shadow: var(--shadow);
+        }
+
+        .todo-item.completed {
+          opacity: 0.7;
+        }
+
+        .todo-item.completed .todo-text {
+          text-decoration: line-through;
+        }
+
+        .todo-checkbox {
+          width: 1.25rem;
+          height: 1.25rem;
+          cursor: pointer;
+        }
+
+        .todo-text {
+          flex: 1;
+          font-size: 1rem;
+        }
+
+        .todo-priority {
+          padding: 0.25rem 0.5rem;
+          border-radius: 0.25rem;
+          font-size: 0.75rem;
+          font-weight: 600;
+        }
+
+        .priority-high {
+          background: #fee2e2;
+          color: #991b1b;
+        }
+
+        .priority-medium {
+          background: #fef3c7;
+          color: #92400e;
+        }
+
+        .priority-low {
+          background: #dcfce7;
+          color: #166534;
+        }
+
+        .todo-actions {
+          display: flex;
+          gap: 0.5rem;
+        }
+
+        /* Form elements */
+        .input, .select {
+          padding: 0.75rem;
+          border: 2px solid var(--border);
+          border-radius: 0.5rem;
+          font-size: 1rem;
+          background: var(--background);
+          color: var(--text);
+          transition: border-color 0.2s ease;
+        }
+
+        .input:focus, .select:focus {
+          outline: none;
+          border-color: var(--primary);
+        }
+
+        /* Buttons */
+        .btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          padding: 0.75rem 1.5rem;
+          border: none;
+          border-radius: 0.5rem;
+          font-size: 0.875rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          text-decoration: none;
+          user-select: none;
+        }
+
+        .btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .btn-sm {
+          padding: 0.5rem 1rem;
+          font-size: 0.75rem;
+        }
+
+        .btn-primary {
+          background: var(--primary);
+          color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+          background: var(--primary-dark);
+          transform: translateY(-1px);
+        }
+
+        .btn-secondary {
+          background: var(--secondary);
+          color: white;
+        }
+
+        .btn-success {
+          background: var(--success);
+          color: white;
+        }
+
+        .btn-warning {
+          background: var(--warning);
+          color: white;
+        }
+
+        .btn-danger {
+          background: var(--danger);
+          color: white;
+        }
+
+        .btn-outline {
+          background: transparent;
+          color: var(--text);
+          border: 2px solid var(--border);
+        }
+
+        .btn-outline:hover:not(:disabled) {
+          background: var(--surface);
+          border-color: var(--primary);
+        }
+
+        .btn.loading {
+          position: relative;
+          color: transparent;
+        }
+
+        .btn.loading::after {
+          content: '';
+          position: absolute;
+          width: 1rem;
+          height: 1rem;
+          border: 2px solid transparent;
+          border-top: 2px solid currentColor;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+          color: white;
+        }
+
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+
+        .theme-toggle {
+          border-radius: 50%;
+          width: 3rem;
+          height: 3rem;
+          padding: 0;
+          font-size: 1.25rem;
+          background: rgba(255, 255, 255, 0.2);
+          color: white;
+          border: 2px solid rgba(255, 255, 255, 0.3);
+        }
+
+        .theme-toggle:hover {
+          background: rgba(255, 255, 255, 0.3);
+          transform: scale(1.05);
+        }
+
+        /* Empty state */
+        .empty-state {
+          text-align: center;
+          padding: 3rem 1rem;
+          color: var(--text-muted);
+        }
+
+        .empty-state p {
+          font-size: 1.1rem;
+        }
+
+        /* Actions section */
+        .action-buttons {
+          display: flex;
+          gap: 1rem;
+          flex-wrap: wrap;
+        }
+
+        /* Footer */
+        .app-footer {
+          background: var(--surface);
+          border-top: 1px solid var(--border);
+          padding: 1.5rem 0;
+          text-align: center;
+          color: var(--text-muted);
+          font-size: 0.875rem;
+        }
+
+        .app-footer p {
+          margin: 0.25rem 0;
+        }
+
+        /* Error container */
+        .error-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          min-height: 100vh;
+          padding: 2rem;
+          text-align: center;
+        }
+
+        .error-container h2 {
+          color: var(--danger);
+          margin-bottom: 1rem;
+        }
+
+        .error-container p {
+          color: var(--text-muted);
+          margin-bottom: 2rem;
+        }
+
+        /* Responsive design */
+        @media (max-width: 768px) {
+          .app-header .container {
+            flex-direction: column;
+            text-align: center;
+          }
+
+          .app-title {
+            font-size: 1.75rem;
+          }
+
+          .add-todo-form {
+            flex-direction: column;
+          }
+
+          .todo-input, .priority-select {
+            min-width: auto;
+            width: 100%;
+          }
+
+          .section-header {
+            flex-direction: column;
+            align-items: stretch;
+          }
+
+          .stats {
+            justify-content: center;
+          }
+
+          .filters {
+            justify-content: center;
+          }
+
+          .bulk-actions {
+            justify-content: center;
+          }
+        }
+
+        /* Smooth transitions */
+        * {
+          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+        }
+      `}</style>
+    </div>
   );
 }