@dinachi/cli 0.2.0 → 0.3.0

package/dist/index.js

@@ -411,7 +411,30 @@ ${pluginsContent},
   }
   return { exists: true };
 }
-var addCommand = new Command("add").description("Add a component to your project").argument("<component>", "Name of the component").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").action(async (componentName, options) => {
+async function handleIndexFile(sourcePath, targetPath, componentName, allFilesAdded, aliasPath) {
+  let templateContent = await fs2.readFile(sourcePath, "utf-8");
+  templateContent = templateContent.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
+  if (!fs2.existsSync(targetPath)) {
+    await fs2.writeFile(targetPath, templateContent);
+    allFilesAdded.push({ name: "index.ts", path: path2.join(aliasPath, "index.ts") });
+  } else {
+    const existingContent = await fs2.readFile(targetPath, "utf-8");
+    const exportRegex = /export\s+\*\s+from\s+['"]\.\/([^'"]+)['"]/g;
+    const templateExports = [];
+    let match;
+    while ((match = exportRegex.exec(templateContent)) !== null) {
+      templateExports.push(match[1]);
+    }
+    const componentExportExists = existingContent.includes(`export * from './${componentName}'`);
+    if (!componentExportExists && templateExports.includes(componentName)) {
+      const newExportLine = `export * from './${componentName}'`;
+      const updatedContent = existingContent.trim() + "\n" + newExportLine + "\n";
+      await fs2.writeFile(targetPath, updatedContent);
+      allFilesAdded.push({ name: "index.ts", path: path2.join(aliasPath, "index.ts") });
+    }
+  }
+}
+var addCommand = new Command("add").description("Add a component to your project").argument("[component]", "Name of the component (optional when using --all)").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").option("-a, --all", "Install all available components").action(async (componentName, options) => {
   const spinner = ora("Adding component...").start();
   try {
     const config = await getConfig();
@@ -420,17 +443,40 @@ var addCommand = new Command("add").description("Add a component to your project
       process.exit(1);
     }
     const registry = getComponentRegistry();
-    const component = registry[componentName];
-    if (!component) {
-      spinner.fail(`\u274C Component "${componentName}" not found.`);
-      console.log("Available components:");
-      Object.keys(registry).forEach((name) => {
-        console.log(`  ${chalk.cyan(name)}`);
-      });
-      process.exit(1);
+    let componentsToInstall = [];
+    if (options.all) {
+      const allComponents = Object.keys(registry);
+      spinner.text = `Installing all ${allComponents.length} components...`;
+      const allComponentsWithDeps = /* @__PURE__ */ new Set();
+      for (const name of allComponents) {
+        allComponentsWithDeps.add(name);
+        const deps = getComponentDependencies(name);
+        deps.forEach((dep) => allComponentsWithDeps.add(dep));
+      }
+      componentsToInstall = Array.from(allComponentsWithDeps);
+    } else {
+      if (!componentName) {
+        spinner.fail("\u274C Component name is required when not using --all flag.");
+        console.log("Available components:");
+        Object.keys(registry).forEach((name) => {
+          console.log(`  ${chalk.cyan(name)}`);
+        });
+        process.exit(1);
+      }
+      const component = registry[componentName];
+      if (!component) {
+        spinner.fail(`\u274C Component "${componentName}" not found.`);
+        console.log("Available components:");
+        Object.keys(registry).forEach((name) => {
+          console.log(`  ${chalk.cyan(name)}`);
+        });
+        process.exit(1);
+      }
+      componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
+    }
+    if (!options.all) {
+      spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
     }
-    const componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
-    spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
     const componentDir = path2.join(process.cwd(), config.aliases.ui.replace("@/", "src/"));
     await fs2.ensureDir(componentDir);
     let allFilesAdded = [];
@@ -474,14 +520,18 @@ var addCommand = new Command("add").description("Add a component to your project
       for (const file of comp.files) {
         const sourcePath = path2.join(__dirname2, "../templates", name, file.name);
         const targetPath = path2.join(componentDir, file.name);
-        if (fs2.existsSync(targetPath) && !options.overwrite) {
-          spinner.warn(`\u26A0\uFE0F  ${file.name} already exists. Use --overwrite to replace it.`);
-          continue;
+        if (file.name === "index.ts") {
+          await handleIndexFile(sourcePath, targetPath, name, allFilesAdded, config.aliases.ui);
+        } else {
+          if (fs2.existsSync(targetPath) && !options.overwrite) {
+            spinner.warn(`\u26A0\uFE0F  ${file.name} already exists. Use --overwrite to replace it.`);
+            continue;
+          }
+          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.ui, file.name) });
         }
-        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.ui, file.name) });
       }
       if (comp.dependencies?.length) {
         allDepsInstalled.push(...comp.dependencies);
@@ -492,12 +542,12 @@ var addCommand = new Command("add").description("Add a component to your project
       spinner.text = "Updating Tailwind configuration...";
       tailwindConfigInfo = await ensureTailwindConfig(allDepsInstalled);
     }
+    const packageJsonPath = path2.join(process.cwd(), "package.json");
+    const packageJson = JSON.parse(await fs2.readFile(packageJsonPath, "utf-8"));
+    const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+    const missingDeps = [...new Set(allDepsInstalled)].filter((dep) => !allDeps[dep]);
     if (allDepsInstalled.length > 0) {
       spinner.text = "Installing dependencies...";
-      const packageJsonPath = path2.join(process.cwd(), "package.json");
-      const packageJson = JSON.parse(await fs2.readFile(packageJsonPath, "utf-8"));
-      const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
-      const missingDeps = [...new Set(allDepsInstalled)].filter((dep) => !allDeps[dep]);
       if (missingDeps.length > 0) {
         try {
           const packageManager = getPackageManager();
@@ -506,9 +556,15 @@ var addCommand = new Command("add").description("Add a component to your project
         } catch (error) {
           spinner.warn(`\u26A0\uFE0F  Failed to install dependencies. Please install manually: ${missingDeps.join(" ")}`);
         }
+      } else {
+        spinner.text = "All dependencies already installed.";
       }
     }
-    spinner.succeed(`\u2705 Added ${componentsToInstall.join(", ")} component(s)!`);
+    if (options.all) {
+      spinner.succeed(`\u2705 Added all ${componentsToInstall.length} components!`);
+    } else {
+      spinner.succeed(`\u2705 Added ${componentsToInstall.join(", ")} component(s)!`);
+    }
     console.log();
     console.log("Files added:");
     allFilesAdded.forEach((file) => {
@@ -522,12 +578,18 @@ var addCommand = new Command("add").description("Add a component to your project
         console.log(`  ${chalk.blue("~")} tailwind.config.js (updated with tailwindcss-animate plugin)`);
       }
     }
-    if (allDepsInstalled.length > 0) {
+    if (missingDeps.length > 0) {
       console.log();
       console.log("Dependencies installed:");
-      [...new Set(allDepsInstalled)].forEach((dep) => {
+      missingDeps.forEach((dep) => {
         console.log(`  ${chalk.green("\u2713")} ${dep}`);
       });
+    } else if (allDepsInstalled.length > 0) {
+      console.log();
+      console.log("Dependencies (already installed):");
+      [...new Set(allDepsInstalled)].forEach((dep) => {
+        console.log(`  ${chalk.blue("~")} ${dep}`);
+      });
     }
   } catch (error) {
     spinner.fail(`\u274C Failed to add component: ${error instanceof Error ? error.message : error}`);
@@ -556,18 +618,21 @@ var initCommand = new Command2("init").description("Initialize Dinachi UI in you
     console.log(chalk2.red("\u274C No package.json found. Please run this command in a valid project."));
     process.exit(1);
   }
+  const projectConfig = detectProjectType();
+  console.log(chalk2.gray(`Detected ${projectConfig.framework} project`));
+  console.log();
   const response = await prompts([
     {
       type: "text",
       name: "componentsPath",
       message: "Where would you like to install components?",
-      initial: "./src/components/ui"
+      initial: projectConfig.componentsPath
     },
     {
       type: "text",
       name: "utilsPath",
       message: "Where would you like to install utilities?",
-      initial: "./src/lib"
+      initial: projectConfig.utilsPath
     },
     {
       type: "confirm",
@@ -603,13 +668,14 @@ export function cn(...inputs: ClassValue[]) {
       const installCmd = `${packageManager} ${packageManager === "npm" ? "install" : "add"} ${deps.join(" ")}`;
       execSync2(installCmd, { stdio: "inherit" });
     }
+    const rscEnabled = projectConfig.framework === "next.js";
     const configContent = `{
   "style": "default",
-  "rsc": false,
+  "rsc": ${rscEnabled},
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/index.css",
+    "config": "${projectConfig.tailwindConfig}",
+    "css": "${projectConfig.cssPath}",
     "baseColor": "slate",
     "cssVariables": true
   },
@@ -629,6 +695,18 @@ export function cn(...inputs: ClassValue[]) {
     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")}`);
+    if (projectConfig.framework === "next.js") {
+      console.log();
+      console.log(chalk2.blue("\u{1F4DD} Next.js specific notes:"));
+      console.log(`  - RSC (React Server Components) enabled in config`);
+      console.log(`  - Make sure to add "use client" directive if needed`);
+      console.log(`  - Tailwind config set to: ${chalk2.cyan(projectConfig.tailwindConfig)}`);
+    } else if (projectConfig.framework === "remix") {
+      console.log();
+      console.log(chalk2.blue("\u{1F4DD} Remix specific notes:"));
+      console.log(`  - Components will be installed to: ${chalk2.cyan(projectConfig.componentsPath)}`);
+      console.log(`  - Utils will be installed to: ${chalk2.cyan(projectConfig.utilsPath)}`);
+    }
     console.log();
     console.log("\u{1F4A1} Tip: Install globally for shorter commands:");
     console.log(`  ${chalk2.cyan("npm install -g @dinachi/cli")}`);
@@ -643,6 +721,69 @@ function getPackageManager2() {
   if (fs3.existsSync("yarn.lock")) return "yarn";
   return "npm";
 }
+function detectProjectType() {
+  const packageJsonPath = path3.join(process.cwd(), "package.json");
+  if (!fs3.existsSync(packageJsonPath)) {
+    return {
+      framework: "react",
+      componentsPath: "./src/components/ui",
+      utilsPath: "./src/lib",
+      tailwindConfig: "tailwind.config.js",
+      cssPath: "src/index.css",
+      srcDir: "src"
+    };
+  }
+  const packageJson = JSON.parse(fs3.readFileSync(packageJsonPath, "utf-8"));
+  const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  if (deps.next) {
+    return {
+      framework: "next.js",
+      componentsPath: "./src/components/ui",
+      utilsPath: "./src/lib",
+      tailwindConfig: "tailwind.config.ts",
+      cssPath: "src/app/globals.css",
+      srcDir: "src"
+    };
+  }
+  if (deps.vite || deps["@vitejs/plugin-react"]) {
+    return {
+      framework: "vite",
+      componentsPath: "./src/components/ui",
+      utilsPath: "./src/lib",
+      tailwindConfig: "tailwind.config.js",
+      cssPath: "src/index.css",
+      srcDir: "src"
+    };
+  }
+  if (deps["react-scripts"]) {
+    return {
+      framework: "create-react-app",
+      componentsPath: "./src/components/ui",
+      utilsPath: "./src/lib",
+      tailwindConfig: "tailwind.config.js",
+      cssPath: "src/index.css",
+      srcDir: "src"
+    };
+  }
+  if (deps["@remix-run/react"]) {
+    return {
+      framework: "remix",
+      componentsPath: "./app/components/ui",
+      utilsPath: "./app/lib",
+      tailwindConfig: "tailwind.config.ts",
+      cssPath: "app/tailwind.css",
+      srcDir: "app"
+    };
+  }
+  return {
+    framework: "react",
+    componentsPath: "./src/components/ui",
+    utilsPath: "./src/lib",
+    tailwindConfig: "tailwind.config.js",
+    cssPath: "src/index.css",
+    srcDir: "src"
+  };
+}
 
 // src/index.ts
 var program = new Command3();

package/package.json

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

package/templates/button/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

package/templates/dialog/dialog.tsx

@@ -12,7 +12,7 @@ const DialogTrigger = React.forwardRef<
   <BaseDialog.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
+      "inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "disabled:pointer-events-none disabled:opacity-50",
       "bg-primary text-primary-foreground hover:bg-primary/90",

package/templates/select/select.tsx

@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center cursor-pointer justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}