@hypoth-ui/cli 0.0.1

package/dist/diff-BQEXG7HU.js

@@ -0,0 +1,93 @@
+import {
+  fetchRegistry,
+  getComponent
+} from "./chunk-GJ6JOQ3Q.js";
+import {
+  readConfig
+} from "./chunk-YPKFYE45.js";
+
+// src/commands/diff.ts
+import pc from "picocolors";
+async function diffCommand(options = {}) {
+  const cwd = process.cwd();
+  let config;
+  try {
+    config = readConfig(cwd);
+  } catch (error) {
+    console.error(pc.red(error.message));
+    process.exit(1);
+  }
+  if (config.components.length === 0) {
+    console.log(pc.yellow("No components installed yet."));
+    console.log(pc.dim("Run 'npx @hypoth-ui/cli add <component>' to add components."));
+    return;
+  }
+  console.log(pc.dim("Checking for updates..."));
+  const registry = await fetchRegistry();
+  const updates = [];
+  for (const installed of config.components) {
+    const component = getComponent(registry, installed.name);
+    if (!component) {
+      updates.push({
+        name: installed.name,
+        currentVersion: installed.version,
+        latestVersion: "unknown",
+        hasUpdate: false
+      });
+      continue;
+    }
+    const hasUpdate = compareVersions(installed.version, component.version) < 0;
+    updates.push({
+      name: installed.name,
+      currentVersion: installed.version,
+      latestVersion: component.version,
+      hasUpdate
+    });
+  }
+  if (options.json) {
+    console.log(JSON.stringify(updates, null, 2));
+    return;
+  }
+  const updatesAvailable = updates.filter((u) => u.hasUpdate);
+  console.log("");
+  if (updatesAvailable.length === 0) {
+    console.log(pc.green("All components are up to date!"));
+    console.log("");
+    return;
+  }
+  console.log(pc.bold(`${updatesAvailable.length} update(s) available`));
+  console.log("");
+  const nameWidth = 20;
+  const currentWidth = 15;
+  const latestWidth = 15;
+  console.log(
+    pc.dim(
+      `${"Component".padEnd(nameWidth)}${"Current".padEnd(currentWidth)}${"Latest".padEnd(latestWidth)}`
+    )
+  );
+  console.log(pc.dim("\u2500".repeat(nameWidth + currentWidth + latestWidth)));
+  for (const update of updates) {
+    const name = update.name.padEnd(nameWidth);
+    const current = update.currentVersion.padEnd(currentWidth);
+    const latest = update.hasUpdate ? pc.green(update.latestVersion.padEnd(latestWidth)) : update.latestVersion.padEnd(latestWidth);
+    const indicator = update.hasUpdate ? pc.yellow("\u2191 ") : "  ";
+    console.log(`${indicator}${name}${current}${latest}`);
+  }
+  console.log("");
+  console.log(pc.dim("To update, run: npx @hypoth-ui/cli add <component> --overwrite"));
+  console.log("");
+}
+function compareVersions(a, b) {
+  const partsA = a.replace(/^v/, "").split(".").map(Number);
+  const partsB = b.replace(/^v/, "").split(".").map(Number);
+  for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
+    const numA = partsA[i] ?? 0;
+    const numB = partsB[i] ?? 0;
+    if (numA < numB) return -1;
+    if (numA > numB) return 1;
+  }
+  return 0;
+}
+export {
+  diffCommand
+};

package/dist/index.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+var VERSION = "0.0.1";
+var program = new Command();
+program.name("hypoth-ui").description("CLI for installing hypoth-ui components").version(VERSION);
+program.command("init").description("Initialize hypoth-ui in your project").option("-s, --style <style>", "Installation style (copy or package)").option("-f, --framework <framework>", "Framework (react, next, wc, vanilla)").option("-y, --yes", "Skip prompts and use defaults").action(async (options) => {
+  const { initCommand } = await import("./init-7AZXYAPJ.js");
+  await initCommand(options);
+});
+program.command("add").description("Add components to your project").argument("[components...]", "Component names to add").option("-o, --overwrite", "Overwrite existing components").option("-a, --all", "Add all available components").action(async (components, options) => {
+  const { addCommand } = await import("./add-PDBC4JTE.js");
+  await addCommand(components, options);
+});
+program.command("list").description("List available components").option("-j, --json", "Output as JSON").action(async (options) => {
+  const { listCommand } = await import("./list-X6ZLM2NQ.js");
+  await listCommand(options);
+});
+program.command("diff").description("Check for component updates").option("-j, --json", "Output as JSON").action(async (options) => {
+  const { diffCommand } = await import("./diff-BQEXG7HU.js");
+  await diffCommand(options);
+});
+program.parse();

package/dist/init-7AZXYAPJ.js

@@ -0,0 +1,340 @@
+import {
+  installPackages
+} from "./chunk-5LTQ2XVL.js";
+import {
+  configExists,
+  createConfig,
+  readConfig,
+  writeConfig
+} from "./chunk-YPKFYE45.js";
+
+// src/commands/init.ts
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+
+// src/utils/detect.ts
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
+function detectProject(cwd = process.cwd()) {
+  const signals = [];
+  const packageManager = detectPackageManager(cwd, signals);
+  const { typescript, tsconfigPath } = detectTypeScript(cwd, signals);
+  const framework = detectFramework(cwd, signals);
+  const srcDir = detectSrcDir(cwd, signals);
+  const confidence = calculateConfidence(signals);
+  return {
+    framework,
+    packageManager,
+    typescript,
+    tsconfigPath,
+    srcDir,
+    confidence,
+    signals
+  };
+}
+function detectPackageManager(cwd, signals) {
+  if (existsSync(join(cwd, "pnpm-lock.yaml"))) {
+    signals.push("pnpm-lock.yaml found");
+    return "pnpm";
+  }
+  if (existsSync(join(cwd, "yarn.lock"))) {
+    signals.push("yarn.lock found");
+    return "yarn";
+  }
+  if (existsSync(join(cwd, "bun.lockb"))) {
+    signals.push("bun.lockb found");
+    return "bun";
+  }
+  if (existsSync(join(cwd, "package-lock.json"))) {
+    signals.push("package-lock.json found");
+    return "npm";
+  }
+  signals.push("No lock file found, defaulting to npm");
+  return "npm";
+}
+function detectTypeScript(cwd, signals) {
+  const tsconfigPaths = [
+    "tsconfig.json",
+    "tsconfig.base.json",
+    "jsconfig.json"
+  ];
+  for (const configPath of tsconfigPaths) {
+    const fullPath = join(cwd, configPath);
+    if (existsSync(fullPath)) {
+      const isTypescript = configPath !== "jsconfig.json";
+      signals.push(`${configPath} found (TypeScript: ${isTypescript})`);
+      return {
+        typescript: isTypescript,
+        tsconfigPath: isTypescript ? fullPath : void 0
+      };
+    }
+  }
+  signals.push("No tsconfig.json found, assuming JavaScript");
+  return { typescript: false };
+}
+function detectFramework(cwd, signals) {
+  const packageJsonPath = join(cwd, "package.json");
+  if (!existsSync(packageJsonPath)) {
+    signals.push("No package.json found");
+    return "unknown";
+  }
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+    const deps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    if (deps.next) {
+      signals.push("next found in dependencies \u2192 Next.js (React)");
+      return "next";
+    }
+    if (deps.react) {
+      signals.push("react found in dependencies \u2192 React");
+      return "react";
+    }
+    if (deps.lit) {
+      signals.push("lit found in dependencies \u2192 Web Components");
+      return "wc";
+    }
+    if (Object.keys(deps).some((key) => key.startsWith("@lit/"))) {
+      signals.push("@lit/* found in dependencies \u2192 Web Components");
+      return "wc";
+    }
+    signals.push("No recognized framework in dependencies \u2192 vanilla");
+    return "vanilla";
+  } catch {
+    signals.push("Failed to parse package.json");
+    return "unknown";
+  }
+}
+function detectSrcDir(cwd, signals) {
+  const srcDirs = ["src", "app", "lib", "source"];
+  for (const dir of srcDirs) {
+    if (existsSync(join(cwd, dir))) {
+      signals.push(`${dir}/ directory found`);
+      return dir;
+    }
+  }
+  signals.push("No common source directory found, defaulting to src");
+  return "src";
+}
+function calculateConfidence(signals) {
+  const positiveSignals = signals.filter(
+    (s) => !s.includes("defaulting") && !s.includes("No ")
+  ).length;
+  if (positiveSignals >= 3) return "high";
+  if (positiveSignals >= 2) return "medium";
+  return "low";
+}
+function isValidProject(cwd = process.cwd()) {
+  return existsSync(join(cwd, "package.json"));
+}
+
+// src/commands/init.ts
+var CORE_PACKAGES = ["@hypoth-ui/tokens"];
+async function initCommand(options = {}) {
+  p.intro(pc.bgCyan(pc.black(" hypoth-ui init ")));
+  const cwd = process.cwd();
+  if (!isValidProject(cwd)) {
+    p.cancel(pc.red("No package.json found. Please run this command in a valid project directory."));
+    process.exit(1);
+  }
+  if (configExists(cwd)) {
+    const shouldReset = await handleExistingConfig(cwd, options);
+    if (!shouldReset) {
+      p.cancel("Init cancelled.");
+      process.exit(0);
+    }
+  }
+  const detection = detectProject(cwd);
+  p.log.info(
+    `Detected: ${pc.cyan(detection.framework)} framework, ${pc.cyan(detection.packageManager)} package manager, TypeScript: ${pc.cyan(String(detection.typescript))}`
+  );
+  const config = options.yes ? createConfigFromDefaults(detection) : await promptForConfig(detection, options);
+  const spinner2 = p.spinner();
+  spinner2.start("Creating ds.config.json");
+  writeConfig(config, cwd);
+  spinner2.stop("Created ds.config.json");
+  spinner2.start(`Installing ${CORE_PACKAGES.join(", ")}...`);
+  try {
+    await installPackages(CORE_PACKAGES, config.packageManager, { cwd });
+    spinner2.stop(`Installed ${CORE_PACKAGES.join(", ")}`);
+  } catch (error) {
+    spinner2.stop(pc.red(`Failed to install packages: ${error.message}`));
+    p.log.warn("You may need to install packages manually:");
+    p.log.info(`  ${getInstallCommandForDisplay(config.packageManager, CORE_PACKAGES)}`);
+  }
+  p.outro(pc.green("hypoth-ui initialized successfully!"));
+  displayNextSteps(config);
+}
+async function handleExistingConfig(cwd, options) {
+  if (options.yes) {
+    p.log.warn("Overwriting existing ds.config.json");
+    return true;
+  }
+  const existingConfig = readConfig(cwd);
+  const componentsCount = existingConfig.components.length;
+  p.log.warn(
+    `Found existing ds.config.json with ${componentsCount} installed component(s)`
+  );
+  const action = await p.select({
+    message: "What would you like to do?",
+    options: [
+      { value: "cancel", label: "Cancel" },
+      { value: "reset", label: "Reset configuration (keep installed components)" },
+      { value: "overwrite", label: "Overwrite completely (lose component tracking)" }
+    ]
+  });
+  if (p.isCancel(action) || action === "cancel") {
+    return false;
+  }
+  if (action === "reset") {
+    p.log.info("Component tracking will be preserved.");
+  }
+  return true;
+}
+async function promptForConfig(detection, options) {
+  const style = options.style ?? await promptForStyle();
+  const framework = options.framework ?? await promptForFramework(detection);
+  const paths = await promptForPaths(detection, framework);
+  return createConfig({
+    style,
+    framework,
+    typescript: detection.typescript,
+    packageManager: detection.packageManager,
+    paths,
+    aliases: {
+      components: `@/${paths.components.replace(/^src\//, "")}`,
+      lib: `@/${paths.utils.replace(/^src\//, "")}`
+    }
+  });
+}
+async function promptForStyle() {
+  const style = await p.select({
+    message: "How would you like to install components?",
+    options: [
+      {
+        value: "package",
+        label: "Package mode (recommended)",
+        hint: "Install as npm packages - easier updates, tree-shakeable"
+      },
+      {
+        value: "copy",
+        label: "Copy mode",
+        hint: "Copy source files - full customization, you own the code"
+      }
+    ]
+  });
+  if (p.isCancel(style)) {
+    p.cancel("Init cancelled.");
+    process.exit(0);
+  }
+  return style;
+}
+async function promptForFramework(detection) {
+  if (detection.framework !== "unknown" && detection.confidence === "high") {
+    const useDetected = await p.confirm({
+      message: `Use detected framework: ${detection.framework}?`,
+      initialValue: true
+    });
+    if (p.isCancel(useDetected)) {
+      p.cancel("Init cancelled.");
+      process.exit(0);
+    }
+    if (useDetected) {
+      return detection.framework;
+    }
+  }
+  const framework = await p.select({
+    message: "Which framework are you using?",
+    options: [
+      { value: "next", label: "Next.js (React)" },
+      { value: "react", label: "React" },
+      { value: "wc", label: "Web Components (Lit)" },
+      { value: "vanilla", label: "Vanilla JS (Web Components)" }
+    ],
+    initialValue: detection.framework !== "unknown" ? detection.framework : "react"
+  });
+  if (p.isCancel(framework)) {
+    p.cancel("Init cancelled.");
+    process.exit(0);
+  }
+  return framework;
+}
+async function promptForPaths(detection, framework) {
+  const srcDir = detection.srcDir;
+  const defaultComponentsPath = framework === "next" ? `${srcDir}/components/ui` : `${srcDir}/components/ui`;
+  const defaultUtilsPath = framework === "next" ? `${srcDir}/lib` : `${srcDir}/lib`;
+  const componentsPath = await p.text({
+    message: "Where should components be placed?",
+    initialValue: defaultComponentsPath,
+    placeholder: defaultComponentsPath
+  });
+  if (p.isCancel(componentsPath)) {
+    p.cancel("Init cancelled.");
+    process.exit(0);
+  }
+  const utilsPath = await p.text({
+    message: "Where should utility files be placed?",
+    initialValue: defaultUtilsPath,
+    placeholder: defaultUtilsPath
+  });
+  if (p.isCancel(utilsPath)) {
+    p.cancel("Init cancelled.");
+    process.exit(0);
+  }
+  return {
+    components: componentsPath,
+    utils: utilsPath
+  };
+}
+function createConfigFromDefaults(detection) {
+  const framework = detection.framework !== "unknown" ? detection.framework : "react";
+  const srcDir = detection.srcDir;
+  return createConfig({
+    style: "package",
+    framework,
+    typescript: detection.typescript,
+    packageManager: detection.packageManager,
+    paths: {
+      components: `${srcDir}/components/ui`,
+      utils: `${srcDir}/lib`
+    },
+    aliases: {
+      components: "@/components/ui",
+      lib: "@/lib"
+    }
+  });
+}
+function displayNextSteps(config) {
+  console.log("");
+  console.log(pc.bold("Next steps:"));
+  console.log("");
+  console.log(`  ${pc.cyan("1.")} Add a component:`);
+  console.log(`     ${pc.dim("npx @hypoth-ui/cli add button")}`);
+  console.log("");
+  console.log(`  ${pc.cyan("2.")} List available components:`);
+  console.log(`     ${pc.dim("npx @hypoth-ui/cli list")}`);
+  console.log("");
+  if (config.style === "copy") {
+    console.log(`  ${pc.cyan("3.")} Components will be copied to: ${pc.dim(config.paths.components)}`);
+    console.log("");
+  }
+}
+function getInstallCommandForDisplay(pm, packages) {
+  const pkgList = packages.join(" ");
+  switch (pm) {
+    case "pnpm":
+      return `pnpm add ${pkgList}`;
+    case "yarn":
+      return `yarn add ${pkgList}`;
+    case "bun":
+      return `bun add ${pkgList}`;
+    case "npm":
+    default:
+      return `npm install ${pkgList}`;
+  }
+}
+export {
+  initCommand
+};

package/dist/list-X6ZLM2NQ.js

@@ -0,0 +1,88 @@
+import {
+  getComponentsForFramework,
+  loadBundledRegistry
+} from "./chunk-GJ6JOQ3Q.js";
+import {
+  configExists,
+  readConfig
+} from "./chunk-YPKFYE45.js";
+
+// src/commands/list.ts
+import pc from "picocolors";
+async function listCommand(options = {}) {
+  const cwd = process.cwd();
+  const registry = loadBundledRegistry();
+  let config;
+  if (configExists(cwd)) {
+    try {
+      config = readConfig(cwd);
+    } catch {
+    }
+  }
+  const components = config ? getComponentsForFramework(registry, config.framework) : registry.components;
+  if (options.json) {
+    const output = components.map((c) => ({
+      name: c.name,
+      displayName: c.displayName,
+      description: c.description,
+      version: c.version,
+      status: c.status,
+      frameworks: c.frameworks,
+      installed: config?.components.some((ic) => ic.name === c.name) ?? false
+    }));
+    console.log(JSON.stringify(output, null, 2));
+    return;
+  }
+  console.log("");
+  console.log(pc.bold("Available Components"));
+  console.log("");
+  if (config) {
+    console.log(pc.dim(`Framework: ${config.framework} | Mode: ${config.style}`));
+    console.log("");
+  }
+  const nameWidth = 20;
+  const statusWidth = 10;
+  const versionWidth = 10;
+  const descWidth = 45;
+  console.log(
+    pc.dim(
+      `${"Name".padEnd(nameWidth)}${"Status".padEnd(statusWidth)}${"Version".padEnd(versionWidth)}Description`
+    )
+  );
+  console.log(pc.dim("\u2500".repeat(nameWidth + statusWidth + versionWidth + descWidth)));
+  for (const component of components) {
+    const isInstalled = config?.components.some((ic) => ic.name === component.name);
+    const installedMark = isInstalled ? pc.green("\u2713 ") : "  ";
+    const name = (installedMark + component.name).padEnd(nameWidth + 2).slice(0, nameWidth + 2);
+    const status = formatStatus(component.status).padEnd(statusWidth);
+    const version = component.version.padEnd(versionWidth);
+    const desc = component.description.length > descWidth ? component.description.slice(0, descWidth - 3) + "..." : component.description;
+    console.log(`${name}${status}${version}${pc.dim(desc)}`);
+  }
+  console.log("");
+  console.log(pc.dim(`Total: ${components.length} components`));
+  if (config) {
+    const installedCount = config.components.length;
+    if (installedCount > 0) {
+      console.log(pc.dim(`Installed: ${installedCount} (${pc.green("\u2713")} marked)`));
+    }
+  } else {
+    console.log(pc.dim("Run 'npx @hypoth-ui/cli init' to initialize your project"));
+  }
+  console.log("");
+}
+function formatStatus(status) {
+  switch (status) {
+    case "stable":
+      return pc.green(status);
+    case "beta":
+      return pc.yellow(status);
+    case "alpha":
+      return pc.red(status);
+    default:
+      return status;
+  }
+}
+export {
+  listCommand
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@hypoth-ui/cli",
+  "version": "0.0.1",
+  "description": "CLI tool for adding hypoth-ui components to your project",
+  "type": "module",
+  "bin": {
+    "hypoth-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "registry"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:unit": "vitest run tests/unit",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "commander": "^12.1.0",
+    "@clack/prompts": "^0.7.0",
+    "picocolors": "^1.1.1",
+    "execa": "^9.5.2",
+    "gray-matter": "^4.0.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "cli",
+    "design-system",
+    "components",
+    "hypoth-ui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hypoth-ui/hypoth-ui.git",
+    "directory": "packages/cli"
+  }
+}