@eggspot/ui 0.0.2 → 0.0.3

package/src/components/DataTable/DataTableDisplaySettings.tsx

@@ -1,265 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

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