@tioelvis/next-template 1.0.8 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tioelvis/next-template",
-  "version": "1.0.8",
+  "version": "2.0.0",
   "description": "CLI to scaffold a Next.js + Tailwind project using shadcn/ui components",
   "type": "module",
   "bin": {

package/src/app/components/accordion.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": ["@radix-ui/react-accordion"],
+  "dev_dependence": [],
+  "hooks": [],
+  "supports": []
+}

package/src/app/components/alert.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": [],
+  "dev_dependence": [],
+  "hooks": [],
+  "supports": []
+}

package/src/constants.js

@@ -0,0 +1,51 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const TEMPLATE_PATH = path.join(__dirname, "template");
+const COMPONENTS_PATH = path.join(__dirname, "app", "components");
+const HOOKS_PATH = path.join(__dirname, "app", "hooks");
+
+const DEPENDENCIES = [
+  "@tanstack/react-query",
+  "axios",
+  "class-variance-authority",
+  "clsx",
+  "cookies-next",
+  "date-fns",
+  "lucide-react",
+  "next",
+  "next-auth",
+  "next-themes",
+  "react",
+  "react-dom",
+  "tailwind-merge",
+];
+
+const DEV_DEPENDENCIES = [
+  "@eslint/eslintrc",
+  "@tailwindcss/postcss",
+  "@types/node",
+  "@types/react",
+  "@types/react-dom",
+  "eslint",
+  "eslint-config-next",
+  "tailwindcss",
+  "tw-animate-css",
+  "typescript",
+];
+
+const COMPONENTS = ["accordion", "alert"];
+
+export {
+  __dirname,
+  __filename,
+  TEMPLATE_PATH,
+  COMPONENTS_PATH,
+  HOOKS_PATH,
+  DEPENDENCIES,
+  DEV_DEPENDENCIES,
+  COMPONENTS,
+};

package/src/main.js

@@ -1,113 +1,218 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
+
 import {
-  copy_components_files,
-  copy_hooks_files,
-  copy_template_files,
-  get_prompts,
-  run,
-} from "./lib/utils.js";
+  copy_components,
+  copy_template,
+  on_cancel,
+  run_command,
+} from "./utils.js";
 import fs from "node:fs";
 import chalk from "chalk";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { DEPENDENCIES, DEV_DEPENDENCIES } from "./lib/constants.js";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+import prompts from "prompts";
+import { COMPONENTS, DEPENDENCIES, DEV_DEPENDENCIES } from "./constants.js";
 
 // Manage Ctrl+C command
-process.on("SIGINT", () => {
-  console.log(chalk.yellow("\n👋 Exiting..."));
-  process.exit(0);
-});
+process.on("SIGINT", () => on_cancel());
+
+(async function () {
+  let DEST;
+  const CWD = path.resolve(process.cwd());
+
+  const { is_new_project } = await prompts(
+    {
+      type: "confirm",
+      initial: true,
+      name: "is_new_project",
+      message: "Is a new project?",
+    },
+    { onCancel: on_cancel }
+  );
+
+  if (is_new_project === true) {
+    try {
+      if (fs.existsSync(path.join(CWD, "next.config.ts")) === true) {
+        throw new Error("Config file already exists");
+      }
+
+      const responses = await prompts(
+        [
+          {
+            type: "text",
+            name: "project_name",
+            message: "What is your project named?",
+            validate: (e) => {
+              if (e === undefined || e.trim() === "") {
+                return chalk.red("⚠️ The name is required");
+              }
+
+              if (!/^[a-zA-Z0-9-_]+$/.test(e.trim())) {
+                return chalk.red(
+                  "⚠️ Use only letters, numbers, dashes, and underscores"
+                );
+              }
+
+              return true;
+            },
+          },
+          {
+            type: "select",
+            name: "package_manager",
+            message: "Which package manager would you want to use?",
+            choices: [
+              { title: "npm", value: "npm" },
+              { title: "pnpm", value: "pnpm" },
+            ],
+          },
+          {
+            type: "multiselect",
+            name: "components",
+            message: "Which components do you want to install?",
+            instructions: false,
+            choices: COMPONENTS.map((e) => {
+              return { title: e, value: e };
+            }),
+          },
+        ],
+        { onCancel: on_cancel }
+      );
+
+      const { project_name, package_manager, components } = responses;
+
+      // Creating folder and copying files
+      DEST = path.resolve(CWD, project_name);
+
+      if (fs.existsSync(DEST) === true) {
+        throw new Error("A folder with that name already exists");
+      }
+
+      console.log(chalk.blue("📁 Creating project..."));
+
+      fs.mkdirSync(DEST, { recursive: true });
+
+      copy_template(DEST);
+      await copy_components(DEST, components);
 
-async function main() {
-  let project_path = "";
+      // Initialize package.json
+      console.log(chalk.blue("📦 Initializing and configure package.json..."));
 
-  try {
-    const { project_name, package_manager, components } = await get_prompts();
+      const package_json = {
+        name: project_name,
+        version: "1.0.0",
+        private: true,
+        scripts: {
+          dev: "next dev --turbopack",
+          build: "next build",
+          start: "next start",
+          lint: "next lint",
+        },
+      };
 
-    // Creating folder and copying files
-    project_path = path.resolve(project_name);
+      const package_json_path = path.join(DEST, "package.json");
+
+      fs.writeFileSync(
+        package_json_path,
+        JSON.stringify(package_json, null, 2)
+      );
+
+      // Install dependencies
+      console.log(chalk.cyan("⬇️  Installing dependencies..."));
+
+      if (package_manager === "npm") {
+        run_command(`npm install ${DEPENDENCIES.join(" ")}`, DEST);
+        run_command(`npm install ${DEV_DEPENDENCIES.join(" ")} -D`, DEST);
+      }
+
+      if (package_manager === "pnpm") {
+        run_command(`pnpm add ${DEPENDENCIES.join(" ")}`, DEST);
+        run_command(`pnpm add ${DEV_DEPENDENCIES.join(" ")} -D`, DEST);
+      }
+
+      // Finish project
+      console.log(
+        chalk.yellow(
+          "📄 IMPORTANT: make sure to add your variable NEXT_PUBLIC_API in the .env file, e.g.: NEXT_PUBLIC_API=http://localhost:9000"
+        )
+      );
+
+      console.log(
+        chalk.green(`\n✅ Project ${project_name} created successfully! 🚀`)
+      );
+    } catch (error) {
+      console.error(chalk.red("❌ Internal error:"), error.message);
+
+      if (fs.existsSync(DEST) === true) {
+        fs.rmSync(DEST, { recursive: true, force: true });
+      }
 
-    if (fs.existsSync(project_path)) {
-      console.error(chalk.red("❌  A folder with that name already exists"));
       process.exit(1);
     }
+  }
+
+  if (is_new_project === false) {
+    let package_manager;
+
+    try {
+      if (fs.existsSync(path.join(CWD, "next.config.ts")) === false) {
+        throw new Error("Config file not exists");
+      }
 
-    console.log(
-      chalk.blue("📁 Creating project in:"),
-      chalk.bold(project_name)
-    );
-
-    fs.mkdirSync(project_path, { recursive: true });
-    const template_path = path.join(__dirname, "template");
-    const components_path = path.join(__dirname, "ui", "components");
-    const hooks_path = path.join(__dirname, "ui", "hooks");
-
-    copy_template_files(template_path, project_path);
-    copy_components_files(components_path, project_path, components);
-    copy_hooks_files(hooks_path, components_path, project_path, components);
-
-    // Initialize package.json
-    console.log(chalk.cyan("📦 Initializing and configure package.json..."));
-
-    const package_json = {
-      name: project_name,
-      version: "1.0.0",
-      private: true,
-      scripts: {
-        dev: "next dev --turbopack",
-        build: "next build",
-        start: "next start",
-        lint: "next lint",
-      },
-    };
-
-    const package_json_path = path.join(project_path, "package.json");
-    fs.writeFileSync(package_json_path, JSON.stringify(package_json, null, 2));
-
-    // Install dependencies
-    console.log(chalk.cyan("⬇️ Installing dependencies..."));
-
-    components.forEach((e) => {
-      const component_path = path.resolve(components_path, `${e}.json`);
-
-      if (fs.existsSync(component_path) === false) {
-        throw new Error(`Component ${e} not found`);
+      const responses = await prompts(
+        [
+          {
+            type: "multiselect",
+            name: "components",
+            message: "Which components do you want to install?",
+            instructions: false,
+            choices: COMPONENTS.map((e) => {
+              return { title: e, value: e };
+            }),
+          },
+        ],
+        { onCancel: on_cancel }
+      );
+
+      const { components } = responses;
+
+      // Set package manager
+      if (fs.existsSync(path.join(CWD, "package-lock.json")) === true) {
+        package_manager = "npm";
       }
 
-      const json = JSON.parse(fs.readFileSync(component_path, "utf-8"));
+      if (fs.existsSync(path.join(CWD, "pnpm-lock.yaml")) === true) {
+        package_manager = "pnpm";
+      }
 
-      json.forEach((e) => {
-        DEPENDENCIES.push(e);
-      });
-    });
+      if (package_manager === undefined) {
+        throw new Error("Not package_manager found");
+      }
 
-    if (package_manager === "npm") {
-      run(`npm install ${DEPENDENCIES.join(" ")}`, project_path);
-      run(`npm install ${DEV_DEPENDENCIES.join(" ")} -D`, project_path);
-    }
+      // Copying files
+      DEST = path.resolve(CWD);
 
-    if (package_manager === "pnpm") {
-      run(`pnpm add ${DEPENDENCIES.join(" ")}`, project_path);
-      run(`pnpm add ${DEV_DEPENDENCIES.join(" ")} -D`, project_path);
-    }
+      await copy_components(DEST, components);
 
-    console.log(chalk.green("\n✅ Project created successfully! 🚀"));
-
-    console.log(
-      chalk.yellow(
-        "📄 Make sure to add your API in the .env file, e.g.: API=http://localhost:9000"
-      )
-    );
-    process.exit(0);
-  } catch (error) {
-    console.error(chalk.red("❌ Internal error"), error.message);
-    if (fs.existsSync(project_path) === true) {
-      fs.rmSync(project_path, { recursive: true, force: true });
+      // Install dependencies
+      console.log(chalk.cyan("⬇️  Installing dependencies..."));
+
+      if (package_manager === "npm") {
+        run_command(`npm install ${DEPENDENCIES.join(" ")}`, DEST);
+        run_command(`npm install ${DEV_DEPENDENCIES.join(" ")} -D`, DEST);
+      }
+
+      if (package_manager === "pnpm") {
+        run_command(`pnpm add ${DEPENDENCIES.join(" ")}`, DEST);
+        run_command(`pnpm add ${DEV_DEPENDENCIES.join(" ")} -D`, DEST);
+      }
+
+      // Finish project
+      console.log(chalk.green("\n✅ Components add successfully!"));
+    } catch (error) {
+      console.error(chalk.red("❌ Internal error:"), error.message);
+
+      process.exit(1);
     }
-    process.exit(1);
   }
-}
 
-main();
+  process.exit(0);
+})();

package/src/utils.js

@@ -0,0 +1,113 @@
+import {
+  COMPONENTS_PATH,
+  DEPENDENCIES,
+  DEV_DEPENDENCIES,
+  HOOKS_PATH,
+  TEMPLATE_PATH,
+} from "./constants.js";
+import fs from "node:fs";
+import chalk from "chalk";
+import path from "node:path";
+import prompts from "prompts";
+import { execSync } from "node:child_process";
+
+function on_cancel() {
+  console.log(chalk.yellow("\n👋 Exiting..."));
+  process.exit(0);
+}
+
+function run_command(cmd, cwd) {
+  try {
+    execSync(cmd, { cwd, stdio: "inherit" });
+  } catch (error) {
+    throw error;
+  }
+}
+
+function copy_template(dest) {
+  try {
+    fs.cpSync(TEMPLATE_PATH, dest, { recursive: true });
+  } catch (error) {
+    throw error;
+  }
+}
+
+async function copy_components(DEST, components) {
+  try {
+    for (const component of components) {
+      let replace = false;
+
+      const component_path = path.resolve(COMPONENTS_PATH, `${component}.tsx`);
+      const dest_folder = path.resolve(DEST, "src", "components", "ui");
+      const final_dest = path.join(dest_folder, `${component}.tsx`);
+
+      if (fs.existsSync(component_path) === false) {
+        throw new Error(`Component ${component} not found`);
+      }
+
+      if (fs.existsSync(dest_folder) === false) {
+        fs.mkdirSync(dest_folder, { recursive: true });
+      }
+
+      if (fs.existsSync(final_dest) === true) {
+        const response = await prompts(
+          [
+            {
+              type: "confirm",
+              name: "replace",
+              message: `Do you want to replace ${component}.tsx?`,
+            },
+          ],
+          { onCancel: on_cancel }
+        );
+
+        replace = response.replace;
+      }
+
+      const json_path = path.resolve(COMPONENTS_PATH, `${component}.json`);
+
+      if (fs.existsSync(json_path) === false) {
+        throw new Error(`Json file of ${component} not found`);
+      }
+
+      const json = JSON.parse(fs.readFileSync(json_path, "utf8"));
+
+      if (fs.existsSync(final_dest) === false || replace === true) {
+        console.log(chalk.gray(`📄 Add ${component}.tsx file`));
+        fs.copyFileSync(component_path, final_dest);
+
+        for (const hook of json.hooks) {
+          const hook_path = path.resolve(HOOKS_PATH, `${hook}.ts`);
+          const dest_folder = path.resolve(DEST, "src", "hooks");
+          const final_dest = path.join(dest_folder, `${hook}.ts`);
+
+          if (fs.existsSync(hook_path) === false) {
+            throw new Error(`Hook ${hook} not found for component ${e}`);
+          }
+
+          if (fs.existsSync(dest_folder) === false) {
+            fs.mkdirSync(dest_folder, { recursive: true });
+          }
+
+          fs.copyFileSync(hook_path, final_dest);
+        }
+      }
+
+      for (const support of json.supports) {
+        await copy_components(DEST, [support]);
+      }
+
+      for (const dependence of json.dependencies) {
+        DEPENDENCIES.push(dependence);
+      }
+
+      for (const dev_dependence of json.dev_dependence) {
+        DEV_DEPENDENCIES.push(dev_dependence);
+      }
+    }
+  } catch (error) {
+    throw error;
+  }
+}
+
+export { on_cancel, run_command, copy_template, copy_components };

package/src/lib/constants.js

@@ -1,28 +0,0 @@
-export const DEPENDENCIES = [
-  "@tanstack/react-query",
-  "axios",
-  "class-variance-authority",
-  "clsx",
-  "cookies-next",
-  "date-fns",
-  "lucide-react",
-  "next",
-  "next-auth",
-  "next-themes",
-  "react",
-  "react-dom",
-  "tailwind-merge",
-];
-
-export const DEV_DEPENDENCIES = [
-  "@eslint/eslintrc",
-  "@tailwindcss/postcss",
-  "@types/node",
-  "@types/react",
-  "@types/react-dom",
-  "eslint",
-  "eslint-config-next",
-  "tailwindcss",
-  "tw-animate-css",
-  "typescript",
-];

package/src/lib/utils.js

@@ -1,144 +0,0 @@
-import fs from "node:fs";
-import chalk from "chalk";
-import path from "node:path";
-import prompts from "prompts";
-import { execSync } from "node:child_process";
-
-export async function get_prompts() {
-  const responses = await prompts([
-    {
-      type: "text",
-      name: "project_name",
-      message: "What is your project named?",
-      validate: (e) => {
-        if (e === undefined || e.trim() === "") {
-          return chalk.red("⚠️ The name is required");
-        }
-
-        if (!/^[a-zA-Z0-9-_]+$/.test(e.trim())) {
-          return chalk.red(
-            "⚠️ Use only letters, numbers, dashes, and underscores."
-          );
-        }
-
-        return true;
-      },
-    },
-    {
-      type: "select",
-      name: "package_manager",
-      message: "Which package manager would you want to use?",
-      choices: [
-        { title: "npm", value: "npm" },
-        { title: "pnpm", value: "pnpm" },
-      ],
-    },
-    {
-      type: "multiselect",
-      name: "components",
-      message: "Which components do you want to install?",
-      instructions: false,
-      choices: [
-        { title: "Accordion", value: "accordion" },
-        { title: "Alert", value: "alert" },
-      ],
-    },
-    {
-      onCancel: () => {
-        console.log(chalk.yellow("\n👋 Exiting..."));
-        process.exit(0);
-      },
-    },
-  ]);
-
-  return responses;
-}
-
-export function copy_template_files(src, project_path) {
-  try {
-    const entries = fs.readdirSync(src, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const src_path = path.join(src, entry.name);
-      const dest_path = path.join(project_path, entry.name);
-
-      if (entry.isDirectory()) {
-        fs.mkdirSync(dest_path, { recursive: true });
-        copy_template_files(src_path, dest_path);
-      } else {
-        fs.copyFileSync(src_path, dest_path);
-      }
-    }
-  } catch (error) {
-    throw error;
-  }
-}
-
-export function copy_components_files(src, project_path, components) {
-  try {
-    components.forEach((e) => {
-      const component_path = path.resolve(src, `${e}.tsx`);
-      const dest_path = path.resolve(project_path, "src", "components", "ui");
-
-      if (fs.existsSync(component_path) === false) {
-        throw new Error(`Component ${e} not found`);
-      }
-
-      if (fs.existsSync(dest_path) === false) {
-        fs.mkdirSync(dest_path, { recursive: true });
-      }
-
-      fs.copyFileSync(component_path, path.join(dest_path, `${e}.tsx`));
-    });
-  } catch (error) {
-    throw error;
-  }
-}
-
-export function copy_hooks_files(
-  src,
-  components_path,
-  project_path,
-  components
-) {
-  const map = {};
-
-  try {
-    components.forEach((e) => {
-      const hook = map[e];
-      const component_path = path.resolve(components_path, `${e}.tsx`);
-
-      if (fs.existsSync(component_path) === false) {
-        throw new Error(`Component ${e} not found`);
-      }
-
-      if (hook === undefined) {
-        console.warn(`No hook mapping found for component ${e}, skipping.`);
-        return;
-      }
-
-      const hook_path = path.resolve(src, `${hook}.ts`);
-      const dest_path = path.resolve(project_path, "src", "hooks");
-
-      if (fs.existsSync(hook_path) === false) {
-        throw new Error(`Hook ${hook} not found for component ${e}`);
-      }
-
-      if (fs.existsSync(dest_path) === false) {
-        fs.mkdirSync(dest_path, { recursive: true });
-      }
-
-      fs.copyFileSync(hook_path, path.join(dest_path, `${hook}.ts`));
-    });
-  } catch (error) {
-    throw error;
-  }
-}
-
-export function run(cmd, cwd) {
-  try {
-    execSync(cmd, { cwd, stdio: "inherit" });
-  } catch (error) {
-    throw error;
-  }
-}

package/src/ui/components/accordion.json

@@ -1 +0,0 @@
-["@radix-ui/react-accordion"]

package/src/ui/components/alert.json

@@ -1 +0,0 @@
-[]