@hypoth-ui/cli 0.0.1

package/README.md

@@ -0,0 +1,154 @@
+# @hypoth-ui/cli
+
+CLI tool for adding hypoth-ui components to your project.
+
+## Installation
+
+```bash
+npx @hypoth-ui/cli init
+```
+
+Or install globally:
+
+```bash
+npm install -g @hypoth-ui/cli
+```
+
+## Quick Start
+
+1. Initialize hypoth-ui in your project:
+
+```bash
+npx @hypoth-ui/cli init
+```
+
+2. Add components:
+
+```bash
+npx @hypoth-ui/cli add button
+npx @hypoth-ui/cli add dialog menu
+```
+
+3. List available components:
+
+```bash
+npx @hypoth-ui/cli list
+```
+
+## Commands
+
+### `init`
+
+Initialize hypoth-ui in your project. Creates `ds.config.json` and installs core dependencies.
+
+```bash
+npx @hypoth-ui/cli init [options]
+```
+
+Options:
+- `-s, --style <style>` - Installation style: `copy` (source files) or `package` (npm packages)
+- `-f, --framework <framework>` - Framework: `react`, `next`, `wc`, or `vanilla`
+- `-y, --yes` - Skip prompts and use defaults
+
+### `add`
+
+Add components to your project.
+
+```bash
+npx @hypoth-ui/cli add <components...> [options]
+```
+
+Options:
+- `-o, --overwrite` - Overwrite existing components
+- `-a, --all` - Add all available components
+
+Examples:
+```bash
+npx @hypoth-ui/cli add button          # Add single component
+npx @hypoth-ui/cli add button dialog   # Add multiple components
+npx @hypoth-ui/cli add --all           # Add all components
+npx @hypoth-ui/cli add button -o       # Overwrite existing
+```
+
+### `list`
+
+List all available components.
+
+```bash
+npx @hypoth-ui/cli list [options]
+```
+
+Options:
+- `-j, --json` - Output as JSON
+
+### `diff`
+
+Check for component updates.
+
+```bash
+npx @hypoth-ui/cli diff [options]
+```
+
+Options:
+- `-j, --json` - Output as JSON
+
+## Installation Modes
+
+### Package Mode (Recommended)
+
+Components are installed as npm packages. Easier to update, tree-shakeable.
+
+```bash
+npx @hypoth-ui/cli init --style package
+```
+
+### Copy Mode
+
+Component source files are copied to your project. Full customization, you own the code.
+
+```bash
+npx @hypoth-ui/cli init --style copy
+```
+
+## Configuration
+
+Configuration is stored in `ds.config.json`:
+
+```json
+{
+  "$schema": "https://hypoth-ui.dev/schema/ds.config.json",
+  "style": "package",
+  "framework": "next",
+  "typescript": true,
+  "packageManager": "pnpm",
+  "paths": {
+    "components": "src/components/ui",
+    "utils": "src/lib"
+  },
+  "aliases": {
+    "components": "@/components/ui",
+    "lib": "@/lib"
+  },
+  "components": []
+}
+```
+
+## Supported Frameworks
+
+- **React** - Standard React applications
+- **Next.js** - Next.js App Router projects
+- **Web Components** - Lit-based Web Components
+- **Vanilla** - Vanilla JS using Web Components
+
+## Supported Package Managers
+
+- npm
+- pnpm
+- yarn
+- bun
+
+The CLI automatically detects your package manager from lock files.
+
+## License
+
+MIT

package/dist/add-PDBC4JTE.js

@@ -0,0 +1,238 @@
+import {
+  installPackages
+} from "./chunk-5LTQ2XVL.js";
+import {
+  getComponent,
+  getComponentNames,
+  getNpmDependencies,
+  isComponentCompatible,
+  loadBundledRegistry,
+  resolveDependencies
+} from "./chunk-GJ6JOQ3Q.js";
+import {
+  addInstalledComponent,
+  isComponentInstalled,
+  readConfig,
+  writeConfig
+} from "./chunk-YPKFYE45.js";
+
+// src/commands/add.ts
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+
+// src/utils/copy.ts
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
+async function copyComponentFiles(component, config, options = {}) {
+  const { cwd = process.cwd(), overwrite = false, sourceDir } = options;
+  const targetDir = join(cwd, config.paths.components);
+  const files = filterFilesForFramework(component.files, config.framework);
+  const result = {
+    copied: [],
+    skipped: [],
+    errors: []
+  };
+  for (const file of files) {
+    const targetPath = join(targetDir, component.name, file.target);
+    if (existsSync(targetPath) && !overwrite) {
+      result.skipped.push({
+        file: file.target,
+        reason: "exists"
+      });
+      continue;
+    }
+    try {
+      const content = await getSourceContent(file, component, sourceDir);
+      const transformedContent = transformImports(content, config, file.type);
+      const dir = dirname(targetPath);
+      if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+      }
+      writeFileSync(targetPath, transformedContent, "utf-8");
+      result.copied.push(targetPath);
+    } catch (error) {
+      result.errors.push({
+        file: file.target,
+        error: error.message
+      });
+    }
+  }
+  return result;
+}
+function filterFilesForFramework(files, framework) {
+  const frameworkMap = {
+    react: "react",
+    next: "react",
+    wc: "wc",
+    vanilla: "wc"
+  };
+  const targetFramework = frameworkMap[framework];
+  return files.filter((file) => {
+    if (!file.framework) {
+      return true;
+    }
+    return file.framework === targetFramework;
+  });
+}
+async function getSourceContent(file, component, sourceDir) {
+  if (sourceDir) {
+    const sourcePath = join(sourceDir, component.name, file.path);
+    if (existsSync(sourcePath)) {
+      return readFileSync(sourcePath, "utf-8");
+    }
+  }
+  const bundledPath = getBundledTemplatePath(component.name, file.path);
+  if (existsSync(bundledPath)) {
+    return readFileSync(bundledPath, "utf-8");
+  }
+  throw new Error(`Source file not found: ${file.path}`);
+}
+function getBundledTemplatePath(componentName, filePath) {
+  const __dirname2 = new URL(".", import.meta.url).pathname;
+  return join(__dirname2, "../../templates", componentName, filePath);
+}
+function transformImports(content, config, fileType) {
+  if (fileType !== "ts" && fileType !== "tsx") {
+    return content;
+  }
+  let result = content;
+  result = result.replace(
+    /@\/components\//g,
+    `${config.aliases.components}/`
+  );
+  result = result.replace(
+    /@\/lib\//g,
+    `${config.aliases.lib}/`
+  );
+  return result;
+}
+function ensureComponentsDir(config, cwd = process.cwd()) {
+  const targetDir = join(cwd, config.paths.components);
+  if (!existsSync(targetDir)) {
+    mkdirSync(targetDir, { recursive: true });
+  }
+}
+
+// src/commands/add.ts
+async function addCommand(components, options = {}) {
+  p.intro(pc.bgCyan(pc.black(" hypoth-ui add ")));
+  const cwd = process.cwd();
+  let config;
+  try {
+    config = readConfig(cwd);
+  } catch (error) {
+    p.cancel(pc.red(error.message));
+    process.exit(1);
+  }
+  const registry = loadBundledRegistry();
+  if (options.all) {
+    components = getComponentNames(registry);
+    p.log.info(`Installing all ${components.length} components`);
+  }
+  if (components.length === 0) {
+    p.cancel(pc.red("No components specified. Usage: npx @hypoth-ui/cli add <component>"));
+    process.exit(1);
+  }
+  const invalidComponents = [];
+  const validComponents = [];
+  for (const name of components) {
+    const component = getComponent(registry, name);
+    if (!component) {
+      invalidComponents.push(name);
+    } else if (!isComponentCompatible(component, config.framework)) {
+      p.log.warn(`${pc.yellow(name)} is not compatible with ${config.framework}`);
+    } else {
+      validComponents.push(component);
+    }
+  }
+  if (invalidComponents.length > 0) {
+    p.log.error(`Unknown components: ${invalidComponents.join(", ")}`);
+    p.log.info(`Run ${pc.cyan("npx @hypoth-ui/cli list")} to see available components`);
+    if (validComponents.length === 0) {
+      process.exit(1);
+    }
+  }
+  const toInstall = [];
+  const skipped = [];
+  for (const component of validComponents) {
+    if (isComponentInstalled(config, component.name) && !options.overwrite) {
+      skipped.push(component.name);
+    } else {
+      toInstall.push(component);
+    }
+  }
+  if (skipped.length > 0) {
+    p.log.info(`Skipping already installed: ${skipped.join(", ")} (use --overwrite to replace)`);
+  }
+  if (toInstall.length === 0) {
+    p.outro(pc.yellow("No new components to install"));
+    return;
+  }
+  const componentsToInstall = resolveDependencies(
+    registry,
+    toInstall.map((c) => c.name)
+  );
+  const finalComponents = componentsToInstall.filter(
+    (c) => !isComponentInstalled(config, c.name) || options.overwrite
+  );
+  if (finalComponents.length === 0) {
+    p.outro(pc.yellow("All components already installed"));
+    return;
+  }
+  p.log.info(`Installing: ${finalComponents.map((c) => pc.cyan(c.name)).join(", ")}`);
+  const npmDeps = getNpmDependencies(finalComponents);
+  if (npmDeps.length > 0) {
+    const spinner3 = p.spinner();
+    spinner3.start(`Installing npm dependencies: ${npmDeps.join(", ")}`);
+    try {
+      await installPackages(npmDeps, config.packageManager, { cwd });
+      spinner3.stop(`Installed npm dependencies`);
+    } catch (error) {
+      spinner3.stop(pc.red(`Failed to install npm dependencies: ${error.message}`));
+      process.exit(1);
+    }
+  }
+  const spinner2 = p.spinner();
+  if (config.style === "copy") {
+    ensureComponentsDir(config, cwd);
+    for (const component of finalComponents) {
+      spinner2.start(`Copying ${component.name}...`);
+      try {
+        const result = await copyComponentFiles(component, config, {
+          cwd,
+          overwrite: options.overwrite
+        });
+        if (result.errors.length > 0) {
+          spinner2.stop(pc.red(`Failed to copy ${component.name}: ${result.errors[0]?.error ?? "Unknown error"}`));
+          continue;
+        }
+        config = addInstalledComponent(config, {
+          name: component.name,
+          version: component.version,
+          mode: "copy"
+        });
+        spinner2.stop(`Copied ${component.name}`);
+      } catch (error) {
+        spinner2.stop(pc.red(`Failed to copy ${component.name}: ${error.message}`));
+      }
+    }
+  } else {
+    for (const component of finalComponents) {
+      config = addInstalledComponent(config, {
+        name: component.name,
+        version: component.version,
+        mode: "package"
+      });
+    }
+  }
+  writeConfig(config, cwd);
+  const installed = finalComponents.map((c) => c.name);
+  p.outro(pc.green(`Added ${installed.length} component(s): ${installed.join(", ")}`));
+  if (config.style === "copy") {
+    console.log("");
+    console.log(`Components copied to: ${pc.dim(config.paths.components)}`);
+  }
+}
+export {
+  addCommand
+};

package/dist/chunk-5LTQ2XVL.js

@@ -0,0 +1,52 @@
+// src/utils/install.ts
+import { execa } from "execa";
+async function installPackages(packages, packageManager, options = {}) {
+  const { cwd = process.cwd(), dev = false, silent = false } = options;
+  if (packages.length === 0) {
+    return;
+  }
+  const command = getCommand(packageManager);
+  const args = getArgs(packageManager, packages, dev);
+  await execa(command, args, {
+    cwd,
+    stdio: silent ? "ignore" : "inherit"
+  });
+}
+function getCommand(pm) {
+  return pm;
+}
+function getArgs(pm, packages, dev) {
+  const devFlag = dev ? getDevFlag(pm) : null;
+  const installCommand = getInstallSubcommand(pm);
+  const args = [installCommand, ...packages];
+  if (devFlag) {
+    args.push(devFlag);
+  }
+  return args;
+}
+function getInstallSubcommand(pm) {
+  switch (pm) {
+    case "yarn":
+    case "pnpm":
+    case "bun":
+      return "add";
+    case "npm":
+    default:
+      return "install";
+  }
+}
+function getDevFlag(pm) {
+  switch (pm) {
+    case "yarn":
+    case "pnpm":
+    case "bun":
+      return "-D";
+    case "npm":
+    default:
+      return "--save-dev";
+  }
+}
+
+export {
+  installPackages
+};

package/dist/chunk-GJ6JOQ3Q.js

@@ -0,0 +1,101 @@
+// src/utils/registry.ts
+import { readFileSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var BUNDLED_REGISTRY_PATH = join(__dirname, "../registry/components.json");
+var REMOTE_REGISTRY_URL = "https://hypoth-ui.dev/registry/components.json";
+function loadBundledRegistry() {
+  try {
+    const content = readFileSync(BUNDLED_REGISTRY_PATH, "utf-8");
+    return JSON.parse(content);
+  } catch (error) {
+    throw new Error(`Failed to load bundled registry: ${error.message}`);
+  }
+}
+async function fetchRegistry() {
+  try {
+    const response = await fetch(REMOTE_REGISTRY_URL);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    return await response.json();
+  } catch {
+    return loadBundledRegistry();
+  }
+}
+function getComponent(registry, name) {
+  const normalizedName = name.toLowerCase();
+  return registry.components.find((c) => c.name.toLowerCase() === normalizedName);
+}
+function getComponentNames(registry) {
+  return registry.components.map((c) => c.name);
+}
+function getComponentsForFramework(registry, framework) {
+  const frameworkMap = {
+    react: "react",
+    next: "react",
+    // Next.js uses React components
+    wc: "wc",
+    vanilla: "wc"
+    // Vanilla uses Web Components
+  };
+  const targetFramework = frameworkMap[framework];
+  return registry.components.filter((c) => c.frameworks.includes(targetFramework));
+}
+function resolveDependencies(registry, componentNames) {
+  const resolved = /* @__PURE__ */ new Map();
+  const visiting = /* @__PURE__ */ new Set();
+  function visit(name) {
+    const normalizedName = name.toLowerCase();
+    if (resolved.has(normalizedName)) {
+      return;
+    }
+    if (visiting.has(normalizedName)) {
+      throw new Error(`Circular dependency detected: ${name}`);
+    }
+    const component = getComponent(registry, name);
+    if (!component) {
+      throw new Error(`Component not found in registry: ${name}`);
+    }
+    visiting.add(normalizedName);
+    for (const dep of component.registryDependencies) {
+      visit(dep);
+    }
+    visiting.delete(normalizedName);
+    resolved.set(normalizedName, component);
+  }
+  for (const name of componentNames) {
+    visit(name);
+  }
+  return Array.from(resolved.values());
+}
+function getNpmDependencies(components) {
+  const deps = /* @__PURE__ */ new Set();
+  for (const component of components) {
+    for (const dep of component.dependencies) {
+      deps.add(dep);
+    }
+  }
+  return Array.from(deps);
+}
+function isComponentCompatible(component, framework) {
+  const frameworkMap = {
+    react: "react",
+    next: "react",
+    wc: "wc",
+    vanilla: "wc"
+  };
+  return component.frameworks.includes(frameworkMap[framework]);
+}
+
+export {
+  loadBundledRegistry,
+  fetchRegistry,
+  getComponent,
+  getComponentNames,
+  getComponentsForFramework,
+  resolveDependencies,
+  getNpmDependencies,
+  isComponentCompatible
+};

package/dist/chunk-YPKFYE45.js

@@ -0,0 +1,123 @@
+// src/utils/config.ts
+import { existsSync, readFileSync, writeFileSync } from "fs";
+import { join } from "path";
+var CONFIG_FILE_NAME = "ds.config.json";
+var CONFIG_SCHEMA_URL = "https://hypoth-ui.dev/schema/ds.config.json";
+function configExists(cwd = process.cwd()) {
+  return existsSync(join(cwd, CONFIG_FILE_NAME));
+}
+function getConfigPath(cwd = process.cwd()) {
+  return join(cwd, CONFIG_FILE_NAME);
+}
+function readConfig(cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  if (!existsSync(configPath)) {
+    throw new Error(
+      `Configuration file not found. Run 'hypoth-ui init' first.`
+    );
+  }
+  try {
+    const content = readFileSync(configPath, "utf-8");
+    const config = JSON.parse(content);
+    return validateConfig(config);
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      throw new Error(`Invalid JSON in ${CONFIG_FILE_NAME}: ${error.message}`);
+    }
+    throw error;
+  }
+}
+function writeConfig(config, cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  const content = JSON.stringify(config, null, 2);
+  writeFileSync(configPath, content + "\n", "utf-8");
+}
+function createConfig(options) {
+  const config = {
+    $schema: CONFIG_SCHEMA_URL,
+    style: options.style ?? "package",
+    framework: options.framework ?? "react",
+    typescript: options.typescript ?? true,
+    packageManager: options.packageManager ?? "npm",
+    paths: options.paths ?? {
+      components: "src/components/ui",
+      utils: "src/lib"
+    },
+    aliases: options.aliases ?? {
+      components: "@/components/ui",
+      lib: "@/lib"
+    },
+    components: options.components ?? []
+  };
+  return config;
+}
+function validateConfig(config) {
+  if (!config || typeof config !== "object") {
+    throw new Error("Invalid configuration: expected object");
+  }
+  const cfg = config;
+  if (!["copy", "package"].includes(cfg.style)) {
+    throw new Error('Invalid configuration: style must be "copy" or "package"');
+  }
+  if (!["react", "next", "wc", "vanilla"].includes(cfg.framework)) {
+    throw new Error(
+      'Invalid configuration: framework must be "react", "next", "wc", or "vanilla"'
+    );
+  }
+  if (typeof cfg.typescript !== "boolean") {
+    throw new Error("Invalid configuration: typescript must be a boolean");
+  }
+  if (!["npm", "pnpm", "yarn", "bun"].includes(cfg.packageManager)) {
+    throw new Error(
+      'Invalid configuration: packageManager must be "npm", "pnpm", "yarn", or "bun"'
+    );
+  }
+  if (!cfg.paths || typeof cfg.paths !== "object") {
+    throw new Error("Invalid configuration: paths must be an object");
+  }
+  const paths = cfg.paths;
+  if (typeof paths.components !== "string" || typeof paths.utils !== "string") {
+    throw new Error(
+      "Invalid configuration: paths.components and paths.utils must be strings"
+    );
+  }
+  if (!cfg.aliases || typeof cfg.aliases !== "object") {
+    throw new Error("Invalid configuration: aliases must be an object");
+  }
+  const aliases = cfg.aliases;
+  if (typeof aliases.components !== "string" || typeof aliases.lib !== "string") {
+    throw new Error(
+      "Invalid configuration: aliases.components and aliases.lib must be strings"
+    );
+  }
+  if (!Array.isArray(cfg.components)) {
+    throw new Error("Invalid configuration: components must be an array");
+  }
+  return config;
+}
+function addInstalledComponent(config, component) {
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  const filtered = config.components.filter((c) => c.name !== component.name);
+  return {
+    ...config,
+    components: [
+      ...filtered,
+      {
+        ...component,
+        installedAt: now
+      }
+    ]
+  };
+}
+function isComponentInstalled(config, name) {
+  return config.components.some((c) => c.name === name);
+}
+
+export {
+  configExists,
+  readConfig,
+  writeConfig,
+  createConfig,
+  addInstalledComponent,
+  isComponentInstalled
+};