@dinachi/cli 0.1.0 → 0.2.0

package/README.md

@@ -6,16 +6,42 @@ A CLI for adding Dinachi UI components to your project. Just like shadcn/ui, thi
 
 ```bash
 npm install -g @dinachi/cli
-# or
+```
+
+**Or use npx without global install:**
+
+```bash
 npx @dinachi/cli@latest init
 ```
 
 ## Usage
 
+### Two ways to use the CLI
+
+**Option 1: Install globally (recommended)**
+
+```bash
+npm install -g @dinachi/cli
+
+# Then use short commands
+dinachi init
+dinachi add button
+```
+
+**Option 2: Use npx (no global install)**
+
+```bash
+# Always use the full package name
+npx @dinachi/cli init
+npx @dinachi/cli add button
+```
+
 ### Initialize Dinachi UI in your project
 
 ```bash
-npx dinachi init
+dinachi init
+# or
+npx @dinachi/cli init
 ```
 
 This will:
@@ -27,7 +53,9 @@ This will:
 ### Add components
 
 ```bash
-npx dinachi add button
+dinachi add button
+# or
+npx @dinachi/cli add button
 ```
 
 This will:

package/dist/index.js

@@ -431,7 +431,7 @@ var addCommand = new Command("add").description("Add a component to your project
     }
     const componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
     spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
-    const componentDir = path2.join(process.cwd(), config.aliases.components);
+    const componentDir = path2.join(process.cwd(), config.aliases.ui.replace("@/", "src/"));
     await fs2.ensureDir(componentDir);
     let allFilesAdded = [];
     let allDepsInstalled = [];
@@ -445,7 +445,7 @@ var addCommand = new Command("add").description("Add a component to your project
     }
     const utilityRegistry = getUtilityRegistry();
     const uniqueUtilityDeps = [...new Set(allUtilityDeps)];
-    const utilsDir = path2.join(process.cwd(), config.aliases.utils);
+    const utilsDir = path2.join(process.cwd(), config.aliases.lib.replace("@/", "src/"));
     if (uniqueUtilityDeps.length > 0) {
       await fs2.ensureDir(utilsDir);
       for (const utilityName of uniqueUtilityDeps) {
@@ -460,7 +460,7 @@ var addCommand = new Command("add").description("Add a component to your project
           await fs2.writeFile(targetPath, content);
           allFilesAdded.push({
             name: utilityFilename,
-            path: path2.join(config.aliases.utils, utilityFilename)
+            path: path2.join(config.aliases.lib, utilityFilename)
           });
           if (utility.dependencies?.length) {
             allDepsInstalled.push(...utility.dependencies);
@@ -481,7 +481,7 @@ var addCommand = new Command("add").description("Add a component to your project
         let content = await fs2.readFile(sourcePath, "utf-8");
         content = content.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
         await fs2.writeFile(targetPath, content);
-        allFilesAdded.push({ name: file.name, path: path2.join(config.aliases.components, file.name) });
+        allFilesAdded.push({ name: file.name, path: path2.join(config.aliases.ui, file.name) });
       }
       if (comp.dependencies?.length) {
         allDepsInstalled.push(...comp.dependencies);
@@ -567,7 +567,7 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
       type: "text",
       name: "utilsPath",
       message: "Where would you like to install utilities?",
-      initial: "./src/lib/utils.ts"
+      initial: "./src/lib"
     },
     {
       type: "confirm",
@@ -583,7 +583,7 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
   const spinner = ora2("Setting up Dinachi UI...").start();
   try {
     await fs3.ensureDir(path3.dirname(response.componentsPath));
-    await fs3.ensureDir(path3.dirname(response.utilsPath));
+    await fs3.ensureDir(response.utilsPath);
     const utilsContent = `import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -591,7 +591,7 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 `;
-    await fs3.writeFile(response.utilsPath, utilsContent);
+    await fs3.writeFile(path3.join(response.utilsPath, "utils.ts"), utilsContent);
     if (response.installDeps) {
       spinner.text = "Installing dependencies...";
       const deps = [
@@ -614,17 +614,25 @@ export function cn(...inputs: ClassValue[]) {
     "cssVariables": true
   },
   "aliases": {
-    "components": "${response.componentsPath}",
-    "utils": "${response.utilsPath.replace(".ts", "")}"
-  }
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
 }`;
     await fs3.writeFile("components.json", configContent);
     spinner.succeed("\u2705 Dinachi UI setup complete!");
     console.log();
     console.log("Next steps:");
-    console.log(`  1. Add a component: ${chalk2.cyan("npx dinachi add button")}`);
-    console.log(`  2. Components will be installed to: ${chalk2.cyan(response.componentsPath)}`);
-    console.log(`  3. Utils available at: ${chalk2.cyan(response.utilsPath)}`);
+    console.log(`  1. Add a component: ${chalk2.cyan("npx @dinachi/cli add button")}`);
+    console.log(`  2. Components will be installed to: ${chalk2.cyan("@/components/ui")}`);
+    console.log(`  3. Utils available at: ${chalk2.cyan("@/lib/utils")}`);
+    console.log();
+    console.log("\u{1F4A1} Tip: Install globally for shorter commands:");
+    console.log(`  ${chalk2.cyan("npm install -g @dinachi/cli")}`);
+    console.log(`  Then use: ${chalk2.cyan("dinachi add button")}`);
   } catch (error) {
     spinner.fail(`\u274C Setup failed: ${error.message}`);
     process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinachi/cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CLI for adding Dinachi UI components to your project",
   "type": "module",
   "keywords": [

package/templates/select/select.tsx

@@ -1,8 +1,9 @@
+// @ts-nocheck
 "use client"
 
 import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui-components/react/select"
-import { cn } from "@dinachi/core"
+import { cn } from "@/lib/utils"
 import { Check, ChevronDown } from "lucide-react"