sliceit/index.js

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

#!/usr/bin/env node
import { Command } from "commander";
import inquirer from "inquirer";
import createComponent from "./src/createComponent.js";
import { loadConfig } from "./src/loadConfig.js";
const program = new Command();
const config = JSON.parse(loadConfig()) ?? null;

program
  .command("create <componentName>")
  .description("Create a new React component")
  .option("--tsx", "Use TSX file")
  .option("--jsx", "Use JSX file")
  .option("--js", "Use JS file")
  .option("--css", "Use CSS file")
  .option("--scss", "Use SCSS file")
  .option("--styled", "Use styled-components")
  .option("--with-test", "Generate a test file")
  .action(async (componentName, options) => {
    const shouldPrompt =
      !options.tsx &&
      !options.jsx &&
      !options.js &&
      !options.css &&
      !options.scss &&
      !options.styled;

    let answers = {};
    if (shouldPrompt && !config) {
      answers = await inquirer.prompt([
        {
          type: "list",
          name: "template",
          message: "Choose file type:",
          choices: ["tsx", "jsx", "js"],
        },
        {
          type: "list",
          name: "style",
          message: "Choose styling method:",
          choices: ["css", "scss", "styled"],
        },
        {
          type: "confirm",
          name: "withTest",
          message: "Generate a test file?",
          default: false,
        },
      ]);
    }

    const getTemplate = () => {
      if (options.tsx) return "tsx";
      if (options.jsx) return "jsx";
      if (options.js) return "js";
      return config?.language || answers.template;
    };

    const getStyle = () => {
      if (options.css) return "css";
      if (options.scss) return "scss";
      if (options.styled) return "styled";
      return config?.style || answers.style;
    };

    const getWithTest = () => {
      if (typeof options.withTest === "boolean") return options.withTest;
      if (typeof config?.withTest === "boolean") return config.withTest;
      return answers.withTest;
    };

    const finalOptions = {
      template: getTemplate(),
      style: getStyle(),
      withTest: getWithTest(),
    };

    createComponent(componentName, finalOptions);
  });

program.parse(process.argv);