@toolpath/ui 0.1.0

package/src/table/group-header.tsx

@@ -0,0 +1,62 @@
+import React, { ReactNode } from 'react'
+import { cn } from '../helpers'
+import { CaretRightIcon } from '@phosphor-icons/react'
+import { useTable } from './table-context'
+
+interface GroupHeaderProps {
+  groupIndex: number
+  rowIndex?: number
+  children: ReactNode
+  className?: string
+  inHeader?: boolean
+}
+
+export const GroupHeader = ({
+  groupIndex,
+  children,
+  rowIndex,
+  inHeader: _inHeader = false,
+  className,
+}: GroupHeaderProps) => {
+  const { columns, select, setCollapsedGroups, collapsedGroups, density } = useTable()
+  const isCollapsed = collapsedGroups.findIndex((item) => item === groupIndex) !== -1
+
+  const handleToggleGroup = () => {
+    setCollapsedGroups((current) => {
+      const foundIndex = current.findIndex((item) => item === groupIndex)
+
+      if (foundIndex !== -1) {
+        return current.filter((item) => item !== groupIndex)
+      } else {
+        return [...current, groupIndex]
+      }
+    })
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleToggleGroup}
+      tabIndex={-1}
+      data-row-index={rowIndex}
+      className={cn(
+        `w-full ${density === 'roomy' ? 'h-11' : 'h-8'} pt-1.5 bg-white dark:bg-zinc-900 flex flex-row items-center border-b border-gray-100 dark:border-zinc-800 gap-2 px-2 text-xs font-medium text-gray dark:text-zinc-100 truncate`,
+        // {
+        //   'border-t border-t-gray-50': !isPreviousCollapsed && !inHeader,
+        // },
+        className,
+      )}
+      style={{
+        gridColumn: `span ${columns + (select ? 1 : 0)}`,
+      }}
+    >
+      <CaretRightIcon
+        className={cn(
+          'pointer-events-none fill-current text-gray dark:text-zinc-100 size-3 -rotate-90',
+          { 'rotate-90': isCollapsed },
+        )}
+      />
+      <span>{children}</span>
+    </button>
+  )
+}

package/src/table/header-cell.tsx

@@ -0,0 +1,158 @@
+import React from 'react'
+import type { HTMLAttributes, MouseEvent, ReactNode } from 'react'
+import { HeaderCellSort } from '@table-library/react-table-library/sort'
+import { HeaderCell as BaseHeaderCell, TableNode } from '@table-library/react-table-library/table'
+import { HeaderCellSortProps } from '@table-library/react-table-library/types/sort'
+import { cn } from '../helpers'
+import { useTable } from './table-context'
+
+const Divider = () => (
+  <div className="absolute top-0 right-0 w-1 h-full py-1 shrink-0">
+    <div className="w-1 h-full border-r border-gray-100 dark:border-zinc-800"></div>
+  </div>
+)
+
+const SortIcon = ({ flipped = false }: { flipped?: boolean }) => (
+  <div className="pr-2 text-center flex flex-row-reverse shrink-0">
+    <svg
+      className={cn('pointer-events-none fill-current text-gray dark:text-zinc-100 size-2', {
+        'rotate-180': flipped,
+      })}
+      viewBox="0 0 5 3"
+    >
+      <path d="M0 2.5L2.5 0L5 2.5H0Z" />
+    </svg>
+  </div>
+)
+
+export interface HeaderCellProps extends Omit<HeaderCellSortProps, 'sortKey'> {
+  sort?: boolean
+  sortFn?: (array: Array<TableNode>) => Array<TableNode>
+  width?: string | number
+  sortKey?: string
+  divider?: boolean
+}
+
+export interface HeaderCellInteractiveProps extends HTMLAttributes<HTMLSpanElement> {
+  children: ReactNode
+}
+
+export interface HeaderCellContentProps extends HTMLAttributes<HTMLSpanElement> {
+  accessory?: ReactNode
+  children: ReactNode
+}
+
+export const HeaderCellContent = ({
+  accessory,
+  children,
+  className,
+  style,
+  ...props
+}: HeaderCellContentProps) => {
+  return (
+    <span
+      className={cn('gap-1', className)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        minWidth: 0,
+        width: '100%',
+        textAlign: 'left',
+        ...style,
+      }}
+      {...props}
+    >
+      <span
+        style={{
+          display: 'block',
+          flex: '0 1 auto',
+          minWidth: 0,
+          overflow: 'hidden',
+          textAlign: 'left',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {children}
+      </span>
+      {accessory}
+    </span>
+  )
+}
+
+export const HeaderCellInteractive = ({
+  children,
+  className,
+  onClick,
+  onMouseDown,
+  style,
+  ...props
+}: HeaderCellInteractiveProps) => {
+  const handleClick = (event: MouseEvent<HTMLSpanElement>) => {
+    event.stopPropagation()
+    onClick?.(event)
+  }
+
+  const handleMouseDown = (event: MouseEvent<HTMLSpanElement>) => {
+    event.stopPropagation()
+    onMouseDown?.(event)
+  }
+
+  return (
+    <span
+      className={cn('inline-flex shrink-0 items-center', className)}
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+      style={{ ...style, pointerEvents: 'auto' }}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export const HeaderCell = ({
+  children,
+  sortKey,
+  sortFn,
+  resize = { minWidth: 25, resizerWidth: 8 },
+  width: _width = '0px',
+  divider = true,
+  ...props
+}: HeaderCellProps) => {
+  const { columns, select, isEmpty, density } = useTable()
+  const isLastColumn = props.index === columns - (select ? 0 : 1)
+
+  const headerCellClass = 'border-b border-gray-100 dark:border-zinc-800 relative'
+  const titleClass = cn(
+    'flex flex-row items-center text-xs font-medium px-1.5 select-none',
+    density === 'roomy' ? 'h-11' : 'h-8',
+  )
+
+  if (isEmpty || (!sortKey && !sortFn)) {
+    return (
+      <BaseHeaderCell className={headerCellClass} resize={resize} {...props}>
+        <div className={titleClass}>{children}</div>
+        {divider && !isLastColumn && <Divider />}
+      </BaseHeaderCell>
+    )
+  }
+
+  return (
+    <HeaderCellSort
+      className={headerCellClass}
+      sortKey={props.index}
+      resize={resize}
+      sortIcon={{
+        iconDefault: null,
+        iconDown: <SortIcon flipped />,
+        iconUp: <SortIcon />,
+      }}
+      {...props}
+    >
+      <div className={cn(titleClass, 'min-w-0 w-full justify-start')}>{children}</div>
+      {divider && !isLastColumn && <Divider />}
+    </HeaderCellSort>
+  )
+}

package/src/table/header-row.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { HeaderRow as BaseHeaderRow } from '@table-library/react-table-library/table'
+import { HeaderRowProps as BaseHeaderRowProps } from '@table-library/react-table-library/types/table'
+import { cn } from '../helpers'
+import { HeaderCell } from './header-cell'
+import { useTable } from './table-context'
+
+export interface HeaderRowProps extends BaseHeaderRowProps {
+  noOffset?: boolean
+  className?: string
+}
+
+export const HeaderRow = ({ children, noOffset = false, className, ...props }: HeaderRowProps) => {
+  const { select, multiselect } = useTable()
+
+  return (
+    <BaseHeaderRow className={cn('!bg-white dark:!bg-zinc-900', className)} {...props}>
+      {(select || multiselect) && !noOffset && (
+        <HeaderCell
+          resize={false}
+          divider={false}
+          className="stiff border-b border-gray-100 dark:border-zinc-800"
+        />
+      )}
+      {children}
+    </BaseHeaderRow>
+  )
+}

package/src/table/index.ts

@@ -0,0 +1,56 @@
+import { Cell } from './cell'
+import { HeaderCell, HeaderCellContent, HeaderCellInteractive } from './header-cell'
+import { HeaderRow } from './header-row'
+import { Row } from './row'
+import { useTable } from './table-context'
+import { type TableDensity as TableDensityType } from './table-context'
+import { useRow } from './row-context'
+import { useCell } from './cell-context'
+import { useCheckbox } from './use-checkbox'
+import { TableEmpty } from './table-empty'
+import {
+  TableRoot,
+  TableProps,
+  type TableSelectedRows as TableSelectedRowsType,
+  type TableSortState as TableSortStateType,
+  type TableSort as TableDefaultSortType,
+  type TableSortDirection as TableDefaultSortDirectionType,
+} from './table'
+import { ReactElement } from 'react'
+
+export type TableSelectedRows = TableSelectedRowsType | undefined
+export type TableSortState = TableSortStateType
+export type TableDefaultSort = TableDefaultSortType
+export type TableDefaultSortDirection = TableDefaultSortDirectionType
+export type TableDensity = TableDensityType
+
+type TableCompoundType = {
+  <T>(props: TableProps<T>): ReactElement
+  HeaderRow: typeof HeaderRow
+  HeaderCell: typeof HeaderCell
+  HeaderCellContent: typeof HeaderCellContent
+  HeaderCellInteractive: typeof HeaderCellInteractive
+  Row: typeof Row
+  Cell: typeof Cell
+  useTable: typeof useTable
+  useRow: typeof useRow
+  useCell: typeof useCell
+  useCheckbox: typeof useCheckbox
+  Empty: typeof TableEmpty
+}
+
+const TableCompound: TableCompoundType = Object.assign(TableRoot, {
+  HeaderRow,
+  HeaderCell,
+  HeaderCellContent,
+  HeaderCellInteractive,
+  Row,
+  Cell,
+  useTable,
+  useRow,
+  useCell,
+  useCheckbox,
+  Empty: TableEmpty,
+})
+
+export { TableCompound as Table }

package/src/table/is-group-empty-state.ts

@@ -0,0 +1,17 @@
+import { TableNode } from '@table-library/react-table-library/types/table'
+
+const GROUP_EMPTY_STATE_KEY = '__groupEmptyState'
+const GROUP_EMPTY_STATE_SPACER_KEY = '__groupEmptyStateSpacer'
+
+export const createGroupEmptyStateMarker = (spacer = false) => ({
+  [GROUP_EMPTY_STATE_KEY]: true,
+  [GROUP_EMPTY_STATE_SPACER_KEY]: spacer,
+})
+
+export const isGroupEmptyState = (item: TableNode) => {
+  return item?.[GROUP_EMPTY_STATE_KEY] === true
+}
+
+export const isGroupEmptyStateSpacer = (item: TableNode) => {
+  return item?.[GROUP_EMPTY_STATE_SPACER_KEY] === true
+}

package/src/table/is-group-header.ts

@@ -0,0 +1,5 @@
+import { TableNode } from '@table-library/react-table-library/types/table'
+
+export const isGroupHeader = (item: TableNode) => {
+  return typeof item?.id === 'undefined'
+}

package/src/table/row-context.tsx

@@ -0,0 +1,61 @@
+import React, {
+  Dispatch,
+  FC,
+  ReactElement,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+import { useTable } from './table-context'
+
+export interface RowContextInterface {
+  item: any
+  index: number
+  groupIndex?: number
+  isSelected: boolean
+  isOnlySelected: boolean
+  isDirectlySelected: boolean
+  isHovered: boolean
+  setIsHovered: Dispatch<SetStateAction<boolean>>
+}
+
+const RowContext = createContext<RowContextInterface>({} as RowContextInterface)
+
+interface ProviderProps {
+  children: ReactElement
+  item: any
+  index: number
+  groupIndex?: number
+}
+
+const RowProvider: FC<ProviderProps> = ({ item, index, groupIndex, children }) => {
+  const { selectedRows, select, cursor } = useTable()
+  // isOnlySelected means this row is selected AND it's the only one selected
+  // (id matches and ids array is empty)
+  const isOnlySelected = Boolean(selectedRows?.id === item.id) && !selectedRows?.ids?.length
+  const isSelected = isOnlySelected || Boolean(selectedRows?.ids?.includes(item.id))
+  const isDirectlySelected = isOnlySelected && index === cursor
+  const [isHovered, setIsHovered] = useState(false)
+
+  const value = useMemo(
+    () => ({
+      item,
+      index,
+      groupIndex,
+      isOnlySelected,
+      isDirectlySelected,
+      isSelected,
+      isHovered: select ? isHovered : false,
+      setIsHovered,
+    }),
+    [item, index, groupIndex, isOnlySelected, isDirectlySelected, isSelected, select, isHovered],
+  )
+
+  return <RowContext.Provider value={value}>{children}</RowContext.Provider>
+}
+
+const useRow = () => useContext(RowContext)
+const RowConsumer = RowContext.Consumer
+export { useRow, RowProvider, RowContext, RowConsumer }

package/src/table/row-disabled-context.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react'
+
+const RowDisabledContext = createContext(false)
+
+export const RowDisabledProvider = RowDisabledContext.Provider
+
+export const useRowDisabled = () => useContext(RowDisabledContext)

package/src/table/row.tsx

@@ -0,0 +1,98 @@
+import React, { memo, useEffect } from 'react'
+import { Row as BaseRow, Cell } from '@table-library/react-table-library/table'
+import { RowProps } from '@table-library/react-table-library/types/table'
+import { cn } from '../helpers'
+import { useRow } from './row-context'
+import { RowDisabledProvider } from './row-disabled-context'
+import { useTable } from './table-context'
+
+export const Row = memo(
+  ({
+    children,
+    onClick,
+    disabled = false,
+    ...props
+  }: Omit<RowProps<any>, 'item'> & { disabled?: boolean }) => {
+    const { item, isSelected, setIsHovered, isHovered, index, isDirectlySelected } = useRow()
+    const { select, multiselect, setCursor, onBeforeSelectionChange, density } = useTable()
+
+    const handleClick = (event: React.MouseEvent) => {
+      // Check if selection change is allowed before updating cursor
+      if (onBeforeSelectionChange) {
+        const allowed = onBeforeSelectionChange(item, index)
+        if (allowed === false) {
+          // Prevent the default selection behavior from the library
+          // Note: The library may pass a non-standard event, so check methods exist
+          if (typeof event?.stopPropagation === 'function') {
+            event.stopPropagation()
+          }
+          if (typeof event?.preventDefault === 'function') {
+            event.preventDefault()
+          }
+          return
+        }
+      }
+
+      // Set cursor to the clicked row's index
+      setCursor(index)
+      // Call any existing onClick handler
+      if (onClick) {
+        onClick(event)
+      }
+    }
+
+    const handleMouseEnter = () => {
+      setIsHovered(true)
+    }
+
+    const handleMouseLeave = () => {
+      // Immediately reset hover state
+      setIsHovered(false)
+    }
+
+    // Cleanup effect to ensure hover state is reset on unmount
+    // This handles cases where onMouseLeave doesn't fire when moving quickly
+    // or when rows are unmounted in virtualized tables
+    useEffect(() => {
+      return () => {
+        setIsHovered(false)
+      }
+    }, [setIsHovered])
+
+    return (
+      <RowDisabledProvider value={disabled}>
+        <BaseRow
+          item={item}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onClick={handleClick}
+          data-row-index={index}
+          data-disabled={disabled || undefined}
+          {...props}
+        >
+          {(select || multiselect) && (
+            <Cell className="border-b border-gray-50 dark:border-zinc-800 stiff">
+              <div
+                className={cn(
+                  'flex flex-row-reverse items-center w-full',
+                  density === 'roomy' ? 'h-11' : 'h-8',
+                  {
+                    'bg-gray-50 dark:bg-zinc-800': isSelected || isHovered,
+                    'text-gray-300 dark:text-zinc-500': disabled,
+                  },
+                )}
+              >
+                {isDirectlySelected && (
+                  <div className="flex flex-row-reverse items-center h-7 text-xs font-medium">
+                    <div className="w-1 h-full bg-info rounded-sm" />
+                  </div>
+                )}
+              </div>
+            </Cell>
+          )}
+          {children}
+        </BaseRow>
+      </RowDisabledProvider>
+    )
+  },
+)

package/src/table/table-context.tsx

@@ -0,0 +1,127 @@
+import React, {
+  Dispatch,
+  FC,
+  ReactElement,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+import { IdState } from '@table-library/react-table-library/types/common'
+
+export type EditingCell = [number, number | string, number]
+export type TableDensity = 'dense' | 'roomy'
+
+export interface TableContextInterface {
+  columns: number
+  density: TableDensity
+  select: boolean
+  multiselect: boolean
+  keyboardNavigation: boolean
+  isEmpty: boolean
+  cursor: number | null
+  setCursor: Dispatch<SetStateAction<number | null>>
+  selectedRows: IdState
+  setSelectedRows: Dispatch<SetStateAction<IdState>>
+  editingCell: EditingCell | null
+  setEditingCell: Dispatch<SetStateAction<EditingCell | null>>
+  collapsedGroups: Array<number>
+  setCollapsedGroups: Dispatch<SetStateAction<Array<number>>>
+  /**
+   * Called before selection changes (on row click). Return false to cancel
+   * both cursor and selection updates. Useful for dirty state confirmation.
+   */
+  onBeforeSelectionChange?: (item: any, index: number | null) => boolean
+}
+
+const TableContext = createContext<TableContextInterface>({} as TableContextInterface)
+
+interface ProviderProps {
+  children: ReactElement
+  density?: TableDensity
+  select?: boolean
+  multiselect?: boolean
+  keyboardNavigation?: boolean
+  selectedRows?: IdState
+  setSelectedRows?: Dispatch<SetStateAction<IdState>>
+  editingCell?: EditingCell
+  setEditingCell?: Dispatch<SetStateAction<EditingCell | null>>
+  defaultCollapsedGroups?: Array<number>
+  columns: number
+  isEmpty: boolean
+  onBeforeSelectionChange?: (item: any, index: number | null) => boolean
+}
+
+const TableProvider: FC<ProviderProps> = ({
+  children,
+  density = 'dense',
+  select = false,
+  multiselect = false,
+  keyboardNavigation = true,
+  selectedRows: controlledSelectedRows,
+  setSelectedRows: setControlledSelectedRows,
+  editingCell: controlledEditingCell,
+  setEditingCell: setControlledEditingCell,
+  defaultCollapsedGroups = [],
+  columns,
+  isEmpty,
+  onBeforeSelectionChange,
+}) => {
+  const [selectedRows, setSelectedRows] = useState({} as IdState)
+  const [editingCell, setEditingCell] = useState<EditingCell | null>(null)
+  const [cursor, setCursor] = useState<number | null>(null)
+  const [collapsedGroups, setCollapsedGroups] = useState<Array<number>>(
+    () => defaultCollapsedGroups,
+  )
+
+  const resolvedSelectedRows = setControlledSelectedRows ? controlledSelectedRows : selectedRows
+  const resolvedSetSelectedRows = setControlledSelectedRows
+    ? setControlledSelectedRows
+    : setSelectedRows
+  const resolvedEditingCell = setControlledEditingCell ? controlledEditingCell : editingCell
+  const resolvedSetEditingCell = setControlledEditingCell
+    ? setControlledEditingCell
+    : setEditingCell
+
+  const value = useMemo(
+    () => ({
+      select,
+      multiselect,
+      keyboardNavigation,
+      density,
+      columns,
+      isEmpty,
+      cursor,
+      setCursor,
+      selectedRows: resolvedSelectedRows ?? ({} as IdState),
+      setSelectedRows: resolvedSetSelectedRows,
+      editingCell: resolvedEditingCell ?? null,
+      setEditingCell: resolvedSetEditingCell,
+      collapsedGroups,
+      setCollapsedGroups,
+      onBeforeSelectionChange,
+    }),
+    [
+      select,
+      multiselect,
+      keyboardNavigation,
+      density,
+      columns,
+      isEmpty,
+      cursor,
+      resolvedSelectedRows,
+      resolvedSetSelectedRows,
+      resolvedEditingCell,
+      resolvedSetEditingCell,
+      collapsedGroups,
+      onBeforeSelectionChange,
+    ],
+  )
+
+  return <TableContext.Provider value={value}>{children}</TableContext.Provider>
+}
+
+const useTable = () => useContext(TableContext)
+const TableConsumer = TableContext.Consumer
+export { useTable, TableProvider, TableContext, TableConsumer }

package/src/table/table-empty.tsx

@@ -0,0 +1,57 @@
+import React, { ReactElement, ReactNode, useMemo } from 'react'
+import { Header } from '@table-library/react-table-library/table'
+import { useTable } from './table-context'
+
+export interface TableEmptyProps {
+  header?: ReactElement
+  emptyButtonLabel?: ReactNode
+  emptyButtonText?: string
+  onClickEmptyButton?: () => void
+}
+
+export const TableEmpty = ({
+  header,
+  emptyButtonLabel = 'No items to display',
+  emptyButtonText,
+  onClickEmptyButton,
+}: TableEmptyProps) => {
+  const { columns, select } = useTable()
+
+  const showButton = useMemo(() => {
+    return Boolean(
+      typeof emptyButtonText === 'string' &&
+        emptyButtonText !== '' &&
+        typeof onClickEmptyButton === 'function',
+    )
+  }, [emptyButtonText, onClickEmptyButton])
+
+  return (
+    <>
+      {header && <Header>{header}</Header>}
+      <div
+        data-testid="table-empty-state"
+        className="flex flex-row items-center h-64 w-full min-h-32"
+        style={{
+          gridColumn: `span ${columns + (select ? 1 : 0)}`,
+        }}
+      >
+        <div className="flex w-full flex-col items-center gap-2.5 text-center text-sm font-medium text-gray-400 dark:text-zinc-200 pb-10">
+          <label htmlFor={showButton ? 'empty-table-button' : undefined}>{emptyButtonLabel}</label>
+          {showButton && (
+            <button
+              aria-label={emptyButtonText}
+              type="button"
+              onClick={onClickEmptyButton}
+              className="flex flex-col items-center group rounded outline-none font-medium cursor-pointer select-none transition duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-info/75 text-gray dark:text-zinc-200 focus-visible:bg-gray-100 dark:focus-visible:bg-zinc-800"
+              id="empty-table-button"
+            >
+              <div className="whitespace-nowrap rounded px-3 py-1 font-body text-xs font-medium tracking-normal bg-gray-100 group-hover:bg-gray-200/75 transition duration-200 ease-in-out group-active:scale-95 mx-auto dark:bg-zinc-800 dark:group-hover:bg-zinc-700">
+                {emptyButtonText}
+              </div>
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}