@beaket/ui 0.1.8 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beaket/ui",
-  "version": "0.1.8",
+  "version": "1.0.0",
   "description": "CLI tool for adding Beaket UI components to your project",
   "type": "module",
   "bin": {

package/src/commands/add.ts

@@ -4,7 +4,11 @@ import { getConfig } from "../utils/config.ts";
 import { installDependencies, writeComponentFiles } from "../utils/files.ts";
 import { fetchComponent, fetchRegistry } from "../utils/registry.ts";
 
-export async function add(componentName: string) {
+interface AddOptions {
+  overwrite?: boolean;
+}
+
+export async function add(componentName: string, options: AddOptions) {
   console.log();
 
   // Read config
@@ -16,9 +20,9 @@ export async function add(componentName: string) {
   }
 
   // Fetch registry
-  console.log(`Adding ${pc.cyan(componentName)}...`);
-
   const registry = await fetchRegistry();
+  console.log(pc.green("✔"), "Checking registry.");
+
   const componentDef = registry.components.find((c) => c.name === componentName);
 
   if (!componentDef) {
@@ -31,35 +35,35 @@ export async function add(componentName: string) {
     process.exit(1);
   }
 
+  // Install dependencies
+  if (componentDef.dependencies.length > 0) {
+    await installDependencies(componentDef.dependencies);
+    console.log(pc.green("✔"), "Installing dependencies.");
+  }
+
   // 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);
+  const componentsDir = path.join(process.cwd(), config.components);
+  const { written, skipped } = await writeComponentFiles(componentsDir, files, options.overwrite);
 
-  console.log(pc.green("✓"), `Added ${componentName}`);
+  // Show skipped files
+  if (skipped.length > 0) {
+    console.log(
+      pc.yellow("ℹ"),
+      `Skipped ${skipped.length} file(s): (use --overwrite to overwrite)`,
+    );
+    skipped.forEach((f) => console.log(`  - ${f}`));
+  }
 
-  // Install dependencies
-  if (componentDef.dependencies.length > 0) {
+  if (written.length === 0) {
     console.log();
-    console.log("Installing dependencies...");
-    await installDependencies(componentDef.dependencies);
-    console.log(pc.green("✓"), `Installed ${componentDef.dependencies.join(", ")}`);
+    return;
   }
+
   console.log();
-  console.log("Import it in your code:");
-  console.log(
-    pc.cyan(
-      `  import { ${pascalCase(componentName)} } from "${config.aliases.components}/${componentName}";`,
-    ),
-  );
+  console.log("Added:");
+  written.forEach((f) => console.log(pc.cyan(`  ${f}`)));
   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

@@ -3,7 +3,6 @@ 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 */
@@ -38,97 +37,54 @@ export async function init() {
   const response = await prompts([
     {
       type: "text",
-      name: "componentsDir",
-      message: "Where would you like to install components?",
-      initial: "src/components",
+      name: "components",
+      message: "Where should components be installed?",
+      initial: "src/components/ui",
     },
     {
       type: "text",
-      name: "utilsDir",
-      message: "Where would you like to install utilities (cn, etc.)?",
-      initial: "src/lib",
-    },
-    {
-      type: "text",
-      name: "tailwindCss",
+      name: "css",
       message: "Where is your Tailwind CSS file?",
       initial: "src/index.css",
     },
-    {
-      type: "text",
-      name: "componentsAlias",
-      message: "Components import alias",
-      initial: "@/components",
-    },
-    {
-      type: "text",
-      name: "utilsAlias",
-      message: "Utils import alias",
-      initial: "@/lib",
-    },
   ]);
 
-  if (!response.componentsDir) {
+  if (!response.components) {
     console.log(pc.red("Cancelled."));
     process.exit(1);
   }
 
+  // Write beaket.json (only components path)
   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,
-    },
+    components: response.components,
   };
 
-  // Write beaket.json
   await writeConfig(config);
-  console.log(pc.green("✓"), "Created beaket.json");
+  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}`);
+  if (response.css) {
+    const cssPath = path.join(process.cwd(), response.css);
+    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.css}`);
+      } else {
+        console.log(pc.yellow("ℹ"), "CSS variables already exist");
+      }
+    } else {
+      console.log(pc.yellow("!"), `CSS file not found: ${response.css}`);
+      console.log("  Add CSS variables manually:");
+      console.log(pc.cyan("  https://beaket.github.io/ui/installation"));
     }
-  } 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("Add components:");
   console.log(pc.cyan("  npx @beaket/ui add button"));
   console.log();
 }

package/src/index.ts

@@ -21,6 +21,7 @@ program
   .command("add")
   .description("Add a component to your project")
   .argument("<component>", "Component name to add")
+  .option("-o, --overwrite", "Overwrite existing files")
   .action(add);
 
 program.parse();

package/src/utils/config.ts

@@ -3,17 +3,7 @@ import path from "path";
 
 export interface BeaketConfig {
   $schema?: string;
-  tailwind: {
-    css: string;
-  };
-  aliases: {
-    components: string;
-    utils: string;
-  };
-  paths: {
-    components: string;
-    utils: string;
-  };
+  components: string;
 }
 
 const CONFIG_FILE = "beaket.json";

package/src/utils/files.ts

@@ -1,32 +1,49 @@
 import { spawn } from "child_process";
 import fs from "fs-extra";
 import path from "path";
-import type { BeaketConfig } from "./config.ts";
+import prompts from "prompts";
 import type { ComponentFile } from "./registry.ts";
 
+export interface WriteResult {
+  written: string[];
+  skipped: string[];
+}
+
 export async function writeComponentFiles(
   baseDir: string,
-  componentName: string,
   files: ComponentFile[],
-  config: BeaketConfig,
-): Promise<void> {
+  overwrite: boolean = false,
+): Promise<WriteResult> {
+  const written: string[] = [];
+  const skipped: string[] = [];
+
   for (const file of files) {
-    // Transform file path: components/button/button.tsx -> button/button.tsx
+    // Transform file path: components/button.tsx -> 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);
+    // Check if file exists
+    if (await fs.pathExists(targetPath)) {
+      if (!overwrite) {
+        const { confirm } = await prompts({
+          type: "confirm",
+          name: "confirm",
+          message: `${path.basename(targetPath)} already exists. Overwrite?`,
+          initial: false,
+        });
+        if (!confirm) {
+          skipped.push(targetPath);
+          continue;
+        }
+      }
+    }
 
     await fs.ensureDir(path.dirname(targetPath));
-    await fs.writeFile(targetPath, content);
+    await fs.writeFile(targetPath, file.content);
+    written.push(targetPath);
   }
+
+  return { written, skipped };
 }
 
 export async function installDependencies(deps: string[]): Promise<void> {