shadcn-ui-react 0.6.0 → 0.6.1

package/README.md

@@ -18,6 +18,16 @@ pnpm add shadcn-ui-react
 
 ---
 
+### Tailwind IntelliSense (VS Code)
+
+To enable Tailwind CSS IntelliSense to detect classes within `cn(...)` and other utilities:
+
+```bash
+npx shadcn-ui-react init-vscode
+```
+
+---
+
 ## 🚀 Getting Started
 
 ### 1. Import Global Styles

package/bin/shadcn-ui-react.mjs

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const cmd = process.argv[2];
+
+const uniq = (arr) => {
+  const seen = new Set();
+  const out = [];
+  for (const item of arr) {
+    const key = JSON.stringify(item);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(item);
+  }
+  return out;
+};
+
+function ensureDir(dir) {
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+}
+
+function readJson(p) {
+  if (!fs.existsSync(p)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(p, "utf8"));
+  } catch (e) {
+    console.error(`❌ No pude leer JSON: ${p}`);
+    console.error(e?.message ?? e);
+    process.exit(1);
+  }
+}
+
+function writeJson(p, obj) {
+  fs.writeFileSync(p, JSON.stringify(obj, null, 2) + "\n", "utf8");
+}
+
+function initVscode() {
+  const tplPath = path.join(__dirname, "..", "templates", "vscode-settings.json");
+  const tpl = readJson(tplPath) ?? {};
+
+  const vscodeDir = path.join(process.cwd(), ".vscode");
+  const settingsPath = path.join(vscodeDir, "settings.json");
+
+  ensureDir(vscodeDir);
+
+  const current = readJson(settingsPath) ?? {};
+  const next = { ...current };
+
+  // classRegex (merge + dedupe)
+  const curRegex = current["tailwindCSS.experimental.classRegex"] ?? [];
+  const tplRegex = tpl["tailwindCSS.experimental.classRegex"] ?? [];
+  next["tailwindCSS.experimental.classRegex"] = uniq([
+    ...(Array.isArray(curRegex) ? curRegex : []),
+    ...(Array.isArray(tplRegex) ? tplRegex : [])
+  ]);
+
+  // includeLanguages (merge)
+  const curLang = current["tailwindCSS.includeLanguages"] ?? {};
+  const tplLang = tpl["tailwindCSS.includeLanguages"] ?? {};
+  next["tailwindCSS.includeLanguages"] = { ...(curLang || {}), ...(tplLang || {}) };
+
+  writeJson(settingsPath, next);
+  console.log("✅ Listo: actualizado .vscode/settings.json (Tailwind IntelliSense).");
+}
+
+function initExtensions() {
+  const vscodeDir = path.join(process.cwd(), ".vscode");
+  const extPath = path.join(vscodeDir, "extensions.json");
+  ensureDir(vscodeDir);
+
+  const current = readJson(extPath) ?? {};
+  const recs = Array.isArray(current.recommendations) ? current.recommendations : [];
+  const add = "bradlc.vscode-tailwindcss";
+
+  const next = {
+    ...current,
+    recommendations: Array.from(new Set([...recs, add]))
+  };
+
+  writeJson(extPath, next);
+  console.log("✅ Listo: actualizado .vscode/extensions.json (recomendación Tailwind CSS).");
+}
+
+switch (cmd) {
+  case "init-vscode":
+    initVscode();
+    initExtensions();
+    break;
+  default:
+    console.log(`Uso:
+  npx shadcn-ui-react init-vscode
+`);
+    process.exit(cmd ? 1 : 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -14,8 +14,13 @@
   "style": "dist/style.css",
   "files": [
     "dist",
-    "dist/style.css"
+    "dist/style.css",
+    "bin",
+    "templates"
   ],
+  "bin": {
+    "shadcn-ui-react": "./bin/shadcn-ui-react.mjs"
+  },
   "sideEffects": [
     "dist/*.css"
   ],

package/templates/vscode-settings.json

@@ -0,0 +1,11 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*?)[\"'`]"],
+    ["classNames\\s*=\\s*\\{\\{([\\s\\S]*?)\\}\\}", "[\"'`]([^\"'`]*?)[\"'`]"]
+  ],
+  "tailwindCSS.includeLanguages": {
+    "typescript": "javascript",
+    "typescriptreact": "javascript",
+    "javascriptreact": "javascript"
+  }
+}