create-template-html-css 2.0.3 → 2.1.0

package/src/generators/color-schemes.js

@@ -0,0 +1,78 @@
+/**
+ * Color scheme presets for templates
+ */
+
+export const COLOR_SCHEMES = {
+  vibrant: {
+    name: "Vibrant",
+    primary: "#FF6B6B",
+    secondary: "#4ECDC4",
+    description: "Bold reds and teals - energetic and modern",
+  },
+  pastel: {
+    name: "Pastel",
+    primary: "#FFB3BA",
+    secondary: "#FFDFBA",
+    description: "Soft pinks and peaches - calm and friendly",
+  },
+  ocean: {
+    name: "Ocean",
+    primary: "#0066CC",
+    secondary: "#00CCFF",
+    description: "Deep blues and cyans - professional and cool",
+  },
+  sunset: {
+    name: "Sunset",
+    primary: "#FF6B35",
+    secondary: "#FFA500",
+    description: "Warm oranges and reds - energetic glow",
+  },
+  forest: {
+    name: "Forest",
+    primary: "#2D6A4F",
+    secondary: "#40916C",
+    description: "Green tones - natural and organic",
+  },
+  purple: {
+    name: "Purple",
+    primary: "#7209B7",
+    secondary: "#B5179E",
+    description: "Deep purples - elegant and premium",
+  },
+  minimal: {
+    name: "Minimal",
+    primary: "#1A1A1A",
+    secondary: "#666666",
+    description: "Grays and blacks - clean and simple",
+  },
+  coral: {
+    name: "Coral",
+    primary: "#FF6B9D",
+    secondary: "#FFA07A",
+    description: "Coral pinks and salmon - warm and playful",
+  },
+  teal: {
+    name: "Teal",
+    primary: "#008B8B",
+    secondary: "#20B2AA",
+    description: "Teal hues - balanced and professional",
+  },
+  neon: {
+    name: "Neon",
+    primary: "#FF006E",
+    secondary: "#00D9FF",
+    description: "Bright neon colors - bold and futuristic",
+  },
+};
+
+/**
+ * Get color scheme by preset name
+ * @param {string} schemeName - Name of the color scheme
+ * @returns {Object|null} Color scheme object or null if not found
+ */
+export function getColorScheme(schemeName) {
+  if (COLOR_SCHEMES[schemeName]) {
+    return COLOR_SCHEMES[schemeName];
+  }
+  return null;
+}

package/src/generators/color-utils.js

@@ -0,0 +1,108 @@
+/**
+ * Color utility functions for CSS styling
+ */
+
+/**
+ * Convert hex color to RGB values
+ * @param {string} hex - Hex color code (e.g., "#FF6B6B")
+ * @returns {string} RGB values as string (e.g., "255, 107, 107")
+ */
+export function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    const r = parseInt(result[1], 16);
+    const g = parseInt(result[2], 16);
+    const b = parseInt(result[3], 16);
+    return `${r}, ${g}, ${b}`;
+  }
+  return "102, 126, 234"; // fallback to default primary
+}
+
+/**
+ * Apply custom colors to CSS content using CSS variables
+ * @param {string} cssContent - Original CSS content
+ * @param {string} primaryColor - Primary color hex code
+ * @param {string} secondaryColor - Secondary color hex code
+ * @returns {string} Modified CSS with custom colors
+ */
+export function applyCustomColors(cssContent, primaryColor, secondaryColor) {
+  if (!primaryColor && !secondaryColor) {
+    return cssContent;
+  }
+
+  // Create CSS variable overrides
+  let colorVariables = ":root {\n";
+
+  if (primaryColor) {
+    colorVariables += `  --primary-color: ${primaryColor};\n`;
+    // Also add as root variable that can override gradients
+    colorVariables += `  --primary-rgb: ${hexToRgb(primaryColor)};\n`;
+  }
+
+  if (secondaryColor) {
+    colorVariables += `  --secondary-color: ${secondaryColor};\n`;
+    colorVariables += `  --secondary-rgb: ${hexToRgb(secondaryColor)};\n`;
+  }
+
+  colorVariables += "}\n\n";
+
+  // If CSS doesn't have :root, add it
+  if (!cssContent.includes(":root")) {
+    return colorVariables + cssContent;
+  }
+
+  // Replace existing :root with extended one
+  return cssContent.replace(/:root\s*{/, colorVariables.trim() + "\n\n:root {");
+}
+
+/**
+ * Add dark mode styles to CSS
+ * @param {string} cssContent - Original CSS content
+ * @returns {string} CSS with dark mode media query added
+ */
+export function addDarkModeStyles(cssContent) {
+  if (cssContent.includes("prefers-color-scheme")) {
+    return cssContent; // Already has dark mode
+  }
+
+  // Create dark mode media query
+  const darkModeStyles = `
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2d2d2d;
+    --text-primary: #ffffff;
+    --text-secondary: #b0b0b0;
+    --border-color: #404040;
+  }
+
+  body {
+    background-color: var(--bg-primary, #1a1a1a);
+    color: var(--text-primary, #ffffff);
+  }
+
+  .container,
+  .card,
+  .modal-content,
+  .form-container {
+    background-color: var(--bg-secondary, #2d2d2d);
+    color: var(--text-primary, #ffffff);
+    border-color: var(--border-color, #404040);
+  }
+
+  input,
+  textarea,
+  select {
+    background-color: var(--bg-primary, #1a1a1a);
+    color: var(--text-primary, #ffffff);
+    border-color: var(--border-color, #404040);
+  }
+
+  input::placeholder {
+    color: var(--text-secondary, #b0b0b0);
+  }
+}`;
+
+  return cssContent + darkModeStyles;
+}

package/src/generators/component-filters.js

@@ -0,0 +1,151 @@
+/**
+ * Component filtering utilities
+ * Filters variations for buttons, cards, and spinners
+ */
+
+/**
+ * Filter button variations based on user selection
+ * @param {string} htmlContent - Original HTML content
+ * @param {string} buttonVariations - "all" or "select"
+ * @param {Array<string>} selectedButtons - Array of selected button types
+ * @returns {string} Filtered HTML content
+ */
+export 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
+ * @param {string} htmlContent - Original HTML content
+ * @param {string} cardVariations - "all" or "select"
+ * @param {Array<string>} selectedCards - Array of selected card types
+ * @returns {string} Filtered HTML content
+ */
+export 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
+ * @param {string} htmlContent - Original HTML content
+ * @param {string} spinnerVariations - "all" or "select"
+ * @param {Array<string>} selectedSpinners - Array of selected spinner types
+ * @returns {string} Filtered HTML content
+ */
+export 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;
+}

package/src/generators/html-generators.js

@@ -0,0 +1,180 @@
+/**
+ * HTML content generators for navigation and forms
+ */
+
+import { textToId, parseCommaSeparated, parseKeyValuePairs } from "../utils/string-utils.js";
+
+/**
+ * Generate custom navigation items based on user input
+ * @param {string} htmlContent - Original HTML content
+ * @param {string} navItems - Comma-separated list of navigation items
+ * @returns {string} HTML with custom navigation
+ */
+export function generateNavigationItems(htmlContent, navItems) {
+  // Parse the comma-separated navigation items
+  const items = parseCommaSeparated(navItems);
+
+  // Generate navigation HTML
+  let navHtml = "";
+  items.forEach((item, index) => {
+    const itemId = textToId(item);
+    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 = textToId(item);
+    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
+ * @param {string} htmlContent - Original HTML content
+ * @param {Array<string>} formFields - Array of standard field types
+ * @param {string} customFormFields - Custom fields in format "type:label"
+ * @returns {string} HTML with custom form fields
+ */
+export 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 = parseKeyValuePairs(customFormFields);
+
+    customFields.forEach(({ key: type, value: label }) => {
+      const fieldId = textToId(label);
+
+      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;
+}

package/src/generators/validation.js

@@ -0,0 +1,43 @@
+/**
+ * Component validation and security utilities
+ */
+
+import { VALID_COMPONENTS } from "../components-registry.js";
+import { sanitizeForFilename } from "../utils/string-utils.js";
+
+export { VALID_COMPONENTS };
+
+/**
+ * Sanitize filename to prevent path traversal
+ * @param {string} filename - The filename to sanitize
+ * @returns {string|null} Sanitized filename or null if invalid
+ */
+export function sanitizeFilename(filename) {
+  // Check for path traversal attempts
+  if (
+    filename.includes("/") ||
+    filename.includes("\\") ||
+    filename === ".." ||
+    filename.startsWith("../") ||
+    filename.startsWith("..\\") ||
+    filename.includes("/../") ||
+    filename.includes("\\..\\")
+  ) {
+    return null;
+  }
+
+  // Additional validation: ensure name contains at least one alphanumeric character
+  if (!filename || !/[a-zA-Z0-9]/.test(filename)) {
+    return null;
+  }
+
+  // Remove any remaining dangerous characters
+  const sanitized = filename.replace(/[<>:"|?*]/g, "").trim();
+
+  // Final check: ensure not empty after sanitization
+  if (!sanitized || sanitized.length === 0) {
+    return null;
+  }
+
+  return sanitized;
+}

package/src/index.js

@@ -1 +1,2 @@
-module.exports = { generateTemplate } = require("./generator");
+export { generateTemplate } from "./generator.js";
+export { generateReactTemplate } from "./react-generator.js";