create-template-html-css 2.0.4 → 2.2.0

package/CHANGELOG.md

@@ -5,6 +5,442 @@ 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).
 
+## [Unreleased]
+
+### ⚛️ React Component Expansion (Part 3)
+
+#### Added - 3 New React Components
+- **Badge** - Status badge component
+  - 7 variants (default, primary, secondary, success, warning, error, info)
+  - 3 sizes (small, medium, large)
+  - Pill shape option
+  - Count badges with maxCount support (displays "99+" when exceeded)
+  - Dot badges for status indicators
+  - 4 positioning options (top-right, top-left, bottom-right, bottom-left)
+  - Outline style variants
+  - Pulse animation for attention
+  - Show/hide zero counts
+  - Dark mode support
+  - Use cases: notification counts, status labels, categories, priority levels
+
+- **Switch** - Toggle switch component for on/off states
+  - 6 colors (primary, secondary, success, error, warning, info)
+  - 3 sizes (small, medium, large)
+  - Label with left/right positioning
+  - Icon support for checked/unchecked states
+  - Loading state with spinner animation
+  - Disabled state
+  - Controlled component with onChange handler
+  - Focus, hover, and active effects
+  - Accessibility with role and aria attributes
+  - Dark mode support
+  - Use cases: settings toggles, dark mode, sound controls, notifications
+
+- **Progress** - Progress bar component for visual feedback
+  - 7 color variants (all standard colors)
+  - 3 sizes (small, medium, large)
+  - Percentage display (showPercentage)
+  - Custom labels (showLabel, custom label text)
+  - Striped pattern option
+  - Animated striped pattern
+  - Indeterminate loading state
+  - Min/max/value range support
+  - Aria attributes for accessibility
+  - Circular progress bonus styles
+  - Pulse glow animation
+  - Dark mode support
+  - Use cases: file uploads, task completion, loading states, skill levels
+
+#### Summary
+- React components expanded from 12 to 15 components
+- All new components follow the same structure (ComponentName.jsx, ComponentName.css, ComponentName.example.jsx)
+- Full color customization support with ##PRIMARY_COLOR## and ##SECONDARY_COLOR## placeholders
+- Components work in both full project and component-only modes
+- Comprehensive examples provided for each component with real-world use cases
+- Advanced CSS techniques: transforms, gradients, animations, pseudo-elements
+- Total new code: ~1,511 lines across 9 files
+
+### ⚛️ React Component Expansion (Part 2)
+
+#### Added - 3 New React Components
+- **Dropdown** - Advanced select dropdown component
+  - Single and multi-select support
+  - Searchable options
+  - Keyboard navigation
+  - Custom option rendering
+  - Disabled state
+  - Error handling and validation
+  - Max height customization
+  - Click-outside to close
+  - Smooth animations
+  
+- **Checkbox** - Customizable checkbox component
+  - Multiple sizes (small, medium, large)
+  - Multiple colors (primary, secondary, success, error)
+  - Indeterminate state support
+  - Label and helper text
+  - Error messages
+  - Disabled state
+  - Animated check mark
+  - Dark mode support
+  
+- **Tooltip** - Contextual tooltip component
+  - Four positions (top, bottom, left, right)
+  - Multiple triggers (hover, click, focus, both)
+  - Customizable delay
+  - Optional arrow
+  - Max width control
+  - Auto-positioning within viewport
+  - Smooth animations
+  - Disabled state
+
+#### Summary
+- React components expanded from 9 to 12 components
+- All new components follow the same structure (ComponentName.jsx, ComponentName.css, ComponentName.example.jsx)
+- Full color customization support with ##PRIMARY_COLOR## and ##SECONDARY_COLOR## placeholders
+- Components work in both full project and component-only modes
+- Comprehensive examples provided for each component
+
+### ⚛️ React Component Expansion (Part 1)
+
+#### Added - 3 New React Components (v2.1.0 extended)
+- **Navbar** - Responsive navigation bar with mobile hamburger menu
+  - Logo customization (text or component)
+  - Configurable menu items
+  - Mobile-responsive with slide-in menu
+  - Sticky positioning
+  - Smooth animations
+  - Click handlers for navigation
+  
+- **Input** - Advanced text input component with validation
+  - Multiple input types (text, email, password, etc.)
+  - Label and placeholder support
+  - Validation with error messages
+  - Helper text display
+  - Icon support
+  - Disabled and required states
+  - Focus and touch states
+  - Controlled and uncontrolled modes
+  - Max length support
+  
+- **Alert** - Notification/alert component with variants
+  - Four types: success, error, warning, info
+  - Auto-styled with type-specific colors
+  - Dismissible with close button
+  - Title and message support
+  - Custom icon support
+  - Smooth slide-in animation
+  - Optional close handler
+
+#### Summary
+- React components expanded from 6 to 9 components
+- All new components follow the same structure (ComponentName.jsx, ComponentName.css, ComponentName.example.jsx)
+- Full color customization support with ##PRIMARY_COLOR## and ##SECONDARY_COLOR## placeholders
+- Components work in both full project and component-only modes
+
+## [2.1.0] - 2026-02-08
+
+### ⚛️ React Support
+
+#### Added - React Component Generation
+- **React Component Templates** - Generate React components with JSX
+  - Created `templates-react/` directory with 6 React components:
+    - Button - Customizable button with variants and sizes
+    - Card - Display content in elegant cards
+    - Counter - Interactive counter with state management
+    - Form - Flexible form with validation
+    - Modal - Dialog modal with overlay
+    - Todo List - Complete CRUD operations
+  - All components use modern React Hooks (useState, useEffect)
+  - Full CSS styling with customizable colors
+  - Dark mode support with CSS media queries
+  - Example files for each component
+
+- **React Generator** - New `src/react-generator.js` module
+  - Generates complete React project structure with Vite
+  - Creates `src/components/` directory structure
+  - Generates `App.jsx`, `index.jsx`, and `index.html`
+  - Creates `package.json` with React 18 and Vite dependencies
+  - Generates `vite.config.js` for Vite configuration
+  - Generates `.gitignore` and `README.md`
+  - Supports color customization (schemes and custom colors)
+  - **Component-Only Mode**: New `addReactComponentOnly()` function
+    - Adds single React component (JSX + CSS) without full project structure
+    - Perfect for adding components to existing projects
+    - Validates component doesn't already exist
+    - Provides usage instructions after creation
+  - **Security**: Full input validation and sanitization
+    - Component name validation against whitelist
+    - Project name sanitization using `sanitizeFilename()`
+    - Protection against path traversal attacks
+    - Alphanumeric validation for project names
+  - Export functions: `generateReactTemplate()`, `addReactComponentOnly()`, `VALID_REACT_COMPONENTS`
+
+- **React CLI Support** - Enhanced CLI with React mode
+  - Added `--react` flag to `create` command
+  - Added `--component-only` flag for adding components without full project
+  - Interactive framework selection (HTML or React)
+  - Interactive project type selection (Full project or Component only)
+  - React component choices loaded dynamically
+  - Created `src/react-component-choices.js` with component descriptions
+  - Updated CLI help messages to mention React support
+  - Updated main CLI description to include React
+
+- **React Documentation**
+  - Created `templates-react/README.md` with usage guide
+
+#### Fixed
+- **JSX File Extension**: Changed `index.js` to `index.jsx` to properly support JSX syntax
+  - Vite requires `.jsx` extension for files containing JSX
+  - Updated generator to create `index.jsx` instead of `index.js`
+  - Updated `index.html` reference to `/src/index.jsx`
+  - Prevents "Failed to parse source for import analysis" errors
+  - Created `QUICKSTART-REACT.md` - Quick start guide for React
+  - Created `HTML-VS-REACT.md` - Comprehensive comparison guide
+  - Updated main `README.md` with React sections:
+    - "React Support" in What's New
+    - "Mode 1b: Create a React Component Project" usage guide
+    - React component descriptions and examples
+  - Added React keywords to `package.json`
+  - Updated version to 2.1.0
+
+#### Security Enhancements
+- **Enhanced Input Validation** - Strengthened security across all components
+  - All user inputs are validated and sanitized
+  - Path traversal protection (blocks ../, ..\, /../, \..\ patterns)
+  - Project name length validation (max 100 characters)
+  - Alphanumeric character requirement for names
+  - Dangerous character removal (<>:"|?*)
+### 🔧 Code Quality & Architecture Improvements
+
+#### Refactored - React Generator Module Split
+- **Major Refactoring**: Split `react-generator.js` (659 lines) into focused modules
+  - Reduced main file by **73%** (176 lines)
+  - Better separation of concerns and maintainability
+  
+- **New Module Structure**:
+  - `src/react-generator.js` (176 lines) - Main export functions and validation
+    - `generateReactTemplate()` - Full React project generation
+    - `addReactComponentOnly()` - Component-only mode
+    - `validateComponent()` - Component name validation
+    - Exports `VALID_REACT_COMPONENTS` constant
+  
+  - `src/react-templates.js` (303 lines) - Template generation functions
+    - `generateAppJsx()` - App component with examples
+    - `generateIndexJs()` - React entry point
+    - `generateIndexHtml()` - HTML template
+    - `generatePackageJson()` - Package configuration
+    - `generateGitignore()` - Git ignore file
+    - `generateViteConfig()` - Vite configuration
+    - `generateReadme()` - Project README
+    - Version constants: `REACT_VERSION`, `VITE_VERSION`, `VITE_REACT_PLUGIN_VERSION`
+  
+  - `src/react-file-operations.js` (148 lines) - File I/O and utilities
+    - `readComponentFiles()` - Read and process templates
+    - `writeComponentFiles()` - Write JSX and CSS files
+    - `createReactProjectStructure()` - Create project directories
+    - `toPascalCase()` - Convert names to PascalCase
+    - `resolveColors()` - Resolve color schemes
+    - Color constants: `DEFAULT_PRIMARY_COLOR`, `DEFAULT_SECONDARY_COLOR`
+
+- **Code Organization Improvements**:
+  - Extracted common helper functions to reduce duplication
+  - Simplified App.jsx template generation with `createAppTemplate()`
+  - Added clear section headers for better code navigation
+  - Extracted magic values into named constants
+  - Organized code into logical sections (CONSTANTS, UTILITIES, VALIDATORS, etc.)
+
+#### Benefits
+- **Maintainability**: Each module has single responsibility
+- **Testability**: Easier to test focused modules independently
+- **Readability**: Clear separation between templates, file operations, and main logic
+- **Performance**: Better tree-shaking with modular exports
+- **Developer Experience**: Easier to find and modify specific functionality
+
+#### Testing
+- ✅ All functionality preserved - no breaking changes
+- ✅ Full project generation tested and working
+- ✅ Component-only mode tested and working
+- ✅ All React components generate correctly
+- ✅ No syntax or runtime errors  - Component name whitelist validation
+  - Empty/null input rejection
+
+- **Secure File Operations** - Protected file system operations
+  - All file paths use `path.join()` to prevent traversal
+  - Directory creation with `recursive: true` safely
+  - Output directory restricted to `process.cwd()` subdirectories
+  - No arbitrary file system access allowed
+
+- **Example Usage:**
+  ```bash
+  # Interactive mode
+  create-template create --react
+  
+  # With flags
+  create-template create --react -c button -n my-button
+  create-template create --react -c counter -n my-counter --color-scheme ocean
+  
+  # Run the React project
+  cd my-counter
+  npm install
+  npm run dev
+  ```
+
+### 🏗️ Major Refactoring
+
+#### Changed - Code Deduplication
+
+#### Fixed - Template Consistency
+- **Standardized Template HTML Syntax** - Fixed inconsistencies across templates
+  - Fixed `skeleton` template to use HTML5 syntax instead of XHTML (removed `/` from void elements)
+  - Added missing `{{name}}` placeholder to 8 game templates:
+    - `blackjack`, `breakout`, `connect-four`, `dice-game`, `flappy-bird`, `pong`, `slot-machine`, `tetris`
+  - All 42 templates now consistently use HTML5 syntax
+  - All templates now support custom naming via `{{name}}` placeholder
+  - Improved template generation consistency
+
+- **Enhanced Template Documentation** - Improved templates/_shared directory
+  - Updated `README.md` with comprehensive philosophy and statistics
+  - Created `PATTERNS.md` documenting 15+ recurring code patterns
+  - Created `CONTRIBUTING.md` with complete template development guide
+  - Documented intentional CSS/JS duplication strategy (42 self-contained templates)
+  - Added statistics: 42 templates with CSS reset, 37 with gradient backgrounds
+  - Clarified that templates are intentionally standalone for copy-paste usage
+  - Better onboarding for contributors understanding template architecture
+
+- **Centralized String Utilities** - Eliminated duplicate string manipulation patterns
+  - Created `src/utils/string-utils.js` with reusable string functions
+  - Extracted functions:
+    - `textToId()` - Convert text to valid HTML/CSS ID (e.g., "My Item" → "my-item")
+    - `sanitizeForFilename()` - Remove invalid filename characters
+    - `parseCommaSeparated()` - Parse comma-separated lists with trimming
+    - `parseKeyValuePairs()` - Parse "key:value" comma-separated pairs
+  - Refactored `src/generators/html-generators.js` to use string utilities (23 lines net reduction)
+  - Refactored `src/generators/validation.js` to use string utilities
+  - Fixed `src/generator.js` to properly use `createComponentDirs()` (6 lines reduction)
+  - Eliminated 3 duplicate instances of `.toLowerCase().replace(/\s+/g, "-")` pattern
+  - More consistent string handling across codebase
+
+- **Centralized Template Loading** - Eliminated duplicate template file reading
+  - Created `src/utils/template-loader.js` with reusable template reading functions
+  - Extracted functions:
+    - `getTemplatePath()` - Get template directory path
+    - `readTemplateFile()` - Read any template file
+    - `readTemplateHtml()` - Read template HTML with fallback logic
+    - `readTemplateCss()` - Read template CSS with css/ subfolder support
+    - `readTemplateJs()` - Read template JS with js/ subfolder support
+    - `hasTemplateJs()` - Check if template has JavaScript
+  - Refactored `src/generator.js` to use template loader (12 lines net reduction)
+  - Refactored `src/inserters/component-loader.js` to use template loader (8 lines net reduction)
+  - Eliminated repetitive `fs.readFile()` and `path.join()` patterns
+  - More consistent template file handling across codebase
+
+- **Centralized File Operations** - Eliminated duplicate file system operations
+  - Created `src/utils/file-utils.js` with reusable file operation functions
+  - Extracted functions:
+    - `ensureDir()` - Create directory with parents
+    - `ensureDirs()` - Create multiple directories
+    - `writeHtmlFile()` - Write formatted HTML files
+    - `writeCssFile()` - Write formatted CSS files
+    - `writeJsFile()` - Write formatted JS files
+    - `createComponentDirs()` - Create component directory structure
+    - `writeComponentFiles()` - Write all component files atomically
+  - Refactored `src/generator.js` to use file utilities (reduced by 11 lines)
+  - Refactored `src/inserter.js` to use file utilities (reduced by 9 lines)
+  - Eliminated repetitive `fs.mkdir({recursive: true})` and `fs.writeFile()` patterns
+  - More consistent error handling and file formatting
+
+- **Centralized Indentation Logic** - Eliminated duplicate indentation handling
+  - Created `src/inserters/indentation-utils.js` with reusable indentation functions
+  - Extracted functions:
+    - `normalizeIndentation()` - Normalize content with base indentation
+    - `createInlineStyleTag()` - Generate inline style tags
+    - `createInlineScriptTag()` - Generate inline script tags
+    - `createStyleLink()` - Generate external stylesheet links
+    - `createScriptTag()` - Generate external script tags
+    - `createComponentInsertion()` - Generate component HTML with comment
+  - Refactored `src/inserter.js` to use utilities
+  - Reduced inserter.js from 206 to 163 lines (21% reduction)
+  - Eliminated ~40 lines of duplicate indentation normalization logic
+  - More maintainable and testable code
+
+- **Centralized Path Utilities** - Eliminated __dirname duplication in ES Modules
+  - Created `src/utils/path-utils.js` with `getDirname()` and `getFilename()` utilities
+  - Replaced repetitive `fileURLToPath` + `dirname` pattern in 3 files:
+    - `src/generator.js` - Now uses `getDirname(import.meta.url)`
+    - `src/inserters/component-loader.js` - Now uses `getDirname(import.meta.url)`
+    - `bin/commands/gallery.js` - Now uses `getDirname(import.meta.url)`
+  - Cleaner, more maintainable ES Modules __dirname handling
+  - Reduced boilerplate by ~15 lines
+
+- **Centralized Components Registry** - Eliminated duplicate component lists
+  - Created `src/components-registry.js` as single source of truth
+  - Contains `VALID_COMPONENTS` array (46 components, alphabetically sorted)
+  - Contains `COMPONENT_CHOICES` with categorized prompts
+  - Removed duplicates from:
+    - `src/generators/validation.js` - Now imports from registry
+    - `src/inserters/validation-utils.js` - Now imports from registry
+    - `src/component-choices.js` - Now re-exports from registry (deprecated)
+  - Reduced code duplication by ~130 lines
+  - Single maintenance point for component additions
+
+#### Changed - Inserter Module Architecture
+- **Modular Inserter Structure** - Split 327-line inserter.js into organized modules
+  - Main inserter.js reduced from 327 to 206 lines (37% reduction)
+  - New `src/inserters/` directory with specialized modules:
+    - `validation-utils.js` (93 lines) - Component validation, HTML structure validation
+    - `html-utils.js` (31 lines) - HTML indentation detection and manipulation
+    - `backup-utils.js` (19 lines) - File backup creation utilities
+    - `component-loader.js` (95 lines) - Template loading for HTML, CSS, and JS files
+  - Better separation of concerns and maintainability
+  - Security validation maintained throughout refactor
+
+#### Changed - Generator Module Architecture
+- **Modular Generator Structure** - Split massive 661-line generator.js into organized modules
+  - Main generator.js reduced from 661 to 166 lines (75% reduction!)
+  - New `src/generators/` directory with specialized modules:
+    - `color-schemes.js` (76 lines) - All color presets and scheme management
+    - `color-utils.js` (93 lines) - Color manipulation utilities and dark mode
+    - `component-filters.js` (135 lines) - Button, card, spinner variations filtering
+    - `html-generators.js` (171 lines) - Navigation and form field generation
+    - `validation.js` (61 lines) - Component validation and security utilities
+  - Better separation of concerns and maintainability
+  - Improved code organization and testability
+
+#### Changed - CLI Module Architecture
+- **ES Modules Migration** - Converted entire codebase from CommonJS to ES Modules
+  - All `require()` statements replaced with `import`
+  - All `module.exports` replaced with `export`
+  - Added `"type": "module"` to package.json
+  - Updated dynamic imports for optional dependencies (Prettier)
+  - Proper `__dirname` support using `fileURLToPath` and `dirname`
+
+- **Modular CLI Architecture** - Refactored CLI from single 618-line file to organized structure
+  - Main CLI file reduced from 618 to 85 lines (86% reduction!)
+  - Commands split into separate modules in `bin/commands/` directory
+  - `create.js` - 174 lines (handles template creation with prompts)
+  - `insert.js` - 123 lines (handles component insertion into HTML)
+  - `list.js` - 73 lines (displays all 46 available components)
+  - `gallery.js` - 42 lines (opens interactive component gallery)
+  - Total reduction: 618 lines → 497 lines across 5 files
+
+#### Added
+- **Enhanced Security** - Comprehensive input validation for component names
+  - Blocks path traversal attacks (`../`, `..\`, `/../`, `\..\`)
+  - Prevents path separator usage in component names (`/`, `\`)
+  - Validates both interactive prompts and command-line flags
+  - Maximum name length limit (100 characters)
+  - Allows legitimate names with dots (e.g., "my-component-2.0")
+  - Protects against directory traversal to parent/system directories
+
+#### Technical Improvements
+- Better code maintainability with modular architecture
+- Improved performance with ES Modules tree-shaking
+- Cleaner separation of concerns (each command in its own file)
+- Enhanced error handling and validation
+- All file imports include `.js` extension (ES Modules requirement)
+- Cross-platform `__dirname` support in ES Modules environment
+
 ## [2.0.2] - 2026-02-05
 
 ### Fixed