create-template-html-css 1.7.0 → 1.8.1

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
@@ -43,6 +43,90 @@ npm install -g create-template-html-css
 - 💾 **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.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
+# After global install
+create-template gallery
+
+# Or run directly with npx (first install package)
+npx create-template-html-css
+# Then run:
+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
@@ -321,6 +405,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:
@@ -677,6 +841,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:

package/bin/cli.js

@@ -4,7 +4,8 @@ const { program } = require("commander");
 const inquirer = require("inquirer").default || require("inquirer");
 const path = require("path");
 const fs = require("fs").promises;
-const { generateTemplate } = require("../src/generator");
+const { exec } = require("child_process");
+const { generateTemplate, COLOR_SCHEMES } = require("../src/generator");
 const { insertComponent } = require("../src/inserter");
 const chalk = require("chalk");
 
@@ -13,7 +14,7 @@ program
   .description(
     chalk.cyan("🎨 Create HTML/CSS UI component templates in seconds"),
   )
-  .version("1.7.0");
+  .version("1.8.1");
 
 // Add intro message
 program.on("--help", () => {
@@ -22,6 +23,12 @@ program.on("--help", () => {
     "  $ create-template create                    # Interactive mode",
   );
   console.log("  $ create-template create -c button -n my-btn # With flags");
+  console.log(
+    "  $ create-template create -c card --dark-mode --color-scheme vibrant # With preset colors",
+  );
+  console.log(
+    "  $ create-template create -c card --primary-color #FF5733 # With custom colors",
+  );
   console.log(
     "  $ create-template insert                     # Interactive mode",
   );
@@ -34,6 +41,14 @@ program.on("--help", () => {
   console.log(
     "  $ create-template list                       # List all templates",
   );
+  console.log(
+    "  $ create-template gallery                    # Open interactive gallery",
+  );
+  console.log("");
+  console.log(chalk.yellow("Available Color Schemes:"));
+  Object.entries(COLOR_SCHEMES).forEach(([key, scheme]) => {
+    console.log(`  ${key.padEnd(12)} - ${scheme.description}`);
+  });
   console.log("");
   console.log(chalk.yellow("Create Command Flags:"));
   console.log(
@@ -43,6 +58,15 @@ program.on("--help", () => {
   console.log(
     "  --include-js               Include JavaScript file (default: true)",
   );
+  console.log(
+    "  --dark-mode                Add dark mode support (prefers-color-scheme)",
+  );
+  console.log(
+    "  --primary-color <hex>      Primary color (e.g., #667eea)",
+  );
+  console.log(
+    "  --secondary-color <hex>    Secondary color (e.g., #764ba2)",
+  );
   console.log("  --no-include-js            Exclude JavaScript file");
   console.log("  -v, --verbose              Show detailed output");
   console.log("");
@@ -67,6 +91,10 @@ program
   .option("-n, --name <name>", "Component name/project name")
   .option("--include-js", "Include JavaScript file", true)
   .option("--no-include-js", "Exclude JavaScript file")
+  .option("--dark-mode", "Add dark mode support (prefers-color-scheme)")
+  .option("--primary-color <color>", "Primary color (hex format: #667eea)")
+  .option("--secondary-color <color>", "Secondary color (hex format: #764ba2)")
+  .option("--color-scheme <scheme>", "Use a color scheme preset (vibrant, pastel, ocean, sunset, forest, purple, minimal, coral, teal, neon)")
   .option("-v, --verbose", "Verbose output")
   .action(async (options) => {
     try {
@@ -84,6 +112,10 @@ program
           component: options.component,
           name: options.name,
           includeJs: options.includeJs,
+          darkMode: options.darkMode,
+          colorScheme: options.colorScheme,
+          primaryColor: options.primaryColor,
+          secondaryColor: options.secondaryColor,
         };
 
         await generateTemplate(createOptions);
@@ -121,6 +153,11 @@ program
             { name: "Hero Section", value: "hero" },
             { name: "Slider", value: "slider" },
             { name: "Table", value: "table" },
+            new inquirer.Separator(chalk.gray("─ Authentication Forms")),
+            { name: "Login Form", value: "login" },
+            { name: "Register Form", value: "register" },
+            new inquirer.Separator(chalk.gray("─ Loading Placeholders")),
+            { name: "Skeleton (Loading Placeholders)", value: "skeleton" },
             new inquirer.Separator(chalk.gray("─ Animation Templates")),
             { name: "Spinner (Loading Animations)", value: "spinner" },
             {
@@ -309,6 +346,68 @@ program
             return true;
           },
         },
+        {
+          type: "confirm",
+          name: "darkMode",
+          message: "Add dark mode support (prefers-color-scheme)?",
+          default: false,
+        },
+        {
+          type: "list",
+          name: "colorOption",
+          message: "How would you like to choose colors?",
+          choices: [
+            { name: "Use a preset color scheme", value: "preset" },
+            { name: "Enter custom hex colors", value: "custom" },
+            { name: "Skip color customization", value: "skip" },
+          ],
+        },
+        {
+          type: "list",
+          name: "colorScheme",
+          message: "Choose a color scheme:",
+          choices: Object.entries(COLOR_SCHEMES).map(([key, scheme]) => ({
+            name: `${scheme.name} - ${scheme.description}`,
+            value: key,
+          })),
+          when: (answers) => answers.colorOption === "preset",
+        },
+        {
+          type: "input",
+          name: "primaryColor",
+          message: "Primary color (hex format, e.g., #667eea) [skip for default]:",
+          default: "",
+          when: (answers) => answers.colorOption === "custom",
+          validate: (input) => {
+            if (!input || input.trim().length === 0) {
+              return true; // Optional field
+            }
+            // Basic hex color validation
+            const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+            if (!hexRegex.test(input.trim())) {
+              return "Please enter a valid hex color (e.g., #667eea)";
+            }
+            return true;
+          },
+        },
+        {
+          type: "input",
+          name: "secondaryColor",
+          message: "Secondary color (hex format, e.g., #764ba2) [skip for default]:",
+          default: "",
+          when: (answers) => answers.colorOption === "custom",
+          validate: (input) => {
+            if (!input || input.trim().length === 0) {
+              return true; // Optional field
+            }
+            // Basic hex color validation
+            const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+            if (!hexRegex.test(input.trim())) {
+              return "Please enter a valid hex color (e.g., #764ba2)";
+            }
+            return true;
+          },
+        },
       ]);
 
       // Always include JavaScript file
@@ -433,6 +532,11 @@ program
             { name: "Hero Section", value: "hero" },
             { name: "Slider", value: "slider" },
             { name: "Table", value: "table" },
+            new inquirer.Separator(chalk.gray("─ Authentication Forms")),
+            { name: "Login Form", value: "login" },
+            { name: "Register Form", value: "register" },
+            new inquirer.Separator(chalk.gray("─ Loading Placeholders")),
+            { name: "Skeleton (Loading Placeholders)", value: "skeleton" },
             new inquirer.Separator(chalk.gray("─ Animation Templates")),
             { name: "Spinner", value: "spinner" },
             { name: "Animated Card", value: "animated-card" },
@@ -497,7 +601,7 @@ program
   .command("list")
   .description(chalk.green("List all available templates"))
   .action(() => {
-    console.log("\n" + chalk.blue("📦 Available Components (23 total)\n"));
+    console.log("\n" + chalk.blue("📦 Available Components (26 total)\n"));
 
     console.log(chalk.yellow("━ Basic Components (9)"));
     console.log("  button          Styled button component");
@@ -510,6 +614,13 @@ program
     console.log("  slider          Image carousel with navigation");
     console.log("  table           Data table with search and filtering");
 
+    console.log("\n" + chalk.green("━ Authentication Forms (2)"));
+    console.log("  login           Login form with validation");
+    console.log("  register        Register form with password requirements");
+
+    console.log("\n" + chalk.cyan("━ Loading Placeholders (1)"));
+    console.log("  skeleton        Skeleton loading placeholder with shimmer animation");
+
     console.log("\n" + chalk.magenta("━ Animation Templates (4)"));
     console.log("  spinner         5 loading spinner variations");
     console.log("  animated-card   6 interactive card animations");
@@ -521,7 +632,7 @@ program
     console.log("  masonry-grid    Pinterest-style masonry layout");
     console.log("  dashboard-grid  Complete admin dashboard (Grid)");
 
-    console.log("\n" + chalk.green("━ Flexbox Layouts (3)"));
+    console.log("\n" + chalk.blue("━ Flexbox Layouts (3)"));
     console.log("  flex-layout     Flexbox patterns and examples");
     console.log("  flex-cards      Equal-height card layouts");
     console.log("  flex-dashboard  Complete admin dashboard (Flexbox)");
@@ -538,6 +649,41 @@ program
     console.log("");
   });
 
+program
+  .command("gallery")
+  .description(chalk.magenta("🎨 Open interactive component gallery in browser"))
+  .action(async () => {
+    try {
+      const galleryPath = path.join(__dirname, "..", "COMPONENTS-GALLERY.html");
+      const fileUrl = `file:///${galleryPath.replace(/\\/g, "/")}`;
+      
+      console.log(chalk.cyan("\n🎨 Opening Component Gallery...\n"));
+      
+      // Cross-platform: open file in default browser
+      let command;
+      if (process.platform === "win32") {
+        command = `start "" "${galleryPath}"`;
+      } else if (process.platform === "darwin") {
+        command = `open "${galleryPath}"`;
+      } else {
+        // Linux and others
+        command = `xdg-open "${galleryPath}"`;
+      }
+      
+      exec(command, (error) => {
+        if (error) {
+          console.error(chalk.red("✗ Could not open gallery:"), error.message);
+          console.log(chalk.gray(`Try opening manually: ${galleryPath}`));
+        } else {
+          console.log(chalk.green("✓ Gallery opened in your browser!"));
+          console.log(chalk.gray(`Location: ${galleryPath}\n`));
+        }
+      });
+    } catch (error) {
+      console.error(chalk.red("✗ Error:"), error.message);
+    }
+  });
+
 program.parse(process.argv);
 
 if (!process.argv.slice(2).length) {
@@ -547,11 +693,13 @@ if (!process.argv.slice(2).length) {
   console.log("  create    Create a new template component");
   console.log("  insert    Insert component into existing HTML file");
   console.log("  list      Show all available templates");
+  console.log("  gallery   Open interactive component gallery");
   console.log("  help      Display help information\n");
   console.log(chalk.gray("Interactive Examples:"));
   console.log("  $ create-template create        # Create with prompts");
   console.log("  $ create-template insert        # Insert with prompts");
-  console.log("  $ create-template list          # View all 23 templates\n");
+  console.log("  $ create-template gallery       # View all components in gallery");
+  console.log("  $ create-template list          # View all 26 templates\n");
   console.log(chalk.gray("Flag Examples (Non-interactive):"));
   console.log("  $ create-template create -c button -n my-btn");
   console.log("  $ create-template insert -f index.html -c card -s separate");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-template-html-css",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {
@@ -53,7 +53,8 @@
   "dependencies": {
     "chalk": "^4.1.2",
     "commander": "^11.1.0",
-    "inquirer": "^9.2.12"
+    "inquirer": "^9.2.12",
+    "open": "^11.0.0"
   },
   "devDependencies": {
     "prettier": "^3.8.1"