baraqex 1.0.70 → 1.0.72

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

@@ -1,200 +0,0 @@
-import { useState, useEffect } from 'baraqex';
-
-interface User {
-  id: number;
-  name: string;
-  email: string;
-}
-
-export default function HomePage() {
-  const [users, setUsers] = useState<User[]>([]);
-  const [newUser, setNewUser] = useState({ name: '', email: '' });
-  const [loading, setLoading] = useState(false);
-
-  // Fetch users on component mount
-  useEffect(() => {
-    fetchUsers();
-  }, []);
-
-  const fetchUsers = async () => {
-    try {
-      const response = await fetch('/api/users');
-      const data = await response.json();
-      if (data.success) {
-        setUsers(data.users);
-      }
-    } catch (error) {
-      console.error('Error fetching users:', error);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      const response = await fetch('/api/users', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(newUser),
-      });
-
-      const data = await response.json();
-      
-      if (data.success) {
-        setUsers([...users, data.user]);
-        setNewUser({ name: '', email: '' });
-      } else {
-        alert('Error: ' + data.error);
-      }
-    } catch (error) {
-      console.error('Error creating user:', error);
-      alert('Error creating user');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div style={{ 
-      fontFamily: 'system-ui, sans-serif', 
-      maxWidth: '800px', 
-      margin: '0 auto', 
-      padding: '20px' 
-    }}>
-      <h1 style={{ color: '#333', marginBottom: '30px' }}>
-        🚀 Baraqex Fullstack Demo
-      </h1>
-      
-      <p style={{ color: '#666', marginBottom: '40px' }}>
-        This page demonstrates server-side rendering with API integration. 
-        The page is rendered on the server and then hydrated on the client.
-      </p>
-
-      {/* Add User Form */}
-      <div style={{ 
-        background: '#f5f5f5', 
-        padding: '20px', 
-        borderRadius: '8px', 
-        marginBottom: '30px' 
-      }}>
-        <h2 style={{ marginTop: '0', color: '#333' }}>Add New User</h2>
-        <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: '15px' }}>
-            <input
-              type="text"
-              placeholder="Name"
-              value={newUser.name}
-              onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-              required
-            />
-          </div>
-          <div style={{ marginBottom: '15px' }}>
-            <input
-              type="email"
-              placeholder="Email"
-              value={newUser.email}
-              onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
-              style={{
-                width: '100%',
-                padding: '10px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                fontSize: '14px'
-              }}
-              required
-            />
-          </div>
-          <button
-            type="submit"
-            disabled={loading}
-            style={{
-              background: loading ? '#ccc' : '#007bff',
-              color: 'white',
-              border: 'none',
-              padding: '10px 20px',
-              borderRadius: '4px',
-              cursor: loading ? 'not-allowed' : 'pointer',
-              fontSize: '14px'
-            }}
-          >
-            {loading ? 'Adding...' : 'Add User'}
-          </button>
-        </form>
-      </div>
-
-      {/* Users List */}
-      <div>
-        <h2 style={{ color: '#333' }}>Users ({users.length})</h2>
-        {users.length === 0 ? (
-          <p style={{ color: '#666', fontStyle: 'italic' }}>
-            No users found. Add some users using the form above!
-          </p>
-        ) : (
-          <div style={{ display: 'grid', gap: '10px' }}>
-            {users.map((user) => (
-              <div
-                key={user.id}
-                style={{
-                  background: 'white',
-                  border: '1px solid #ddd',
-                  borderRadius: '6px',
-                  padding: '15px',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center'
-                }}
-              >
-                <div>
-                  <strong style={{ color: '#333' }}>{user.name}</strong>
-                  <br />
-                  <span style={{ color: '#666', fontSize: '14px' }}>{user.email}</span>
-                </div>
-                <div style={{ 
-                  background: '#28a745', 
-                  color: 'white', 
-                  padding: '4px 8px', 
-                  borderRadius: '4px', 
-                  fontSize: '12px' 
-                }}>
-                  ID: {user.id}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* API Info */}
-      <div style={{ 
-        marginTop: '40px', 
-        padding: '20px', 
-        background: '#e7f3ff', 
-        borderRadius: '8px' 
-      }}>
-        <h3 style={{ marginTop: '0', color: '#0066cc' }}>🔗 API Endpoints</h3>
-        <ul style={{ color: '#333' }}>
-          <li><code>GET /api/users</code> - Fetch all users</li>
-          <li><code>POST /api/users</code> - Create a new user</li>
-          <li><code>GET /api/hello</code> - Simple hello endpoint</li>
-        </ul>
-        <p style={{ color: '#666', fontSize: '14px', marginBottom: '0' }}>
-          Try visiting <a href="/api/users" target="_blank">/api/users</a> or <a href="/api/hello" target="_blank">/api/hello</a> to see the API responses.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// Page metadata for SEO
-HomePage.title = 'Baraqex Fullstack Demo';
-HomePage.description = 'A demonstration of Baraqex fullstack capabilities with SSR and API integration';

package/templates/fullstack-template/src/styles/App.css

@@ -1,446 +0,0 @@
-/* Reset and base styles */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background-color: #f8fafc;
-}
-
-.app {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Header Styles */
-.app-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 1rem 0;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-
-.header-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 2rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.app-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.logo {
-  font-size: 2rem;
-}
-
-.header-nav {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.nav-button {
-  background: rgba(255,255,255,0.1);
-  border: none;
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.9rem;
-}
-
-.nav-button:hover {
-  background: rgba(255,255,255,0.2);
-  transform: translateY(-1px);
-}
-
-.nav-button.active {
-  background: rgba(255,255,255,0.3);
-  font-weight: 600;
-}
-
-.user-menu {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.user-greeting {
-  font-size: 0.9rem;
-  opacity: 0.9;
-}
-
-.logout-button {
-  background: rgba(255,255,255,0.1);
-  border: 1px solid rgba(255,255,255,0.3);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 0.9rem;
-}
-
-.logout-button:hover {
-  background: rgba(255,255,255,0.2);
-}
-
-/* Main Content */
-.main-content {
-  flex: 1;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
-  width: 100%;
-}
-
-/* Dashboard Styles */
-.dashboard {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.dashboard-header {
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.dashboard-header h2 {
-  font-size: 2rem;
-  color: #2d3748;
-  margin-bottom: 0.5rem;
-}
-
-.dashboard-subtitle {
-  color: #718096;
-  font-size: 1.1rem;
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.stat-card {
-  background: white;
-  padding: 1.5rem;
-  border-radius: 1rem;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-}
-
-.stat-icon {
-  font-size: 2.5rem;
-  opacity: 0.8;
-}
-
-.stat-number {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #2d3748;
-  margin-bottom: 0.25rem;
-}
-
-.stat-label {
-  color: #718096;
-  font-size: 0.9rem;
-}
-
-/* Login Form */
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 60vh;
-}
-
-.login-form {
-  background: white;
-  padding: 2rem;
-  border-radius: 1rem;
-  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-  width: 100%;
-  max-width: 400px;
-}
-
-.login-title {
-  text-align: center;
-  font-size: 1.8rem;
-  color: #2d3748;
-  margin-bottom: 1.5rem;
-}
-
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  color: #4a5568;
-  font-weight: 500;
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 2px solid #e2e8f0;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  transition: border-color 0.2s;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: #667eea;
-}
-
-.submit-button {
-  width: 100%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-
-.submit-button:hover {
-  transform: translateY(-1px);
-}
-
-.submit-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.form-toggle {
-  text-align: center;
-  margin-top: 1rem;
-  color: #718096;
-}
-
-.form-toggle button {
-  background: none;
-  border: none;
-  color: #667eea;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.error-message {
-  background: #fed7d7;
-  color: #c53030;
-  padding: 0.75rem;
-  border-radius: 0.5rem;
-  margin-bottom: 1rem;
-  text-align: center;
-}
-
-/* Loading Spinner */
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 2rem;
-}
-
-.spinner {
-  width: 50px;
-  height: 50px;
-  border: 4px solid #e2e8f0;
-  border-top: 4px solid #667eea;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 1rem;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Todo List Styles */
-.todo-container {
-  background: white;
-  border-radius: 1rem;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-  overflow: hidden;
-}
-
-.todo-header {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 1.5rem;
-  text-align: center;
-}
-
-.todo-content {
-  padding: 1.5rem;
-}
-
-.todo-form {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.todo-input {
-  flex: 1;
-  padding: 0.75rem;
-  border: 2px solid #e2e8f0;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-}
-
-.todo-input:focus {
-  outline: none;
-  border-color: #667eea;
-}
-
-.add-button {
-  background: #667eea;
-  color: white;
-  border: none;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background-color 0.2s;
-}
-
-.add-button:hover {
-  background: #5a67d8;
-}
-
-.todo-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.todo-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: #f7fafc;
-  border-radius: 0.5rem;
-  transition: background-color 0.2s;
-}
-
-.todo-item:hover {
-  background: #edf2f7;
-}
-
-.todo-checkbox {
-  width: 1.25rem;
-  height: 1.25rem;
-  cursor: pointer;
-}
-
-.todo-text {
-  flex: 1;
-  font-size: 1rem;
-}
-
-.todo-text.completed {
-  text-decoration: line-through;
-  opacity: 0.6;
-}
-
-.delete-button {
-  background: #e53e3e;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  font-size: 0.9rem;
-  transition: background-color 0.2s;
-}
-
-.delete-button:hover {
-  background: #c53030;
-}
-
-/* Footer */
-.app-footer {
-  background: #2d3748;
-  color: white;
-  text-align: center;
-  padding: 1rem;
-  margin-top: auto;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .header-content {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .header-nav {
-    order: 3;
-    width: 100%;
-    justify-content: center;
-  }
-
-  .main-content {
-    padding: 1rem;
-  }
-
-  .stats-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .todo-form {
-    flex-direction: column;
-  }
-}
-
-@media (max-width: 480px) {
-  .stat-card {
-    padding: 1rem;
-  }
-
-  .stat-icon {
-    font-size: 2rem;
-  }
-
-  .stat-number {
-    font-size: 1.5rem;
-  }
-}