@brxndxndiaz/ui 0.1.1 → 0.1.3

package/README.md

@@ -5,7 +5,9 @@ CLI for the brxndxndiaz UI registry.
 ## Usage
 
 ```bash
+npx @brxndxndiaz/ui init
 npx @brxndxndiaz/ui add animated-timeline
+npx @brxndxndiaz/ui add
 ```
 
 This pulls registry items from the public registry and writes the component files into your project.

package/bin/brxndxndiaz-ui.js

@@ -3,6 +3,8 @@
 
 const fs = require("fs");
 const path = require("path");
+const { spawnSync } = require("child_process");
+const readline = require("readline");
 
 const REGISTRY_BASE = "https://ui.brndndiaz.dev/r";
 const SOURCE_BASE = process.env.BRXN_SOURCE_BASE;
@@ -11,10 +13,13 @@ function printHelp() {
   console.log(`brxndxndiaz-ui
 
 Usage:
-  brxndxndiaz-ui add <component>
+  brxndxndiaz-ui init
+  brxndxndiaz-ui add [component]
 
 Examples:
+  brxndxndiaz-ui init
   brxndxndiaz-ui add animated-timeline
+  brxndxndiaz-ui add
 `);
 }
 
@@ -40,15 +45,257 @@ async function writeFile(targetPath, content) {
   await fs.promises.writeFile(fullPath, content, "utf8");
 }
 
-async function addComponent(name) {
+function fileExists(filePath) {
+  try {
+    fs.accessSync(filePath, fs.constants.F_OK);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function readJson(filePath) {
+  try {
+    return JSON.parse(fs.readFileSync(filePath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+function prompt(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+function parseSelection(input, max) {
+  const normalized = input.replace(/\s+/g, "").toLowerCase();
+  if (!normalized) return [];
+  if (normalized === "all" || normalized === "*") {
+    return Array.from({ length: max }, (_, i) => i + 1);
+  }
+
+  const parts = normalized.split(",").filter(Boolean);
+  const result = new Set();
+
+  for (const part of parts) {
+    if (part.includes("-")) {
+      const [startRaw, endRaw] = part.split("-");
+      const start = Number(startRaw);
+      const end = Number(endRaw);
+      if (!Number.isInteger(start) || !Number.isInteger(end)) continue;
+      const from = Math.min(start, end);
+      const to = Math.max(start, end);
+      for (let i = from; i <= to; i += 1) {
+        if (i >= 1 && i <= max) result.add(i);
+      }
+    } else {
+      const index = Number(part);
+      if (Number.isInteger(index) && index >= 1 && index <= max) {
+        result.add(index);
+      }
+    }
+  }
+
+  return Array.from(result.values());
+}
+
+function detectPackageManager(projectRoot) {
+  if (fileExists(path.join(projectRoot, "pnpm-lock.yaml"))) return "pnpm";
+  if (fileExists(path.join(projectRoot, "yarn.lock"))) return "yarn";
+  if (fileExists(path.join(projectRoot, "bun.lock")) || fileExists(path.join(projectRoot, "bun.lockb"))) {
+    return "bun";
+  }
+  return "npm";
+}
+
+function installDependencies(dependencies, devDependencies) {
+  const deps = dependencies || [];
+  const devDeps = devDependencies || [];
+  if (deps.length === 0 && devDeps.length === 0) return;
+  const projectRoot = process.cwd();
+  if (!fileExists(path.join(projectRoot, "package.json"))) {
+    console.warn("Skipping dependency install: package.json not found.");
+    return;
+  }
+  const pkgManager = detectPackageManager(projectRoot);
+  const installArgs = (items, isDev) => {
+    if (items.length === 0) return null;
+    if (pkgManager === "npm") {
+      return isDev ? ["install", "--save-dev", ...items] : ["install", ...items];
+    }
+    if (pkgManager === "yarn") {
+      return isDev ? ["add", "-D", ...items] : ["add", ...items];
+    }
+    if (pkgManager === "pnpm") {
+      return isDev ? ["add", "-D", ...items] : ["add", ...items];
+    }
+    if (pkgManager === "bun") {
+      return isDev ? ["add", "-d", ...items] : ["add", ...items];
+    }
+    return null;
+  };
+
+  if (deps.length > 0) {
+    console.log(`Installing dependencies with ${pkgManager}: ${deps.join(", ")}`);
+    const args = installArgs(deps, false);
+    const result = spawnSync(pkgManager, args, { stdio: "inherit" });
+    if (result.status !== 0) {
+      throw new Error(`Failed to install dependencies with ${pkgManager}.`);
+    }
+  }
+
+  if (devDeps.length > 0) {
+    console.log(`Installing dev dependencies with ${pkgManager}: ${devDeps.join(", ")}`);
+    const args = installArgs(devDeps, true);
+    const result = spawnSync(pkgManager, args, { stdio: "inherit" });
+    if (result.status !== 0) {
+      throw new Error(`Failed to install dev dependencies with ${pkgManager}.`);
+    }
+  }
+}
+
+function resolveTargetPath(targetPath) {
+  return targetPath.replace(/\\/g, "/");
+}
+
+function resolveAliasPath(alias, projectRoot) {
+  if (!alias || typeof alias !== "string") return null;
+  if (!alias.startsWith("@/")) return null;
+  const relPath = alias.slice(2);
+  const directPath = path.join(projectRoot, relPath);
+  if (fileExists(directPath)) return relPath.replace(/\\/g, "/");
+  const srcPath = path.join(projectRoot, "src", relPath);
+  if (fileExists(srcPath)) return path.join("src", relPath).replace(/\\/g, "/");
+  return null;
+}
+
+function detectComponentsRoot(projectRoot) {
+  const configPath = path.join(projectRoot, "components.json");
+  if (fileExists(configPath)) {
+    const config = readJson(configPath);
+    const aliasRoot = resolveAliasPath(config?.aliases?.components, projectRoot);
+    if (aliasRoot) return aliasRoot;
+  }
+
+  const candidates = [
+    "src/components",
+    "components",
+    "src/app/components",
+    "app/components",
+  ];
+  const matches = candidates.filter((candidate) =>
+    fileExists(path.join(projectRoot, candidate))
+  );
+
+  if (matches.length === 1) return matches[0];
+
+  return matches.length ? matches : null;
+}
+
+async function promptForComponentsRoot(projectRoot) {
+  const detection = detectComponentsRoot(projectRoot);
+  if (typeof detection === "string") return detection;
+
+  const defaults = ["components", "src/components", "app/components", "src/app/components"];
+  const options = detection && Array.isArray(detection) ? detection : defaults;
+
+  console.log("\nSelect a components directory:");
+  options.forEach((option, index) => {
+    console.log(`  ${index + 1}) ${option}`);
+  });
+  const answer = await prompt("Enter a number (default 1): ");
+  const selection = parseSelection(answer || "1", options.length)[0] || 1;
+  const chosen = options[selection - 1] || options[0];
+  return chosen;
+}
+
+function resolveComponentTarget(targetPath, componentsRoot) {
+  if (!targetPath.startsWith("components/")) {
+    return resolveTargetPath(targetPath);
+  }
+  const suffix = targetPath.slice("components/".length);
+  const resolved = path.join(componentsRoot, suffix).replace(/\\/g, "/");
+  return resolved;
+}
+
+async function fetchRegistryIndex() {
+  const registryUrl = `${REGISTRY_BASE}/registry.json`;
+  const data = await fetchJson(registryUrl);
+  return data?.items || [];
+}
+
+function isComponentInstalled(item, componentsRoot) {
+  if (!item?.files?.length) return false;
+  return item.files.every((file) => {
+    const target = file.target || file.path;
+    const resolvedTarget = resolveComponentTarget(target, componentsRoot);
+    return fileExists(path.join(process.cwd(), resolvedTarget));
+  });
+}
+
+async function addComponent(
+  name,
+  componentsRoot,
+  seen = new Set(),
+  dependencies = new Set(),
+  devDependencies = new Set()
+) {
+  if (seen.has(name)) return;
+  seen.add(name);
+
   const registryUrl = `${REGISTRY_BASE}/${name}.json`;
-  const item = await fetchJson(registryUrl);
+  let item;
+  try {
+    item = await fetchJson(registryUrl);
+  } catch (error) {
+    if (String(error.message).includes("404")) {
+      console.error(`Error: Component "${name}" not found in the registry.`);
+      console.error("Run `npx @brxndxndiaz/ui add` to select from available components.");
+      return;
+    }
+    throw error;
+  }
   if (!item?.files?.length) {
     throw new Error(`Registry item has no files: ${registryUrl}`);
   }
 
+  if (isComponentInstalled(item, componentsRoot)) {
+    console.log(`Skipped ${name}: already installed.`);
+    return;
+  }
+
+  if (item.registryDependencies && item.registryDependencies.length > 0) {
+    for (const dependency of item.registryDependencies) {
+      await addComponent(
+        dependency,
+        componentsRoot,
+        seen,
+        dependencies,
+        devDependencies
+      );
+    }
+  }
+  if (Array.isArray(item.dependencies)) {
+    item.dependencies.forEach((dep) => dependencies.add(dep));
+  }
+  if (Array.isArray(item.devDependencies)) {
+    item.devDependencies.forEach((dep) => devDependencies.add(dep));
+  }
+  if (Array.isArray(item.peerDependencies)) {
+    item.peerDependencies.forEach((dep) => dependencies.add(dep));
+  }
+
   for (const file of item.files) {
     const targetPath = file.target || file.path;
+    const resolvedTarget = resolveComponentTarget(targetPath, componentsRoot);
     let content = file.content;
     if (!content) {
       if (!SOURCE_BASE) {
@@ -60,11 +307,107 @@ async function addComponent(name) {
       const sourceUrl = `${SOURCE_BASE}/${sourcePath}`;
       content = await fetchText(sourceUrl);
     }
-    await writeFile(targetPath, content);
-    console.log(`Added ${targetPath}`);
+    await writeFile(resolvedTarget, content);
+    console.log(`Added ${resolvedTarget}`);
   }
 }
 
+async function promptForRegistryComponents(componentsRoot) {
+  const registryIndex = await fetchRegistryIndex();
+  if (!registryIndex.length) {
+    throw new Error("Failed to fetch registry index.");
+  }
+
+  const available = registryIndex.filter((item) => !isComponentInstalled(item, componentsRoot));
+  if (!available.length) {
+    console.log("All available components are already installed.");
+    process.exit(0);
+  }
+
+  console.log("\nWhich components would you like to add?");
+  available.forEach((item, index) => {
+    console.log(`  ${index + 1}) ${item.name}`);
+  });
+  console.log("Enter numbers separated by commas (or 'all'):");
+  const answer = await prompt("> ");
+  const selections = parseSelection(answer, available.length);
+  if (!selections.length) {
+    console.log("No components selected. Exiting.");
+    process.exit(1);
+  }
+  return selections.map((index) => available[index - 1].name);
+}
+
+function resolveTailwindCssPath(projectRoot) {
+  const candidates = [
+    "src/app/globals.css",
+    "app/globals.css",
+    "src/styles/globals.css",
+    "styles/globals.css",
+  ];
+  const match = candidates.find((candidate) =>
+    fileExists(path.join(projectRoot, candidate))
+  );
+  return match || candidates[0];
+}
+
+function resolveUtilsAlias(projectRoot) {
+  const candidates = ["src/lib/utils", "lib/utils"];
+  const match = candidates.find((candidate) =>
+    fileExists(path.join(projectRoot, `${candidate}.ts`)) ||
+    fileExists(path.join(projectRoot, `${candidate}.tsx`))
+  );
+  if (match?.startsWith("src/")) return `@/${match.slice(4)}`;
+  return match ? `@/${match}` : "@/lib/utils";
+}
+
+async function initProject() {
+  const projectRoot = process.cwd();
+  const configPath = path.join(projectRoot, "components.json");
+  if (fileExists(configPath)) {
+    console.log("components.json already exists. Skipping init.");
+    return;
+  }
+
+  const componentsRoot = await promptForComponentsRoot(projectRoot);
+  const tailwindCss = resolveTailwindCssPath(projectRoot);
+  const utilsAlias = resolveUtilsAlias(projectRoot);
+  const componentsAlias = componentsRoot.startsWith("src/")
+    ? `@/${componentsRoot.slice(4)}`
+    : `@/${componentsRoot}`;
+
+  const config = {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: "base-nova",
+    rsc: true,
+    tsx: true,
+    tailwind: {
+      config: "",
+      css: tailwindCss,
+      baseColor: "neutral",
+      cssVariables: true,
+      prefix: "",
+    },
+    iconLibrary: "lucide",
+    rtl: false,
+    aliases: {
+      components: componentsAlias,
+      utils: utilsAlias,
+      ui: componentsAlias,
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+    menuColor: "default",
+    menuAccent: "subtle",
+    registries: {
+      "@brxndxndiaz/ui": "https://ui.brndndiaz.dev/r/{name}.json",
+    },
+  };
+
+  await writeFile("components.json", `${JSON.stringify(config, null, 2)}\n`);
+  console.log("Created components.json");
+}
+
 async function main() {
   const [, , command, arg] = process.argv;
   if (!command || command === "-h" || command === "--help") {
@@ -72,12 +415,33 @@ async function main() {
     return;
   }
 
-  if (command !== "add" || !arg) {
+  if (command === "init") {
+    await initProject();
+    return;
+  }
+
+  if (command !== "add") {
     printHelp();
     process.exit(1);
   }
 
-  await addComponent(arg);
+  const projectRoot = process.cwd();
+  const componentsRoot = await promptForComponentsRoot(projectRoot);
+
+  let components = [];
+  if (arg) {
+    components = [arg];
+  } else {
+    components = await promptForRegistryComponents(componentsRoot);
+  }
+
+  const seen = new Set();
+  const dependencies = new Set();
+  const devDependencies = new Set();
+  for (const component of components) {
+    await addComponent(component, componentsRoot, seen, dependencies, devDependencies);
+  }
+  installDependencies(Array.from(dependencies), Array.from(devDependencies));
 }
 
 main().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@brxndxndiaz/ui",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"private": false,
 	"description": "CLI for the brxndxndiaz UI registry.",
 	"scripts": {