create-template-html-css 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -7,6 +7,137 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### ⚛️ React Component Expansion (Part 3)
+
+#### Added - 3 New React Components
+- **Badge** - Status badge component
+  - 7 variants (default, primary, secondary, success, warning, error, info)
+  - 3 sizes (small, medium, large)
+  - Pill shape option
+  - Count badges with maxCount support (displays "99+" when exceeded)
+  - Dot badges for status indicators
+  - 4 positioning options (top-right, top-left, bottom-right, bottom-left)
+  - Outline style variants
+  - Pulse animation for attention
+  - Show/hide zero counts
+  - Dark mode support
+  - Use cases: notification counts, status labels, categories, priority levels
+
+- **Switch** - Toggle switch component for on/off states
+  - 6 colors (primary, secondary, success, error, warning, info)
+  - 3 sizes (small, medium, large)
+  - Label with left/right positioning
+  - Icon support for checked/unchecked states
+  - Loading state with spinner animation
+  - Disabled state
+  - Controlled component with onChange handler
+  - Focus, hover, and active effects
+  - Accessibility with role and aria attributes
+  - Dark mode support
+  - Use cases: settings toggles, dark mode, sound controls, notifications
+
+- **Progress** - Progress bar component for visual feedback
+  - 7 color variants (all standard colors)
+  - 3 sizes (small, medium, large)
+  - Percentage display (showPercentage)
+  - Custom labels (showLabel, custom label text)
+  - Striped pattern option
+  - Animated striped pattern
+  - Indeterminate loading state
+  - Min/max/value range support
+  - Aria attributes for accessibility
+  - Circular progress bonus styles
+  - Pulse glow animation
+  - Dark mode support
+  - Use cases: file uploads, task completion, loading states, skill levels
+
+#### Summary
+- React components expanded from 12 to 15 components
+- All new components follow the same structure (ComponentName.jsx, ComponentName.css, ComponentName.example.jsx)
+- Full color customization support with ##PRIMARY_COLOR## and ##SECONDARY_COLOR## placeholders
+- Components work in both full project and component-only modes
+- Comprehensive examples provided for each component with real-world use cases
+- Advanced CSS techniques: transforms, gradients, animations, pseudo-elements
+- Total new code: ~1,511 lines across 9 files
+
+### ⚛️ React Component Expansion (Part 2)
+
+#### Added - 3 New React Components
+- **Dropdown** - Advanced select dropdown component
+  - Single and multi-select support
+  - Searchable options
+  - Keyboard navigation
+  - Custom option rendering
+  - Disabled state
+  - Error handling and validation
+  - Max height customization
+  - Click-outside to close
+  - Smooth animations
+  
+- **Checkbox** - Customizable checkbox component
+  - Multiple sizes (small, medium, large)
+  - Multiple colors (primary, secondary, success, error)
+  - Indeterminate state support
+  - Label and helper text
+  - Error messages
+  - Disabled state
+  - Animated check mark
+  - Dark mode support
+  
+- **Tooltip** - Contextual tooltip component
+  - Four positions (top, bottom, left, right)
+  - Multiple triggers (hover, click, focus, both)
+  - Customizable delay
+  - Optional arrow
+  - Max width control
+  - Auto-positioning within viewport
+  - Smooth animations
+  - Disabled state
+
+#### Summary
+- React components expanded from 9 to 12 components
+- All new components follow the same structure (ComponentName.jsx, ComponentName.css, ComponentName.example.jsx)
+- Full color customization support with ##PRIMARY_COLOR## and ##SECONDARY_COLOR## placeholders
+- Components work in both full project and component-only modes
+- Comprehensive examples provided for each component
+
+### ⚛️ React Component Expansion (Part 1)
+
+#### Added - 3 New React Components (v2.1.0 extended)
+- **Navbar** - Responsive navigation bar with mobile hamburger menu
+  - Logo customization (text or component)
+  - Configurable menu items
+  - Mobile-responsive with slide-in menu
+  - Sticky positioning
+  - Smooth animations
+  - Click handlers for navigation
+  
+- **Input** - Advanced text input component with validation
+  - Multiple input types (text, email, password, etc.)
+  - Label and placeholder support
+  - Validation with error messages
+  - Helper text display
+  - Icon support
+  - Disabled and required states
+  - Focus and touch states
+  - Controlled and uncontrolled modes
+  - Max length support
+  
+- **Alert** - Notification/alert component with variants
+  - Four types: success, error, warning, info
+  - Auto-styled with type-specific colors
+  - Dismissible with close button
+  - Title and message support
+  - Custom icon support
+  - Smooth slide-in animation
+  - Optional close handler
+
+#### Summary
+- React components expanded from 6 to 9 components
+- All new components follow the same structure (ComponentName.jsx, ComponentName.css, ComponentName.example.jsx)
+- Full color customization support with ##PRIMARY_COLOR## and ##SECONDARY_COLOR## placeholders
+- Components work in both full project and component-only modes
+
 ## [2.1.0] - 2026-02-08
 
 ### ⚛️ React Support

package/CODE-SPLITTING-GUIDE.md

@@ -0,0 +1,274 @@
+# Code Splitting Guide 🚀
+
+This guide explains how to use code splitting features in your React projects to reduce bundle size and improve performance.
+
+## What is Code Splitting?
+
+Code splitting is a technique that splits your JavaScript bundle into smaller chunks that can be loaded on demand. This reduces the initial load time of your application by only loading the code that's needed for the current page.
+
+## Features
+
+### 1. Lazy Loading with React.lazy() and Suspense
+
+When you enable `--lazy-load` flag, your components are loaded dynamically using React's built-in lazy loading:
+
+```bash
+create-template create --react -c button -n my-app --lazy-load
+```
+
+This generates an App.jsx like this:
+
+```jsx
+import { lazy, Suspense } from 'react';
+import './components/Button/Button.css';
+
+// Component is loaded only when needed
+const Button = lazy(() => import('./components/Button/Button'));
+
+function App() {
+  return (
+    <Suspense fallback={<div className="loading">Loading...</div>}>
+      {/* Your component usage */}
+    </Suspense>
+  );
+}
+
+export default App;
+```
+
+**Benefits:**
+- ✅ Smaller initial bundle size
+- ✅ Faster page load time
+- ✅ Better performance on slow networks
+- ✅ Improved user experience with loading states
+
+### 2. Build Optimizations
+
+When you enable `--optimize-build` flag, your vite.config.js includes advanced optimizations:
+
+```bash
+create-template create --react -c button -n my-app --optimize-build
+```
+
+This generates:
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // Split vendor code into separate chunk
+          vendor: ['react', 'react-dom'],
+        },
+      },
+    },
+    minify: 'terser',
+    terserOptions: {
+      compress: {
+        drop_console: true, // Remove console.log in production
+      },
+    },
+  },
+});
+```
+
+**Benefits:**
+- ✅ Vendor code (React, ReactDOM) in separate chunk
+- ✅ Better caching (vendor chunk rarely changes)
+- ✅ Smaller main bundle
+- ✅ Console.log removal in production
+- ✅ Better compression
+
+### 3. Combine Both for Maximum Performance
+
+```bash
+create-template create --react -c counter -n my-app --lazy-load --optimize-build
+```
+
+This gives you:
+- Dynamic component loading
+- Optimized vendor chunking
+- Production-ready configuration
+
+## Interactive Mode
+
+You can also enable these features interactively:
+
+```bash
+create-template create
+```
+
+Then answer:
+- Framework: **React (JSX + CSS)**
+- Project type: **Full React project**
+- Component: *Choose your component*
+- Name: *Your project name*
+- Lazy loading: **Yes**
+- Build optimizations: **Yes**
+
+## Performance Impact
+
+### Without Code Splitting
+```
+bundle.js    150 KB
+├── React     45 KB
+├── ReactDOM  40 KB
+└── Your App  65 KB
+
+Initial Load: 150 KB (slower)
+```
+
+### With Code Splitting
+```
+vendor.js     85 KB  (cached)
+├── React     45 KB
+└── ReactDOM  40 KB
+
+main.js       35 KB  (loaded first)
+└── Core App  35 KB
+
+Button.js     30 KB  (lazy loaded)
+└── Component 30 KB
+
+Initial Load: 120 KB (faster!) ⚡
+Subsequent loads: 35 KB only (vendor cached)
+```
+
+## Advanced Usage
+
+### Route-Based Code Splitting
+
+For multi-page apps, you can extend this pattern:
+
+```jsx
+import { lazy, Suspense } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+const Home = lazy(() => import('./pages/Home'));
+const About = lazy(() => import('./pages/About'));
+const Contact = lazy(() => import('./pages/Contact'));
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Suspense fallback={<div>Loading page...</div>}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/contact" element={<Contact />} />
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
+  );
+}
+```
+
+### Custom Loading Component
+
+Replace the fallback with a custom loader:
+
+```jsx
+const Spinner = () => (
+  <div className="spinner">
+    <div className="spinner-circle"></div>
+  </div>
+);
+
+<Suspense fallback={<Spinner />}>
+  <Button />
+</Suspense>
+```
+
+## Bundle Analysis
+
+To analyze your bundle size:
+
+```bash
+npm install --save-dev rollup-plugin-visualizer
+```
+
+Update vite.config.js:
+
+```js
+import { visualizer } from 'rollup-plugin-visualizer';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    visualizer({
+      filename: './dist/stats.html',
+      open: true,
+    }),
+  ],
+  // ... rest of config
+});
+```
+
+Then run:
+
+```bash
+npm run build
+```
+
+This opens a visual representation of your bundle!
+
+## Best Practices
+
+1. **Always lazy load routes** in multi-page apps
+2. **Split vendor code** for better caching
+3. **Add meaningful loading states** for better UX
+4. **Analyze your bundle** to find optimization opportunities
+5. **Use lazy loading wisely** - don't split too aggressively
+6. **Test on slow networks** to verify improvements
+
+## Migration Guide
+
+### Existing Projects
+
+To add code splitting to an existing project:
+
+1. **Add lazy loading to App.jsx:**
+
+```jsx
+// Before
+import Button from './components/Button/Button';
+
+// After
+import { lazy, Suspense } from 'react';
+const Button = lazy(() => import('./components/Button/Button'));
+
+// Wrap your component in Suspense
+<Suspense fallback={<div>Loading...</div>}>
+  <Button />
+</Suspense>
+```
+
+2. **Update vite.config.js:**
+
+Add the build optimization section from this guide.
+
+3. **Test thoroughly:**
+
+```bash
+npm run build
+npm run preview
+```
+
+## Learn More
+
+- [React Code Splitting](https://react.dev/reference/react/lazy)
+- [Vite Build Optimizations](https://vitejs.dev/guide/build.html)
+- [Web Performance](https://web.dev/performance/)
+
+## Examples
+
+See the `templates-react/` directory for examples of components that can benefit from code splitting.
+
+---
+
+**Happy optimizing! 🎉**

package/COMPONENTS-GALLERY.html

@@ -252,20 +252,24 @@
 <body>
     <div class="container">
         <header>
-            <h1>🎨 Create Template HTML/CSS</h1>
-            <p>Interactive Component Gallery - v2.0.0</p>
+            <h1>🎨 Create Template HTML/CSS ⚛️</h1>
+            <p>Interactive Component Gallery - v2.1.0</p>
             <div class="stats">
                 <div class="stat">
-                    <div class="stat-number">46</div>
+                    <div class="stat-number">61</div>
                     <div class="stat-label">Total Templates</div>
                 </div>
                 <div class="stat">
-                    <div class="stat-number">16</div>
-                    <div class="stat-label">Interactive Games</div>
+                    <div class="stat-number">15</div>
+                    <div class="stat-label">React Components</div>
+                </div>
+                <div class="stat">
+                    <div class="stat-number">46</div>
+                    <div class="stat-label">HTML Templates</div>
                 </div>
                 <div class="stat">
-                    <div class="stat-number">30</div>
-                    <div class="stat-label">UI Components</div>
+                    <div class="stat-number">16</div>
+                    <div class="stat-label">Interactive Games</div>
                 </div>
             </div>
         </header>
@@ -357,6 +361,137 @@
             </div>
         </div>
 
+        <!-- React Components -->
+        <div class="category" data-category="react">
+            <div class="category-header">
+                <span class="category-icon">⚛️</span>
+                <h2 class="category-title">React Components (NEW)</h2>
+                <span class="category-count">15 components</span>
+            </div>
+            <div class="components-grid">
+                <div class="component-card" data-name="react alert notification">
+                    <h3 class="component-name">Alert <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Alert/notification with 4 types (success, error, warning, info)</p>
+                    <div class="component-command">
+                        create-template create --react -c alert -n my-alert
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react badge status count">
+                    <h3 class="component-name">Badge <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Status badge with counts, dots, and variants</p>
+                    <div class="component-command">
+                        create-template create --react -c badge -n my-badge
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react button">
+                    <h3 class="component-name">Button</h3>
+                    <p class="component-description">Customizable button with variants and sizes</p>
+                    <div class="component-command">
+                        create-template create --react -c button -n my-react-button
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react card">
+                    <h3 class="component-name">Card</h3>
+                    <p class="component-description">Display content in elegant card with image support</p>
+                    <div class="component-command">
+                        create-template create --react -c card -n my-card
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react checkbox form input">
+                    <h3 class="component-name">Checkbox <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Checkbox with sizes, colors, indeterminate state</p>
+                    <div class="component-command">
+                        create-template create --react -c checkbox -n my-checkbox
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react counter">
+                    <h3 class="component-name">Counter</h3>
+                    <p class="component-description">Interactive counter with increment/decrement</p>
+                    <div class="component-command">
+                        create-template create --react -c counter -n my-counter
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react dropdown select">
+                    <h3 class="component-name">Dropdown <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Select dropdown with search & multi-select</p>
+                    <div class="component-command">
+                        create-template create --react -c dropdown -n my-dropdown
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react form validation">
+                    <h3 class="component-name">Form</h3>
+                    <p class="component-description">Flexible form with validation & multiple fields</p>
+                    <div class="component-command">
+                        create-template create --react -c form -n my-react-form
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react input text field">
+                    <h3 class="component-name">Input <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Text input with validation, icons, and states</p>
+                    <div class="component-command">
+                        create-template create --react -c input -n my-input
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react modal dialog">
+                    <h3 class="component-name">Modal</h3>
+                    <p class="component-description">Dialog modal with overlay and close handlers</p>
+                    <div class="component-command">
+                        create-template create --react -c modal -n my-modal
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react navbar navigation">
+                    <h3 class="component-name">Navbar <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Responsive navbar with mobile hamburger menu</p>
+                    <div class="component-command">
+                        create-template create --react -c navbar -n my-navbar
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react progress bar loading">
+                    <h3 class="component-name">Progress <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Progress bar with variants and animations</p>
+                    <div class="component-command">
+                        create-template create --react -c progress -n my-progress
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react switch toggle">
+                    <h3 class="component-name">Switch <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Toggle switch for on/off states</p>
+                    <div class="component-command">
+                        create-template create --react -c switch -n my-switch
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react todo list">
+                    <h3 class="component-name">Todo List</h3>
+                    <p class="component-description">Complete todo list with CRUD operations</p>
+                    <div class="component-command">
+                        create-template create --react -c todo-list -n my-todos
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+                <div class="component-card" data-name="react tooltip hint">
+                    <h3 class="component-name">Tooltip <span class="game-badge">NEW</span></h3>
+                    <p class="component-description">Contextual tooltip with positions & triggers</p>
+                    <div class="component-command">
+                        create-template create --react -c tooltip -n my-tooltip
+                        <button class="copy-btn" onclick="copyCommand(this)">Copy</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <!-- Authentication Forms -->
         <div class="category" data-category="auth">
             <div class="category-header">
@@ -704,7 +839,7 @@
                 <a href="https://www.npmjs.com/package/create-template-html-css" target="_blank">📦 npm Package</a> | 
                 <a href="https://github.com/benshabbat/create-template-html-css" target="_blank">🐙 GitHub Repo</a>
             </p>
-            <p style="margin-top: 20px; opacity: 0.8;">v2.0.0 - 46 Templates Available</p>
+            <p style="margin-top: 20px; opacity: 0.8;">v2.1.0 - 46 HTML Templates + 15 React Components</p>
         </footer>
     </div>