cus-base-ui 0.2.1 → 0.2.3

package/README.md

@@ -8,26 +8,26 @@ Bạn không cần cài đặt gì cả, chỉ cần đứng tại thư mục d
 
 ### 1. Khởi tạo dự án (Lần đầu)
 ```bash
-npx base-cus-ui init
+npx cus-base-ui init
 ```
 Lệnh này sẽ tự động cài các gói cần thiết (`clsx`, `tailwind-merge`) và tạo file `src/lib/utils/cn.ts`.
 
 ### 2. Thêm Component
 ```bash
-npx base-cus-ui add button input switch
+npx cus-base-ui add button input switch
 ```
 *Lưu ý: CLI sẽ tự động nhận diện và tải thêm các component phụ thuộc nếu cần.*
 
 ### 3. Cấu hình Tailwind
 Chạy lệnh sau để nhận hướng dẫn copy-paste cấu hình theme:
 ```bash
-npx base-cus-ui tailwind
+npx cus-base-ui tailwind
 ```
 
 ---
 ### 4. Liệt kê Component
 ```bash
-npx base-cus-ui list
+npx cus-base-ui list
 ```
 
 ## 🛠 Cách để tự bạn quản lý và phát hành
@@ -44,12 +44,12 @@ npm run build:cli
 ```
 
 ### 3. Phát hành lên NPM
-Để mọi người có thể gõ `npx base-cus-ui`, bạn cần đưa nó lên NPM:
+Để mọi người có thể gõ `npx cus-base-ui`, bạn cần đưa nó lên NPM:
 1. Đăng nhập: `npm login`
-2. Phát hành: `npm publish` (Nếu tên `base-cus-ui` đã bị trùng trên NPM, hãy đổi tên trong `package.json`).
+2. Phát hành: `npm publish` (Nếu tên `cus-base-ui` đã bị trùng trên NPM, hãy đổi tên trong `package.json`).
 
 ---
 
 ## 📂 Cơ chế hoạt động
-- **Local Mode**: Nếu bạn chạy `npx cus-ui add --local`, nó sẽ tìm file `registry.json` ngay tại thư mục hiện tại.
+- **Local Mode**: Nếu bạn chạy `npx cus-base-ui add --local`, nó sẽ tìm file `registry.json` ngay tại thư mục hiện tại.
 - **Remote Mode (Mặc định)**: CLI sẽ tải dữ liệu trực tiếp từ: `https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json`.

package/dist/ui-cli.cjs

@@ -0,0 +1,232 @@
+#!/usr/bin/env node
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// scripts/ui-cli.ts
+var import_fs = __toESM(require("fs"), 1);
+var import_path = __toESM(require("path"), 1);
+var import_child_process = require("child_process");
+var REGISTRY_LOCAL = "./registry.json";
+var REGISTRY_REMOTE = "https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json";
+var log = (msg) => console.log(`[CUS-BASE-UI] ${msg}`);
+var warn = (msg) => console.warn(`[CUS-BASE-UI] WARN: ${msg}`);
+var error = (msg) => console.error(`[CUS-BASE-UI] ERROR: ${msg}`);
+var getTargetProjectDir = () => process.cwd();
+var validateRegistry = (data) => {
+  if (!data || typeof data !== "object") return false;
+  const reg = data;
+  return "components" in reg && typeof reg.components === "object" && reg.components !== null;
+};
+var getRegistry = async (isLocal) => {
+  if (isLocal && import_fs.default.existsSync(REGISTRY_LOCAL)) {
+    log("Using local registry...");
+    try {
+      const data = JSON.parse(import_fs.default.readFileSync(REGISTRY_LOCAL, "utf-8"));
+      if (!validateRegistry(data)) {
+        error('Invalid local registry format \u2014 missing "components" field.');
+        process.exit(1);
+      }
+      return data;
+    } catch (err) {
+      error(`Failed to parse local registry: ${err instanceof Error ? err.message : err}`);
+      process.exit(1);
+    }
+  }
+  log("Fetching registry from remote...");
+  try {
+    const response = await fetch(REGISTRY_REMOTE);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const data = await response.json();
+    if (!validateRegistry(data)) {
+      error('Invalid remote registry format \u2014 missing "components" field.');
+      process.exit(1);
+    }
+    return data;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    error(`Cannot fetch registry: ${message}`);
+    process.exit(1);
+  }
+};
+var installNpmPackages = (packages, cwd) => {
+  if (packages.length === 0) return;
+  const pkgJsonPath = import_path.default.join(cwd, "package.json");
+  let toInstall = packages;
+  if (import_fs.default.existsSync(pkgJsonPath)) {
+    const pkg = JSON.parse(import_fs.default.readFileSync(pkgJsonPath, "utf-8"));
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    toInstall = packages.filter((p) => !allDeps[p]);
+  }
+  if (toInstall.length === 0) return;
+  log(`Installing: ${toInstall.join(", ")}...`);
+  try {
+    (0, import_child_process.execSync)(`npm install ${toInstall.join(" ")} --save`, { stdio: "inherit", cwd });
+  } catch (err) {
+    error(`Failed to install packages: ${toInstall.join(", ")}. ${err instanceof Error ? err.message : ""}`);
+  }
+};
+var ensureCore = (registry, cwd) => {
+  const core = registry.core;
+  if (!core) return;
+  installNpmPackages(core.dependencies, cwd);
+  for (const file of core.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    const targetDir = import_path.default.dirname(targetPath);
+    if (!import_fs.default.existsSync(targetDir)) {
+      import_fs.default.mkdirSync(targetDir, { recursive: true });
+    }
+    if (!import_fs.default.existsSync(targetPath)) {
+      import_fs.default.writeFileSync(targetPath, file.content);
+      log(`Created core file: ${file.path}`);
+    }
+  }
+};
+var addComponent = (name, registry, cwd, options, added = /* @__PURE__ */ new Set()) => {
+  if (added.has(name)) return;
+  added.add(name);
+  const component = registry.components[name];
+  if (!component) {
+    error(`Component "${name}" not found. Run 'list' to see available components.`);
+    return;
+  }
+  log(`Adding: ${name}...`);
+  ensureCore(registry, cwd);
+  installNpmPackages(component.dependencies, cwd);
+  if (component.internalDependencies) {
+    for (const dep of component.internalDependencies) {
+      if (registry.components[dep]) {
+        addComponent(dep, registry, cwd, options, added);
+      }
+    }
+  }
+  for (const file of component.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    const targetDir = import_path.default.dirname(targetPath);
+    if (!import_fs.default.existsSync(targetDir)) {
+      import_fs.default.mkdirSync(targetDir, { recursive: true });
+    }
+    if (import_fs.default.existsSync(targetPath) && !options.force) {
+      warn(`Skipped (exists): ${file.path} \u2014 use --force to overwrite`);
+      continue;
+    }
+    import_fs.default.writeFileSync(targetPath, file.content);
+    log(`Created: ${file.path}`);
+  }
+};
+var removeComponent = (name, registry, cwd) => {
+  const component = registry.components[name];
+  if (!component) {
+    error(`Component "${name}" not found.`);
+    return;
+  }
+  log(`Removing: ${name}...`);
+  for (const file of component.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    if (import_fs.default.existsSync(targetPath)) {
+      import_fs.default.unlinkSync(targetPath);
+      log(`Deleted: ${file.path}`);
+    }
+  }
+  for (const file of component.files) {
+    const targetDir = import_path.default.dirname(import_path.default.join(cwd, file.path));
+    try {
+      if (import_fs.default.existsSync(targetDir) && import_fs.default.readdirSync(targetDir).length === 0) {
+        import_fs.default.rmdirSync(targetDir);
+        log(`Removed empty dir: ${import_path.default.relative(cwd, targetDir)}`);
+      }
+    } catch (err) {
+      warn(`Could not remove directory: ${err instanceof Error ? err.message : err}`);
+    }
+  }
+};
+var main = async () => {
+  const args = process.argv.slice(2);
+  const isLocal = args.includes("--local");
+  const isForce = args.includes("--force");
+  const filteredArgs = args.filter((a) => !a.startsWith("--"));
+  const command = filteredArgs[0];
+  const componentNames = filteredArgs.slice(1);
+  const cwd = getTargetProjectDir();
+  const registry = await getRegistry(isLocal);
+  switch (command) {
+    case "add": {
+      if (componentNames.length === 0) {
+        error("Usage: npx cus-base-ui add <component-name> [--force]");
+        return;
+      }
+      for (const name of componentNames) {
+        addComponent(name, registry, cwd, { force: isForce });
+      }
+      log("Done!");
+      break;
+    }
+    case "remove": {
+      if (componentNames.length === 0) {
+        error("Usage: npx cus-base-ui remove <component-name>");
+        return;
+      }
+      for (const name of componentNames) {
+        removeComponent(name, registry, cwd);
+      }
+      log("Done!");
+      break;
+    }
+    case "list": {
+      const components = Object.keys(registry.components).sort();
+      log(`Available components (${components.length}):`);
+      for (const k of components) {
+        const deps = registry.components[k].internalDependencies;
+        const depStr = deps?.length ? ` (requires: ${deps.join(", ")})` : "";
+        console.log(`  - ${k}${depStr}`);
+      }
+      break;
+    }
+    case "init": {
+      ensureCore(registry, cwd);
+      log("Initialization complete.");
+      break;
+    }
+    case "tailwind": {
+      console.log("\n--- Copy to tailwind.config.ts / tailwind.config.js ---\n");
+      console.log("// See README_CLI.md for full theme config");
+      break;
+    }
+    default: {
+      console.log(`
+  cus-base-ui \u2014 UI Component CLI
+
+  Commands:
+    init                     Initialize project (install core deps + files)
+    add <name> [--force]     Add component(s) to your project
+    remove <name>            Remove component(s) from your project
+    list                     List all available components
+    tailwind                 Show Tailwind config instructions
+
+  Options:
+    --local                  Use local registry.json instead of remote
+    --force                  Overwrite existing files when adding
+`);
+    }
+  }
+};
+main();

package/dist/ui-cli.js

@@ -0,0 +1,232 @@
+#!/usr/bin/env node
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// scripts/ui-cli.ts
+var import_fs = __toESM(require("fs"), 1);
+var import_path = __toESM(require("path"), 1);
+var import_child_process = require("child_process");
+var REGISTRY_LOCAL = "./registry.json";
+var REGISTRY_REMOTE = "https://raw.githubusercontent.com/huy14032003/ui-component/main/registry.json";
+var log = (msg) => console.log(`[CUS-BASE-UI] ${msg}`);
+var warn = (msg) => console.warn(`[CUS-BASE-UI] WARN: ${msg}`);
+var error = (msg) => console.error(`[CUS-BASE-UI] ERROR: ${msg}`);
+var getTargetProjectDir = () => process.cwd();
+var validateRegistry = (data) => {
+  if (!data || typeof data !== "object") return false;
+  const reg = data;
+  return "components" in reg && typeof reg.components === "object" && reg.components !== null;
+};
+var getRegistry = async (isLocal) => {
+  if (isLocal && import_fs.default.existsSync(REGISTRY_LOCAL)) {
+    log("Using local registry...");
+    try {
+      const data = JSON.parse(import_fs.default.readFileSync(REGISTRY_LOCAL, "utf-8"));
+      if (!validateRegistry(data)) {
+        error('Invalid local registry format \u2014 missing "components" field.');
+        process.exit(1);
+      }
+      return data;
+    } catch (err) {
+      error(`Failed to parse local registry: ${err instanceof Error ? err.message : err}`);
+      process.exit(1);
+    }
+  }
+  log("Fetching registry from remote...");
+  try {
+    const response = await fetch(REGISTRY_REMOTE);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const data = await response.json();
+    if (!validateRegistry(data)) {
+      error('Invalid remote registry format \u2014 missing "components" field.');
+      process.exit(1);
+    }
+    return data;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    error(`Cannot fetch registry: ${message}`);
+    process.exit(1);
+  }
+};
+var installNpmPackages = (packages, cwd) => {
+  if (packages.length === 0) return;
+  const pkgJsonPath = import_path.default.join(cwd, "package.json");
+  let toInstall = packages;
+  if (import_fs.default.existsSync(pkgJsonPath)) {
+    const pkg = JSON.parse(import_fs.default.readFileSync(pkgJsonPath, "utf-8"));
+    const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    toInstall = packages.filter((p) => !allDeps[p]);
+  }
+  if (toInstall.length === 0) return;
+  log(`Installing: ${toInstall.join(", ")}...`);
+  try {
+    (0, import_child_process.execSync)(`npm install ${toInstall.join(" ")} --save`, { stdio: "inherit", cwd });
+  } catch (err) {
+    error(`Failed to install packages: ${toInstall.join(", ")}. ${err instanceof Error ? err.message : ""}`);
+  }
+};
+var ensureCore = (registry, cwd) => {
+  const core = registry.core;
+  if (!core) return;
+  installNpmPackages(core.dependencies, cwd);
+  for (const file of core.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    const targetDir = import_path.default.dirname(targetPath);
+    if (!import_fs.default.existsSync(targetDir)) {
+      import_fs.default.mkdirSync(targetDir, { recursive: true });
+    }
+    if (!import_fs.default.existsSync(targetPath)) {
+      import_fs.default.writeFileSync(targetPath, file.content);
+      log(`Created core file: ${file.path}`);
+    }
+  }
+};
+var addComponent = (name, registry, cwd, options, added = /* @__PURE__ */ new Set()) => {
+  if (added.has(name)) return;
+  added.add(name);
+  const component = registry.components[name];
+  if (!component) {
+    error(`Component "${name}" not found. Run 'list' to see available components.`);
+    return;
+  }
+  log(`Adding: ${name}...`);
+  ensureCore(registry, cwd);
+  installNpmPackages(component.dependencies, cwd);
+  if (component.internalDependencies) {
+    for (const dep of component.internalDependencies) {
+      if (registry.components[dep]) {
+        addComponent(dep, registry, cwd, options, added);
+      }
+    }
+  }
+  for (const file of component.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    const targetDir = import_path.default.dirname(targetPath);
+    if (!import_fs.default.existsSync(targetDir)) {
+      import_fs.default.mkdirSync(targetDir, { recursive: true });
+    }
+    if (import_fs.default.existsSync(targetPath) && !options.force) {
+      warn(`Skipped (exists): ${file.path} \u2014 use --force to overwrite`);
+      continue;
+    }
+    import_fs.default.writeFileSync(targetPath, file.content);
+    log(`Created: ${file.path}`);
+  }
+};
+var removeComponent = (name, registry, cwd) => {
+  const component = registry.components[name];
+  if (!component) {
+    error(`Component "${name}" not found.`);
+    return;
+  }
+  log(`Removing: ${name}...`);
+  for (const file of component.files) {
+    const targetPath = import_path.default.join(cwd, file.path);
+    if (import_fs.default.existsSync(targetPath)) {
+      import_fs.default.unlinkSync(targetPath);
+      log(`Deleted: ${file.path}`);
+    }
+  }
+  for (const file of component.files) {
+    const targetDir = import_path.default.dirname(import_path.default.join(cwd, file.path));
+    try {
+      if (import_fs.default.existsSync(targetDir) && import_fs.default.readdirSync(targetDir).length === 0) {
+        import_fs.default.rmdirSync(targetDir);
+        log(`Removed empty dir: ${import_path.default.relative(cwd, targetDir)}`);
+      }
+    } catch (err) {
+      warn(`Could not remove directory: ${err instanceof Error ? err.message : err}`);
+    }
+  }
+};
+var main = async () => {
+  const args = process.argv.slice(2);
+  const isLocal = args.includes("--local");
+  const isForce = args.includes("--force");
+  const filteredArgs = args.filter((a) => !a.startsWith("--"));
+  const command = filteredArgs[0];
+  const componentNames = filteredArgs.slice(1);
+  const cwd = getTargetProjectDir();
+  const registry = await getRegistry(isLocal);
+  switch (command) {
+    case "add": {
+      if (componentNames.length === 0) {
+        error("Usage: npx cus-base-ui add <component-name> [--force]");
+        return;
+      }
+      for (const name of componentNames) {
+        addComponent(name, registry, cwd, { force: isForce });
+      }
+      log("Done!");
+      break;
+    }
+    case "remove": {
+      if (componentNames.length === 0) {
+        error("Usage: npx cus-base-ui remove <component-name>");
+        return;
+      }
+      for (const name of componentNames) {
+        removeComponent(name, registry, cwd);
+      }
+      log("Done!");
+      break;
+    }
+    case "list": {
+      const components = Object.keys(registry.components).sort();
+      log(`Available components (${components.length}):`);
+      for (const k of components) {
+        const deps = registry.components[k].internalDependencies;
+        const depStr = deps?.length ? ` (requires: ${deps.join(", ")})` : "";
+        console.log(`  - ${k}${depStr}`);
+      }
+      break;
+    }
+    case "init": {
+      ensureCore(registry, cwd);
+      log("Initialization complete.");
+      break;
+    }
+    case "tailwind": {
+      console.log("\n--- Copy to tailwind.config.ts / tailwind.config.js ---\n");
+      console.log("// See README_CLI.md for full theme config");
+      break;
+    }
+    default: {
+      console.log(`
+  cus-base-ui \u2014 UI Component CLI
+
+  Commands:
+    init                     Initialize project (install core deps + files)
+    add <name> [--force]     Add component(s) to your project
+    remove <name>            Remove component(s) from your project
+    list                     List all available components
+    tailwind                 Show Tailwind config instructions
+
+  Options:
+    --local                  Use local registry.json instead of remote
+    --force                  Overwrite existing files when adding
+`);
+    }
+  }
+};
+main();

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "cus-base-ui",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "bin": {
-    "cus-base-ui": "./dist/ui-cli.js"
+    "cus-base-ui": "./dist/ui-cli.cjs"
   },
   "files": [
     "dist",
@@ -15,7 +15,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:cli": "npx -y esbuild scripts/ui-cli.ts --bundle --platform=node --outfile=dist/ui-cli.js --format=esm --packages=external",
+    "build:cli": "npx -y esbuild scripts/ui-cli.ts --bundle --platform=node --outfile=dist/ui-cli.cjs --format=cjs --packages=external",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest",