@turtleclub/ui 0.7.0-beta.32 → 0.7.0-beta.34

package/src/components/features/data-table/data-table.tsx

@@ -1,538 +0,0 @@
-"use client";
-
-import React, { Fragment, useMemo, useState } from "react";
-
-import {
-  ColumnDef,
-  ExpandedState,
-  flexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  PaginationState,
-  Row,
-  RowSelectionState,
-  SortingState,
-  useReactTable,
-} from "@tanstack/react-table";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  ScrollArea,
-  ShadTableCell,
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Input,
-  Combobox,
-} from "../../ui";
-import SortableHeader from "./sortable-header";
-import { SearchBar } from "../search-bar";
-import { fuzzyFilter } from "./fuzzy-filter";
-import { cn } from "@/lib/utils";
-import { ItemInfo } from "./item-info";
-import { GridSkeleton, RowsSkeleton } from "./skeleton";
-import { SortDropdown } from "./sort-dropdown";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "../../ui/pagination";
-import { useIsMobile } from "@/hooks";
-
-const getScrollAreaHeight = (size: string | "full" | undefined) => {
-  if (!size) return "auto";
-  if (size === "full") return "100%";
-  return size;
-};
-
-type DataTableProps<TData, TValue> = {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  // Loading state
-  isLoading?: boolean;
-  // Slot for control appart from the ones baked in
-  slot?: React.ReactNode;
-  // Enabling baked in features
-  enableSearch?: boolean;
-  enableExpand?: boolean;
-  enablePagination?: boolean;
-  enableSorting?: boolean;
-  // enableSelection?: boolean;
-  renderSubComponent?: (props: { row: Row<TData> }) => React.ReactElement;
-
-  // Initial setup to match data coming in if server side manipulated
-  initialSorting?: SortingState;
-  onRowClick?: (row: TData) => void;
-  initialColumnVisibility?: Record<keyof TData, boolean>;
-
-  // Server-side control options
-  manualFiltering?: boolean;
-  manualSorting?: boolean;
-  manualPagination?: boolean;
-
-  pageCount?: number; // Total page count from server (required when manualPagination is true)
-  rowCount?: number; // Total row count from server (optional, for display purposes)
-
-  // Controlled state (for server-side control)
-  sorting?: SortingState;
-  onSortingChange?: (sorting: SortingState) => void;
-  globalFilter?: string;
-  onGlobalFilterChange?: (filter: string) => void;
-  pagination?: PaginationState;
-  onPaginationChange?: (pagination: PaginationState) => void;
-
-  // Exclusive card view configuration
-  grid?: {
-    displayAsGrid: boolean;
-    className?: string;
-    headerSlot: keyof TData | string;
-    rightSlot?: keyof TData | string;
-    excludeColumns?: (keyof TData | string)[];
-    headerTextSize?: string;
-    rightSlotTextSize?: string;
-  };
-  // ScrollArea size configuration
-  size?: string | "full";
-  emptyState?: React.ReactNode;
-  className?: string;
-  slotClassName?: string;
-};
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  isLoading,
-  slot,
-  enableExpand,
-  enableSearch,
-  enablePagination,
-  enableSorting,
-  renderSubComponent,
-  initialSorting = [],
-  initialColumnVisibility,
-  size = undefined,
-  grid,
-  emptyState,
-  className,
-  slotClassName,
-  onRowClick,
-  // Server-side props
-  manualFiltering = false,
-  manualSorting = false,
-  manualPagination = false,
-  pageCount,
-  rowCount,
-  sorting: controlledSorting,
-  onSortingChange: onControlledSortingChange,
-  globalFilter: controlledGlobalFilter,
-  onGlobalFilterChange: onControlledGlobalFilterChange,
-  pagination: controlledPagination,
-  onPaginationChange: onControlledPaginationChange,
-}: DataTableProps<TData, TValue>) {
-  const [columnVisibility, setColumnVisibility] = React.useState(initialColumnVisibility ?? {});
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-  const [expanded, setExpanded] = React.useState<ExpandedState>({});
-
-  // Internal state (used when not controlled from outside)
-  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState<string>("");
-  const [internalSorting, setInternalSorting] = React.useState<SortingState>(initialSorting);
-  const [internalPagination, setInternalPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
-
-  // Store the default page size for reset purposes
-  const defaultPageSize = React.useMemo(
-    () => controlledPagination?.pageSize ?? internalPagination.pageSize,
-    [controlledPagination?.pageSize]
-  );
-
-  // Use controlled state if provided, otherwise use internal state
-  const globalFilter = controlledGlobalFilter ?? internalGlobalFilter;
-  const sorting = controlledSorting ?? internalSorting;
-  const pagination = controlledPagination ?? internalPagination;
-
-  const setGlobalFilter = (value: string) => {
-    if (onControlledGlobalFilterChange) {
-      onControlledGlobalFilterChange(value);
-    } else {
-      setInternalGlobalFilter(value);
-    }
-  };
-
-  const setSorting = (updaterOrValue: SortingState | ((old: SortingState) => SortingState)) => {
-    const newSorting =
-      typeof updaterOrValue === "function" ? updaterOrValue(sorting) : updaterOrValue;
-
-    if (onControlledSortingChange) {
-      onControlledSortingChange(newSorting);
-    } else {
-      setInternalSorting(newSorting);
-    }
-  };
-
-  const setPagination = (
-    updaterOrValue: PaginationState | ((old: PaginationState) => PaginationState)
-  ) => {
-    const newPagination =
-      typeof updaterOrValue === "function" ? updaterOrValue(pagination) : updaterOrValue;
-
-    if (onControlledPaginationChange) {
-      onControlledPaginationChange(newPagination);
-    } else {
-      setInternalPagination(newPagination);
-    }
-  };
-
-  const { isMobile } = useIsMobile();
-
-  const table = useReactTable({
-    data,
-    columns,
-    filterFns: {
-      fuzzy: fuzzyFilter,
-    },
-    state: {
-      expanded,
-      rowSelection,
-      sorting,
-      globalFilter,
-      columnVisibility,
-      pagination,
-    },
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onSortingChange: setSorting,
-    // onColumnFiltersChange: setColumnFilters,
-    onGlobalFilterChange: setGlobalFilter,
-    onPaginationChange: setPagination,
-    onExpandedChange: setExpanded,
-    globalFilterFn: "fuzzy" as any,
-    getRowCanExpand: enableExpand ? () => true : undefined,
-
-    // Server-side control
-    manualFiltering: manualFiltering,
-    manualSorting,
-    manualPagination,
-    pageCount: manualPagination ? pageCount : undefined,
-    rowCount: manualPagination ? rowCount : undefined,
-
-    // Core row model is always needed
-    getCoreRowModel: getCoreRowModel(),
-    // When manualFiltering: server does the filtering; don't filter current page by globalFilter (so search works across all data).
-    // When !manualFiltering: use client-side filtered row model.
-    getFilteredRowModel: manualFiltering
-      ? (table) => () => table.getCoreRowModel()
-      : getFilteredRowModel(),
-    getSortedRowModel: !manualSorting ? getSortedRowModel() : undefined,
-    getPaginationRowModel:
-      enablePagination && !manualPagination ? getPaginationRowModel() : undefined,
-    getExpandedRowModel: getExpandedRowModel(),
-
-    // debugTable: true,
-    // debugHeaders: true,
-    // debugColumns: false,
-  });
-
-  const headers = useMemo(
-    () =>
-      table
-        .getHeaderGroups()
-        .map((headerGroup) => headerGroup.headers)
-        .flat(),
-    [table]
-  );
-
-  return (
-    <div className="space-y-3">
-      {slot || enableSearch || (enableSorting && grid?.displayAsGrid) ? (
-        <div className={cn("flex items-start gap-1", slotClassName)}>
-          {slot}
-          <span className="grow" />
-          {enableSorting && grid?.displayAsGrid && (
-            <SortDropdown
-              headers={headers}
-              currentSort={sorting.length > 0 ? sorting[0] : null}
-              onSortChange={(columnId, desc) => {
-                setSorting([{ id: columnId, desc }]);
-              }}
-              onClearSort={() => setSorting([])}
-            />
-          )}
-          {enableSearch && (
-            <SearchBar
-              id="search-bar"
-              value={globalFilter ?? ""}
-              onChange={(value) => setGlobalFilter(String(value))}
-              placeholder="Search..."
-            />
-          )}
-        </div>
-      ) : undefined}
-      <ScrollArea style={{ height: getScrollAreaHeight(size) }} className={className}>
-        {table.getRowModel().rows?.length || isLoading ? (
-          grid?.displayAsGrid ? (
-            isLoading ? (
-              <GridSkeleton
-                className={cn(
-                  "grid gap-1 pr-1.5",
-                  "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
-                  grid.className
-                )}
-              />
-            ) : (
-              <div
-                className={cn(
-                  "grid gap-1 pr-1.5",
-                  "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
-                  grid.className
-                )}
-              >
-                {table.getRowModel().rows.map((row) => (
-                  <div onClick={() => onRowClick?.(row.original)} key={row.id}>
-                    <Card
-                      className={cn(
-                        "max-w-none",
-                        onRowClick ? "hover:bg-neutral-alpha-5 cursor-pointer" : ""
-                      )}
-                      data-state={row.getIsSelected() && "selected"}
-                      variant="border"
-                    >
-                      <CardHeader className="flex items-center gap-2">
-                        {/* Slot for header, pick the colum you display here */}
-                        <CardTitle className={cn("line-clamp-1 grow", grid.headerTextSize || "text-base")}>
-                          {row
-                            .getVisibleCells()
-                            .filter((cell) => cell.column.id === grid.headerSlot)
-                            ?.map((cell) => (
-                              <Fragment key={cell.id}>
-                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                              </Fragment>
-                            ))}
-                        </CardTitle>
-                        {/* Slot for extra right section, pick the colum you display here */}
-                        {row
-                          .getVisibleCells()
-                          .filter((cell) => cell.column.id === grid?.rightSlot)
-                          ?.map((cell) => (
-                            <div key={cell.id} className={cn(grid.rightSlotTextSize || "text-lg")}>
-                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                            </div>
-                          ))}
-                      </CardHeader>
-                      <CardContent className="flex flex-wrap justify-between">
-                        {row
-                          .getVisibleCells()
-                          .filter(
-                            (cell) =>
-                              cell.column.id !== grid.headerSlot &&
-                              cell.column.id !== grid.rightSlot &&
-                              !grid.excludeColumns?.includes(cell.column.id)
-                          )
-                          .map((cell) => {
-                            return (
-                              <ItemInfo
-                                key={cell.id}
-                                title={flexRender(
-                                  cell.column.columnDef.header,
-                                  headers
-                                    .find((header) => header.id === cell.column.id)
-                                    ?.getContext()
-                                )}
-                                value={flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                className="justify-between gap-3 *:text-xs"
-                              />
-                            );
-                          })}
-                      </CardContent>
-                      {row.getIsExpanded() && renderSubComponent({ row })}
-                    </Card>
-                  </div>
-                ))}
-              </div>
-            )
-          ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  {headers.map((header) => {
-                    return (
-                      <TableHead
-                        key={header.id}
-                        style={{
-                          width: header.column.columnDef.size,
-                          minWidth: header.column.columnDef.minSize,
-                          maxWidth: header.column.columnDef.maxSize,
-                        }}
-                        className={(header.column.columnDef.meta as any)?.className}
-                      >
-                        <SortableHeader header={header} />
-                      </TableHead>
-                    );
-                  })}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {isLoading ? (
-                  <RowsSkeleton headers={headers.map((header) => header.id)} />
-                ) : (
-                  table.getRowModel().rows.map((row) => (
-                    <Fragment key={row.id}>
-                      <TableRow
-                        onClick={() => onRowClick?.(row.original)}
-                        data-state={row.getIsSelected() && "selected"}
-                        className={onRowClick ? "hover:bg-neutral-alpha-5 cursor-pointer" : ""}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <ShadTableCell key={cell.id}>
-                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                          </ShadTableCell>
-                        ))}
-                      </TableRow>
-                      {row.getIsExpanded() && (
-                        <tr>
-                          {/* 2nd row is a custom 1 cell row */}
-                          <td colSpan={row.getVisibleCells().length}>
-                            {renderSubComponent({ row })}
-                          </td>
-                        </tr>
-                      )}
-                    </Fragment>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          )
-        ) : (
-          (emptyState ?? (
-            <div className="bg-neutral-alpha-2 m-12 flex h-48 items-center justify-center rounded-lg shadow">
-              No results available.
-            </div>
-          ))
-        )}
-      </ScrollArea>
-      {enablePagination && (
-        <div className={cn(isMobile ? "flex flex-col gap-2" : "flex justify-between gap-1")}>
-          <Combobox
-            options={[10, 20, 30, 40, 50, 100].map((size) => ({
-              label: `Show ${size.toString()} rows per page`,
-              value: size,
-            }))}
-            defaultValue={table.getState().pagination.pageSize}
-            onValueChange={(value) => {
-              // If value is cleared/null/0, reset to default page size
-              const newPageSize = value || defaultPageSize;
-              table.setPageSize(newPageSize);
-            }}
-            autoSize
-            className="h-9"
-            searchable={false}
-            closeOnSelect
-            placeholder="Rows shown per page"
-          />
-
-          <Pagination>
-            <PaginationContent>
-              <PaginationItem>
-                <PaginationPrevious
-                  onClick={() => table.previousPage()}
-                  className={
-                    !table.getCanPreviousPage()
-                      ? "pointer-events-none opacity-50"
-                      : "cursor-pointer"
-                  }
-                />
-              </PaginationItem>
-              {Array.from({ length: table.getPageCount() }, (_, i) => i).map((pageIndex) => {
-                const currentPage = table.getState().pagination.pageIndex;
-                const totalPages = table.getPageCount();
-
-                // Show first page, last page, current page, and pages around current
-                const showPage =
-                  pageIndex === 0 ||
-                  pageIndex === totalPages - 1 ||
-                  (pageIndex >= currentPage - 1 && pageIndex <= currentPage + 1);
-
-                // Show ellipsis before current range (but not right after first page)
-                const showEllipsisBefore = pageIndex === currentPage - 2 && currentPage > 2;
-
-                // Show ellipsis after current range (but not right before last page)
-                const showEllipsisAfter =
-                  pageIndex === currentPage + 2 && currentPage < totalPages - 3;
-
-                if (showEllipsisBefore || showEllipsisAfter) {
-                  return (
-                    <PaginationItem key={pageIndex}>
-                      <PaginationEllipsis />
-                    </PaginationItem>
-                  );
-                }
-
-                if (!showPage) return null;
-
-                return (
-                  <PaginationItem key={pageIndex}>
-                    <PaginationLink
-                      onClick={() => table.setPageIndex(pageIndex)}
-                      isActive={currentPage === pageIndex}
-                      className="cursor-pointer"
-                    >
-                      {pageIndex + 1}
-                    </PaginationLink>
-                  </PaginationItem>
-                );
-              })}
-              <PaginationItem>
-                <PaginationNext
-                  onClick={() => table.nextPage()}
-                  className={
-                    !table.getCanNextPage() ? "pointer-events-none opacity-50" : "cursor-pointer"
-                  }
-                />
-              </PaginationItem>
-            </PaginationContent>
-          </Pagination>
-
-          <div className="mx-4 flex items-center gap-1">
-            <span className="text-muted-foreground truncate text-xs">Go to page:</span>
-            <Input
-              min={1}
-              max={table.getPageCount()}
-              pattern="[0-9]*"
-              defaultValue={table.getState().pagination.pageIndex + 1}
-              onBlurCapture={(e) => {
-                const page = e.target.value ? Number(e.target.value) - 1 : 0;
-                if (page >= 0 && page < table.getPageCount()) {
-                  table.setPageIndex(page);
-                }
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  const page = e.currentTarget.value ? Number(e.currentTarget.value) - 1 : 0;
-                  if (page >= 0 && page < table.getPageCount()) {
-                    table.setPageIndex(page);
-                  }
-                }
-              }}
-              className="h-9! w-12"
-            />
-            <span className="text-muted-foreground truncate text-xs">
-              of {table.getPageCount()}
-            </span>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/features/data-table/expand-toggle.tsx

@@ -1,17 +0,0 @@
-import { Row } from "@tanstack/react-table";
-import { ChevronDown, ChevronRight } from "lucide-react";
-
-export function ExpandToggle({ row }: { row: Row<any> }) {
-  return row.getCanExpand() ? (
-    <button
-      onClick={row.getToggleExpandedHandler()}
-      className="flex cursor-pointer items-center justify-center"
-    >
-      {row.getIsExpanded() ? (
-        <ChevronDown className="text-foreground size-3.5" />
-      ) : (
-        <ChevronRight className="text-muted-foreground size-3.5" />
-      )}
-    </button>
-  ) : undefined;
-}

package/src/components/features/data-table/fuzzy-filter.tsx

@@ -1,34 +0,0 @@
-import { FilterFn, SortingFn, sortingFns } from "@tanstack/react-table";
-import { rankItem, compareItems } from "@tanstack/match-sorter-utils";
-
-// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
-export const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
-  // Rank the item
-  const itemRank = rankItem(row.getValue(columnId), value);
-
-  // Store the itemRank info
-  addMeta({
-    itemRank,
-  });
-
-  // Return if the item should be filtered in/out
-  return itemRank.passed;
-};
-
-// Define a custom fuzzy sort function that will sort by rank if the row has ranking information
-export const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
-  let dir = 0;
-
-  // Only sort by rank if the column has ranking information
-  if (rowA.columnFiltersMeta[columnId]) {
-    dir = compareItems(
-      // @ts-expect-error not in module
-      rowA.columnFiltersMeta[columnId]?.itemRank,
-      // @ts-expect-error not in module
-      rowB.columnFiltersMeta[columnId]?.itemRank,
-    );
-  }
-
-  // Provide an alphanumeric fallback for when the item ranks are equal
-  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
-};

package/src/components/features/data-table/index.ts

@@ -1,3 +0,0 @@
-export * from "./data-table";
-export * from "./expand-toggle";
-export * from "./sort-dropdown";

package/src/components/features/data-table/item-info.tsx

@@ -1,19 +0,0 @@
-import { cn } from "@/lib/utils";
-import React from "react";
-
-export function ItemInfo({
-  title,
-  value,
-  className,
-}: {
-  title: React.ReactNode;
-  value: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("flex flex-col items-start gap-1", className)}>
-      <div className="text-muted-foreground text-xs">{title}</div>
-      <div className="text-sm">{value}</div>
-    </div>
-  );
-}

package/src/components/features/data-table/skeleton.tsx

@@ -1,23 +0,0 @@
-import { Card, ShadTableCell, TableRow } from "@/components/ui";
-
-export function RowsSkeleton({ headers }: { headers: string[] }) {
-  return [...Array(12).keys()].map((i) => (
-    <TableRow key={i}>
-      {headers.map((e) => (
-        <ShadTableCell key={e} className="h-12 animate-pulse">
-          <div />
-        </ShadTableCell>
-      ))}
-    </TableRow>
-  ));
-}
-
-export function GridSkeleton({ className }: { className?: string }) {
-  return (
-    <div className={className}>
-      {[...Array(12).keys()].map((i) => (
-        <Card key={i} className="h-40 animate-pulse" variant="border" />
-      ))}
-    </div>
-  );
-}