@srcroot/ui 0.0.33 → 0.0.35

package/dist/index.js

@@ -5,11 +5,12 @@ import { Command } from "commander";
 import chalk3 from "chalk";
 
 // src/cli/services/project-initializer.ts
-import fs2 from "fs-extra";
-import path2 from "path";
+import fs3 from "fs-extra";
+import path3 from "path";
 import ora from "ora";
 import prompts from "prompts";
 import { fileURLToPath as fileURLToPath2 } from "url";
+import { execa } from "execa";
 
 // src/cli/services/theme-service.ts
 import fs from "fs-extra";
@@ -143,20 +144,21 @@ export default config
 `;
 
 // src/cli/utils/get-package-manager.ts
-function getPackageManager() {
+import fs2 from "fs";
+import path2 from "path";
+function getPackageManager(cwd) {
   const userAgent = process.env.npm_config_user_agent;
-  if (!userAgent) {
-    return "npm";
-  }
-  if (userAgent.startsWith("yarn")) {
-    return "yarn";
-  }
-  if (userAgent.startsWith("pnpm")) {
-    return "pnpm";
-  }
-  if (userAgent.startsWith("bun")) {
-    return "bun";
+  if (userAgent) {
+    if (userAgent.startsWith("yarn")) return "yarn";
+    if (userAgent.startsWith("pnpm")) return "pnpm";
+    if (userAgent.startsWith("bun")) return "bun";
+    if (userAgent.startsWith("npm")) return "npm";
   }
+  const dir = cwd || process.cwd();
+  if (fs2.existsSync(path2.join(dir, "bun.lockb"))) return "bun";
+  if (fs2.existsSync(path2.join(dir, "pnpm-lock.yaml"))) return "pnpm";
+  if (fs2.existsSync(path2.join(dir, "yarn.lock"))) return "yarn";
+  if (fs2.existsSync(path2.join(dir, "package-lock.json"))) return "npm";
   return "npm";
 }
 
@@ -178,7 +180,7 @@ var logger = {
 };
 
 // src/cli/services/project-initializer.ts
-var __dirname3 = path2.dirname(fileURLToPath2(import.meta.url));
+var __dirname3 = path3.dirname(fileURLToPath2(import.meta.url));
 var ProjectInitializer = class {
   options;
   config = {};
@@ -193,16 +195,17 @@ var ProjectInitializer = class {
     await this.detectConfiguration();
     await this.promptUser();
     await this.scaffold();
+    await this.installDependencies();
     this.printSuccess();
   }
   async validateEnvironment() {
-    const cwd = path2.resolve(this.options.cwd);
-    const packageJsonPath = path2.join(cwd, "package.json");
-    if (!fs2.existsSync(packageJsonPath)) {
+    const cwd = path3.resolve(this.options.cwd);
+    const packageJsonPath = path3.join(cwd, "package.json");
+    if (!fs3.existsSync(packageJsonPath)) {
       logger.error("Error: No package.json found. Please run this in a project directory.");
       process.exit(1);
     }
-    const pkg = await fs2.readJson(packageJsonPath);
+    const pkg = await fs3.readJson(packageJsonPath);
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     if (!allDeps["react"]) {
       logger.error("Error: React not found in dependencies. Please initialize this in a React project.");
@@ -210,33 +213,33 @@ var ProjectInitializer = class {
     }
   }
   async detectConfiguration() {
-    const cwd = path2.resolve(this.options.cwd);
-    const packageManager = getPackageManager();
+    const cwd = path3.resolve(this.options.cwd);
+    const packageManager = getPackageManager(cwd);
     const installCmd = packageManager === "npm" ? "install" : "add";
-    const pkg = await fs2.readJson(path2.join(cwd, "package.json"));
+    const pkg = await fs3.readJson(path3.join(cwd, "package.json"));
     const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
     const tailwindVersion = allDeps["tailwindcss"] || "";
     const isTailwind4 = tailwindVersion.includes("^4") || tailwindVersion.startsWith("4") || allDeps["@tailwindcss/postcss"];
-    const hasSrc = fs2.existsSync(path2.join(cwd, "src"));
-    const srcPath = hasSrc ? path2.join(cwd, "src") : cwd;
-    const appPath = path2.join(srcPath, "app");
-    const pagesPath = path2.join(srcPath, "pages");
-    const hasAppDir = fs2.existsSync(appPath);
-    const hasPagesDir = fs2.existsSync(pagesPath);
-    const libDir = path2.join(srcPath, "lib");
-    const componentsDir = path2.join(srcPath, "components", "ui");
+    const hasSrc = fs3.existsSync(path3.join(cwd, "src"));
+    const srcPath = hasSrc ? path3.join(cwd, "src") : cwd;
+    const appPath = path3.join(srcPath, "app");
+    const pagesPath = path3.join(srcPath, "pages");
+    const hasAppDir = fs3.existsSync(appPath);
+    const hasPagesDir = fs3.existsSync(pagesPath);
+    const libDir = path3.join(srcPath, "lib");
+    const componentsDir = path3.join(srcPath, "components", "ui");
     let globalsPath = "";
     if (hasAppDir) {
-      if (fs2.existsSync(path2.join(appPath, "globals.css"))) globalsPath = path2.join(appPath, "globals.css");
-      else if (fs2.existsSync(path2.join(appPath, "global.css"))) globalsPath = path2.join(appPath, "global.css");
-      else globalsPath = path2.join(appPath, "globals.css");
+      if (fs3.existsSync(path3.join(appPath, "globals.css"))) globalsPath = path3.join(appPath, "globals.css");
+      else if (fs3.existsSync(path3.join(appPath, "global.css"))) globalsPath = path3.join(appPath, "global.css");
+      else globalsPath = path3.join(appPath, "globals.css");
     } else if (hasPagesDir) {
-      const stylesPath = path2.join(srcPath, "styles");
-      if (fs2.existsSync(path2.join(stylesPath, "globals.css"))) globalsPath = path2.join(stylesPath, "globals.css");
-      else if (fs2.existsSync(path2.join(stylesPath, "global.css"))) globalsPath = path2.join(stylesPath, "global.css");
-      else globalsPath = path2.join(stylesPath, "globals.css");
+      const stylesPath = path3.join(srcPath, "styles");
+      if (fs3.existsSync(path3.join(stylesPath, "globals.css"))) globalsPath = path3.join(stylesPath, "globals.css");
+      else if (fs3.existsSync(path3.join(stylesPath, "global.css"))) globalsPath = path3.join(stylesPath, "global.css");
+      else globalsPath = path3.join(stylesPath, "globals.css");
     } else {
-      globalsPath = path2.join(srcPath, "globals.css");
+      globalsPath = path3.join(srcPath, "globals.css");
     }
     this.config = {
       cwd,
@@ -264,7 +267,7 @@ var ProjectInitializer = class {
         return;
       }
       const themeChoices = availableThemes.map((theme) => ({
-        title: `${theme.name} - ${theme.description}`,
+        title: theme.name,
         value: theme.file.replace(".css", "")
       }));
       const themeResponse = await prompts({
@@ -284,13 +287,13 @@ var ProjectInitializer = class {
     const spinner = ora("Creating project structure...").start();
     const cfg = this.config;
     try {
-      await fs2.ensureDir(cfg.libDir);
-      await fs2.ensureDir(cfg.componentsDir);
-      const utilsPath = path2.join(cfg.libDir, "utils.ts");
-      const registryUtilsPath = path2.resolve(__dirname3, "..", "src", "registry", "lib", "utils.ts");
+      await fs3.ensureDir(cfg.libDir);
+      await fs3.ensureDir(cfg.componentsDir);
+      const utilsPath = path3.join(cfg.libDir, "utils.ts");
+      const registryUtilsPath = path3.resolve(__dirname3, "..", "src", "registry", "lib", "utils.ts");
       let utilsContent = "";
-      if (fs2.existsSync(registryUtilsPath)) {
-        utilsContent = await fs2.readFile(registryUtilsPath, "utf-8");
+      if (fs3.existsSync(registryUtilsPath)) {
+        utilsContent = await fs3.readFile(registryUtilsPath, "utf-8");
       } else {
         utilsContent = `import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
@@ -301,15 +304,15 @@ export function cn(...inputs: ClassValue[]) {
 `;
         spinner.warn(`Could not find registry/utils.ts, using fallback content.`);
       }
-      await fs2.writeFile(utilsPath, utilsContent);
-      spinner.succeed(`Created ${path2.relative(cfg.cwd, utilsPath)}`);
+      await fs3.writeFile(utilsPath, utilsContent);
+      spinner.succeed(`Created ${path3.relative(cfg.cwd, utilsPath)}`);
       spinner.start(`Setting up ${cfg.selectedTheme} theme...`);
-      const stylesDir = path2.dirname(cfg.globalsPath);
-      await fs2.ensureDir(stylesDir);
+      const stylesDir = path3.dirname(cfg.globalsPath);
+      await fs3.ensureDir(stylesDir);
       try {
         const cssContent = await this.themeService.getThemeCss(cfg.selectedTheme, cfg.isTailwind4);
-        await fs2.writeFile(cfg.globalsPath, cssContent);
-        spinner.succeed(`Updated ${path2.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
+        await fs3.writeFile(cfg.globalsPath, cssContent);
+        spinner.succeed(`Updated ${path3.relative(cfg.cwd, cfg.globalsPath)} with ${cfg.selectedTheme} theme (${cfg.isTailwind4 ? "Tailwind 4" : "Tailwind 3"})`);
       } catch (error) {
         spinner.fail(`Failed to load theme: ${cfg.selectedTheme}`);
         console.error(error);
@@ -317,11 +320,9 @@ export function cn(...inputs: ClassValue[]) {
       }
       if (!cfg.isTailwind4) {
         spinner.start("Setting up Tailwind config...");
-        const tailwindConfigPath = path2.join(cfg.cwd, "tailwind.config.ts");
-        await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+        const tailwindConfigPath = path3.join(cfg.cwd, "tailwind.config.ts");
+        await fs3.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
         spinner.succeed(`Created tailwind.config.ts`);
-      } else {
-        spinner.info(`Tailwind 4 detected - skipping tailwind.config.ts`);
       }
     } catch (error) {
       spinner.fail("Failed to initialize project");
@@ -329,26 +330,38 @@ export function cn(...inputs: ClassValue[]) {
       process.exit(1);
     }
   }
-  printSuccess() {
+  async installDependencies() {
     const cfg = this.config;
-    logger.success("\n\u2705 Project initialized successfully!\n");
-    console.log(`Theme: ${cfg.selectedTheme}`);
-    console.log(`Tailwind: ${cfg.isTailwind4 ? "v4" : "v3"}`);
-    const requiredDeps = [
+    const spinner = ora("Installing dependencies...").start();
+    const deps = [
       "clsx",
       "tailwind-merge",
       "class-variance-authority",
       "react-icons"
     ];
     if (!cfg.isTailwind4) {
-      requiredDeps.push("tailwindcss-animate");
+      deps.push("tailwindcss-animate");
+    }
+    try {
+      await execa(cfg.packageManager, [cfg.installCmd, ...deps], {
+        cwd: cfg.cwd,
+        stdio: "pipe"
+      });
+      spinner.succeed(`Installed ${deps.length} dependencies`);
+    } catch (error) {
+      spinner.fail("Failed to install dependencies");
+      logger.warn(`
+Manually run: ${cfg.packageManager} ${cfg.installCmd} ${deps.join(" ")}`);
     }
-    logger.info("\n\u{1F4E6} Required dependencies:");
-    console.log(`  ${cfg.packageManager} ${cfg.installCmd} ${requiredDeps.join(" ")}`);
+  }
+  printSuccess() {
+    const cfg = this.config;
+    logger.success("\n\u2705 Project initialized successfully!\n");
+    console.log(`Theme: ${cfg.selectedTheme}`);
+    console.log(`Tailwind: ${cfg.isTailwind4 ? "v4" : "v3"}`);
     console.log("\n\u2728 Next steps:");
-    console.log("  1. Install dependencies (command above)");
-    console.log("  2. npx @srcroot/ui add button");
-    console.log("  3. npx @srcroot/ui add --all");
+    console.log("  1. npx @srcroot/ui add button");
+    console.log("  2. npx @srcroot/ui add --all");
     console.log();
   }
 };
@@ -360,8 +373,8 @@ async function init(options) {
 }
 
 // src/cli/commands/add.ts
-import fs3 from "fs-extra";
-import path3 from "path";
+import fs4 from "fs-extra";
+import path4 from "path";
 import ora2 from "ora";
 import prompts2 from "prompts";
 import { fileURLToPath as fileURLToPath3 } from "url";
@@ -746,9 +759,9 @@ var REGISTRY = {
 };
 
 // src/cli/commands/add.ts
-var __dirname4 = path3.dirname(fileURLToPath3(import.meta.url));
+var __dirname4 = path4.dirname(fileURLToPath3(import.meta.url));
 async function add(components, options) {
-  const cwd = path3.resolve(options.cwd);
+  const cwd = path4.resolve(options.cwd);
   if (options.all) {
     components = Object.keys(REGISTRY);
   }
@@ -811,16 +824,16 @@ async function add(components, options) {
   }
   console.log();
   const spinner = ora2("Adding components...").start();
-  const hasSrc = fs3.existsSync(path3.join(cwd, "src"));
-  const srcPath = hasSrc ? path3.join(cwd, "src") : cwd;
-  const componentsDir = path3.join(srcPath, "components", "ui");
+  const hasSrc = fs4.existsSync(path4.join(cwd, "src"));
+  const srcPath = hasSrc ? path4.join(cwd, "src") : cwd;
+  const componentsDir = path4.join(srcPath, "components", "ui");
   try {
-    await fs3.ensureDir(componentsDir);
+    await fs4.ensureDir(componentsDir);
     for (const name of componentsToAdd) {
       const comp = REGISTRY[name];
-      const fileName = path3.basename(comp.file);
-      const targetPath = path3.join(componentsDir, fileName);
-      if (fs3.existsSync(targetPath) && !options.overwrite) {
+      const fileName = path4.basename(comp.file);
+      const targetPath = path4.join(componentsDir, fileName);
+      if (fs4.existsSync(targetPath) && !options.overwrite) {
         spinner.stop();
         const { overwrite } = await prompts2({
           type: "confirm",
@@ -835,13 +848,13 @@ async function add(components, options) {
         }
         spinner.start("Adding components...");
       }
-      const registryPath = path3.resolve(__dirname4, "..", "src", "registry", comp.file);
-      if (!fs3.existsSync(registryPath)) {
+      const registryPath = path4.resolve(__dirname4, "..", "src", "registry", comp.file);
+      if (!fs4.existsSync(registryPath)) {
         spinner.warn(`Registry file not found for ${name}: ${registryPath}`);
         continue;
       }
-      const content = await fs3.readFile(registryPath, "utf-8");
-      await fs3.writeFile(targetPath, content);
+      const content = await fs4.readFile(registryPath, "utf-8");
+      await fs4.writeFile(targetPath, content);
       if (componentsToAdd.length > 10) {
         spinner.text = `Adding ${fileName}...`;
       } else {
@@ -891,19 +904,19 @@ async function list() {
 }
 
 // src/cli/utils/get-package-info.ts
-import path4 from "path";
-import fs4 from "fs-extra";
+import path5 from "path";
+import fs5 from "fs-extra";
 import { fileURLToPath as fileURLToPath4 } from "url";
 function getPackageInfo() {
   const __filename2 = fileURLToPath4(import.meta.url);
-  const __dirname5 = path4.dirname(__filename2);
+  const __dirname5 = path5.dirname(__filename2);
   const pathsToCheck = [
-    path4.resolve(__dirname5, "..", "package.json"),
-    path4.resolve(__dirname5, "..", "..", "..", "package.json")
+    path5.resolve(__dirname5, "..", "package.json"),
+    path5.resolve(__dirname5, "..", "..", "..", "package.json")
   ];
   for (const pkgPath of pathsToCheck) {
-    if (fs4.existsSync(pkgPath)) {
-      return fs4.readJSONSync(pkgPath);
+    if (fs5.existsSync(pkgPath)) {
+      return fs5.readJSONSync(pkgPath);
     }
   }
   return { version: "0.0.0" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@srcroot/ui",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "A UI library with polymorphic, accessible React components",
   "type": "module",
   "bin": {
@@ -25,6 +25,7 @@
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
+    "execa": "^9.6.1",
     "fs-extra": "^11.2.0",
     "ora": "^8.1.1",
     "prompts": "^2.4.2"