create-template-html-css 2.0.4 → 2.2.0

package/HTML-VS-REACT.md

@@ -0,0 +1,289 @@
+# HTML vs React - Which Should You Choose? 🤔
+
+This guide helps you decide whether to use HTML/CSS/JS templates or React components.
+
+## Quick Decision Tree
+
+```
+Do you need a static website or simple interactive page?
+├─ Yes → Use HTML/CSS/JS templates ✅
+└─ No → Continue
+
+Are you building a complex single-page application (SPA)?
+├─ Yes → Use React components ⚛️
+└─ No → Continue
+
+Do you need component reusability and state management?
+├─ Yes → Use React components ⚛️
+└─ No → Use HTML/CSS/JS templates ✅
+
+Do you already have a React project?
+├─ Yes → Use React components ⚛️
+└─ No → Use HTML/CSS/JS templates ✅
+```
+
+## HTML/CSS/JS Templates
+
+### ✅ Use When:
+
+- **Static Websites**: Landing pages, portfolios, blogs
+- **Simple Projects**: Small interactive pages without complex state
+- **Learning**: You're learning web development basics
+- **No Build Tools**: You want to avoid npm, webpack, vite, etc.
+- **Quick Prototypes**: Fast mockups and demos
+- **Direct Integration**: Adding to existing plain HTML projects
+- **SEO Priority**: Need server-side rendering without complexity
+
+### 📦 What You Get:
+
+```
+my-component/
+├── index.html       # Ready to open in browser
+├── css/
+│   └── style.css   # Styled and ready
+└── js/
+    └── script.js   # Vanilla JavaScript
+```
+
+### 🚀 Usage:
+
+```bash
+create-template create -c button -n my-button
+cd my-button
+# Just open index.html in browser - no build step!
+```
+
+### Example Use Cases:
+
+1. **Portfolio Website**: Use navigation, hero, footer templates
+2. **Landing Page**: Use hero, form, card templates
+3. **Documentation Site**: Use navigation, tabs, accordion
+4. **Business Website**: Use navigation, footer, form, card
+5. **Game Projects**: Use 16 interactive game templates
+6. **Prototyping**: Quick component mockups
+
+## React Components
+
+### ⚛️ Use When:
+
+- **Single Page Applications (SPAs)**: Complex interactive apps
+- **Component Reusability**: Need to use components multiple times
+- **State Management**: Complex data flows and state updates
+- **Modern Workflow**: Already using npm and build tools
+- **React Projects**: Integrating into existing React apps
+- **Team Collaboration**: Working with React-focused teams
+- **Scalability**: Building large applications
+
+### 📦 What You Get:
+
+```
+my-component/
+├── src/
+│   ├── components/
+│   │   └── Button/
+│   │       ├── Button.jsx
+│   │       └── Button.css
+│   ├── App.jsx
+│   └── index.js
+├── package.json
+├── vite.config.js
+└── index.html
+```
+
+### 🚀 Usage:
+
+```bash
+create-template create --react -c button -n my-button
+cd my-button
+npm install
+npm run dev
+```
+
+### Example Use Cases:
+
+1. **Dashboard Application**: Use counter, card, modal
+2. **Todo Application**: Use todo-list component
+3. **Form-Heavy Apps**: Use form component with validation
+4. **Admin Panels**: Use button, card, modal, form
+5. **Interactive UI**: Components with complex state
+6. **Component Libraries**: Building reusable component sets
+
+## Feature Comparison
+
+| Feature | HTML/CSS/JS | React |
+|---------|-------------|-------|
+| **Setup Time** | Instant | 2-3 minutes (npm install) |
+| **Learning Curve** | Beginner-friendly | Requires React knowledge |
+| **Build Tools** | None required | Vite (fast modern build) |
+| **File Size** | Smaller | Larger (includes React) |
+| **State Management** | Manual DOM | React hooks |
+| **SEO** | Excellent | Requires SSR/SSG |
+| **Browser Support** | All browsers | Modern browsers |
+| **Hot Reload** | Manual refresh | Automatic (HMR) |
+| **Component Reuse** | Copy/paste HTML | Import/export |
+| **TypeScript** | Not included | Easy to add |
+| **Testing** | Manual | Jest/Testing Library |
+| **Available Components** | 46 templates | 6 components |
+
+## Available Templates/Components
+
+### HTML Templates (46)
+
+**UI Components:**
+- button, card, form, navigation, modal, footer, hero
+- slider, table, login, register, skeleton, spinner
+- animated-card, typing-effect, fade-gallery
+- accordion, tabs, todo-list, counter
+
+**Layouts:**
+- grid-layout, flex-layout, flex-cards, flex-dashboard
+- dashboard-grid, masonry-grid
+
+**Games (16):**
+- tic-tac-toe, memory-game, snake-game, guess-number
+- game-2048, whack-a-mole, simon-says, rock-paper-scissors
+- breakout, tetris, flappy-bird, connect-four
+- blackjack, slot-machine, dice-game, pong
+
+### React Components (6)
+
+- Button, Card, Counter, Form, Modal, Todo List
+
+## Performance Considerations
+
+### HTML/CSS/JS:
+- ✅ Faster initial load (no framework)
+- ✅ Smaller file sizes
+- ✅ Better for static content
+- ⚠️ Manual DOM updates can be slow at scale
+
+### React:
+- ⚠️ Larger bundle size (React library)
+- ✅ Efficient updates with Virtual DOM
+- ✅ Better for dynamic content
+- ✅ Optimized rendering with reconciliation
+
+## Development Experience
+
+### HTML/CSS/JS:
+```bash
+# Create and run
+create-template create -c button -n my-button
+cd my-button
+# Open index.html - Done! ✅
+```
+
+**Pros:**
+- No installation time
+- Works everywhere
+- Easy to debug
+- Instant preview
+
+**Cons:**
+- Manual DOM manipulation
+- No component composition
+- Harder to maintain at scale
+
+### React:
+```bash
+# Create and run
+create-template create --react -c button -n my-button
+cd my-button
+npm install  # 30-60 seconds
+npm run dev  # Starts dev server
+```
+
+**Pros:**
+- Hot Module Replacement
+- Component composition
+- Easy state management
+- Better tooling
+
+**Cons:**
+- Requires Node.js
+- Build step needed
+- Steeper learning curve
+
+## Migration Path
+
+### Start with HTML, Move to React:
+
+1. **Learn basics with HTML templates**
+   ```bash
+   create-template create -c button -n html-button
+   ```
+
+2. **Get comfortable with React**
+   ```bash
+   create-template create --react -c button -n react-button
+   ```
+
+3. **Compare and learn the differences**
+
+4. **Choose based on project needs**
+
+## Recommendations by Project Type
+
+### Choose HTML/CSS/JS for:
+- 📄 Portfolio websites
+- 🎯 Landing pages
+- 📚 Documentation sites
+- 🎮 Simple games
+- 📧 Email templates
+- 🎨 Quick prototypes
+- 🏢 Small business sites
+
+### Choose React for:
+- 📱 Mobile-like web apps
+- 🎛️ Admin dashboards
+- 📊 Data visualization
+- ✅ Task management apps
+- 🛒 E-commerce apps
+- 💬 Chat applications
+- 🎮 Complex game interfaces
+
+## Cost Considerations
+
+### HTML/CSS/JS:
+- **Hosting**: Cheapest (static hosting)
+- **CDN**: Very affordable
+- **Bandwidth**: Minimal
+- **Servers**: No server-side logic needed
+
+### React:
+- **Hosting**: Static hosting (after build)
+- **CDN**: Same as HTML
+- **Bandwidth**: Slightly more (React bundle)
+- **Build Time**: Requires build step in CI/CD
+
+## Conclusion
+
+**Both options are great!** The choice depends on your:
+- Project complexity
+- Team expertise
+- Performance requirements
+- Development timeline
+- Maintenance needs
+
+**General Rule:**
+- Simple project? → HTML/CSS/JS ✅
+- Complex app? → React ⚛️
+- Not sure? → Start with HTML/CSS/JS, migrate if needed
+
+## Still Unsure?
+
+Try both and see which fits your workflow:
+
+```bash
+# Try HTML version
+create-template create -c counter -n counter-html
+
+# Try React version
+create-template create --react -c counter -n counter-react
+
+# Compare the code!
+```
+
+---
+
+**Need help deciding?** [Open an issue](https://github.com/benshabbat/create-template-html-css/issues) and we'll help you choose! 💡

package/QUICKSTART-REACT.md

@@ -0,0 +1,293 @@
+# React Quick Start Guide ⚛️
+
+Get started with React component generation in seconds!
+
+## Installation
+
+```bash
+npm install -g create-template-html-css
+```
+
+## Create Your First React Component
+
+### Interactive Mode (Recommended)
+
+```bash
+create-template create
+```
+
+1. Select **React (JSX + CSS)** as your framework
+2. Choose a component type (Button, Card, Counter, Form, Modal, or Todo List)
+3. Enter a name for your project
+4. Choose a color scheme (optional)
+
+### Quick Commands
+
+```bash
+# Create a React button
+create-template create --react -c button -n my-button
+
+# Create a React counter
+create-template create --react -c counter -n my-counter
+
+# Create a React todo list with ocean colors
+create-template create --react -c todo-list -n my-todos --color-scheme ocean
+
+# Create a React form with custom colors
+create-template create --react -c form -n contact-form --primary-color "#FF5733"
+```
+
+## Run Your React Project
+
+```bash
+cd my-counter
+npm install
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+## Available React Components
+
+### 🔘 Button
+A customizable button component with variants and sizes.
+
+**Features:**
+- Variants: primary, secondary, success, danger
+- Sizes: small, medium, large
+- Disabled state support
+- Click handlers
+
+**Usage:**
+```jsx
+<Button variant="primary" size="medium" onClick={handleClick}>
+  Click Me
+</Button>
+```
+
+### 🎴 Card
+Display content in an elegant card with image support.
+
+**Features:**
+- Optional image header
+- Title and description
+- Custom footer content
+- Hover effects
+- Dark mode support
+
+**Usage:**
+```jsx
+<Card
+  title="Beautiful Card"
+  description="This is a card description"
+  image="https://via.placeholder.com/400x200"
+  footer={<button>Learn More</button>}
+/>
+```
+
+### 🔢 Counter
+Interactive counter with increment/decrement functionality.
+
+**Features:**
+- Customizable initial value
+- Min/max limits
+- Custom step size
+- Reset button
+- Change callback
+
+**Usage:**
+```jsx
+<Counter 
+  initialValue={0}
+  min={0}
+  max={100}
+  step={1}
+  onChange={(value) => console.log(value)}
+/>
+```
+
+### 📝 Form
+Flexible form component with built-in validation.
+
+**Features:**
+- Multiple field types (text, email, textarea, select)
+- Required field validation
+- Pattern matching
+- Custom error messages
+- Min length validation
+
+**Usage:**
+```jsx
+<Form
+  title="Contact Form"
+  fields={[
+    { name: 'name', label: 'Name', type: 'text', required: true },
+    { name: 'email', label: 'Email', type: 'email', required: true },
+    { name: 'message', label: 'Message', type: 'textarea', required: true }
+  ]}
+  onSubmit={(data) => console.log(data)}
+/>
+```
+
+### 🪟 Modal
+Dialog modal component with overlay.
+
+**Features:**
+- Customizable sizes (small, medium, large)
+- Close on overlay click
+- Optional close button
+- Custom footer
+- Smooth animations
+
+**Usage:**
+```jsx
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Modal Title"
+  size="medium"
+>
+  <p>Modal content goes here</p>
+</Modal>
+```
+
+### ✅ Todo List
+Complete todo list with CRUD operations.
+
+**Features:**
+- Add new tasks
+- Toggle complete status
+- Delete tasks
+- Task statistics (active/completed)
+- Smooth animations
+
+**Usage:**
+```jsx
+<TodoList />
+```
+
+## Project Structure
+
+When you create a React component, you'll get:
+
+```
+my-counter/
+├── src/
+│   ├── components/
+│   │   └── Counter/
+│   │       ├── Counter.jsx    # Component logic
+│   │       └── Counter.css    # Component styles
+│   ├── App.jsx               # Main app component
+│   └── index.js              # Entry point
+├── index.html                # HTML template
+├── package.json              # Dependencies
+├── vite.config.js            # Vite configuration
+├── .gitignore               # Git ignore rules
+└── README.md                # Project documentation
+```
+
+## Customization
+
+### Colors
+
+All components support color customization:
+
+```bash
+# Use preset color schemes
+create-template create --react -c button --color-scheme ocean
+create-template create --react -c card --color-scheme sunset
+
+# Use custom colors
+create-template create --react -c counter --primary-color "#667eea" --secondary-color "#764ba2"
+```
+
+**Available color schemes:**
+- ocean, sunset, forest, purple, minimal, coral, teal, neon, vibrant, pastel
+
+### Modify Components
+
+All generated components are fully editable:
+
+1. Navigate to `src/components/[ComponentName]/`
+2. Edit `ComponentName.jsx` for logic
+3. Edit `ComponentName.css` for styles
+4. Update `App.jsx` to use your component
+
+### Add Dependencies
+
+```bash
+# Add any npm package
+npm install axios
+npm install react-router-dom
+npm install styled-components
+```
+
+## Build for Production
+
+```bash
+npm run build
+```
+
+This creates a `dist/` folder with optimized production files.
+
+## Preview Production Build
+
+```bash
+npm run preview
+```
+
+## Tips
+
+1. **Hot Module Replacement**: Vite provides instant updates when you edit files
+2. **Component Isolation**: Each component is self-contained with its own CSS
+3. **Easy Integration**: Copy components to existing React projects
+4. **TypeScript**: Add TypeScript support by renaming `.jsx` to `.tsx` and installing types
+5. **State Management**: Add Redux, Zustand, or other state libraries as needed
+
+## Examples
+
+### Create Multiple Components
+
+```bash
+# Create a button project
+create-template create --react -c button -n awesome-button
+
+# Create a form project
+create-template create --react -c form -n contact-form
+
+# Create a todo app
+create-template create --react -c todo-list -n my-todos
+```
+
+### Integrate into Existing Project
+
+1. Generate component:
+   ```bash
+   create-template create --react -c card -n temp-card
+   ```
+
+2. Copy component files:
+   ```bash
+   cp -r temp-card/src/components/Card ./src/components/
+   ```
+
+3. Import in your app:
+   ```jsx
+   import Card from './components/Card/Card';
+   import './components/Card/Card.css';
+   ```
+
+## Need Help?
+
+- 📚 [Full Documentation](https://github.com/benshabbat/create-template-html-css)
+- 🐛 [Report Issues](https://github.com/benshabbat/create-template-html-css/issues)
+- 💡 [Request Features](https://github.com/benshabbat/create-template-html-css/issues/new)
+
+## Next Steps
+
+- Explore all 6 React components
+- Try different color schemes
+- Customize components to your needs
+- Build your React app!
+
+Happy coding! 🚀