@startsimpli/ui 0.1.0

package/src/components/unified-table/components/Toolbar/SavedViewsDropdown.tsx

@@ -0,0 +1,251 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '../../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../../../ui/dialog'
+import { Input } from '../../../ui/input'
+import { Label } from '../../../ui/label'
+import { Checkbox } from '../../../ui/checkbox'
+import { BookmarkPlus, ChevronDown, Check, Trash2, Star } from 'lucide-react'
+import { SavedView } from '../../types'
+import { cn } from '../../../../lib/utils'
+
+export interface SavedViewsDropdownProps {
+  views: SavedView[]
+  currentViewId?: string | null
+  onSaveView: (view: Omit<SavedView, 'id' | 'createdAt'>) => Promise<SavedView>
+  onUpdateView?: (viewId: string, updates: Partial<SavedView>) => Promise<void>
+  onDeleteView?: (viewId: string) => Promise<void>
+  onLoadView: (viewId: string) => void
+  // Current state to save
+  getCurrentViewState: () => Omit<SavedView, 'id' | 'name' | 'createdAt'>
+}
+
+export function SavedViewsDropdown({
+  views,
+  currentViewId,
+  onSaveView,
+  onUpdateView,
+  onDeleteView,
+  onLoadView,
+  getCurrentViewState,
+}: SavedViewsDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false)
+  const [viewName, setViewName] = useState('')
+  const [isDefault, setIsDefault] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
+
+  const currentView = views.find(v => v.id === currentViewId)
+
+  const handleSaveView = async () => {
+    if (!viewName.trim()) return
+
+    setIsSaving(true)
+    try {
+      const viewState = getCurrentViewState()
+      await onSaveView({
+        name: viewName.trim(),
+        isDefault,
+        ...viewState,
+      })
+      setIsSaveDialogOpen(false)
+      setViewName('')
+      setIsDefault(false)
+    } catch (error) {
+      console.error('Failed to save view:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  const handleDeleteView = async (viewId: string) => {
+    if (!onDeleteView) return
+
+    try {
+      await onDeleteView(viewId)
+      setDeleteConfirmId(null)
+    } catch (error) {
+      console.error('Failed to delete view:', error)
+    }
+  }
+
+  const handleSetDefault = async (viewId: string) => {
+    if (!onUpdateView) return
+
+    try {
+      // Remove default from all other views
+      for (const view of views) {
+        if (view.isDefault && view.id !== viewId) {
+          await onUpdateView(view.id, { isDefault: false })
+        }
+      }
+      // Set this view as default
+      await onUpdateView(viewId, { isDefault: true })
+    } catch (error) {
+      console.error('Failed to set default view:', error)
+    }
+  }
+
+  return (
+    <>
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm">
+            <BookmarkPlus className="mr-2 h-4 w-4" />
+            {currentView ? currentView.name : 'Views'}
+            <ChevronDown className="ml-2 h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuLabel>Saved Views</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+
+          {views.length === 0 ? (
+            <DropdownMenuItem disabled>
+              No saved views
+            </DropdownMenuItem>
+          ) : (
+            views.map((view) => (
+              <DropdownMenuItem
+                key={view.id}
+                className="flex items-center justify-between cursor-pointer"
+                onSelect={(e) => {
+                  e.preventDefault()
+                  if (deleteConfirmId === view.id) return
+                  onLoadView(view.id)
+                  setIsOpen(false)
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  {currentViewId === view.id && (
+                    <Check className="h-4 w-4 text-primary" />
+                  )}
+                  {currentViewId !== view.id && <div className="w-4" />}
+                  <span>{view.name}</span>
+                  {view.isDefault && (
+                    <Star className="h-3 w-3 text-yellow-500 fill-yellow-500" />
+                  )}
+                </div>
+                <div className="flex items-center gap-1">
+                  {onUpdateView && !view.isDefault && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleSetDefault(view.id)
+                      }}
+                      className="p-1 hover:bg-muted rounded opacity-50 hover:opacity-100"
+                      title="Set as default"
+                    >
+                      <Star className="h-3 w-3" />
+                    </button>
+                  )}
+                  {onDeleteView && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        if (deleteConfirmId === view.id) {
+                          handleDeleteView(view.id)
+                        } else {
+                          setDeleteConfirmId(view.id)
+                          setTimeout(() => setDeleteConfirmId(null), 3000)
+                        }
+                      }}
+                      className={cn(
+                        'p-1 hover:bg-muted rounded',
+                        deleteConfirmId === view.id
+                          ? 'text-red-600 hover:text-red-700'
+                          : 'opacity-50 hover:opacity-100'
+                      )}
+                      title={deleteConfirmId === view.id ? 'Click again to confirm' : 'Delete view'}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </button>
+                  )}
+                </div>
+              </DropdownMenuItem>
+            ))
+          )}
+
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={(e) => {
+              e.preventDefault()
+              setIsSaveDialogOpen(true)
+              setIsOpen(false)
+            }}
+          >
+            <BookmarkPlus className="mr-2 h-4 w-4" />
+            Save Current View
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <Dialog open={isSaveDialogOpen} onOpenChange={setIsSaveDialogOpen}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Save View</DialogTitle>
+            <DialogDescription>
+              Save your current table configuration as a named view.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="view-name">View Name</Label>
+              <Input
+                id="view-name"
+                value={viewName}
+                onChange={(e) => setViewName(e.target.value)}
+                placeholder="My Custom View"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleSaveView()
+                }}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="is-default"
+                checked={isDefault}
+                onCheckedChange={(checked) => setIsDefault(checked === true)}
+              />
+              <Label htmlFor="is-default" className="cursor-pointer">
+                Set as default view
+              </Label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsSaveDialogOpen(false)}
+              disabled={isSaving}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleSaveView}
+              disabled={!viewName.trim() || isSaving}
+            >
+              {isSaving ? 'Saving...' : 'Save View'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/components/unified-table/components/Toolbar/StandardTableToolbar.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { Input } from '../../../ui/input'
+import { Button } from '../../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu'
+import { Columns3, ChevronDown } from 'lucide-react'
+import { cn } from '../../../../lib/utils'
+import { ExportButton, ExportButtonProps } from './ExportButton'
+import { SavedViewsDropdown, SavedViewsDropdownProps } from './SavedViewsDropdown'
+import { ColumnConfig, ColumnVisibilityState, SavedView } from '../../types'
+import { RefObject } from 'react'
+
+export interface StandardTableToolbarProps<TData> {
+  // Search
+  searchEnabled?: boolean
+  searchPlaceholder?: string
+  searchValue?: string
+  onSearchChange?: (value: string) => void
+  searchInputRef?: RefObject<HTMLInputElement>
+  searchAutoFocus?: boolean
+
+  // Column visibility
+  columnVisibilityEnabled?: boolean
+  hideableColumns?: ColumnConfig<TData>[]
+  columnVisibility?: ColumnVisibilityState
+  onToggleColumnVisibility?: (columnId: string) => void
+
+  // Export
+  exportEnabled?: boolean
+  exportProps?: Omit<ExportButtonProps<TData>, 'data' | 'columns'>
+  exportData?: TData[]
+  exportColumns?: ColumnConfig<TData>[]
+
+  // Saved views
+  savedViewsEnabled?: boolean
+  savedViews?: SavedView[]
+  currentViewId?: string | null
+  savedViewsProps?: Omit<SavedViewsDropdownProps, 'views' | 'currentViewId'>
+
+  className?: string
+}
+
+/**
+ * StandardTableToolbar provides a consistent toolbar layout across all tables.
+ *
+ * Layout (left to right):
+ * - Search input (left)
+ * - Export button
+ * - Columns dropdown (right)
+ */
+export function StandardTableToolbar<TData>({
+  searchEnabled,
+  searchPlaceholder = 'Search...',
+  searchValue = '',
+  onSearchChange,
+  searchInputRef,
+  searchAutoFocus,
+  columnVisibilityEnabled,
+  hideableColumns = [],
+  columnVisibility = {},
+  onToggleColumnVisibility,
+  exportEnabled,
+  exportProps,
+  exportData = [],
+  exportColumns = [],
+  savedViewsEnabled,
+  savedViews = [],
+  currentViewId,
+  savedViewsProps,
+  className,
+}: StandardTableToolbarProps<TData>) {
+  const hasRightSideButtons = exportEnabled || columnVisibilityEnabled || savedViewsEnabled
+
+  return (
+    <div className={cn('flex items-center justify-between gap-4', className)}>
+      {/* Left side: Search */}
+      <div className="flex items-center gap-3 flex-1">
+        {searchEnabled ? (
+          <Input
+            type="text"
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            onChange={(e) => onSearchChange?.(e.target.value)}
+            ref={searchInputRef}
+            autoFocus={searchAutoFocus}
+            className="max-w-xl w-full"
+          />
+        ) : (
+          <div /> // Spacer
+        )}
+      </div>
+
+      {/* Right side: Toolbar buttons */}
+      {hasRightSideButtons && (
+        <div className="flex items-center gap-2">
+          {/* Export button */}
+          {exportEnabled && exportProps && (
+            <ExportButton
+              data={exportData}
+              columns={exportColumns}
+              {...exportProps}
+            />
+          )}
+
+          {/* Column visibility dropdown */}
+          {columnVisibilityEnabled && hideableColumns.length > 0 && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Columns3 className="mr-2 h-4 w-4" />
+                  Columns
+                  <ChevronDown className="ml-2 h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                {hideableColumns.map((column) => (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    checked={columnVisibility[column.id] !== false}
+                    onCheckedChange={() => onToggleColumnVisibility?.(column.id)}
+                  >
+                    {typeof column.header === 'string' ? column.header : column.id}
+                  </DropdownMenuCheckboxItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {/* Saved views dropdown */}
+          {savedViewsEnabled && savedViewsProps && (
+            <SavedViewsDropdown
+              views={savedViews}
+              currentViewId={currentViewId}
+              {...savedViewsProps}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/unified-table/components/Toolbar/index.tsx

@@ -0,0 +1,3 @@
+export { ExportButton, type ExportButtonProps, type ExportScope } from './ExportButton'
+export { StandardTableToolbar, type StandardTableToolbarProps } from './StandardTableToolbar'
+export { SavedViewsDropdown, type SavedViewsDropdownProps } from './SavedViewsDropdown'

package/src/components/unified-table/hooks/index.ts

@@ -0,0 +1,21 @@
+export { useTableState } from './useTableState'
+export { useSelection } from './useSelection'
+export { usePagination } from './usePagination'
+export { useFilters } from './useFilters'
+export { useResponsive } from './useResponsive'
+export type { ResponsiveBreakpoints, ViewMode } from './useResponsive'
+
+export { useColumnVisibility } from './useColumnVisibility'
+export type { UseColumnVisibilityOptions } from './useColumnVisibility'
+
+export { useTablePreferences } from './useTablePreferences'
+
+export { useTableKeyboard } from './useTableKeyboard'
+export type { UseTableKeyboardProps, UseTableKeyboardReturn } from './useTableKeyboard'
+
+export { useTableURL } from './useTableURL'
+export type { UseTableURLConfig, TableURLState, UseTableURLReturn } from './useTableURL'
+
+export { useColumnReorder } from './useColumnReorder'
+
+export { useColumnResize } from './useColumnResize'

package/src/components/unified-table/hooks/useColumnReorder.ts

@@ -0,0 +1,90 @@
+'use client'
+
+import { useState, useCallback, useMemo } from 'react'
+import { DropResult } from '@hello-pangea/dnd'
+import { ColumnConfig } from '../types'
+
+interface UseColumnReorderOptions<TData> {
+  columns: ColumnConfig<TData>[]
+  initialOrder?: string[] | null
+  enabled?: boolean
+  onOrderChange?: (order: string[]) => void
+}
+
+interface UseColumnReorderReturn<TData> {
+  orderedColumns: ColumnConfig<TData>[]
+  columnOrder: string[]
+  handleDragEnd: (result: DropResult) => void
+  resetOrder: () => void
+}
+
+export function useColumnReorder<TData>({
+  columns,
+  initialOrder = null,
+  enabled = true,
+  onOrderChange,
+}: UseColumnReorderOptions<TData>): UseColumnReorderReturn<TData> {
+  // Initialize order from provided order or default to column IDs
+  const defaultOrder = useMemo(() => columns.map(c => c.id), [columns])
+
+  const [columnOrder, setColumnOrder] = useState<string[]>(() => {
+    if (initialOrder && initialOrder.length > 0) {
+      // Validate that all columns exist and add any new ones
+      const validOrder = initialOrder.filter(id => columns.some(c => c.id === id))
+      const newColumns = columns.filter(c => !initialOrder.includes(c.id)).map(c => c.id)
+      return [...validOrder, ...newColumns]
+    }
+    return defaultOrder
+  })
+
+  // Reorder columns based on current order
+  const orderedColumns = useMemo(() => {
+    if (!enabled) return columns
+
+    const columnMap = new Map(columns.map(c => [c.id, c]))
+    const ordered: ColumnConfig<TData>[] = []
+
+    // Add columns in order
+    for (const id of columnOrder) {
+      const column = columnMap.get(id)
+      if (column) {
+        ordered.push(column)
+      }
+    }
+
+    // Add any columns not in the order (new columns)
+    for (const column of columns) {
+      if (!columnOrder.includes(column.id)) {
+        ordered.push(column)
+      }
+    }
+
+    return ordered
+  }, [columns, columnOrder, enabled])
+
+  // Handle drag end
+  const handleDragEnd = useCallback((result: DropResult) => {
+    if (!result.destination) return
+    if (result.source.index === result.destination.index) return
+
+    const newOrder = Array.from(columnOrder)
+    const [removed] = newOrder.splice(result.source.index, 1)
+    newOrder.splice(result.destination.index, 0, removed)
+
+    setColumnOrder(newOrder)
+    onOrderChange?.(newOrder)
+  }, [columnOrder, onOrderChange])
+
+  // Reset to default order
+  const resetOrder = useCallback(() => {
+    setColumnOrder(defaultOrder)
+    onOrderChange?.(defaultOrder)
+  }, [defaultOrder, onOrderChange])
+
+  return {
+    orderedColumns,
+    columnOrder,
+    handleDragEnd,
+    resetOrder,
+  }
+}

package/src/components/unified-table/hooks/useColumnResize.ts

@@ -0,0 +1,123 @@
+'use client'
+
+import { useState, useCallback, useRef, useEffect } from 'react'
+
+interface ColumnWidths {
+  [columnId: string]: number
+}
+
+interface UseColumnResizeOptions {
+  enabled?: boolean
+  initialWidths?: ColumnWidths | null
+  minWidth?: number
+  onWidthChange?: (widths: ColumnWidths) => void
+}
+
+interface UseColumnResizeReturn {
+  columnWidths: ColumnWidths
+  getColumnWidth: (columnId: string, defaultWidth?: number) => number | undefined
+  startResize: (columnId: string, startX: number, startWidth: number) => void
+  resetWidths: () => void
+  isResizing: boolean
+  resizingColumn: string | null
+}
+
+export function useColumnResize({
+  enabled = true,
+  initialWidths = null,
+  minWidth = 50,
+  onWidthChange,
+}: UseColumnResizeOptions = {}): UseColumnResizeReturn {
+  const [columnWidths, setColumnWidths] = useState<ColumnWidths>(() => initialWidths ?? {})
+  const [resizingColumn, setResizingColumn] = useState<string | null>(null)
+  const resizeRef = useRef<{
+    columnId: string
+    startX: number
+    startWidth: number
+  } | null>(null)
+
+  // Store dependencies in refs to avoid useCallback recreation
+  const minWidthRef = useRef(minWidth)
+  const onWidthChangeRef = useRef(onWidthChange)
+  useEffect(() => {
+    minWidthRef.current = minWidth
+    onWidthChangeRef.current = onWidthChange
+  }, [minWidth, onWidthChange])
+
+  // Get column width (undefined allows CSS default)
+  const getColumnWidth = useCallback((columnId: string, defaultWidth?: number): number | undefined => {
+    if (!enabled) return defaultWidth
+    return columnWidths[columnId] ?? defaultWidth
+  }, [enabled, columnWidths])
+
+  // Start resizing a column
+  const startResize = useCallback((columnId: string, startX: number, startWidth: number) => {
+    if (!enabled) return
+    resizeRef.current = { columnId, startX, startWidth }
+    setResizingColumn(columnId)
+  }, [enabled])
+
+  // Handle pointer/mouse move during resize - uses refs to avoid recreating
+  const handlePointerMove = useCallback((e: PointerEvent | MouseEvent) => {
+    if (!resizeRef.current) return
+
+    const { columnId, startX, startWidth } = resizeRef.current
+    const diff = e.clientX - startX
+    const newWidth = Math.max(minWidthRef.current, startWidth + diff)
+
+    setColumnWidths(prev => ({ ...prev, [columnId]: newWidth }))
+  }, [])
+
+  // Handle pointer/mouse up to end resize - uses refs to avoid recreating
+  const handlePointerUp = useCallback(() => {
+    if (!resizeRef.current) return
+
+    resizeRef.current = null
+    setResizingColumn(null)
+
+    // Notify parent of the final width changes
+    setColumnWidths(current => {
+      onWidthChangeRef.current?.(current)
+      return current
+    })
+  }, [])
+
+  // Add/remove global pointer/mouse listeners during resize
+  useEffect(() => {
+    if (resizingColumn) {
+      // Add listeners for both pointer and mouse events for cross-browser support
+      document.addEventListener('pointermove', handlePointerMove)
+      document.addEventListener('pointerup', handlePointerUp)
+      document.addEventListener('mousemove', handlePointerMove)
+      document.addEventListener('mouseup', handlePointerUp)
+      // Prevent text selection during resize
+      document.body.style.cursor = 'col-resize'
+      document.body.style.userSelect = 'none'
+
+      return () => {
+        // Remove listeners
+        document.removeEventListener('pointermove', handlePointerMove)
+        document.removeEventListener('pointerup', handlePointerUp)
+        document.removeEventListener('mousemove', handlePointerMove)
+        document.removeEventListener('mouseup', handlePointerUp)
+        document.body.style.cursor = ''
+        document.body.style.userSelect = ''
+      }
+    }
+  }, [resizingColumn, handlePointerMove, handlePointerUp])
+
+  // Reset all widths
+  const resetWidths = useCallback(() => {
+    setColumnWidths({})
+    onWidthChange?.({})
+  }, [onWidthChange])
+
+  return {
+    columnWidths,
+    getColumnWidth,
+    startResize,
+    resetWidths,
+    isResizing: resizingColumn !== null,
+    resizingColumn,
+  }
+}