create-template-html-css 2.0.3 → 2.1.0

package/src/react-templates.js

@@ -0,0 +1,350 @@
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
+// Dependencies versions
+const REACT_VERSION = "^18.2.0";
+const VITE_VERSION = "^5.0.0";
+const VITE_REACT_PLUGIN_VERSION = "^4.2.0";
+
+// ============================================================================
+// TEMPLATE HELPERS
+// ============================================================================
+
+/**
+ * Create App.jsx template wrapper
+ * @param {string} componentName - Component name (PascalCase)
+ * @param {string} additionalImports - Additional imports from React (e.g., "useState, useEffect")
+ * @param {string} content - JSX content inside App div
+ * @returns {string} Complete App.jsx code
+ */
+function createAppTemplate(componentName, additionalImports = '', content) {
+  const reactImports = additionalImports 
+    ? `import React, { ${additionalImports} } from 'react';`
+    : `import React from 'react';`;
+    
+  return `${reactImports}
+import ${componentName} from './components/${componentName}/${componentName}';
+import './components/${componentName}/${componentName}.css';
+
+function App() {
+${content}
+}
+
+export default App;`;
+}
+
+// ============================================================================
+// APP.JSX GENERATOR
+// ============================================================================
+
+/**
+ * Generate App.jsx content
+ */
+function generateAppJsx(componentName, componentKebab) {
+  // Component-specific content (inside App function)
+  const componentContent = {
+    button: `  const handleClick = () => {
+    alert('Button clicked!');
+  };
+
+  return (
+    <div className="App" style={{ 
+      padding: '40px',
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      backgroundColor: '#f5f5f5',
+      minHeight: '100vh'
+    }}>
+      <h1 style={{ marginBottom: '30px', color: '#333' }}>${componentName} Component Examples</h1>
+      
+      <div style={{ marginBottom: '30px' }}>
+        <h3 style={{ marginBottom: '15px', color: '#666' }}>Variants:</h3>
+        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+          <${componentName} variant="primary" onClick={handleClick}>Primary</${componentName}>
+          <${componentName} variant="secondary" onClick={handleClick}>Secondary</${componentName}>
+          <${componentName} variant="success" onClick={handleClick}>Success</${componentName}>
+          <${componentName} variant="danger" onClick={handleClick}>Danger</${componentName}>
+          <${componentName} variant="outline" onClick={handleClick}>Outline</${componentName}>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h3 style={{ marginBottom: '15px', color: '#666' }}>Sizes:</h3>
+        <div style={{ display: 'flex', gap: '15px', alignItems: 'center', flexWrap: 'wrap' }}>
+          <${componentName} size="small" onClick={handleClick}>Small</${componentName}>
+          <${componentName} size="medium" onClick={handleClick}>Medium</${componentName}>
+          <${componentName} size="large" onClick={handleClick}>Large</${componentName}>
+        </div>
+      </div>
+
+      <div style={{ marginBottom: '30px' }}>
+        <h3 style={{ marginBottom: '15px', color: '#666' }}>States:</h3>
+        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
+          <${componentName} onClick={handleClick}>Normal</${componentName}>
+          <${componentName} disabled>Disabled</${componentName}>
+        </div>
+      </div>
+    </div>
+  );`,
+    
+    card: `  return (
+    <div className="App" style={{ padding: '40px', backgroundColor: '#f5f5f5', minHeight: '100vh' }}>
+      <h1 style={{ marginBottom: '30px' }}>${componentName} Component</h1>
+      <${componentName}
+        title="Example Card"
+        description="This is an example card component with a beautiful design"
+        image="https://via.placeholder.com/400x200"
+      />
+    </div>
+  );`,
+    
+    counter: `  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <h1>Counter Component</h1>
+      <${componentName} 
+        initialValue={0}
+        min={0}
+        max={100}
+        onChange={(value) => console.log('Count:', value)}
+      />
+    </div>
+  );`,
+    
+    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>
+  );`,
+    
+    "todo-list": `  return (
+    <div className="App" style={{ padding: '40px' }}>
+      <h1>Todo List</h1>
+      <${componentName} />
+    </div>
+  );`,
+  };
+
+  // Modal needs useState import
+  if (componentKebab === 'modal') {
+    const content = `  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>
+  );`;
+    return createAppTemplate(componentName, 'useState', content);
+  }
+
+  // Use component-specific content if available
+  const content = componentContent[componentKebab] || `  return (
+    <div className="App">
+      <${componentName} />
+    </div>
+  );`;
+
+  return createAppTemplate(componentName, '', content);
+}
+
+// ============================================================================
+// ENTRY POINT GENERATORS
+// ============================================================================
+
+/**
+ * Generate index.jsx content
+ */
+function generateIndexJs() {
+  return `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`;
+}
+
+/**
+ * Generate index.html content
+ */
+function generateIndexHtml(title) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.jsx"></script>
+</body>
+</html>
+`;
+}
+
+// ============================================================================
+// CONFIG FILE GENERATORS
+// ============================================================================
+
+/**
+ * Generate package.json content
+ */
+function generatePackageJson(name) {
+  return {
+    name: name,
+    version: "0.1.0",
+    type: "module",
+    private: true,
+    dependencies: {
+      react: REACT_VERSION,
+      "react-dom": REACT_VERSION,
+    },
+    devDependencies: {
+      "@vitejs/plugin-react": VITE_REACT_PLUGIN_VERSION,
+      vite: VITE_VERSION,
+    },
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+    },
+  };
+}
+
+/**
+ * Generate .gitignore content
+ */
+function generateGitignore() {
+  return `# Dependencies
+node_modules/
+
+# Production
+dist/
+build/
+
+# Development
+.DS_Store
+*.log
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+`;
+}
+
+/**
+ * Generate vite.config.js content
+ */
+function generateViteConfig() {
+  return `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
+`;
+}
+
+/**
+ * Generate README.md content
+ */
+function generateReadme(name, componentName) {
+  return `# ${name}
+
+React component project generated with create-template-html-css.
+
+## Component: ${componentName}
+
+### Installation
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### Development
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
+
+### Build
+
+\`\`\`bash
+npm run build
+\`\`\`
+
+Builds the app for production to the \`dist\` folder.
+
+### Preview Production Build
+
+\`\`\`bash
+npm run preview
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+${name}/
+├── src/
+│   ├── components/
+│   │   └── ${componentName}/
+│   │       ├── ${componentName}.jsx
+│   │       └── ${componentName}.css
+│   ├── App.jsx
+│   └── index.jsx
+├── index.html
+├── package.json
+└── README.md
+\`\`\`
+
+## Customization
+
+Feel free to modify the component files in \`src/components/${componentName}/\` to suit your needs.
+
+## License
+
+MIT
+`;
+}
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export {
+  generateAppJsx,
+  generateIndexJs,
+  generateIndexHtml,
+  generatePackageJson,
+  generateGitignore,
+  generateViteConfig,
+  generateReadme,
+};

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;
+}