@eggspot/ui 0.0.0

package/src/components/DataTable/DataTableDisplaySettings.tsx

@@ -0,0 +1,265 @@
+import { useState } from "react"
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import { Button } from "@eggspot/ui/components/Button"
+import {
+  Popover,
+  PopoverDialog,
+  PopoverTrigger,
+} from "@eggspot/ui/components/Popover"
+import { ScrollArea } from "@eggspot/ui/components/ScrollArea"
+import { Switch } from "@eggspot/ui/components/Switch"
+import { cn } from "@eggspot/ui/lib/utils"
+import { Table } from "@tanstack/react-table"
+import { GripVertical, Pin, RotateCcw, Settings2 } from "lucide-react"
+
+import { Heading } from "../Heading"
+
+interface DataTableDisplaySettingsProps<TData> {
+  table: Table<TData>
+  onResetToDefaults: () => void
+}
+
+interface SortableColumnItemProps {
+  id: string
+  label: string
+  isVisible: boolean
+  isPinned: "left" | "right" | false
+  onToggleVisibility?: () => void
+  onPin?: (position: "left" | "right" | false) => void
+  className?: string
+}
+
+function toNormalText(str: string) {
+  return (
+    str
+      // convert camelCase → camel Case
+      .replace(/([a-z])([A-Z])/g, "$1 $2")
+      // replace snake_case and kebab-case
+      .replace(/[-_]/g, " ")
+      // collapse repeated spaces
+      .replace(/\s+/g, " ")
+      .trim()
+      .toLowerCase()
+  )
+}
+
+function SortableColumnItem({
+  id,
+  label,
+  isVisible,
+  isPinned,
+  onToggleVisibility,
+  onPin,
+  className,
+}: SortableColumnItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "flex items-center gap-2 px-2 py-1.5",
+        className,
+        isDragging && "bg-accent-9/30 *:opacity-0"
+      )}
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        className="hover:bg-gray-3 cursor-grab rounded p-1 active:cursor-grabbing"
+      >
+        <GripVertical className="text-gray-11 h-4 w-4" />
+      </button>
+      <span className="flex-1 truncate text-sm capitalize">
+        {toNormalText(label)}
+      </span>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("h-6 w-6 p-0", isPinned === "left" && "text-accent-9")}
+          onClick={() => onPin?.(isPinned === "left" ? false : "left")}
+          tooltip="Pin to left"
+          tooltipDelay={1000}
+        >
+          <Pin className="size-3 rotate-45" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("h-6 w-6 p-0", isPinned === "right" && "text-accent-9")}
+          onClick={() => onPin?.(isPinned === "right" ? false : "right")}
+          tooltip="Pin to right"
+          tooltipDelay={1000}
+        >
+          <Pin className="size-3 -rotate-45" />
+        </Button>
+        <Switch
+          isSelected={isVisible}
+          onChange={onToggleVisibility}
+          className="scale-75"
+        />
+      </div>
+    </div>
+  )
+}
+
+export function DataTableDisplaySettings<TData>({
+  table,
+  onResetToDefaults,
+}: DataTableDisplaySettingsProps<TData>) {
+  const [activeId, setActiveId] = useState<string | null>(null)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
+
+  const allColumns = table
+    .getAllColumns()
+    .filter((column) => column.id !== "select" && column.getCanHide())
+  const totalItemsHeight = allColumns.length * 40 + 8
+
+  const columnOrder = table.getState().columnOrder
+  const orderedColumns =
+    columnOrder.length > 0
+      ? columnOrder
+          .map((id) => allColumns.find((col) => col.id === id))
+          .filter(Boolean)
+      : allColumns
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (over && active.id !== over.id) {
+      setActiveId(null)
+      const oldIndex = columnOrder.indexOf(active.id as string)
+      const newIndex = columnOrder.indexOf(over.id as string)
+      const newOrder = arrayMove(columnOrder, oldIndex, newIndex)
+      table.setColumnOrder(newOrder)
+    }
+  }
+
+  const handleSortStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string)
+  }
+
+  return (
+    <PopoverTrigger>
+      <Button variant="outline" size="sm" className="gap-2">
+        <Settings2 className="h-4 w-4" />
+        Display
+      </Button>
+      <Popover className="w-72 overflow-hidden" placement="bottom right">
+        <PopoverDialog className="p-0">
+          <div className="flex items-center justify-between border-b p-3">
+            <Heading variant="subtitle1">Display Settings</Heading>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8"
+              onClick={onResetToDefaults}
+              leftIcon={<RotateCcw />}
+            >
+              Reset
+            </Button>
+          </div>
+          <ScrollArea
+            className="max-h-[300px]"
+            style={{ height: totalItemsHeight }}
+          >
+            <div className="py-1">
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragStart={handleSortStart}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext
+                  items={orderedColumns.map((col) => col!.id)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  {orderedColumns.map((column) => {
+                    if (!column) return null
+                    return (
+                      <SortableColumnItem
+                        key={column.id}
+                        id={column.id}
+                        label={
+                          typeof column.columnDef.header === "string"
+                            ? column.columnDef.header
+                            : column.id
+                        }
+                        isVisible={column.getIsVisible()}
+                        isPinned={column.getIsPinned()}
+                        onToggleVisibility={() =>
+                          column.toggleVisibility(!column.getIsVisible())
+                        }
+                        onPin={(position) => column.pin(position)}
+                      />
+                    )
+                  })}
+                </SortableContext>
+                <DragOverlay>
+                  {activeId &&
+                  orderedColumns.find((col) => col?.id === activeId) ? (
+                    <SortableColumnItem
+                      id={activeId}
+                      label={activeId}
+                      isVisible={
+                        orderedColumns
+                          .find((col) => col?.id === activeId)
+                          ?.getIsVisible() ?? false
+                      }
+                      isPinned={
+                        orderedColumns
+                          .find((col) => col?.id === activeId)
+                          ?.getIsPinned() ?? false
+                      }
+                      className="bg-gray-3 rounded shadow-sm"
+                    />
+                  ) : null}
+                </DragOverlay>
+              </DndContext>
+            </div>
+          </ScrollArea>
+        </PopoverDialog>
+      </Popover>
+    </PopoverTrigger>
+  )
+}

package/src/components/DataTable/DataTableFloatingBar.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@eggspot/ui/components/Button"
+import { Separator } from "@eggspot/ui/components/Separator"
+import { cn } from "@eggspot/ui/lib/utils"
+import { X } from "lucide-react"
+
+interface DataTableFloatingBarProps {
+  selectedCount: number
+  onClearSelection: () => void
+  children?: React.ReactNode
+}
+
+export function DataTableFloatingBar({
+  selectedCount,
+  onClearSelection,
+  children,
+}: DataTableFloatingBarProps) {
+  if (selectedCount === 0) return null
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-18 left-1/2 z-10 -translate-x-1/2",
+        "bg-gray-2 text-gray-12",
+        "rounded-xl border p-2 shadow-2xl dark:shadow-[0_25px_50px_0px_rgba(0,0,0,0.2),0_15px_25px_-2px_rgba(0,0,0,0.1)]",
+        "flex items-center gap-4",
+        "animate-in fade-in slide-in-from-bottom-4"
+      )}
+    >
+      <div className="flex items-center gap-1.5 pl-2">
+        <span className="text-sm font-medium">{selectedCount} selected</span>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-floating-bar-foreground/70 hover:text-floating-bar-foreground hover:bg-floating-bar-foreground/10 h-7 w-7 p-0"
+          onClick={onClearSelection}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+      <Separator orientation="vertical" className="bg-gray-6 h-6" />
+      <div className="flex items-center gap-2">{children}</div>
+    </div>
+  )
+}

package/src/components/DataTable/DataTablePagination.tsx

@@ -0,0 +1,168 @@
+import { RefObject } from "react"
+import { Button } from "@eggspot/ui/components/Button"
+import { NumberInput } from "@eggspot/ui/components/NumberInput"
+import { Select, SelectOption } from "@eggspot/ui/components/Select"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { useMeasure } from "react-use"
+
+interface DataTablePaginationProps {
+  pageIndex: number
+  pageSize: number
+  totalRows: number
+  onPageChange: (page: number) => void
+  onPageSizeChange: (size: number) => void
+}
+
+const pageSizeOptions: SelectOption<number>[] = [
+  { value: 10, label: "10" },
+  { value: 20, label: "20" },
+  { value: 50, label: "50" },
+  { value: 100, label: "100" },
+  { value: 200, label: "200" },
+  { value: 1000, label: "1000" },
+]
+
+export function DataTablePagination({
+  pageIndex,
+  pageSize,
+  totalRows,
+  onPageChange,
+  onPageSizeChange,
+}: DataTablePaginationProps) {
+  const [containerRef, { width }] = useMeasure()
+  const pageCount = Math.ceil(totalRows / pageSize)
+  const canPreviousPage = pageIndex > 0
+  const canNextPage = pageIndex < pageCount - 1
+
+  const startRow = totalRows && pageIndex * pageSize + 1
+  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows)
+
+  // Generate page numbers with ellipsis
+  const getPageNumbers = () => {
+    const pages: (number | "ellipsis")[] = []
+    const maxVisiblePages = 7
+
+    if (pageCount <= maxVisiblePages) {
+      for (let i = 0; i < pageCount; i++) {
+        pages.push(i)
+      }
+    } else {
+      pages.push(0)
+
+      if (pageIndex <= 2) {
+        // Near start: 1, 2, 3, 4, ..., last
+        for (let i = 1; i < 4; i++) {
+          pages.push(i)
+        }
+        pages.push("ellipsis")
+        pages.push(pageCount - 1)
+      } else if (pageIndex >= pageCount - 3) {
+        // Near end: 1, ..., last-3, last-2, last-1, last
+        pages.push("ellipsis")
+        for (let i = pageCount - 4; i < pageCount; i++) {
+          pages.push(i)
+        }
+      } else {
+        // Middle: 1, ..., prev, current, next, ..., last
+        pages.push("ellipsis")
+        pages.push(pageIndex - 1)
+        pages.push(pageIndex)
+        pages.push(pageIndex + 1)
+        pages.push("ellipsis")
+        pages.push(pageCount - 1)
+      }
+    }
+
+    return pages
+  }
+
+  return (
+    <div
+      ref={containerRef as unknown as RefObject<HTMLDivElement>}
+      className="border-border bg-card flex items-center justify-between border-t px-6 py-2.5"
+    >
+      {/* Per Page Select & Total Rows */}
+      <div className={"flex items-center gap-6 text-sm"}>
+        <div className="flex items-center gap-2">
+          <span className="text-gray-11 whitespace-nowrap">Rows per page</span>
+          <Select
+            triggerClassName="w-[80px]"
+            popoverProps={{ className: "w-[97px]" }}
+            isSearchable={false}
+            isClearable={false}
+            value={pageSizeOptions.find((option) => option.value === pageSize)}
+            onChange={(value) => {
+              onPageSizeChange(value.value)
+            }}
+            options={pageSizeOptions}
+          />
+        </div>
+        {width > 1000 && (
+          <span className="text-gray-11 whitespace-nowrap">
+            Showing {startRow} to {endRow} of {totalRows}
+          </span>
+        )}
+      </div>
+
+      {/* Pagination */}
+      <div className="flex items-center gap-6">
+        {width > 1000 && (
+          <div className="flex items-center gap-1.5">
+            <Button
+              mode="icon"
+              variant="outline"
+              onClick={() => onPageChange(pageIndex - 1)}
+              isDisabled={!canPreviousPage}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+
+            {getPageNumbers().map((page, index) =>
+              page === "ellipsis" ? (
+                <span key={`ellipsis-${index}`} className="text-gray-11 px-2">
+                  ...
+                </span>
+              ) : (
+                <Button
+                  key={page}
+                  mode="icon"
+                  className="transition-none"
+                  onClick={() => onPageChange(page)}
+                  variant={page === pageIndex ? "solid" : "outline"}
+                >
+                  {page + 1}
+                </Button>
+              )
+            )}
+
+            <Button
+              mode="icon"
+              variant="outline"
+              isDisabled={!canNextPage}
+              onClick={() => onPageChange(pageIndex + 1)}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+
+        <div className="flex items-center gap-2">
+          <span className="text-gray-11 text-sm">Go to</span>
+          <NumberInput
+            showStepper
+            minValue={1}
+            maxValue={pageCount}
+            value={pageIndex + 1}
+            onChange={(value) => onPageChange(value - 1)}
+            className="h-8 w-16 text-center"
+            aria-label="Go to page"
+            onFocus={(e) => {
+              const input = e.target as HTMLInputElement
+              input.select()
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/DataTable/DataTableStates.tsx

@@ -0,0 +1,69 @@
+import { Button } from "@eggspot/ui/components/Button"
+import { AlertCircle, Inbox } from "lucide-react"
+
+import { Spinner } from "../Spinner"
+
+function StatesContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <tbody>
+      <tr className="h-20">
+        <td className="absolute inset-0 top-10 flex flex-col items-center pt-20">
+          {children}
+        </td>
+      </tr>
+    </tbody>
+  )
+}
+
+export function DataTableLoading() {
+  return (
+    <StatesContainer>
+      <Spinner className="mb-4 size-7" />
+    </StatesContainer>
+  )
+}
+
+interface DataTableEmptyProps {
+  title?: string
+  description?: string
+}
+
+export function DataTableEmpty({
+  title = "No results found",
+  description = "Try adjusting your search or filters to find what you're looking for.",
+}: DataTableEmptyProps) {
+  return (
+    <StatesContainer>
+      <div className="bg-gray-3 mb-3 rounded-lg p-3">
+        <Inbox className="size-7 stroke-[1.5px]" />
+      </div>
+      <h3 className="mb-1 text-lg font-semibold">{title}</h3>
+      <p className="text-gray-11 max-w-sm text-center">{description}</p>
+    </StatesContainer>
+  )
+}
+
+interface DataTableErrorProps {
+  message?: string
+  onRetry?: () => void
+}
+
+export function DataTableError({
+  message = "Something went wrong while loading the data.",
+  onRetry,
+}: DataTableErrorProps) {
+  return (
+    <StatesContainer>
+      <div className="bg-error-9/10 mb-3 rounded-lg p-3">
+        <AlertCircle className="text-error-11 size-7 stroke-[1.5px]" />
+      </div>
+      <h3 className="mb-1 text-lg font-semibold">Error loading data</h3>
+      <p className="text-gray-11 mb-4 max-w-sm text-center">{message}</p>
+      {onRetry && (
+        <Button variant="outline" onClick={onRetry}>
+          Try again
+        </Button>
+      )}
+    </StatesContainer>
+  )
+}

package/src/components/DataTable/DataTableToolbarContainer.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react"
+import { Table } from "@tanstack/react-table"
+
+import { DebouncedSearchInput } from "../Input"
+import { Separator } from "../Separator"
+
+interface DataTableToolbarContainerProps<TData> {
+  children: React.ReactNode
+  table: Table<TData>
+}
+
+export function DataTableToolbarContainer<TData>({
+  children,
+  table,
+}: DataTableToolbarContainerProps<TData>) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  // TODO: implement the logic to open and close the toolbar
+  return (
+    <div className="border-b" data-state={isOpen ? "open" : "closed"}>
+      <div className="flex items-center px-5">
+        {/* <Button
+          size="sm"
+          mode="icon"
+          variant="ghost"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          {isOpen ? <Minimize2Icon /> : <Maximize2Icon />}
+        </Button> */}
+        <div className="flex-1">
+          <DebouncedSearchInput
+            className="h-10 rounded-none bg-transparent ring-0!"
+            value={table.getState().globalFilter}
+            onChange={(v) => {
+              table.setGlobalFilter(v)
+            }}
+            placeholder="Search users by name, email, role..."
+          />
+        </div>
+      </div>
+      <Separator />
+      <div className="flex items-center justify-between px-6 py-1.5">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/DataTable/hooks/use-data-table-settings.ts

@@ -0,0 +1,101 @@
+import { useCallback, useEffect, useState } from "react"
+import {
+  ColumnPinningState,
+  ColumnSizingState,
+  VisibilityState,
+} from "@tanstack/react-table"
+
+import { DisplaySettings } from "../types/data-table"
+
+const STORAGE_PREFIX = "data-table-settings-"
+
+interface UseDataTableSettingsProps {
+  storageKey: string
+  defaultColumnVisibility?: VisibilityState
+  defaultColumnSizing?: ColumnSizingState
+  defaultColumnPinning?: ColumnPinningState
+  defaultColumnOrder?: string[]
+}
+
+export function useDataTableSettings({
+  storageKey,
+  defaultColumnVisibility = {},
+  defaultColumnSizing = {},
+  defaultColumnPinning = { left: [], right: [] },
+  defaultColumnOrder = [],
+}: UseDataTableSettingsProps) {
+  const fullStorageKey = STORAGE_PREFIX + storageKey
+
+  const getStoredSettings = useCallback((): DisplaySettings | null => {
+    try {
+      const stored = localStorage.getItem(fullStorageKey)
+      if (stored) {
+        return JSON.parse(stored)
+      }
+    } catch (error) {
+      console.error("Failed to parse stored settings:", error)
+    }
+    return null
+  }, [fullStorageKey])
+
+  const [settings, setSettings] = useState<DisplaySettings>(() => {
+    const stored = getStoredSettings()
+    return (
+      stored || {
+        columnVisibility: defaultColumnVisibility,
+        columnSizing: defaultColumnSizing,
+        columnPinning: defaultColumnPinning,
+        columnOrder: defaultColumnOrder,
+      }
+    )
+  })
+
+  // Persist settings to localStorage
+  useEffect(() => {
+    try {
+      localStorage.setItem(fullStorageKey, JSON.stringify(settings))
+    } catch (error) {
+      console.error("Failed to save settings:", error)
+    }
+  }, [settings, fullStorageKey])
+
+  const updateColumnVisibility = useCallback((visibility: VisibilityState) => {
+    setSettings((prev) => ({ ...prev, columnVisibility: visibility }))
+  }, [])
+
+  const updateColumnSizing = useCallback((sizing: ColumnSizingState) => {
+    setSettings((prev) => ({ ...prev, columnSizing: sizing }))
+  }, [])
+
+  const updateColumnPinning = useCallback((pinning: ColumnPinningState) => {
+    setSettings((prev) => ({ ...prev, columnPinning: pinning }))
+  }, [])
+
+  const updateColumnOrder = useCallback((order: string[]) => {
+    setSettings((prev) => ({ ...prev, columnOrder: order }))
+  }, [])
+
+  const resetToDefaults = useCallback(() => {
+    const defaults: DisplaySettings = {
+      columnVisibility: defaultColumnVisibility,
+      columnSizing: defaultColumnSizing,
+      columnPinning: defaultColumnPinning,
+      columnOrder: defaultColumnOrder,
+    }
+    setSettings(defaults)
+  }, [
+    defaultColumnVisibility,
+    defaultColumnSizing,
+    defaultColumnPinning,
+    defaultColumnOrder,
+  ])
+
+  return {
+    settings,
+    updateColumnVisibility,
+    updateColumnSizing,
+    updateColumnPinning,
+    updateColumnOrder,
+    resetToDefaults,
+  }
+}

package/src/components/DataTable/index.ts

@@ -0,0 +1,7 @@
+export { DataTable } from "./DataTable"
+export { DataTableColumnHeader } from "./DataTableColumnHeader"
+export type {
+  DataTableProps,
+  BulkAction,
+  SortingState,
+} from "./types/data-table"