create-aziz-app 2.0.15 → 3.0.1

package/template/docs/AUTO-IMPORT.md

@@ -1,99 +0,0 @@
-# 🚀 Auto-Import System
-
-## How It Works
-
-Instead of manually adding `<script>` tags, just run one command and all your files are automatically imported!
-
-## Usage
-
-### 1. Create Your Files
-
-Just create files in the appropriate folders:
-
-```
-pages/MyNewPage.jsx       ← Automatically becomes a route
-components/Button.jsx     ← Automatically available
-api/todos.js             ← Automatically registered
-```
-
-### 2. Run the Build Command
-
-```bash
-cd template
-node generate-imports.js
-```
-
-Or from the root:
-```bash
-npm run build
-```
-
-### 3. Refresh Your Browser
-
-That's it! Your new files are now loaded.
-
-## What Gets Auto-Imported
-
-- **`api/*.js`** - All API route files
-- **`components/*.jsx`** and **`components/*.js`** - All component files  
-- **`pages/*.jsx`** and **`pages/*.js`** - All page files
-
-## Example Workflow
-
-```bash
-# 1. Create a new page
-echo '/** @jsx h */
-registerPage("profile", ProfilePage);
-function ProfilePage() {
-    return <div><h1>Profile</h1></div>;
-}' > pages/Profile.jsx
-
-# 2. Run the generator
-node generate-imports.js
-
-# 3. Refresh browser and navigate to #/profile
-```
-
-## How It Works
-
-The `generate-imports.js` script:
-1. Scans the `api/`, `components/`, and `pages/` folders
-2. Finds all `.js` and `.jsx` files
-3. Automatically updates `app.html` with the correct `<script>` tags
-4. Maintains the correct loading order
-
-## Benefits
-
-✅ **No manual script tags** - Just create files and run the command  
-✅ **Automatic discovery** - Scans folders for you  
-✅ **Correct order** - Loads modules → API → components → pages  
-✅ **Simple** - One command does everything  
-
-## Tips
-
-- Run `node generate-imports.js` after creating/deleting files
-- The script is safe to run multiple times
-- It preserves your HTML structure
-- Works with both `.js` and `.jsx` files
-
-## Troubleshooting
-
-**Script not found?**
-```bash
-cd template
-node generate-imports.js
-```
-
-**New page not showing?**
-1. Make sure you ran `node generate-imports.js`
-2. Check that your file is in the `pages/` folder
-3. Refresh your browser (hard refresh: Ctrl+Shift+R)
-
-**Want to watch for changes automatically?**
-Install nodemon:
-```bash
-npm install -g nodemon
-nodemon --watch pages --watch components --watch api --exec "node generate-imports.js"
-```
-
-Now every time you create/modify a file, it auto-regenerates!

package/template/docs/AUTO-REGISTRATION.md

@@ -1,248 +0,0 @@
-# Auto-Registration Guide
-
-## Overview
-
-Pages automatically register themselves based on their function name. No need to call `registerPage()` manually!
-
-## How It Works
-
-### ✨ Automatic Registration
-
-Just name your page function with "Page" at the end:
-
-```jsx
-/** @jsx h */
-
-// That's it! Automatically becomes route "#/example"
-function ExamplePage() {
-    return (
-        <div>
-            <h1>Example Page</h1>
-            <p>This page auto-registered!</p>
-        </div>
-    );
-}
-```
-
-### Function Name → Route Mapping
-
-The system converts your function name to a route:
-
-| Function Name | Auto Route | URL |
-|--------------|------------|-----|
-| `HomePage()` | `home` | `#/home` |
-| `AboutPage()` | `about` | `#/about` |
-| `ContactPage()` | `contact` | `#/contact` |
-| `UserProfilePage()` | `userprofile` | `#/userprofile` |
-| `MyAwesomePage()` | `myawesome` | `#/myawesome` |
-
-**Rule:** Remove "Page" suffix and convert to lowercase.
-
-## Manual Registration (Optional)
-
-You can still manually register for custom route names:
-
-```jsx
-/** @jsx h */
-
-// Custom route name with dashes or different naming
-registerPage("user-profile", UserProfilePage);
-
-function UserProfilePage() {
-    return <div><h1>User Profile</h1></div>;
-}
-```
-
-### When to Use Manual Registration
-
-- **Custom route names** with dashes: `"api-demo"`, `"user-settings"`
-- **Multiple routes** pointing to same component
-- **Override auto-registration** with different name
-
-## Examples
-
-### Example 1: Simple Auto Page
-
-```jsx
-/** @jsx h */
-
-function ProductsPage() {
-    return (
-        <div>
-            <h1>Products</h1>
-            <p>Browse our products</p>
-        </div>
-    );
-}
-```
-
-Access at: `#/products`
-
-### Example 2: With State
-
-```jsx
-/** @jsx h */
-
-function DashboardPage() {
-    const [count, setCount] = useState(0);
-    
-    return (
-        <div>
-            <h1>Dashboard</h1>
-            <p>Count: {count}</p>
-            <button onClick={() => setCount(count + 1)}>
-                Increment
-            </button>
-        </div>
-    );
-}
-```
-
-Access at: `#/dashboard`
-
-### Example 3: Manual Registration
-
-```jsx
-/** @jsx h */
-
-// Want route "#/user-settings" instead of "#/usersettings"
-registerPage("user-settings", UserSettingsPage);
-
-function UserSettingsPage() {
-    return (
-        <div>
-            <h1>User Settings</h1>
-        </div>
-    );
-}
-```
-
-Access at: `#/user-settings`
-
-## Creating a New Page
-
-### Step 1: Create the file
-
-Create `pages/MyNewPage.jsx`:
-
-```jsx
-/** @jsx h */
-
-function MyNewPage() {
-    return (
-        <div>
-            <h1>My New Page</h1>
-            <div class="card">
-                <p>This is my new page!</p>
-            </div>
-        </div>
-    );
-}
-```
-
-### Step 2: That's it!
-
-The dev server will:
-1. Detect the new file
-2. Auto-generate the import in `app.html`
-3. Auto-register the route as `#/mynew`
-4. Reload the browser
-
-Navigate to `#/mynew` and your page appears!
-
-## Debugging
-
-### Check Auto-Registration
-
-Open browser console when the app starts. You'll see:
-
-```
-📄 Auto-registered: home → HomePage()
-📄 Auto-registered: about → AboutPage()
-📄 Auto-registered: contact → ContactPage()
-📄 Auto-registered: mynew → MyNewPage()
-```
-
-### Page Not Found?
-
-1. **Check function name** - Must end with "Page"
-2. **Check file is loaded** - Look in `app.html` for the script tag
-3. **Check console** - Look for auto-registration message
-4. **Try manual registration** - Use `registerPage("route", ComponentPage)`
-
-## Best Practices
-
-### ✅ Do This
-
-```jsx
-// Clear, descriptive names
-function HomePage() { }
-function AboutPage() { }
-function ContactPage() { }
-function UserProfilePage() { }
-```
-
-### ❌ Avoid This
-
-```jsx
-// Won't auto-register (missing "Page" suffix)
-function Home() { }
-function About() { }
-
-// Will create weird routes
-function Page() { }  // route: "" (empty)
-function MyPage() { } // route: "my" (too generic)
-```
-
-## Migration Guide
-
-### Old Way (Still Works)
-
-```jsx
-/** @jsx h */
-
-registerPage("about", AboutPage);
-
-function AboutPage() {
-    return <div><h1>About</h1></div>;
-}
-```
-
-### New Way (Simpler)
-
-```jsx
-/** @jsx h */
-
-function AboutPage() {
-    return <div><h1>About</h1></div>;
-}
-```
-
-Both work! The new way is just less code.
-
-## Advanced: Multiple Routes
-
-Point multiple routes to the same component:
-
-```jsx
-/** @jsx h */
-
-// Auto-registers as "dashboard"
-function DashboardPage() {
-    return <div><h1>Dashboard</h1></div>;
-}
-
-// Also register as "home" and "index"
-registerPage("home", DashboardPage);
-registerPage("index", DashboardPage);
-```
-
-Now `#/dashboard`, `#/home`, and `#/index` all show the same page!
-
-## Summary
-
-- **Function name ends with "Page"** → Auto-registers
-- **Route name** = function name without "Page", lowercase
-- **Manual registration** still available for custom names
-- **Dev server** handles everything automatically
-- **Zero configuration** needed for basic pages

package/template/docs/CSS-FRAMEWORKS.md

@@ -1,221 +0,0 @@
-# CSS Frameworks Guide
-
-## Overview
-
-Aziz App supports three CSS options:
-1. **Custom CSS** - Built-in custom styles
-2. **Bootstrap 5** - Popular component framework
-3. **Tailwind CSS** - Utility-first framework
-
-## Bootstrap 5
-
-### What's Included
-
-When you choose Bootstrap, the CLI automatically adds:
-- Bootstrap 5.3.2 CSS (CDN)
-- Bootstrap Icons
-- Bootstrap 5 JS Bundle
-- Updated Navbar with Bootstrap classes
-- Updated Footer with Bootstrap classes
-
-### Using Bootstrap
-
-```javascript
-// Example: Bootstrap Button
-<button class="btn btn-primary">Click Me</button>
-
-// Example: Bootstrap Card
-<div class="card">
-    <div class="card-body">
-        <h5 class="card-title">Card Title</h5>
-        <p class="card-text">Some content</p>
-    </div>
-</div>
-
-// Example: Bootstrap Grid
-<div class="container">
-    <div class="row">
-        <div class="col-md-6">Column 1</div>
-        <div class="col-md-6">Column 2</div>
-    </div>
-</div>
-```
-
-### Bootstrap Components
-
-Available components:
-- Buttons, Cards, Modals
-- Forms, Inputs, Validation
-- Navbar, Dropdowns, Tabs
-- Alerts, Badges, Progress bars
-- Grid system, Flexbox utilities
-
-### Resources
-
-- [Bootstrap Docs](https://getbootstrap.com/docs/5.3/)
-- [Bootstrap Icons](https://icons.getbootstrap.com/)
-- [Bootstrap Examples](https://getbootstrap.com/docs/5.3/examples/)
-
-## Tailwind CSS
-
-### What's Included
-
-When you choose Tailwind, the CLI automatically adds:
-- Tailwind CSS CDN (Play CDN)
-- Custom color configuration
-- Updated Navbar with Tailwind classes
-- Updated Footer with Tailwind classes
-
-### Using Tailwind
-
-```javascript
-// Example: Tailwind Button
-<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
-    Click Me
-</button>
-
-// Example: Tailwind Card
-<div class="bg-white shadow-lg rounded-lg p-6">
-    <h2 class="text-2xl font-bold mb-4">Card Title</h2>
-    <p class="text-gray-700">Some content</p>
-</div>
-
-// Example: Tailwind Grid
-<div class="container mx-auto">
-    <div class="grid grid-cols-2 gap-4">
-        <div>Column 1</div>
-        <div>Column 2</div>
-    </div>
-</div>
-```
-
-### Tailwind Utilities
-
-Common utilities:
-- Layout: `flex`, `grid`, `container`
-- Spacing: `p-4`, `m-2`, `space-x-4`
-- Colors: `bg-blue-500`, `text-red-600`
-- Typography: `text-xl`, `font-bold`
-- Effects: `shadow-lg`, `rounded-lg`
-
-### Custom Colors
-
-Pre-configured colors:
-- `primary` - #61dafb (Aziz blue)
-- `dark` - #282c34 (Dark background)
-
-```javascript
-<div class="bg-primary text-dark">Custom colors!</div>
-```
-
-### Resources
-
-- [Tailwind Docs](https://tailwindcss.com/docs)
-- [Tailwind Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet)
-- [Tailwind Components](https://tailwindui.com/components)
-
-## Custom CSS
-
-### What's Included
-
-The default custom CSS includes:
-- Reset styles
-- Navbar and Footer styles
-- Card, Button, Form styles
-- Utility classes
-- Responsive design
-
-### Using Custom CSS
-
-```javascript
-// Example: Custom Button
-<button class="btn btn-primary">Click Me</button>
-
-// Example: Custom Card
-<div class="card">
-    <h2>Card Title</h2>
-    <p>Some content</p>
-</div>
-
-// Example: Custom Form
-<form>
-    <input type="text" placeholder="Enter text" />
-    <button class="btn btn-primary">Submit</button>
-</form>
-```
-
-### Available Classes
-
-**Buttons:**
-- `.btn` - Base button
-- `.btn-primary` - Primary button (blue)
-- `.btn-danger` - Danger button (red)
-- `.btn-grey` - Grey button
-
-**Layout:**
-- `.card` - Card container
-- `.count-display` - Large number display
-- `.counter-actions` - Button group
-
-**Forms:**
-- `input`, `textarea` - Styled inputs
-- `form` - Styled form
-
-## Switching Frameworks
-
-### After Project Creation
-
-If you want to switch frameworks after creating your project:
-
-**To Bootstrap:**
-1. Add Bootstrap CDN to `app.html`:
-```html
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-```
-
-2. Update your components with Bootstrap classes
-
-**To Tailwind:**
-1. Add Tailwind CDN to `app.html`:
-```html
-<script src="https://cdn.tailwindcss.com"></script>
-```
-
-2. Update your components with Tailwind classes
-
-**To Custom CSS:**
-1. Remove framework CDN links from `app.html`
-2. Update your components with custom classes
-
-## Best Practices
-
-### Bootstrap
-- Use semantic HTML with Bootstrap classes
-- Leverage Bootstrap's grid system
-- Use Bootstrap components for consistency
-- Customize with Bootstrap variables
-
-### Tailwind
-- Use utility classes directly in JSX
-- Combine utilities for complex designs
-- Use responsive prefixes (`md:`, `lg:`)
-- Extract common patterns into components
-
-### Custom CSS
-- Keep styles in `<style>` tag in `app.html`
-- Use BEM naming convention
-- Create reusable utility classes
-- Keep specificity low
-
-## Tips
-
-1. **Consistency** - Stick to one framework per project
-2. **Performance** - CDN links are cached by browsers
-3. **Customization** - All frameworks can be customized
-4. **Learning** - Start with one framework and master it
-5. **Components** - Build reusable components regardless of framework
-
-## Examples
-
-Check the example pages in your project to see the chosen framework in action!