demo-dev2d-cli 1.0.0

package/bin/index.js

@@ -0,0 +1,291 @@
+#!/usr/bin/env node
+
+const { Command } = require("commander");
+const fs = require("fs-extra");
+const path = require("path");
+const babel = require("@babel/core");
+const presetTypescript = require("@babel/preset-typescript");
+const { execSync } = require("child_process");
+const registry = require("../registry.json");
+
+const program = new Command();
+
+/* -----------------------------
+   INQUIRER (FIXED SAFE WRAPPER)
+------------------------------*/
+const prompt = async (questions) => {
+  const inquirer = await import("inquirer");
+  return inquirer.default.prompt(questions);
+};
+
+/* =============================
+   ADD COMMAND
+============================= */
+program
+  .command("add <name>")
+  .description("Add components or utilities")
+  .action(async (name) => {
+    try {
+      const cwd = process.cwd();
+      console.log("\n🚀 Starting installation...\n");
+
+      const isTsProject = fs.existsSync(path.join(cwd, "tsconfig.json"));
+
+      let templatePath = "";
+      let outputDir = "";
+      let extension = "tsx";
+
+      /* ---------------- COMPONENTS ---------------- */
+      if (!name.startsWith("utils/")) {
+        templatePath = path.join(__dirname, `../templates/${name}.tsx`);
+        outputDir = path.join(cwd, "src/components/pejay-ui");
+        extension = "tsx";
+      } else {
+
+      /* ---------------- UTILITIES ---------------- */
+        const utilName = name.split("/")[1];
+        templatePath = path.join(__dirname, `../utils/${utilName}.ts`);
+        outputDir = path.join(cwd, "src/utils/pejay-ui");
+        extension = "ts";
+      }
+
+      if (!fs.existsSync(templatePath)) {
+        console.log(`❌ "${name}" not found`);
+        return;
+      }
+
+      const code = await fs.readFile(templatePath, "utf8");
+
+      let finalCode = code;
+      let outputExt = extension;
+
+      /* ---------------- TRANSFORM ---------------- */
+      if (!isTsProject) {
+        const transformed = babel.transformSync(code, {
+          presets: [presetTypescript],
+          filename: `file.${extension}`,
+        });
+
+        if (!transformed?.code) {
+          throw new Error("Babel transform failed");
+        }
+
+        finalCode = transformed.code;
+        outputExt = extension === "tsx" ? "jsx" : "js";
+      }
+
+      await fs.ensureDir(outputDir);
+
+      const itemName = name.includes("/") ? name.split("/")[1] : name;
+      const outputPath = path.join(outputDir, `${itemName}.${outputExt}`);
+
+      await fs.writeFile(outputPath, finalCode);
+      console.log(`✅ Created ${itemName}.${outputExt}`);
+
+      /* ---------------- DEPENDENCIES ---------------- */
+      const itemRegistry = registry[name];
+
+      if (itemRegistry?.dependencies?.length) {
+        for (const dependency of itemRegistry.dependencies) {
+          const depName = dependency.includes("/")
+            ? dependency.split("/")[1]
+            : dependency;
+
+          const depPath = path.join(__dirname, `../utils/${depName}.ts`);
+
+          if (!fs.existsSync(depPath)) continue;
+
+          let depCode = await fs.readFile(depPath, "utf8");
+
+          if (!isTsProject) {
+            const transformed = babel.transformSync(depCode, {
+              presets: [presetTypescript],
+              filename: `${depName}.ts`,
+            });
+
+            depCode = transformed.code;
+          }
+
+          const utilDir = path.join(cwd, "src/utils/pejay-ui");
+          await fs.ensureDir(utilDir);
+
+          const ext = isTsProject ? "ts" : "js";
+          const outPath = path.join(utilDir, `${depName}.${ext}`);
+
+          if (!fs.existsSync(outPath)) {
+            await fs.writeFile(outPath, depCode);
+            console.log(`📦 Added dependency ${depName}`);
+          }
+        }
+      }
+
+      /* ---------------- STATE SAVE ---------------- */
+      const statePath = path.join(cwd, ".pejay-ui.json");
+
+      let state = {};
+      if (fs.existsSync(statePath)) {
+        state = JSON.parse(await fs.readFile(statePath, "utf8"));
+      }
+
+      state.installed = state.installed || {};
+
+      state.installed[name] = {
+        files: [`src/components/pejay-ui/${itemName}.${outputExt}`],
+        uses:
+          itemRegistry?.dependencies?.map((d) =>
+            d.includes("/") ? d.split("/")[1] : d,
+          ) || [],
+      };
+
+      await fs.writeFile(statePath, JSON.stringify(state, null, 2));
+
+      console.log(`\n🎉 ${name} installed successfully\n`);
+    } catch (err) {
+      console.error("\n❌ Add failed\n", err);
+    }
+  });
+
+/* =============================
+   REMOVE COMMAND (SAFE VERSION)
+============================= */
+program
+  .command("remove <name>")
+  .description("Remove components or utilities safely")
+  .action(async (name) => {
+    try {
+      const cwd = process.cwd();
+      console.log("\n🧹 Starting removal...\n");
+
+      const itemRegistry = registry[name];
+
+      if (!itemRegistry) {
+        console.log(`❌ "${name}" not found in registry`);
+        return;
+      }
+
+      const isTsProject = fs.existsSync(path.join(cwd, "tsconfig.json"));
+      const itemName = name.includes("/") ? name.split("/")[1] : name;
+
+      const componentDir = path.join(cwd, "src/components/pejay-ui");
+      const utilsDir = path.join(cwd, "src/utils/pejay-ui");
+
+      let removedAny = false;
+
+      /* ---------------- REMOVE COMPONENT ---------------- */
+      const exts = isTsProject ? ["tsx", "ts"] : ["jsx", "js"];
+
+      for (const ext of exts) {
+        const file = path.join(componentDir, `${itemName}.${ext}`);
+
+        if (fs.existsSync(file)) {
+          await fs.remove(file);
+          console.log(`🗑️ Removed ${file}`);
+          removedAny = true;
+        }
+      }
+
+      /* ---------------- LOAD STATE ---------------- */
+      const statePath = path.join(cwd, ".pejay-ui.json");
+
+      let state = {};
+      if (fs.existsSync(statePath)) {
+        state = JSON.parse(await fs.readFile(statePath, "utf8"));
+      }
+
+      state.installed = state.installed || {};
+
+      /* ---------------- BUILD USAGE MAP ---------------- */
+      const usageMap = new Map();
+
+      for (const comp of Object.values(state.installed)) {
+        for (const u of comp.uses || []) {
+          usageMap.set(u, (usageMap.get(u) || 0) + 1);
+        }
+      }
+
+      /* ---------------- SAFE UTILITY REMOVE ---------------- */
+      if (itemRegistry.dependencies?.length) {
+        for (const dep of itemRegistry.dependencies) {
+          const utilName = dep.includes("/") ? dep.split("/")[1] : dep;
+
+          const usage = usageMap.get(utilName) || 0;
+
+          if (usage > 1) {
+            console.log(`⛔ Skipping ${utilName} (used by other components)`);
+            continue;
+          }
+
+          const { confirm } = await prompt([
+            {
+              type: "confirm",
+              name: "confirm",
+              message: `Remove utility "${utilName}"?`,
+              default: false,
+            },
+          ]);
+
+          if (!confirm) continue;
+
+          for (const ext of exts) {
+            const file = path.join(utilsDir, `${utilName}.${ext}`);
+
+            if (fs.existsSync(file)) {
+              await fs.remove(file);
+              console.log(`🗑️ Removed ${file}`);
+              removedAny = true;
+            }
+          }
+        }
+      }
+
+      /* ---------------- REMOVE PACKAGES ---------------- */
+      // Only collect packages from deps that NO other component still uses
+      const pkgs = [];
+
+      for (const dep of itemRegistry.dependencies || []) {
+        const utilName = dep.includes("/") ? dep.split("/")[1] : dep;
+        const usage = usageMap.get(utilName) || 0;
+
+        // usage > 1 means another component still needs this dep → skip its packages
+        if (usage > 1) {
+          console.log(`⛔ Keeping packages for ${utilName} (used by other components)`);
+          continue;
+        }
+
+        const reg = registry[dep];
+        if (reg?.packages) pkgs.push(...reg.packages);
+      }
+
+      if (pkgs.length) {
+        const unique = [...new Set(pkgs)];
+
+        const { ok } = await prompt([
+          {
+            type: "confirm",
+            name: "ok",
+            message: `Uninstall packages: ${unique.join(", ")}?`,
+            default: false,
+          },
+        ]);
+
+        if (ok) {
+          execSync(`npm uninstall ${unique.join(" ")}`, {
+            cwd,
+            stdio: "inherit",
+          });
+        }
+      }
+
+      /* ---------------- CLEAN STATE ---------------- */
+      if (state.installed[name]) {
+        delete state.installed[name];
+        await fs.writeFile(statePath, JSON.stringify(state, null, 2));
+      }
+
+      console.log(`\n🎉 ${name} removed successfully\n`);
+    } catch (err) {
+      console.error("\n❌ Remove failed\n", err);
+    }
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "demo-dev2d-cli",
+  "version": "1.0.0",
+  "description": "CLI to install reusable React components like shadcn/ui",
+  "main": "bin/index.js",
+  "bin": {
+    "demo-dev2d-cli": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "utils",
+    "registry.json"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "demo-auth",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@types/react": "^19.2.14",
+    "clsx": "^2.1.1",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.5",
+    "inquirer": "^13.4.3",
+    "react": "^19.2.6",
+    "tailwind-merge": "^3.6.0"
+  }
+}

package/registry.json

@@ -0,0 +1,9 @@
+{
+  "input": {
+    "dependencies": ["utils/cn"]
+  },
+
+  "utils/cn": {
+    "packages": ["clsx", "tailwind-merge"]
+  }
+}

package/templates/input.tsx

@@ -0,0 +1,213 @@
+import React, { useState } from "react";
+import { cn } from "../../utils/pejay-ui/cn";
+
+interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "prefix"
+> {
+  label?: string;
+  description?: string;
+  error?: string;
+  icon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  onRightIconClick?: (e: React.MouseEvent) => void;
+  variant?: "rounded" | "curved" | "square" | "floating";
+  labelDirection?:
+    | "label-left"
+    | "label-left-top"
+    | "label-left-bottom"
+    | "label-right"
+    | "label-right-top"
+    | "label-right-bottom"
+    | "label-top"
+    | "label-top-right"
+    | "label-top-center";
+  labelWidth?: string;
+  labelAlign?: "left" | "center" | "right";
+  labelGap?: string;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      icon,
+      rightIcon,
+      prefix,
+      suffix,
+      onRightIconClick,
+      variant = "rounded",
+      labelDirection = "label-top",
+      labelWidth = "w-32",
+      labelAlign,
+      labelGap = "gap-1.5",
+      className,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const isFloating = variant === "floating";
+    const hasValue = props.value !== undefined && props.value !== "";
+    const isActive = isFocused || hasValue;
+
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const isSideLabel =
+      labelDirection.startsWith("label-left") ||
+      labelDirection.startsWith("label-right");
+    const alignment =
+      labelAlign ||
+      (labelDirection.includes("-left")
+        ? "left"
+        : labelDirection.includes("-right")
+          ? "right"
+          : labelDirection.includes("-center")
+            ? "center"
+            : "left");
+
+    const radiusClass =
+      variant === "square"
+        ? "rounded-none"
+        : variant === "curved"
+          ? "rounded-lg"
+          : "rounded-xl";
+
+    return (
+      <div
+        className={cn(
+          "flex w-full",
+          labelGap,
+          isSideLabel ? "flex-row" : "flex-col",
+          className,
+        )}
+      >
+        {/* Standard Label (Non-Floating) */}
+        {label && !isFloating && (
+          <div
+            className={cn(
+              "flex flex-col",
+              isSideLabel ? "shrink-0" : "w-full",
+              labelDirection.endsWith("-top") && isSideLabel && "mt-1.5",
+            )}
+          >
+            <div
+              className={cn(
+                isSideLabel ? labelWidth : "w-full",
+                "flex flex-col",
+                alignment === "left" && "items-start text-left",
+                alignment === "right" && "items-end text-right",
+                alignment === "center" && "items-center text-center",
+              )}
+            >
+              <span className="text-sm font-semibold tracking-tight text-black dark:text-white uppercase">
+                {label}
+              </span>
+              {description && (
+                <span className="text-[11px] text-gray-400 font-medium mt-0.5">
+                  {description}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        <div className="flex-1 relative group">
+          {/* Floating Label */}
+          {label && isFloating && (
+            <span
+              className={cn(
+                "absolute transition-all duration-200 pointer-events-none font-bold uppercase tracking-tight z-10 block truncate",
+                isActive
+                  ? "-top-2.5 left-3 right-auto text-[10px] bg-white dark:bg-black px-1.5 text-sky-500 max-w-[calc(100%-1.5rem)]"
+                  : cn(
+                      "top-1/2 -translate-y-1/2 text-[13px] text-gray-400",
+                      icon ? "left-11 right-8" : "left-4 right-4",
+                    ),
+              )}
+            >
+              {label}
+            </span>
+          )}
+
+          <div className="relative flex items-center">
+            {icon && (
+              <div
+                className={cn(
+                  "absolute left-4 text-gray-400 transition-colors",
+                  isFocused ? "text-black dark:text-white" : "",
+                )}
+              >
+                {icon}
+              </div>
+            )}
+            <input
+              ref={ref}
+              {...props}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              className={cn(
+                "w-full h-11 bg-white dark:bg-black border-2 text-[13px] font-semibold text-black dark:text-white transition-all duration-200 outline-none",
+                radiusClass,
+                icon || prefix ? "pl-11" : "px-4",
+                rightIcon || suffix ? "pr-11" : icon || prefix ? "" : "px-4",
+                isFocused
+                  ? "border-sky-500 ring-4 ring-sky-500/10"
+                  : "border-gray-100 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-600",
+                error ? "border-red-500 ring-4 ring-red-500/10" : "",
+                isFloating &&
+                  "placeholder:opacity-0 focus:placeholder:opacity-100",
+              )}
+            />
+            {prefix && (
+              <div className="absolute left-4 text-gray-400 font-semibold pointer-events-none">
+                {prefix}
+              </div>
+            )}
+            {suffix && (
+              <div className="absolute right-4 text-gray-400 font-semibold pointer-events-none">
+                {suffix}
+              </div>
+            )}
+            {rightIcon && (
+              <div
+                onClick={onRightIconClick}
+                className={cn(
+                  "absolute right-4 text-gray-400 transition-colors",
+                  onRightIconClick
+                    ? "cursor-pointer hover:text-black dark:hover:text-white"
+                    : "",
+                  isFocused ? "text-black dark:text-white" : "",
+                )}
+              >
+                {rightIcon}
+              </div>
+            )}
+          </div>
+          {error && (
+            <span className="text-[10px] font-bold text-red-500 mt-1.5 ml-1 block animate-in fade-in slide-in-from-top-1">
+              {error}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+Input.displayName = "Input";

package/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}