cus-base-ui 0.2.6 → 0.2.8

package/dist/ui-cli.cjs

@@ -68,7 +68,7 @@ var getRegistry = async (isLocal) => {
     process.exit(1);
   }
 };
-var installNpmPackages = (packages, cwd) => {
+var installNpmPackages = (packages, cwd, dev = false) => {
   if (packages.length === 0) return;
   const pkgJsonPath = import_path.default.join(cwd, "package.json");
   let toInstall = packages;
@@ -79,12 +79,189 @@ var installNpmPackages = (packages, cwd) => {
   }
   if (toInstall.length === 0) return;
   log(`Installing: ${toInstall.join(", ")}...`);
+  const flag = dev ? "--save-dev" : "--save";
   try {
-    (0, import_child_process.execSync)(`npm install ${toInstall.join(" ")} --save`, { stdio: "inherit", cwd });
+    (0, import_child_process.execSync)(`npm install ${toInstall.join(" ")} ${flag}`, { stdio: "inherit", cwd });
   } catch (err) {
     error(`Failed to install packages: ${toInstall.join(", ")}. ${err instanceof Error ? err.message : ""}`);
   }
 };
+var VITE_DEV_PACKAGES = ["tailwindcss", "@tailwindcss/vite", "@vitejs/plugin-react", "vite-plugin-babel", "babel-plugin-react-compiler", "@types/node"];
+var RUNTIME_PACKAGES = ["@base-ui/react", "tailwind-variants", "clsx", "tailwind-merge", "tailwindcss-animate"];
+var VITE_CONFIG_TEMPLATE = `import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import babel from 'vite-plugin-babel';
+import { reactCompilerPreset } from 'babel-plugin-react-compiler';
+import path from 'path';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    react(),
+    babel({ presets: [reactCompilerPreset()] }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@lib': path.resolve(__dirname, './src/lib'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@styles': path.resolve(__dirname, './src/styles'),
+    },
+  },
+});
+`;
+var TSCONFIG_PATHS = {
+  "@/*": ["./src/*"],
+  "@lib/*": ["./src/lib/*"],
+  "@components/*": ["./src/components/*"],
+  "@assets/*": ["./src/assets/*"],
+  "@pages/*": ["./src/pages/*"],
+  "@styles/*": ["./src/styles/*"]
+};
+var setupViteConfig = (cwd) => {
+  installNpmPackages(VITE_DEV_PACKAGES, cwd, true);
+  const configTs = import_path.default.join(cwd, "vite.config.ts");
+  const configJs = import_path.default.join(cwd, "vite.config.js");
+  if (!import_fs.default.existsSync(configTs) && !import_fs.default.existsSync(configJs)) {
+    import_fs.default.writeFileSync(configTs, VITE_CONFIG_TEMPLATE);
+    log("Created vite.config.ts with Tailwind + React Compiler setup.");
+    return;
+  }
+  const existingPath = import_fs.default.existsSync(configTs) ? configTs : configJs;
+  let content = import_fs.default.readFileSync(existingPath, "utf-8");
+  const missingImports = [];
+  if (!content.includes("@tailwindcss/vite")) missingImports.push("import tailwindcss from '@tailwindcss/vite';");
+  if (!content.includes("@vitejs/plugin-react")) missingImports.push("import react from '@vitejs/plugin-react';");
+  if (!content.includes("vite-plugin-babel")) missingImports.push("import babel from 'vite-plugin-babel';");
+  if (!content.includes("babel-plugin-react-compiler")) missingImports.push("import { reactCompilerPreset } from 'babel-plugin-react-compiler';");
+  if (!content.includes("from 'path'") && !content.includes('from "path"')) missingImports.push("import path from 'path';");
+  const missingPlugins = [];
+  if (!content.includes("tailwindcss()")) missingPlugins.push("tailwindcss()");
+  if (!content.includes("react()") && !content.includes("react({")) missingPlugins.push("react()");
+  if (!content.includes("reactCompilerPreset")) missingPlugins.push("babel({ presets: [reactCompilerPreset()] })");
+  const hasAlias = content.includes("alias:") || content.includes("alias(") || content.includes("'@'") || content.includes('"@"');
+  if (missingImports.length === 0 && missingPlugins.length === 0 && hasAlias) {
+    log("vite.config already configured \u2014 skipping.");
+    return;
+  }
+  if (missingImports.length > 0) {
+    const importBlock = missingImports.join("\n");
+    const allImports = [...content.matchAll(/^import\s.+$/gm)];
+    if (allImports.length > 0) {
+      const last = allImports[allImports.length - 1];
+      const pos = last.index + last[0].length;
+      content = content.slice(0, pos) + "\n" + importBlock + content.slice(pos);
+    } else {
+      content = importBlock + "\n" + content;
+    }
+  }
+  if (missingPlugins.length > 0) {
+    const match = content.match(/plugins:\s*\[/);
+    if (match && match.index !== void 0) {
+      const pos = match.index + match[0].length;
+      const after = content.slice(pos);
+      const pluginLines = missingPlugins.map((p) => `
+      ${p},`).join("");
+      const needsNewline = after.length > 0 && after[0] !== "\n" && after[0] !== "\r";
+      content = content.slice(0, pos) + pluginLines + (needsNewline ? "\n      " : "") + after;
+    }
+  }
+  if (!hasAlias) {
+    const aliasBlock = [
+      "  resolve: {",
+      "    alias: {",
+      "      '@': path.resolve(__dirname, './src'),",
+      "      '@lib': path.resolve(__dirname, './src/lib'),",
+      "      '@components': path.resolve(__dirname, './src/components'),",
+      "      '@assets': path.resolve(__dirname, './src/assets'),",
+      "      '@pages': path.resolve(__dirname, './src/pages'),",
+      "      '@styles': path.resolve(__dirname, './src/styles'),",
+      "    },",
+      "  },"
+    ].join("\n");
+    const pluginsStart = content.search(/plugins:\s*\[/);
+    if (pluginsStart !== -1) {
+      let depth = 0;
+      let foundStart = false;
+      for (let i = pluginsStart; i < content.length; i++) {
+        if (content[i] === "[") {
+          depth++;
+          foundStart = true;
+        }
+        if (content[i] === "]") depth--;
+        if (foundStart && depth === 0) {
+          let lineEnd = content.indexOf("\n", i);
+          if (lineEnd === -1) lineEnd = content.length;
+          content = content.slice(0, lineEnd + 1) + aliasBlock + "\n" + content.slice(lineEnd + 1);
+          break;
+        }
+      }
+    }
+  }
+  import_fs.default.writeFileSync(existingPath, content);
+  log(`Updated ${import_path.default.basename(existingPath)} with Tailwind + React Compiler + path aliases.`);
+};
+var ensureTailwindCss = (cwd) => {
+  const candidates = ["src/index.css", "src/App.css", "src/main.css"];
+  for (const cssFile of candidates) {
+    const cssPath = import_path.default.join(cwd, cssFile);
+    if (import_fs.default.existsSync(cssPath)) {
+      const content = import_fs.default.readFileSync(cssPath, "utf-8");
+      if (!content.includes('@import "tailwindcss"') && !content.includes("@import 'tailwindcss'")) {
+        import_fs.default.writeFileSync(cssPath, `@import "tailwindcss";
+
+${content}`);
+        log(`Added @import "tailwindcss" to ${cssFile}`);
+      } else {
+        log(`${cssFile} already imports Tailwind \u2014 skipping.`);
+      }
+      return;
+    }
+  }
+  const srcDir = import_path.default.join(cwd, "src");
+  if (!import_fs.default.existsSync(srcDir)) import_fs.default.mkdirSync(srcDir, { recursive: true });
+  import_fs.default.writeFileSync(import_path.default.join(srcDir, "index.css"), '@import "tailwindcss";\n');
+  log('Created src/index.css with @import "tailwindcss"');
+};
+var setupTsConfig = (cwd) => {
+  const candidates = ["tsconfig.app.json", "tsconfig.json"];
+  for (const candidate of candidates) {
+    const configPath = import_path.default.join(cwd, candidate);
+    if (!import_fs.default.existsSync(configPath)) continue;
+    const raw = import_fs.default.readFileSync(configPath, "utf-8");
+    if (raw.includes('"@/*"') || raw.includes("'@/*'")) {
+      log(`${candidate} already has path aliases \u2014 skipping.`);
+      return;
+    }
+    try {
+      const stripped = raw.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[\s,{[\]])\/\/[^\n]*/g, "$1");
+      const parsed = JSON.parse(stripped);
+      if (!parsed.compilerOptions) parsed.compilerOptions = {};
+      parsed.compilerOptions.baseUrl = ".";
+      parsed.compilerOptions.paths = TSCONFIG_PATHS;
+      import_fs.default.writeFileSync(configPath, JSON.stringify(parsed, null, 2));
+      log(`Added path aliases to ${candidate}.`);
+    } catch (err) {
+      warn(`Could not auto-patch ${candidate}: ${err instanceof Error ? err.message : err}`);
+      warn("Add these to compilerOptions manually:");
+      console.log('\n  "baseUrl": ".",');
+      console.log('  "paths": {');
+      for (const [alias, targets] of Object.entries(TSCONFIG_PATHS)) {
+        console.log(`    "${alias}": ["${targets[0]}"],`);
+      }
+      console.log("  }");
+      console.log("");
+    }
+    return;
+  }
+  const newConfig = { compilerOptions: { baseUrl: ".", paths: TSCONFIG_PATHS } };
+  import_fs.default.writeFileSync(import_path.default.join(cwd, "tsconfig.json"), JSON.stringify(newConfig, null, 2));
+  log("Created tsconfig.json with path aliases.");
+};
 var ensureCore = (registry, cwd) => {
   const core = registry.core;
   if (!core) return;
@@ -174,6 +351,14 @@ var main = async () => {
         error("Usage: npx cus-base-ui add <component-name> [--force]");
         return;
       }
+      const cnPath = import_path.default.join(cwd, "src/lib/utils/cn.ts");
+      if (!import_fs.default.existsSync(cnPath)) {
+        log("Project not initialized \u2014 running init first...");
+        setupViteConfig(cwd);
+        setupTsConfig(cwd);
+        ensureTailwindCss(cwd);
+        installNpmPackages(RUNTIME_PACKAGES, cwd);
+      }
       for (const name of componentNames) {
         addComponent(name, registry, cwd, { force: isForce });
       }
@@ -202,6 +387,10 @@ var main = async () => {
       break;
     }
     case "init": {
+      setupViteConfig(cwd);
+      setupTsConfig(cwd);
+      ensureTailwindCss(cwd);
+      installNpmPackages(RUNTIME_PACKAGES, cwd);
       ensureCore(registry, cwd);
       log("Initialization complete.");
       break;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cus-base-ui",
   "private": false,
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "bin": {
     "cus-base-ui": "./dist/ui-cli.cjs"

package/scripts/ui-cli.ts

@@ -126,6 +126,7 @@ const setupViteConfig = (cwd: string) => {
     const configTs = path.join(cwd, 'vite.config.ts');
     const configJs = path.join(cwd, 'vite.config.js');
 
+    // No config exists — create from template
     if (!fs.existsSync(configTs) && !fs.existsSync(configJs)) {
         fs.writeFileSync(configTs, VITE_CONFIG_TEMPLATE);
         log('Created vite.config.ts with Tailwind + React Compiler setup.');
@@ -133,49 +134,91 @@ const setupViteConfig = (cwd: string) => {
     }
 
     const existingPath = fs.existsSync(configTs) ? configTs : configJs;
-    const content = fs.readFileSync(existingPath, 'utf-8');
+    let content = fs.readFileSync(existingPath, 'utf-8');
 
     const missingImports: string[] = [];
     if (!content.includes('@tailwindcss/vite')) missingImports.push("import tailwindcss from '@tailwindcss/vite';");
     if (!content.includes('@vitejs/plugin-react')) missingImports.push("import react from '@vitejs/plugin-react';");
     if (!content.includes('vite-plugin-babel')) missingImports.push("import babel from 'vite-plugin-babel';");
     if (!content.includes('babel-plugin-react-compiler')) missingImports.push("import { reactCompilerPreset } from 'babel-plugin-react-compiler';");
+    if (!content.includes("from 'path'") && !content.includes('from "path"')) missingImports.push("import path from 'path';");
 
     const missingPlugins: string[] = [];
     if (!content.includes('tailwindcss()')) missingPlugins.push('tailwindcss()');
     if (!content.includes('react()') && !content.includes('react({')) missingPlugins.push('react()');
-    if (!content.includes('reactCompilerPreset')) missingPlugins.push('babel({ presets: [reactCompilerPreset()] })');
+    if (!content.includes('reactCompilerPreset')) missingPlugins.push("babel({ presets: [reactCompilerPreset()] })");
 
-    const hasAlias = content.includes('alias:') || content.includes("'@'") || content.includes('"@"');
+    const hasAlias = content.includes('alias:') || content.includes('alias(') || content.includes("'@'") || content.includes('"@"');
 
     if (missingImports.length === 0 && missingPlugins.length === 0 && hasAlias) {
         log('vite.config already configured — skipping.');
         return;
     }
 
-    warn(`${path.basename(existingPath)} exists but is missing required setup. Add the following manually:`);
+    // --- Auto-patch the file ---
+
+    // 1. Insert missing imports after the last import statement
     if (missingImports.length > 0) {
-        console.log('\n  // Imports to add:');
-        for (const imp of missingImports) console.log(`  ${imp}`);
+        const importBlock = missingImports.join('\n');
+        const allImports = [...content.matchAll(/^import\s.+$/gm)];
+        if (allImports.length > 0) {
+            const last = allImports[allImports.length - 1];
+            const pos = last.index! + last[0].length;
+            content = content.slice(0, pos) + '\n' + importBlock + content.slice(pos);
+        } else {
+            content = importBlock + '\n' + content;
+        }
     }
+
+    // 2. Insert missing plugins into plugins: [...]
     if (missingPlugins.length > 0) {
-        console.log('\n  // Plugins to add inside defineConfig({ plugins: [...] }):');
-        for (const plugin of missingPlugins) console.log(`    ${plugin},`);
+        const match = content.match(/plugins:\s*\[/);
+        if (match && match.index !== undefined) {
+            const pos = match.index + match[0].length;
+            const after = content.slice(pos);
+            const pluginLines = missingPlugins.map((p) => `\n      ${p},`).join('');
+            // If existing content continues on the same line (e.g. `plugins: [react()],`),
+            // push it to a new line so formatting stays clean
+            const needsNewline = after.length > 0 && after[0] !== '\n' && after[0] !== '\r';
+            content = content.slice(0, pos) + pluginLines + (needsNewline ? '\n      ' : '') + after;
+        }
     }
+
+    // 3. Insert resolve.alias block if missing
     if (!hasAlias) {
-        console.log('\n  // resolve.alias to add inside defineConfig({}):');
-        console.log("  resolve: {");
-        console.log("    alias: {");
-        console.log("      '@': path.resolve(__dirname, './src'),");
-        console.log("      '@lib': path.resolve(__dirname, './src/lib'),");
-        console.log("      '@components': path.resolve(__dirname, './src/components'),");
-        console.log("      '@assets': path.resolve(__dirname, './src/assets'),");
-        console.log("      '@pages': path.resolve(__dirname, './src/pages'),");
-        console.log("      '@styles': path.resolve(__dirname, './src/styles'),");
-        console.log("    },");
-        console.log("  },");
+        const aliasBlock = [
+            '  resolve: {',
+            '    alias: {',
+            "      '@': path.resolve(__dirname, './src'),",
+            "      '@lib': path.resolve(__dirname, './src/lib'),",
+            "      '@components': path.resolve(__dirname, './src/components'),",
+            "      '@assets': path.resolve(__dirname, './src/assets'),",
+            "      '@pages': path.resolve(__dirname, './src/pages'),",
+            "      '@styles': path.resolve(__dirname, './src/styles'),",
+            '    },',
+            '  },',
+        ].join('\n');
+
+        // Find end of plugins array, then insert after that line
+        const pluginsStart = content.search(/plugins:\s*\[/);
+        if (pluginsStart !== -1) {
+            let depth = 0;
+            let foundStart = false;
+            for (let i = pluginsStart; i < content.length; i++) {
+                if (content[i] === '[') { depth++; foundStart = true; }
+                if (content[i] === ']') depth--;
+                if (foundStart && depth === 0) {
+                    let lineEnd = content.indexOf('\n', i);
+                    if (lineEnd === -1) lineEnd = content.length;
+                    content = content.slice(0, lineEnd + 1) + aliasBlock + '\n' + content.slice(lineEnd + 1);
+                    break;
+                }
+            }
+        }
     }
-    console.log('');
+
+    fs.writeFileSync(existingPath, content);
+    log(`Updated ${path.basename(existingPath)} with Tailwind + React Compiler + path aliases.`);
 };
 
 const ensureTailwindCss = (cwd: string) => {
@@ -215,16 +258,20 @@ const setupTsConfig = (cwd: string) => {
         }
 
         try {
-            // Strip single-line and block comments before parsing
-            const stripped = raw.replace(/\/\/[^\n]*/g, '').replace(/\/\*[\s\S]*?\*\//g, '');
+            // Strip comments safely: block comments first, then single-line comments
+            // only when they appear outside of string values (preceded by whitespace or line start)
+            const stripped = raw
+                .replace(/\/\*[\s\S]*?\*\//g, '')
+                .replace(/(^|[\s,{[\]])\/\/[^\n]*/g, '$1');
             const parsed = JSON.parse(stripped) as { compilerOptions?: Record<string, unknown> };
             if (!parsed.compilerOptions) parsed.compilerOptions = {};
             parsed.compilerOptions.baseUrl = '.';
             parsed.compilerOptions.paths = TSCONFIG_PATHS;
             fs.writeFileSync(configPath, JSON.stringify(parsed, null, 2));
             log(`Added path aliases to ${candidate}.`);
-        } catch {
-            warn(`Could not auto-patch ${candidate}. Add these to compilerOptions manually:`);
+        } catch (err) {
+            warn(`Could not auto-patch ${candidate}: ${err instanceof Error ? err.message : err}`);
+            warn('Add these to compilerOptions manually:');
             console.log('\n  "baseUrl": ".",');
             console.log('  "paths": {');
             for (const [alias, targets] of Object.entries(TSCONFIG_PATHS)) {