@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-search.tsx

@@ -0,0 +1,211 @@
+import { ChevronDownIcon, ChevronUpIcon, Cross2Icon } from '@radix-ui/react-icons'
+
+import * as React from 'react'
+
+import { Button } from '@components/ui/button/button'
+import type { SearchState } from '@components/ui/data-grid/data-grid-types'
+import { useDebouncedCallback } from '@components/ui/data-grid/hooks/use-debounced-callback'
+import { Input } from '@components/ui/input/input'
+
+type DataGridSearchProps = {} & SearchState
+
+export const DataGridSearch = React.memo(DataGridSearchImpl, (prev, next) => {
+  if (prev.searchOpen !== next.searchOpen) {
+    return false
+  }
+
+  if (!next.searchOpen) {
+    return true
+  }
+
+  if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) {
+    return false
+  }
+
+  if (prev.searchMatches.length !== next.searchMatches.length) {
+    return false
+  }
+
+  for (let i = 0; i < prev.searchMatches.length; i++) {
+    const prevMatch = prev.searchMatches[i]
+    const nextMatch = next.searchMatches[i]
+
+    if (!prevMatch || !nextMatch) {
+      return false
+    }
+
+    if (prevMatch.rowIndex !== nextMatch.rowIndex || prevMatch.columnId !== nextMatch.columnId) {
+      return false
+    }
+  }
+
+  return true
+})
+
+function DataGridSearchImpl({
+  searchMatches,
+  matchIndex,
+  searchOpen,
+  onSearchOpenChange,
+  searchQuery,
+  onSearchQueryChange,
+  onSearch,
+  onNavigateToNextMatch,
+  onNavigateToPrevMatch,
+}: DataGridSearchProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (searchOpen) {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus()
+      })
+    }
+  }, [searchOpen])
+
+  React.useEffect(() => {
+    if (!searchOpen) {
+      return
+    }
+
+    function onEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        onSearchOpenChange(false)
+      }
+    }
+
+    document.addEventListener('keydown', onEscape)
+    return () => document.removeEventListener('keydown', onEscape)
+  }, [searchOpen, onSearchOpenChange])
+
+  const onKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      event.stopPropagation()
+
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        if (event.shiftKey) {
+          onNavigateToPrevMatch()
+        } else {
+          onNavigateToNextMatch()
+        }
+      }
+    },
+    [onNavigateToNextMatch, onNavigateToPrevMatch],
+  )
+
+  const debouncedSearch = useDebouncedCallback((query: string) => {
+    onSearch(query)
+  }, 150)
+
+  const onChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value
+      onSearchQueryChange(value)
+      debouncedSearch(value)
+    },
+    [onSearchQueryChange, debouncedSearch],
+  )
+
+  const onTriggerPointerDown = React.useCallback((event: React.PointerEvent<HTMLButtonElement>) => {
+    // prevent implicit pointer capture
+    const target = event.target
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+    if (target.hasPointerCapture(event.pointerId)) {
+      target.releasePointerCapture(event.pointerId)
+    }
+
+    // Only prevent default if we're not clicking on the input
+    // This allows text selection in the input while still preventing focus stealing elsewhere
+    if (
+      event.button === 0 &&
+      event.ctrlKey === false &&
+      event.pointerType === 'mouse' &&
+      !(event.target instanceof HTMLInputElement)
+    ) {
+      event.preventDefault()
+    }
+  }, [])
+
+  const onPrevMatchPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => onTriggerPointerDown(event),
+    [onTriggerPointerDown],
+  )
+
+  const onNextMatchPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => onTriggerPointerDown(event),
+    [onTriggerPointerDown],
+  )
+
+  const onClose = React.useCallback(() => {
+    onSearchOpenChange(false)
+  }, [onSearchOpenChange])
+
+  if (!searchOpen) {
+    return null
+  }
+
+  return (
+    <div
+      role="search"
+      data-slot="grid-search"
+      className="fade-in-0 slide-in-from-top-2 absolute top-4 right-4 z-50 flex animate-in flex-col gap-2 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-950"
+    >
+      <div className="flex items-center gap-2">
+        <Input
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          placeholder="Find in table..."
+          className="h-8 w-64"
+          ref={inputRef}
+          value={searchQuery}
+          onChange={onChange}
+          onKeyDown={onKeyDown}
+        />
+        <div className="flex items-center gap-1">
+          <Button
+            aria-label="Previous match"
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            onClick={onNavigateToPrevMatch}
+            onPointerDown={onPrevMatchPointerDown}
+            disabled={searchMatches.length === 0}
+          >
+            <ChevronUpIcon />
+          </Button>
+          <Button
+            aria-label="Next match"
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            onClick={onNavigateToNextMatch}
+            onPointerDown={onNextMatchPointerDown}
+            disabled={searchMatches.length === 0}
+          >
+            <ChevronDownIcon />
+          </Button>
+          <Button aria-label="Close search" variant="ghost" size="icon" className="size-7" onClick={onClose}>
+            <Cross2Icon />
+          </Button>
+        </div>
+      </div>
+      <div className="flex items-center gap-1 whitespace-nowrap text-neutral-500 text-xs dark:text-neutral-400">
+        {searchMatches.length > 0 ? (
+          <span>
+            {matchIndex + 1} of {searchMatches.length}
+          </span>
+        ) : searchQuery ? (
+          <span>No results</span>
+        ) : (
+          <span>Type to search</span>
+        )}
+      </div>
+    </div>
+  )
+}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-types.ts

@@ -0,0 +1,151 @@
+import { RowData } from '@tanstack/react-table'
+
+import { ISODateRange } from './cell-variants/utils/gantt-timerange-picker'
+
+export type RowHeightValue = 'short' | 'medium' | 'tall' | 'extra-tall'
+
+export type CellSelectOption = {
+  label: string
+  value: string
+}
+
+export type Cell =
+  | {
+      variant: 'short-text'
+    }
+  | {
+      variant: 'long-text'
+    }
+  | {
+      variant: 'number'
+      min?: number
+      max?: number
+      step?: number
+      prefix?: string
+      suffix?: string
+      fallbackValue?: string
+    }
+  | {
+      variant: 'select'
+      options: CellSelectOption[]
+      hasSearch?: boolean
+    }
+  | {
+      variant: 'multi-select'
+      options: CellSelectOption[]
+    }
+  | {
+      variant: 'checkbox'
+    }
+  | {
+      variant: 'date'
+    }
+  | {
+      variant: 'react-node'
+    }
+  | {
+      variant: 'gantt'
+      timelineStart: Date
+      timelineEnd: Date
+      dateRangeFrom?: Date
+      dateRangeTo?: Date
+      onRangeChange?: (values: ISODateRange | undefined) => void
+    }
+
+export type UpdateCell = {
+  rowIndex: number
+  columnId: string
+  value: unknown
+}
+
+declare module '@tanstack/react-table' {
+  // biome-ignore lint/correctness/noUnusedVariables lint/correctness/noUnusedVariables: TData and TValue are used in the ColumnMeta interface
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    label?: string
+    cell?: Cell
+    align?: 'left' | 'right' | 'center'
+    className?: string | ((row: TData) => string | undefined)
+    editable?: boolean | ((row: TData) => boolean)
+  }
+  // biome-ignore lint/correctness/noUnusedVariables: TData is used in the TableMeta interface
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-unused-vars
+  interface TableMeta<TData extends RowData> {
+    dataGridRef?: React.RefObject<HTMLElement | null>
+    focusedCell?: CellPosition | null
+    editingCell?: CellPosition | null
+    selectionState?: SelectionState
+    searchOpen?: boolean
+    isScrolling?: boolean
+    getIsCellSelected?: (rowIndex: number, columnId: string) => boolean
+    getIsSearchMatch?: (rowIndex: number, columnId: string) => boolean
+    getIsActiveSearchMatch?: (rowIndex: number, columnId: string) => boolean
+    onDataUpdate?: (props: UpdateCell | UpdateCell[]) => void
+    /**
+     * Called for each individual cell update. Receives a single UpdateCell.
+     * Use this to implement field-level updates (id + column + value).
+     */
+    onCellChange?: (update: UpdateCell) => void
+    onRowsDelete?: (rowIndices: number[]) => void | Promise<void>
+    onColumnClick?: (columnId: string) => void
+    onCellClick?: (rowIndex: number, columnId: string, event?: React.MouseEvent) => void
+    onCellDoubleClick?: (rowIndex: number, columnId: string) => void
+    onCellMouseDown?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void
+    onCellMouseEnter?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void
+    onCellMouseUp?: () => void
+    onCellContextMenu?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void
+    onCellEditingStart?: (rowIndex: number, columnId: string) => void
+    onCellEditingStop?: (opts?: { direction?: NavigationDirection; moveToNextRow?: boolean }) => void
+    contextMenu?: ContextMenuState
+    onContextMenuOpenChange?: (open: boolean) => void
+    rowHeight?: RowHeightValue
+    onRowHeightChange?: (value: RowHeightValue) => void
+    onRowSelect?: (rowIndex: number, checked: boolean, shiftKey: boolean) => void
+  }
+}
+
+export type CellPosition = {
+  rowIndex: number
+  columnId: string
+}
+
+export type CellRange = {
+  start: CellPosition
+  end: CellPosition
+}
+
+export type SelectionState = {
+  selectedCells: Set<string>
+  selectionRange: CellRange | null
+  isSelecting: boolean
+}
+
+export type ContextMenuState = {
+  open: boolean
+  x: number
+  y: number
+}
+
+export type NavigationDirection =
+  | 'up'
+  | 'down'
+  | 'left'
+  | 'right'
+  | 'home'
+  | 'end'
+  | 'ctrl+home'
+  | 'ctrl+end'
+  | 'pageup'
+  | 'pagedown'
+
+export type SearchState = {
+  searchMatches: CellPosition[]
+  matchIndex: number
+  searchOpen: boolean
+  onSearchOpenChange: (open: boolean) => void
+  searchQuery: string
+  onSearchQueryChange: (query: string) => void
+  onSearch: (query: string) => void
+  onNavigateToNextMatch: () => void
+  onNavigateToPrevMatch: () => void
+}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-utils.ts

@@ -0,0 +1,78 @@
+import type { Column } from '@tanstack/react-table'
+
+import type { CellPosition, RowHeightValue } from '@components/ui/data-grid/data-grid-types'
+
+export function getCellKey(rowIndex: number, columnId: string) {
+  return `${rowIndex}:${columnId}`
+}
+
+export function parseCellKey(cellKey: string): Required<CellPosition> {
+  const parts = cellKey.split(':')
+  const rowIndexStr = parts[0]
+  const columnId = parts[1]
+  if (rowIndexStr && columnId) {
+    const rowIndex = parseInt(rowIndexStr, 10)
+    if (!Number.isNaN(rowIndex)) {
+      return { rowIndex, columnId }
+    }
+  }
+  return { rowIndex: 0, columnId: '' }
+}
+
+export function getRowHeightValue(rowHeight: RowHeightValue): number {
+  // TODO: find a way to use the css variable directly (currently the style might not be loaded yet which would lead to wrong numbers)
+  const lineHeight = /* Number.parseFloat(
+    getComputedStyle(document.documentElement)
+      .getPropertyValue('--line-height-sm')
+      .trim()
+      .replaceAll(/[^\d.-]/g, ''),
+  ) */ 16
+  /* const rowHeightMap: Record<RowHeightValue, number> = {
+    short: lineHeight * getLineCount(rowHeight) + 12,
+    medium: lineHeight * getLineCount(rowHeight) + 12,
+    tall: lineHeight * getLineCount(rowHeight) + 12,
+    'extra-tall': lineHeight * getLineCount(rowHeight) + 12,
+  } */
+
+  return /* rowHeightMap[rowHeight] */ lineHeight * getLineCount(rowHeight) + 12
+}
+
+export function getLineCount(rowHeight: RowHeightValue): number {
+  const lineCountMap: Record<RowHeightValue, number> = {
+    short: 1,
+    medium: 2,
+    tall: 3,
+    'extra-tall': 4,
+  }
+
+  return lineCountMap[rowHeight]
+}
+
+export function getCommonPinningStyles<TData>({
+  column,
+  withBorder = false,
+}: {
+  column: Column<TData>
+  withBorder?: boolean
+}): React.CSSProperties {
+  const isPinned = column.getIsPinned()
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left')
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right')
+
+  return {
+    boxShadow: withBorder
+      ? isLastLeftPinnedColumn
+        ? '-4px 0 4px var(--border) inset'
+        : isFirstRightPinnedColumn
+          ? '4px 0 -4px var(--border) inset'
+          : undefined
+      : undefined,
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+    opacity: isPinned ? 0.97 : 1,
+    position: isPinned ? 'sticky' : 'relative',
+    background: isPinned ? 'var(--background)' : 'var(--background)',
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : undefined,
+  }
+}