basuicn 0.2.0 → 0.2.3

package/dist/ui-cli.cjs

@@ -27,7 +27,7 @@ var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
 var import_child_process = require("child_process");
 var import_readline = __toESM(require("readline"), 1);
-var VERSION = "0.2.0";
+var VERSION = "0.2.3";
 var REGISTRY_LOCAL = "./registry.json";
 var REGISTRY_REMOTE = "https://raw.githubusercontent.com/Basuicn/basuicn-core/main/registry.json";
 var c = {
@@ -47,6 +47,27 @@ var ok = (msg) => console.log(`${c.green}\u2714${c.reset} ${msg}`);
 var warn = (msg) => console.warn(`${c.yellow}\u26A0${c.reset} ${msg}`);
 var error = (msg) => console.error(`${c.red}\u2716${c.reset} ${msg}`);
 var getTargetProjectDir = () => process.cwd();
+var detectFramework = (cwd) => {
+  const hasNextConfig = import_fs.default.existsSync(import_path.default.join(cwd, "next.config.js")) || import_fs.default.existsSync(import_path.default.join(cwd, "next.config.ts")) || import_fs.default.existsSync(import_path.default.join(cwd, "next.config.mjs"));
+  const hasNextDep = (() => {
+    const pkgPath = import_path.default.join(cwd, "package.json");
+    if (!import_fs.default.existsSync(pkgPath)) return false;
+    try {
+      const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
+      const all = { ...pkg.dependencies || {}, ...pkg.devDependencies || {} };
+      return !!all["next"];
+    } catch {
+      return false;
+    }
+  })();
+  if (hasNextConfig || hasNextDep) {
+    const hasAppDir = import_fs.default.existsSync(import_path.default.join(cwd, "src/app")) || import_fs.default.existsSync(import_path.default.join(cwd, "app"));
+    const hasPagesDir = import_fs.default.existsSync(import_path.default.join(cwd, "src/pages")) || import_fs.default.existsSync(import_path.default.join(cwd, "pages"));
+    if (hasPagesDir && !hasAppDir) return "nextjs-pages";
+    return "nextjs-app";
+  }
+  return "vite";
+};
 var ask = (question) => {
   const rl = import_readline.default.createInterface({ input: process.stdin, output: process.stdout });
   return new Promise((resolve) => {
@@ -130,6 +151,19 @@ var RUNTIME_PACKAGES = [
   "tailwindcss-animate",
   "lucide-react"
 ];
+var NEXTJS_DEV_PACKAGES = [
+  "tailwindcss",
+  "@tailwindcss/postcss",
+  "@types/node"
+];
+var POSTCSS_CONFIG_TEMPLATE = `const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;
+`;
 var VITE_CONFIG_TEMPLATE = `import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
@@ -237,6 +271,22 @@ var setupViteConfig = (cwd) => {
   import_fs.default.writeFileSync(existingPath, content);
   ok(`Updated ${import_path.default.basename(existingPath)} with Tailwind + path aliases.`);
 };
+var setupNextConfig = (cwd) => {
+  installNpmPackages(NEXTJS_DEV_PACKAGES, cwd, true);
+  const postcssCandidates = ["postcss.config.mjs", "postcss.config.js", "postcss.config.cjs"];
+  const existingPostcss = postcssCandidates.map((f) => import_path.default.join(cwd, f)).find((p) => import_fs.default.existsSync(p));
+  if (!existingPostcss) {
+    import_fs.default.writeFileSync(import_path.default.join(cwd, "postcss.config.mjs"), POSTCSS_CONFIG_TEMPLATE);
+    ok("Created postcss.config.mjs with @tailwindcss/postcss.");
+    return;
+  }
+  const content = import_fs.default.readFileSync(existingPostcss, "utf-8");
+  if (!content.includes("@tailwindcss/postcss") && !content.includes("tailwindcss")) {
+    warn(`${import_path.default.basename(existingPostcss)} found but missing Tailwind plugin \u2014 add '@tailwindcss/postcss': {} to plugins manually.`);
+  } else {
+    ok(`${import_path.default.basename(existingPostcss)} already configured \u2014 skipping.`);
+  }
+};
 var setupTsConfig = (cwd) => {
   const candidates = ["tsconfig.app.json", "tsconfig.json"];
   for (const candidate of candidates) {
@@ -288,6 +338,154 @@ var ensureCore = (registry, cwd, options = {}) => {
     ok(`${import_fs.default.existsSync(targetPath) ? "Updated" : "Created"} core file: ${file.path}`);
   }
 };
+var NEXT_APP_LAYOUT_CANDIDATES = [
+  "src/app/layout.tsx",
+  "src/app/layout.jsx",
+  "app/layout.tsx",
+  "app/layout.jsx"
+];
+var NEXT_PAGES_APP_CANDIDATES = [
+  "src/pages/_app.tsx",
+  "src/pages/_app.jsx",
+  "pages/_app.tsx",
+  "pages/_app.jsx"
+];
+var findNextLayoutFile = (cwd) => {
+  for (const c2 of NEXT_APP_LAYOUT_CANDIDATES) {
+    const p = import_path.default.join(cwd, c2);
+    if (import_fs.default.existsSync(p)) return p;
+  }
+  return null;
+};
+var findNextPagesAppFile = (cwd) => {
+  for (const c2 of NEXT_PAGES_APP_CANDIDATES) {
+    const p = import_path.default.join(cwd, c2);
+    if (import_fs.default.existsSync(p)) return p;
+  }
+  return null;
+};
+var patchNextLayout = (cwd) => {
+  const layoutPath = findNextLayoutFile(cwd);
+  if (!layoutPath) {
+    warn("Could not find app/layout.tsx \u2014 add ThemeProvider and CSS import manually.");
+    return;
+  }
+  let content = import_fs.default.readFileSync(layoutPath, "utf-8");
+  let changed = false;
+  const cssImport = "import '@/styles/index.css';";
+  if (!content.includes("styles/index.css") && !content.includes("index.css")) {
+    const firstImport = content.match(/^import\s/m);
+    if (firstImport?.index !== void 0) {
+      content = content.slice(0, firstImport.index) + cssImport + "\n" + content.slice(firstImport.index);
+    } else {
+      content = cssImport + "\n" + content;
+    }
+    changed = true;
+  }
+  if (!content.includes("ThemeProvider")) {
+    content = insertImport(content, "import { ThemeProvider } from '@/lib/theme/ThemeProvider';");
+    const wrapped = content.replace(/\{children\}/, "<ThemeProvider>{children}</ThemeProvider>");
+    if (wrapped !== content) {
+      content = wrapped;
+    } else {
+      warn("Could not locate {children} in layout.tsx \u2014 add <ThemeProvider> wrapper manually.");
+    }
+    changed = true;
+  }
+  if (changed) {
+    import_fs.default.writeFileSync(layoutPath, content);
+    ok(`Patched ${import_path.default.relative(cwd, layoutPath)}.`);
+  } else {
+    ok(`${import_path.default.relative(cwd, layoutPath)} already configured \u2014 skipping.`);
+  }
+};
+var patchNextPagesApp = (cwd) => {
+  const appPath = findNextPagesAppFile(cwd);
+  if (!appPath) {
+    warn("Could not find pages/_app.tsx \u2014 add ThemeProvider and CSS import manually.");
+    return;
+  }
+  let content = import_fs.default.readFileSync(appPath, "utf-8");
+  let changed = false;
+  const cssImport = "import '@/styles/index.css';";
+  if (!content.includes("styles/index.css") && !content.includes("index.css")) {
+    content = insertImport(content, cssImport);
+    changed = true;
+  }
+  if (!content.includes("ThemeProvider")) {
+    content = insertImport(content, "import { ThemeProvider } from '@/lib/theme/ThemeProvider';");
+    const wrapped = content.replace(/(<Component\s[^/]*\/\s*>)/, "<ThemeProvider>\n        $1\n      </ThemeProvider>");
+    if (wrapped !== content) {
+      content = wrapped;
+    } else {
+      warn("Could not locate <Component .../> in _app.tsx \u2014 add <ThemeProvider> wrapper manually.");
+    }
+    changed = true;
+  }
+  if (changed) {
+    import_fs.default.writeFileSync(appPath, content);
+    ok(`Patched ${import_path.default.relative(cwd, appPath)}.`);
+  } else {
+    ok(`${import_path.default.relative(cwd, appPath)} already configured \u2014 skipping.`);
+  }
+};
+var patchNextLayoutComponent = (cwd, patch) => {
+  const layoutPath = findNextLayoutFile(cwd);
+  if (!layoutPath) {
+    warn(`Could not find Next.js layout \u2014 add ${patch.jsx} manually.`);
+    return;
+  }
+  let content = import_fs.default.readFileSync(layoutPath, "utf-8");
+  const tagName = patch.jsx.match(/<(\w+)/)?.[1];
+  if (tagName && content.includes(`<${tagName}`)) return;
+  content = insertImport(content, patch.import);
+  const updated = content.replace(/<\/body>/, `  ${patch.jsx}
+      </body>`);
+  if (updated !== content) {
+    import_fs.default.writeFileSync(layoutPath, updated);
+    ok(`Added <${tagName}> to ${import_path.default.relative(cwd, layoutPath)}.`);
+  } else {
+    warn(`Could not auto-add <${tagName}> to layout.tsx \u2014 add it manually.`);
+  }
+};
+var patchNextPagesAppComponent = (cwd, patch) => {
+  const appPath = findNextPagesAppFile(cwd);
+  if (!appPath) {
+    warn(`Could not find pages/_app.tsx \u2014 add ${patch.jsx} manually.`);
+    return;
+  }
+  let content = import_fs.default.readFileSync(appPath, "utf-8");
+  const tagName = patch.jsx.match(/<(\w+)/)?.[1];
+  if (tagName && content.includes(`<${tagName}`)) return;
+  content = insertImport(content, patch.import);
+  let updated = content.replace(
+    /(<Component\s[^/]*\/\s*>)(\s*\n\s*<\/ThemeProvider>)/,
+    `$1
+      ${patch.jsx}$2`
+  );
+  if (updated === content) {
+    updated = content.replace(/(<Component\s[^/]*\/\s*>)/, `$1
+      ${patch.jsx}`);
+  }
+  if (updated !== content) {
+    import_fs.default.writeFileSync(appPath, updated);
+    ok(`Added <${tagName}> to ${import_path.default.relative(cwd, appPath)}.`);
+  } else {
+    warn(`Could not auto-add <${tagName}> to _app.tsx \u2014 add it manually.`);
+  }
+};
+var patchEntryFile = (cwd, framework) => {
+  if (framework === "nextjs-app") patchNextLayout(cwd);
+  else if (framework === "nextjs-pages") patchNextPagesApp(cwd);
+  else patchMainTsx(cwd);
+};
+var patchEntryComponentFile = (cwd, componentName, framework) => {
+  const patch = MAIN_PATCH_COMPONENTS[componentName];
+  if (!patch) return;
+  if (framework === "nextjs-app") patchNextLayoutComponent(cwd, patch);
+  else if (framework === "nextjs-pages") patchNextPagesAppComponent(cwd, patch);
+  else patchMainTsxComponent(cwd, componentName);
+};
 var MAIN_PATCH_COMPONENTS = {
   toast: {
     import: "import { Toaster } from '@/components/ui/toast/Toaster';",
@@ -400,7 +598,13 @@ var addComponent = (name, registry, cwd, options, added = /* @__PURE__ */ new Se
       warn(`Skipped (exists): ${file.path} \u2014 use ${c.cyan}--force${c.reset} to overwrite`);
       continue;
     }
-    import_fs.default.writeFileSync(targetPath, file.content);
+    let content = file.content;
+    if (options.framework === "nextjs-app" && file.path.endsWith(".tsx")) {
+      if (!content.startsWith("'use client'") && !content.startsWith('"use client"')) {
+        content = "'use client';\n" + content;
+      }
+    }
+    import_fs.default.writeFileSync(targetPath, content);
     ok(`Created: ${file.path}`);
   }
 };
@@ -468,13 +672,21 @@ var HELP_COMMANDS = {
 ${c.bold}basuicn init${c.reset}
 
   Initialize your project for basuicn components.
+  Auto-detects Vite or Next.js (App Router / Pages Router).
 
-  ${c.bold}What it does:${c.reset}
+  ${c.bold}What it does (Vite):${c.reset}
     1. Installs runtime dependencies (@base-ui/react, tailwind-variants, etc.)
     2. Sets up vite.config.ts with Tailwind CSS + path aliases
     3. Patches tsconfig.json with path aliases (@/*, @lib/*, etc.)
     4. Copies core files (cn.ts, themes.ts, ThemeProvider.tsx, index.css)
-    5. Wraps your <App /> with <ThemeProvider> in the main entry
+    5. Wraps your <App /> with <ThemeProvider> in src/main.tsx
+
+  ${c.bold}What it does (Next.js):${c.reset}
+    1. Installs runtime dependencies (@base-ui/react, tailwind-variants, etc.)
+    2. Sets up postcss.config.mjs with @tailwindcss/postcss
+    3. Patches tsconfig.json with path aliases (@/*, @lib/*, etc.)
+    4. Copies core files (cn.ts, themes.ts, ThemeProvider.tsx, index.css)
+    5. Wraps {children} with <ThemeProvider> in app/layout.tsx (or pages/_app.tsx)
 
   ${c.bold}Usage:${c.reset}
     ${c.dim}$${c.reset} npx basuicn init
@@ -584,11 +796,17 @@ var main = async () => {
   switch (command) {
     case "init": {
       log("Initializing project...");
-      setupViteConfig(cwd);
+      const framework = detectFramework(cwd);
+      if (framework === "vite") {
+        setupViteConfig(cwd);
+      } else {
+        log(`Detected Next.js (${framework === "nextjs-app" ? "App Router" : "Pages Router"}).`);
+        setupNextConfig(cwd);
+      }
       setupTsConfig(cwd);
       installNpmPackages(RUNTIME_PACKAGES, cwd);
       ensureCore(registry, cwd, { force: true });
-      patchMainTsx(cwd);
+      patchEntryFile(cwd, framework);
       console.log("");
       ok(`${c.bold}Initialization complete!${c.reset} Run ${c.cyan}npx basuicn add <component>${c.reset} to get started.`);
       break;
@@ -619,18 +837,24 @@ ${c.bold}Available components (${all.length}):${c.reset}`);
         names = answer === "all" ? all : answer.split(/[\s,]+/).filter(Boolean);
       }
       const cnPath = import_path.default.join(cwd, "src/lib/utils/cn.ts");
+      const framework = detectFramework(cwd);
       if (!import_fs.default.existsSync(cnPath)) {
         log("Project not initialized \u2014 running init first...");
-        setupViteConfig(cwd);
+        if (framework === "vite") {
+          setupViteConfig(cwd);
+        } else {
+          log(`Detected Next.js (${framework === "nextjs-app" ? "App Router" : "Pages Router"}).`);
+          setupNextConfig(cwd);
+        }
         setupTsConfig(cwd);
         installNpmPackages(RUNTIME_PACKAGES, cwd);
         ensureCore(registry, cwd, { force: true });
-        patchMainTsx(cwd);
+        patchEntryFile(cwd, framework);
         console.log("");
       }
       for (const name of names) {
-        addComponent(name, registry, cwd, { force: isForce });
-        patchMainTsxComponent(cwd, name);
+        addComponent(name, registry, cwd, { force: isForce, framework });
+        patchEntryComponentFile(cwd, name, framework);
       }
       console.log("");
       ok(`${c.bold}Done!${c.reset} Added ${names.length} component(s).`);
@@ -762,6 +986,11 @@ ${c.bold}Project Health Check${c.reset}
           issues++;
         }
       };
+      const docFramework = detectFramework(cwd);
+      if (docFramework !== "vite") {
+        console.log(`  ${c.cyan}\u2139${c.reset} Framework: Next.js (${docFramework === "nextjs-app" ? "App Router" : "Pages Router"})
+`);
+      }
       check(
         import_fs.default.existsSync(import_path.default.join(cwd, "src/lib/utils/cn.ts")),
         "src/lib/utils/cn.ts",
@@ -782,31 +1011,49 @@ ${c.bold}Project Health Check${c.reset}
         "src/styles/index.css (theme variables)",
         "run: npx basuicn init"
       );
-      const mainPath = findMainFile(cwd);
-      if (mainPath) {
-        const mainContent = import_fs.default.readFileSync(mainPath, "utf-8");
-        check(
-          mainContent.includes("ThemeProvider"),
-          "ThemeProvider in main entry",
-          "run: npx basuicn init"
-        );
-        check(
-          mainContent.includes("styles/index.css") || mainContent.includes("index.css"),
-          "CSS import in main entry",
-          "run: npx basuicn init"
-        );
+      if (docFramework === "nextjs-app") {
+        const layoutPath = findNextLayoutFile(cwd);
+        if (layoutPath) {
+          const layoutContent = import_fs.default.readFileSync(layoutPath, "utf-8");
+          check(layoutContent.includes("ThemeProvider"), "ThemeProvider in app/layout.tsx", "run: npx basuicn init");
+          check(layoutContent.includes("styles/index.css") || layoutContent.includes("index.css"), "CSS import in app/layout.tsx", "run: npx basuicn init");
+        } else {
+          check(false, "app/layout.tsx", "create src/app/layout.tsx");
+        }
+      } else if (docFramework === "nextjs-pages") {
+        const pagesAppPath = findNextPagesAppFile(cwd);
+        if (pagesAppPath) {
+          const pagesAppContent = import_fs.default.readFileSync(pagesAppPath, "utf-8");
+          check(pagesAppContent.includes("ThemeProvider"), "ThemeProvider in pages/_app.tsx", "run: npx basuicn init");
+          check(pagesAppContent.includes("styles/index.css") || pagesAppContent.includes("index.css"), "CSS import in pages/_app.tsx", "run: npx basuicn init");
+        } else {
+          check(false, "pages/_app.tsx", "create pages/_app.tsx");
+        }
       } else {
-        check(false, "main entry file (src/main.tsx)", "create src/main.tsx");
+        const mainPath = findMainFile(cwd);
+        if (mainPath) {
+          const mainContent = import_fs.default.readFileSync(mainPath, "utf-8");
+          check(mainContent.includes("ThemeProvider"), "ThemeProvider in main entry", "run: npx basuicn init");
+          check(mainContent.includes("styles/index.css") || mainContent.includes("index.css"), "CSS import in main entry", "run: npx basuicn init");
+        } else {
+          check(false, "main entry file (src/main.tsx)", "create src/main.tsx");
+        }
       }
       const pkgPath = import_path.default.join(cwd, "package.json");
       if (import_fs.default.existsSync(pkgPath)) {
         const pkg = JSON.parse(import_fs.default.readFileSync(pkgPath, "utf-8"));
-        const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+        const allDeps = { ...pkg.dependencies || {}, ...pkg.devDependencies || {} };
         for (const dep of RUNTIME_PACKAGES) {
           check(!!allDeps[dep], `package: ${dep}`, `run: npm install ${dep}`);
         }
-        for (const dep of VITE_DEV_PACKAGES) {
-          check(!!allDeps[dep], `package (dev): ${dep}`, `run: npm install -D ${dep}`);
+        if (docFramework === "vite") {
+          for (const dep of VITE_DEV_PACKAGES) {
+            check(!!allDeps[dep], `package (dev): ${dep}`, `run: npm install -D ${dep}`);
+          }
+        } else {
+          for (const dep of NEXTJS_DEV_PACKAGES) {
+            check(!!allDeps[dep], `package (dev): ${dep}`, `run: npm install -D ${dep}`);
+          }
         }
       } else {
         check(false, "package.json found", "run: npm init -y");
@@ -829,8 +1076,13 @@ ${c.bold}Project Health Check${c.reset}
         return content.includes('"@/*"') || content.includes("'@/*'");
       });
       check(hasAlias, "TypeScript path aliases (@/*)", "run: npx basuicn init");
-      const hasViteConfig = import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.ts")) || import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.js"));
-      check(hasViteConfig, "vite.config.ts / vite.config.js", "run: npx basuicn init");
+      if (docFramework === "vite") {
+        const hasViteConfig = import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.ts")) || import_fs.default.existsSync(import_path.default.join(cwd, "vite.config.js"));
+        check(hasViteConfig, "vite.config.ts / vite.config.js", "run: npx basuicn init");
+      } else {
+        const hasPostcss = ["postcss.config.mjs", "postcss.config.js", "postcss.config.cjs"].some((f) => import_fs.default.existsSync(import_path.default.join(cwd, f)));
+        check(hasPostcss, "postcss.config.mjs (Tailwind CSS for Next.js)", "run: npx basuicn init");
+      }
       console.log("");
       if (issues === 0) {
         ok(`${c.bold}All checks passed!${c.reset} Project is healthy.`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "basuicn",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.3",
   "type": "module",
   "bin": {
     "basuicn": "./dist/ui-cli.cjs"