create-aziz-app 2.0.4 → 2.0.5

package/bin/create-aziz-app.js

@@ -309,6 +309,9 @@ function Footer() {
 `;
         fs.writeFileSync(footerPath, footerContent);
     }
+    
+    // Update all pages
+    updatePagesForBootstrap(targetDir);
 }
 
 // Update components for Tailwind
@@ -374,6 +377,315 @@ function Footer() {
 `;
         fs.writeFileSync(footerPath, footerContent);
     }
+    
+    // Update all pages
+    updatePagesForTailwind(targetDir);
+}
+
+// Update all pages for Bootstrap
+function updatePagesForBootstrap(targetDir) {
+    const pagesDir = path.join(targetDir, 'pages');
+    if (!fs.existsSync(pagesDir)) return;
+    
+    // Update Home.jsx
+    const homePath = path.join(pagesDir, 'Home.jsx');
+    if (fs.existsSync(homePath)) {
+        fs.writeFileSync(homePath, getBootstrapHomePage());
+    }
+    
+    // Update test.jsx
+    const testPath = path.join(pagesDir, 'test.jsx');
+    if (fs.existsSync(testPath)) {
+        fs.writeFileSync(testPath, getBootstrapTestPage());
+    }
+    
+    // About and Contact pages are simple, they work with any framework
+}
+
+// Update all pages for Tailwind
+function updatePagesForTailwind(targetDir) {
+    const pagesDir = path.join(targetDir, 'pages');
+    if (!fs.existsSync(pagesDir)) return;
+    
+    // Update Home.jsx
+    const homePath = path.join(pagesDir, 'Home.jsx');
+    if (fs.existsSync(homePath)) {
+        fs.writeFileSync(homePath, getTailwindHomePage());
+    }
+    
+    // Update test.jsx
+    const testPath = path.join(pagesDir, 'test.jsx');
+    if (fs.existsSync(testPath)) {
+        fs.writeFileSync(testPath, getTailwindTestPage());
+    }
+}
+
+// Bootstrap Home Page
+function getBootstrapHomePage() {
+    return `/** @jsx h */
+
+registerPage("home", HomePage);
+
+function HomePage() {
+    return (
+        <div class="container py-5">
+            <h1 class="display-4 mb-4">Welcome Home 👋</h1>
+
+            <div class="card mb-4">
+                <div class="card-body">
+                    <h2 class="card-title">Global State Counter</h2>
+                    <p class="card-text">This uses the global state. Click the buttons to update it.</p>
+
+                    <div class="text-center my-4">
+                        <h1 class="display-1 fw-bold text-primary">{state.count}</h1>
+                    </div>
+
+                    <div class="d-flex gap-2 justify-content-center">
+                        <button class="btn btn-danger" onClick={() => setState({ count: state.count - 1 })}>−</button>
+                        <button class="btn btn-primary" onClick={() => setState({ count: state.count + 1 })}>+</button>
+                        <button class="btn btn-secondary" onClick={() => setState({ count: 0 })}>Reset</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-body">
+                    <h2 class="card-title">File-based Routing</h2>
+                    <p class="card-text">
+                        Each file in <strong>pages/</strong> is a route — just like Next.js.
+                        Add a new file, run the build script, and it's a new page.
+                    </p>
+                    <div class="d-flex gap-2">
+                        <button class="btn btn-primary" onClick={() => navigate("test")}>
+                            Go to Test Page →
+                        </button>
+                        <button class="btn btn-outline-primary" onClick={() => navigate("about")}>
+                            Go to About →
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+`;
+}
+
+// Tailwind Home Page
+function getTailwindHomePage() {
+    return `/** @jsx h */
+
+registerPage("home", HomePage);
+
+function HomePage() {
+    return (
+        <div class="container mx-auto py-10 px-4">
+            <h1 class="text-4xl font-bold mb-6 text-gray-800">Welcome Home 👋</h1>
+
+            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">Global State Counter</h2>
+                <p class="text-gray-600 mb-4">This uses the global state. Click the buttons to update it.</p>
+
+                <div class="text-center my-6">
+                    <h1 class="text-7xl font-bold text-primary">{state.count}</h1>
+                </div>
+
+                <div class="flex gap-3 justify-center">
+                    <button class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition" onClick={() => setState({ count: state.count - 1 })}>−</button>
+                    <button class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition" onClick={() => setState({ count: state.count + 1 })}>+</button>
+                    <button class="px-6 py-2 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition" onClick={() => setState({ count: 0 })}>Reset</button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">File-based Routing</h2>
+                <p class="text-gray-600 mb-4">
+                    Each file in <strong>pages/</strong> is a route — just like Next.js.
+                    Add a new file, run the build script, and it's a new page.
+                </p>
+                <div class="flex gap-3">
+                    <button class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition" onClick={() => navigate("test")}>
+                        Go to Test Page →
+                    </button>
+                    <button class="px-6 py-2 border-2 border-primary text-primary rounded-lg hover:bg-primary hover:text-dark transition" onClick={() => navigate("about")}>
+                        Go to About →
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+`;
+}
+
+// Bootstrap Test Page
+function getBootstrapTestPage() {
+    return `/** @jsx h */
+
+registerPage("test", TestPage);
+
+function TestPage() {
+    const [count, setCount] = useState(0);
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        alert(\`Form submitted!\\nName: \${name}\\nEmail: \${email}\\nCount: \${count}\`);
+    };
+    
+    return (
+        <div class="container py-5">
+            <h1 class="display-4 mb-4">Test Page 🧪</h1>
+
+            <div class="card mb-4">
+                <div class="card-body">
+                    <h2 class="card-title">Counter Example</h2>
+                    <p class="card-text">This demonstrates the state management system.</p>
+                    
+                    <div class="text-center my-4">
+                        <h1 class="display-1 fw-bold text-primary">{count}</h1>
+                    </div>
+                    <div class="d-flex gap-2 justify-content-center">
+                        <button class="btn btn-primary" onClick={() => setCount(count + 1)}>
+                            Increment
+                        </button>
+                        <button class="btn btn-danger" onClick={() => setCount(0)}>
+                            Reset
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card mb-4">
+                <div class="card-body">
+                    <h2 class="card-title">Form Example</h2>
+                    <p class="card-text">Try the form with state management.</p>
+                    
+                    <form onSubmit={handleSubmit}>
+                        <div class="mb-3">
+                            <label class="form-label">Name:</label>
+                            <input 
+                                type="text" 
+                                class="form-control"
+                                value={name}
+                                onInput={(e) => setName(e.target.value)}
+                                placeholder="Enter your name"
+                            />
+                        </div>
+                        
+                        <div class="mb-3">
+                            <label class="form-label">Email:</label>
+                            <input 
+                                type="email" 
+                                class="form-control"
+                                value={email}
+                                onInput={(e) => setEmail(e.target.value)}
+                                placeholder="Enter your email"
+                            />
+                        </div>
+                        
+                        <button type="submit" class="btn btn-primary">
+                            Submit Form
+                        </button>
+                    </form>
+                </div>
+            </div>
+            
+            <div class="card">
+                <div class="card-body">
+                    <h2 class="card-title">State Information</h2>
+                    <p class="mb-2">Current count: <strong class="text-primary">{count}</strong></p>
+                    <p class="mb-2">Current name: <strong class="text-primary">{name || 'Not set'}</strong></p>
+                    <p class="mb-0">Current email: <strong class="text-primary">{email || 'Not set'}</strong></p>
+                </div>
+            </div>
+        </div>
+    );
+}
+`;
+}
+
+// Tailwind Test Page
+function getTailwindTestPage() {
+    return `/** @jsx h */
+
+registerPage("test", TestPage);
+
+function TestPage() {
+    const [count, setCount] = useState(0);
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        alert(\`Form submitted!\\nName: \${name}\\nEmail: \${email}\\nCount: \${count}\`);
+    };
+    
+    return (
+        <div class="container mx-auto py-10 px-4">
+            <h1 class="text-4xl font-bold mb-6 text-gray-800">Test Page 🧪</h1>
+
+            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">Counter Example</h2>
+                <p class="text-gray-600 mb-4">This demonstrates the state management system.</p>
+                
+                <div class="text-center my-6">
+                    <h1 class="text-7xl font-bold text-primary">{count}</h1>
+                </div>
+                <div class="flex gap-3 justify-center">
+                    <button class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition" onClick={() => setCount(count + 1)}>
+                        Increment
+                    </button>
+                    <button class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition" onClick={() => setCount(0)}>
+                        Reset
+                    </button>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">Form Example</h2>
+                <p class="text-gray-600 mb-4">Try the form with state management.</p>
+                
+                <form onSubmit={handleSubmit} class="space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Name:</label>
+                        <input 
+                            type="text" 
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
+                            value={name}
+                            onInput={(e) => setName(e.target.value)}
+                            placeholder="Enter your name"
+                        />
+                    </div>
+                    
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Email:</label>
+                        <input 
+                            type="email" 
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary outline-none transition"
+                            value={email}
+                            onInput={(e) => setEmail(e.target.value)}
+                            placeholder="Enter your email"
+                        />
+                    </div>
+                    
+                    <button type="submit" class="px-6 py-2 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition">
+                        Submit Form
+                    </button>
+                </form>
+            </div>
+            
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-2xl font-bold mb-3 text-gray-800">State Information</h2>
+                <p class="mb-2 text-gray-700">Current count: <strong class="text-primary">{count}</strong></p>
+                <p class="mb-2 text-gray-700">Current name: <strong class="text-primary">{name || 'Not set'}</strong></p>
+                <p class="mb-0 text-gray-700">Current email: <strong class="text-primary">{email || 'Not set'}</strong></p>
+            </div>
+        </div>
+    );
+}
+`;
 }
 
 // Run main function

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
   "keywords": [
     "react",