@tioelvis/next-ui 1.0.10 → 1.0.12

package/README.md

@@ -1,3 +1,17 @@
 # Interactive CLI UI Project Generator
 
 This project is a command-line tool to scaffold a modern Next.js + Typescript + TailwindCSS project
+
+## 🛠️ Usage
+
+Using npm:
+
+```bash
+npx @tioelvis/next-ui
+```
+
+Using pnpm:
+
+```bash
+pnpx @tioelvis/next-ui
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tioelvis/next-ui",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Interactive CLI to scaffold a Next.js project with customizable presets and configurations.",
   "type": "module",
   "bin": {

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

@@ -7,8 +7,6 @@ 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",
@@ -25,7 +23,7 @@ export function configurePackageJson() {
 
   try {
     fs.writeFileSync(packageJsonPath, JSON.stringify(packageJSON, null, 2));
-    console.log(chalk.green("package.json configured successfully."));
+    console.log(chalk.white("\nPackage.json configured."));
   } catch (error) {
     throw new Exception("Failed to configure package.json. Please try again.");
   }

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

@@ -7,11 +7,9 @@ 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."));
+    console.log(chalk.white("\nCopying template files."));
   } catch (error) {
     throw new Exception(`Could not copy template files: ${error.message}`);
   }

package/src/actions/creating-project.js

@@ -6,17 +6,15 @@ 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(
+    throw new Error(
       `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.`));
+    console.log(chalk.white(`\nCreating project ${context.projectName}.`));
   } catch (error) {
     throw new Exception(`Could not create project folder: ${error.message}`);
   }

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

@@ -0,0 +1,58 @@
+import ora from "ora";
+import chalk from "chalk";
+
+import { context } from "../main.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.");
+  }
+}
+
+export async function initShadcnUI(components) {
+  console.log(
+    chalk.white("\nInitializing shadcn/ui with the following components:"),
+  );
+
+  components.forEach((comp) => {
+    console.log(chalk.white(" - "), chalk.greenBright(comp));
+  });
+
+  if (components.length === 0) {
+    console.log(chalk.yellow("No components selected."));
+  }
+
+  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.");
+  }
+
+  if (components.length > 0) {
+    await installComponents(components);
+  }
+}

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

@@ -1,4 +1,5 @@
 import ora from "ora";
+import chalk from "chalk";
 
 import { context } from "../main.js";
 import { runCommand } from "../lib/utils.js";
@@ -6,17 +7,26 @@ 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;
 
+  console.log(chalk.white("\nInstalling dependencies:"));
+  MAIN_DEPENDENCIES.forEach((dep) => {
+    console.log(chalk.white(" - "), chalk.greenBright(dep));
+  });
+
+  console.log(chalk.white("\nInstalling devDependencies:"));
+  MAIN_DEV_DEPENDENCIES.forEach((dep) => {
+    console.log(chalk.white(" - "), chalk.greenBright(dep));
+  });
+
+  const spinner = ora("Installing main packages...").start();
   try {
     await runCommand(pm, ["install", ...MAIN_DEPENDENCIES], dest);
     await runCommand(pm, ["install", "-D", ...MAIN_DEV_DEPENDENCIES], dest);
 
-    spinner.succeed("Main packages installed successfully.");
+    spinner.succeed("Dependencies installed successfully.");
   } catch (error) {
-    spinner.fail("Failed to install main packages.");
-    throw new Exception(`Failed to install main packages: ${error.message}`);
+    spinner.fail("Failed to install dependencies.");
+    throw new Exception(`Failed to install dependencies: ${error.message}`);
   }
 }

package/src/actions/set-theme-color.js

@@ -0,0 +1,25 @@
+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";
+import { THEME_FOLDER_PATH } from "../constants.js";
+
+export function setThemeColor(themeColor) {
+  const themeFilePath = path.join(THEME_FOLDER_PATH, `${themeColor}.css`);
+
+  try {
+    if (!themeColor || !fs.existsSync(themeFilePath)) {
+      throw new Error("Invalid theme color selected.");
+    }
+
+    const dest = path.join(context.dest, "src/app/globals.css");
+
+    fs.copyFileSync(themeFilePath, dest);
+    console.log(chalk.white("\nTheme color set successfully."));
+  } catch (error) {
+    throw new Exception(`Could not set theme color: ${error.message}`);
+  }
+}

package/src/constants.js

@@ -6,6 +6,7 @@ export const __dirname = path.dirname(__filename);
 
 export const CWD = path.resolve(process.cwd());
 
+export const THEME_FOLDER_PATH = path.join(__dirname, "themes");
 export const TEMPLATE_FOLDER_PATH = path.join(__dirname, "template");
 
 export const MAIN_DEPENDENCIES = [
@@ -19,8 +20,326 @@ export const MAIN_DEV_DEPENDENCIES = [
   "@types/node@latest",
   "@types/react@latest",
   "@types/react-dom@latest",
+  "babel-plugin-react-compiler@latest",
   "eslint@latest",
   "eslint-config-next@latest",
   "tailwindcss@latest",
   "typescript@latest",
+  "tw-animate-css@latest",
+];
+
+export const THEME_COLORS = [
+  {
+    title: "Default",
+    value: "default",
+    hex: "#171717",
+  },
+  {
+    title: "Blue",
+    value: "blue",
+    hex: "#1447e6",
+  },
+  {
+    title: "Green",
+    value: "green",
+    hex: "#5ea500",
+  },
+  {
+    title: "Orange",
+    value: "orange",
+    hex: "#f54a00",
+  },
+  {
+    title: "Red",
+    value: "red",
+    hex: "#e7000b",
+  },
+  {
+    title: "Rose",
+    value: "rose",
+    hex: "#ec003f",
+  },
+  {
+    title: "Violet",
+    value: "violet",
+    hex: "#7f22fe",
+  },
+  {
+    title: "Yellow",
+    value: "yellow",
+    hex: "#fcc800",
+  },
+];
+
+export const SHADCN_COMPONENTS = [
+  {
+    title: "Accordion",
+    value: "accordion",
+    description: "Collapsible content panels.",
+  },
+  {
+    title: "Alert",
+    value: "alert",
+    description: "Display important messages.",
+  },
+  {
+    title: "Alert Dialog",
+    value: "alert-dialog",
+    description: "Modal dialog for critical actions.",
+  },
+  {
+    title: "Aspect Ratio",
+    value: "aspect-ratio",
+    description: "Maintain consistent aspect ratios.",
+  },
+  {
+    title: "Avatar",
+    value: "avatar",
+    description: "User profile images.",
+  },
+  {
+    title: "Badge",
+    value: "badge",
+    description: "Small labels and tags.",
+  },
+  {
+    title: "Breadcrumb",
+    value: "breadcrumb",
+    description: "Navigation path indicator.",
+  },
+  {
+    title: "Button",
+    value: "button",
+    description: "Interactive clickable elements.",
+  },
+  {
+    title: "Button Group",
+    value: "button-group",
+    description: "Group of buttons with shared actions.",
+  },
+  {
+    title: "Calendar",
+    value: "calendar",
+    description: "Date selection component.",
+  },
+  {
+    title: "Card",
+    value: "card",
+    description: "Container for grouped content.",
+  },
+  {
+    title: "Carousel",
+    value: "carousel",
+    description: "Image and content slider.",
+  },
+  {
+    title: "Chart",
+    value: "chart",
+    description: "Data visualization component.",
+  },
+  {
+    title: "Checkbox",
+    value: "checkbox",
+    description: "Multi-select input.",
+  },
+  {
+    title: "Collapsible",
+    value: "collapsible",
+    description: "Toggle expandable sections.",
+  },
+  {
+    title: "Combobox",
+    value: "combobox",
+    description: "Dropdown input with search functionality.",
+  },
+  {
+    title: "Command",
+    value: "command",
+    description: "Command palette interface.",
+  },
+  {
+    title: "Context Menu",
+    value: "context-menu",
+    description: "Right-click menu.",
+  },
+  {
+    title: "Dialog",
+    value: "dialog",
+    description: "Modal dialog box.",
+  },
+  {
+    title: "Direction",
+    value: "direction",
+    description: "Sets the text direction for your application.",
+  },
+  {
+    title: "Drawer",
+    value: "drawer",
+    description: "Side panel overlay.",
+  },
+  {
+    title: "Dropdown Menu",
+    value: "dropdown-menu",
+    description: "Dropdown action menu.",
+  },
+  {
+    title: "Empty",
+    value: "empty",
+    description: "Component to display an empty state.",
+  },
+  {
+    title: "Field",
+    value: "field",
+    description: "Form field component.",
+  },
+  {
+    title: "Hover Card",
+    value: "hover-card",
+    description: "Tooltip on hover.",
+  },
+  {
+    title: "Input",
+    value: "input",
+    description: "Text input field.",
+  },
+  {
+    title: "Input Group",
+    value: "input-group",
+    description: "Add addons, buttons, and helper content to inputs.",
+  },
+  {
+    title: "Input OTP",
+    value: "input-otp",
+    description: "One-time password input.",
+  },
+  {
+    title: "Item",
+    value: "item",
+    description: "Versatile component for displaying content.",
+  },
+  {
+    title: "Kbd",
+    value: "kbd",
+    description: "Used to display textual user input from keyboard.",
+  },
+  {
+    title: "Label",
+    value: "label",
+    description: "Form field label.",
+  },
+  {
+    title: "Menubar",
+    value: "menubar",
+    description: "Application menu bar.",
+  },
+  {
+    title: "Native Select",
+    value: "native-select",
+    description: "Native select dropdown.",
+  },
+  {
+    title: "Navigation Menu",
+    value: "navigation-menu",
+    description: "Horizontal navigation.",
+  },
+  {
+    title: "Pagination",
+    value: "pagination",
+    description: "Page navigation controls.",
+  },
+  {
+    title: "Popover",
+    value: "popover",
+    description: "Floating content box.",
+  },
+  {
+    title: "Progress",
+    value: "progress",
+    description: "Progress bar indicator.",
+  },
+  {
+    title: "Radio Group",
+    value: "radio-group",
+    description: "Single-select option group.",
+  },
+  {
+    title: "Resizable",
+    value: "resizable",
+    description: "Resizable panel container.",
+  },
+  {
+    title: "Scroll Area",
+    value: "scroll-area",
+    description: "Custom scrollable container.",
+  },
+  {
+    title: "Select",
+    value: "select",
+    description: "Dropdown select field.",
+  },
+  {
+    title: "Separator",
+    value: "separator",
+    description: "Visual divider line",
+  },
+  {
+    title: "Sheet",
+    value: "sheet",
+    description: "Modal sheet panel.",
+  },
+  {
+    title: "Sidebar",
+    value: "sidebar",
+    description: "Side navigation panel.",
+  },
+  {
+    title: "Skeleton",
+    value: "skeleton",
+    description: "Loading placeholder.",
+  },
+  {
+    title: "Slider",
+    value: "slider",
+    description: "Range slider input.",
+  },
+  {
+    title: "Sonner",
+    value: "sonner",
+    description: "Toast notification system.",
+  },
+  {
+    title: "Switch",
+    value: "switch",
+    description: "Toggle switch control.",
+  },
+  {
+    title: "Table",
+    value: "table",
+    description: "Data table component.",
+  },
+  {
+    title: "Tabs",
+    value: "tabs",
+    description: "Tabbed content sections.",
+  },
+  {
+    title: "Textarea",
+    value: "textarea",
+    description: "Multi-line text input.",
+  },
+  {
+    title: "Toggle",
+    value: "toggle",
+    description: "Toggle button control.",
+  },
+  {
+    title: "Toggle Group",
+    value: "toggle-group",
+    description: "Group of toggle buttons.",
+  },
+  {
+    title: "Tooltip",
+    value: "tooltip",
+    description: "Informative hover text.",
+  },
 ];

package/src/main.js

@@ -6,10 +6,12 @@ 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 { initShadcnUI } from "./actions/init-shadcn-ui.js";
+import { setThemeColor } from "./actions/set-theme-color.js";
 import { creatingProject } from "./actions/creating-project.js";
+import { CWD, SHADCN_COMPONENTS, THEME_COLORS } from "./constants.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";
@@ -54,19 +56,39 @@ async function bootstrap() {
             message: "What is the name of your Next.js project?",
             initial: "my-app",
           },
+          {
+            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,
+              };
+            }),
+            initial: 0,
+          },
           {
             type: "confirm",
-            name: "installDependencies",
-            message: "Do you want to install dependencies now?",
+            name: "useShadcnUI",
+            message: "Would you like to include shadcn/ui components?",
             initial: true,
           },
           {
-            type: (prev) => (prev ? "select" : null),
+            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: "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,
@@ -75,7 +97,13 @@ async function bootstrap() {
         { onCancel },
       );
 
-      const { projectName, installDependencies, packageManager } = responses;
+      const {
+        projectName,
+        packageManager,
+        themeColor,
+        useShadcnUI,
+        shadcnComponents,
+      } = responses;
 
       context.projectName = projectName;
       context.dest = path.join(CWD, context.projectName);
@@ -84,11 +112,11 @@ async function bootstrap() {
       creatingProject();
       copyingTemplateFiles();
       configurePackageJson();
-      if (installDependencies) {
-        await installAllDependencies();
+      setThemeColor(themeColor);
+      await installAllDependencies();
+      if (useShadcnUI) {
+        await initShadcnUI(shadcnComponents);
       }
-      // Install shadcn if user wants to use it
-      // Init theme color
 
       console.log(chalk.green("\nProject setup complete!"));
     } catch (error) {