baraqex 1.0.63 → 1.0.65

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

@@ -0,0 +1,446 @@
+/* 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;
+  }
+}

package/templates/ssr-template/package-lock.json

@@ -8,7 +8,7 @@
       "name": "ssr-template",
       "version": "1.0.0",
       "dependencies": {
-        "baraqex": "file:../..",
+        "baraqex": "^1.0.64",
         "express": "^4.18.0",
         "frontend-hamroun": "^1.2.35"
       },
@@ -19,63 +19,6 @@
         "rimraf": "^5.0.0"
       }
     },
-    "../..": {
-      "version": "1.0.44",
-      "license": "MIT",
-      "dependencies": {
-        "frontend-hamroun": "^1.2.35"
-      },
-      "bin": {
-        "baraqex": "bin/baraqex.js"
-      },
-      "devDependencies": {
-        "@types/bcryptjs": "^2.4.6",
-        "@types/cors": "^2.8.18",
-        "@types/express": "^5.0.2",
-        "@types/node": "^20.0.0",
-        "@types/pg": "^8.15.4",
-        "esbuild": "^0.19.0",
-        "jest": "^29.0.0",
-        "rimraf": "^5.0.0",
-        "typescript": "^5.0.0"
-      },
-      "optionalDependencies": {
-        "bcryptjs": "^2.4.3",
-        "cors": "^2.8.5",
-        "express": "^4.18.0",
-        "jsonwebtoken": "^9.0.0",
-        "mongodb": "^6.0.0",
-        "mysql2": "^3.6.0",
-        "pg": "^8.11.0"
-      },
-      "peerDependencies": {
-        "cors": "^2.8.5",
-        "express": "^4.18.0"
-      },
-      "peerDependenciesMeta": {
-        "bcryptjs": {
-          "optional": true
-        },
-        "cors": {
-          "optional": true
-        },
-        "express": {
-          "optional": true
-        },
-        "jsonwebtoken": {
-          "optional": true
-        },
-        "mongodb": {
-          "optional": true
-        },
-        "mysql2": {
-          "optional": true
-        },
-        "pg": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.27.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
@@ -877,8 +820,43 @@
       "license": "MIT"
     },
     "node_modules/baraqex": {
-      "resolved": "../..",
-      "link": true
+      "version": "1.0.64",
+      "resolved": "https://registry.npmjs.org/baraqex/-/baraqex-1.0.64.tgz",
+      "integrity": "sha512-36lcAME0NUUKltHV69Rt/tk2OXWvtRhjIHaAd/MCLd6pw69sGDGxKFF5H8hyRUs9lq0kvUw9sD1rSFHw2YfeRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "frontend-hamroun": "^1.2.35"
+      },
+      "bin": {
+        "baraqex": "bin/baraqex.js"
+      },
+      "peerDependencies": {
+        "cors": ">=2.8.0",
+        "express": ">=4.18.0"
+      },
+      "peerDependenciesMeta": {
+        "bcryptjs": {
+          "optional": true
+        },
+        "cors": {
+          "optional": true
+        },
+        "express": {
+          "optional": true
+        },
+        "jsonwebtoken": {
+          "optional": true
+        },
+        "mongodb": {
+          "optional": true
+        },
+        "mysql2": {
+          "optional": true
+        },
+        "pg": {
+          "optional": true
+        }
+      }
     },
     "node_modules/base64-js": {
       "version": "1.5.1",

package/templates/ssr-template/package.json

@@ -16,7 +16,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "baraqex": "file:../..",
+    "baraqex": "^1.0.64",
     "express": "^4.18.0",
     "frontend-hamroun": "^1.2.35"
   },

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

@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef, useMemo } from 'baraqex';
+import { useState, useEffect, useRef, useMemo } from 'frontend-hamroun';
+import { jsx } from 'baraqex';
 
 // Custom hooks for better code organization
 function useTimer(initialTime = 0) {
@@ -418,8 +419,7 @@ export function App() {
                     transition: 'all 0.2s ease'
                   }}
                 >
-                  -
-                </button>
+                  -</button>
                 
                 <button
                   onClick={reset}
@@ -721,6 +721,7 @@ export function App() {
                 })
               </button>
             ))}
+
           </div>
 
           {/* Todo Items */}

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

@@ -1,4 +1,5 @@
-import { hydrate, jsx, render } from 'baraqex';
+import { hydrate, render } from 'frontend-hamroun';
+import { jsx } from 'baraqex';
 import { App } from './App.js';
 
 await hydrate(jsx(App, {}), document.getElementById('root')!);