frontend-hamroun 1.2.83 → 1.2.85

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

@@ -0,0 +1,625 @@
+import { jsx as _jsx, jsxs as _jsxs } from "frontend-hamroun/jsx-runtime";
+import { useState, useEffect, useMemo, useErrorBoundary } from 'frontend-hamroun';
+// Todo Item Component - simple props-based component
+function TodoItem({ todo, onToggle, onDelete }) {
+    return (_jsxs("div", { className: `todo-item ${todo.completed ? 'completed' : ''}`, children: [_jsx("input", { type: "checkbox", checked: todo.completed, onChange: () => onToggle(todo.id), className: "todo-checkbox" }), _jsx("span", { className: "todo-text", children: todo.text }), _jsxs("span", { className: `todo-priority priority-${todo.priority}`, children: [todo.priority === 'high' && '🔴', todo.priority === 'medium' && '🟡', todo.priority === 'low' && '🟢', todo.priority] }), _jsx("div", { className: "todo-actions", children: _jsx("button", { onClick: () => onDelete(todo.id), className: "btn btn-sm btn-danger", title: "Delete todo", children: "\uD83D\uDDD1\uFE0F" }) })] }));
+}
+// Theme Toggle Button Component
+function ThemeToggleButton({ theme, onToggle }) {
+    return (_jsx("button", { onClick: onToggle, className: "btn btn-secondary theme-toggle", title: "Toggle theme", children: theme === 'light' ? '🌙' : '☀️' }));
+}
+// App Footer Component
+function AppFooter({ theme, isBrowser }) {
+    return (_jsx("footer", { className: "app-footer", children: _jsxs("div", { className: "container", children: [_jsx("p", { children: "Built with Frontend Hamroun \u2022 Hooks: useState, useEffect, useMemo, useErrorBoundary" }), _jsxs("p", { children: ["Theme: ", _jsx("strong", { children: theme }), " \u2022 Environment: ", _jsx("strong", { children: isBrowser ? 'Client' : 'Server' })] })] }) }));
+}
+export function App() {
+    // State hooks with proper typing
+    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);
+    // Error boundary hook
+    const [error, resetError] = useErrorBoundary();
+    // Check if we're in browser environment
+    const isBrowser = typeof window !== 'undefined';
+    // Mount effect
+    useEffect(() => {
+        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');
+            }
+        }
+        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 (_jsxs("div", { className: "error-container", children: [_jsx("h2", { children: "Something went wrong!" }), _jsx("p", { children: error.message }), _jsx("button", { onClick: resetError, className: "btn btn-primary", children: "Try Again" })] }));
+    }
+    return (_jsxs("div", { className: `app theme-${theme}`, children: [_jsx("header", { className: "app-header", children: _jsxs("div", { className: "container", children: [_jsxs("h1", { className: "app-title", children: ["\uD83D\uDCDD Todo App", _jsx("span", { className: "subtitle", children: "Built with Frontend Hamroun" })] }), _jsxs("div", { className: "header-controls", children: [_jsx(ThemeToggleButton, { theme: theme, onToggle: toggleTheme }), _jsxs("div", { className: "stats", children: [_jsxs("span", { className: "stat", children: ["Total: ", _jsx("strong", { children: todoStats.total })] }), _jsxs("span", { className: "stat", children: ["Active: ", _jsx("strong", { children: todoStats.active })] }), _jsxs("span", { className: "stat", children: ["Done: ", _jsx("strong", { children: todoStats.completed })] })] })] })] }) }), _jsx("main", { className: "main-content", children: _jsxs("div", { className: "container", children: [_jsxs("section", { className: "card add-todo-section", children: [_jsx("h2", { children: "\u2795 Add New Todo" }), _jsxs("div", { className: "add-todo-form", children: [_jsx("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 }), _jsxs("select", { value: taskPriority, onChange: (e) => setTaskPriority(e.target.value), className: "select priority-select", disabled: isLoading, children: [_jsx("option", { value: "low", children: "\uD83D\uDFE2 Low Priority" }), _jsx("option", { value: "medium", children: "\uD83D\uDFE1 Medium Priority" }), _jsx("option", { value: "high", children: "\uD83D\uDD34 High Priority" })] }), _jsx("button", { onClick: addTask, className: `btn btn-primary add-btn ${isLoading ? 'loading' : ''}`, disabled: isLoading || !newTask.trim(), children: isLoading ? '⏳ Adding...' : '➕ Add Todo' })] })] }), _jsxs("section", { className: "card filters-section", children: [_jsx("h2", { children: "\uD83D\uDD0D Filter Todos" }), _jsx("div", { className: "filters", children: ['all', 'active', 'completed', 'high', 'medium', 'low'].map(filterType => (_jsxs("button", { onClick: () => setTaskFilter(filterType), className: `btn btn-sm filter-btn ${taskFilter === filterType ? 'btn-primary' : 'btn-outline'}`, children: [filterType === 'all' && '📋 All', filterType === 'active' && '⏳ Active', filterType === 'completed' && '✅ Completed', filterType === 'high' && '🔴 High Priority', filterType === 'medium' && '🟡 Medium Priority', filterType === 'low' && '🟢 Low Priority'] }, filterType))) }), _jsxs("div", { className: "bulk-actions", children: [_jsx("button", { onClick: markAllComplete, className: "btn btn-success btn-sm", disabled: todoStats.active === 0, children: "\u2705 Mark All Complete" }), _jsx("button", { onClick: clearCompleted, className: "btn btn-warning btn-sm", disabled: todoStats.completed === 0, children: "\uD83D\uDDD1\uFE0F Clear Completed" })] })] }), _jsxs("section", { className: "card todos-section", children: [_jsxs("div", { className: "section-header", children: [_jsx("h2", { children: "\uD83D\uDCCB Todo List" }), _jsxs("div", { className: "filter-info", children: ["Showing ", _jsx("strong", { children: filteredTodos.length }), " of ", _jsx("strong", { children: todoStats.total }), " todos", taskFilter !== 'all' && _jsx("span", { className: "filter-badge", children: taskFilter })] })] }), _jsx("div", { className: "todos-list", children: filteredTodos.length > 0 ? (filteredTodos.map(todo => (_jsx(TodoItem, { todo: todo, onToggle: handleToggleTodo, onDelete: handleDeleteTodo }, todo.id)))) : (_jsx("div", { className: "empty-state", children: _jsx("p", { children: 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.` }) })) })] }), _jsxs("section", { className: "card actions-section", children: [_jsx("h2", { children: "\u2699\uFE0F Actions" }), _jsx("div", { className: "action-buttons", children: _jsx("button", { onClick: simulateError, className: "btn btn-danger", children: "\uD83D\uDCA5 Test Error Boundary" }) })] })] }) }), _jsx(AppFooter, { theme: theme, isBrowser: isBrowser }), _jsx("style", { children: `
+        * {
+          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;
+        }
+      ` })] }));
+}