shadcn-ui-react 0.5.3 → 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
@@ -361,65 +371,113 @@ export default function UserAuthForm() {
 ### 📊 DataTable
 
 ```tsx
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import type { ColumnDef } from "@tanstack/react-table";
 import { DataTable } from "shadcn-ui-react";
-import { ColumnDef } from "@tanstack/react-table";
 
 type User = {
   id: number;
   name: string;
   email: string;
+  role: "Admin" | "Editor" | "Viewer";
 };
 
 const columns: ColumnDef<User, any>[] = [
   { accessorKey: "id", header: "ID" },
-  { accessorKey: "name", header: "Name" },
+  {
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ row }) => (
+      <div className="flex items-center gap-2">
+        <div className="h-2 w-2 rounded-full bg-primary" />
+        <span className="font-medium">{row.original.name}</span>
+      </div>
+    ),
+  },
   { accessorKey: "email", header: "Email" },
+  {
+    accessorKey: "role",
+    header: "Role",
+    cell: ({ row }) => (
+      <span className="inline-flex items-center rounded-full border px-2 py-0.5 text-xs">
+        {row.original.role}
+      </span>
+    ),
+  },
 ];
 
 const data: User[] = [
-  { id: 1, name: "John Doe", email: "john@example.com" },
-  { id: 2, name: "Jane Smith", email: "jane@example.com" },
-  { id: 3, name: "Sam Johnson", email: "sam@example.com" },
-  { id: 4, name: "Alice Brown", email: "alice@example.com" },
-  { id: 5, name: "Bob White", email: "bob@example.com" },
-  { id: 6, name: "Charlie Black", email: "charlie@example.com" },
-  { id: 7, name: "Diana Green", email: "diana@example.com" },
-  { id: 8, name: "Eve Blue", email: "eve@example.com" },
-  { id: 9, name: "Frank Yellow", email: "frank@example.com" },
-  { id: 10, name: "Grace Red", email: "grace@example.com" },
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Editor" },
+  { id: 3, name: "Sam Johnson", email: "sam@example.com", role: "Viewer" },
+  { id: 4, name: "Alice Brown", email: "alice@example.com", role: "Editor" },
+  { id: 5, name: "Bob White", email: "bob@example.com", role: "Viewer" },
+  { id: 6, name: "Charlie Black", email: "charlie@example.com", role: "Admin" },
+  { id: 7, name: "Diana Green", email: "diana@example.com", role: "Viewer" },
+  { id: 8, name: "Eve Blue", email: "eve@example.com", role: "Editor" },
+  { id: 9, name: "Frank Yellow", email: "frank@example.com", role: "Viewer" },
+  { id: 10, name: "Grace Red", email: "grace@example.com", role: "Admin" },
 ];
 
 const Example = () => {
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(5);
 
-  const paginatedData = data.slice((page - 1) * perPage, page * perPage);
+  const pageCount = useMemo(() => Math.ceil(data.length / perPage), [perPage]);
 
-  const handlePageChange = (newPage: number) => setPage(newPage);
-
-  const handlePageSizeChange = (newPageSize: number) => {
-    setPerPage(newPageSize);
-    setPage(1);
-  };
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * perPage;
+    const end = page * perPage;
+    return data.slice(start, end);
+  }, [page, perPage]);
 
   return (
-    <div>
-      <h1 className="text-xl font-bold mb-4">Data Table with Pagination</h1>
+    <div className="space-y-4">
+      <div className="space-y-1">
+        <h1 className="text-xl font-bold">DataTable v2</h1>
+        <p className="text-sm text-muted-foreground">
+          Manual pagination + templates + sticky header + accent
+        </p>
+      </div>
 
       <DataTable
         columns={columns}
         data={paginatedData}
-        pageCount={Math.ceil(data.length / perPage)}
+        pageCount={pageCount}
         page={page}
         perPage={perPage}
-        onPageChange={handlePageChange}
-        onPageSizeChange={handlePageSizeChange}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPerPage(size);
+          setPage(1);
+        }}
+        totalRows={data.length}
+        isRowsSelected={false}
         rowPerPageLabel="Rows per page"
         pageLabel="Page"
         ofLabel="of"
         rowsSelectedLabel="rows selected"
-        emptyData={<div>No data available</div>}
+        emptyData={<div className="py-10 text-center">No data available</div>}
+
+        // ✨ NEW (v0.6.6)
+        template="neo"          // neo | glass | compact | minimal | clean | elevated | grid | cards
+        accent="primary"        // primary | emerald | indigo | rose | amber | zinc
+        stickyHeader={true}
+        headerScroll={false}
+        animate={true}
+        heightClassName="h-[420px]" // Important: Define the height for the ScrollArea to work.
+
+        onClick={(row) => {
+          // demo: click in row
+          console.log("Row clicked:", row);
+        }}
+
+        // optional
+        classNames={{
+          // root: "border-primary/20",
+          // th: "text-[10px]",
+          // td: "py-2",
+        }}
       />
     </div>
   );

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);
+}