@tokiui/cli 0.1.0 → 0.1.1

package/dist/index.js

@@ -33,6 +33,7 @@ var import_fs_extra2 = __toESM(require("fs-extra"));
 var import_prompts = __toESM(require("prompts"));
 var import_kleur = __toESM(require("kleur"));
 var import_ora = __toESM(require("ora"));
+var import_execa = require("execa");
 
 // src/utils/config.ts
 var import_path = __toESM(require("path"));
@@ -55,51 +56,192 @@ function detectPackageManager(cwd) {
 }
 
 // src/commands/init.ts
+var GLOBALS_CANDIDATES = [
+  "src/app/globals.css",
+  "src/styles/globals.css",
+  "src/index.css",
+  "app/globals.css",
+  "styles/globals.css",
+  "index.css"
+];
+var POSTCSS_CANDIDATES = [
+  "postcss.config.mjs",
+  "postcss.config.js",
+  "postcss.config.cjs"
+];
+function detectGlobalsCss(cwd) {
+  return GLOBALS_CANDIDATES.find((c) => import_fs_extra2.default.existsSync(import_path2.default.join(cwd, c)));
+}
+function detectPostcss(cwd) {
+  return POSTCSS_CANDIDATES.find((f) => import_fs_extra2.default.existsSync(import_path2.default.join(cwd, f)));
+}
+function hasTailwindV3(cwd) {
+  return import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "tailwind.config.ts")) || import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "tailwind.config.js"));
+}
 var initCommand = new import_commander.Command("init").description("Initialize tokiui in your project").action(async () => {
   const cwd = process.cwd();
-  console.log(import_kleur.default.bold("\nInitializing tokiui...\n"));
-  const answers = await (0, import_prompts.default)([
-    {
-      type: "text",
-      name: "componentsDir",
-      message: "Where should components be installed?",
-      initial: "src/components/ui"
-    },
+  console.log(import_kleur.default.bold("\n  tokiui \u2014 setup\n"));
+  const hasSrc = import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "src"));
+  const isNext = import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "next.config.ts")) || import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "next.config.js")) || import_fs_extra2.default.existsSync(import_path2.default.join(cwd, "next.config.mjs"));
+  const detectedGlobals = detectGlobalsCss(cwd);
+  if (hasTailwindV3(cwd)) {
+    console.log(
+      import_kleur.default.yellow(
+        "  \u26A0  tailwind.config.ts detected \u2014 tokiui requires Tailwind CSS v4.\n     Migrate first: https://tailwindcss.com/docs/upgrade-guide\n"
+      )
+    );
+  }
+  const answers = await (0, import_prompts.default)(
+    [
+      {
+        type: "text",
+        name: "componentsDir",
+        message: "Where should components be installed?",
+        initial: hasSrc ? "src/components/ui" : "components/ui"
+      },
+      {
+        type: "text",
+        name: "libDir",
+        message: "Where should utility files be placed?",
+        initial: hasSrc ? "src/lib" : "lib"
+      },
+      {
+        type: "text",
+        name: "globalsPath",
+        message: "Where is your global CSS file?",
+        initial: detectedGlobals ?? (hasSrc ? "src/app/globals.css" : "app/globals.css")
+      }
+    ],
     {
-      type: "text",
-      name: "libDir",
-      message: "Where should utility files be placed?",
-      initial: "src/lib"
+      onCancel() {
+        console.log(import_kleur.default.red("\n  Aborted.\n"));
+        process.exit(0);
+      }
     }
-  ]);
-  if (!answers.componentsDir) {
-    console.log(import_kleur.default.red("Aborted."));
-    process.exit(0);
-  }
-  const spinner = (0, import_ora.default)("Setting up project...").start();
+  );
+  const pm = detectPackageManager(cwd);
+  const installCmd = pm === "npm" ? "install" : "add";
+  const libAlias = hasSrc ? "@/" + answers.libDir.replace(/^src\//, "") : "@/" + answers.libDir;
+  const spinner = (0, import_ora.default)();
+  spinner.start("Creating directories");
   await import_fs_extra2.default.ensureDir(import_path2.default.join(cwd, answers.componentsDir));
   await import_fs_extra2.default.ensureDir(import_path2.default.join(cwd, answers.libDir));
+  spinner.succeed("Directories ready");
+  spinner.start(`Installing packages with ${pm}`);
+  try {
+    await (0, import_execa.execa)(
+      pm,
+      [installCmd, "@tokiui/ui", "tailwindcss", "@tailwindcss/postcss", "clsx", "tailwind-merge"],
+      { cwd }
+    );
+    spinner.succeed("Packages installed");
+  } catch {
+    spinner.fail("Package install failed \u2014 run manually:");
+    console.log(
+      import_kleur.default.dim(
+        `
+  ${pm} ${installCmd} @tokiui/ui tailwindcss @tailwindcss/postcss clsx tailwind-merge
+`
+      )
+    );
+  }
+  spinner.start("Writing utility functions");
   const cnPath = import_path2.default.join(cwd, answers.libDir, "utils.ts");
   if (!import_fs_extra2.default.existsSync(cnPath)) {
     await import_fs_extra2.default.writeFile(
       cnPath,
-      `import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+      [
+        `import { clsx, type ClassValue } from 'clsx'`,
+        `import { twMerge } from 'tailwind-merge'`,
+        ``,
+        `export function cn(...inputs: ClassValue[]) {`,
+        `  return twMerge(clsx(inputs))`,
+        `}`
+      ].join("\n") + "\n"
+    );
+    spinner.succeed("utils.ts written");
+  } else {
+    spinner.succeed("utils.ts already exists \u2014 skipped");
+  }
+  spinner.start("Configuring PostCSS");
+  const existingPostcss = detectPostcss(cwd);
+  if (!existingPostcss) {
+    await import_fs_extra2.default.writeFile(
+      import_path2.default.join(cwd, "postcss.config.mjs"),
+      `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
 }
 `
     );
+    spinner.succeed("postcss.config.mjs created");
+  } else {
+    const content = await import_fs_extra2.default.readFile(import_path2.default.join(cwd, existingPostcss), "utf-8");
+    if (content.includes("@tailwindcss/postcss") || content.includes("tailwindcss")) {
+      spinner.succeed(`PostCSS already configured (${existingPostcss})`);
+    } else {
+      spinner.warn(
+        `${existingPostcss} exists but has no Tailwind plugin \u2014 add '@tailwindcss/postcss' manually`
+      );
+    }
+  }
+  spinner.start("Setting up global CSS");
+  const globalsAbsPath = import_path2.default.join(cwd, answers.globalsPath);
+  await import_fs_extra2.default.ensureDir(import_path2.default.dirname(globalsAbsPath));
+  let css = import_fs_extra2.default.existsSync(globalsAbsPath) ? await import_fs_extra2.default.readFile(globalsAbsPath, "utf-8") : "";
+  const prepend = [];
+  if (!css.includes('@import "tailwindcss"') && !css.includes("@import 'tailwindcss'")) {
+    prepend.push('@import "tailwindcss";');
+  }
+  if (!css.includes("@tokiui/ui/styles.css")) {
+    prepend.push('@import "@tokiui/ui/styles.css";');
+  }
+  if (prepend.length > 0) {
+    css = prepend.join("\n") + "\n\n" + css;
+    await import_fs_extra2.default.writeFile(globalsAbsPath, css);
+    spinner.succeed(`globals.css updated (${answers.globalsPath})`);
+  } else {
+    spinner.succeed("globals.css already configured");
+  }
+  spinner.start("Checking TypeScript path aliases");
+  const tsconfigPath = import_path2.default.join(cwd, "tsconfig.json");
+  if (import_fs_extra2.default.existsSync(tsconfigPath)) {
+    const tsconfig = await import_fs_extra2.default.readJson(tsconfigPath);
+    const co = tsconfig.compilerOptions ?? {};
+    const paths = co.paths ?? {};
+    if (!paths["@/*"]) {
+      tsconfig.compilerOptions = {
+        ...co,
+        baseUrl: ".",
+        paths: { ...paths, "@/*": [hasSrc ? "./src/*" : "./*"] }
+      };
+      await import_fs_extra2.default.writeJson(tsconfigPath, tsconfig, { spaces: 2 });
+      spinner.succeed(`tsconfig.json \u2014 added "@/*": ["${hasSrc ? "./src/*" : "./*"}"]`);
+    } else {
+      spinner.succeed("tsconfig.json already has @/* paths");
+    }
+  } else {
+    spinner.warn("No tsconfig.json found \u2014 skipping path alias setup");
   }
   writeConfig(cwd, {
     componentsDir: answers.componentsDir,
     libDir: answers.libDir,
+    libAlias,
     style: "default"
   });
-  spinner.succeed("Project initialized");
-  console.log(import_kleur.default.green("\n\u2713 tokiui initialized successfully"));
-  console.log(import_kleur.default.dim("\nNext: run `npx tokiui add <component>` to add components\n"));
+  console.log(import_kleur.default.green("\n  \u2713 tokiui initialized\n"));
+  console.log(`  ${import_kleur.default.bold("Add your first component:")}
+`);
+  console.log(`  ${import_kleur.default.cyan("npx tokiui add button")}
+`);
+  if (!isNext) {
+    console.log(
+      import_kleur.default.dim(
+        "  Tip: make sure your framework imports globals.css so the\n  Tailwind and tokiui styles are loaded.\n"
+      )
+    );
+  }
 });
 
 // src/commands/add.ts
@@ -109,7 +251,7 @@ var import_fs_extra3 = __toESM(require("fs-extra"));
 var import_prompts2 = __toESM(require("prompts"));
 var import_kleur2 = __toESM(require("kleur"));
 var import_ora2 = __toESM(require("ora"));
-var import_execa = require("execa");
+var import_execa2 = require("execa");
 
 // src/utils/registry.ts
 var REGISTRY_BASE = "https://raw.githubusercontent.com/TopherGacad/tokiui/main/packages/registry";
@@ -146,6 +288,7 @@ var addCommand = new import_commander2.Command("add").description("Add a compone
     );
     process.exit(1);
   }
+  const libAlias = config.libAlias ?? `@/${config.libDir}`;
   let componentName = componentArg;
   if (!componentName) {
     const spinner = (0, import_ora2.default)("Fetching component list...").start();
@@ -166,24 +309,24 @@ var addCommand = new import_commander2.Command("add").description("Add a compone
       process.exit(0);
     }
     for (const name of answer.components) {
-      await installComponent(name, cwd, config.componentsDir, config.libDir);
+      await installComponent(name, cwd, config.componentsDir, libAlias);
     }
     return;
   }
-  await installComponent(componentName, cwd, config.componentsDir, config.libDir);
+  await installComponent(componentName, cwd, config.componentsDir, libAlias);
 });
-async function installComponent(name, cwd, componentsDir, libDir) {
+async function installComponent(name, cwd, componentsDir, libAlias) {
   const spinner = (0, import_ora2.default)(`Adding ${name}...`).start();
   const meta = await fetchComponent(name).catch(() => {
     spinner.fail(`Component "${name}" not found`);
     process.exit(1);
   });
   for (const dep of meta.registryDependencies) {
-    await installComponent(dep, cwd, componentsDir, libDir);
+    await installComponent(dep, cwd, componentsDir, libAlias);
   }
   for (const file of meta.files) {
     const source = await fetchComponentSource(name, file);
-    const transformed = transformImports(source, `@/${libDir}`);
+    const transformed = transformImports(source, libAlias);
     const destPath = import_path3.default.join(cwd, componentsDir, import_path3.default.basename(file));
     if (import_fs_extra3.default.existsSync(destPath)) {
       spinner.stop();
@@ -205,7 +348,7 @@ async function installComponent(name, cwd, componentsDir, libDir) {
   if (meta.dependencies.length > 0) {
     const pm = detectPackageManager(cwd);
     const installCmd = pm === "npm" ? "install" : "add";
-    await (0, import_execa.execa)(pm, [installCmd, ...meta.dependencies], { cwd });
+    await (0, import_execa2.execa)(pm, [installCmd, ...meta.dependencies], { cwd });
   }
   spinner.succeed(`Added ${import_kleur2.default.bold(name)}`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokiui/cli",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "CLI for adding tokiui components to your project",
   "license": "MIT",
   "author": "Topher Gacad",
@@ -24,6 +24,11 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit"
+  },
   "dependencies": {
     "commander": "^12.1.0",
     "execa": "^9.3.0",
@@ -38,10 +43,5 @@
     "@types/prompts": "^2.4.9",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "tsc --noEmit"
   }
-}
+}