lorre-blocks 0.1.0

package/README.md

@@ -0,0 +1,53 @@
+# lorre-blocks
+
+CLI for [lorre-blocks](https://github.com/zukazine/lorre-blocks) — a shadcn-style
+component library. Instead of installing a package and importing from `node_modules`,
+this CLI **copies component source directly into your project**, so you own and can
+edit every line.
+
+## Usage
+
+In your React + Tailwind project:
+
+```bash
+# 1. One-time setup — writes components.json
+npx lorre-blocks init
+
+# 2. Add components — copies their source in and installs their dependencies
+npx lorre-blocks add button
+npx lorre-blocks add input
+```
+
+## Commands
+
+### `init`
+Creates a `components.json` in your project describing the registry URL and your
+import aliases.
+
+| Option | Description |
+| --- | --- |
+| `-r, --registry <url>` | Registry base URL to pull components from |
+| `-y, --yes` | Accept defaults, skip prompts |
+| `-c, --cwd <path>` | Run in a different directory |
+
+### `add [components...]`
+Fetches each component from the registry, installs its npm dependencies with your
+project's package manager, resolves any component dependencies, rewrites import
+aliases to match your `components.json`, and writes the files into your project.
+
+| Option | Description |
+| --- | --- |
+| `-o, --overwrite` | Overwrite existing files without asking |
+| `-y, --yes` | Skip confirmation prompts |
+| `-c, --cwd <path>` | Run in a different directory |
+
+## How it works
+
+Components are described in a JSON **registry** served as static files. The CLI reads
+`components.json`, fetches `<registry>/r/<name>.json`, resolves dependencies, and writes
+the source into the directories your aliases point at (detected from your `tsconfig.json`
+`paths`).
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,351 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import { promises as fs2 } from "fs";
+import path2 from "path";
+import * as p from "@clack/prompts";
+import color from "picocolors";
+
+// src/utils/config.ts
+import { promises as fs } from "fs";
+import path from "path";
+var CONFIG_FILE = "components.json";
+var DEFAULT_REGISTRY = "http://localhost:3000";
+var DEFAULT_ALIASES = {
+  components: "@/components",
+  ui: "@/components/ui",
+  lib: "@/lib",
+  hooks: "@/hooks",
+  utils: "@/lib/utils"
+};
+function configPath(cwd) {
+  return path.join(cwd, CONFIG_FILE);
+}
+async function configExists(cwd) {
+  try {
+    await fs.access(configPath(cwd));
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function readConfig(cwd) {
+  try {
+    const raw = await fs.readFile(configPath(cwd), "utf8");
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+async function writeConfig(cwd, config) {
+  await fs.writeFile(
+    configPath(cwd),
+    JSON.stringify(config, null, 2) + "\n",
+    "utf8"
+  );
+}
+
+// src/commands/init.ts
+async function runInit(options) {
+  const { cwd } = options;
+  p.intro(color.bgCyan(color.black(" lorre-blocks init ")));
+  if (await configExists(cwd)) {
+    const overwrite = options.yes ? true : await p.confirm({
+      message: "components.json already exists. Overwrite it?",
+      initialValue: false
+    });
+    if (p.isCancel(overwrite) || !overwrite) {
+      p.cancel("Init aborted; existing components.json kept.");
+      return;
+    }
+  }
+  const tsx = await fileExists(path2.join(cwd, "tsconfig.json"));
+  const registry = options.registry ?? (options.yes ? DEFAULT_REGISTRY : await promptText(
+    "Registry URL",
+    DEFAULT_REGISTRY
+  ));
+  const config = {
+    $schema: "https://lorre-blocks.dev/schema.json",
+    registry,
+    tsx,
+    aliases: { ...DEFAULT_ALIASES }
+  };
+  await writeConfig(cwd, config);
+  p.outro(
+    `${color.green("\u2714")} Wrote components.json. Now run ${color.cyan(
+      "lorre-blocks add button"
+    )}.`
+  );
+}
+async function promptText(message, initial) {
+  const value = await p.text({ message, placeholder: initial, defaultValue: initial });
+  if (p.isCancel(value)) {
+    p.cancel("Init cancelled.");
+    process.exit(0);
+  }
+  return value || initial;
+}
+async function fileExists(f) {
+  try {
+    await fs2.access(f);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/commands/add.ts
+import { promises as fs5 } from "fs";
+import path5 from "path";
+import * as p2 from "@clack/prompts";
+import color2 from "picocolors";
+
+// src/utils/registry.ts
+async function fetchRegistryItem(registry, name) {
+  const base = registry.replace(/\/$/, "");
+  const url = `${base}/r/${name}.json`;
+  let res;
+  try {
+    res = await fetch(url);
+  } catch (err) {
+    throw new Error(
+      `Could not reach the registry at ${url}. Is it running / correct?
+${err.message}`
+    );
+  }
+  if (res.status === 404) {
+    throw new Error(`Component "${name}" was not found in the registry (${url}).`);
+  }
+  if (!res.ok) {
+    throw new Error(`Failed to fetch ${url} (HTTP ${res.status}).`);
+  }
+  return await res.json();
+}
+async function resolveTree(registry, names) {
+  const resolved = /* @__PURE__ */ new Map();
+  async function visit(name) {
+    if (resolved.has(name)) return;
+    const item = await fetchRegistryItem(registry, name);
+    for (const dep of item.registryDependencies ?? []) {
+      await visit(dep);
+    }
+    if (!resolved.has(name)) resolved.set(name, item);
+  }
+  for (const name of names) {
+    await visit(name);
+  }
+  return [...resolved.values()];
+}
+
+// src/utils/package-manager.ts
+import { promises as fs3 } from "fs";
+import path3 from "path";
+import { spawn } from "child_process";
+async function detectPackageManager(cwd) {
+  const has = async (f) => fs3.access(path3.join(cwd, f)).then(() => true).catch(() => false);
+  if (await has("pnpm-lock.yaml")) return "pnpm";
+  if (await has("yarn.lock")) return "yarn";
+  if (await has("bun.lockb")) return "bun";
+  return "npm";
+}
+function installArgs(pm, deps) {
+  switch (pm) {
+    case "pnpm":
+      return ["add", ...deps];
+    case "yarn":
+      return ["add", ...deps];
+    case "bun":
+      return ["add", ...deps];
+    case "npm":
+      return ["install", ...deps];
+  }
+}
+async function installDependencies(cwd, pm, deps) {
+  if (deps.length === 0) return;
+  const args = installArgs(pm, deps);
+  await new Promise((resolve, reject) => {
+    const child = spawn(pm, args, {
+      cwd,
+      stdio: "inherit",
+      // On Windows, package managers are .cmd shims that need a shell.
+      shell: process.platform === "win32"
+    });
+    child.on("error", reject);
+    child.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`${pm} ${args.join(" ")} exited with code ${code}`));
+    });
+  });
+}
+
+// src/utils/paths.ts
+import { promises as fs4 } from "fs";
+import path4 from "path";
+async function resolveBaseDir(cwd) {
+  for (const file of ["tsconfig.json", "jsconfig.json"]) {
+    try {
+      const raw = await fs4.readFile(path4.join(cwd, file), "utf8");
+      const json = JSON.parse(stripJsonComments(raw));
+      const paths = json?.compilerOptions?.paths;
+      const baseUrl = json?.compilerOptions?.baseUrl ?? ".";
+      const target = paths?.["@/*"]?.[0];
+      if (target) {
+        const dir = target.replace(/\/\*$/, "");
+        return path4.resolve(cwd, baseUrl, dir);
+      }
+    } catch {
+    }
+  }
+  try {
+    const srcStat = await fs4.stat(path4.join(cwd, "src"));
+    if (srcStat.isDirectory()) return path4.join(cwd, "src");
+  } catch {
+  }
+  return cwd;
+}
+function aliasToDir(alias, baseDir) {
+  const rel = alias.replace(/^@\//, "");
+  return path4.join(baseDir, rel);
+}
+function targetDirForType(type, aliases, baseDir) {
+  switch (type) {
+    case "registry:ui":
+      return aliasToDir(aliases.ui, baseDir);
+    case "registry:hook":
+      return aliasToDir(aliases.hooks, baseDir);
+    case "registry:lib":
+      return aliasToDir(aliases.lib, baseDir);
+  }
+}
+function rewriteImports(content, config) {
+  const { aliases } = config;
+  const replacements = [
+    ["@/lib/utils", aliases.utils],
+    ["@/components/ui", aliases.ui],
+    ["@/components", aliases.components],
+    ["@/hooks", aliases.hooks],
+    ["@/lib", aliases.lib]
+  ];
+  let result = content;
+  for (const [from, to] of replacements) {
+    if (from === to) continue;
+    const pattern = new RegExp(
+      `(["'\`])${escapeRegExp(from)}(?=["'\`/])`,
+      "g"
+    );
+    result = result.replace(pattern, `$1${to}`);
+  }
+  return result;
+}
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function stripJsonComments(input) {
+  return input.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1").replace(/,(\s*[}\]])/g, "$1");
+}
+
+// src/commands/add.ts
+async function runAdd(options) {
+  const { cwd, components } = options;
+  p2.intro(color2.bgCyan(color2.black(" lorre-blocks add ")));
+  const config = await readConfig(cwd);
+  if (!config) {
+    p2.cancel(
+      `No components.json found. Run ${color2.cyan("lorre-blocks init")} first.`
+    );
+    process.exit(1);
+  }
+  if (components.length === 0) {
+    p2.cancel("Specify at least one component, e.g. `lorre-blocks add button`.");
+    process.exit(1);
+  }
+  const spinner2 = p2.spinner();
+  spinner2.start("Resolving components from the registry");
+  let tree;
+  try {
+    tree = await resolveTree(config.registry, components);
+  } catch (err) {
+    spinner2.stop("Failed to resolve components.");
+    p2.cancel(err.message);
+    process.exit(1);
+  }
+  spinner2.stop(
+    `Resolved ${tree.length} item(s): ${tree.map((t) => t.name).join(", ")}`
+  );
+  const npmDeps = [...new Set(tree.flatMap((t) => t.dependencies ?? []))];
+  if (npmDeps.length > 0) {
+    const pm = await detectPackageManager(cwd);
+    const depSpinner = p2.spinner();
+    depSpinner.start(`Installing ${npmDeps.length} dependency(ies) with ${pm}`);
+    try {
+      await installDependencies(cwd, pm, npmDeps);
+      depSpinner.stop(`Installed: ${npmDeps.join(", ")}`);
+    } catch (err) {
+      depSpinner.stop("Dependency install failed.");
+      p2.cancel(err.message);
+      process.exit(1);
+    }
+  }
+  const baseDir = await resolveBaseDir(cwd);
+  const written = [];
+  for (const item of tree) {
+    for (const file of item.files) {
+      const dir = targetDirForType(file.type, config.aliases, baseDir);
+      const fileName = path5.basename(file.path);
+      const dest = path5.join(dir, fileName);
+      if (await fileExists2(dest)) {
+        const shouldOverwrite = options.overwrite || options.yes || await p2.confirm({
+          message: `${path5.relative(cwd, dest)} exists. Overwrite?`,
+          initialValue: false
+        });
+        if (p2.isCancel(shouldOverwrite) || !shouldOverwrite) {
+          p2.log.warn(`Skipped ${path5.relative(cwd, dest)}`);
+          continue;
+        }
+      }
+      await fs5.mkdir(dir, { recursive: true });
+      const content = rewriteImports(file.content, config);
+      await fs5.writeFile(dest, content, "utf8");
+      written.push(path5.relative(cwd, dest));
+    }
+  }
+  if (written.length > 0) {
+    p2.log.success(`Added:
+${written.map((f) => `  ${color2.green(f)}`).join("\n")}`);
+  }
+  p2.outro(`${color2.green("\u2714")} Done.`);
+}
+async function fileExists2(f) {
+  try {
+    await fs5.access(f);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/index.ts
+var program = new Command();
+program.name("lorre-blocks").description("Add lorre-blocks components to your project by copying their source in.").version("0.1.0");
+program.command("init").description("Create a components.json config in your project.").option("-c, --cwd <path>", "working directory", process.cwd()).option("-r, --registry <url>", "registry base URL").option("-y, --yes", "skip prompts and accept defaults", false).action(async (opts) => {
+  await runInit({
+    cwd: opts.cwd,
+    registry: opts.registry,
+    yes: opts.yes
+  });
+});
+program.command("add").description("Add one or more components to your project.").argument("[components...]", "component names, e.g. button").option("-c, --cwd <path>", "working directory", process.cwd()).option("-y, --yes", "skip confirmation prompts", false).option("-o, --overwrite", "overwrite existing files without asking", false).action(async (components, opts) => {
+  await runAdd({
+    cwd: opts.cwd,
+    components,
+    yes: opts.yes,
+    overwrite: opts.overwrite
+  });
+});
+program.parseAsync(process.argv).catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "lorre-blocks",
+  "version": "0.1.0",
+  "description": "Add lorre-blocks components to your project by copying their source in.",
+  "type": "module",
+  "bin": {
+    "lorre-blocks": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "keywords": [
+    "cli",
+    "components",
+    "react",
+    "tailwind",
+    "shadcn"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zukazine/lorre-blocks.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/zukazine/lorre-blocks#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "commander": "^13.0.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}