@trackany-device/components 1.0.0

package/src/components/ui/data-grid-column-header.tsx

@@ -0,0 +1,284 @@
+'use client';
+import { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from '../../controls/Button';
+import { useDataGrid } from './data-grid';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { Column } from '@tanstack/react-table';
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowLeftToLine,
+  ArrowRight,
+  ArrowRightToLine,
+  ArrowUp,
+  Check,
+  ChevronsUpDown,
+  PinOff,
+  Settings2,
+} from 'lucide-react';
+
+interface DataGridColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title?: string;
+  icon?: ReactNode;
+  pinnable?: boolean;
+  filter?: ReactNode;
+  visibility?: boolean;
+}
+
+function DataGridColumnHeader<TData, TValue>({
+  column,
+  title = '',
+  icon,
+  className,
+  filter,
+  visibility = false,
+}: DataGridColumnHeaderProps<TData, TValue>) {
+  const { isLoading, table, props, recordCount } = useDataGrid();
+
+  const moveColumn = (direction: 'left' | 'right') => {
+    const currentOrder = [...table.getState().columnOrder]; // Get current column order
+    const currentIndex = currentOrder.indexOf(column.id); // Get current index of the column
+
+    if (direction === 'left' && currentIndex > 0) {
+      // Move column left
+      const newOrder = [...currentOrder];
+      const [movedColumn] = newOrder.splice(currentIndex, 1);
+      newOrder.splice(currentIndex - 1, 0, movedColumn);
+      table.setColumnOrder(newOrder); // Update column order
+    }
+
+    if (direction === 'right' && currentIndex < currentOrder.length - 1) {
+      // Move column right
+      const newOrder = [...currentOrder];
+      const [movedColumn] = newOrder.splice(currentIndex, 1);
+      newOrder.splice(currentIndex + 1, 0, movedColumn);
+      table.setColumnOrder(newOrder); // Update column order
+    }
+  };
+
+  const canMove = (direction: 'left' | 'right'): boolean => {
+    const currentOrder = table.getState().columnOrder;
+    const currentIndex = currentOrder.indexOf(column.id);
+    if (direction === 'left') {
+      return currentIndex > 0;
+    } else {
+      return currentIndex < currentOrder.length - 1;
+    }
+  };
+
+  const headerLabel = () => {
+    return (
+      <div
+        className={cn(
+          'text-accent-foreground font-normal inline-flex h-full items-center gap-1.5 text-[0.8125rem] leading-[calc(1.125/0.8125)] [&_svg]:size-3.5 [&_svg]:opacity-60',
+          className,
+        )}
+      >
+        {icon && icon}
+        {title}
+      </div>
+    );
+  };
+
+  const headerButton = () => {
+    return (
+      <Button
+        variant="ghost"
+        className={cn(
+          'text-secondary-foreground rounded-md font-normal -ms-2 px-2 h-7 hover:bg-secondary data-[state=open]:bg-secondary hover:text-foreground data-[state=open]:text-foreground',
+          className,
+        )}
+        disabled={isLoading || recordCount === 0}
+        onClick={() => {
+          const isSorted = column.getIsSorted();
+          if (isSorted === 'asc') {
+            column.toggleSorting(true);
+          } else if (isSorted === 'desc') {
+            column.clearSorting();
+          } else {
+            column.toggleSorting(false);
+          }
+        }}
+      >
+        {icon && icon}
+        {title}
+
+        {column.getCanSort() &&
+          (column.getIsSorted() === 'desc' ? (
+            <ArrowDown className="size-[0.7rem]! mt-px" />
+          ) : column.getIsSorted() === 'asc' ? (
+            <ArrowUp className="size-[0.7rem]! mt-px" />
+          ) : (
+            <ChevronsUpDown className="size-[0.7rem]! mt-px" />
+          ))}
+      </Button>
+    );
+  };
+
+  const headerPin = () => {
+    return (
+      <Button
+        size="sm"
+        variant="ghost"
+        className="-me-1 size-7 rounded-md"
+        onClick={() => column.pin(false)}
+        aria-label={`Unpin ${title} column`}
+        title={`Unpin ${title} column`}
+      >
+        <PinOff className="size-3.5! opacity-50!" aria-hidden="true" />
+      </Button>
+    );
+  };
+
+  const headerControls = () => {
+    return (
+      <div className="flex items-center h-full gap-1.5 justify-between">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>{headerButton()}</DropdownMenuTrigger>
+          <DropdownMenuContent className="w-40" align="start">
+            {filter && <DropdownMenuLabel>{filter}</DropdownMenuLabel>}
+
+            {filter && (column.getCanSort() || column.getCanPin() || visibility) && <DropdownMenuSeparator />}
+
+            {column.getCanSort() && (
+              <>
+                <DropdownMenuItem
+                  onClick={() => {
+                    if (column.getIsSorted() === 'asc') {
+                      column.clearSorting();
+                    } else {
+                      column.toggleSorting(false);
+                    }
+                  }}
+                  disabled={!column.getCanSort()}
+                >
+                  <ArrowUp className="size-3.5!" />
+                  <span className="grow">Asc</span>
+                  {column.getIsSorted() === 'asc' && <Check className="size-4 opacity-100! text-primary" />}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    if (column.getIsSorted() === 'desc') {
+                      column.clearSorting();
+                    } else {
+                      column.toggleSorting(true);
+                    }
+                  }}
+                  disabled={!column.getCanSort()}
+                >
+                  <ArrowDown className="size-3.5!" />
+                  <span className="grow">Desc</span>
+                  {column.getIsSorted() === 'desc' && <Check className="size-4 opacity-100! text-primary" />}
+                </DropdownMenuItem>
+              </>
+            )}
+
+            {(filter || column.getCanSort()) && (column.getCanSort() || column.getCanPin() || visibility) && (
+              <DropdownMenuSeparator />
+            )}
+
+            {props.tableLayout?.columnsPinnable && column.getCanPin() && (
+              <>
+                <DropdownMenuItem onClick={() => column.pin(column.getIsPinned() === 'left' ? false : 'left')}>
+                  <ArrowLeftToLine className="size-3.5!" aria-hidden="true" />
+                  <span className="grow">Pin to left</span>
+                  {column.getIsPinned() === 'left' && <Check className="size-4 opacity-100! text-primary" />}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => column.pin(column.getIsPinned() === 'right' ? false : 'right')}>
+                  <ArrowRightToLine className="size-3.5!" aria-hidden="true" />
+                  <span className="grow">Pin to right</span>
+                  {column.getIsPinned() === 'right' && <Check className="size-4 opacity-100! text-primary" />}
+                </DropdownMenuItem>
+              </>
+            )}
+
+            {props.tableLayout?.columnsMovable && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => moveColumn('left')}
+                  disabled={!canMove('left') || column.getIsPinned() !== false}
+                >
+                  <ArrowLeft className="size-3.5!" aria-hidden="true" />
+                  <span>Move to Left</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => moveColumn('right')}
+                  disabled={!canMove('right') || column.getIsPinned() !== false}
+                >
+                  <ArrowRight className="size-3.5!" aria-hidden="true" />
+                  <span>Move to Right</span>
+                </DropdownMenuItem>
+              </>
+            )}
+
+            {props.tableLayout?.columnsVisibility &&
+              visibility &&
+              (column.getCanSort() || column.getCanPin() || filter) && <DropdownMenuSeparator />}
+
+            {props.tableLayout?.columnsVisibility && visibility && (
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <Settings2 className="size-3.5!" />
+                  <span>Columns</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    {table
+                      .getAllColumns()
+                      .filter((col) => typeof col.accessorFn !== 'undefined' && col.getCanHide())
+                      .map((col) => {
+                        return (
+                          <DropdownMenuCheckboxItem
+                            key={col.id}
+                            checked={col.getIsVisible()}
+                            onSelect={(event) => event.preventDefault()}
+                            onCheckedChange={(value) => col.toggleVisibility(!!value)}
+                            className="capitalize"
+                          >
+                            {col.columnDef.meta?.headerTitle || col.id}
+                          </DropdownMenuCheckboxItem>
+                        );
+                      })}
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        {props.tableLayout?.columnsPinnable && column.getCanPin() && column.getIsPinned() && headerPin()}
+      </div>
+    );
+  };
+
+  if (
+    props.tableLayout?.columnsMovable ||
+    (props.tableLayout?.columnsVisibility && visibility) ||
+    (props.tableLayout?.columnsPinnable && column.getCanPin()) ||
+    filter
+  ) {
+    return headerControls();
+  }
+
+  if (column.getCanSort() || (props.tableLayout?.columnsResizable && column.getCanResize())) {
+    return <div className="flex items-center h-full">{headerButton()}</div>;
+  }
+
+  return headerLabel();
+}
+
+export { DataGridColumnHeader, type DataGridColumnHeaderProps };

package/src/components/ui/data-grid-column-visibility.tsx

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { Table } from '@tanstack/react-table';
+
+function DataGridColumnVisibility<TData>({ table, trigger }: { table: Table<TData>; trigger: ReactNode }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[150px]">
+        <DropdownMenuLabel className="font-medium">Toggle Columns</DropdownMenuLabel>
+        {table
+          .getAllColumns()
+          .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onSelect={(event) => event.preventDefault()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.columnDef.meta?.headerTitle || column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export { DataGridColumnVisibility };

package/src/components/ui/data-grid-pagination.tsx

@@ -0,0 +1,206 @@
+'use client';
+import { ReactNode } from 'react';
+import { Button } from '../../controls/Button';
+import { useDataGrid } from './data-grid';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import { Skeleton } from './skeleton';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+interface DataGridPaginationProps {
+  sizes?: number[];
+  sizesInfo?: string;
+  sizesLabel?: string;
+  sizesDescription?: string;
+  sizesSkeleton?: ReactNode;
+  more?: boolean;
+  moreLimit?: number;
+  info?: string;
+  infoSkeleton?: ReactNode;
+  className?: string;
+}
+
+function DataGridPagination(props: DataGridPaginationProps) {
+  const { table, recordCount, isLoading } = useDataGrid();
+
+  const defaultProps: Partial<DataGridPaginationProps> = {
+    sizes: [5, 10, 25, 50, 100],
+    sizesLabel: 'Show',
+    sizesDescription: 'per page',
+    sizesSkeleton: <Skeleton className="h-8 w-44" />,
+    moreLimit: 5,
+    more: false,
+    info: '{from} - {to} of {count}',
+    infoSkeleton: <Skeleton className="h-8 w-60" />,
+  };
+
+  const mergedProps: DataGridPaginationProps = { ...defaultProps, ...props };
+
+  const btnBaseClasses = 'size-7 p-0 text-sm';
+  const btnArrowClasses = btnBaseClasses + ' rtl:transform rtl:rotate-180';
+  const pageIndex = table.getState().pagination.pageIndex;
+  const pageSize = table.getState().pagination.pageSize;
+  const from = pageIndex * pageSize + 1;
+  const to = Math.min((pageIndex + 1) * pageSize, recordCount);
+  const pageCount = table.getPageCount();
+
+  // Replace placeholders in paginationInfo
+  const paginationInfo = mergedProps?.info
+    ? mergedProps.info
+        .replace('{from}', from.toString())
+        .replace('{to}', to.toString())
+        .replace('{count}', recordCount.toString())
+    : `${from} - ${to} of ${recordCount}`;
+
+  // Pagination limit logic
+  const paginationMoreLimit = mergedProps?.moreLimit || 5;
+
+  // Determine the start and end of the pagination group
+  const currentGroupStart = Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit;
+  const currentGroupEnd = Math.min(currentGroupStart + paginationMoreLimit, pageCount);
+
+  // Render page buttons based on the current group
+  const renderPageButtons = () => {
+    const buttons = [];
+    for (let i = currentGroupStart; i < currentGroupEnd; i++) {
+      buttons.push(
+        <Button
+          key={i}
+          size="sm"
+
+          variant="ghost"
+          className={cn(btnBaseClasses, 'text-muted-foreground', {
+            'bg-accent text-accent-foreground': pageIndex === i,
+          })}
+          onClick={() => {
+            if (pageIndex !== i) {
+              table.setPageIndex(i);
+            }
+          }}
+        >
+          {i + 1}
+        </Button>,
+      );
+    }
+    return buttons;
+  };
+
+  // Render a "previous" ellipsis button if there are previous pages to show
+  const renderEllipsisPrevButton = () => {
+    if (currentGroupStart > 0) {
+      return (
+        <Button
+          size="sm"
+
+          className={btnBaseClasses}
+          variant="ghost"
+          onClick={() => table.setPageIndex(currentGroupStart - 1)}
+        >
+          ...
+        </Button>
+      );
+    }
+    return null;
+  };
+
+  // Render a "next" ellipsis button if there are more pages to show after the current group
+  const renderEllipsisNextButton = () => {
+    if (currentGroupEnd < pageCount) {
+      return (
+        <Button
+          className={btnBaseClasses}
+          variant="ghost"
+          size="sm"
+
+          onClick={() => table.setPageIndex(currentGroupEnd)}
+        >
+          ...
+        </Button>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div
+      data-slot="data-grid-pagination"
+      className={cn(
+        'flex flex-wrap flex-col sm:flex-row justify-between items-center gap-2.5 py-2.5 sm:py-0 grow',
+        mergedProps?.className,
+      )}
+    >
+      <div className="flex flex-wrap items-center space-x-2.5 pb-2.5 sm:pb-0 order-2 sm:order-1">
+        {isLoading ? (
+          mergedProps?.sizesSkeleton
+        ) : (
+          <>
+            <div className="text-sm text-muted-foreground">Rows per page</div>
+            <Select
+              value={`${pageSize}`}
+              indicatorPosition="right"
+              onValueChange={(value) => {
+                const newPageSize = Number(value);
+                table.setPageSize(newPageSize);
+              }}
+            >
+              <SelectTrigger className="w-fit" size="sm">
+                <SelectValue placeholder={`${pageSize}`} />
+              </SelectTrigger>
+              <SelectContent side="top" className="min-w-[50px]">
+                {mergedProps?.sizes?.map((size: number) => (
+                  <SelectItem key={size} value={`${size}`}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        )}
+      </div>
+      <div className="flex flex-col sm:flex-row justify-center sm:justify-end items-center gap-2.5 pt-2.5 sm:pt-0 order-1 sm:order-2">
+        {isLoading ? (
+          mergedProps?.infoSkeleton
+        ) : (
+          <>
+            <div className="text-sm text-muted-foreground text-nowrap order-2 sm:order-1">{paginationInfo}</div>
+            {pageCount > 1 && (
+              <div className="flex items-center space-x-1 order-1 sm:order-2">
+                <Button
+                  size="sm"
+        
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.previousPage()}
+                  disabled={!table.getCanPreviousPage()}
+                >
+                  <span className="sr-only">Go to previous page</span>
+                  <ChevronLeftIcon className="size-4" />
+                </Button>
+
+                {renderEllipsisPrevButton()}
+
+                {renderPageButtons()}
+
+                {renderEllipsisNextButton()}
+
+                <Button
+                  size="sm"
+        
+                  variant="ghost"
+                  className={btnArrowClasses}
+                  onClick={() => table.nextPage()}
+                  disabled={!table.getCanNextPage()}
+                >
+                  <span className="sr-only">Go to next page</span>
+                  <ChevronRightIcon className="size-4" />
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { DataGridPagination, type DataGridPaginationProps };

package/src/components/ui/data-grid-table-dnd-rows.tsx

@@ -0,0 +1,147 @@
+'use client';
+import { CSSProperties, useId } from 'react';
+import { Button } from '../../controls/Button';
+import { useDataGrid } from './data-grid';
+import {
+  DataGridTableBase,
+  DataGridTableBody,
+  DataGridTableBodyRow,
+  DataGridTableBodyRowCell,
+  DataGridTableBodyRowSkeleton,
+  DataGridTableBodyRowSkeletonCell,
+  DataGridTableEmpty,
+  DataGridTableHead,
+  DataGridTableHeadRow,
+  DataGridTableHeadRowCell,
+  DataGridTableHeadRowCellResize,
+  DataGridTableRowSpacer,
+} from './data-grid-table';
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  UniqueIdentifier,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Cell, flexRender, HeaderGroup, Row } from '@tanstack/react-table';
+import { GripHorizontal } from 'lucide-react';
+
+function DataGridTableDndRowHandle({ rowId }: { rowId: string }) {
+  const { attributes, listeners } = useSortable({
+    id: rowId,
+  });
+
+  return (
+    <Button variant="ghost" size="sm" className="size-7" {...attributes} {...listeners}>
+      <GripHorizontal />
+    </Button>
+  );
+}
+
+function DataGridTableDndRow<TData>({ row }: { row: Row<TData> }) {
+  const { transform, transition, setNodeRef, isDragging } = useSortable({
+    id: row.id,
+  });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform), //let dnd-kit do its thing
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: 'relative',
+  };
+  return (
+    <DataGridTableBodyRow row={row} dndRef={setNodeRef} dndStyle={style} key={row.id}>
+      {row.getVisibleCells().map((cell: Cell<TData, unknown>, colIndex) => {
+        return (
+          <DataGridTableBodyRowCell cell={cell} key={colIndex}>
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </DataGridTableBodyRowCell>
+        );
+      })}
+    </DataGridTableBodyRow>
+  );
+}
+
+function DataGridTableDndRows<TData>({
+  handleDragEnd,
+  dataIds,
+}: {
+  handleDragEnd: (event: DragEndEvent) => void;
+  dataIds: UniqueIdentifier[];
+}) {
+  const { table, isLoading, props } = useDataGrid();
+  const pagination = table.getState().pagination;
+
+  const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+
+  return (
+    <DndContext
+      id={useId()}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToVerticalAxis]}
+      onDragEnd={handleDragEnd}
+      sensors={sensors}
+    >
+      <div className="relative">
+        <DataGridTableBase>
+          <DataGridTableHead>
+            {table.getHeaderGroups().map((headerGroup: HeaderGroup<TData>, index) => {
+              return (
+                <DataGridTableHeadRow headerGroup={headerGroup} key={index}>
+                  {headerGroup.headers.map((header, index) => {
+                    const { column } = header;
+
+                    return (
+                      <DataGridTableHeadRowCell header={header} key={index}>
+                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                        {props.tableLayout?.columnsResizable && column.getCanResize() && (
+                          <DataGridTableHeadRowCellResize header={header} />
+                        )}
+                      </DataGridTableHeadRowCell>
+                    );
+                  })}
+                </DataGridTableHeadRow>
+              );
+            })}
+          </DataGridTableHead>
+
+          {(props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && <DataGridTableRowSpacer />}
+
+          <DataGridTableBody>
+            {props.loadingMode === 'skeleton' && isLoading && pagination?.pageSize ? (
+              Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (
+                <DataGridTableBodyRowSkeleton key={rowIndex}>
+                  {table.getVisibleFlatColumns().map((column, colIndex) => {
+                    return (
+                      <DataGridTableBodyRowSkeletonCell column={column} key={colIndex}>
+                        {column.columnDef.meta?.skeleton}
+                      </DataGridTableBodyRowSkeletonCell>
+                    );
+                  })}
+                </DataGridTableBodyRowSkeleton>
+              ))
+            ) : table.getRowModel().rows.length ? (
+              <SortableContext items={dataIds} strategy={verticalListSortingStrategy}>
+                {table.getRowModel().rows.map((row: Row<TData>) => {
+                  return <DataGridTableDndRow row={row} key={row.id} />;
+                })}
+              </SortableContext>
+            ) : (
+              <DataGridTableEmpty />
+            )}
+          </DataGridTableBody>
+        </DataGridTableBase>
+      </div>
+    </DndContext>
+  );
+}
+
+export { DataGridTableDndRowHandle, DataGridTableDndRows };