@tioelvis/next-template 2.4.8 → 3.0.0

package/README.md

@@ -1,42 +1,42 @@
-# UI Project Generator
-
-A **command-line tool** to scaffold a modern **Next.js + TailwindCSS** project with optional prebuilt UI components and hooks — inspired by [shadcn/ui](https://ui.shadcn.com/).
-
-> ⚠️ This tool does **not** aim to replace or take credit for [shadcn/ui]. It is simply a utility for convenience and faster setup in personal and internal projects. All UI components are sourced directly from shadcn.
-
----
-
-## 🔌 React Query Included
-
-React Query ([`@tanstack/react-query`](https://tanstack.com/query/latest)) is pre-configured for efficient and scalable data fetching:
-
-- ✅ Includes a `QueryClient` setup in `src/providers/query-provider.tsx`
-- ✅ Wraps the application with `QueryClientProvider` (already wired in your layout)
-- ✅ Enables usage of `useQuery`, `useMutation`, and other React Query hooks out of the box
-
-## ✨ Features
-
-- 🔧 Choose a **project name** and **package manager** (`npm` or `pnpm`)
-- 🎨 Select UI components to include (e.g., Accordion, Alert, Button)
-- ⚡ Automatically sets up:
-  - A **Next.js + TailwindCSS** project
-  - Preselected **UI components** and **hooks**
-  - Project structure under `src/` (with `components/ui`, `hooks`, `lib`, etc.)
-  - **React Query** integration with [`@tanstack/react-query`](https://tanstack.com/query/latest)
-  - All required dependencies and devDependencies
-
----
-
-## 🛠️ Usage
-
-Using npm:
-
-```bash
-npx @tioelvis/next-template
-```
-
-Using pnpm:
-
-```bash
-pnpx @tioelvis/next-template
-```
+# UI Project Generator
+
+A **command-line tool** to scaffold a modern **Next.js + TailwindCSS** project with optional prebuilt UI components and hooks — inspired by [shadcn/ui](https://ui.shadcn.com/).
+
+> ⚠️ This tool does **not** aim to replace or take credit for [shadcn/ui]. It is simply a utility for convenience and faster setup in personal and internal projects. All UI components are sourced directly from shadcn.
+
+---
+
+## 🔌 React Query Included
+
+React Query ([`@tanstack/react-query`](https://tanstack.com/query/latest)) is pre-configured for efficient and scalable data fetching:
+
+- ✅ Includes a `QueryClient` setup in `src/providers/query-provider.tsx`
+- ✅ Wraps the application with `QueryClientProvider` (already wired in your layout)
+- ✅ Enables usage of `useQuery`, `useMutation`, and other React Query hooks out of the box
+
+## ✨ Features
+
+- 🔧 Choose a **project name** and **package manager** (`npm` or `pnpm`)
+- 🎨 Select UI components to include (e.g., Accordion, Alert, Button)
+- ⚡ Automatically sets up:
+  - A **Next.js + TailwindCSS** project
+  - Preselected **UI components** and **hooks**
+  - Project structure under `src/` (with `components/ui`, `hooks`, `lib`, etc.)
+  - **React Query** integration with [`@tanstack/react-query`](https://tanstack.com/query/latest)
+  - All required dependencies and devDependencies
+
+---
+
+## 🛠️ Usage
+
+Using npm:
+
+```bash
+npx @tioelvis/next-template
+```
+
+Using pnpm:
+
+```bash
+pnpx @tioelvis/next-template
+```

package/package.json

@@ -1,92 +1,44 @@
-{
-  "name": "@tioelvis/next-template",
-  "version": "2.4.8",
-  "description": "CLI to scaffold a Next.js + Tailwind project using shadcn/ui components",
-  "type": "module",
-  "bin": {
-    "next-template": "./src/main.js"
-  },
-  "keywords": [
-    "cli",
-    "nextjs",
-    "shadcn",
-    "tailwind",
-    "ui",
-    "project-generator",
-    "scaffolding"
-  ],
-  "author": {
-    "name": "Ti0Elvis",
-    "email": "elvis.veramijares@gmail.com"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Ti0Elvis/next-template"
-  },
-  "dependencies": {
-    "chalk": "^5.4.1",
-    "prompts": "^2.4.2"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3.3.1",
-    "@hookform/resolvers": "^5.2.0",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tailwindcss/postcss": "^4.1.11",
-    "@tanstack/react-query": "^5.83.0",
-    "@types/node": "^24.1.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "axios": "^1.11.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "cookies-next": "^6.1.0",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
-    "eslint": "^9.32.0",
-    "eslint-config-next": "^15.4.4",
-    "input-otp": "^1.4.2",
-    "lucide-react": "^0.532.0",
-    "next": "^15.4.4",
-    "next-themes": "^0.4.6",
-    "react": "^19.1.0",
-    "react-day-picker": "^9.8.1",
-    "react-dom": "^19.1.0",
-    "react-hook-form": "^7.61.1",
-    "react-resizable-panels": "^3.0.3",
-    "recharts": "^2.15.4",
-    "sonner": "^2.0.6",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.11",
-    "tw-animate-css": "^1.3.6",
-    "typescript": "^5.8.3",
-    "vaul": "^1.1.2",
-    "zod": "^4.0.13"
-  }
-}
+{
+  "name": "@tioelvis/next-template",
+  "version": "3.0.0",
+  "description": "Interactive CLI to scaffold a Next.js project with customizable presets and configurations.",
+  "type": "module",
+  "bin": {
+    "next-template": "./src/main.js"
+  },
+  "keywords": [
+    "cli",
+    "nextjs",
+    "ui",
+    "scaffolding"
+  ],
+  "author": {
+    "name": "TioElvis",
+    "email": "elvis.veramijares@gmail.com"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TioElvis/next-template"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "ora": "^9.0.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tanstack/react-query": "^5.90.12",
+    "@types/node": "^25.0.3",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "^16.1.0",
+    "next": "^16.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  }
+}

package/src/actions/configure-package-json.js

@@ -0,0 +1,32 @@
+import ora from "ora";
+import fs from "node:fs";
+import path from "node:path";
+import { context } from "../constants.js";
+
+export function configurePackageJSON() {
+  const spinner = ora("Configuring package.json...").start();
+
+  const packageJSON = {
+    name: context.projectName,
+    version: "1.0.0",
+    private: true,
+    scripts: {
+      dev: "next dev",
+      build: "next build",
+      start: "next start",
+      lint: "next lint",
+    },
+  };
+
+  const packageJSONPath = path.join(context.dest, "package.json");
+
+  try {
+    fs.writeFileSync(packageJSONPath, JSON.stringify(packageJSON, null, 2));
+    spinner.succeed("package.json configured successfully.");
+  } catch (error) {
+    spinner.fail("Failed to configure package.json.");
+    throw new Exception(`Could not configure package.json: ${error.message}`, {
+      deleteDest: true,
+    });
+  }
+}

package/src/actions/init-project.js

@@ -0,0 +1,40 @@
+import ora from "ora";
+import fs from "node:fs";
+import { Exception } from "../lib/exception.js";
+import { context, TEMPLATE_FOLDER_PATH } from "../constants.js";
+
+function copyTemplateFiles() {
+  const spinner = ora("Copying template files to project folder...").start();
+
+  try {
+    fs.cpSync(TEMPLATE_FOLDER_PATH, context.dest, { recursive: true });
+    spinner.succeed("Template files copied successfully.");
+  } catch (error) {
+    spinner.fail("Failed to copy template files.");
+    throw new Exception(`Could not copy template files: ${error.message}`, {
+      deleteDest: true,
+    });
+  }
+}
+
+export function initProject() {
+  const spinner = ora(`Creating "${context.projectName}" folder... `).start();
+
+  if (fs.existsSync(context.dest)) {
+    spinner.fail("Failed to create project folder.");
+
+    throw new Exception(
+      `Directory ${context.projectName} already exists. Choose a different project name.`
+    );
+  }
+
+  try {
+    fs.mkdirSync(context.dest, { recursive: true });
+    spinner.succeed(`Created "${context.projectName}" folder.`);
+  } catch (error) {
+    spinner.fail("Failed to create project folder.");
+    throw new Exception(`Could not create project folder: ${error.message}`);
+  }
+
+  copyTemplateFiles();
+}

package/src/actions/init-shadcn-ui.js

@@ -0,0 +1,48 @@
+import ora from "ora";
+import { context } from "../constants.js";
+import { runCommand } from "../lib/utils.js";
+import { Exception } from "../lib/exception.js";
+
+async function installComponents(components) {
+  const spinner = ora("Installing shadcn/ui components...").start();
+
+  try {
+    for (const component of components) {
+      await runCommand(
+        "npx",
+        ["shadcn@latest", "add", component],
+        context.dest
+      );
+    }
+
+    spinner.succeed("shadcn/ui components installed.");
+  } catch (error) {
+    spinner.fail("Failed to install shadcn/ui components.");
+    throw new Exception("Failed to install shadcn/ui components.", {
+      deleteDest: false,
+    });
+  }
+}
+
+export async function initShadcnUI(components) {
+  const spinner = ora("Installing shadcn/ui...").start();
+
+  try {
+    await runCommand(
+      "npx",
+      ["shadcn@latest", "init", "--base-color", "neutral"],
+      context.dest
+    );
+
+    spinner.succeed("shadcn/ui installed");
+  } catch (error) {
+    spinner.fail("Failed to install shadcn/ui.");
+    throw new Exception("Failed to install shadcn/ui.", {
+      deleteDest: false,
+    });
+  }
+
+  if (components.length > 0) {
+    await installComponents(components);
+  }
+}

package/src/actions/init-theme.js

@@ -0,0 +1,28 @@
+import ora from "ora";
+import fs from "node:fs";
+import path from "node:path";
+import { Exception } from "../lib/exception.js";
+import { context, THEME_FOLDER_PATH } from "../constants.js";
+
+export function initThemeColor(themeColor) {
+  const spinner = ora("Setting up theme color...").start();
+
+  const themeFilePath = path.join(THEME_FOLDER_PATH, `${themeColor}.css`);
+
+  try {
+    if (!themeColor || !fs.existsSync(themeFilePath)) {
+      throw new Error("Invalid theme color selected.");
+    }
+
+    fs.copyFileSync(
+      themeFilePath,
+      path.join(context.dest, "src/app/globals.css")
+    );
+    spinner.succeed("Theme color set up successfully.");
+  } catch (error) {
+    spinner.fail("Failed to set up theme color.");
+    throw new Exception(`Could not set up theme color: ${error.message}`, {
+      deleteDest: true,
+    });
+  }
+}

package/src/actions/init-tioelvis-components.js

@@ -0,0 +1,42 @@
+import ora from "ora";
+import fs from "node:fs";
+import path from "node:path";
+import { Exception } from "../lib/exception.js";
+import { context, TIOELVIS_COMPONENTS_FOLDER_PATH } from "../constants.js";
+
+export function initTioElvisComponents(components) {
+  const spinner = ora("Setting up TioElvis components...").start();
+
+  try {
+    if (!components || components.length === 0) {
+      spinner.info("No TioElvis components selected. Skipping...");
+      return;
+    }
+
+    components.forEach((component) => {
+      const componentFilePath = path.join(
+        TIOELVIS_COMPONENTS_FOLDER_PATH,
+        `${component}.tsx`
+      );
+
+      if (!fs.existsSync(componentFilePath)) {
+        throw new Error(`Component file for ${component} does not exist.`);
+      }
+
+      fs.copyFileSync(
+        componentFilePath,
+        path.join(context.dest, "src/components", `${component}.tsx`)
+      );
+    });
+
+    spinner.succeed("TioElvis components set up successfully.");
+  } catch (error) {
+    spinner.fail("Failed to set up TioElvis components.");
+    throw new Exception(
+      `Could not set up TioElvis components: ${error.message}`,
+      {
+        deleteDest: true,
+      }
+    );
+  }
+}

package/src/actions/install-main-packages.js

@@ -0,0 +1,51 @@
+import ora from "ora";
+import {
+  context,
+  MAIN_DEPENDENCIES,
+  MAIN_DEV_DEPENDENCIES,
+} from "../constants.js";
+import { runCommand } from "../lib/utils.js";
+import { Exception } from "../lib/exception.js";
+
+export async function installMainPackages() {
+  const spinner = ora("Installing main packages...").start();
+
+  try {
+    if (context.packageManager === "npm") {
+      await runCommand("npm", ["install", ...MAIN_DEPENDENCIES], context.dest);
+      await runCommand(
+        "npm",
+        ["install", "--save-dev", ...MAIN_DEV_DEPENDENCIES],
+        context.dest
+      );
+    }
+
+    if (context.packageManager === "yarn") {
+      await runCommand("yarn", ["add", ...MAIN_DEPENDENCIES], context.dest);
+      await runCommand(
+        "yarn",
+        ["add", "--dev", ...MAIN_DEV_DEPENDENCIES],
+        context.dest
+      );
+    }
+
+    if (context.packageManager === "pnpm") {
+      await runCommand("pnpm", ["add", ...MAIN_DEPENDENCIES], context.dest);
+      await runCommand(
+        "pnpm",
+        ["add", "--save-dev", ...MAIN_DEV_DEPENDENCIES],
+        context.dest
+      );
+    }
+
+    spinner.succeed("Main packages installed successfully.");
+  } catch (error) {
+    spinner.fail("Failed to install main packages.");
+    throw new Exception(
+      `Could not install main packages: ${error?.message ?? error}`,
+      {
+        deleteDest: true,
+      }
+    );
+  }
+}