create-template-html-css 1.6.4 → 1.7.0

package/CHANGELOG.md

@@ -5,6 +5,56 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.7.0] - 2026-02-01
+
+### Added
+- **Customizable Navigation Items**: Choose exactly which menu items to include when creating navigation components
+  - Interactive prompt: "Enter navigation items (comma-separated)"
+  - Default: "Home, About, Services, Portfolio, Contact"
+  - Automatically generates navigation links and matching page sections
+  - Example: "Home, Blog, Shop, About Us, Contact" creates 5 custom navigation items
+
+- **Customizable Form Fields**: Select and customize form fields during creation
+  - **Standard Fields**: Choose from 6 predefined fields (Name, Email, Phone, Subject, Message, Terms)
+  - **Custom Fields**: Add unlimited custom fields with format `type:label`
+  - Supports all HTML5 input types: text, email, url, date, number, tel, password, color, etc.
+  - Special field types: textarea, checkbox, select
+  - Examples:
+    - `text:Age` → text input for age
+    - `url:Website` → URL input
+    - `date:Birth Date` → date picker
+    - `number:Quantity` → number input
+    - `textarea:Comments` → text area
+    - `checkbox:Subscribe` → checkbox field
+    - `select:Country` → dropdown menu
+
+- **Component Variation Selection**: Choose specific variations for components with multiple styles
+  - **Button Component**: Select from 6 button types or choose specific ones
+    - Primary, Secondary, Success, Danger, Outlined, Disabled
+    - Option: "All Buttons (6 variations)" or "Select Specific Buttons"
+  - **Card Component**: Select from 6 card variations or choose specific ones
+    - Modern Card (Featured), Premium Card (Price), Blog Card (Tags)
+    - Minimal Card, User Profile Card, Interactive Card
+    - Option: "All Cards (6 variations)" or "Select Specific Cards"
+  - **Spinner Component**: Select from 5 spinner types or choose specific ones
+    - Circle Spinner, Bouncing Dots, Pulse Loader, Bar Loader, Gradient Ring
+    - Option: "All Spinners (5 types)" or "Select Specific Spinners"
+
+### Improved
+- Enhanced CLI prompts with better validation and user guidance
+- More interactive component creation experience
+- Clear format instructions for custom fields
+- Cleaner generated HTML when selecting specific variations
+
+### Developer Notes
+- Added `generateNavigationItems()` function to dynamically create nav menus
+- Added `generateFormFields()` function to handle both standard and custom form fields
+- Added `filterButtonVariations()` function to filter button HTML
+- Added `filterCardVariations()` function to filter card HTML
+- Added `filterSpinnerVariations()` function to filter spinner HTML
+- Updated CLI to include conditional prompts based on component type
+- Generator now accepts `navItems`, `formFields`, `customFormFields`, and variation parameters
+
 ## [1.6.2] - 2026-02-01
 
 ### Added

package/README.md

@@ -41,8 +41,35 @@ 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.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 +123,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 +139,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 +260,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

package/bin/cli.js

@@ -13,7 +13,7 @@ program
   .description(
     chalk.cyan("🎨 Create HTML/CSS UI component templates in seconds"),
   )
-  .version("1.6.4");
+  .version("1.7.0");
 
 // Add intro message
 program.on("--help", () => {
@@ -166,6 +166,149 @@ program
             return true;
           },
         },
+        {
+          type: "input",
+          name: "navItems",
+          message: "Enter navigation items (comma-separated):",
+          default: "Home, About, Services, Portfolio, Contact",
+          when: (answers) => answers.component === "navigation",
+          validate: (input) => {
+            if (!input || input.trim().length === 0) {
+              return "Please enter at least one navigation item";
+            }
+            return true;
+          },
+        },
+        {
+          type: "checkbox",
+          name: "formFields",
+          message: "Select form fields to include:",
+          choices: [
+            { name: "Name", value: "name", checked: true },
+            { name: "Email", value: "email", checked: true },
+            { name: "Phone", value: "phone", checked: false },
+            { name: "Subject", value: "subject", checked: false },
+            { name: "Message", value: "message", checked: true },
+            { name: "Terms Checkbox", value: "terms", checked: false },
+          ],
+          when: (answers) => answers.component === "form",
+          validate: (input) => {
+            if (input.length === 0) {
+              return "Please select at least one form field";
+            }
+            return true;
+          },
+        },
+        {
+          type: "list",
+          name: "buttonVariations",
+          message: "Which button variations do you want?",
+          choices: [
+            { name: "All Buttons (6 variations)", value: "all" },
+            { name: "Select Specific Buttons", value: "select" },
+          ],
+          when: (answers) => answers.component === "button",
+        },
+        {
+          type: "checkbox",
+          name: "selectedButtons",
+          message: "Select button variations:",
+          choices: [
+            { name: "Primary Button", value: "primary", checked: true },
+            { name: "Secondary Button", value: "secondary", checked: true },
+            { name: "Success Button", value: "success", checked: true },
+            { name: "Danger Button", value: "danger", checked: true },
+            { name: "Outlined Button", value: "outlined", checked: true },
+            { name: "Disabled Button", value: "disabled", checked: true },
+          ],
+          when: (answers) => answers.component === "button" && answers.buttonVariations === "select",
+          validate: (input) => {
+            if (input.length === 0) {
+              return "Please select at least one button variation";
+            }
+            return true;
+          },
+        },
+        {
+          type: "list",
+          name: "cardVariations",
+          message: "Which card variations do you want?",
+          choices: [
+            { name: "All Cards (6 variations)", value: "all" },
+            { name: "Select Specific Cards", value: "select" },
+          ],
+          when: (answers) => answers.component === "card",
+        },
+        {
+          type: "checkbox",
+          name: "selectedCards",
+          message: "Select card variations:",
+          choices: [
+            { name: "Modern Card (Featured)", value: "modern", checked: true },
+            { name: "Premium Card (Price)", value: "premium", checked: true },
+            { name: "Blog Card (Tags)", value: "blog", checked: true },
+            { name: "Minimal Card", value: "minimal", checked: true },
+            { name: "User Profile Card", value: "user", checked: true },
+            { name: "Interactive Card", value: "interactive", checked: true },
+          ],
+          when: (answers) => answers.component === "card" && answers.cardVariations === "select",
+          validate: (input) => {
+            if (input.length === 0) {
+              return "Please select at least one card variation";
+            }
+            return true;
+          },
+        },
+        {
+          type: "list",
+          name: "spinnerVariations",
+          message: "Which spinner variations do you want?",
+          choices: [
+            { name: "All Spinners (5 types)", value: "all" },
+            { name: "Select Specific Spinners", value: "select" },
+          ],
+          when: (answers) => answers.component === "spinner",
+        },
+        {
+          type: "checkbox",
+          name: "selectedSpinners",
+          message: "Select spinner types:",
+          choices: [
+            { name: "Circle Spinner", value: "circle", checked: true },
+            { name: "Bouncing Dots", value: "dots", checked: true },
+            { name: "Pulse Loader", value: "pulse", checked: true },
+            { name: "Bar Loader", value: "bars", checked: true },
+            { name: "Gradient Ring", value: "gradient", checked: true },
+          ],
+          when: (answers) => answers.component === "spinner" && answers.spinnerVariations === "select",
+          validate: (input) => {
+            if (input.length === 0) {
+              return "Please select at least one spinner type";
+            }
+            return true;
+          },
+        },
+        {
+          type: "input",
+          name: "customFormFields",
+          message: "Add custom fields (format: type:label, e.g., 'text:Age, url:Website'):",
+          when: (answers) => answers.component === "form",
+          default: "",
+          validate: (input) => {
+            if (!input || input.trim().length === 0) {
+              return true; // Optional field
+            }
+            // Basic validation for format
+            const fields = input.split(',');
+            for (const field of fields) {
+              const trimmed = field.trim();
+              if (trimmed && !trimmed.includes(':')) {
+                return "Invalid format. Use 'type:label' (e.g., 'text:Age, url:Website')";
+              }
+            }
+            return true;
+          },
+        },
       ]);
 
       // Always include JavaScript file

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-template-html-css",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "description": "CLI tool to generate HTML and CSS templates for common UI elements",
   "main": "src/index.js",
   "bin": {

package/src/generator.js

@@ -81,8 +81,291 @@ function sanitizeFilename(filename) {
   return sanitized.replace(/[<>:"|?*]/g, "").trim();
 }
 
+/**
+ * Filter button variations based on user selection
+ */
+function filterButtonVariations(htmlContent, buttonVariations, selectedButtons) {
+  if (buttonVariations === "all" || !selectedButtons || selectedButtons.length === 0) {
+    return htmlContent; // Return all buttons
+  }
+
+  // Map selection to button classes
+  const buttonMap = {
+    primary: "btn-primary",
+    secondary: "btn-secondary",
+    success: "btn-success",
+    danger: "btn-danger",
+    outlined: "btn-outlined",
+    disabled: "disabled"
+  };
+
+  let filteredHtml = htmlContent;
+  
+  // Remove buttons that weren't selected
+  for (const [key, className] of Object.entries(buttonMap)) {
+    if (!selectedButtons.includes(key)) {
+      // Remove button and its comment
+      const patterns = [
+        new RegExp(`\\s*<!-- ${key.charAt(0).toUpperCase() + key.slice(1)} Button -->\\s*\\n\\s*<button[^>]*${className}[^>]*>.*?<\\/button>\\s*\\n`, 'gis'),
+        new RegExp(`\\s*<button[^>]*${className}[^>]*>.*?<\\/button>\\s*\\n`, 'gis')
+      ];
+      
+      patterns.forEach(pattern => {
+        filteredHtml = filteredHtml.replace(pattern, '\n        ');
+      });
+    }
+  }
+  
+  return filteredHtml;
+}
+
+/**
+ * Filter card variations based on user selection
+ */
+function filterCardVariations(htmlContent, cardVariations, selectedCards) {
+  if (cardVariations === "all" || !selectedCards || selectedCards.length === 0) {
+    return htmlContent; // Return all cards
+  }
+
+  const cardComments = {
+    modern: "Card 1 - Basic",
+    premium: "Card 2 - With Price",
+    blog: "Card 3 - With Tags",
+    minimal: "Card 4 - Minimal",
+    user: "Card 5 - With Avatar",
+    interactive: "Card 6 - Interactive"
+  };
+
+  let filteredHtml = htmlContent;
+
+  // Remove cards that weren't selected
+  for (const [key, comment] of Object.entries(cardComments)) {
+    if (!selectedCards.includes(key)) {
+      // Remove entire card div including comment
+      const pattern = new RegExp(`\\s*<!-- ${comment.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')} -->\\s*\\n\\s*<div class="card[^>]*>.*?<\\/div>\\s*\\n\\s*<\\/div>\\s*\\n`, 'gis');
+      filteredHtml = filteredHtml.replace(pattern, '\n            ');
+    }
+  }
+
+  return filteredHtml;
+}
+
+/**
+ * Filter spinner variations based on user selection
+ */
+function filterSpinnerVariations(htmlContent, spinnerVariations, selectedSpinners) {
+  if (spinnerVariations === "all" || !selectedSpinners || selectedSpinners.length === 0) {
+    return htmlContent; // Return all spinners
+  }
+
+  const spinnerTypes = {
+    circle: "Circle Spinner",
+    dots: "Bouncing Dots",
+    pulse: "Pulse Loader",
+    bars: "Bar Loader",
+    gradient: "Gradient Ring"
+  };
+
+  let filteredHtml = htmlContent;
+
+  // Remove spinners that weren't selected
+  for (const [key, title] of Object.entries(spinnerTypes)) {
+    if (!selectedSpinners.includes(key)) {
+      // Remove entire spinner-group div
+      const pattern = new RegExp(`\\s*<!-- ${title} Spinner -->\\s*\\n\\s*<div class="spinner-group">.*?<\\/div>\\s*\\n\\s*<\\/div>\\s*\\n`, 'gis');
+      filteredHtml = filteredHtml.replace(pattern, '\n        ');
+    }
+  }
+
+  return filteredHtml;
+}
+
+/**
+ * Generate custom navigation items based on user input
+ */
+function generateNavigationItems(htmlContent, navItems) {
+  // Parse the comma-separated navigation items
+  const items = navItems.split(',').map(item => item.trim()).filter(item => item.length > 0);
+  
+  // Generate navigation HTML
+  let navHtml = '';
+  items.forEach((item, index) => {
+    const itemId = item.toLowerCase().replace(/\s+/g, '-');
+    const activeClass = index === 0 ? ' active' : '';
+    navHtml += `                <li class="nav-item">
+                    <a href="#${itemId}" class="nav-link${activeClass}">${item}</a>
+                </li>\n`;
+  });
+  
+  // Replace the navigation items in the HTML
+  const navMenuRegex = /<ul class="nav-menu"[^>]*>[\s\S]*?<\/ul>/;
+  const replacement = `<ul class="nav-menu" id="navMenu">
+${navHtml}            </ul>`;
+  
+  htmlContent = htmlContent.replace(navMenuRegex, replacement);
+  
+  // Generate sections for each navigation item
+  let sectionsHtml = '';
+  items.forEach(item => {
+    const itemId = item.toLowerCase().replace(/\s+/g, '-');
+    sectionsHtml += `        <section id="${itemId}" class="section">
+            <h1>${item}</h1>
+            <p>Content for ${item} section</p>
+        </section>
+        
+`;
+  });
+  
+  // Replace the sections in the HTML
+  const mainContentRegex = /<main class="main-content">[\s\S]*?<\/main>/;
+  const sectionsReplacement = `<main class="main-content">
+${sectionsHtml}    </main>`;
+  
+  htmlContent = htmlContent.replace(mainContentRegex, sectionsReplacement);
+  
+  return htmlContent;
+}
+
+/**
+ * Generate custom form fields based on user selection
+ */
+function generateFormFields(htmlContent, formFields, customFormFields) {
+  let fieldsHtml = '';
+  
+  // Add standard fields
+  formFields.forEach(field => {
+    switch(field) {
+      case 'name':
+        fieldsHtml += `            <div class="form-group">
+                <label for="name">Full Name</label>
+                <input type="text" id="name" name="name" required>
+            </div>
+            
+`;
+        break;
+      case 'email':
+        fieldsHtml += `            <div class="form-group">
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            
+`;
+        break;
+      case 'phone':
+        fieldsHtml += `            <div class="form-group">
+                <label for="phone">Phone</label>
+                <input type="tel" id="phone" name="phone">
+            </div>
+            
+`;
+        break;
+      case 'subject':
+        fieldsHtml += `            <div class="form-group">
+                <label for="subject">Subject</label>
+                <select id="subject" name="subject" required>
+                    <option value="">Select a subject</option>
+                    <option value="support">Technical Support</option>
+                    <option value="sales">Sales</option>
+                    <option value="general">General</option>
+                </select>
+            </div>
+            
+`;
+        break;
+      case 'message':
+        fieldsHtml += `            <div class="form-group">
+                <label for="message">Message</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+            </div>
+            
+`;
+        break;
+      case 'terms':
+        fieldsHtml += `            <div class="form-group checkbox-group">
+                <input type="checkbox" id="terms" name="terms" required>
+                <label for="terms">I agree to the terms of service</label>
+            </div>
+            
+`;
+        break;
+    }
+  });
+  
+  // Add custom fields if provided
+  if (customFormFields && customFormFields.trim().length > 0) {
+    const customFields = customFormFields.split(',').map(f => f.trim()).filter(f => f.length > 0);
+    
+    customFields.forEach(field => {
+      const [type, label] = field.split(':').map(s => s.trim());
+      if (type && label) {
+        const fieldId = label.toLowerCase().replace(/\s+/g, '-');
+        
+        if (type === 'textarea') {
+          fieldsHtml += `            <div class="form-group">
+                <label for="${fieldId}">${label}</label>
+                <textarea id="${fieldId}" name="${fieldId}" rows="5"></textarea>
+            </div>
+            
+`;
+        } else if (type === 'checkbox') {
+          fieldsHtml += `            <div class="form-group checkbox-group">
+                <input type="checkbox" id="${fieldId}" name="${fieldId}">
+                <label for="${fieldId}">${label}</label>
+            </div>
+            
+`;
+        } else if (type === 'select') {
+          fieldsHtml += `            <div class="form-group">
+                <label for="${fieldId}">${label}</label>
+                <select id="${fieldId}" name="${fieldId}">
+                    <option value="">Select an option</option>
+                    <option value="option1">Option 1</option>
+                    <option value="option2">Option 2</option>
+                </select>
+            </div>
+            
+`;
+        } else {
+          // Default to input with specified type
+          fieldsHtml += `            <div class="form-group">
+                <label for="${fieldId}">${label}</label>
+                <input type="${type}" id="${fieldId}" name="${fieldId}">
+            </div>
+            
+`;
+        }
+      }
+    });
+  }
+  
+  // Replace the form fields in the HTML
+  const formRegex = /<form class="form"[^>]*>[\s\S]*?<button type="submit"/;
+  const replacement = `<form class="form" id="contactForm">
+            <h1 class="form-title">Contact Us</h1>
+            <p class="form-subtitle">Fill in the details and we'll get back to you soon</p>
+            
+${fieldsHtml}            <button type="submit"`;
+  
+  htmlContent = htmlContent.replace(formRegex, replacement);
+  
+  return htmlContent;
+}
+
 async function generateTemplate(options) {
-  const { component, name, includeJs } = options;
+  const { 
+    component, 
+    name, 
+    includeJs, 
+    navItems, 
+    formFields, 
+    customFormFields,
+    buttonVariations,
+    selectedButtons,
+    cardVariations,
+    selectedCards,
+    spinnerVariations,
+    selectedSpinners
+  } = options;
 
   // Security: Validate component name
   if (!VALID_COMPONENTS.includes(component)) {
@@ -117,6 +400,31 @@ async function generateTemplate(options) {
 
   // Replace placeholder name
   htmlContent = htmlContent.replace(/{{name}}/g, safeName);
+  
+  // Filter button variations
+  if (component === "button") {
+    htmlContent = filterButtonVariations(htmlContent, buttonVariations, selectedButtons);
+  }
+  
+  // Filter card variations
+  if (component === "card") {
+    htmlContent = filterCardVariations(htmlContent, cardVariations, selectedCards);
+  }
+  
+  // Filter spinner variations
+  if (component === "spinner") {
+    htmlContent = filterSpinnerVariations(htmlContent, spinnerVariations, selectedSpinners);
+  }
+  
+  // Custom navigation items
+  if (component === "navigation" && navItems) {
+    htmlContent = generateNavigationItems(htmlContent, navItems);
+  }
+  
+  // Custom form fields
+  if (component === "form" && formFields) {
+    htmlContent = generateFormFields(htmlContent, formFields, customFormFields);
+  }
 
   // Add script tag if JavaScript is included (pointing to js/ folder)
   if (includeJs) {