create-template-html-css 2.0.3 → 2.1.0

package/bin/commands/create.js

@@ -0,0 +1,272 @@
+/**
+ * Create command implementation
+ */
+import inquirer from "inquirer";
+import chalk from "chalk";
+import { generateTemplate, COLOR_SCHEMES } from "../../src/generator.js";
+import { generateReactTemplate, addReactComponentOnly } from "../../src/react-generator.js";
+import { COMPONENT_CHOICES } from "../../src/component-choices.js";
+import { REACT_COMPONENT_CHOICES } from "../../src/react-component-choices.js";
+
+async function createCommand(options) {
+  try {
+    if (options.verbose) {
+      console.log(chalk.gray("[DEBUG] Options:"), options);
+    }
+
+    // Determine if React mode is requested
+    const isReactMode = options.react || false;
+
+    // If flags are provided, use them directly
+    // For component-only mode, name is not required
+    if (options.component && (options.name || options.componentOnly)) {
+      if (options.verbose) {
+        console.log(chalk.gray("[INFO] Using provided options..."));
+      }
+
+      // Validate name for security (skip for component-only mode)
+      if (!options.componentOnly) {
+        if (
+          options.name.includes("/") ||
+          options.name.includes("\\") ||
+          options.name === ".." ||
+          options.name.startsWith("../") ||
+          options.name.startsWith("..\\") ||
+          options.name.includes("/../") ||
+          options.name.includes("\\..\\")
+        ) {
+          console.error(
+            chalk.red("✗ Error:"),
+            "Name cannot contain path separators or parent directory references"
+          );
+          process.exit(1);
+        }
+
+        if (options.name.length > 100) {
+          console.error(chalk.red("✗ Error:"), "Name is too long (max 100 characters)");
+          process.exit(1);
+        }
+      }
+
+      const createOptions = {
+        component: options.component,
+        name: options.name,
+        includeJs: options.includeJs,
+        darkMode: options.darkMode,
+        colorScheme: options.colorScheme,
+        primaryColor: options.primaryColor,
+        secondaryColor: options.secondaryColor,
+      };
+
+      if (isReactMode) {
+        // Check if component-only mode is enabled (React only)
+        if (options.componentOnly) {
+          await addReactComponentOnly({
+            component: options.component,
+            outputDir: process.cwd(),
+            colorScheme: options.colorScheme,
+            primaryColor: options.primaryColor,
+            secondaryColor: options.secondaryColor,
+          });
+          console.log("\n" + chalk.green("✓ React component added successfully!"));
+        } else {
+          await generateReactTemplate(createOptions);
+          console.log("\n" + chalk.green("✓ React component created successfully!"));
+          console.log(chalk.gray(`  Location: ./${options.name}/`));
+        }
+      } else {
+        if (options.componentOnly) {
+          console.error(
+            chalk.red("✗ Error:"),
+            "--component-only flag is only supported for React components (use --react)"
+          );
+          process.exit(1);
+        }
+        await generateTemplate(createOptions);
+        console.log("\n" + chalk.green("✓ Template created successfully!"));
+        console.log(chalk.gray(`  Location: ./${options.name}/`));
+      }
+
+      console.log(chalk.gray(`  Component: ${chalk.bold(options.component)}`));
+      return;
+    }
+
+    // Interactive mode
+    console.log(chalk.cyan("\n✨ Creating a new template component...\n"));
+
+    const answers = await inquirer.prompt([
+      {
+        type: "list",
+        name: "framework",
+        message: "What framework would you like to use?",
+        choices: [
+          { name: "HTML + CSS + JavaScript (Vanilla)", value: "html" },
+          { name: "React (JSX + CSS)", value: "react" },
+        ],
+        default: "html",
+      },
+      {
+        type: "list",
+        name: "projectType",
+        message: "What would you like to create?",
+        choices: [
+          { name: "Full React project (with Vite, package.json, etc.)", value: "full" },
+          { name: "Component only (just JSX + CSS files)", value: "component-only" },
+        ],
+        default: "full",
+        when: (answers) => answers.framework === "react",
+      },
+      {
+        type: "list",
+        name: "component",
+        message: "What component would you like to create?",
+        choices: (answers) => 
+          answers.framework === "react" ? REACT_COMPONENT_CHOICES : COMPONENT_CHOICES,
+      },
+      {
+        type: "input",
+        name: "name",
+        message: (answers) => 
+          answers.projectType === "component-only" 
+            ? "This will create a component folder in the current directory. Continue?"
+            : "Enter a name for your component:",
+        default: (answers) => 
+          answers.projectType === "component-only" ? "yes" : answers.component,
+        validate: (input, answers) => {
+          if (answers.projectType === "component-only") {
+            return true; // Skip validation for component-only
+          }
+          if (!input || input.trim().length === 0) {
+            return "Please enter a valid name";
+          }
+          if (
+            input.includes("/") ||
+            input.includes("\\") ||
+            input === ".." ||
+            input.startsWith("../") ||
+            input.startsWith("..\\") ||
+            input.includes("/../") ||
+            input.includes("\\..\\")
+          ) {
+            return "Name cannot contain path separators or parent directory references";
+          }
+          if (input.length > 100) {
+            return "Name is too long (max 100 characters)";
+          }
+          return true;
+        },
+        when: (answers) => answers.projectType !== "component-only",
+      },
+      {
+        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) return true;
+          if (!/^#[0-9A-Fa-f]{6}$/.test(input)) {
+            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) return true;
+          if (!/^#[0-9A-Fa-f]{6}$/.test(input)) {
+            return "Please enter a valid hex color (e.g., #764ba2)";
+          }
+          return true;
+        },
+      },
+    ]);
+
+    answers.includeJs = true;
+
+    // Generate template based on framework choice
+    if (answers.framework === "react") {
+      if (answers.projectType === "component-only") {
+        // Add component only (no full project)
+        await addReactComponentOnly({
+          component: answers.component,
+          outputDir: process.cwd(),
+          colorScheme: answers.colorScheme,
+          primaryColor: answers.primaryColor || undefined,
+          secondaryColor: answers.secondaryColor || undefined,
+        });
+
+        console.log("\n" + chalk.green("✓ React component added successfully!"));
+        console.log(chalk.gray(`  Component created in current directory`));
+      } else {
+        // Create full React project
+        await generateReactTemplate(answers);
+
+        console.log("\n" + chalk.green("✓ React component created successfully!"));
+        console.log(chalk.gray(`  Location: ./${answers.name}/`));
+        console.log(chalk.gray(`  Structure:`));
+        console.log(chalk.gray(`    src/`));
+        console.log(chalk.gray(`      ├── components/`));
+        console.log(chalk.gray(`      ├── App.jsx`));
+        console.log(chalk.gray(`      └── index.jsx`));
+        console.log(chalk.gray(`    index.html`));
+        console.log(chalk.gray(`    package.json`));
+        console.log("");
+        console.log(chalk.cyan("📦 Next steps:"));
+        console.log(chalk.gray(`  cd ${answers.name}`));
+        console.log(chalk.gray(`  npm install`));
+        console.log(chalk.gray(`  npm run dev`));
+      }
+    } else {
+      await generateTemplate(answers);
+
+      console.log("\n" + chalk.green("✓ Template created successfully!"));
+      console.log(chalk.gray(`  Location: ./${answers.name}/`));
+      console.log(chalk.gray(`  Structure:`));
+      console.log(chalk.gray(`    index.html`));
+      console.log(chalk.gray(`    css/`));
+      console.log(chalk.gray(`      └── style.css`));
+      if (answers.includeJs) {
+        console.log(chalk.gray(`    js/`));
+        console.log(chalk.gray(`      └── script.js`));
+      }
+    }
+    console.log("");
+  } catch (error) {
+    console.error(chalk.red("✗ Error:"), error.message);
+    process.exit(1);
+  }
+}
+
+export { createCommand };

package/bin/commands/gallery.js

@@ -0,0 +1,42 @@
+/**
+ * Gallery command implementation
+ */
+import path from "path";
+import { exec } from "child_process";
+import chalk from "chalk";
+import { getDirname } from "../../src/utils/path-utils.js";
+
+const __dirname = getDirname(import.meta.url);
+
+function galleryCommand() {
+  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 {
+      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);
+  }
+}
+
+export { galleryCommand };

package/bin/commands/insert.js

@@ -0,0 +1,123 @@
+/**
+ * Insert command implementation
+ */
+import inquirer from "inquirer";
+import path from "path";
+import { promises as fs } from "fs";
+import chalk from "chalk";
+import { insertComponent } from "../../src/inserter.js";
+import { COMPONENT_CHOICES } from "../../src/component-choices.js";
+
+async function insertCommand(options) {
+  try {
+    if (options.verbose) {
+      console.log(chalk.gray("[DEBUG] Options:"), options);
+    }
+
+    // If flags are provided, use them directly
+    if (options.file && options.component) {
+      if (options.verbose) {
+        console.log(chalk.gray("[INFO] Using provided options..."));
+      }
+
+      const insertOptions = {
+        targetFile: options.file,
+        component: options.component,
+        scriptMode: options.script || "separate",
+        styleMode: "separate",
+        createBackup: options.backup || false,
+      };
+
+      const result = await insertComponent(insertOptions);
+
+      console.log("\n" + chalk.green("✓ Component inserted successfully!"));
+      console.log(chalk.cyan("  Summary:"));
+      console.log(
+        chalk.gray(
+          `    File: ${path.relative(process.cwd(), result.targetFile)}`,
+        ),
+      );
+      console.log(chalk.gray(`    Component: ${chalk.bold(result.component)}`));
+      console.log(chalk.gray(`    CSS: ${chalk.yellow("external file")}`));
+      console.log(chalk.gray(`    JS: ${chalk.yellow(result.scriptMode)}`));
+      console.log(
+        chalk.gray(
+          `\n    Component IDs: ${result.component}-styles, ${result.component}-script`,
+        ),
+      );
+      console.log("");
+      return;
+    }
+
+    // Interactive mode
+    console.log(chalk.cyan("\n🚀 Inserting component into HTML file...\n"));
+
+    const answers = await inquirer.prompt([
+      {
+        type: "input",
+        name: "targetFile",
+        message: "Enter the path to your HTML file:",
+        default: "index.html",
+        validate: async (input) => {
+          if (!input || input.trim().length === 0) {
+            return "Please enter a file path";
+          }
+          if (!input.toLowerCase().endsWith(".html")) {
+            return "File must be an HTML file (.html)";
+          }
+
+          // Check if file exists
+          try {
+            await fs.access(path.resolve(process.cwd(), input));
+            return true;
+          } catch {
+            return `File not found: ${input}`;
+          }
+        },
+      },
+      {
+        type: "list",
+        name: "component",
+        message: "Which component would you like to insert?",
+        choices: COMPONENT_CHOICES,
+      },
+      {
+        type: "list",
+        name: "scriptMode",
+        message: "How should the JavaScript be added?",
+        choices: [
+          { name: "Separate file (recommended)", value: "separate" },
+          { name: "Inline (inside <script> tag)", value: "inline" },
+          { name: "Skip (I'll add it manually)", value: "skip" },
+        ],
+        default: "separate",
+      },
+    ]);
+
+    answers.styleMode = "separate";
+
+    const result = await insertComponent(answers);
+
+    console.log("\n" + chalk.green("✓ Component inserted successfully!"));
+    console.log(chalk.cyan("  Summary:"));
+    console.log(
+      chalk.gray(
+        `    File: ${path.relative(process.cwd(), result.targetFile)}`,
+      ),
+    );
+    console.log(chalk.gray(`    Component: ${chalk.bold(result.component)}`));
+    console.log(chalk.gray(`    CSS: ${chalk.yellow("external file")}`));
+    console.log(chalk.gray(`    JS: ${chalk.yellow(result.scriptMode)}`));
+    console.log(
+      chalk.gray(
+        `\n    Component IDs: ${result.component}-styles, ${result.component}-script`,
+      ),
+    );
+    console.log("");
+  } catch (error) {
+    console.error("\n" + chalk.red("✗ Error:"), error.message);
+    process.exit(1);
+  }
+}
+
+export { insertCommand };

package/bin/commands/list.js

@@ -0,0 +1,73 @@
+/**
+ * List command implementation
+ */
+import chalk from "chalk";
+
+function listCommand() {
+  console.log("\n" + chalk.blue("📦 Available Components (46 total)\n"));
+
+  console.log(chalk.yellow("━ Basic Components (9)"));
+  console.log("  button          Styled button component");
+  console.log("  card            Card component with image and content");
+  console.log("  form            Form with input fields and validation");
+  console.log("  navigation      Responsive navigation bar");
+  console.log("  modal           Modal dialog component");
+  console.log("  footer          Footer section");
+  console.log("  hero            Hero section with CTA button");
+  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");
+  console.log("  typing-effect   Text typing animations");
+  console.log("  fade-gallery    Image gallery with fade effects");
+
+  console.log("\n" + chalk.cyan("━ Grid Layouts (3)"));
+  console.log("  grid-layout     CSS Grid patterns and examples");
+  console.log("  masonry-grid    Pinterest-style masonry layout");
+  console.log("  dashboard-grid  Complete admin dashboard (Grid)");
+
+  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)");
+
+  console.log("\n" + chalk.red("━ DOM Manipulation Examples (4)"));
+  console.log("  todo-list       Interactive todo list with add/remove");
+  console.log("  counter         Click counter with history tracking");
+  console.log("  accordion       Collapsible accordion component");
+  console.log("  tabs            Tabbed content switcher");
+
+  console.log("\n" + chalk.green("━ Interactive Games (16)"));
+  console.log("  tic-tac-toe     Classic Tic-Tac-Toe game with score tracking");
+  console.log("  memory-game     Memory card matching game with difficulty levels");
+  console.log("  snake-game      Classic Snake game with keyboard controls");
+  console.log("  guess-number    Number guessing game with hints and scoring");
+  console.log("  game-2048       2048 puzzle game with touch & keyboard controls");
+  console.log("  whack-a-mole    Whack-A-Mole arcade game with difficulty levels");
+  console.log("  simon-says      Simon Says memory pattern game");
+  console.log("  rock-paper-scissors  Rock Paper Scissors vs AI");
+  console.log("  breakout        Brick breaker arcade game with levels");
+  console.log("  tetris          Classic Tetris with piece preview");
+  console.log("  flappy-bird     Flappy Bird obstacle avoidance game");
+  console.log("  connect-four    Connect 4 strategy game vs AI");
+  console.log("  blackjack       Blackjack card game with betting");
+  console.log("  slot-machine    3-reel slot machine with jackpots");
+  console.log("  dice-game       Dice race to 100 strategy game");
+  console.log("  pong            Classic Pong paddle game vs AI");
+
+  console.log("\n" + chalk.gray("Usage:"));
+  console.log("  create-template create              Create a new component");
+  console.log("  create-template insert              Insert into HTML file");
+  console.log("");
+}
+
+export { listCommand };

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "create-template-html-css",
-  "version": "2.0.3",
-  "description": "CLI tool to generate HTML and CSS templates for common UI elements",
+  "version": "2.1.0",
+  "type": "module",
+  "description": "CLI tool to generate HTML/CSS and React templates for common UI elements",
   "main": "src/index.js",
   "bin": {
     "create-template": "bin/cli.js"
@@ -19,10 +20,14 @@
     "html",
     "css",
     "javascript",
+    "react",
+    "jsx",
+    "react-components",
     "generator",
     "ui-components",
     "html-template",
     "css-template",
+    "react-template",
     "component-generator",
     "ui-generator",
     "animations",
@@ -38,7 +43,9 @@
     "modern-ui",
     "flexbox",
     "flex-layout",
-    "flex-dashboard"
+    "flex-dashboard",
+    "vite",
+    "react-vite"
   ],
   "author": "Ben Shabbat <benshabbat@example.com> (https://github.com/benshabbat)",
   "license": "MIT",

package/src/component-choices.js

@@ -0,0 +1,7 @@
+/**
+ * Component choices for CLI prompts
+ * Shared between create and insert commands
+ * 
+ * @deprecated This file is deprecated. Import COMPONENT_CHOICES from components-registry.js instead.
+ */
+export { COMPONENT_CHOICES } from "./components-registry.js";

package/src/components-registry.js

@@ -0,0 +1,112 @@
+/**
+ * Central registry for all available components
+ * This is the single source of truth for component names
+ */
+import chalk from "chalk";
+import inquirer from "inquirer";
+
+/**
+ * List of all valid component names (alphabetically sorted)
+ * Used for validation in both create and insert commands
+ */
+export const VALID_COMPONENTS = [
+  "accordion",
+  "animated-card",
+  "blackjack",
+  "breakout",
+  "button",
+  "card",
+  "connect-four",
+  "counter",
+  "dashboard-grid",
+  "dice-game",
+  "fade-gallery",
+  "flappy-bird",
+  "flex-cards",
+  "flex-dashboard",
+  "flex-layout",
+  "footer",
+  "form",
+  "game-2048",
+  "grid-layout",
+  "guess-number",
+  "hero",
+  "login",
+  "masonry-grid",
+  "memory-game",
+  "modal",
+  "navigation",
+  "pong",
+  "register",
+  "rock-paper-scissors",
+  "simon-says",
+  "skeleton",
+  "slider",
+  "slot-machine",
+  "snake-game",
+  "spinner",
+  "table",
+  "tabs",
+  "tetris",
+  "tic-tac-toe",
+  "todo-list",
+  "typing-effect",
+  "whack-a-mole",
+];
+
+/**
+ * Component choices for CLI prompts with categories and descriptions
+ * Used in interactive mode for create and insert commands
+ */
+export const COMPONENT_CHOICES = [
+  new inquirer.Separator(chalk.gray("─ Basic Components")),
+  { name: "Button", value: "button" },
+  { name: "Card", value: "card" },
+  { name: "Form", value: "form" },
+  { name: "Navigation", value: "navigation" },
+  { name: "Modal", value: "modal" },
+  { name: "Footer", value: "footer" },
+  { 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" },
+  { name: "Animated Card (Interactive Cards)", value: "animated-card" },
+  { name: "Typing Effect (Text Animations)", value: "typing-effect" },
+  { name: "Fade Gallery (Image Gallery)", value: "fade-gallery" },
+  new inquirer.Separator(chalk.gray("─ Grid Layouts (CSS Grid)")),
+  { name: "Grid Layout", value: "grid-layout" },
+  { name: "Masonry Grid (Pinterest-style)", value: "masonry-grid" },
+  { name: "Dashboard Grid (Admin Panel)", value: "dashboard-grid" },
+  new inquirer.Separator(chalk.gray("─ Flexbox Layouts")),
+  { name: "Flex Layout (Flexbox Patterns)", value: "flex-layout" },
+  { name: "Flex Cards (Equal-height cards)", value: "flex-cards" },
+  { name: "Flex Dashboard (Flexbox Admin)", value: "flex-dashboard" },
+  new inquirer.Separator(chalk.gray("─ DOM Manipulation Examples")),
+  { name: "Todo List (Add/Remove Items)", value: "todo-list" },
+  { name: "Counter (Click Handlers)", value: "counter" },
+  { name: "Accordion (Toggle Content)", value: "accordion" },
+  { name: "Tabs (Switch Sections)", value: "tabs" },
+  new inquirer.Separator(chalk.gray("─ Interactive Games")),
+  { name: "🎮 Tic-Tac-Toe", value: "tic-tac-toe" },
+  { name: "🎮 Memory Game", value: "memory-game" },
+  { name: "🎮 Snake Game", value: "snake-game" },
+  { name: "🎮 Guess Number", value: "guess-number" },
+  { name: "🎮 2048", value: "game-2048" },
+  { name: "🎮 Whack-a-Mole", value: "whack-a-mole" },
+  { name: "🎮 Simon Says", value: "simon-says" },
+  { name: "🎮 Rock-Paper-Scissors", value: "rock-paper-scissors" },
+  { name: "🎮 Breakout", value: "breakout" },
+  { name: "🎮 Tetris", value: "tetris" },
+  { name: "🎮 Flappy Bird", value: "flappy-bird" },
+  { name: "🎮 Connect Four", value: "connect-four" },
+  { name: "🎮 Blackjack", value: "blackjack" },
+  { name: "🎮 Slot Machine", value: "slot-machine" },
+  { name: "🎮 Dice Game", value: "dice-game" },
+  { name: "🎮 Pong", value: "pong" },
+];