@toolpath/ui 0.1.0

package/src/editable-cell/editable-cell.tsx

@@ -0,0 +1,307 @@
+import React, { FC, ReactNode, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import { cn } from '../helpers'
+import { ArrowBendUpLeftIcon } from '@phosphor-icons/react'
+import { Input } from '../input'
+
+export interface EditingCell {
+  rowId: string | number
+  field: string
+}
+
+export type NavigateDirection = 'next' | 'prev' | 'up' | 'down'
+
+export interface EditableCellProps {
+  rowId: string | number
+  field: string
+  value: number | string | null | undefined
+  type?: 'text' | 'number'
+  editingCell: EditingCell | null
+  additionalCells?: Array<EditingCell>
+  modifierHeld?: boolean
+  onStartEdit?: (rowId: string | number, field: string) => void
+  onToggleAdditional?: (rowId: string | number, field: string) => void
+  onSelectThrough?: (rowId: string | number, field: string) => void
+  onExtendSelection?: (direction: 'up' | 'down') => void
+  onCommit: (rowId: string | number, field: string, rawValue: string, dirty?: boolean) => void
+  onNavigate?: (
+    rowId: string | number,
+    field: string,
+    rawValue: string,
+    direction: NavigateDirection,
+    dirty?: boolean,
+  ) => void
+  onCancel: () => void
+  children: ReactNode
+}
+
+/**
+ * Module-level store that survives full component remounts caused by
+ * react-table-library's Virtualized component recreating its
+ * innerElementType on every render, which unmounts/remounts all rows.
+ */
+const liveEdit: {
+  key: string | null
+  value: string
+  selectionStart: number
+  selectionEnd: number
+  dirty: boolean
+} = {
+  key: null,
+  value: '',
+  selectionStart: 0,
+  selectionEnd: 0,
+  dirty: false,
+}
+
+const cellKey = (rowId: string | number, field: string) => `${rowId}::${field}`
+
+export const EditableCell: FC<EditableCellProps> = ({
+  rowId,
+  field,
+  value,
+  type = 'number',
+  editingCell,
+  additionalCells,
+  modifierHeld = false,
+  onStartEdit,
+  onToggleAdditional,
+  onSelectThrough,
+  onExtendSelection,
+  onCommit,
+  onNavigate,
+  onCancel,
+  children,
+}) => {
+  const isEditing = editingCell?.rowId === rowId && editingCell?.field === field
+  const isAdditional = additionalCells?.some((c) => c.rowId === rowId && c.field === field) ?? false
+  const hasActiveEdit = editingCell !== null
+  const isSameColumn = editingCell?.field === field
+  const isCrossColumn = hasActiveEdit && !isSameColumn
+  const showBlocked = isCrossColumn && modifierHeld
+  const inputRef = useRef<HTMLInputElement>(null)
+  const dirtyRef = useRef(false)
+  const navigatingRef = useRef(false)
+  const unmountingRef = useRef(false)
+  const valueRef = useRef(value)
+  valueRef.current = value
+  const callbacksRef = useRef({
+    onCommit,
+    onNavigate,
+    onCancel,
+    onExtendSelection,
+  })
+  callbacksRef.current = { onCommit, onNavigate, onCancel, onExtendSelection }
+
+  useLayoutEffect(() => {
+    unmountingRef.current = false
+    return () => {
+      unmountingRef.current = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isEditing || !inputRef.current) {
+      return
+    }
+    const key = cellKey(rowId, field)
+    if (liveEdit.key === key) {
+      inputRef.current.value = liveEdit.value
+      dirtyRef.current = liveEdit.dirty
+      inputRef.current.focus()
+      inputRef.current.setSelectionRange(
+        Math.min(liveEdit.selectionStart, inputRef.current.value.length),
+        Math.min(liveEdit.selectionEnd, inputRef.current.value.length),
+      )
+    } else {
+      const v = valueRef.current
+      inputRef.current.value = v != null ? String(v) : ''
+      liveEdit.key = key
+      liveEdit.value = inputRef.current.value
+      liveEdit.selectionStart = 0
+      liveEdit.selectionEnd = inputRef.current.value.length
+      liveEdit.dirty = false
+      dirtyRef.current = false
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+    navigatingRef.current = false
+  }, [isEditing, rowId, field])
+
+  const getValue = useCallback(() => inputRef.current?.value ?? '', [])
+
+  const syncLive = useCallback(() => {
+    if (inputRef.current) {
+      dirtyRef.current = true
+      liveEdit.dirty = true
+      liveEdit.value = inputRef.current.value
+      liveEdit.selectionStart = inputRef.current.selectionStart ?? 0
+      liveEdit.selectionEnd = inputRef.current.selectionEnd ?? liveEdit.selectionStart
+    }
+  }, [])
+
+  const syncSelection = useCallback(() => {
+    if (inputRef.current) {
+      liveEdit.selectionStart = inputRef.current.selectionStart ?? 0
+      liveEdit.selectionEnd = inputRef.current.selectionEnd ?? liveEdit.selectionStart
+    }
+  }, [])
+
+  const clearLive = useCallback(() => {
+    liveEdit.key = null
+    liveEdit.value = ''
+    liveEdit.selectionStart = 0
+    liveEdit.selectionEnd = 0
+    liveEdit.dirty = false
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const { onCommit, onNavigate, onCancel, onExtendSelection } = callbacksRef.current
+      const dirty = dirtyRef.current
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        clearLive()
+        onCommit(rowId, field, getValue(), dirty)
+      } else if (e.key === 'Escape') {
+        e.preventDefault()
+        clearLive()
+        onCancel()
+      } else if (e.key === 'Tab') {
+        e.preventDefault()
+        navigatingRef.current = true
+        clearLive()
+        onNavigate?.(rowId, field, getValue(), e.shiftKey ? 'prev' : 'next', dirty)
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault()
+        if (e.shiftKey && onExtendSelection) {
+          onExtendSelection('down')
+        } else {
+          navigatingRef.current = true
+          clearLive()
+          onNavigate?.(rowId, field, getValue(), 'down', dirty)
+        }
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        if (e.shiftKey && onExtendSelection) {
+          onExtendSelection('up')
+        } else {
+          navigatingRef.current = true
+          clearLive()
+          onNavigate?.(rowId, field, getValue(), 'up', dirty)
+        }
+      }
+    },
+    [rowId, field, getValue, clearLive],
+  )
+
+  const handleBlur = useCallback(() => {
+    if (navigatingRef.current || unmountingRef.current) {
+      return
+    }
+    clearLive()
+    callbacksRef.current.onCommit(rowId, field, getValue(), dirtyRef.current)
+  }, [rowId, field, getValue, clearLive])
+
+  const isMultiSelectKey = (e: React.MouseEvent) => e.metaKey || e.ctrlKey || e.shiftKey
+
+  const handleDisplayMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (isMultiSelectKey(e) && hasActiveEdit && isSameColumn) {
+        e.preventDefault()
+        e.stopPropagation()
+        return
+      }
+
+      if (hasActiveEdit && !isMultiSelectKey(e)) {
+        window.setTimeout(() => {
+          onStartEdit?.(rowId, field)
+        }, 0)
+      }
+    },
+    [field, hasActiveEdit, isSameColumn, onStartEdit, rowId],
+  )
+
+  const handleDisplayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (!hasActiveEdit || isCrossColumn) {
+        onStartEdit?.(rowId, field)
+        return
+      }
+      if (e.shiftKey && onSelectThrough) {
+        e.stopPropagation()
+        onSelectThrough(rowId, field)
+        return
+      }
+      if ((e.metaKey || e.ctrlKey) && onToggleAdditional) {
+        e.stopPropagation()
+        onToggleAdditional(rowId, field)
+        return
+      }
+      onStartEdit?.(rowId, field)
+    },
+    [rowId, field, hasActiveEdit, isCrossColumn, onStartEdit, onToggleAdditional, onSelectThrough],
+  )
+
+  if (isEditing) {
+    return (
+      <div
+        className="m-0 p-0 -mx-1"
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <Input
+          ref={inputRef}
+          name={`editable-${field}-${rowId}`}
+          id={`editable-${field}-${rowId}`}
+          size="md"
+          icon={ArrowBendUpLeftIcon}
+          iconPosition="right"
+          inputMode={type === 'number' ? 'numeric' : undefined}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          onInput={syncLive}
+          onSelect={syncSelection}
+          className="px-0.5 focus-within:ring-1 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100"
+        />
+      </div>
+    )
+  }
+
+  if (isAdditional) {
+    return (
+      <div
+        className="rounded -mx-1 -my-0.5 px-1.5 py-1 h-6 bg-info/10 cursor-text dark:bg-info/20"
+        onClick={handleDisplayClick}
+        onMouseDown={handleDisplayMouseDown}
+      >
+        <div className="opacity-50">{children}</div>
+      </div>
+    )
+  }
+
+  if (!onStartEdit) {
+    return <div className="mx-0.5">{children}</div>
+  }
+
+  return (
+    <div
+      className={cn(
+        '-mx-1.5 h-8 flex items-center flex flex-row flex-1',
+        showBlocked ? 'cursor-not-allowed pointer-events-none' : 'cursor-text',
+      )}
+      onClick={handleDisplayClick}
+      onMouseDown={handleDisplayMouseDown}
+    >
+      <div
+        className={cn(
+          'rounded mx-0.5 -my-0.5 px-1.5 py-1 h-6 w-full',
+          showBlocked
+            ? 'cursor-not-allowed pointer-events-none'
+            : 'cursor-text hover:bg-gray-50 dark:hover:bg-zinc-800',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/editable-cell/index.ts

@@ -0,0 +1,7 @@
+export {
+  EditableCell,
+  type EditableCellProps,
+  type EditingCell,
+  type NavigateDirection,
+} from './editable-cell'
+export { useEditableGrid, type EditableGridOptions } from './use-editable-grid'

package/src/editable-cell/use-editable-grid.tsx

@@ -0,0 +1,296 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { EditingCell, NavigateDirection } from './editable-cell'
+
+export interface EditableGridOptions<T> {
+  data: Array<T>
+  fields: ReadonlyArray<string>
+  getId: (item: T) => string | number
+  isFieldEditable?: (item: T, field: string) => boolean
+  onCommit: (rowId: string | number, field: string, rawValue: string) => void
+  onBatchCommit?: (
+    cells: Array<{ rowId: string | number; field: string }>,
+    rawValue: string,
+  ) => void
+}
+
+export const useEditableGrid = <T,>({
+  data,
+  fields,
+  getId,
+  isFieldEditable,
+  onCommit,
+  onBatchCommit,
+}: EditableGridOptions<T>) => {
+  const [editingCell, setEditingCell] = useState<EditingCell | null>(null)
+  const editingCellRef = useRef(editingCell)
+  editingCellRef.current = editingCell
+  const [additionalCells, setAdditionalCells] = useState<Array<EditingCell>>([])
+  const additionalCellsRef = useRef(additionalCells)
+  additionalCellsRef.current = additionalCells
+  const [modifierHeld, setModifierHeld] = useState(false)
+
+  useEffect(() => {
+    if (!editingCell) {
+      setModifierHeld(false)
+      return
+    }
+    const isModifier = (e: KeyboardEvent) => e.shiftKey || e.ctrlKey || e.metaKey
+    const onDown = (e: KeyboardEvent) => {
+      if (isModifier(e)) {
+        setModifierHeld(true)
+      }
+    }
+    const onUp = (e: KeyboardEvent) => {
+      if (!e.shiftKey && !e.ctrlKey && !e.metaKey) {
+        setModifierHeld(false)
+      }
+    }
+    window.addEventListener('keydown', onDown)
+    window.addEventListener('keyup', onUp)
+    return () => {
+      window.removeEventListener('keydown', onDown)
+      window.removeEventListener('keyup', onUp)
+    }
+  }, [editingCell])
+
+  const commitAll = useCallback(
+    (rowId: string | number, field: string, rawValue: string) => {
+      const extras = additionalCellsRef.current
+      if (extras.length > 0 && onBatchCommit) {
+        onBatchCommit([{ rowId, field }, ...extras], rawValue)
+      } else {
+        onCommit(rowId, field, rawValue)
+        for (const cell of extras) {
+          onCommit(cell.rowId, cell.field, rawValue)
+        }
+      }
+    },
+    [onCommit, onBatchCommit],
+  )
+
+  const clearAll = useCallback(() => {
+    setEditingCell(null)
+    setAdditionalCells([])
+  }, [])
+
+  const handleStartEdit = useCallback((rowId: string | number, field: string) => {
+    setEditingCell({ rowId, field })
+    setAdditionalCells([])
+  }, [])
+
+  const handleSelectColumn = useCallback(
+    (field: string) => {
+      if (data.length === 0) {
+        return
+      }
+      const firstId = getId(data[0])
+      if (isFieldEditable && !isFieldEditable(data[0], field)) {
+        return
+      }
+      setEditingCell({ rowId: firstId, field })
+      setAdditionalCells(
+        data.slice(1).reduce<Array<EditingCell>>((acc, item) => {
+          if (!isFieldEditable || isFieldEditable(item, field)) {
+            acc.push({ rowId: getId(item), field })
+          }
+          return acc
+        }, []),
+      )
+    },
+    [data, getId, isFieldEditable],
+  )
+
+  const handleToggleAdditional = useCallback((rowId: string | number, field: string) => {
+    const ec = editingCellRef.current
+    if (!ec || field !== ec.field) {
+      return
+    }
+    if (rowId === ec.rowId && field === ec.field) {
+      return
+    }
+    setAdditionalCells((prev) => {
+      const exists = prev.some((c) => c.rowId === rowId && c.field === field)
+      if (exists) {
+        return prev.filter((c) => !(c.rowId === rowId && c.field === field))
+      }
+      return [...prev, { rowId, field }]
+    })
+  }, [])
+
+  const handleSelectThrough = useCallback(
+    (rowId: string | number, field: string) => {
+      const ec = editingCellRef.current
+      if (!ec || field !== ec.field) {
+        return
+      }
+      if (rowId === ec.rowId) {
+        return
+      }
+
+      const extras = additionalCellsRef.current
+      const anchorRowId = extras.length > 0 ? extras[extras.length - 1].rowId : ec.rowId
+
+      const anchorIdx = data.findIndex((d) => getId(d) === anchorRowId)
+      const targetIdx = data.findIndex((d) => getId(d) === rowId)
+      if (anchorIdx === -1 || targetIdx === -1) {
+        return
+      }
+
+      const lo = Math.min(anchorIdx, targetIdx)
+      const hi = Math.max(anchorIdx, targetIdx)
+
+      const rangeCells: Array<EditingCell> = []
+      for (let i = lo; i <= hi; i++) {
+        const id = getId(data[i])
+        if (id !== ec.rowId) {
+          rangeCells.push({ rowId: id, field })
+        }
+      }
+
+      setAdditionalCells((prev) => {
+        const merged = [...prev]
+        for (const rc of rangeCells) {
+          if (!merged.some((c) => c.rowId === rc.rowId && c.field === rc.field)) {
+            merged.push(rc)
+          }
+        }
+        return merged
+      })
+    },
+    [data, getId],
+  )
+
+  const handleExtendSelection = useCallback(
+    (direction: 'up' | 'down') => {
+      const ec = editingCellRef.current
+      if (!ec) {
+        return
+      }
+      const allRowIds = [ec.rowId, ...additionalCellsRef.current.map((c) => c.rowId)]
+      const indices = allRowIds
+        .map((id) => data.findIndex((d) => getId(d) === id))
+        .filter((i) => i !== -1)
+
+      const frontier = direction === 'down' ? Math.max(...indices) : Math.min(...indices)
+      const nextIdx = direction === 'down' ? frontier + 1 : frontier - 1
+
+      if (nextIdx < 0 || nextIdx >= data.length) {
+        return
+      }
+
+      const nextRowId = getId(data[nextIdx])
+      if (nextRowId === ec.rowId) {
+        return
+      }
+
+      setAdditionalCells((prev) => {
+        if (prev.some((c) => c.rowId === nextRowId && c.field === ec.field)) {
+          return prev
+        }
+        return [...prev, { rowId: nextRowId, field: ec.field }]
+      })
+    },
+    [data, getId],
+  )
+
+  const handleCommit = useCallback(
+    (rowId: string | number, field: string, rawValue: string, dirty = true) => {
+      if (dirty) {
+        commitAll(rowId, field, rawValue)
+      }
+      clearAll()
+    },
+    [commitAll, clearAll],
+  )
+
+  const handleCancel = useCallback(() => {
+    clearAll()
+  }, [clearAll])
+
+  const handleNavigate = useCallback(
+    (
+      rowId: string | number,
+      field: string,
+      rawValue: string,
+      direction: NavigateDirection,
+      dirty = true,
+    ) => {
+      handleCommit(rowId, field, rawValue, dirty)
+
+      const rowIndex = data.findIndex((d) => getId(d) === rowId)
+      const fieldIndex = fields.indexOf(field)
+      if (rowIndex === -1 || fieldIndex === -1) {
+        return
+      }
+
+      let nextRow = rowIndex
+      let nextField = fieldIndex
+
+      if (direction === 'next') {
+        nextField++
+        if (nextField >= fields.length) {
+          nextField = 0
+          nextRow++
+        }
+      } else if (direction === 'prev') {
+        nextField--
+        if (nextField < 0) {
+          nextField = fields.length - 1
+          nextRow--
+        }
+      } else if (direction === 'down') {
+        nextRow++
+      } else if (direction === 'up') {
+        nextRow--
+      }
+
+      if (nextRow < 0 || nextRow >= data.length) {
+        return
+      }
+
+      const targetItem = data[nextRow]
+      const targetRowId = getId(targetItem)
+      const targetField = fields[nextField]
+
+      if (isFieldEditable && !isFieldEditable(targetItem, targetField)) {
+        if (direction === 'prev') {
+          if (nextRow <= 0) {
+            return
+          }
+          setEditingCell({
+            rowId: getId(data[nextRow - 1]),
+            field: fields[fields.length - 1],
+          })
+        } else {
+          const nextEditableIndex = fields.findIndex(
+            (f, i) => i > 0 && (!isFieldEditable || isFieldEditable(targetItem, f)),
+          )
+          if (nextEditableIndex !== -1) {
+            setEditingCell({
+              rowId: targetRowId,
+              field: fields[nextEditableIndex],
+            })
+          }
+        }
+        return
+      }
+
+      setEditingCell({ rowId: targetRowId, field: targetField })
+    },
+    [data, fields, getId, handleCommit, isFieldEditable],
+  )
+
+  return {
+    editingCell,
+    additionalCells,
+    modifierHeld,
+    handleStartEdit,
+    handleSelectColumn,
+    handleToggleAdditional,
+    handleSelectThrough,
+    handleExtendSelection,
+    handleCommit,
+    handleCancel,
+    handleNavigate,
+  }
+}

package/src/field/field.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+
+export interface FieldProps {
+  title: string
+  description?: string
+  content?: ReactNode
+  children?: ReactNode
+}
+
+/** A labelled settings row with an optional right-aligned control. */
+export const Field = ({ title, description, content, children }: FieldProps) => (
+  <div className="flex items-center justify-between gap-4 border-b border-gray-100 px-6 py-5 last:border-0 dark:border-zinc-800">
+    <div className="flex-1">
+      <div className="font-semibold text-gray-900 dark:text-white">{title}</div>
+      {description ? (
+        <div className="mt-1 text-sm text-gray-400 dark:text-zinc-400">{description}</div>
+      ) : null}
+      {content}
+    </div>
+    <div className="shrink-0">{children}</div>
+  </div>
+)

package/src/field/index.ts

@@ -0,0 +1,2 @@
+export { Field } from './field'
+export type { FieldProps } from './field'

package/src/helpers/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: Array<ClassValue>) => {
+  return twMerge(clsx(inputs))
+}

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './cn'