@nccirtu/tablefy 0.2.0 → 0.5.0

package/cli/templates/tablefy/data-table.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useState } from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+// shadcn components - installed by user via `npx shadcn add table`
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { DataTableConfig } from "@/lib/types";
+import { DataTableHeader } from "./data-table-header";
+import { DataTableEmpty } from "./data-table-empty";
+import { DataTablePagination } from "./data-table-pagination";
+import { EmptyStateBuilder } from "@/lib/builders";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  config?: DataTableConfig<TData>;
+  className?: string;
+  isLoading?: boolean;
+  isError?: boolean;
+  onRetry?: () => void;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  config = {},
+  className,
+  isLoading = false,
+  isError = false,
+  onRetry,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = useState<SortingState>(
+    config.defaultSort ? [config.defaultSort] : [],
+  );
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+  const [globalFilter, setGlobalFilter] = useState("");
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter,
+    },
+    enableRowSelection: config.enableRowSelection ?? false,
+    enableMultiRowSelection: config.enableMultiRowSelection ?? true,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: config.enableSorting ? getSortedRowModel() : undefined,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: config.pagination?.enabled
+      ? getPaginationRowModel()
+      : undefined,
+  });
+
+  const getEmptyState = () => {
+    if (isError) {
+      return (
+        config.emptyState || EmptyStateBuilder.make().error({ onRetry }).build()
+      );
+    }
+
+    if (globalFilter && data.length > 0) {
+      return (
+        config.searchEmptyState ||
+        EmptyStateBuilder.make().noSearchResults({}).build()
+      );
+    }
+
+    if (columnFilters.length > 0 && data.length > 0) {
+      return (
+        config.filterEmptyState ||
+        EmptyStateBuilder.make().noFilterResults({}).build()
+      );
+    }
+
+    return config.emptyState || EmptyStateBuilder.make().noData().build();
+  };
+
+  const densityClasses = {
+    compact: "[&_td]:py-1 [&_th]:py-1",
+    default: "[&_td]:py-3 [&_th]:py-3",
+    comfortable: "[&_td]:py-4 [&_th]:py-4",
+  };
+
+  const selectedCount = table.getFilteredSelectedRowModel().rows.length;
+  const hasRows = table.getRowModel().rows?.length > 0;
+
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <DataTableHeader
+        title={config.title}
+        description={config.description}
+        actions={config.headerActions}
+        search={config.search}
+        searchValue={globalFilter}
+        onSearchChange={setGlobalFilter}
+        table={table}
+        selectedCount={selectedCount}
+      />
+
+      <div
+        className={cn(
+          "overflow-hidden",
+          config.bordered !== false && "rounded-md border",
+        )}
+      >
+        <Table
+          className={cn(
+            densityClasses[config.density || "default"],
+            config.striped ? "[&_tr:nth-child(even)]:bg-muted/50" : "",
+            config.hoverable !== false && "[&_tr:hover]:bg-muted/50",
+          )}
+        >
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <tr>
+                <td colSpan={columns.length} className="h-[400px]">
+                  <div className="flex h-full items-center justify-center">
+                    <div className="flex flex-col items-center gap-4">
+                      <svg
+                        className="animate-spin h-8 w-8 text-muted-foreground"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          className="opacity-25"
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke="currentColor"
+                          strokeWidth="4"
+                          fill="none"
+                        />
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                        />
+                      </svg>
+                      <span className="text-sm text-muted-foreground">
+                        Laden...
+                      </span>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            ) : hasRows ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <DataTableEmpty
+                config={getEmptyState()}
+                colSpan={columns.length}
+              />
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {config.pagination?.enabled && hasRows && (
+        <DataTablePagination table={table} config={config.pagination} />
+      )}
+    </div>
+  );
+}

package/dist/cli/index.js

@@ -0,0 +1,475 @@
+#!/usr/bin/env node
+
+// cli/index.ts
+import { Command } from "commander";
+
+// cli/commands/init.ts
+import chalk2 from "chalk";
+import prompts from "prompts";
+
+// cli/utils/helpers.ts
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+var SHADCN_COMPONENTS = [
+  "button",
+  "table",
+  "checkbox",
+  "dropdown-menu",
+  "input",
+  "select",
+  "badge",
+  "progress",
+  "tooltip"
+];
+var TABLEFY_COMPONENTS = {
+  "data-table": {
+    files: [
+      "tablefy/data-table.tsx",
+      "tablefy/data-table-empty.tsx",
+      "tablefy/data-table-header.tsx",
+      "tablefy/data-table-pagination.tsx",
+      "tablefy/data-table-schema.tsx"
+    ],
+    description: "Main DataTable component with pagination, search, and more"
+  },
+  "avatar-list": {
+    files: ["tablefy/avatar-list.tsx"],
+    description: "Avatar list component for displaying user groups"
+  }
+};
+function pathExists(filePath) {
+  return fs.existsSync(filePath);
+}
+function getProjectRoot() {
+  return process.cwd();
+}
+function isShadcnInitialized() {
+  const root = getProjectRoot();
+  if (pathExists(path.join(root, "components.json"))) {
+    return true;
+  }
+  const possiblePaths = [
+    path.join(root, "components", "ui"),
+    path.join(root, "src", "components", "ui"),
+    path.join(root, "app", "components", "ui"),
+    path.join(root, "resources", "js", "components", "ui")
+  ];
+  return possiblePaths.some((p) => pathExists(p));
+}
+function getComponentsDir(customPath) {
+  const root = getProjectRoot();
+  if (customPath) {
+    return path.join(root, customPath);
+  }
+  const configPath = path.join(root, "components.json");
+  if (pathExists(configPath)) {
+    try {
+      const config = fs.readJsonSync(configPath);
+      if (config.aliases?.components) {
+        const alias = config.aliases.components;
+        if (alias.startsWith("@/")) {
+          return path.join(root, "src", alias.slice(2));
+        }
+        return path.join(root, alias);
+      }
+    } catch {
+    }
+  }
+  const possiblePaths = [
+    path.join(root, "src", "components"),
+    path.join(root, "components"),
+    path.join(root, "app", "components"),
+    path.join(root, "resources", "js", "components")
+  ];
+  for (const p of possiblePaths) {
+    if (pathExists(p)) {
+      return p;
+    }
+  }
+  return path.join(root, "src", "components");
+}
+function getInstalledShadcnComponents(componentsDir) {
+  const uiDir = path.join(componentsDir, "ui");
+  if (!pathExists(uiDir)) {
+    return [];
+  }
+  const installed = [];
+  for (const component of SHADCN_COMPONENTS) {
+    const componentPath = path.join(uiDir, `${component}.tsx`);
+    if (pathExists(componentPath)) {
+      installed.push(component);
+    }
+  }
+  return installed;
+}
+function getMissingShadcnComponents(componentsDir) {
+  const installed = getInstalledShadcnComponents(componentsDir);
+  return SHADCN_COMPONENTS.filter((c) => !installed.includes(c));
+}
+function installShadcnComponents(components) {
+  if (components.length === 0) {
+    return true;
+  }
+  console.log(chalk.blue("\n\u{1F4E6} Installing shadcn/ui components...\n"));
+  try {
+    const componentList = components.join(" ");
+    execSync(`npx shadcn@latest add ${componentList} -y`, {
+      stdio: "inherit",
+      cwd: getProjectRoot()
+    });
+    return true;
+  } catch (error) {
+    console.error(chalk.red("\n\u274C Failed to install shadcn components"));
+    console.error(chalk.yellow("Please install them manually:"));
+    console.error(chalk.cyan(`  npx shadcn@latest add ${components.join(" ")}`));
+    return false;
+  }
+}
+function getTemplatesDir() {
+  const npmPath = path.join(__dirname, "..", "templates");
+  if (pathExists(npmPath)) {
+    return npmPath;
+  }
+  const devPath = path.join(__dirname, "..", "..", "cli", "templates");
+  if (pathExists(devPath)) {
+    return devPath;
+  }
+  throw new Error("Could not find Tablefy templates directory");
+}
+async function copyTablefyComponents(componentsDir, components = Object.keys(TABLEFY_COMPONENTS)) {
+  const templatesDir = getTemplatesDir();
+  console.log(chalk.blue("\n\u{1F4E6} Installing Tablefy components...\n"));
+  try {
+    for (const component of components) {
+      const componentConfig = TABLEFY_COMPONENTS[component];
+      for (const file of componentConfig.files) {
+        const sourcePath = path.join(templatesDir, file);
+        const destPath = path.join(componentsDir, file);
+        await fs.ensureDir(path.dirname(destPath));
+        await fs.copy(sourcePath, destPath, { overwrite: true });
+        console.log(chalk.green(`  \u2713 ${file}`));
+      }
+    }
+    return true;
+  } catch (error) {
+    console.error(chalk.red("\n\u274C Failed to copy Tablefy components"));
+    console.error(error);
+    return false;
+  }
+}
+function checkPeerDependencies() {
+  const root = getProjectRoot();
+  const packageJsonPath = path.join(root, "package.json");
+  const required = [
+    "@tanstack/react-table",
+    "lucide-react",
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ];
+  const missing = [];
+  const installed = [];
+  if (!pathExists(packageJsonPath)) {
+    return { missing: required, installed: [] };
+  }
+  try {
+    const packageJson = fs.readJsonSync(packageJsonPath);
+    const deps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    for (const dep of required) {
+      if (deps[dep]) {
+        installed.push(dep);
+      } else {
+        missing.push(dep);
+      }
+    }
+  } catch {
+    return { missing: required, installed: [] };
+  }
+  return { missing, installed };
+}
+function installPeerDependencies(dependencies) {
+  if (dependencies.length === 0) {
+    return true;
+  }
+  console.log(chalk.blue("\n\u{1F4E6} Installing peer dependencies...\n"));
+  try {
+    const depList = dependencies.join(" ");
+    const root = getProjectRoot();
+    let cmd = "npm install";
+    if (pathExists(path.join(root, "pnpm-lock.yaml"))) {
+      cmd = "pnpm add";
+    } else if (pathExists(path.join(root, "yarn.lock"))) {
+      cmd = "yarn add";
+    } else if (pathExists(path.join(root, "bun.lockb"))) {
+      cmd = "bun add";
+    }
+    execSync(`${cmd} ${depList}`, {
+      stdio: "inherit",
+      cwd: root
+    });
+    return true;
+  } catch (error) {
+    console.error(chalk.red("\n\u274C Failed to install dependencies"));
+    console.error(chalk.yellow("Please install them manually:"));
+    console.error(chalk.cyan(`  npm install ${dependencies.join(" ")}`));
+    return false;
+  }
+}
+function showSuccess(message) {
+  console.log(chalk.green(`
+\u2705 ${message}
+`));
+}
+function showError(message) {
+  console.log(chalk.red(`
+\u274C ${message}
+`));
+}
+function showInfo(message) {
+  console.log(chalk.blue(`
+\u2139\uFE0F  ${message}
+`));
+}
+function showWarning(message) {
+  console.log(chalk.yellow(`
+\u26A0\uFE0F  ${message}
+`));
+}
+
+// cli/commands/init.ts
+async function initCommand(options) {
+  console.log(chalk2.bold.blue("\n\u{1F680} Tablefy Setup\n"));
+  console.log(chalk2.gray("Setting up Tablefy in your project...\n"));
+  console.log(chalk2.bold("Step 1: Checking shadcn/ui setup..."));
+  if (!isShadcnInitialized()) {
+    showWarning("shadcn/ui is not initialized in this project.");
+    console.log(chalk2.yellow("Please run the following command first:"));
+    console.log(chalk2.cyan("\n  npx shadcn@latest init\n"));
+    if (!options.yes) {
+      const response = await prompts({
+        type: "confirm",
+        name: "continue",
+        message: "Do you want to continue anyway?",
+        initial: false
+      });
+      if (!response.continue) {
+        showInfo("Setup cancelled. Please initialize shadcn/ui first.");
+        process.exit(0);
+      }
+    }
+  } else {
+    console.log(chalk2.green("  \u2713 shadcn/ui is initialized"));
+  }
+  const componentsDir = getComponentsDir(options.components);
+  console.log(chalk2.gray(`  Using components directory: ${componentsDir}
+`));
+  console.log(chalk2.bold("Step 2: Checking peer dependencies..."));
+  const { missing: missingDeps, installed: installedDeps } = checkPeerDependencies();
+  if (installedDeps.length > 0) {
+    console.log(chalk2.green(`  \u2713 ${installedDeps.length} dependencies already installed`));
+  }
+  if (missingDeps.length > 0) {
+    console.log(chalk2.yellow(`  \u26A0 ${missingDeps.length} missing dependencies:`));
+    missingDeps.forEach((dep) => console.log(chalk2.gray(`    - ${dep}`)));
+    let shouldInstall = options.yes;
+    if (!shouldInstall) {
+      const response = await prompts({
+        type: "confirm",
+        name: "install",
+        message: "Install missing peer dependencies?",
+        initial: true
+      });
+      shouldInstall = response.install;
+    }
+    if (shouldInstall) {
+      const success = installPeerDependencies(missingDeps);
+      if (!success) {
+        showError("Failed to install peer dependencies.");
+        process.exit(1);
+      }
+    } else {
+      showWarning("Skipping peer dependency installation.");
+      console.log(chalk2.yellow("Install them manually with:"));
+      console.log(chalk2.cyan(`  npm install ${missingDeps.join(" ")}
+`));
+    }
+  }
+  if (!options.skipShadcn) {
+    console.log(chalk2.bold("\nStep 3: Checking shadcn/ui components..."));
+    const missingShadcn = getMissingShadcnComponents(componentsDir);
+    if (missingShadcn.length === 0) {
+      console.log(chalk2.green("  \u2713 All required shadcn/ui components are installed"));
+    } else {
+      console.log(chalk2.yellow(`  \u26A0 ${missingShadcn.length} missing shadcn/ui components:`));
+      missingShadcn.forEach((comp) => console.log(chalk2.gray(`    - ${comp}`)));
+      let shouldInstall = options.yes;
+      if (!shouldInstall) {
+        const response = await prompts({
+          type: "confirm",
+          name: "install",
+          message: "Install missing shadcn/ui components?",
+          initial: true
+        });
+        shouldInstall = response.install;
+      }
+      if (shouldInstall) {
+        const success = installShadcnComponents(missingShadcn);
+        if (!success) {
+          showWarning("Some shadcn components may not have been installed.");
+        }
+      } else {
+        showWarning("Skipping shadcn component installation.");
+        console.log(chalk2.yellow("Install them manually with:"));
+        console.log(chalk2.cyan(`  npx shadcn@latest add ${missingShadcn.join(" ")}
+`));
+      }
+    }
+  }
+  console.log(chalk2.bold("\nStep 4: Installing Tablefy components..."));
+  const allComponents = Object.keys(TABLEFY_COMPONENTS);
+  console.log(chalk2.gray("  Components to install:"));
+  allComponents.forEach((comp) => {
+    console.log(chalk2.gray(`    - ${comp}: ${TABLEFY_COMPONENTS[comp].description}`));
+  });
+  let shouldInstallTablefy = options.yes;
+  if (!shouldInstallTablefy) {
+    const response = await prompts({
+      type: "confirm",
+      name: "install",
+      message: "Install Tablefy components?",
+      initial: true
+    });
+    shouldInstallTablefy = response.install;
+  }
+  if (shouldInstallTablefy) {
+    const success = await copyTablefyComponents(componentsDir, allComponents);
+    if (!success) {
+      showError("Failed to install Tablefy components.");
+      process.exit(1);
+    }
+  } else {
+    showInfo("Tablefy component installation skipped.");
+    process.exit(0);
+  }
+  showSuccess("Tablefy has been successfully installed!");
+  console.log(chalk2.bold("Next steps:\n"));
+  console.log(chalk2.gray("1. Import and use Tablefy in your project:"));
+  console.log(chalk2.cyan(`
+   import { DataTable, TableSchema } from "@nccirtu/tablefy";
+   import { TextColumn, BadgeColumn } from "@nccirtu/tablefy/columns";
+`));
+  console.log(chalk2.gray("2. Create your first table:"));
+  console.log(chalk2.cyan(`
+   const { columns, config } = TableSchema.make<User>()
+     .searchable()
+     .paginated()
+     .columns(
+       TextColumn.make("name").label("Name").sortable(),
+       BadgeColumn.make("status").label("Status")
+     )
+     .build();
+
+   <DataTable data={users} columns={columns} config={config} />
+`));
+  console.log(chalk2.gray("\u{1F4DA} Full documentation: https://github.com/nccirtu/Tablefy\n"));
+}
+
+// cli/commands/add.ts
+import chalk3 from "chalk";
+import prompts2 from "prompts";
+async function addCommand(componentNames, options) {
+  const availableComponents = Object.keys(TABLEFY_COMPONENTS);
+  if (componentNames.length === 0) {
+    const response = await prompts2({
+      type: "multiselect",
+      name: "components",
+      message: "Select components to add:",
+      choices: availableComponents.map((name) => ({
+        title: name,
+        description: TABLEFY_COMPONENTS[name].description,
+        value: name
+      })),
+      min: 1
+    });
+    if (!response.components || response.components.length === 0) {
+      showInfo("No components selected.");
+      process.exit(0);
+    }
+    componentNames = response.components;
+  }
+  const validComponents = [];
+  const invalidComponents = [];
+  for (const name of componentNames) {
+    if (availableComponents.includes(name)) {
+      validComponents.push(name);
+    } else {
+      invalidComponents.push(name);
+    }
+  }
+  if (invalidComponents.length > 0) {
+    console.log(chalk3.yellow(`
+\u26A0\uFE0F  Unknown components: ${invalidComponents.join(", ")}`));
+    console.log(chalk3.gray("Available components:"));
+    availableComponents.forEach((comp) => {
+      console.log(chalk3.gray(`  - ${comp}: ${TABLEFY_COMPONENTS[comp].description}`));
+    });
+  }
+  if (validComponents.length === 0) {
+    showError("No valid components to install.");
+    process.exit(1);
+  }
+  const componentsDir = getComponentsDir(options.components);
+  console.log(chalk3.gray(`
+Using components directory: ${componentsDir}
+`));
+  if (!options.yes) {
+    console.log(chalk3.bold("Components to install:"));
+    validComponents.forEach((comp) => {
+      console.log(chalk3.gray(`  - ${comp}`));
+      TABLEFY_COMPONENTS[comp].files.forEach((file) => {
+        console.log(chalk3.gray(`      \u2514\u2500 ${file}`));
+      });
+    });
+    const response = await prompts2({
+      type: "confirm",
+      name: "confirm",
+      message: "Proceed with installation?",
+      initial: true
+    });
+    if (!response.confirm) {
+      showInfo("Installation cancelled.");
+      process.exit(0);
+    }
+  }
+  const success = await copyTablefyComponents(componentsDir, validComponents);
+  if (success) {
+    showSuccess(`Successfully installed: ${validComponents.join(", ")}`);
+  } else {
+    showError("Failed to install some components.");
+    process.exit(1);
+  }
+}
+
+// cli/index.ts
+var program = new Command();
+program.name("tablefy").description("CLI for setting up Tablefy in your project").version("0.2.0");
+program.command("init").description("Initialize Tablefy in your project").option("-y, --yes", "Skip confirmation prompts").option("--skip-shadcn", "Skip shadcn/ui component installation").option(
+  "-c, --components <path>",
+  "Path to components directory",
+  "components"
+).action(initCommand);
+program.command("add").description("Add specific Tablefy components").argument("[components...]", "Components to add (e.g., data-table avatar-list)").option(
+  "-c, --components <path>",
+  "Path to components directory",
+  "components"
+).option("-y, --yes", "Skip confirmation prompts").action(addCommand);
+program.parse(process.argv);

package/dist/columns/avatar-group-column.d.ts

@@ -8,7 +8,7 @@ interface AvatarItem {
 }
 interface AvatarGroupColumnConfig<TData> extends BaseColumnConfig<TData> {
     maxVisible?: number;
-    size?: "xs" | "sm" | "md" | "lg";
+    size?: number;
     overlap?: "none" | "sm" | "md" | "lg";
     showTooltip?: boolean;
     nameField?: keyof TData | ((row: TData) => AvatarItem[]);