sliceit/src/createComponent.js

A CLI tool to generate React components with custom templates (JS, JSX, TSX, CSS, SCSS, Styled Components)

import fs from "fs";
import path from "path";
import chalk from "chalk";
import { generateComponentTemplate } from "./templates/generateComponentTemplate.js";
import { generateStyleTemplate } from "./templates/generateStyleTemplate.js";
import { generateTestTemplate } from "./templates/generateTestTemplate.js";

const createComponent = (name, { withTest = false, template = "js", style = "css" }) => {
  const componentDir = path.join(process.cwd(), name);

  if (fs.existsSync(componentDir)) {
    console.log(chalk.red(`Component ${name} already exists.`));
    return;
  }

  fs.mkdirSync(componentDir, { recursive: true });

  // 1. Component File
  const ext = template === "tsx" ? "tsx" : "jsx";
  const componentFile = path.join(componentDir, `${name}.${ext}`);
  const componentCode = generateComponentTemplate(name, style, ext);
  fs.writeFileSync(componentFile, componentCode);
  console.log(chalk.green(`✅ Created ${name}.${ext}`));

  // 2. Style File
  if (style === "css" || style === "scss" || style === "styled") {
    const styleExt = style === "styled" ? "styled.js" : style;
    const styleFile = path.join(componentDir, `${name}.${styleExt}`);
    const styleCode = generateStyleTemplate(name, style);
    fs.writeFileSync(styleFile, styleCode);
    console.log(chalk.green(`🎨 Created ${name}.${styleExt}`));
  }

  // 3. Test File
  if (withTest) {
    const testDir = path.join(componentDir, "__tests__");
    fs.mkdirSync(testDir, { recursive: true });
    const testFile = path.join(testDir, `${name}.test.${ext}`);
    const testCode = generateTestTemplate(name);
    fs.writeFileSync(testFile, testCode);
    console.log(chalk.green(`🧪 Test file created.`));
  }

  console.log(chalk.blue(`🚀 Component ${name} generated successfully.`));
};

export default createComponent;