@quarklab/rad-ui 0.3.5 → 0.3.7

package/dist/index.js

@@ -78,44 +78,48 @@ async function detectTailwindVersion(cwd, cssPath) {
   return "v4";
 }
 async function detectSrcDir(cwd) {
-  const tsconfigPath = path.resolve(cwd, "tsconfig.json");
-  if (await fs.pathExists(tsconfigPath)) {
-    try {
-      const raw = await fs.readFile(tsconfigPath, "utf-8");
-      const cleaned = raw.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
-      const tsconfig = JSON.parse(cleaned);
-      const paths = tsconfig?.compilerOptions?.paths;
-      if (paths) {
-        const aliasKey = Object.keys(paths).find(
-          (k) => k === "@/*" || k === "~/*"
-        );
-        if (aliasKey) {
-          const aliasTargets = paths[aliasKey];
-          if (Array.isArray(aliasTargets) && aliasTargets.length > 0) {
-            const target = aliasTargets[0].replace(/^\.\//, "").replace(/\/\*$/, "");
-            if (target) return target;
+  const configFiles = ["tsconfig.json", "jsconfig.json"];
+  for (const file of configFiles) {
+    const configPath = path.resolve(cwd, file);
+    if (await fs.pathExists(configPath)) {
+      try {
+        const raw = await fs.readFile(configPath, "utf-8");
+        const cleaned = raw.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+        const config = JSON.parse(cleaned);
+        const paths = config?.compilerOptions?.paths;
+        if (paths) {
+          const aliasKey = Object.keys(paths).find(
+            (k) => k === "@/*" || k === "~/*"
+          );
+          if (aliasKey) {
+            const aliasTargets = paths[aliasKey];
+            if (Array.isArray(aliasTargets) && aliasTargets.length > 0) {
+              const target = aliasTargets[0].replace(/^\.\//, "").replace(/\/\*$/, "");
+              return target === "" ? "." : target;
+            }
           }
         }
+      } catch {
       }
-    } catch {
     }
   }
   if (await fs.pathExists(path.resolve(cwd, "src"))) return "src";
   if (await fs.pathExists(path.resolve(cwd, "app"))) return "app";
   return "src";
 }
-function getDefaultCssPath(projectType) {
+function getDefaultCssPath(projectType, srcDir) {
+  const prefix = srcDir === "." ? "" : srcDir ? `${srcDir}/` : "src/";
   switch (projectType) {
     case "nextjs":
-      return "src/app/globals.css";
+      return `${prefix}app/globals.css`;
     case "vite":
-      return "src/index.css";
+      return `${prefix}index.css`;
     case "cra":
-      return "src/index.css";
+      return `${prefix}index.css`;
     case "expo":
       return "global.css";
     default:
-      return "src/globals.css";
+      return `${prefix}globals.css`;
   }
 }
 function getDefaultTailwindConfig(projectType) {
@@ -143,19 +147,32 @@ async function readConfig(cwd) {
   if (!exists) {
     throw new Error(`Configuration file not found. Run \`rad-ui init\` first.`);
   }
-  return fs2.readJson(configPath);
+  const config = await fs2.readJson(configPath);
+  if (!config.aliases.hooks) {
+    config.aliases.hooks = "@/hooks";
+  }
+  return config;
 }
 async function writeConfig(cwd, config) {
   const configPath = getConfigPath(cwd);
   await fs2.writeJson(configPath, config, { spaces: 2 });
 }
 function resolveAlias(alias, srcDir) {
-  return alias.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/");
+  const prefix = srcDir === "." ? "" : srcDir + "/";
+  return alias.replace(/^@\//, prefix).replace(/^~\//, prefix);
 }
 function resolveComponentsDir(cwd, config) {
   const relPath = resolveAlias(config.aliases.components, config.srcDir);
   return path2.resolve(cwd, relPath);
 }
+function resolveUtilsDir(cwd, config) {
+  const relPath = resolveAlias(config.aliases.utils, config.srcDir);
+  return path2.resolve(cwd, path2.dirname(relPath));
+}
+function resolveHooksDir(cwd, config) {
+  const relPath = resolveAlias(config.aliases.hooks, config.srcDir);
+  return path2.resolve(cwd, relPath);
+}
 
 // src/registry/themes.ts
 var themes = [
@@ -166,7 +183,7 @@ var themes = [
       light: {
         "--background": "40 20% 98%",
         "--foreground": "220 15% 15%",
-        "--primary": "175 100% 31%",
+        "--primary": "35 55% 51%",
         "--primary-foreground": "0 0% 100%",
         "--secondary": "40 10% 92%",
         "--secondary-foreground": "220 15% 15%",
@@ -177,13 +194,13 @@ var themes = [
         "--border": "40 10% 88%",
         "--muted": "40 10% 92%",
         "--muted-foreground": "220 10% 40%",
-        "--ring": "175 100% 31%",
+        "--ring": "35 55% 51%",
         "--radius": "0.5rem"
       },
       dark: {
         "--background": "222 47% 11%",
         "--foreground": "210 40% 98%",
-        "--primary": "170 65% 50%",
+        "--primary": "35 55% 60%",
         "--primary-foreground": "222 47% 11%",
         "--secondary": "217 33% 17%",
         "--secondary-foreground": "210 40% 98%",
@@ -194,7 +211,7 @@ var themes = [
         "--border": "217 33% 20%",
         "--muted": "217 33% 17%",
         "--muted-foreground": "210 20% 70%",
-        "--ring": "170 65% 50%"
+        "--ring": "35 55% 60%"
       }
     }
   },
@@ -462,14 +479,16 @@ async function initCommand(opts) {
   const projectType = await detectProjectType(cwd);
   const packageManager = await detectPackageManager(cwd);
   const detectedSrcDir = await detectSrcDir(cwd);
-  const defaultCssPath = getDefaultCssPath(projectType);
+  const defaultCssPath = getDefaultCssPath(projectType, detectedSrcDir);
   const tailwindVersion = await detectTailwindVersion(cwd, defaultCssPath);
   if (projectType !== "unknown") {
     p.log.info(`Detected project: ${chalk2.cyan(projectType)}`);
   }
   p.log.info(`Package manager: ${chalk2.cyan(packageManager)}`);
   p.log.info(`Tailwind CSS: ${chalk2.cyan(tailwindVersion)}`);
-  p.log.info(`Source directory: ${chalk2.cyan(detectedSrcDir + "/")}`);
+  const srcDirDisplay = detectedSrcDir === "." ? "project root" : detectedSrcDir + "/";
+  p.log.info(`Source directory: ${chalk2.cyan(srcDirDisplay)}`);
+  const examplePrefix = detectedSrcDir === "." ? "" : detectedSrcDir + "/";
   const responses = await p.group(
     {
       theme: () => p.select({
@@ -481,20 +500,25 @@ async function initCommand(opts) {
         initialValue: "kahgel"
       }),
       srcDir: () => p.text({
-        message: `Base directory that @ resolves to:`,
+        message: `Base directory that @ resolves to (use "." for project root):`,
         placeholder: detectedSrcDir,
         defaultValue: detectedSrcDir
       }),
       componentsPath: () => p.text({
-        message: `Where to add UI components (e.g. ${detectedSrcDir}/components/ui):`,
+        message: `Where to add UI components (e.g. ${examplePrefix}components/ui):`,
         placeholder: "@/components/ui",
         defaultValue: "@/components/ui"
       }),
       utilsPath: () => p.text({
-        message: `Where to create the cn() helper (e.g. ${detectedSrcDir}/lib/utils.ts):`,
+        message: `Where to create the cn() helper (e.g. ${examplePrefix}lib/utils.ts):`,
         placeholder: "@/lib/utils",
         defaultValue: "@/lib/utils"
       }),
+      hooksPath: () => p.text({
+        message: `Where to add hooks (e.g. ${examplePrefix}hooks):`,
+        placeholder: "@/hooks",
+        defaultValue: "@/hooks"
+      }),
       cssPath: () => p.text({
         message: `Path to your global CSS file:`,
         placeholder: defaultCssPath,
@@ -531,7 +555,8 @@ async function initCommand(opts) {
     },
     aliases: {
       components: responses.componentsPath,
-      utils: responses.utilsPath
+      utils: responses.utilsPath,
+      hooks: responses.hooksPath
     }
   };
   await writeConfig(cwd, config);
@@ -547,8 +572,12 @@ async function initCommand(opts) {
   }
   s.stop("Theme configured.");
   s.start("Setting up utilities...");
+  const resolveAliasPath = (alias) => {
+    const prefix = srcDir === "." ? "" : srcDir + "/";
+    return alias.replace(/^@\//, prefix).replace(/^~\//, prefix);
+  };
   const utilsAlias = config.aliases.utils;
-  const utilsRelPath = utilsAlias.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/") + ".ts";
+  const utilsRelPath = resolveAliasPath(utilsAlias) + ".ts";
   const utilsDestPath = path3.resolve(cwd, utilsRelPath);
   const utilsDir = path3.dirname(utilsDestPath);
   await fs3.ensureDir(utilsDir);
@@ -564,7 +593,7 @@ export function cn(...inputs: ClassValue[]) {
   if (tailwindVersion === "v3" && config.tailwind.config) {
     s.start("Configuring Tailwind CSS...");
     const tailwindConfigPath = path3.resolve(cwd, config.tailwind.config);
-    const componentsRelPath = config.aliases.components.replace(/^@\//, srcDir + "/").replace(/^~\//, srcDir + "/");
+    const componentsRelPath = resolveAliasPath(config.aliases.components);
     if (await fs3.pathExists(tailwindConfigPath)) {
       let tailwindContent = await fs3.readFile(tailwindConfigPath, "utf-8");
       const contentPath = `./${componentsRelPath}/**/*.{ts,tsx}`;
@@ -712,6 +741,10 @@ module.exports = {
     p.log.warn(`Please manually install: ${chalk2.cyan(baseDeps.join(" "))}`);
   }
   logger.break();
+  const showResolvedPath = (alias, addExtension) => {
+    const resolved = resolveAliasPath(alias);
+    return resolved + (addExtension || "");
+  };
   p.note(
     [
       `${chalk2.green("Rad UI has been initialized!")}`,
@@ -721,8 +754,9 @@ module.exports = {
       "",
       `Theme: ${chalk2.cyan(selectedTheme?.label || config.theme)}`,
       `Tailwind: ${chalk2.cyan(tailwindVersion)}`,
-      `Components: ${chalk2.cyan(config.aliases.components)} \u2192 ${chalk2.dim(srcDir + "/" + config.aliases.components.replace(/^@\//, "").replace(/^~\//, ""))}`,
-      `Utils: ${chalk2.cyan(config.aliases.utils)} \u2192 ${chalk2.dim(srcDir + "/" + config.aliases.utils.replace(/^@\//, "").replace(/^~\//, "") + ".ts")}`
+      `Components: ${chalk2.cyan(config.aliases.components)} \u2192 ${chalk2.dim(showResolvedPath(config.aliases.components))}`,
+      `Utils: ${chalk2.cyan(config.aliases.utils)} \u2192 ${chalk2.dim(showResolvedPath(config.aliases.utils, ".ts"))}`,
+      `Hooks: ${chalk2.cyan(config.aliases.hooks)} \u2192 ${chalk2.dim(showResolvedPath(config.aliases.hooks))}`
     ].join("\n"),
     "Next steps"
   );
@@ -1035,6 +1069,48 @@ async function fetchRegistryIndex(registryUrl) {
 }
 
 // src/commands/add.ts
+function classifyFile(filePath) {
+  const fileName = path4.basename(filePath);
+  const ext = path4.extname(filePath);
+  if (/^use[-_]?[a-zA-Z]/.test(fileName) && ext === ".ts") {
+    return "hook";
+  }
+  if (ext === ".tsx") {
+    return "component";
+  }
+  if (ext === ".ts") {
+    return "util";
+  }
+  return "component";
+}
+function transformRelativeImports(content, originalFilePath, componentFiles, config, componentName) {
+  let result = content;
+  const relativeImportRegex = /from\s+["']\.\/([^"']+)["']/g;
+  let match;
+  while ((match = relativeImportRegex.exec(content)) !== null) {
+    const importedModule = match[1];
+    const importedFile = componentFiles.find((f) => {
+      const baseName = path4.basename(f.originalPath, path4.extname(f.originalPath));
+      return baseName === importedModule || f.originalPath.includes(`/${importedModule}.`) || f.originalPath.endsWith(`/${importedModule}.ts`) || f.originalPath.endsWith(`/${importedModule}.tsx`);
+    });
+    if (importedFile && importedFile.fileType !== "component") {
+      let newImportPath;
+      if (importedFile.fileType === "hook") {
+        const hookFileName = path4.basename(importedFile.destPath, ".ts");
+        newImportPath = `${config.aliases.hooks}/${hookFileName}`;
+      } else {
+        const utilFileName = path4.basename(importedFile.destPath, ".ts");
+        const utilsBase = config.aliases.utils.replace(/\/utils$/, "");
+        newImportPath = `${utilsBase}/${componentName}/${utilFileName}`;
+      }
+      result = result.replace(
+        new RegExp(`from\\s+["']\\.\\/${importedModule}["']`, "g"),
+        `from "${newImportPath}"`
+      );
+    }
+  }
+  return result;
+}
 async function getComponentContent(name, config) {
   if (!config.registry) {
     throw new Error(
@@ -1114,6 +1190,8 @@ async function addCommand(componentNames, opts) {
     );
   }
   const componentsDir = opts.path ? path4.resolve(cwd, opts.path) : resolveComponentsDir(cwd, config);
+  const hooksDir = resolveHooksDir(cwd, config);
+  const utilsDir = resolveUtilsDir(cwd, config);
   if (!opts.overwrite) {
     const existing = [];
     for (const name of allNames) {
@@ -1146,8 +1224,13 @@ async function addCommand(componentNames, opts) {
   const s = p2.spinner();
   s.start("Adding components...");
   await fs4.ensureDir(componentsDir);
+  await fs4.ensureDir(hooksDir);
+  await fs4.ensureDir(utilsDir);
   let copiedCount = 0;
+  let hooksCount = 0;
+  let utilsCount = 0;
   const allDeps = [];
+  const filePlacements = /* @__PURE__ */ new Map();
   for (const name of allNames) {
     const item = await getComponentContent(name, config);
     if (!item || item.files.length === 0) {
@@ -1157,17 +1240,50 @@ async function addCommand(componentNames, opts) {
     if (item.dependencies) {
       allDeps.push(...item.dependencies);
     }
+    const componentFiles = [];
     for (const file of item.files) {
-      let content = file.content;
-      content = transformImports(content, config);
       const relPath = file.path.replace(/^ui\//, "");
-      const destPath = path4.resolve(componentsDir, relPath);
-      await fs4.ensureDir(path4.dirname(destPath));
-      await fs4.writeFile(destPath, content, "utf-8");
+      const fileName = path4.basename(relPath);
+      const fileType = classifyFile(relPath);
+      let destPath;
+      if (fileType === "component") {
+        destPath = path4.resolve(componentsDir, relPath);
+      } else if (fileType === "hook") {
+        destPath = path4.resolve(hooksDir, fileName);
+        hooksCount++;
+      } else {
+        destPath = path4.resolve(utilsDir, name, fileName);
+        utilsCount++;
+      }
+      componentFiles.push({
+        originalPath: relPath,
+        destPath,
+        content: file.content,
+        fileType
+      });
+      filePlacements.set(relPath, { destPath, fileType });
+    }
+    for (const fileInfo of componentFiles) {
+      let content = fileInfo.content;
+      content = transformImports(content, config);
+      if (fileInfo.fileType === "component") {
+        content = transformRelativeImports(
+          content,
+          fileInfo.originalPath,
+          componentFiles,
+          config,
+          name
+        );
+      }
+      await fs4.ensureDir(path4.dirname(fileInfo.destPath));
+      await fs4.writeFile(fileInfo.destPath, content, "utf-8");
       copiedCount++;
     }
   }
-  s.stop(`Added ${copiedCount} component file(s).`);
+  const summary = [`Added ${copiedCount} file(s)`];
+  if (hooksCount > 0) summary.push(`${hooksCount} hook(s)`);
+  if (utilsCount > 0) summary.push(`${utilsCount} util(s)`);
+  s.stop(summary.join(", ") + ".");
   const npmDeps = collectNpmDependencies(allNames);
   const depsFromRegistry = [...new Set(allDeps)];
   const depsToInstall = Object.entries(npmDeps).map(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quarklab/rad-ui",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "A CLI for adding Rad UI components to your project. Beautiful Persian-themed React components built on Radix UI and Tailwind CSS.",
   "license": "MIT",
   "type": "module",
@@ -44,5 +44,5 @@
     "type": "git",
     "url": "git+https://github.com/quarklab/rad-ui.git"
   },
-  "homepage": "https://rad-ui.com"
+  "homepage": "https://quarklab.dev"
 }