@eggspot/ui 0.0.2 → 0.0.3

package/src/components/DataTable/DataTable.tsx

@@ -1,557 +0,0 @@
-import { memo, RefObject, useEffect, useMemo, useRef } from "react"
-import { Checkbox } from "@eggspot/ui/components/Checkbox"
-import { DataTableProps } from "@eggspot/ui/components/DataTable/types/data-table"
-import { cn } from "@eggspot/ui/lib/utils"
-import {
-  Cell,
-  ColumnDef,
-  ColumnPinningState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  Header,
-  Table,
-  useReactTable,
-} from "@tanstack/react-table"
-import { useVirtualizer } from "@tanstack/react-virtual"
-
-import { FilterValue } from "../Filter"
-import { DataTableDisplaySettings } from "./DataTableDisplaySettings"
-import { DataTableFloatingBar } from "./DataTableFloatingBar"
-import { DataTablePagination } from "./DataTablePagination"
-import {
-  DataTableEmpty,
-  DataTableError,
-  DataTableLoading,
-} from "./DataTableStates"
-import { DataTableToolbarContainer } from "./DataTableToolbarContainer"
-import { useDataTableSettings } from "./hooks/use-data-table-settings"
-
-function HeaderCell({
-  header,
-  isPinned,
-}: {
-  header: Header<any, any>
-  isPinned?: "left" | "right"
-}) {
-  const isResizing = header.column.getIsResizing()
-  return (
-    <th
-      key={header.id}
-      className={cn(
-        "text-gray-11 bg-gray-4 relative h-11 px-4 text-left align-middle font-semibold",
-        isPinned === "left" &&
-          "sticky left-0 z-20 shadow-[-6px_0_2px_-6px_var(--gray-6)_inset]",
-        isPinned === "right" &&
-          "sticky right-0 z-20 shadow-[6px_0_2px_-6px_var(--gray-6)_inset]",
-        header.column.getCanResize() && "group"
-      )}
-      style={{
-        width: header.getSize(),
-        minWidth: header.column.columnDef.minSize,
-        maxWidth: header.column.columnDef.maxSize,
-        ...(isPinned === "left" && {
-          left: header.column.getStart("left"),
-        }),
-        ...(isPinned === "right" && {
-          right: header.column.getAfter("right"),
-        }),
-      }}
-    >
-      {header.isPlaceholder
-        ? null
-        : flexRender(header.column.columnDef.header, header.getContext())}
-      {header.column.getCanResize() && (
-        <div
-          data-slot="data-table-resize-handle"
-          onMouseDown={header.getResizeHandler()}
-          onTouchStart={header.getResizeHandler()}
-          className={cn(
-            "group/resize-handle absolute top-0 right-0 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none"
-          )}
-        >
-          <div
-            className={cn(
-              "bg-gray-7 group-hover/resize-handle:bg-gray-11 h-6 w-px transition-colors duration-150",
-              isResizing && "bg-accent-9!"
-            )}
-          />
-        </div>
-      )}
-    </th>
-  )
-}
-
-function TableCell({
-  cell,
-  isPinned,
-}: {
-  cell: Cell<any, any>
-  isPinned?: "left" | "right"
-}) {
-  return (
-    <td
-      key={cell.id}
-      title={cell.getValue()}
-      className={cn(
-        "group-hover:bg-gray-3 truncate px-4 py-1 align-middle text-sm",
-        "group-data-[state=selected]:bg-gray-4",
-        isPinned === "left" &&
-          "bg-gray-2 group-data-[state=selected]:bg-gray-5 sticky left-0 z-10 shadow-[-6px_0_2px_-6px_var(--gray-6)_inset]",
-        isPinned === "right" &&
-          "bg-gray-2 group-data-[state=selected]:bg-gray-5 sticky right-0 z-10 shadow-[6px_0_2px_-6px_var(--gray-6)_inset]"
-      )}
-      style={{
-        width: cell.column.getSize(),
-        minWidth: cell.column.columnDef.minSize,
-        maxWidth: cell.column.columnDef.maxSize,
-        ...(isPinned === "left" && {
-          left: cell.column.getStart("left"),
-        }),
-        ...(isPinned === "right" && {
-          right: cell.column.getAfter("right"),
-        }),
-      }}
-    >
-      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-    </td>
-  )
-}
-
-function TableBody({
-  table,
-  tableContainerRef,
-  estimatedRowHeight,
-}: {
-  table: Table<any>
-  tableContainerRef: RefObject<HTMLDivElement | null>
-  estimatedRowHeight: number
-}) {
-  const { rows } = table.getRowModel()
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    getScrollElement: () => tableContainerRef.current,
-    estimateSize: () => estimatedRowHeight,
-    overscan: 10,
-  })
-
-  const virtualRows = rowVirtualizer.getVirtualItems()
-  const totalSize = rowVirtualizer.getTotalSize()
-
-  const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start || 0 : 0
-  const paddingBottom =
-    virtualRows.length > 0
-      ? totalSize - (virtualRows[virtualRows.length - 1]?.end || 0)
-      : 0
-
-  const leftPinnedColumns = table.getLeftVisibleLeafColumns()
-  const rightPinnedColumns = table.getRightVisibleLeafColumns()
-  const centerColumns = table.getCenterVisibleLeafColumns()
-
-  return (
-    <tbody>
-      {paddingTop > 0 && (
-        <tr>
-          <td style={{ height: `${paddingTop}px` }} />
-        </tr>
-      )}
-      {virtualRows.map((virtualRow) => {
-        const row = rows[virtualRow.index]
-
-        if (!row) return null
-
-        const isSelected = row.getIsSelected()
-
-        return (
-          <tr
-            key={row.id}
-            data-state={isSelected ? "selected" : undefined}
-            className={cn(
-              "group border-gray-3 h-11 border-b transition-colors"
-            )}
-          >
-            {leftPinnedColumns.map((column) => {
-              const cell = row
-                .getVisibleCells()
-                .find((c) => c.column.id === column.id)
-              return cell ? (
-                <TableCell key={cell.id} cell={cell} isPinned="left" />
-              ) : null
-            })}
-            {centerColumns.map((column) => {
-              const cell = row
-                .getVisibleCells()
-                .find((c) => c.column.id === column.id)
-              return cell ? <TableCell key={cell.id} cell={cell} /> : null
-            })}
-            {rightPinnedColumns.map((column) => {
-              const cell = row
-                .getVisibleCells()
-                .find((c) => c.column.id === column.id)
-              return cell ? (
-                <TableCell key={cell.id} cell={cell} isPinned="right" />
-              ) : null
-            })}
-          </tr>
-        )
-      })}
-      {paddingBottom > 0 && (
-        <tr>
-          <td style={{ height: `${paddingBottom}px` }} />
-        </tr>
-      )}
-    </tbody>
-  )
-}
-
-const MemoizedTableBody = memo(
-  TableBody,
-  (prev, next) => prev.table.options.data === next.table.options.data
-) as typeof TableBody
-
-export function DataTable<TData extends { id: string | number }>({
-  // Core data
-  columns,
-  data,
-  dataSource = "server",
-
-  // Loading/error states
-  isLoading = false,
-  isFetching,
-  isError = false,
-  errorMessage,
-
-  // Components
-  filterBar,
-  actionBar,
-
-  // State for server-side operations
-  initialState,
-  onStateChange,
-  rowCount,
-
-  // Selection
-  enableRowSelection = true,
-
-  // Display settings
-  storageKey = "default-table",
-  defaultColumnVisibility = {},
-  defaultColumnSizing = {},
-  defaultColumnPinning = { left: [], right: [] },
-  defaultColumnOrder,
-
-  // Virtualization
-  estimatedRowHeight = 44,
-
-  // Custom empty state
-  emptyStateTitle,
-  emptyStateDescription,
-}: DataTableProps<TData>) {
-  const rendered = useRef(false)
-  const tableContainerRef = useRef<HTMLDivElement>(null)
-
-  // Calculate default column order from columns if not provided
-  const calculatedDefaultOrder = useMemo(() => {
-    if (defaultColumnOrder) return defaultColumnOrder
-    return [
-      "select",
-      ...(columns
-        .map(
-          (col) =>
-            (col as { accessorKey?: string }).accessorKey ||
-            (col as { id?: string }).id
-        )
-        .filter(Boolean) as string[]),
-    ]
-  }, [columns, defaultColumnOrder])
-
-  const {
-    settings,
-    updateColumnVisibility,
-    updateColumnSizing,
-    updateColumnPinning,
-    updateColumnOrder,
-    resetToDefaults,
-  } = useDataTableSettings({
-    storageKey,
-    defaultColumnVisibility,
-    defaultColumnSizing,
-    defaultColumnPinning,
-    defaultColumnOrder: calculatedDefaultOrder,
-  })
-
-  // Selection column
-  const selectionColumn: ColumnDef<TData> = {
-    id: "select",
-    size: 48,
-    minSize: 48,
-    maxSize: 48,
-    enableResizing: false,
-    enableSorting: false,
-    enableHiding: false,
-    header: ({ table }) => {
-      return (
-        <div className="flex items-center justify-center">
-          <Checkbox
-            isSelected={table.getIsAllPageRowsSelected()}
-            isIndeterminate={table.getIsSomePageRowsSelected()}
-            onChange={(isSelected) => {
-              table.toggleAllPageRowsSelected(isSelected)
-            }}
-            aria-label="Select all"
-            className="translate-y-[2px]"
-          />
-        </div>
-      )
-    },
-    cell: ({ row }) => (
-      <div className="flex items-center justify-center">
-        <Checkbox
-          isSelected={row.getIsSelected()}
-          isDisabled={!row.getCanSelect()}
-          isIndeterminate={row.getIsSomeSelected()}
-          onChange={row.getToggleSelectedHandler()}
-          aria-label="Select row"
-          className="translate-y-[2px]"
-        />
-      </div>
-    ),
-  }
-
-  const allColumns = useMemo(() => {
-    if (enableRowSelection) {
-      return [selectionColumn, ...columns]
-    }
-    return columns
-  }, [columns, enableRowSelection])
-
-  // Always pin selection column to the left
-  const columnPinning = useMemo((): ColumnPinningState => {
-    const left = settings.columnPinning.left || []
-    const right = settings.columnPinning.right || []
-
-    // Ensure "select" is always first in left pinned columns when row selection is enabled
-    if (enableRowSelection && !left.includes("select")) {
-      return { left: ["select", ...left], right }
-    }
-    return { left, right }
-  }, [settings.columnPinning, enableRowSelection])
-
-  const table = useReactTable({
-    data,
-    columns: allColumns,
-    initialState: {
-      pagination: {
-        pageSize: 20,
-      },
-      ...initialState,
-    },
-    rowCount: rowCount,
-    state: {
-      columnVisibility: settings.columnVisibility,
-      columnSizing: settings.columnSizing,
-      columnPinning,
-      columnOrder:
-        settings.columnOrder.length > 0
-          ? settings.columnOrder
-          : calculatedDefaultOrder,
-    },
-    enableColumnResizing: true,
-    columnResizeMode: "onChange",
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    globalFilterFn: "auto",
-    onColumnVisibilityChange: (updater) => {
-      const newVisibility =
-        typeof updater === "function"
-          ? updater(settings.columnVisibility)
-          : updater
-      updateColumnVisibility(newVisibility)
-    },
-    onColumnSizingChange: (updater) => {
-      const newSizing =
-        typeof updater === "function" ? updater(settings.columnSizing) : updater
-      updateColumnSizing(newSizing)
-    },
-    onColumnPinningChange: (updater) => {
-      const newPinning =
-        typeof updater === "function"
-          ? updater(settings.columnPinning)
-          : updater
-      updateColumnPinning(newPinning)
-    },
-    onColumnOrderChange: (updater) => {
-      const newOrder =
-        typeof updater === "function" ? updater(settings.columnOrder) : updater
-      updateColumnOrder(newOrder)
-    },
-    getRowId: (row) => String(row.id),
-    manualPagination: dataSource === "server",
-    manualFiltering: dataSource === "server",
-    manualSorting: dataSource === "server",
-  })
-
-  const { rows } = table.getRowModel()
-
-  // Get pinned and center columns
-  const leftPinnedColumns = table.getLeftVisibleLeafColumns()
-  const rightPinnedColumns = table.getRightVisibleLeafColumns()
-  const centerColumns = table.getCenterVisibleLeafColumns()
-
-  const state = table.getState()
-
-  // column filters props (client side)
-  const columnFilters: FilterValue = useMemo(
-    () =>
-      state.columnFilters.reduce((acc, filter) => {
-        try {
-          acc[filter.id] = filter.value as any
-          return acc
-        } catch (error) {
-          return acc
-        }
-      }, {} as FilterValue),
-    [state.columnFilters]
-  )
-  const setColumnFilters = (filters: FilterValue) => {
-    table.setColumnFilters(
-      Object.entries(filters).map(([id, value]) => ({ id, value }))
-    )
-  }
-
-  // Notify parent of filters change
-  useEffect(() => {
-    onStateChange?.(state)
-
-    setTimeout(() => {
-      rendered.current = true
-    }, 200)
-
-    if (rendered.current) {
-      table.setPageIndex(0)
-    }
-  }, [
-    state.pagination.pageSize,
-    state.sorting,
-    state.globalFilter,
-    state.columnFilters,
-  ])
-
-  // Notify parent of page index change
-  useEffect(() => {
-    onStateChange?.(state)
-  }, [state.pagination.pageIndex])
-
-  const clearSelection = () => {
-    table.resetRowSelection()
-  }
-
-  return (
-    <div className="flex h-full flex-col overflow-hidden">
-      {/* Toolbar */}
-      <DataTableToolbarContainer table={table}>
-        <div>
-          {filterBar?.({ value: columnFilters, onChange: setColumnFilters })}
-        </div>
-        <DataTableDisplaySettings
-          table={table}
-          onResetToDefaults={resetToDefaults}
-        />
-      </DataTableToolbarContainer>
-
-      {/* Table Container */}
-      <div ref={tableContainerRef} className="relative flex-1 overflow-auto">
-        <table
-          data-fetching={isFetching ? "true" : undefined}
-          className="w-full table-fixed border-collapse data-[fetching=true]:opacity-60"
-        >
-          <thead className="sticky top-0 z-30">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id}>
-                {leftPinnedColumns.map((column) => {
-                  const header = headerGroup.headers.find(
-                    (h) => h.column.id === column.id
-                  )
-                  return header ? (
-                    <HeaderCell
-                      key={header.id}
-                      header={header}
-                      isPinned="left"
-                    />
-                  ) : null
-                })}
-                {centerColumns.map((column) => {
-                  const header = headerGroup.headers.find(
-                    (h) => h.column.id === column.id
-                  )
-                  return header ? (
-                    <HeaderCell key={header.id} header={header} />
-                  ) : null
-                })}
-                {rightPinnedColumns.map((column) => {
-                  const header = headerGroup.headers.find(
-                    (h) => h.column.id === column.id
-                  )
-                  return header ? (
-                    <HeaderCell
-                      key={header.id}
-                      header={header}
-                      isPinned="right"
-                    />
-                  ) : null
-                })}
-              </tr>
-            ))}
-          </thead>
-          {isLoading ? (
-            <DataTableLoading />
-          ) : isError ? (
-            <DataTableError message={errorMessage} />
-          ) : rows.length === 0 ? (
-            <DataTableEmpty
-              title={emptyStateTitle}
-              description={emptyStateDescription}
-            />
-          ) : (
-            <>
-              {table.getState().columnSizingInfo.isResizingColumn ? (
-                <MemoizedTableBody
-                  table={table}
-                  tableContainerRef={tableContainerRef}
-                  estimatedRowHeight={estimatedRowHeight}
-                />
-              ) : (
-                <TableBody
-                  table={table}
-                  tableContainerRef={tableContainerRef}
-                  estimatedRowHeight={estimatedRowHeight}
-                />
-              )}
-            </>
-          )}
-        </table>
-      </div>
-
-      <DataTablePagination
-        pageIndex={table.getState().pagination.pageIndex}
-        pageSize={table.getState().pagination.pageSize}
-        totalRows={table.getRowCount()}
-        onPageChange={table.setPageIndex}
-        onPageSizeChange={table.setPageSize}
-      />
-
-      {actionBar && enableRowSelection && (
-        <DataTableFloatingBar
-          selectedCount={Object.keys(table.getState().rowSelection).length}
-          onClearSelection={clearSelection}
-        >
-          {actionBar?.({ table, clearSelection })}
-        </DataTableFloatingBar>
-      )}
-    </div>
-  )
-}

package/src/components/DataTable/DataTableColumnHeader.tsx

@@ -1,122 +0,0 @@
-import { Button } from "@eggspot/ui/components/Button"
-import { cn } from "@eggspot/ui/lib/utils"
-import { Column } from "@tanstack/react-table"
-import {
-  ArrowDown,
-  ArrowUp,
-  ArrowUpDown,
-  EyeOff,
-  Pin,
-  PinOff,
-} from "lucide-react"
-
-import {
-  Menu,
-  MenuItem,
-  MenuPopover,
-  MenuSeparator,
-  MenuTrigger,
-} from "../Menu"
-
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>
-  title: string
-  enableSorting?: boolean
-  enablePinning?: boolean
-  enableHiding?: boolean
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-  enableSorting = true,
-  enablePinning = true,
-  enableHiding = true,
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  const isSorted = column.getIsSorted()
-  const isPinned = column.getIsPinned()
-
-  if (!enableSorting && !enablePinning && !enableHiding) {
-    return <div className={cn("flex items-center", className)}>{title}</div>
-  }
-
-  return (
-    <div className={cn("flex items-center gap-1", className)}>
-      <MenuTrigger>
-        <Button
-          variant="ghost"
-          size="sm"
-          className={cn(
-            "text-gray-11 hover:bg-gray-5! hover:text-gray-12 aria-expanded:bg-gray-5! aria-expanded:text-gray-12 -ml-2 h-8 transition-colors",
-            isSorted && "text-gray-12 font-semibold"
-          )}
-          rightIcon={
-            isSorted === "desc" ? (
-              <ArrowDown />
-            ) : isSorted === "asc" ? (
-              <ArrowUp />
-            ) : (
-              <ArrowUpDown />
-            )
-          }
-        >
-          {title}
-        </Button>
-        <MenuPopover>
-          <Menu>
-            {enableSorting && (
-              <>
-                <MenuItem onClick={() => column.toggleSorting(false)}>
-                  <ArrowUp className="text-gray-11 mr-2 h-3.5 w-3.5" />
-                  Sort ascending
-                </MenuItem>
-                <MenuItem onClick={() => column.toggleSorting(true)}>
-                  <ArrowDown className="text-gray-11 mr-2 h-3.5 w-3.5" />
-                  Sort descending
-                </MenuItem>
-                {isSorted && (
-                  <MenuItem onClick={() => column.clearSorting()}>
-                    <ArrowUpDown className="text-gray-11 mr-2 h-3.5 w-3.5" />
-                    Clear sorting
-                  </MenuItem>
-                )}
-                {(enablePinning || enableHiding) && <MenuSeparator />}
-              </>
-            )}
-            {enablePinning && (
-              <>
-                {isPinned !== "left" && (
-                  <MenuItem onClick={() => column.pin("left")}>
-                    <Pin className="text-gray-11 mr-2 h-3.5 w-3.5 rotate-45" />
-                    Pin to left
-                  </MenuItem>
-                )}
-                {isPinned !== "right" && (
-                  <MenuItem onClick={() => column.pin("right")}>
-                    <Pin className="text-gray-11 mr-2 h-3.5 w-3.5 -rotate-45" />
-                    Pin to right
-                  </MenuItem>
-                )}
-                {isPinned && (
-                  <MenuItem onClick={() => column.pin(false)}>
-                    <PinOff className="text-gray-11 mr-2 h-3.5 w-3.5" />
-                    Unpin column
-                  </MenuItem>
-                )}
-                {enableHiding && <MenuSeparator />}
-              </>
-            )}
-            {enableHiding && (
-              <MenuItem onClick={() => column.toggleVisibility(false)}>
-                <EyeOff className="text-gray-11 mr-2 h-3.5 w-3.5" />
-                Hide column
-              </MenuItem>
-            )}
-          </Menu>
-        </MenuPopover>
-      </MenuTrigger>
-    </div>
-  )
-}