create-template-html-css 1.6.4 → 1.8.0

package/PUBLISH-GUIDE.md

@@ -0,0 +1,112 @@
+# Publishing Guide for v1.8.0
+
+## Pre-Publish Checklist ✅
+
+- [x] Version updated to 1.8.0 in package.json
+- [x] Version updated to 1.8.0 in bin/cli.js  
+- [x] README.md updated with all features
+- [x] CHANGELOG.md updated with v1.8.0 features
+- [x] All commits pushed to GitHub
+- [x] Security audit passed (npm audit: 0 vulnerabilities)
+- [x] No Hebrew text in codebase
+- [x] Path traversal protection added
+- [x] Input validation verified
+- [x] All 26 components available and tested
+
+## Features in v1.8.0
+
+### 🌙 Dark Mode Support
+- Automatic `prefers-color-scheme: dark` detection
+- `--dark-mode` flag to enable dark theme support
+
+### 🎨 Color Customizer with Presets
+- 10 preset color schemes: vibrant, pastel, ocean, sunset, forest, purple, minimal, coral, teal, neon
+- `--color-scheme` flag for preset selection
+- Interactive CLI color selection (preset/custom/skip)
+- Hex color validation
+- Automatic RGB conversion for rgba() support
+
+### 📊 Interactive Component Gallery
+- Browse all 26 components with descriptions
+- Search and filter by category
+- Live color scheme preview with hex values
+- Copy commands (both npx and local)
+- Dark mode support
+- Print-friendly layout
+- Mobile responsive design
+
+### 🎪 Gallery Command
+- `create-template gallery` opens COMPONENTS-GALLERY.html in browser
+- Cross-platform support (Windows, macOS, Linux)
+
+### 📦 Package Updates
+- Added `open` dependency for cross-platform file opening
+- Updated .npmignore to exclude development files
+- All dependencies verified and security audited
+
+## Publishing Steps
+
+### 1. Login to npm (if not already logged in)
+```bash
+npm login
+```
+
+### 2. Verify package contents
+```bash
+npm pack
+# This creates a .tgz file showing what will be published
+tar -tzf create-template-html-css-1.8.0.tgz | head -20
+```
+
+### 3. Publish to npm
+```bash
+npm publish
+```
+
+### 4. Verify published package
+```bash
+npm info create-template-html-css
+npm view create-template-html-css@1.8.0
+```
+
+### 5. Test installation from npm
+```bash
+npm install -g create-template-html-css@1.8.0
+create-template --version
+create-template list
+create-template gallery
+```
+
+### 6. Push commits to GitHub
+```bash
+git push origin main
+```
+
+## Post-Publish Tasks
+
+- [ ] Add release tag: `git tag -a v1.8.0 -m "Release v1.8.0"`
+- [ ] Push tags: `git push origin v1.8.0`
+- [ ] Create GitHub Release with changelog
+- [ ] Update social media/documentation sites
+- [ ] Monitor npm page for feedback
+
+## Package Statistics
+
+- **Version**: 1.8.0
+- **License**: MIT
+- **Repository**: https://github.com/benshabbat/create-template-html-css
+- **NPM**: https://www.npmjs.com/package/create-template-html-css
+- **Components**: 26 total
+- **Color Schemes**: 10 presets
+- **Dependencies**: 3 (chalk, commander, inquirer, open)
+- **DevDependencies**: 1 (prettier)
+
+## Security & Quality
+
+- ✅ No vulnerabilities (npm audit: 0)
+- ✅ Path traversal protection implemented
+- ✅ Input validation on all user inputs
+- ✅ Component whitelist validation
+- ✅ HTML structure validation
+- ✅ Cross-platform support verified
+- ✅ All code is English (no Hebrew text)

package/README.md

@@ -33,7 +33,7 @@ npm install -g create-template-html-css
 - 🌈 **Stunning Gradients** - Colorful and attractive designs
 - ⚡ **Animations** - Smooth and professional effects
 - 🔧 **Customizable** - Easy to edit and modify the code
-- 📦 **23 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts, Todo List, Counter, Accordion, Tabs
+- 📦 **26 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Login, Register, Skeleton, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts, Todo List, Counter, Accordion, Tabs
 - 🎯 **Two Modes** - Create new projects or insert into existing HTML pages
 - 🔒 **Secure** - Input validation and path protection
 - 📚 **Well Documented** - Comprehensive guides and examples
@@ -41,8 +41,115 @@ npm install -g create-template-html-css
 - ✨ **Prettier Formatting** - All generated code is automatically formatted with Prettier (v1.6.2+)
 - 📂 **Organized Structure** - CSS and JS files automatically organized in folders (v1.6.2+)
 - 💾 **Simple Backups** - Clean backup naming without timestamps (v1.6.2+)
+- 🎯 **Customizable Components** - Choose navigation items and form fields during creation (v1.7.0+)
 
-## 🆕 What's New in v1.6.2
+## 🆕 What's New in v1.8.0
+
+### 🌙 Dark Mode Support
+Every component now supports automatic dark mode detection:
+- Add `--dark-mode` flag to enable dark mode styles
+- Uses `prefers-color-scheme: dark` media query
+- Automatic color inversion in dark theme
+- Perfect for modern user preferences
+
+**Example:**
+```bash
+create-template create -c button -n my-button --dark-mode
+```
+
+### 🎨 Color Customizer
+Create components with custom colors instantly:
+- Use `--primary-color <hex>` flag for primary gradient color
+- Use `--secondary-color <hex>` flag for secondary color
+- Automatic CSS variables generation
+- RGB values automatically calculated
+
+**Custom Colors:**
+```bash
+create-template create -c button --primary-color "#FF5733"
+create-template create -c card --primary-color "#667eea" --secondary-color "#764ba2"
+```
+
+### 🎨 Preset Color Schemes
+10 beautiful color schemes ready to use instantly:
+
+| Scheme | Primary | Secondary | Use Case |
+|--------|---------|-----------|----------|
+| **Vibrant** | #FF6B6B | #4ECDC4 | Bold, energetic designs |
+| **Pastel** | #FFB3BA | #FFDFBA | Soft, friendly interfaces |
+| **Ocean** | #0066CC | #00CCFF | Professional, tech-focused |
+| **Sunset** | #FF6B35 | #FFA500 | Warm, engaging UIs |
+| **Forest** | #2D6A4F | #40916C | Natural, organic themes |
+| **Purple** | #7209B7 | #B5179E | Elegant, premium feel |
+| **Minimal** | #1A1A1A | #666666 | Clean, modern look |
+| **Coral** | #FF6B9D | #FFA07A | Playful, warm designs |
+| **Teal** | #008B8B | #20B2AA | Balanced, professional |
+| **Neon** | #FF006E | #00D9FF | Bold, futuristic style |
+
+**Usage:**
+```bash
+# Using the vibrant color scheme
+create-template create -c button -n vibrant-button --color-scheme vibrant
+
+# Using the ocean color scheme
+create-template create -c card -n ocean-card --color-scheme ocean
+
+# Interactive mode - select from presets
+create-template create -c modal
+# Then choose "Use preset color schemes" option
+```
+
+**View All Schemes:** Run `create-template gallery` to see live previews of all color schemes with swatches.
+
+### 📊 Interactive Component Gallery
+New **COMPONENTS-GALLERY.html** showcase page:
+- Browse all 26 components with descriptions
+- Search and filter by category
+- View all 10 color scheme presets with color swatches
+- Copy CLI commands (both npx and local) with one click
+- Dark mode support
+- Print-friendly layout
+- Mobile responsive design
+
+**Open gallery:**
+```bash
+create-template gallery
+# or
+npx create-template gallery
+```
+
+### 📚 Enhanced Documentation
+- Updated README with all new features
+- Improved CLI help text with examples
+- Detailed component showcase with features
+
+## 🆕 What's New in v1.7.0
+
+### 🎯 Customizable Navigation
+When creating a navigation component, you can now specify exactly which menu items you want:
+- Enter comma-separated items: "Home, Blog, Shop, Contact"
+- Automatically generates matching navigation links and page sections
+- Default: "Home, About, Services, Portfolio, Contact"
+
+### 📝 Customizable Form Fields
+Create forms with exactly the fields you need:
+- **Standard Fields**: Select from Name, Email, Phone, Subject, Message, Terms
+- **Custom Fields**: Add any field with format `type:label`
+  - Examples: `text:Age`, `url:Website`, `date:Birth Date`, `number:Quantity`
+  - Supports all HTML5 input types: text, email, url, date, number, tel, password, color, etc.
+  - Also supports: textarea, checkbox, select
+
+### 🎨 Component Variation Selection
+Choose exactly which variations you want for multi-style components:
+- **Button**: Select from 6 button types (Primary, Secondary, Success, Danger, Outlined, Disabled)
+- **Card**: Choose from 6 card variations (Modern, Premium, Blog, Minimal, User Profile, Interactive)
+- **Spinner**: Pick from 5 spinner types (Circle, Dots, Pulse, Bars, Gradient)
+- Option to select "All Variations" or choose specific ones
+
+### 🚀 Interactive CLI Experience
+Enhanced prompts guide you through component customization with clear instructions and validation.
+
+## 🎨 What Was Added in v1.6.2
 
 ### ✨ Prettier Code Formatting
 All generated and inserted files are automatically formatted with [Prettier](https://prettier.io/) for beautiful, professional-looking code.
@@ -96,9 +203,12 @@ create-template create
 Follow the interactive prompts:
 1. **Select Component Type** - Choose from Button, Card, Form, Navigation, Modal, Footer, or Hero
 2. **Enter Component Name** - Give your component a meaningful name
-3. **Include JavaScript** - Decide if you want to include the script file
+3. **Customize Component** (v1.7.0+):
+   - **Navigation**: Choose menu items (e.g., "Home, Blog, Shop, Contact")
+   - **Form**: Select standard fields and add custom fields (e.g., "text:Age, url:Website")
+4. **Include JavaScript** - Decide if you want to include the script file
 
-**Example:**
+**Example (Basic):**
 
 ```bash
 $ create-template create
@@ -109,6 +219,29 @@ $ create-template create
   Location: ./my-awesome-button/
 ```
 
+**Example (Navigation with Custom Items):**
+
+```bash
+$ create-template create
+? Choose a component type: Navigation
+? Enter a name for your component: my-nav
+? Enter navigation items (comma-separated): Home, Blog, Shop, About Us, Contact
+✓ Template created successfully!
+  Location: ./my-nav/
+```
+
+**Example (Form with Custom Fields):**
+
+```bash
+$ create-template create
+? Choose a component type: Form
+? Enter a name for your component: contact-form
+? Select form fields to include: Name, Email, Message
+? Add custom fields: text:Age, url:Website, date:Birth Date
+✓ Template created successfully!
+  Location: ./contact-form/
+```
+
 **Result:**
 ```
 my-awesome-button/
@@ -207,31 +340,45 @@ Responsive card component with 6 professional variations:
 
 ### 3. Form
 
-Complete contact form with validation:
+Complete contact form with validation and customizable fields (v1.7.0+):
 
-**Fields:**
-- Text input
-- Email input
-- Phone input
-- Select dropdown
-- Textarea
-- Checkboxes
+**Customization Options:**
+- **Standard Fields**: Name, Email, Phone, Subject, Message, Terms Checkbox
+- **Custom Fields**: Add any field with `type:label` format
+  - Supported types: text, email, url, date, number, tel, password, color, textarea, checkbox, select
+  - Examples: `text:Age`, `url:Website`, `date:Birth Date`, `number:Quantity`
 
 **Features:**
 - Real-time validation
 - Focus effects
 - Error messages
 - Modern styling
+- Fully customizable field selection
 
 ### 4. Navigation
 
-Responsive navigation bar for all devices:
+Responsive navigation bar with customizable menu items (v1.7.0+):
+
+**Customization:**
+- Choose exactly which menu items to include
+- Enter comma-separated items: "Home, Blog, Shop, Contact"
+- Automatically generates matching page sections
+- Default items: "Home, About, Services, Portfolio, Contact"
 
 **Components:**
 - Logo section
-- Navigation menu
+- Customizable navigation menu
 - Mobile hamburger menu
 - Smooth scrolling
+- Section highlighting on scroll
+
+**Features:**
+- Fully customizable menu structure
+- Mobile-responsive design
+- Sticky navigation
+- Active link highlighting
+- Animated hamburger menu
+- Smooth scroll to sections
 
 **Features:**
 - Fixed header option
@@ -254,6 +401,86 @@ Dialog boxes for various purposes:
 - Smooth animations
 - Backdrop blur effect
 
+### 6. Login (NEW in v1.8.0)
+
+Complete authentication login form with validation and social login:
+
+**Features:**
+- Email validation
+- Password validation (minimum 6 characters)
+- "Remember me" checkbox
+- "Forgot password" link
+- Social login buttons (Google, GitHub)
+- Real-time form validation
+- Focus states and animations
+- Responsive design
+- Modal integration with navigation
+
+**Includes:**
+- Login form with email/password fields
+- Remember me functionality
+- Forgot password handler
+- Social authentication placeholders
+- Professional gradient styling
+- Mobile-optimized layout
+
+### 7. Register (NEW in v1.8.0)
+
+Advanced user registration form with real-time password validation:
+
+**Features:**
+- Full name, email, username fields
+- Real-time password strength validation
+- Password requirements display:
+  - Minimum 8 characters
+  - Uppercase letter required
+  - Number required
+  - Special character required (@, #, $, %)
+- Password matching validation
+- Username validation (3-20 characters, alphanumeric + underscore)
+- Terms of Service checkbox
+- Newsletter subscription option
+- Dynamic submit button (enabled only when all requirements met)
+- Social registration buttons (Google, GitHub)
+- Real-time visual feedback
+
+**Includes:**
+- Registration form with custom fields
+- Live password strength checker
+- Visual requirement indicators (✓/✗)
+- Matching password validator
+- Professional styling
+- Mobile-responsive layout
+
+### 8. Skeleton (NEW in v1.8.0)
+
+Loading placeholders with smooth shimmer animation - perfect for displaying while content loads:
+
+**Features:**
+- Multiple skeleton variations (card, article, list, profile, grid)
+- Smooth shimmer animation effect
+- Fade-in animations for loaded content
+- Toggle between skeleton and actual content
+- Professional gray gradient styling
+- Responsive grid layout
+- ESC key support for controls
+
+**Includes:**
+- Card skeleton with image and content blocks
+- Article skeleton with avatar and text
+- List skeleton with multiple items
+- Profile skeleton with cover and info sections
+- Grid skeleton for gallery-like layouts
+- Toggle button to switch between skeleton and demo content
+- Demo content section with real images and text
+- Mobile-responsive design
+
+**Perfect For:**
+- Loading states in applications
+- API response delays
+- Perceived performance optimization
+- Professional user experience
+
 ### 6. Footer
 
 Professional footer section:
@@ -610,6 +837,18 @@ See [SECURITY.md](SECURITY.md) for more details.
 - **[Security Policy](SECURITY.md)** - Security guidelines
 - **[Component Showcase](SHOWCASE.html)** - View all components in action
 
+## 🔒 Security
+
+This project includes security features to protect your files:
+
+- **Component Whitelist** - Only validated components can be inserted
+- **Path Traversal Protection** - Prevents access to files outside the working directory
+- **Input Validation** - Hex color validation and component name validation
+- **HTML Structure Validation** - Ensures proper HTML structure before insertion
+- **Zero Dependencies for Security** - Uses only Node.js built-in modules for security checks
+
+For security concerns, see [SECURITY.md](SECURITY.md)
+
 ## 🤝 Contributing
 
 Contributions are welcome! Here's how you can help: