ra-ui 0.1.0

package/bin/ra-ui.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import { program } from "commander";
+import { addCommand } from "../src/commands/add.js";
+import { listCommand } from "../src/commands/list.js";
+import { removeCommand } from "../src/commands/remove.js";
+
+program
+  .name("ra-ui")
+  .description("Fetch UI components from a GitHub registry into your project")
+  .version("0.1.0");
+
+addCommand(program);
+removeCommand(program);
+listCommand(program);
+
+program.parse();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ra-ui",
+  "version": "0.1.0",
+  "description": "CLI to fetch and install UI components from a GitHub registry into your project",
+  "type": "module",
+  "bin": {
+    "ra-ui": "bin/ra-ui.js"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "keywords": [
+    "ui",
+    "components",
+    "cli",
+    "react"
+  ],
+  "author": "ranjeetkumar",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "commander": "^12.0.0"
+  }
+}

package/src/commands/add.js

@@ -0,0 +1,61 @@
+import { fetchRegistry } from "../utils/registry.js";
+import { fetchComponentFiles } from "../utils/fetch-component.js";
+import { getConfig } from "../utils/get-config.js";
+
+export function addCommand(program) {
+  program
+    .command("add <component>")
+    .description("Add a component to your project")
+    .option("-f, --force", "Overwrite existing files")
+    .action(async (componentName, options) => {
+      try {
+        const start = Date.now();
+        const config = await getConfig();
+
+        console.log();
+        console.log("  \x1b[36m~\x1b[0m Resolving component...");
+
+        const registry = await fetchRegistry(config);
+        const installed = new Set();
+
+        await addWithDeps(config, registry, componentName, installed, options);
+
+        const ms = Date.now() - start;
+        console.log();
+        console.log(`  \x1b[32m\u2714\x1b[0m Done in \x1b[1m${ms}ms\x1b[0m`);
+        console.log(`  \x1b[90mPath: ${config.outputDir}/\x1b[0m`);
+        console.log();
+        console.log("  \x1b[35mThanks for using ra-ui! Happy coding \u2728\x1b[0m");
+        console.log();
+      } catch (err) {
+        console.error(`\n  \x1b[31m\u2718 ${err.message}\x1b[0m\n`);
+        process.exit(1);
+      }
+    });
+}
+
+async function addWithDeps(config, registry, name, installed, options) {
+  if (installed.has(name)) return;
+  installed.add(name);
+
+  const component = registry.components.find(
+    (c) => c.name.toLowerCase() === name.toLowerCase()
+  );
+
+  if (!component) {
+    const available = registry.components.map((c) => c.name).join(", ");
+    throw new Error(
+      `Component "${name}" not found.\n  Available: ${available}`
+    );
+  }
+
+  if (component.dependencies?.length) {
+    for (const dep of component.dependencies) {
+      console.log(`  \x1b[33m\u25CB\x1b[0m Installing dependency: \x1b[1m${dep}\x1b[0m`);
+      await addWithDeps(config, registry, dep, installed, options);
+    }
+  }
+
+  console.log(`  \x1b[32m\u25CF\x1b[0m Added \x1b[1m${component.name}\x1b[0m`);
+  await fetchComponentFiles(config, component, { force: options.force });
+}

package/src/commands/list.js

@@ -0,0 +1,39 @@
+import { fetchRegistry } from "../utils/registry.js";
+import { getConfig } from "../utils/get-config.js";
+
+export function listCommand(program) {
+  program
+    .command("list")
+    .description("List all available components")
+    .action(async () => {
+      try {
+        const config = await getConfig();
+
+        const registry = await fetchRegistry(config);
+
+        if (!registry.components?.length) {
+          console.log("\n  \x1b[33mNo components found in the registry.\x1b[0m\n");
+          return;
+        }
+
+        console.log();
+        console.log("  \x1b[36m\x1b[1mra-ui\x1b[0m \x1b[90m- React Native Components\x1b[0m");
+        console.log("  \x1b[90m" + "\u2500".repeat(40) + "\x1b[0m");
+        console.log();
+
+        const maxLen = Math.max(...registry.components.map((c) => c.name.length));
+
+        for (const component of registry.components) {
+          const name = component.name.padEnd(maxLen + 2);
+          console.log(`  \x1b[32m\u25CF\x1b[0m \x1b[1m${name}\x1b[0m \x1b[90m${component.description || ""}\x1b[0m`);
+        }
+
+        console.log();
+        console.log("  \x1b[90mUsage: \x1b[0mra-ui add \x1b[36m<name>\x1b[0m");
+        console.log();
+      } catch (err) {
+        console.error(`\n  \x1b[31m\u2718 ${err.message}\x1b[0m\n`);
+        process.exit(1);
+      }
+    });
+}

package/src/commands/remove.js

@@ -0,0 +1,61 @@
+import { unlink, access } from "node:fs/promises";
+import { resolve, join } from "node:path";
+import { getConfig } from "../utils/get-config.js";
+import { fetchRegistry } from "../utils/registry.js";
+
+export function removeCommand(program) {
+  program
+    .command("remove <component>")
+    .alias("rm")
+    .description("Remove a component from your project")
+    .action(async (componentName) => {
+      try {
+        const start = Date.now();
+        const config = await getConfig();
+
+        console.log();
+        console.log("  \x1b[36m~\x1b[0m Resolving component...");
+
+        const registry = await fetchRegistry(config);
+
+        const component = registry.components.find(
+          (c) => c.name.toLowerCase() === componentName.toLowerCase()
+        );
+
+        if (!component) {
+          const available = registry.components.map((c) => c.name).join(", ");
+          throw new Error(
+            `Component "${componentName}" not found.\n  Available: ${available}`
+          );
+        }
+
+        const outputDir = resolve(process.cwd(), config.outputDir);
+        let removed = 0;
+
+        for (const file of component.files) {
+          const filePath = join(outputDir, file);
+          try {
+            await access(filePath);
+            await unlink(filePath);
+            console.log(`  \x1b[31m\u25CF\x1b[0m Removed \x1b[1m${file}\x1b[0m`);
+            console.log(`    \x1b[90m\u2514\u2500 ${config.outputDir}/${file}\x1b[0m`);
+            removed++;
+          } catch {
+            console.log(`  \x1b[33m\u25CB\x1b[0m \x1b[1m${file}\x1b[0m \x1b[90mnot found, skipping\x1b[0m`);
+          }
+        }
+
+        const ms = Date.now() - start;
+        console.log();
+        if (removed > 0) {
+          console.log(`  \x1b[32m\u2714\x1b[0m Removed in \x1b[1m${ms}ms\x1b[0m`);
+        } else {
+          console.log(`  \x1b[33m\u2714\x1b[0m Nothing to remove`);
+        }
+        console.log();
+      } catch (err) {
+        console.error(`\n  \x1b[31m\u2718 ${err.message}\x1b[0m\n`);
+        process.exit(1);
+      }
+    });
+}

package/src/constants.js

@@ -0,0 +1,7 @@
+export const DEFAULTS = {
+  registryRepo: "ranjeet-zet/ra-ui-registry",
+  branch: "main",
+  registryComponentsPath: "components",
+  registryJsonPath: "registry.json",
+  outputDir: "src/components/ui",
+};

package/src/utils/fetch-component.js

@@ -0,0 +1,47 @@
+import { mkdir, writeFile, access } from "node:fs/promises";
+import { resolve, join } from "node:path";
+
+export async function fetchComponentFiles(config, component, options = {}) {
+  const outputDir = resolve(process.cwd(), config.outputDir);
+  await mkdir(outputDir, { recursive: true });
+
+  for (const file of component.files) {
+    const outputPath = join(outputDir, file);
+
+    if (!options.force) {
+      try {
+        await access(outputPath);
+        console.log(`  \x1b[33m\u25CB\x1b[0m Skipped \x1b[1m${file}\x1b[0m \x1b[90m(already exists, use --force)\x1b[0m`);
+        continue;
+      } catch {
+        // File doesn't exist, proceed
+      }
+    }
+
+    // Try jsDelivr first, fallback to GitHub raw
+    const urls = [
+      `https://cdn.jsdelivr.net/gh/${config.registryRepo}@${config.branch}/${config.registryComponentsPath}/${file}`,
+      `https://raw.githubusercontent.com/${config.registryRepo}/${config.branch}/${config.registryComponentsPath}/${file}`,
+    ];
+
+    let content = null;
+    for (const url of urls) {
+      try {
+        const res = await fetch(url);
+        if (res.ok) {
+          content = await res.text();
+          break;
+        }
+      } catch {
+        continue;
+      }
+    }
+
+    if (!content) {
+      throw new Error(`Failed to fetch ${file}`);
+    }
+
+    await writeFile(outputPath, content);
+    console.log(`    \x1b[90m\u2514\u2500 ${config.outputDir}/${file}\x1b[0m`);
+  }
+}

package/src/utils/get-config.js

@@ -0,0 +1,24 @@
+import { readFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { DEFAULTS } from "../constants.js";
+
+export async function getConfig() {
+  const config = { ...DEFAULTS };
+
+  try {
+    const pkgPath = resolve(process.cwd(), "package.json");
+    const raw = await readFile(pkgPath, "utf-8");
+    const pkg = JSON.parse(raw);
+
+    if (pkg["ra-ui"]) {
+      const userConfig = pkg["ra-ui"];
+      if (userConfig.path) config.outputDir = userConfig.path;
+      if (userConfig.registryRepo) config.registryRepo = userConfig.registryRepo;
+      if (userConfig.branch) config.branch = userConfig.branch;
+    }
+  } catch {
+    // No package.json found, use defaults
+  }
+
+  return config;
+}

package/src/utils/registry.js

@@ -0,0 +1,18 @@
+export async function fetchRegistry(config) {
+  // Try jsDelivr first, fallback to GitHub raw
+  const urls = [
+    `https://cdn.jsdelivr.net/gh/${config.registryRepo}@${config.branch}/${config.registryJsonPath}`,
+    `https://raw.githubusercontent.com/${config.registryRepo}/${config.branch}/${config.registryJsonPath}`,
+  ];
+
+  for (const url of urls) {
+    try {
+      const res = await fetch(url);
+      if (res.ok) return await res.json();
+    } catch {
+      continue;
+    }
+  }
+
+  throw new Error("Failed to fetch registry. Check your internet connection.");
+}