@tioelvis/next-ui 1.0.10

package/README.md

@@ -0,0 +1,3 @@
+# Interactive CLI UI Project Generator
+
+This project is a command-line tool to scaffold a modern Next.js + Typescript + TailwindCSS project

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@tioelvis/next-ui",
+  "version": "1.0.10",
+  "description": "Interactive CLI to scaffold a Next.js project with customizable presets and configurations.",
+  "type": "module",
+  "bin": {
+    "next-ui": "./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-ui"
+  },
+  "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 fs from "node:fs";
+import path from "node:path";
+
+import chalk from "chalk";
+
+import { context } from "../main.js";
+import { Exception } from "../lib/exception.js";
+
+export function configurePackageJson() {
+  console.log(chalk.white("\nConfiguring package.json..."));
+
+  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));
+    console.log(chalk.green("package.json configured successfully."));
+  } catch (error) {
+    throw new Exception("Failed to configure package.json. Please try again.");
+  }
+}

package/src/actions/copying-template-files.js

@@ -0,0 +1,18 @@
+import fs from "node:fs";
+
+import chalk from "chalk";
+
+import { context } from "../main.js";
+import { Exception } from "../lib/exception.js";
+import { TEMPLATE_FOLDER_PATH } from "../constants.js";
+
+export function copyingTemplateFiles() {
+  console.log(chalk.white(`Copying template files...`));
+
+  try {
+    fs.cpSync(TEMPLATE_FOLDER_PATH, context.dest, { recursive: true });
+    console.log(chalk.green("Template files copied successfully."));
+  } catch (error) {
+    throw new Exception(`Could not copy template files: ${error.message}`);
+  }
+}

package/src/actions/creating-project.js

@@ -0,0 +1,23 @@
+import fs from "node:fs";
+
+import chalk from "chalk";
+
+import { context } from "../main.js";
+import { Exception } from "../lib/exception.js";
+
+export function creatingProject() {
+  console.log(chalk.white(`Creating project "${context.projectName}"...`));
+
+  if (fs.existsSync(context.dest)) {
+    throw new Exception(
+      `Directory ${context.projectName} already exists. Choose a different project name.`,
+    );
+  }
+
+  try {
+    fs.mkdirSync(context.dest, { recursive: true });
+    console.log(chalk.green(`Created "${context.projectName}" folder.`));
+  } catch (error) {
+    throw new Exception(`Could not create project folder: ${error.message}`);
+  }
+}

package/src/actions/install-all-dependencies.js

@@ -0,0 +1,22 @@
+import ora from "ora";
+
+import { context } from "../main.js";
+import { runCommand } from "../lib/utils.js";
+import { Exception } from "../lib/exception.js";
+import { MAIN_DEPENDENCIES, MAIN_DEV_DEPENDENCIES } from "../constants.js";
+
+export async function installAllDependencies() {
+  const spinner = ora("Installing main packages...").start();
+
+  const { packageManager: pm, dest } = context;
+
+  try {
+    await runCommand(pm, ["install", ...MAIN_DEPENDENCIES], dest);
+    await runCommand(pm, ["install", "-D", ...MAIN_DEV_DEPENDENCIES], dest);
+
+    spinner.succeed("Main packages installed successfully.");
+  } catch (error) {
+    spinner.fail("Failed to install main packages.");
+    throw new Exception(`Failed to install main packages: ${error.message}`);
+  }
+}

package/src/constants.js

@@ -0,0 +1,26 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const __filename = fileURLToPath(import.meta.url);
+export const __dirname = path.dirname(__filename);
+
+export const CWD = path.resolve(process.cwd());
+
+export const TEMPLATE_FOLDER_PATH = path.join(__dirname, "template");
+
+export const MAIN_DEPENDENCIES = [
+  "next@latest",
+  "react@latest",
+  "react-dom@latest",
+];
+
+export const MAIN_DEV_DEPENDENCIES = [
+  "@tailwindcss/postcss@latest",
+  "@types/node@latest",
+  "@types/react@latest",
+  "@types/react-dom@latest",
+  "eslint@latest",
+  "eslint-config-next@latest",
+  "tailwindcss@latest",
+  "typescript@latest",
+];

package/src/lib/exception.js

@@ -0,0 +1,6 @@
+export class Exception extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "Exception";
+  }
+}

package/src/lib/utils.js

@@ -0,0 +1,21 @@
+import { promisify } from "node:util";
+import { exec } from "node:child_process";
+
+import chalk from "chalk";
+
+import { Exception } from "./exception.js";
+
+const execPromise = promisify(exec);
+
+export function onCancel() {
+  console.log(chalk.red("\nOperation cancelled."));
+  process.exit(0);
+}
+
+export async function runCommand(command, args = [], cwd = process.cwd()) {
+  try {
+    await execPromise(`${command} ${args.join(" ")}`, { cwd });
+  } catch (error) {
+    throw new Exception(`Failed to run command: ${error.message}`);
+  }
+}

package/src/main.js

@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+
+import fs from "node:fs";
+import path from "node:path";
+
+import chalk from "chalk";
+import prompts from "prompts";
+
+import { CWD } from "./constants.js";
+import { onCancel } from "./lib/utils.js";
+import { Exception } from "./lib/exception.js";
+import { creatingProject } from "./actions/creating-project.js";
+import { copyingTemplateFiles } from "./actions/copying-template-files.js";
+import { configurePackageJson } from "./actions/configure-package-json.js";
+import { installAllDependencies } from "./actions/install-all-dependencies.js";
+
+export const context = {
+  dest: "",
+  projectName: null,
+  packageManager: null,
+  isNewProject: true,
+};
+
+process.on("SIGINT", () => onCancel());
+
+async function bootstrap() {
+  if (fs.existsSync(path.join(CWD, "next.config.ts"))) {
+    context.isNewProject = false;
+  }
+
+  console.log(chalk.green("\nWelcome to @tioelvis/next-ui!"));
+  console.log(
+    chalk.white(
+      "Interactive CLI to scaffold a Next.js project with customizable presets and configurations.\n",
+    ),
+  );
+
+  if (context.isNewProject === true) {
+    console.log(
+      chalk.blue("Creating a new project with the following features:"),
+    );
+    console.log(chalk.white("- Latest version of Next.js"));
+    console.log(chalk.white("- TypeScript enabled"));
+    console.log(chalk.white("- Latest version of Tailwind CSS"));
+    console.log(chalk.white("- Project structure inside the `src/` directory"));
+    console.log(chalk.white("- '@/' alias configured to import from `src`\n"));
+
+    try {
+      const responses = await prompts(
+        [
+          {
+            type: "text",
+            name: "projectName",
+            message: "What is the name of your Next.js project?",
+            initial: "my-app",
+          },
+          {
+            type: "confirm",
+            name: "installDependencies",
+            message: "Do you want to install dependencies now?",
+            initial: true,
+          },
+          {
+            type: (prev) => (prev ? "select" : null),
+            name: "packageManager",
+            message: "Which package manager do you want to use?",
+            choices: [
+              { title: "npm", value: "npm" },
+              { title: "yarn", value: "yarn" },
+              { title: "pnpm", value: "pnpm" },
+            ],
+            initial: 0,
+          },
+        ],
+        { onCancel },
+      );
+
+      const { projectName, installDependencies, packageManager } = responses;
+
+      context.projectName = projectName;
+      context.dest = path.join(CWD, context.projectName);
+      context.packageManager = packageManager;
+
+      creatingProject();
+      copyingTemplateFiles();
+      configurePackageJson();
+      if (installDependencies) {
+        await installAllDependencies();
+      }
+      // Install shadcn if user wants to use it
+      // Init theme color
+
+      console.log(chalk.green("\nProject setup complete!"));
+    } catch (error) {
+      if (error instanceof Exception) {
+        console.log(chalk.red(error.message));
+      } else {
+        console.log(chalk.red("An unexpected error occurred."));
+        console.error(error);
+      }
+      process.exit(1);
+    }
+  } else {
+    console.log(
+      chalk.yellow("Sorry but this package only supports new projects.\n"),
+    );
+    process.exit(0);
+  }
+}
+
+bootstrap();

package/src/template/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/src/template/next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  reactCompiler: true,
+};
+
+export default nextConfig;

package/src/template/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/src/template/src/app/layout.tsx

@@ -0,0 +1,28 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-inter",
+});
+
+export const metadata: Metadata = {
+  title: "Untitled",
+  icons: {
+    icon: "/favicon.ico",
+  },
+};
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: Readonly<Props>) {
+  return (
+    <html lang="en">
+      <body className={inter.variable}>{children}</body>
+    </html>
+  );
+}

package/src/template/src/app/page.tsx

@@ -0,0 +1,9 @@
+import { Fragment } from "react/jsx-runtime";
+
+export default function Page() {
+  return (
+    <Fragment>
+      <h1 className="text-primary">Hello, THERE!</h1>
+    </Fragment>
+  );
+}

package/src/template/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}