@beaket/ui 0.1.0

package/bin/cli.mjs

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import { spawnSync } from "child_process";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const script = join(__dirname, "..", "src", "index.ts");
+
+spawnSync("npx", ["tsx", script, ...process.argv.slice(2)], {
+  stdio: "inherit",
+  shell: true,
+});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@beaket/ui",
+  "version": "0.1.0",
+  "description": "CLI for adding Beaket UI components to your project",
+  "type": "module",
+  "bin": {
+    "ui": "./bin/cli.mjs"
+  },
+  "files": [
+    "bin",
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "tailwindcss",
+    "cli"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/beaket/ui"
+  },
+  "dependencies": {
+    "commander": "13.1.0",
+    "fs-extra": "11.3.0",
+    "picocolors": "1.1.1",
+    "prompts": "2.4.2"
+  }
+}

package/src/commands/add.ts

@@ -0,0 +1,58 @@
+import fs from "fs-extra";
+import path from "path";
+import pc from "picocolors";
+import { getConfig } from "../utils/config.ts";
+import { writeComponentFiles } from "../utils/files.ts";
+import { fetchComponent, fetchRegistry } from "../utils/registry.ts";
+
+export async function add(componentName: string) {
+  console.log();
+
+  // Read config
+  const config = await getConfig();
+  if (!config) {
+    console.log(pc.red("Error:"), "beaket.json not found.");
+    console.log("Run", pc.cyan("npx @beaket/ui init"), "first.");
+    process.exit(1);
+  }
+
+  // Fetch registry
+  console.log(`Adding ${pc.cyan(componentName)}...`);
+
+  const registry = await fetchRegistry();
+  const componentDef = registry.components.find((c) => c.name === componentName);
+
+  if (!componentDef) {
+    console.log(pc.red("Error:"), `Component "${componentName}" not found.`);
+    console.log();
+    console.log("Available components:");
+    registry.components.forEach((c) => {
+      console.log(`  - ${c.name}`);
+    });
+    process.exit(1);
+  }
+
+  // Fetch component files
+  const files = await fetchComponent(componentDef);
+
+  // Write files
+  const componentsDir = path.join(process.cwd(), config.paths.components);
+  await writeComponentFiles(componentsDir, componentName, files, config);
+
+  console.log(pc.green("✓"), `Added ${componentName}`);
+  console.log();
+  console.log("Import it in your code:");
+  console.log(
+    pc.cyan(
+      `  import { ${pascalCase(componentName)} } from "${config.aliases.components}/${componentName}";`,
+    ),
+  );
+  console.log();
+}
+
+function pascalCase(str: string): string {
+  return str
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+}

package/src/commands/init.ts

@@ -0,0 +1,134 @@
+import fs from "fs-extra";
+import path from "path";
+import pc from "picocolors";
+import prompts from "prompts";
+import { writeConfig, type BeaketConfig } from "../utils/config.ts";
+import { installDependencies } from "../utils/files.ts";
+
+const CSS_VARIABLES = `
+/* Beaket UI Design System */
+:root {
+  --branch: #1C1F24;
+  --ink: #0D0D0D;
+  --paper: #F8F8F8;
+  --steel: #6B6B6B;
+  --chrome: #C8C8C8;
+  --graphite: #1A1A1A;
+  --iron: #2D2D2D;
+  --slate: #404040;
+  --zinc: #525252;
+  --aluminum: #9E9E9E;
+  --silver: #DEDEDE;
+  --platinum: #F0F0F0;
+  --frost: #F5F5F5;
+  --signal-blue: #2B6CB0;
+  --signal-red: #D32F2F;
+  --signal-green: #137752;
+  --signal-amber: #A86800;
+  --signal-purple: #6F2DA8;
+  --signal-cyan: #1A6B7C;
+}
+`;
+
+export async function init() {
+  console.log();
+  console.log(pc.bold("Initializing Beaket UI..."));
+  console.log();
+
+  const response = await prompts([
+    {
+      type: "text",
+      name: "componentsDir",
+      message: "Where would you like to install components?",
+      initial: "src/components",
+    },
+    {
+      type: "text",
+      name: "utilsDir",
+      message: "Where would you like to install utilities (cn, etc.)?",
+      initial: "src/lib",
+    },
+    {
+      type: "text",
+      name: "tailwindCss",
+      message: "Where is your Tailwind CSS file?",
+      initial: "src/styles.css",
+    },
+    {
+      type: "text",
+      name: "componentsAlias",
+      message: "Components import alias",
+      initial: "@/components",
+    },
+    {
+      type: "text",
+      name: "utilsAlias",
+      message: "Utils import alias",
+      initial: "@/lib",
+    },
+  ]);
+
+  if (!response.componentsDir) {
+    console.log(pc.red("Cancelled."));
+    process.exit(1);
+  }
+
+  const config: BeaketConfig = {
+    $schema: "https://beaket.dev/schema.json",
+    tailwind: {
+      css: response.tailwindCss,
+    },
+    aliases: {
+      components: response.componentsAlias,
+      utils: response.utilsAlias,
+    },
+    paths: {
+      components: response.componentsDir,
+      utils: response.utilsDir,
+    },
+  };
+
+  // Write beaket.json
+  await writeConfig(config);
+  console.log(pc.green("✓"), "Created beaket.json");
+
+  // Inject CSS variables into Tailwind CSS file
+  const cssPath = path.join(process.cwd(), response.tailwindCss);
+  if (await fs.pathExists(cssPath)) {
+    const cssContent = await fs.readFile(cssPath, "utf-8");
+    if (!cssContent.includes("Beaket UI Design System")) {
+      await fs.writeFile(cssPath, cssContent + CSS_VARIABLES);
+      console.log(pc.green("✓"), `Added CSS variables to ${response.tailwindCss}`);
+    }
+  } else {
+    console.log(pc.yellow("!"), `CSS file not found: ${response.tailwindCss}`);
+  }
+
+  // Create utils directory and cn function
+  const utilsDir = path.join(process.cwd(), response.utilsDir);
+  await fs.ensureDir(utilsDir);
+
+  const cnContent = `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+
+  await fs.writeFile(path.join(utilsDir, "utils.ts"), cnContent);
+  console.log(pc.green("✓"), `Created ${response.utilsDir}/utils.ts`);
+
+  // Install dependencies
+  console.log();
+  console.log("Installing dependencies...");
+  await installDependencies(["clsx", "tailwind-merge"]);
+  console.log(pc.green("✓"), "Installed clsx, tailwind-merge");
+
+  console.log();
+  console.log(pc.green("Done!"), "Beaket UI is ready.");
+  console.log();
+  console.log("You can now add components:");
+  console.log(pc.cyan("  npx @beaket/ui add button"));
+  console.log();
+}

package/src/index.ts

@@ -0,0 +1,21 @@
+#!/usr/bin/env -S npx tsx
+import { Command } from "commander";
+import { add } from "./commands/add.ts";
+import { init } from "./commands/init.ts";
+
+const program = new Command();
+
+program
+  .name("@beaket/ui")
+  .description("CLI for adding Beaket UI components to your project")
+  .version("0.1.0");
+
+program.command("init").description("Initialize Beaket UI in your project").action(init);
+
+program
+  .command("add")
+  .description("Add a component to your project")
+  .argument("<component>", "Component name to add")
+  .action(add);
+
+program.parse();

package/src/utils/config.ts

@@ -0,0 +1,35 @@
+import fs from "fs-extra";
+import path from "path";
+
+export interface BeaketConfig {
+  $schema?: string;
+  tailwind: {
+    css: string;
+  };
+  aliases: {
+    components: string;
+    utils: string;
+  };
+  paths: {
+    components: string;
+    utils: string;
+  };
+}
+
+const CONFIG_FILE = "beaket.json";
+
+export async function getConfig(): Promise<BeaketConfig | null> {
+  const configPath = path.join(process.cwd(), CONFIG_FILE);
+
+  if (!(await fs.pathExists(configPath))) {
+    return null;
+  }
+
+  const content = await fs.readFile(configPath, "utf-8");
+  return JSON.parse(content) as BeaketConfig;
+}
+
+export async function writeConfig(config: BeaketConfig): Promise<void> {
+  const configPath = path.join(process.cwd(), CONFIG_FILE);
+  await fs.writeFile(configPath, JSON.stringify(config, null, 2));
+}

package/src/utils/files.ts

@@ -0,0 +1,66 @@
+import { spawn } from "child_process";
+import fs from "fs-extra";
+import path from "path";
+import type { BeaketConfig } from "./config.ts";
+import type { ComponentFile } from "./registry.ts";
+
+export async function writeComponentFiles(
+  baseDir: string,
+  componentName: string,
+  files: ComponentFile[],
+  config: BeaketConfig,
+): Promise<void> {
+  for (const file of files) {
+    // Transform file path: components/button/button.tsx -> button/button.tsx
+    const relativePath = file.path.replace(/^components\//, "");
+    const targetPath = path.join(baseDir, relativePath);
+
+    // Transform imports in content
+    let content = file.content;
+
+    // Replace @/lib/utils with user's utils alias
+    content = content.replace(/@\/lib\/utils/g, `${config.aliases.utils}/utils`);
+
+    // Replace @/components with user's components alias
+    content = content.replace(/@\/components/g, config.aliases.components);
+
+    await fs.ensureDir(path.dirname(targetPath));
+    await fs.writeFile(targetPath, content);
+  }
+}
+
+export async function installDependencies(deps: string[]): Promise<void> {
+  const packageManager = await detectPackageManager();
+  const installCmd = packageManager === "npm" ? "install" : "add";
+
+  return new Promise((resolve, reject) => {
+    const child = spawn(packageManager, [installCmd, ...deps], {
+      stdio: "inherit",
+      shell: true,
+    });
+
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject(new Error(`Failed to install dependencies (code ${code})`));
+      }
+    });
+  });
+}
+
+async function detectPackageManager(): Promise<"npm" | "pnpm" | "yarn" | "bun"> {
+  const cwd = process.cwd();
+
+  if (await fs.pathExists(path.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (await fs.pathExists(path.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  if (await fs.pathExists(path.join(cwd, "bun.lockb"))) {
+    return "bun";
+  }
+
+  return "npm";
+}

package/src/utils/registry.ts

@@ -0,0 +1,56 @@
+export interface ComponentDefinition {
+  name: string;
+  description?: string;
+  dependencies: string[];
+  registryDependencies: string[];
+  files: string[];
+}
+
+export interface Registry {
+  $schema?: string;
+  name: string;
+  components: ComponentDefinition[];
+}
+
+export interface ComponentFile {
+  path: string;
+  content: string;
+}
+
+// GitHub raw URL base - update this to your repo
+const GITHUB_RAW_BASE = "https://raw.githubusercontent.com/beaket/ui/main";
+
+export async function fetchRegistry(): Promise<Registry> {
+  const url = `${GITHUB_RAW_BASE}/registry/registry.json`;
+
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    return (await response.json()) as Registry;
+  } catch (error) {
+    throw new Error(`Failed to fetch registry from ${url}. Make sure the repository is public.`);
+  }
+}
+
+export async function fetchComponent(componentDef: ComponentDefinition): Promise<ComponentFile[]> {
+  const files: ComponentFile[] = [];
+
+  for (const filePath of componentDef.files) {
+    const url = `${GITHUB_RAW_BASE}/src/${filePath}`;
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const content = await response.text();
+      files.push({ path: filePath, content });
+    } catch (error) {
+      throw new Error(`Failed to fetch ${filePath} from ${url}`);
+    }
+  }
+
+  return files;
+}