@etus/ui 0.1.1 → 0.1.3

package/src/components/data-display/DataTable/DataTable.tsx

@@ -1,529 +0,0 @@
-import type { DataTableProps } from "./DataTable.types"
-import type {
-  ColumnFiltersState,
-  ExpandedState,
-  PaginationState,
-  Table as ReactTable,
-  Row,
-  RowSelectionState,
-  SortingState,
-  VisibilityState,
-} from "@tanstack/react-table"
-
-import {
-  flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
-import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Search } from "lucide-react"
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import { Checkbox } from "../../forms/Checkbox"
-import { TextInput } from "../../forms/TextInput"
-import { Button } from "../../primitives/Button"
-import { SkeletonLoader } from "../../primitives/SkeletonLoader"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../Table"
-
-// Static keys for skeleton loader to avoid array index as key
-const SKELETON_KEYS = ["skeleton-row-1", "skeleton-row-2", "skeleton-row-3", "skeleton-row-4", "skeleton-row-5"] as const
-
-/**
- * DataTable - Advanced data table with sorting, filtering, pagination, and selection.
- *
- * Built on TanStack Table (React Table v8) for powerful data manipulation.
- *
- * @example
- * ```tsx
- * import { DataTable } from '@etus/ui'
- * import { ColumnDef } from '@tanstack/react-table'
- *
- * const columns: ColumnDef<User>[] = [
- *   { accessorKey: 'name', header: 'Name' },
- *   { accessorKey: 'email', header: 'Email' },
- * ]
- *
- * function UserTable() {
- *   return (
- *     <DataTable
- *       data={users}
- *       columns={columns}
- *       enableSorting
- *       enablePagination
- *     />
- *   )
- * }
- * ```
- */
-function DataTable<TData>({
-  data,
-  columns,
-  pageSize = 10,
-  pageSizeOptions = [10, 20, 50],
-  enableSorting = true,
-  enableFiltering = true,
-  enablePagination = true,
-  enableRowSelection = false,
-  enableColumnVisibility: _enableColumnVisibility = false,
-  enableColumnFilters = false,
-  enableSearch = true,
-  onRowClick,
-  onSelectionChange,
-  loading = false,
-  loadingComponent,
-  emptyState,
-  className,
-  globalFilter: controlledGlobalFilter,
-  onGlobalFilterChange,
-  sorting: controlledSorting,
-  onSortingChange,
-  pagination: controlledPagination,
-  onPaginationChange,
-  columnVisibility: controlledColumnVisibility,
-  onColumnVisibilityChange,
-  columnFilters: controlledColumnFilters,
-  onColumnFiltersChange,
-  expanded: controlledExpanded,
-  onExpandedChange,
-  pageCount,
-  manualPagination = false,
-  manualSorting = false,
-  manualFiltering = false,
-  initialSorting,
-  getRowCanExpand,
-  renderSubComponent,
-  rowClassName,
-  showFooter = false,
-  searchPlaceholder = "Search...",
-  rowSelection: controlledRowSelection,
-  onRowSelectionChange,
-}: DataTableProps<TData>) {
-  // Internal state for uncontrolled mode
-  const [internalSorting, setInternalSorting] = React.useState<SortingState>(
-    initialSorting ?? []
-  )
-  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState("")
-  const [internalColumnFilters, setInternalColumnFilters] =
-    React.useState<ColumnFiltersState>([])
-  const [internalColumnVisibility, setInternalColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [internalPagination, setInternalPagination] =
-    React.useState<PaginationState>({
-      pageIndex: 0,
-      pageSize,
-    })
-  const [internalRowSelection, setInternalRowSelection] =
-    React.useState<RowSelectionState>({})
-  const [internalExpanded, setInternalExpanded] =
-    React.useState<ExpandedState>({})
-
-  // Determine controlled vs uncontrolled state
-  const sorting = controlledSorting ?? internalSorting
-  const globalFilter = controlledGlobalFilter ?? internalGlobalFilter
-  const columnFilters = controlledColumnFilters ?? internalColumnFilters
-  const columnVisibility = controlledColumnVisibility ?? internalColumnVisibility
-  const pagination = controlledPagination ?? internalPagination
-  const rowSelection = controlledRowSelection ?? internalRowSelection
-  const expanded = controlledExpanded ?? internalExpanded
-
-  // Create wrapper for row selection change to also notify onSelectionChange
-  const handleRowSelectionChange = React.useCallback(
-    (updaterOrValue: ((old: RowSelectionState) => RowSelectionState) | RowSelectionState) => {
-      const newValue = typeof updaterOrValue === "function"
-        ? updaterOrValue(rowSelection)
-        : updaterOrValue
-
-      // Update internal or controlled state
-      if (onRowSelectionChange) {
-        onRowSelectionChange(newValue)
-      } else {
-        setInternalRowSelection(newValue)
-      }
-
-      // Notify parent of selected rows as TData array
-      if (onSelectionChange) {
-        const selectedIndices = Object.keys(newValue).filter(key => newValue[key])
-        const selectedRows = selectedIndices.map(idx => data[Number(idx)]).filter(Boolean) as TData[]
-        onSelectionChange(selectedRows)
-      }
-    },
-    [rowSelection, onRowSelectionChange, onSelectionChange, data]
-  )
-
-  // Memoize column definitions with selection column
-  const tableColumns = React.useMemo(() => {
-    if (!enableRowSelection) return columns
-
-    return [
-      {
-        id: "select",
-        header: ({ table }: { table: ReactTable<TData> }) => (
-          <Checkbox
-            checked={
-              table.getIsAllPageRowsSelected() ||
-              (table.getIsSomePageRowsSelected() && "indeterminate")
-            }
-            aria-label="Select all"
-            onCheckedChange={(value) => {
-              table.toggleAllPageRowsSelected(!!value)
-            }}
-          />
-        ),
-        cell: ({ row }: { row: Row<TData> }) => (
-          <Checkbox
-            aria-label="Select row"
-            checked={row.getIsSelected()}
-            onCheckedChange={(value) => {
-              row.toggleSelected(!!value)
-            }}
-          />
-        ),
-        enableSorting: false,
-        enableHiding: false,
-      },
-      ...columns,
-    ]
-  }, [columns, enableRowSelection])
-
-  // Initialize table
-  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Table's API is required here.
-  const table = useReactTable({
-    data,
-    columns: tableColumns,
-    state: {
-      sorting,
-      globalFilter,
-      columnFilters,
-      columnVisibility,
-      pagination,
-      rowSelection,
-      expanded,
-    },
-    enableRowSelection,
-    enableSorting,
-    enableFilters: enableFiltering || enableColumnFilters,
-    enableGlobalFilter: enableFiltering,
-    enableColumnFilters,
-    manualPagination,
-    manualSorting,
-    manualFiltering,
-    pageCount: manualPagination ? pageCount : undefined,
-    getRowCanExpand,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: manualSorting ? undefined : getSortedRowModel(),
-    getFilteredRowModel:
-      manualFiltering ? undefined : getFilteredRowModel(),
-    getPaginationRowModel: manualPagination
-      ? undefined
-      : getPaginationRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    onSortingChange: onSortingChange ?? setInternalSorting,
-    onGlobalFilterChange: onGlobalFilterChange ?? setInternalGlobalFilter,
-    onColumnFiltersChange: onColumnFiltersChange ?? setInternalColumnFilters,
-    onColumnVisibilityChange:
-      onColumnVisibilityChange ?? setInternalColumnVisibility,
-    onPaginationChange: onPaginationChange ?? setInternalPagination,
-    onRowSelectionChange: handleRowSelectionChange,
-    onExpandedChange: onExpandedChange ?? setInternalExpanded,
-  })
-
-  // Render loading state
-  if (loading) {
-    return (
-      <div className={cn("space-y-4", className)} data-slot="data-table">
-        {loadingComponent ?? (
-          <div className="space-y-2" data-slot="data-table-loading">
-            {SKELETON_KEYS.map((key) => (
-              <SkeletonLoader key={key} className="h-12 w-full" />
-            ))}
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  // Render empty state
-  if (data.length === 0) {
-    return (
-      <div className={cn("space-y-4", className)} data-slot="data-table">
-        {emptyState ?? (
-          <div
-            className="flex flex-col items-center justify-center py-12 text-center"
-            data-slot="data-table-empty"
-          >
-            <p className="text-muted-foreground text-sm">No data available</p>
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  const hasFooter =
-    showFooter &&
-    tableColumns.some(
-      (col) => "footer" in col && col.footer !== undefined
-    )
-
-  return (
-    <div className={cn("space-y-4", className)} data-slot="data-table">
-      {/* Search/Filter Bar */}
-      {enableFiltering && enableSearch && (
-        <div
-          className="flex items-center gap-[var(--datatable-toolbar-gap)]"
-          data-slot="data-table-toolbar"
-        >
-          <div className="relative max-w-sm flex-1">
-            <Search className="text-[color:var(--datatable-toolbar-search-icon-color)] absolute top-[var(--datatable-toolbar-search-icon-top)] left-[var(--datatable-toolbar-search-icon-left)] size-[var(--datatable-toolbar-search-icon-size)] -translate-y-1/2" />
-            <TextInput
-              aria-label="Search table"
-              className="pl-[var(--datatable-toolbar-search-input-padding-left)]"
-              placeholder={searchPlaceholder}
-              value={globalFilter}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                const value = e.target.value
-                if (onGlobalFilterChange) {
-                  onGlobalFilterChange(value)
-                } else {
-                  setInternalGlobalFilter(value)
-                }
-              }}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Table */}
-      <div className="rounded-md border" data-slot="data-table-container">
-        <Table>
-          <TableHeader>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  const canSort = header.column.getCanSort()
-                  const sorted = header.column.getIsSorted()
-
-                  return (
-                    <TableHead
-                      key={header.id}
-                      aria-sort={
-                        sorted
-                          ? sorted === "asc"
-                            ? "ascending"
-                            : "descending"
-                          : undefined
-                      }
-                      className={cn(
-                        canSort && "cursor-pointer select-none"
-                      )}
-                      onClick={
-                        canSort
-                          ? header.column.getToggleSortingHandler()
-                          : undefined
-                      }
-                    >
-                      <div className="flex items-center gap-2">
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                        {canSort && (
-                          <span className="text-muted-foreground">
-                            {sorted === "asc" ? (
-                              <ArrowUp className="size-4" />
-                            ) : sorted === "desc" ? (
-                              <ArrowDown className="size-4" />
-                            ) : (
-                              <ArrowUpDown className="size-4" />
-                            )}
-                          </span>
-                        )}
-                      </div>
-                    </TableHead>
-                  )
-                })}
-              </TableRow>
-            ))}
-          </TableHeader>
-          <TableBody>
-            {table.getRowModel().rows.length ? (
-              table.getRowModel().rows.map((row) => (
-                <React.Fragment key={row.id}>
-                  <TableRow
-                    className={cn(
-                      onRowClick && "cursor-pointer",
-                      rowClassName?.(row)
-                    )}
-                    data-state={row.getIsSelected() ? "selected" : undefined}
-                    onClick={
-                      onRowClick ? () => { onRowClick(row.original); } : undefined
-                    }
-                  >
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                  {/* Expanded row content */}
-                  {row.getIsExpanded() && renderSubComponent && (
-                    <TableRow>
-                      <TableCell colSpan={row.getVisibleCells().length}>
-                        {renderSubComponent({ row })}
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </React.Fragment>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell
-                  className="h-24 text-center"
-                  colSpan={tableColumns.length}
-                >
-                  No results.
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-          {hasFooter && (
-            <TableFooter>
-              {table.getFooterGroups().map((footerGroup) => (
-                <TableRow key={footerGroup.id}>
-                  {footerGroup.headers.map((header) => (
-                    <TableCell key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.footer,
-                            header.getContext()
-                          )}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))}
-            </TableFooter>
-          )}
-        </Table>
-      </div>
-
-      {/* Pagination */}
-      {enablePagination && (
-        <div
-          className="flex w-full flex-col-reverse gap-4 px-[var(--datatable-pagination-padding-x)] py-4 lg:flex-row lg:items-center lg:justify-between"
-          data-slot="data-table-pagination"
-        >
-          {/* Selection info */}
-          <div className="text-[color:var(--datatable-pagination-info-color)] text-[length:var(--datatable-pagination-info-size)] w-full text-center lg:w-auto lg:text-left">
-            {enableRowSelection && table.getFilteredSelectedRowModel().rows.length > 0 ? (
-              <>
-                {table.getFilteredSelectedRowModel().rows.length} of{" "}
-                {table.getFilteredRowModel().rows.length} row(s) selected.
-              </>
-            ) : (
-              <span className="hidden lg:inline">&nbsp;</span>
-            )}
-          </div>
-
-          {/* Controls Container */}
-          <div className="flex w-full flex-col-reverse items-center justify-between gap-4 sm:flex-row sm:justify-between lg:w-auto lg:gap-8">
-            <div className="flex w-full items-center justify-start gap-4 sm:w-auto">
-              <div className="flex flex-col items-start gap-1">
-                <p className="text-[color:var(--datatable-pagination-info-color)] text-[length:var(--datatable-pagination-info-size)] font-medium whitespace-nowrap text-xs">
-                  Rows per page
-                </p>
-                <select
-                  aria-label="Rows per page"
-                  className="h-8 w-[70px] rounded-md border border-input bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                  value={pagination.pageSize}
-                  onChange={(e) => {
-                    const newSize = Number(e.target.value)
-                    if (onPaginationChange) {
-                      onPaginationChange({
-                        pageIndex: 0,
-                        pageSize: newSize,
-                      })
-                    } else {
-                      setInternalPagination({
-                        pageIndex: 0,
-                        pageSize: newSize,
-                      })
-                    }
-                  }}
-                >
-                  {pageSizeOptions.map((size) => (
-                    <option key={size} value={size}>
-                      {size}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-
-            <div className="flex flex-col items-center gap-1 sm:items-end">
-              <div className="text-[color:var(--datatable-pagination-info-color)] text-[length:var(--datatable-pagination-info-size)] font-medium whitespace-nowrap text-xs">
-                Page {pagination.pageIndex + 1} of {table.getPageCount()}
-              </div>
-              <div className="flex items-center space-x-2">
-                <Button
-                  aria-label="Go to first page"
-                  disabled={!table.getCanPreviousPage()}
-                  size="icon-sm"
-                  variant="outline"
-                  onClick={() => { table.setPageIndex(0); }}
-                >
-                  <ChevronsLeft className="size-4" />
-                </Button>
-                <Button
-                  aria-label="Go to previous page"
-                  disabled={!table.getCanPreviousPage()}
-                  size="icon-sm"
-                  variant="outline"
-                  onClick={() => { table.previousPage(); }}
-                >
-                  <ChevronLeft className="size-4" />
-                </Button>
-                <Button
-                  aria-label="Go to next page"
-                  disabled={!table.getCanNextPage()}
-                  size="icon-sm"
-                  variant="outline"
-                  onClick={() => { table.nextPage(); }}
-                >
-                  <ChevronRight className="size-4" />
-                </Button>
-                <Button
-                  aria-label="Go to last page"
-                  disabled={!table.getCanNextPage()}
-                  size="icon-sm"
-                  variant="outline"
-                  onClick={() => { table.setPageIndex(table.getPageCount() - 1); }}
-                >
-                  <ChevronsRight className="size-4" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { DataTable }