create-template-html-css 2.0.4 → 2.2.0

package/src/templates/form-components-templates.js

@@ -0,0 +1,194 @@
+/**
+ * Form Component Templates
+ * Form-related components with input fields and state management
+ * 
+ * @module templates/form-components-templates
+ */
+
+export const FORM_TEMPLATES = {
+  form: `  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <{ComponentName}
+        title="Contact Form"
+        fields={[
+          { name: 'name', label: 'Name', type: 'text', required: true },
+          { name: 'email', label: 'Email', type: 'email', required: true },
+        ]}
+        onSubmit={(data) => console.log('Form data:', data)}
+      />
+    </div>
+  );`,
+
+  input: `  const [value, setValue] = useState('');
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '400px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Input Component Examples</h1>
+      
+      <{ComponentName}
+        label="Name"
+        placeholder="Enter your name"
+        required
+      />
+      
+      <{ComponentName}
+        type="email"
+        label="Email"
+        placeholder="your@email.com"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        required
+      />
+      
+      <{ComponentName}
+        label="Search"
+        placeholder="Search..."
+        icon="🔍"
+      />
+    </div>
+  );`,
+
+  checkbox: `  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '600px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Checkbox Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Basic Checkbox</h2>
+        <{ComponentName}
+          label="I agree to the terms and conditions"
+          checked={isChecked}
+          onChange={setIsChecked}
+        />
+        <p>Status: {isChecked ? 'Checked' : 'Unchecked'}</p>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Different Sizes</h2>
+        <{ComponentName} label="Small" size="small" />
+        <{ComponentName} label="Medium (default)" size="medium" />
+        <{ComponentName} label="Large" size="large" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Different Colors</h2>
+        <{ComponentName} label="Primary" checked color="primary" />
+        <{ComponentName} label="Success" checked color="success" />
+        <{ComponentName} label="Error" checked color="error" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Disabled State</h2>
+        <{ComponentName} label="Disabled unchecked" disabled />
+        <{ComponentName} label="Disabled checked" checked disabled />
+      </div>
+    </div>
+  );`,
+
+  dropdown: `  const [selected, setSelected] = useState('');
+
+  const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' }
+  ];
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '600px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Dropdown Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <{ComponentName}
+          label="Choose a fruit"
+          options={options}
+          value={selected}
+          onChange={setSelected}
+          placeholder="Select a fruit"
+        />
+        <p>Selected: {selected || 'None'}</p>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <{ComponentName}
+          label="Searchable Dropdown"
+          options={options}
+          placeholder="Search and select..."
+          searchable
+        />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <{ComponentName}
+          label="Disabled"
+          options={options}
+          placeholder="Cannot select"
+          disabled
+        />
+      </div>
+    </div>
+  );`,
+
+  switch: `  const [enabled, setEnabled] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Switch Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Basic Switch</h2>
+        <{ComponentName}
+          checked={enabled}
+          onChange={setEnabled}
+          label="Enable notifications"
+        />
+        <p style={{ marginTop: '0.5rem' }}>Status: {enabled ? 'ON' : 'OFF'}</p>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Sizes</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <{ComponentName} size="small" label="Small" />
+          <{ComponentName} size="medium" label="Medium (default)" />
+          <{ComponentName} size="large" label="Large" />
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Colors</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <{ComponentName} checked color="primary" label="Primary" />
+          <{ComponentName} checked color="success" label="Success" />
+          <{ComponentName} checked color="error" label="Error" />
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>With Icons</h2>
+        <{ComponentName}
+          checked={darkMode}
+          onChange={setDarkMode}
+          label="Dark mode"
+          color="secondary"
+          icons={{
+            checked: '🌙',
+            unchecked: '☀️'
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>States</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <{ComponentName} label="Normal" />
+          <{ComponentName} checked label="Checked" />
+          <{ComponentName} disabled label="Disabled" />
+          <{ComponentName} loading label="Loading" />
+        </div>
+      </div>
+    </div>
+  );`,
+};

package/src/templates/interactive-components-templates.js

@@ -0,0 +1,139 @@
+/**
+ * Interactive Component Templates
+ * Complex interactive components with navigation, modals, and animations
+ * 
+ * @module templates/interactive-components-templates
+ */
+
+export const INTERACTIVE_TEMPLATES = {
+  modal: `  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <button onClick={() => setIsOpen(true)}>Open Modal</button>
+      <{ComponentName}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Example Modal"
+      >
+        <p>This is the modal content</p>
+      </{ComponentName}>
+    </div>
+  );`,
+
+  navbar: `  const links = [
+    { label: 'Home', href: '#home' },
+    { label: 'Features', href: '#features' },
+    { label: 'Pricing', href: '#pricing' },
+    { label: 'Contact', href: '#contact' }
+  ];
+
+  return (
+    <div>
+      <{ComponentName}
+        logo="MyApp"
+        links={links}
+        onLinkClick={(link) => console.log('Clicked:', link.label)}
+      />
+      <div style={{ padding: '40px' }}>
+        <h1>Scroll down to see sticky navbar</h1>
+        <div style={{ height: '2000px' }}>
+          <p>Content goes here...</p>
+        </div>
+      </div>
+    </div>
+  );`,
+
+  tooltip: `  return (
+    <div className="App" style={{ padding: '80px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
+      <h1 style={{ marginBottom: '50px' }}>Tooltip Component Examples</h1>
+      
+      <div style={{ marginBottom: '50px', display: 'flex', gap: '40px', justifyContent: 'center', flexWrap: 'wrap' }}>
+        <{ComponentName} content="This is a top tooltip" position="top">
+          <button style={buttonStyle}>Top</button>
+        </{ComponentName}>
+        
+        <{ComponentName} content="This is a bottom tooltip" position="bottom">
+          <button style={buttonStyle}>Bottom</button>
+        </{ComponentName}>
+        
+        <{ComponentName} content="This is a left tooltip" position="left">
+          <button style={buttonStyle}>Left</button>
+        </{ComponentName}>
+        
+        <{ComponentName} content="This is a right tooltip" position="right">
+          <button style={buttonStyle}>Right</button>
+        </{ComponentName}>
+      </div>
+
+      <div style={{ marginBottom: '50px' }}>
+        <{ComponentName} content="Click me to toggle!" trigger="click">
+          <button style={buttonStyle}>Click Trigger</button>
+        </{ComponentName}>
+      </div>
+
+      <div>
+       <{ComponentName} 
+          content="This is a longer tooltip that demonstrates how it handles more text content."
+          maxWidth="300px"
+        >
+          <button style={buttonStyle}>Long Content</button>
+        </{ComponentName}>
+      </div>
+    </div>
+  );
+
+  const buttonStyle = {
+    padding: '0.5rem 1rem',
+    backgroundColor: '#3b82f6',
+    color: 'white',
+    border: 'none',
+    borderRadius: '0.375rem',
+    cursor: 'pointer'
+  };`,
+
+  progress: `  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prev) => (prev >= 100 ? 0 : prev + 1));
+    }, 100);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="App" style={{ padding: '40px', maxWidth: '800px', margin: '0 auto' }}>
+      <h1 style={{ marginBottom: '30px' }}>Progress Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Basic Progress</h2>
+        <{ComponentName} value={25} variant="primary" />
+        <{ComponentName} value={50} variant="success" />
+        <{ComponentName} value={75} variant="warning" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>With Percentage</h2>
+        <{ComponentName} value={60} variant="primary" showPercentage size="large" />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Animated Progress</h2>
+        <div style={{ marginBottom: '0.5rem' }}>Uploading: {progress}%</div>
+        <{ComponentName} value={progress} variant="info" striped animated />
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h2>Indeterminate (Loading)</h2>
+        <{ComponentName} indeterminate variant="primary" />
+      </div>
+    </div>
+  );`,
+
+  'todo-list': `  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <h1>Todo List</h1>
+      <{ComponentName} />
+    </div>
+  );`,
+};

package/src/utils/file-utils.js

@@ -0,0 +1,97 @@
+/**
+ * File system utilities
+ * Handles common file and directory operations with formatting
+ */
+
+import fs from "fs/promises";
+import path from "path";
+import { formatHtml, formatCss, formatJs } from "../format-utils.js";
+
+/**
+ * Creates a directory with all parent directories
+ * @param {string} dirPath - Directory path to create
+ * @returns {Promise<void>}
+ */
+export async function ensureDir(dirPath) {
+  await fs.mkdir(dirPath, { recursive: true });
+}
+
+/**
+ * Creates multiple directories
+ * @param {string[]} dirPaths - Array of directory paths to create
+ * @returns {Promise<void>}
+ */
+export async function ensureDirs(...dirPaths) {
+  await Promise.all(dirPaths.map((dir) => ensureDir(dir)));
+}
+
+/**
+ * Writes formatted HTML content to a file
+ * @param {string} filePath - Path to the HTML file
+ * @param {string} content - HTML content to write
+ * @returns {Promise<void>}
+ */
+export async function writeHtmlFile(filePath, content) {
+  const formatted = await formatHtml(content);
+  await fs.writeFile(filePath, formatted);
+}
+
+/**
+ * Writes formatted CSS content to a file
+ * @param {string} filePath - Path to the CSS file
+ * @param {string} content - CSS content to write
+ * @returns {Promise<void>}
+ */
+export async function writeCssFile(filePath, content) {
+  const formatted = await formatCss(content);
+  await fs.writeFile(filePath, formatted);
+}
+
+/**
+ * Writes formatted JavaScript content to a file
+ * @param {string} filePath - Path to the JS file
+ * @param {string} content - JavaScript content to write
+ * @returns {Promise<void>}
+ */
+export async function writeJsFile(filePath, content) {
+  const formatted = await formatJs(content);
+  await fs.writeFile(filePath, formatted);
+}
+
+/**
+ * Creates directory structure for component files
+ * @param {string} basePath - Base output directory path
+ * @returns {Promise<Object>} Object with outputDir, cssDir, jsDir paths
+ */
+export async function createComponentDirs(basePath) {
+  const outputDir = basePath;
+  const cssDir = path.join(basePath, "css");
+  const jsDir = path.join(basePath, "js");
+
+  await ensureDirs(outputDir, cssDir, jsDir);
+
+  return { outputDir, cssDir, jsDir };
+}
+
+/**
+ * Writes component files (HTML, CSS, JS) to their respective directories
+ * @param {Object} options - File writing options
+ * @param {string} options.outputDir - Output directory path
+ * @param {string} options.cssDir - CSS directory path
+ * @param {string} options.jsDir - JS directory path
+ * @param {string} options.htmlContent - HTML content
+ * @param {string} options.cssContent - CSS content
+ * @param {string} [options.jsContent] - Optional JS content
+ * @returns {Promise<void>}
+ */
+export async function writeComponentFiles(options) {
+  const { outputDir, cssDir, jsDir, htmlContent, cssContent, jsContent } =
+    options;
+
+  await writeHtmlFile(path.join(outputDir, "index.html"), htmlContent);
+  await writeCssFile(path.join(cssDir, "style.css"), cssContent);
+
+  if (jsContent) {
+    await writeJsFile(path.join(jsDir, "script.js"), jsContent);
+  }
+}

package/src/utils/path-utils.js

@@ -0,0 +1,32 @@
+/**
+ * Path utilities for ES Modules
+ * Provides __dirname functionality in ES Modules environment
+ */
+
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+/**
+ * Gets the directory name of a module (equivalent to __dirname in CommonJS)
+ * @param {string} importMetaUrl - import.meta.url from the calling module
+ * @returns {string} Directory path of the module
+ * @example
+ * import { getDirname } from './utils/path-utils.js';
+ * const __dirname = getDirname(import.meta.url);
+ */
+export function getDirname(importMetaUrl) {
+  const __filename = fileURLToPath(importMetaUrl);
+  return dirname(__filename);
+}
+
+/**
+ * Gets the file path of a module (equivalent to __filename in CommonJS)
+ * @param {string} importMetaUrl - import.meta.url from the calling module
+ * @returns {string} File path of the module
+ * @example
+ * import { getFilename } from './utils/path-utils.js';
+ * const __filename = getFilename(import.meta.url);
+ */
+export function getFilename(importMetaUrl) {
+  return fileURLToPath(importMetaUrl);
+}

package/src/utils/string-utils.js

@@ -0,0 +1,51 @@
+/**
+ * String manipulation utilities
+ * Helper functions for common string operations
+ */
+
+/**
+ * Convert a string to a valid HTML/CSS ID
+ * Converts to lowercase and replaces spaces with hyphens
+ * @param {string} text - Text to convert
+ * @returns {string} Valid ID string (e.g., "My Item" -> "my-item")
+ */
+export function textToId(text) {
+  return text.toLowerCase().replace(/\s+/g, "-");
+}
+
+/**
+ * Sanitize a string for use as a filename
+ * Removes invalid characters and trims whitespace
+ * @param {string} filename - Filename to sanitize
+ * @returns {string} Sanitized filename
+ */
+export function sanitizeForFilename(filename) {
+  return filename.replace(/[<>:"|?*]/g, "").trim();
+}
+
+/**
+ * Parse comma-separated list into array
+ * Trims whitespace and filters empty items
+ * @param {string} input - Comma-separated string
+ * @returns {string[]} Array of trimmed non-empty strings
+ */
+export function parseCommaSeparated(input) {
+  return input
+    .split(",")
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0);
+}
+
+/**
+ * Parse key:value pairs from comma-separated string
+ * @param {string} input - Comma-separated "key:value" pairs
+ * @returns {Array<{key: string, value: string}>} Array of parsed pairs
+ */
+export function parseKeyValuePairs(input) {
+  return parseCommaSeparated(input)
+    .map((pair) => {
+      const [key, value] = pair.split(":").map((s) => s.trim());
+      return key && value ? { key, value } : null;
+    })
+    .filter(Boolean);
+}

package/src/utils/template-loader.js

@@ -0,0 +1,91 @@
+/**
+ * Template loader utilities
+ * Centralized functions for loading template files from the templates directory
+ */
+
+import fs from "fs/promises";
+import path from "path";
+import { getDirname } from "./path-utils.js";
+
+const __dirname = getDirname(import.meta.url);
+
+/**
+ * Get the path to a template directory
+ * @param {string} component - Component name
+ * @returns {string} Absolute path to template directory
+ */
+export function getTemplatePath(component) {
+  return path.join(__dirname, "..", "..", "templates", component);
+}
+
+/**
+ * Read a template file from the templates directory
+ * @param {string} component - Component name
+ * @param {string} filename - File to read (e.g., "index.html", "style.css", "script.js")
+ * @returns {Promise<string>} File content
+ */
+export async function readTemplateFile(component, filename) {
+  const templatePath = getTemplatePath(component);
+  return await fs.readFile(path.join(templatePath, filename), "utf-8");
+}
+
+/**
+ * Read template HTML file
+ * @param {string} component - Component name
+ * @returns {Promise<string>} HTML content
+ */
+export async function readTemplateHtml(component) {
+  return await readTemplateFile(component, "index.html");
+}
+
+/**
+ * Read template CSS file
+ * Tries css/style.css first, falls back to style.css
+ * @param {string} component - Component name
+ * @returns {Promise<string>} CSS content
+ */
+export async function readTemplateCss(component) {
+  const templatePath = getTemplatePath(component);
+
+  try {
+    return await fs.readFile(
+      path.join(templatePath, "css", "style.css"),
+      "utf-8"
+    );
+  } catch {
+    return await fs.readFile(path.join(templatePath, "style.css"), "utf-8");
+  }
+}
+
+/**
+ * Read template JavaScript file
+ * Tries js/script.js first, falls back to script.js, returns null if not found
+ * @param {string} component - Component name
+ * @returns {Promise<string|null>} JavaScript content or null if not found
+ */
+export async function readTemplateJs(component) {
+  const templatePath = getTemplatePath(component);
+
+  try {
+    return await fs.readFile(
+      path.join(templatePath, "js", "script.js"),
+      "utf-8"
+    );
+  } catch {
+    try {
+      return await fs.readFile(path.join(templatePath, "script.js"), "utf-8");
+    } catch {
+      return null; // No JavaScript file for this component
+    }
+  }
+}
+
+/**
+ * Check if a template JavaScript file exists
+ * @param {string} component - Component name
+ * @returns {Promise<boolean>} True if JS file exists
+ */
+export async function hasTemplateJs(component) {
+  const js = await readTemplateJs(component);
+  return js !== null;
+}