create-template-html-css 2.0.4 → 2.1.0

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,208 @@
+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 = [
+  "button",
+  "card",
+  "counter",
+  "form",
+  "modal",
+  "todo-list",
+];
+
+// ============================================================================
+// 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,
+  } = 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
+  const appContent = generateAppJsx(componentName, component);
+  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
+  const viteConfig = generateViteConfig();
+  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 };