@tioelvis/next-template 2.4.8 → 3.0.0

package/src/main.js

@@ -1,229 +1,158 @@
-#!/usr/bin/env node
-
-import {
-  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 prompts from "prompts";
-import { COMPONENTS, DEPENDENCIES, DEV_DEPENDENCIES } from "./constants.js";
-
-// Manage Ctrl+C command
-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);
-
-      // Initialize package.json
-      console.log(chalk.blue("📦 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(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"
-        )
-      );
-
-      if (components.some((e) => e === "sonner") === true) {
-        console.log(
-          chalk.yellow(
-            "⚠️ IMPORTANT: you install the sonner component. Don't forget to add the Toaster in your layout"
-          )
-        );
-      }
-
-      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 });
-      }
-
-      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");
-      }
-
-      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 };
-            }),
-          },
-          {
-            type: "select",
-            name: "package_manager",
-            message: "Which package manager would you want to use?",
-            choices: [
-              { title: "npm", value: "npm" },
-              { title: "pnpm", value: "pnpm" },
-            ],
-          },
-        ],
-        { onCancel: on_cancel }
-      );
-
-      const { components, package_manager } = responses;
-
-      // Copying files
-      DEST = path.resolve(CWD);
-
-      await copy_components(DEST, components);
-
-      // 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
-      if (components.some((e) => e === "sonner") === true) {
-        console.log(
-          chalk.yellow(
-            "⚠️ IMPORTANT: you install the sonner component. Don't forget to add the Toaster in your layout"
-          )
-        );
-      }
-      console.log(chalk.green("\n✅ Components add successfully!"));
-    } catch (error) {
-      console.error(chalk.red("❌ Internal error:"), error.message);
-
-      process.exit(1);
-    }
-  }
-
-  process.exit(0);
-})();
+#!/usr/bin/env node
+
+import fs from "node:fs";
+import path from "node:path";
+
+import chalk from "chalk";
+import prompts from "prompts";
+
+import {
+  context,
+  CWD,
+  SHADCN_COMPONENTS,
+  THEME_COLORS,
+  TIOELVIS_COMPONENTS,
+} from "./constants.js";
+
+import { onCancel } from "./lib/utils.js";
+import { Exception } from "./lib/exception.js";
+
+import { initProject } from "./actions/init-project.js";
+import { initThemeColor } from "./actions/init-theme.js";
+import { initShadcnUI } from "./actions/init-shadcn-ui.js";
+import { installMainPackages } from "./actions/install-main-packages.js";
+import { configurePackageJSON } from "./actions/configure-package-json.js";
+import { initTioElvisComponents } from "./actions/init-tioelvis-components.js";
+
+process.on("SIGINT", () => onCancel());
+
+async function bootstrap() {
+  if (fs.existsSync(path.join(CWD, "next.config.ts"))) {
+    context.isNewProject = false;
+  }
+
+  console.log(chalk.green.bold("\nWelcome to @tioelvis/next-template!"));
+  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.bold("Creating a new project with the following features:")
+    );
+    console.log("- Latest version of Next.js");
+    console.log("- TypeScript enabled");
+    console.log("- Latest version of Tailwind CSS");
+    console.log("- Project structure inside the `src/` directory");
+    console.log("- '@/' 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: "select",
+            name: "packageManager",
+            message: "Which package manager would you want to use?",
+            choices: [
+              { title: "npm", value: "npm" },
+              { title: "yarn", value: "yarn" },
+              { title: "pnpm", value: "pnpm" },
+            ],
+          },
+          {
+            type: "confirm",
+            name: "useShadcnUI",
+            message: "Would you like to include shadcn/ui components?",
+            initial: true,
+          },
+          {
+            type: (prev) => (prev ? "multiselect" : null),
+            name: "shadcnComponents",
+            message: "Which shadcn/ui components would you like to use?",
+            choices: SHADCN_COMPONENTS.map((e) => {
+              return { ...e };
+            }),
+            instructions: false,
+          },
+          {
+            type: "select",
+            name: "themeColor",
+            message: "Which theme color would you like to use?",
+            choices: THEME_COLORS.map((e) => {
+              return {
+                title: `${chalk.hex(e.hex)("●")} ${e.title}`,
+                value: e.value,
+              };
+            }),
+          },
+          {
+            type: "confirm",
+            name: "useTioElvisComponents",
+            message: "Would you like to include some TioElvis components?",
+            initial: true,
+            instructions: false,
+          },
+          {
+            type: (prev) => (prev ? "multiselect" : null),
+            name: "tioElvisComponents",
+            message: "Which TioElvis components would you like to use?",
+            choices: TIOELVIS_COMPONENTS.map((e) => {
+              return { ...e };
+            }),
+            instructions: false,
+          },
+        ],
+        { onCancel }
+      );
+
+      console.log(""); // New line for better readability
+
+      const {
+        projectName,
+        packageManager,
+        useShadcnUI,
+        shadcnComponents,
+        themeColor,
+        useTioElvisComponents,
+        tioElvisComponents,
+      } = responses;
+
+      context.dest = path.join(CWD, projectName);
+      context.projectName = projectName;
+      context.packageManager = packageManager;
+
+      initProject();
+      configurePackageJSON();
+      await installMainPackages();
+      if (useShadcnUI) {
+        await initShadcnUI(shadcnComponents);
+      }
+      initThemeColor(themeColor);
+      if (useTioElvisComponents) {
+        initTioElvisComponents(tioElvisComponents);
+      }
+
+      console.log(chalk.green.bold("\nProject setup complete!"));
+    } catch (error) {
+      console.error(chalk.red(error.message));
+
+      if (error instanceof Exception) {
+        if (context.dest && error.deleteDest && fs.existsSync(context.dest)) {
+          fs.rmSync(context.dest, { recursive: true, force: true });
+        }
+      }
+
+      process.exit(1);
+    }
+  }
+}
+
+bootstrap();

package/src/template/eslint.config.mjs

@@ -1,16 +1,18 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
-
-const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "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/postcss.config.mjs

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

package/src/template/src/app/globals.css

@@ -1,123 +1 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-}
-
-:root {
-  --radius: 0.65rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

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

@@ -1,16 +1,18 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Roboto } from "next/font/google";
-import { QueryProvider } from "@/providers/query.provider";
-import { ThemeProvider } from "@/providers/theme.provider";
 
 const roboto = Roboto({
   subsets: ["latin"],
-  weight: ["500", "600", "700", "800"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-roboto",
 });
 
 export const metadata: Metadata = {
   title: "Untitled",
+  icons: {
+    icon: "/favicon.ico",
+  },
 };
 
 interface Props {
@@ -19,18 +21,8 @@ interface Props {
 
 export default function Layout({ children }: Readonly<Props>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={roboto.className}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange>
-          <QueryProvider>
-            <main className="w-full min-h-[calc(100vh-4rem)]">{children}</main>
-          </QueryProvider>
-        </ThemeProvider>
-      </body>
+    <html lang="en">
+      <body className={roboto.variable}>{children}</body>
     </html>
   );
 }

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

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

package/src/template/tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -22,6 +22,13 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
   "exclude": ["node_modules"]
 }