create-template-html-css 2.0.4 → 2.2.0

package/src/react-component-choices.js

@@ -0,0 +1,97 @@
+/**
+ * React Component choices for interactive CLI prompts
+ */
+
+export const REACT_COMPONENT_CHOICES = [
+  {
+    name: "� Alert - Alert/notification component with variants",
+    value: "alert",
+    short: "Alert",
+  },
+  {    name: "🏷️ Badge - Status badge with counts, dots, and variants",
+    value: "badge",
+    short: "Badge",
+  },
+  {    name: "🔘 Button - Customizable button with variants and sizes",
+    value: "button",
+    short: "Button",
+  },
+  {
+    name: "🎴 Card - Display content in an elegant card",
+    value: "card",
+    short: "Card",
+  },
+  {
+    name: "☑️ Checkbox - Checkbox with sizes, colors, and states",
+    value: "checkbox",
+    short: "Checkbox",
+  },
+  {
+    name: "🔢 Counter - Interactive counter with increment/decrement",
+    value: "counter",
+    short: "Counter",
+  },
+  {
+    name: "📋 Dropdown - Select dropdown with search and multi-select",
+    value: "dropdown",
+    short: "Dropdown",
+  },
+  {
+    name: "📝 Form - Flexible form with validation",
+    value: "form",
+    short: "Form",
+  },
+  {
+    name: "📄 Input - Text input with validation and states",
+    value: "input",
+    short: "Input",
+  },
+  {
+    name: "🪟 Modal - Dialog modal component",
+    value: "modal",
+    short: "Modal",
+  },
+  {
+    name: "🧭 Navbar - Navigation bar with mobile menu",
+    value: "navbar",
+    short: "Navbar",
+  },
+  {
+    name: "📊 Progress - Progress bar with variants and animations",
+    value: "progress",
+    short: "Progress",
+  },
+  {
+    name: "🔀 Switch - Toggle switch for on/off states",
+    value: "switch",
+    short: "Switch",
+  },
+  {
+    name: "✅ Todo List - Complete todo list with CRUD operations",
+    value: "todo-list",
+    short: "Todo List",
+  },
+  {
+    name: "💬 Tooltip - Contextual tooltip with positions and triggers",
+    value: "tooltip",
+    short: "Tooltip",
+  },
+];
+
+export const REACT_COMPONENT_DESCRIPTIONS = {
+  alert: "An alert component for displaying notifications with different types (success, error, warning, info). Supports dismissible and custom icons",
+  badge: "A status badge component for displaying labels, counts, and indicators. Supports sizes, colors, pill shape, dot badges, and position variants",
+  button: "A customizable button component with multiple variants (primary, secondary, success, danger) and sizes (small, medium, large)",
+  card: "A versatile card component for displaying content with image, title, description, and footer support",
+  checkbox: "A checkbox component with different sizes, colors (primary, secondary, success, error), indeterminate state, and validation support",
+  counter: "A simple counter component with increment, decrement, and reset functionality. Supports min/max limits and custom steps",
+  dropdown: "A dropdown select component with searchable options, multi-select support, custom positioning, and keyboard navigation",
+  form: "A flexible form component with built-in validation, supporting multiple field types (text, email, textarea, select)",
+  input: "A text input component with validation, error messages, icons, and different states (focused, error, disabled)",
+  modal: "A modal dialog component with overlay, customizable sizes, and close handlers",
+  navbar: "A responsive navigation bar with logo, menu items, and mobile hamburger menu. Supports sticky positioning",
+  progress: "A progress bar component with colors, sizes, labels, striped patterns, animations, and indeterminate state for loading",
+  switch: "A toggle switch component for on/off states. Supports colors, sizes, icons, disabled and loading states",
+  "todo-list": "A complete todo list component with add, toggle, and delete functionality. Includes task statistics",
+  tooltip: "A contextual tooltip component with multiple positions (top, bottom, left, right), triggers (hover, click, focus), and customizable delays",
+};

package/src/react-component-templates.js

@@ -0,0 +1,182 @@
+/**
+ * React Component Templates Module
+ * 
+ * Central registry for all React component templates organized by category.
+ * This module aggregates templates from specialized sub-modules and provides
+ * a unified API for accessing component templates and their metadata.
+ * 
+ * @module react-component-templates
+ * @author create-template-html-css
+ * @version 2.0.0
+ */
+
+import { BASIC_TEMPLATES } from './templates/basic-components-templates.js';
+import { FORM_TEMPLATES } from './templates/form-components-templates.js';
+import { INTERACTIVE_TEMPLATES } from './templates/interactive-components-templates.js';
+
+// ============================================================================
+// COMPONENT TEMPLATES REGISTRY
+// ============================================================================
+
+/**
+ * Unified component template registry
+ * 
+ * Aggregates all component templates from different categories into a single
+ * accessible object. Templates are organized by component name (kebab-case).
+ * 
+ * Categories:
+ * - Basic components: alert, badge, button, card, counter
+ * - Form components: form, input, checkbox, dropdown, switch
+ * - Interactive components: modal, navbar, tooltip, progress, todo-list
+ * 
+ * @constant {Object.<string, string>}
+ */
+export const COMPONENT_TEMPLATES = {
+  ...BASIC_TEMPLATES,
+  ...FORM_TEMPLATES,
+  ...INTERACTIVE_TEMPLATES,
+};
+
+// ============================================================================
+// REACT IMPORTS MAPPING
+// ============================================================================
+
+/**
+ * React hooks import requirements for components
+ * 
+ * Maps component names (kebab-case) to the React hooks they require.
+ * Components not listed here don't need any React hooks.
+ * 
+ * @constant {Object.<string, string>}
+ * @property {string} modal - Requires useState for open/close state
+ * @property {string} input - Requires useState for controlled inputs
+ * @property {string} checkbox - Requires useState for checked state
+ * @property {string} dropdown - Requires useState for selection state
+ * @property {string} switch - Requires useState for toggle state
+ * @property {string} progress - Requires useState and useEffect for animations
+ * 
+ * @example
+ * // Get imports for a component
+ * const imports = COMPONENT_IMPORTS['modal']; // Returns 'useState'
+ */
+export const COMPONENT_IMPORTS = {
+  modal: 'useState',
+  input: 'useState',
+  checkbox: 'useState',
+  dropdown: 'useState',
+  switch: 'useState',
+  progress: 'useState, useEffect',
+};
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+/**
+ * Get template content for a component with placeholders replaced
+ * 
+ * Retrieves the JSX template for the specified component and replaces
+ * placeholder tokens with the actual component name.
+ * 
+ * @param {string} componentKebab - Component name in kebab-case (e.g., 'my-button')
+ * @param {string} componentName - Component name in PascalCase (e.g., 'MyButton')
+ * @returns {string|null} Template content with placeholders replaced, or null if not found
+ * 
+ * @example
+ * const template = getComponentTemplate('button', 'Button');
+ * // Returns JSX string with <Button> tags instead of {ComponentName}
+ */
+export function getComponentTemplate(componentKebab, componentName) {
+  const template = COMPONENT_TEMPLATES[componentKebab];
+  if (!template) {
+    return null;
+  }
+  
+  // Replace {ComponentName} placeholder with actual component name
+  return template.replace(/\{ComponentName\}/g, componentName);
+}
+
+/**
+ * Get required React imports for a component
+ * 
+ * Returns a comma-separated string of React hooks that the component needs.
+ * If the component doesn't require any hooks, returns an empty string.
+ * 
+ * @param {string} componentKebab - Component name in kebab-case
+ * @returns {string} Comma-separated imports (e.g., 'useState, useEffect') or empty string
+ * 
+ * @example
+ * const imports = getComponentImports('progress');
+ * // Returns 'useState, useEffect'
+ * 
+ * const imports2 = getComponentImports('button');
+ * // Returns '' (no hooks needed)
+ */
+export function getComponentImports(componentKebab) {
+  return COMPONENT_IMPORTS[componentKebab] || '';
+}
+
+/**
+ * Get all available component names
+ * 
+ * Returns an array of all component names (in kebab-case) that have templates available.
+ * Useful for validation, CLI autocomplete, or displaying available options.
+ * 
+ * @returns {string[]} Array of component names in kebab-case
+ * 
+ * @example
+ * const components = getAllComponentNames();
+ * // Returns ['alert', 'badge', 'button', 'card', ...]
+ */
+export function getAllComponentNames() {
+  return Object.keys(COMPONENT_TEMPLATES);
+}
+
+/**
+ * Check if a component template exists
+ * 
+ * Validates whether a template is available for the specified component name.
+ * Case-sensitive - expects kebab-case.
+ * 
+ * @param {string} componentKebab - Component name in kebab-case
+ * @returns {boolean} True if template exists, false otherwise
+ * 
+ * @example
+ * if (hasComponent('button')) {
+ *   console.log('Button template is available');
+ * }
+ */
+export function hasComponent(componentKebab) {
+  return componentKebab in COMPONENT_TEMPLATES;
+}
+
+/**
+ * Get all components that require React imports
+ * 
+ * Returns an array of component names that need React hooks.
+ * Useful for documenting which components have state management.
+ * 
+ * @returns {string[]} Array of component names that require React imports
+ * 
+ * @example
+ * const statefulComponents = getComponentsWithImports();
+ * // Returns ['modal', 'input', 'checkbox', 'dropdown', 'switch', 'progress']
+ */
+export function getComponentsWithImports() {
+  return Object.keys(COMPONENT_IMPORTS);
+}
+
+/**
+ * Get component count
+ * 
+ * Returns the total number of available component templates.
+ * 
+ * @returns {number} Total number of components
+ * 
+ * @example
+ * console.log(`${getComponentCount()} components available`);
+ * // Output: "15 components available"
+ */
+export function getComponentCount() {
+  return Object.keys(COMPONENT_TEMPLATES).length;
+}

package/src/react-file-operations.js

@@ -0,0 +1,172 @@
+import { promises as fs } from "fs";
+import path from "path";
+import { getDirname } from "./utils/path-utils.js";
+import { COLOR_SCHEMES } from "./generators/color-schemes.js";
+import { applyCustomColors } from "./generators/color-utils.js";
+
+const __dirname = getDirname(import.meta.url);
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+// Default colors
+const DEFAULT_PRIMARY_COLOR = "#667eea";
+const DEFAULT_SECONDARY_COLOR = "#764ba2";
+
+// ============================================================================
+// PATH UTILITIES
+// ============================================================================
+
+/**
+ * Get template path for React components
+ * @param {string} component - Component name
+ * @returns {string} Absolute path to template
+ */
+function getReactTemplatePath(component) {
+  return path.join(__dirname, "..", "templates-react", component);
+}
+
+// ============================================================================
+// FILE READING
+// ============================================================================
+
+/**
+ * Read React component file (.jsx)
+ * @param {string} component - Component name
+ * @param {string} filename - File name
+ * @returns {Promise<string>} File content
+ */
+async function readReactFile(component, filename) {
+  const templatePath = getReactTemplatePath(component);
+  const filePath = path.join(templatePath, filename);
+  
+  try {
+    return await fs.readFile(filePath, "utf-8");
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      return null;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Read and process component template files
+ * @param {string} component - Component name (kebab-case)
+ * @param {string} componentName - Component name (PascalCase)
+ * @param {string} primaryColor - Primary color
+ * @param {string} secondaryColor - Secondary color
+ * @returns {Promise<Object>} Processed JSX and CSS content
+ */
+async function readComponentFiles(component, componentName, primaryColor, secondaryColor) {
+  const jsxContent = await readReactFile(component, `${componentName}.jsx`);
+  let cssContent = await readReactFile(component, `${componentName}.css`);
+
+  if (!jsxContent) {
+    throw new Error(`React template not found for component: ${component}`);
+  }
+
+  // Apply custom colors to CSS
+  if (cssContent && (primaryColor || secondaryColor)) {
+    cssContent = applyCustomColors(cssContent, primaryColor, secondaryColor);
+  }
+
+  return { jsxContent, cssContent };
+}
+
+// ============================================================================
+// FILE WRITING
+// ============================================================================
+
+/**
+ * Write component files to directory
+ * @param {string} componentDir - Component directory path
+ * @param {string} componentName - Component name (PascalCase)
+ * @param {string} jsxContent - JSX file content
+ * @param {string} cssContent - CSS file content
+ */
+async function writeComponentFiles(componentDir, componentName, jsxContent, cssContent) {
+  await fs.writeFile(
+    path.join(componentDir, `${componentName}.jsx`),
+    jsxContent,
+    "utf-8"
+  );
+
+  if (cssContent) {
+    await fs.writeFile(
+      path.join(componentDir, `${componentName}.css`),
+      cssContent,
+      "utf-8"
+    );
+  }
+}
+
+// ============================================================================
+// PROJECT STRUCTURE
+// ============================================================================
+
+/**
+ * Create React project structure
+ * @param {string} outputDir - Output directory path
+ * @returns {Promise<Object>} Directory paths
+ */
+async function createReactProjectStructure(outputDir) {
+  await fs.mkdir(outputDir, { recursive: true });
+  
+  const srcDir = path.join(outputDir, "src");
+  await fs.mkdir(srcDir, { recursive: true });
+  
+  const componentsDir = path.join(srcDir, "components");
+  await fs.mkdir(componentsDir, { recursive: true });
+
+  return { outputDir, srcDir, componentsDir };
+}
+
+// ============================================================================
+// UTILITY FUNCTIONS
+// ============================================================================
+
+/**
+ * Convert component name to PascalCase
+ * @param {string} name - Component name (kebab-case)
+ * @returns {string} PascalCase name
+ */
+function toPascalCase(name) {
+  return name
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+}
+
+/**
+ * Resolve color scheme to actual colors
+ * @param {Object} options - Color options
+ * @returns {Object} Resolved colors
+ */
+function resolveColors(options) {
+  const { colorScheme, primaryColor, secondaryColor } = options;
+  
+  let finalPrimaryColor = primaryColor || DEFAULT_PRIMARY_COLOR;
+  let finalSecondaryColor = secondaryColor || DEFAULT_SECONDARY_COLOR;
+
+  if (colorScheme && COLOR_SCHEMES[colorScheme]) {
+    const scheme = COLOR_SCHEMES[colorScheme];
+    finalPrimaryColor = scheme.primary;
+    finalSecondaryColor = scheme.secondary;
+  }
+
+  return { finalPrimaryColor, finalSecondaryColor };
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  readComponentFiles,
+  writeComponentFiles,
+  createReactProjectStructure,
+  toPascalCase,
+  resolveColors,
+};

package/src/react-generator.js

@@ -0,0 +1,219 @@
+import { promises as fs } from "fs";
+import path from "path";
+import { sanitizeFilename } from "./generators/validation.js";
+import {
+  readComponentFiles,
+  writeComponentFiles,
+  createReactProjectStructure,
+  toPascalCase,
+  resolveColors,
+} from "./react-file-operations.js";
+import {
+  generateAppJsx,
+  generateIndexJs,
+  generateIndexHtml,
+  generatePackageJson,
+  generateGitignore,
+  generateViteConfig,
+  generateReadme,
+} from "./react-templates.js";
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+// Valid React components
+export const VALID_REACT_COMPONENTS = [
+  "alert",
+  "badge",
+  "button",
+  "card",
+  "checkbox",
+  "counter",
+  "dropdown",
+  "form",
+  "input",
+  "modal",
+  "navbar",
+  "progress",
+  "switch",
+  "todo-list",
+  "tooltip",
+];
+
+// ============================================================================
+// VALIDATORS
+// ============================================================================
+
+/**
+ * Validate React component name
+ * @param {string} component - Component name to validate
+ * @throws {Error} If component is invalid
+ */
+function validateComponent(component) {
+  if (!VALID_REACT_COMPONENTS.includes(component)) {
+    throw new Error(
+      `Invalid React component: ${component}. Must be one of: ${VALID_REACT_COMPONENTS.join(", ")}`
+    );
+  }
+}
+
+// ============================================================================
+// MAIN EXPORT FUNCTIONS
+// ============================================================================
+
+/**
+ * Generate React component files
+ * @param {Object} options - Generation options
+ * @returns {Promise<string>} Path to generated directory
+ */
+async function generateReactTemplate(options) {
+  const {
+    component,
+    name,
+    colorScheme,
+    primaryColor,
+    secondaryColor,
+    darkMode,
+    lazyLoad = false,
+    optimizeBuild = false,
+  } = options;
+
+  // Resolve colors
+  const { finalPrimaryColor, finalSecondaryColor } = resolveColors({
+    colorScheme,
+    primaryColor,
+    secondaryColor,
+  });
+
+  // Security: Validate component name
+  validateComponent(component);
+
+  // Security: Sanitize name to prevent path traversal
+  const safeName = sanitizeFilename(name);
+  if (!safeName || safeName.length === 0) {
+    throw new Error("Invalid name provided");
+  }
+
+  // Create project structure
+  const outputDir = path.join(process.cwd(), safeName);
+  const { srcDir, componentsDir } = await createReactProjectStructure(outputDir);
+
+  // Get component name in PascalCase
+  const componentName = toPascalCase(component);
+  const componentDir = path.join(componentsDir, componentName);
+  await fs.mkdir(componentDir, { recursive: true });
+
+  // Read and process component files
+  const { jsxContent, cssContent } = await readComponentFiles(
+    component,
+    componentName,
+    finalPrimaryColor,
+    finalSecondaryColor
+  );
+
+  // Write component files
+  await writeComponentFiles(componentDir, componentName, jsxContent, cssContent);
+
+  // Create App.jsx (with optional lazy loading)
+  const appContent = generateAppJsx(componentName, component, { lazyLoad });
+  await fs.writeFile(path.join(srcDir, "App.jsx"), appContent, "utf-8");
+
+  // Create index.jsx
+  const indexContent = generateIndexJs();
+  await fs.writeFile(path.join(srcDir, "index.jsx"), indexContent, "utf-8");
+
+  // Create index.html
+  const htmlContent = generateIndexHtml(safeName);
+  await fs.writeFile(path.join(outputDir, "index.html"), htmlContent, "utf-8");
+
+  // Create package.json
+  const packageJson = generatePackageJson(safeName);
+  await fs.writeFile(
+    path.join(outputDir, "package.json"),
+    JSON.stringify(packageJson, null, 2),
+    "utf-8"
+  );
+
+  // Create .gitignore
+  const gitignoreContent = generateGitignore();
+  await fs.writeFile(path.join(outputDir, ".gitignore"), gitignoreContent, "utf-8");
+
+  // Create vite.config.js (with optional optimizations)
+  const viteConfig = generateViteConfig(optimizeBuild);
+  await fs.writeFile(path.join(outputDir, "vite.config.js"), viteConfig, "utf-8");
+
+  // Create README.md
+  const readmeContent = generateReadme(safeName, componentName);
+  await fs.writeFile(path.join(outputDir, "README.md"), readmeContent, "utf-8");
+
+  return outputDir;
+}
+
+/**
+ * Add React component only (without full project structure)
+ * @param {Object} options - Generation options
+ * @returns {Promise<string>} Path to generated component directory
+ */
+async function addReactComponentOnly(options) {
+  const {
+    component,
+    outputDir = process.cwd(),
+    colorScheme,
+    primaryColor,
+    secondaryColor,
+  } = options;
+
+  // Resolve colors
+  const { finalPrimaryColor, finalSecondaryColor } = resolveColors({
+    colorScheme,
+    primaryColor,
+    secondaryColor,
+  });
+
+  // Security: Validate component name
+  validateComponent(component);
+
+  // Get component name in PascalCase
+  const componentName = toPascalCase(component);
+  const componentDir = path.join(outputDir, componentName);
+  
+  // Check if component already exists
+  try {
+    await fs.access(componentDir);
+    throw new Error(`Component directory already exists: ${componentDir}`);
+  } catch (error) {
+    if (error.code !== "ENOENT") {
+      throw error;
+    }
+  }
+
+  await fs.mkdir(componentDir, { recursive: true });
+
+  // Read and process component files
+  const { jsxContent, cssContent } = await readComponentFiles(
+    component,
+    componentName,
+    finalPrimaryColor,
+    finalSecondaryColor
+  );
+
+  // Write component files
+  await writeComponentFiles(componentDir, componentName, jsxContent, cssContent);
+
+  console.log(`✓ Created ${componentName} component in ${componentDir}`);
+  console.log(`\nFiles created:`);
+  console.log(`  - ${componentName}.jsx`);
+  console.log(`  - ${componentName}.css`);
+  console.log(`\nUsage example:`);
+  console.log(`  import ${componentName} from './${componentName}/${componentName}';`);
+  console.log(`  import './${componentName}/${componentName}.css';`);
+
+  return componentDir;
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export { generateReactTemplate, addReactComponentOnly };