@kinetixui/cli 0.12.0 → 0.14.0

package/dist/index.js

@@ -2,7 +2,7 @@
 
 // src/index.ts
 import { Command } from "commander";
-import pc4 from "picocolors";
+import pc7 from "picocolors";
 
 // src/commands/add.ts
 import { existsSync as existsSync4 } from "fs";
@@ -19,6 +19,7 @@ import { existsSync } from "fs";
 import { readFile, writeFile } from "fs/promises";
 import path from "path";
 var CONFIG_FILE = "kinetixui.json";
+var DEFAULT_REGISTRY = "https://kinetixui.com/r";
 var DEFAULT_CONFIG = {
   $schema: "https://kinetixui.com/schema/config.json",
   tailwind: { css: "app/globals.css" },
@@ -160,6 +161,17 @@ async function fetchRegistryItem(registryUrl, name) {
   }
   return await res.json();
 }
+async function fetchComponentSpec(registryUrl, name) {
+  const base = assertRegistryUrl(registryUrl).replace(/\/$/, "");
+  const specsBase = base.endsWith("/r") ? `${base.slice(0, -2)}/specs` : `${base}/specs`;
+  const url = `${specsBase}/${assertComponentName(name)}.json`;
+  const res = await fetch(url);
+  if (res.status === 404) return null;
+  if (!res.ok) {
+    throw new Error(`Could not load the component spec for "${name}" (${res.status} at ${url}).`);
+  }
+  return await res.json();
+}
 async function resolveTree(registryUrl, names) {
   const resolved = /* @__PURE__ */ new Map();
   const queue = [...names];
@@ -203,15 +215,88 @@ async function add(names, options) {
   console.log(pc.green("Done."));
 }
 
-// src/commands/init.ts
+// src/commands/doctor.ts
 import { existsSync as existsSync5 } from "fs";
+import { readdir } from "fs/promises";
 import path5 from "path";
 import pc2 from "picocolors";
+var ICON = { pass: pc2.green("\u2714"), warn: pc2.yellow("!"), fail: pc2.red("\u2716") };
+function report(level, message) {
+  console.log(ICON[level], message);
+  return level;
+}
+async function doctor() {
+  const cwd = process.cwd();
+  const levels = [];
+  let config = null;
+  if (!existsSync5(path5.join(cwd, CONFIG_FILE))) {
+    levels.push(report("fail", `No ${CONFIG_FILE} found \u2014 run "kinetixui init" first.`));
+  } else {
+    try {
+      config = await readConfig(cwd);
+      levels.push(report("pass", `${CONFIG_FILE} found and parses.`));
+    } catch {
+      levels.push(report("fail", `${CONFIG_FILE} exists but isn't valid JSON.`));
+    }
+  }
+  if (config) {
+    for (const alias of ["components", "ui", "lib"]) {
+      const dir = resolveAliasDir(cwd, config, alias);
+      if (existsSync5(dir)) {
+        levels.push(report("pass", `"${alias}" alias resolves to ${path5.relative(cwd, dir) || "."}`));
+      } else {
+        levels.push(report("warn", `"${alias}" alias points to ${path5.relative(cwd, dir) || "."}, which doesn't exist yet.`));
+      }
+    }
+    const cssPath = path5.join(cwd, config.srcDir ? "src" : "", config.tailwind.css);
+    if (existsSync5(cssPath)) {
+      levels.push(report("pass", `Tailwind CSS file found at ${path5.relative(cwd, cssPath)}`));
+    } else {
+      levels.push(report("warn", `Tailwind CSS file not found at ${path5.relative(cwd, cssPath)} \u2014 the token contract has nowhere to land.`));
+    }
+  }
+  let registryNames = null;
+  try {
+    const items = await fetchRegistryIndex(DEFAULT_REGISTRY);
+    registryNames = new Set(items.filter((item) => item.type === "registry:ui").map((item) => item.name));
+    levels.push(report("pass", `Registry reachable (${DEFAULT_REGISTRY}) \u2014 ${registryNames.size} component(s) listed.`));
+  } catch (err) {
+    levels.push(report("fail", `Registry unreachable at ${DEFAULT_REGISTRY}: ${err.message}`));
+  }
+  if (config && registryNames) {
+    const uiDir = resolveAliasDir(cwd, config, "ui");
+    if (existsSync5(uiDir)) {
+      const files = (await readdir(uiDir)).filter((f) => f.endsWith(".tsx"));
+      const unknown = files.filter((f) => !registryNames.has(f.replace(/\.tsx$/, "")));
+      if (unknown.length === 0) {
+        levels.push(report("pass", `Every .tsx file in ${path5.relative(cwd, uiDir)} matches a name in the registry.`));
+      } else {
+        levels.push(
+          report(
+            "warn",
+            `${unknown.length} file(s) in ${path5.relative(cwd, uiDir)} don't match any current registry name (hand-written, or removed from the registry since you added them): ${unknown.join(", ")}`
+          )
+        );
+      }
+    }
+  }
+  const passed = levels.filter((l) => l === "pass").length;
+  const warned = levels.filter((l) => l === "warn").length;
+  const failed = levels.filter((l) => l === "fail").length;
+  console.log();
+  console.log(`${passed} passed, ${warned} warned, ${failed} failed`);
+  if (failed > 0) process.exitCode = 1;
+}
+
+// src/commands/init.ts
+import { existsSync as existsSync6 } from "fs";
+import path6 from "path";
+import pc3 from "picocolors";
 import prompts from "prompts";
 async function init(options) {
   const cwd = process.cwd();
-  const configPath = path5.join(cwd, CONFIG_FILE);
-  if (existsSync5(configPath) && !options.yes) {
+  const configPath = path6.join(cwd, CONFIG_FILE);
+  if (existsSync6(configPath) && !options.yes) {
     const { proceed } = await prompts({
       type: "confirm",
       name: "proceed",
@@ -223,7 +308,7 @@ async function init(options) {
       return;
     }
   }
-  const srcDirDetected = existsSync5(path5.join(cwd, "src"));
+  const srcDirDetected = existsSync6(path6.join(cwd, "src"));
   const answers = options.yes ? {
     srcDir: srcDirDetected,
     css: DEFAULT_CONFIG.tailwind.css,
@@ -273,38 +358,110 @@ async function init(options) {
     }
   };
   await writeConfig(cwd, config);
-  console.log(pc2.green("\u2714"), `Created ${CONFIG_FILE}`);
+  console.log(pc3.green("\u2714"), `Created ${CONFIG_FILE}`);
   const items = await resolveTree(options.registry, ["tokens"]);
   const { written, skipped } = await writeItems(cwd, config, items.values(), false);
-  for (const file of written) console.log(pc2.green("\u2714"), `Wrote ${file}`);
+  for (const file of written) console.log(pc3.green("\u2714"), `Wrote ${file}`);
   for (const file of skipped) {
-    console.log(pc2.yellow("!"), `${file} already exists \u2014 merge the token contract in by hand, or delete it and re-run init.`);
+    console.log(pc3.yellow("!"), `${file} already exists \u2014 merge the token contract in by hand, or delete it and re-run init.`);
   }
   console.log();
-  console.log(`Next: ${pc2.cyan("npx @kinetixui/cli add button")}`);
-  console.log(`See everything: ${pc2.cyan("npx @kinetixui/cli list")}`);
+  console.log(`Next: ${pc3.cyan("npx @kinetixui/cli add button")}`);
+  console.log(`See everything: ${pc3.cyan("npx @kinetixui/cli list")}`);
+}
+
+// src/commands/inspect.ts
+import { existsSync as existsSync7 } from "fs";
+import path7 from "path";
+import pc4 from "picocolors";
+async function inspect(name, options) {
+  const item = await fetchRegistryItem(options.registry, name);
+  console.log(`${pc4.bold(item.title ?? item.name)} ${pc4.dim(`(${item.name})`)}`);
+  if (item.description) console.log(item.description);
+  console.log();
+  console.log(`${pc4.dim("Type")}         ${item.type}`);
+  const cwd = process.cwd();
+  const config = await readConfig(cwd);
+  if (config) {
+    const uiDir = resolveAliasDir(cwd, config, "ui");
+    const installed = item.files.some(
+      (file) => file.type === "registry:ui" && existsSync7(path7.join(uiDir, path7.basename(file.target)))
+    );
+    console.log(`${pc4.dim("Installed")}    ${installed ? pc4.green("yes") : pc4.yellow("no")}`);
+  }
+  console.log(
+    `${pc4.dim("Depends on")}   ${item.dependencies?.length ? item.dependencies.join(", ") : pc4.dim("(none)")}`
+  );
+  console.log(
+    `${pc4.dim("Registry")}     ${item.registryDependencies?.length ? item.registryDependencies.join(", ") : pc4.dim("(none)")}`
+  );
+  console.log();
+  console.log(pc4.dim("Files:"));
+  for (const file of item.files) {
+    console.log(`  ${file.path} ${pc4.dim("\u2192")} ${file.target}`);
+  }
+  const spec = await fetchComponentSpec(options.registry, name);
+  if (spec) {
+    console.log();
+    console.log(pc4.dim("Variants:"));
+    for (const [axis, options_] of Object.entries(spec.variants)) {
+      console.log(`  ${pc4.dim(axis)}   ${options_.join(", ")}`);
+    }
+  }
+  console.log();
+  console.log(`Add it: ${pc4.cyan(`npx @kinetixui/cli add ${item.name}`)}`);
 }
 
 // src/commands/list.ts
-import pc3 from "picocolors";
+import pc5 from "picocolors";
 async function list(options) {
   const items = await fetchRegistryIndex(options.registry);
   const components = items.filter((item) => item.type === "registry:ui").sort((a, b) => a.name.localeCompare(b.name));
   console.log(`${components.length} component(s):`);
   console.log();
   for (const item of components) {
-    const description = item.description ? pc3.dim(` \u2014 ${item.description}`) : "";
-    console.log(`  ${pc3.cyan(item.name)}${description}`);
+    const description = item.description ? pc5.dim(` \u2014 ${item.description}`) : "";
+    console.log(`  ${pc5.cyan(item.name)}${description}`);
+  }
+  console.log();
+  console.log(`Add one: ${pc5.cyan("npx @kinetixui/cli add <name>")}`);
+  console.log(`Add everything: ${pc5.cyan("npx @kinetixui/cli add --all")}`);
+}
+
+// src/commands/parity.ts
+import pc6 from "picocolors";
+var PLATFORMS = ["React", "SwiftUI", "Compose", "Flutter"];
+var PLATFORM_ABBR = {
+  React: "RE",
+  SwiftUI: "SW",
+  Compose: "JC",
+  Flutter: "FL"
+};
+async function parity(names, options) {
+  const items = await fetchRegistryIndex(options.registry);
+  const components = items.filter((item) => item.type === "registry:ui").sort((a, b) => a.name.localeCompare(b.name));
+  const rows = names.length ? names.map((name) => {
+    const item = components.find((c) => c.name === name);
+    if (!item) throw new Error(`"${name}" isn't in the registry. Run "kinetixui list" to see what's available.`);
+    return item;
+  }) : components;
+  const nameWidth = Math.max(9, ...rows.map((r) => r.name.length));
+  const header = `${"COMPONENT".padEnd(nameWidth)}  ${PLATFORMS.map((p) => PLATFORM_ABBR[p]).join("  ")}  STATUS`;
+  console.log(pc6.dim(header));
+  for (const item of rows) {
+    const on = new Set(item.platforms ?? PLATFORMS);
+    const marks = PLATFORMS.map((p) => on.has(p) ? pc6.green("\u2713 ") : pc6.dim("\u2014 "));
+    const status = item.status ? pc6.yellow(item.status) : "";
+    console.log(`${item.name.padEnd(nameWidth)}  ${marks.join(" ")}  ${status}`);
   }
   console.log();
-  console.log(`Add one: ${pc3.cyan("npx @kinetixui/cli add <name>")}`);
-  console.log(`Add everything: ${pc3.cyan("npx @kinetixui/cli add --all")}`);
+  console.log(`${rows.length} of ${components.length} component(s) shown.`);
 }
 
 // package.json
 var package_default = {
   name: "@kinetixui/cli",
-  version: "0.12.0",
+  version: "0.14.0",
   description: "Add KinetixUI components and tokens to your project.",
   type: "module",
   license: "MIT",
@@ -342,14 +499,13 @@ var package_default = {
 };
 
 // src/index.ts
-var DEFAULT_REGISTRY = "https://kinetixui.com/r";
 var program = new Command();
 program.name("kinetixui").description("Add KinetixUI components and tokens to your project.").version(package_default.version);
 program.command("init").description("Set up kinetixui.json and pull in the token contract.").option("-y, --yes", "skip prompts and use defaults", false).option("-r, --registry <url>", "registry base URL", DEFAULT_REGISTRY).action(async (opts) => {
   try {
     await init({ registry: opts.registry, yes: opts.yes });
   } catch (err) {
-    console.error(pc4.red("\u2716"), err.message);
+    console.error(pc7.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -357,7 +513,7 @@ program.command("add").description("Add one or more components to your project."
   try {
     await add(components, { registry: opts.registry, overwrite: opts.overwrite, all: opts.all });
   } catch (err) {
-    console.error(pc4.red("\u2716"), err.message);
+    console.error(pc7.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });
@@ -365,7 +521,31 @@ program.command("list").description("List every component available in the regis
   try {
     await list({ registry: opts.registry });
   } catch (err) {
-    console.error(pc4.red("\u2716"), err.message);
+    console.error(pc7.red("\u2716"), err.message);
+    process.exitCode = 1;
+  }
+});
+program.command("inspect").description("Show everything the registry knows about one component.").argument("<name>", "component name, e.g. button").option("-r, --registry <url>", "registry base URL", DEFAULT_REGISTRY).action(async (name, opts) => {
+  try {
+    await inspect(name, { registry: opts.registry });
+  } catch (err) {
+    console.error(pc7.red("\u2716"), err.message);
+    process.exitCode = 1;
+  }
+});
+program.command("parity").description("Show which platforms carry each component (or one, by name).").argument("[components...]", "component names, e.g. button card \u2014 omit for the full matrix").option("-r, --registry <url>", "registry base URL", DEFAULT_REGISTRY).action(async (components, opts) => {
+  try {
+    await parity(components, { registry: opts.registry });
+  } catch (err) {
+    console.error(pc7.red("\u2716"), err.message);
+    process.exitCode = 1;
+  }
+});
+program.command("doctor").description("Check kinetixui.json, its aliases, and the registry connection.").action(async () => {
+  try {
+    await doctor();
+  } catch (err) {
+    console.error(pc7.red("\u2716"), err.message);
     process.exitCode = 1;
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kinetixui/cli",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Add KinetixUI components and tokens to your project.",
   "type": "module",
   "license": "MIT",