@lovett/ui 0.0.1

package/src/data-grid/use-grid-columns.ts

@@ -0,0 +1,311 @@
+/**
+ * useGridColumns — column width / visibility / drag-reorder state.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/use-grid-columns.ts
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR: pure TS port — no styling changes; only
+ * relative-path adjustment for the workspace tree.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+} from 'react'
+
+import {
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core'
+import { arrayMove } from '@dnd-kit/sortable'
+
+import type { DataGridColumn } from './types'
+
+function createInitialColumnWidths<ColumnId extends string>(
+  columns: DataGridColumn<ColumnId>[],
+): Record<ColumnId, number> {
+  return columns.reduce<Record<ColumnId, number>>(
+    (acc, column) => {
+      acc[column.id] = column.defaultWidth
+      return acc
+    },
+    {} as Record<ColumnId, number>,
+  )
+}
+
+type UseGridColumnsParams<ColumnId extends string> = {
+  columns: DataGridColumn<ColumnId>[]
+  tableRef: RefObject<HTMLTableElement | null>
+  minColumnWidth: number
+  controlColumnWidth: number
+}
+
+export function useGridColumns<ColumnId extends string>({
+  columns,
+  tableRef,
+  minColumnWidth,
+  controlColumnWidth,
+}: UseGridColumnsParams<ColumnId>) {
+  const columnOrder = useMemo(
+    () => columns.map((column) => column.id),
+    [columns],
+  )
+
+  const [columnWidths, setColumnWidths] = useState<
+    Record<ColumnId, number>
+  >(() => createInitialColumnWidths(columns))
+  const [visibleColumnIds, setVisibleColumnIds] = useState<ColumnId[]>(
+    () => columnOrder,
+  )
+  const [draggingColumnId, setDraggingColumnId] =
+    useState<ColumnId | null>(null)
+  const [dragOverColumnId, setDragOverColumnId] =
+    useState<ColumnId | null>(null)
+  const [dragOverlayHeight, setDragOverlayHeight] = useState(280)
+  const [dropIndicatorLeft, setDropIndicatorLeft] = useState<
+    number | null
+  >(null)
+  const [dragTableRect, setDragTableRect] = useState<{
+    top: number
+    height: number
+  } | null>(null)
+
+  const resizingRef = useRef<{
+    columnId: ColumnId
+    startX: number
+    startWidth: number
+  } | null>(null)
+  const orderBeforeDragRef = useRef<ColumnId[]>(columnOrder)
+
+  useEffect(() => {
+    const allowedIds = new Set(columnOrder)
+
+    setColumnWidths((current) => {
+      const next = createInitialColumnWidths(columns)
+      columns.forEach((column) => {
+        if (typeof current[column.id] === 'number') {
+          next[column.id] = current[column.id]
+        }
+      })
+      return next
+    })
+
+    setVisibleColumnIds((current) => {
+      const kept = current.filter((id) => allowedIds.has(id))
+      const missing = columnOrder.filter((id) => !kept.includes(id))
+      return [...kept, ...missing]
+    })
+
+    orderBeforeDragRef.current = columnOrder
+  }, [columns, columnOrder])
+
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      const activeResize = resizingRef.current
+      if (!activeResize) return
+
+      const column = columns.find((item) => item.id === activeResize.columnId)
+      const resolvedMinWidth = column?.minWidth ?? minColumnWidth
+      const deltaX = event.clientX - activeResize.startX
+      const nextWidth = Math.max(
+        resolvedMinWidth,
+        activeResize.startWidth + deltaX,
+      )
+
+      setColumnWidths((currentWidths) => ({
+        ...currentWidths,
+        [activeResize.columnId]: nextWidth,
+      }))
+    }
+
+    const handlePointerUp = () => {
+      if (!resizingRef.current) return
+      resizingRef.current = null
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+    }
+
+    window.addEventListener('pointermove', handlePointerMove)
+    window.addEventListener('pointerup', handlePointerUp)
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove)
+      window.removeEventListener('pointerup', handlePointerUp)
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+    }
+  }, [columns, minColumnWidth])
+
+  const visibleColumns = useMemo(() => {
+    return visibleColumnIds
+      .map((columnId) => columns.find((column) => column.id === columnId))
+      .filter((column): column is DataGridColumn<ColumnId> => Boolean(column))
+  }, [columns, visibleColumnIds])
+
+  const gridMinWidth = useMemo(() => {
+    const contentWidth = visibleColumns.reduce((sum, column) => {
+      return sum + (columnWidths[column.id] ?? column.defaultWidth)
+    }, 0)
+
+    return controlColumnWidth + contentWidth
+  }, [columnWidths, controlColumnWidth, visibleColumns])
+
+  const hiddenColumns = useMemo(() => {
+    return columns.filter((column) => !visibleColumnIds.includes(column.id))
+  }, [columns, visibleColumnIds])
+
+  const toggleColumnVisibility = useCallback(
+    (columnId: ColumnId, visible: boolean) => {
+      setVisibleColumnIds((currentColumns) => {
+        if (visible) {
+          if (currentColumns.includes(columnId)) return currentColumns
+          return [...currentColumns, columnId]
+        }
+
+        if (currentColumns.length === 1 && currentColumns.includes(columnId)) {
+          return currentColumns
+        }
+
+        return currentColumns.filter((id) => id !== columnId)
+      })
+    },
+    [],
+  )
+
+  const handleColumnDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const activeId = String(event.active.id) as ColumnId
+      const tableRect = tableRef.current?.getBoundingClientRect()
+      orderBeforeDragRef.current = visibleColumnIds
+      setDraggingColumnId(activeId)
+      setDragOverColumnId(activeId)
+      setDragOverlayHeight(tableRect?.height ?? 280)
+      if (tableRect) {
+        setDragTableRect({ top: tableRect.top, height: tableRect.height })
+      }
+    },
+    [tableRef, visibleColumnIds],
+  )
+
+  const handleColumnDragOver = useCallback(
+    (event: DragOverEvent) => {
+      if (!event.over) return
+
+      const activeId = String(event.active.id) as ColumnId
+      const overId = String(event.over.id) as ColumnId
+      const overRect = event.over.rect
+      setDragOverColumnId(overId)
+
+      const currentIndex = visibleColumnIds.indexOf(activeId)
+      const targetIndex = visibleColumnIds.indexOf(overId)
+      const indicatorLeft =
+        currentIndex > -1 && targetIndex > -1 && currentIndex < targetIndex
+          ? overRect.left + overRect.width
+          : overRect.left
+
+      setDropIndicatorLeft(indicatorLeft)
+
+      if (activeId === overId) return
+
+      setVisibleColumnIds((currentColumns) => {
+        const oldIndex = currentColumns.indexOf(activeId)
+        const newIndex = currentColumns.indexOf(overId)
+
+        if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) {
+          return currentColumns
+        }
+
+        return arrayMove(currentColumns, oldIndex, newIndex)
+      })
+    },
+    [visibleColumnIds],
+  )
+
+  const handleColumnDragEnd = useCallback((event: DragEndEvent) => {
+    if (!event.over) {
+      setVisibleColumnIds(orderBeforeDragRef.current)
+    }
+
+    setDraggingColumnId(null)
+    setDragOverColumnId(null)
+    setDropIndicatorLeft(null)
+    setDragTableRect(null)
+  }, [])
+
+  const handleOptionColumnDragEnd = useCallback((event: DragEndEvent) => {
+    if (!event.over) return
+
+    const activeId = String(event.active.id) as ColumnId
+    const overId = String(event.over.id) as ColumnId
+
+    if (activeId === overId) return
+
+    setVisibleColumnIds((currentColumns) => {
+      const oldIndex = currentColumns.indexOf(activeId)
+      const newIndex = currentColumns.indexOf(overId)
+
+      if (oldIndex === -1 || newIndex === -1) return currentColumns
+
+      return arrayMove(currentColumns, oldIndex, newIndex)
+    })
+  }, [])
+
+  const handleColumnDragCancel = useCallback(() => {
+    setVisibleColumnIds(orderBeforeDragRef.current)
+    setDraggingColumnId(null)
+    setDragOverColumnId(null)
+    setDropIndicatorLeft(null)
+    setDragTableRect(null)
+  }, [])
+
+  const beginResize = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>, columnId: ColumnId) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      resizingRef.current = {
+        columnId,
+        startX: event.clientX,
+        startWidth: columnWidths[columnId],
+      }
+
+      document.body.style.userSelect = 'none'
+      document.body.style.cursor = 'col-resize'
+    },
+    [columnWidths],
+  )
+
+  const dragOverlayColumn = useMemo(() => {
+    if (!draggingColumnId) return null
+    return columns.find((column) => column.id === draggingColumnId) ?? null
+  }, [columns, draggingColumnId])
+
+  return {
+    columnWidths,
+    visibleColumnIds,
+    draggingColumnId,
+    dragOverColumnId,
+    dragOverlayHeight,
+    dropIndicatorLeft,
+    dragTableRect,
+    visibleColumns,
+    gridMinWidth,
+    hiddenColumns,
+    toggleColumnVisibility,
+    handleColumnDragStart,
+    handleColumnDragOver,
+    handleColumnDragEnd,
+    handleOptionColumnDragEnd,
+    handleColumnDragCancel,
+    beginResize,
+    dragOverlayColumn,
+  }
+}

package/src/data-grid/use-grid-editing.ts

@@ -0,0 +1,154 @@
+/**
+ * useGridEditing — cell editing draft / commit / keyboard navigation.
+ *
+ * Ported 2026-05-18 from gray-ui-csm
+ * https://github.com/Jason-uxui/gray-ui-csm/blob/baf8346ac0c1160282e0b173de1bffc594d9c9c3/components/data-grid/use-grid-editing.ts
+ * License: MIT (see packages/ui/licenses/gray-ui-csm-LICENSE.txt)
+ * Workspace ADR: ADR-025
+ *
+ * BRING_WITH_REFACTOR: pure TS port — relative-path adjustment only.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type RefObject,
+} from 'react'
+
+import type { DataGridColumn, DataGridRowBase, EditingCell } from './types'
+
+type UseGridEditingParams<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+> = {
+  gridRef: RefObject<HTMLDivElement | null>
+  inputRef: RefObject<HTMLInputElement | null>
+  visibleRowCount: number
+  visibleColumnCount: number
+  isEditableColumn: (columnId: ColumnId) => boolean
+  getCellEditValue: (row: Row, columnId: ColumnId) => string
+  applyCellEdit: (row: Row, columnId: ColumnId, nextValue: string) => Row
+  commitRows: (updater: (currentRows: Row[]) => Row[]) => void
+}
+
+export function useGridEditing<
+  Row extends DataGridRowBase,
+  ColumnId extends string,
+>({
+  gridRef,
+  inputRef,
+  visibleRowCount,
+  visibleColumnCount,
+  isEditableColumn,
+  getCellEditValue,
+  applyCellEdit,
+  commitRows,
+}: UseGridEditingParams<Row, ColumnId>) {
+  const [editingCell, setEditingCell] =
+    useState<EditingCell<ColumnId> | null>(null)
+  const [draftValue, setDraftValue] = useState('')
+
+  useEffect(() => {
+    if (!editingCell) return
+    inputRef.current?.focus()
+    inputRef.current?.select()
+  }, [editingCell, inputRef])
+
+  const startEditing = useCallback(
+    (row: Row, columnId: ColumnId) => {
+      if (!isEditableColumn(columnId)) return
+      setEditingCell({ rowId: row.id, columnId })
+      setDraftValue(getCellEditValue(row, columnId))
+    },
+    [getCellEditValue, isEditableColumn],
+  )
+
+  const commitEdit = useCallback(() => {
+    if (!editingCell) return
+
+    commitRows((currentRows) =>
+      currentRows.map((row) => {
+        if (row.id !== editingCell.rowId) return row
+        return applyCellEdit(row, editingCell.columnId, draftValue)
+      }),
+    )
+    setEditingCell(null)
+    setDraftValue('')
+  }, [applyCellEdit, commitRows, draftValue, editingCell])
+
+  const cancelEdit = useCallback(() => {
+    setEditingCell(null)
+    setDraftValue('')
+  }, [])
+
+  const focusCell = useCallback(
+    (rowIndex: number, colIndex: number) => {
+      const targetCell = gridRef.current?.querySelector<HTMLElement>(
+        `[data-grid-cell="true"][data-row-index="${rowIndex}"][data-col-index="${colIndex}"]`,
+      )
+      targetCell?.focus()
+    },
+    [gridRef],
+  )
+
+  const handleCellKeyDown = useCallback(
+    (
+      event: ReactKeyboardEvent<HTMLTableCellElement>,
+      row: Row,
+      rowIndex: number,
+      column: DataGridColumn<ColumnId>,
+      colIndex: number,
+    ) => {
+      const maxRowIndex = visibleRowCount - 1
+      const maxColIndex = visibleColumnCount - 1
+
+      if (event.key === 'Enter' && isEditableColumn(column.id)) {
+        event.preventDefault()
+        startEditing(row, column.id)
+        return
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        focusCell(rowIndex, Math.min(colIndex + 1, maxColIndex))
+        return
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        focusCell(rowIndex, Math.max(colIndex - 1, 0))
+        return
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        focusCell(Math.min(rowIndex + 1, maxRowIndex), colIndex)
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        focusCell(Math.max(rowIndex - 1, 0), colIndex)
+      }
+    },
+    [
+      focusCell,
+      isEditableColumn,
+      startEditing,
+      visibleColumnCount,
+      visibleRowCount,
+    ],
+  )
+
+  return {
+    editingCell,
+    draftValue,
+    setDraftValue,
+    startEditing,
+    commitEdit,
+    cancelEdit,
+    handleCellKeyDown,
+  }
+}