@postxl/generators 1.1.0 → 1.2.0

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

@@ -1,123 +0,0 @@
-import { flexRender, type Row } from '@tanstack/react-table'
-import type { Virtualizer } from '@tanstack/react-virtual'
-
-import * as React from 'react'
-
-import type { CellPosition, RowHeightValue } from '@components/ui/data-grid/data-grid-types'
-import { getCommonPinningStyles, getLineCount } from '@components/ui/data-grid/data-grid-utils'
-import { useComposedRefs } from '@lib/compose-refs'
-import { cn } from '@lib/utils'
-
-type DataGridRowProps<TData> = {
-  row: Row<TData>
-  rowVirtualizer: Virtualizer<HTMLDivElement, Element>
-  virtualRowIndex: number
-  rowMapRef: React.RefObject<Map<number, HTMLDivElement>>
-  rowHeight: RowHeightValue
-  focusedCell: CellPosition | null
-} & React.ComponentProps<'div'>
-
-export const DataGridRow = React.memo(DataGridRowImpl, (prev, next) => {
-  if (prev.row.id !== next.row.id) {
-    return false
-  }
-
-  // Check if the actual row data has changed
-  if (prev.row.original !== next.row.original) {
-    return false
-  }
-
-  const prevRowIndex = prev.virtualRowIndex
-  const nextRowIndex = next.virtualRowIndex
-
-  const prevHasFocus = prev.focusedCell?.rowIndex === prevRowIndex
-  const nextHasFocus = next.focusedCell?.rowIndex === nextRowIndex
-
-  if (prevHasFocus !== nextHasFocus) {
-    return false
-  }
-
-  if (nextHasFocus && prevHasFocus) {
-    const prevFocusedCol = prev.focusedCell?.columnId
-    const nextFocusedCol = next.focusedCell?.columnId
-    if (prevFocusedCol !== nextFocusedCol) {
-      return false
-    }
-  }
-
-  return next.rowVirtualizer.isScrolling
-}) as typeof DataGridRowImpl
-
-function DataGridRowImpl<TData>({
-  row,
-  virtualRowIndex,
-  rowVirtualizer,
-  rowMapRef,
-  rowHeight,
-  focusedCell,
-  ref,
-  className,
-  ...props
-}: DataGridRowProps<TData>) {
-  const rowRef = useComposedRefs(ref, (node) => {
-    if (node && typeof virtualRowIndex !== 'undefined') {
-      rowVirtualizer.measureElement(node)
-      rowMapRef.current.set(virtualRowIndex, node)
-    }
-  })
-
-  const isRowSelected = row.getIsSelected()
-
-  return (
-    <div
-      key={row.id}
-      role="row"
-      aria-rowindex={virtualRowIndex + 2}
-      aria-selected={isRowSelected}
-      data-index={virtualRowIndex}
-      data-slot="grid-row"
-      ref={rowRef}
-      tabIndex={-1}
-      className={cn(
-        'absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]',
-        className,
-      )}
-      style={{ '--line-count': `${getLineCount(rowHeight)}` } as React.CSSProperties}
-      {...props}
-    >
-      {row.getVisibleCells().map((cell, colIndex) => {
-        const isCellFocused = focusedCell?.rowIndex === virtualRowIndex && focusedCell?.columnId === cell.column.id
-
-        return (
-          <div
-            key={cell.id}
-            role="gridcell"
-            aria-colindex={colIndex + 1}
-            data-highlighted={isCellFocused ? '' : undefined}
-            data-slot="grid-cell"
-            tabIndex={-1}
-            className={cn({
-              'border-r': cell.column.id !== 'select',
-            })}
-            style={{
-              ...getCommonPinningStyles({ column: cell.column }),
-              width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
-            }}
-          >
-            {typeof cell.column.columnDef.header === 'function' ? (
-              <div
-                className={cn('size-full px-3 py-1.5', {
-                  'bg-accent-foreground/10': isRowSelected,
-                })}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </div>
-            ) : (
-              flexRender(cell.column.columnDef.cell, cell.getContext())
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}

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

@@ -1,211 +0,0 @@
-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-border bg-background p-2 shadow-lg"
-    >
-      <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-muted-foreground">
-        {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

@@ -1,159 +0,0 @@
-import { Column, 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
-}
-
-export type ColumnMenuRendererFunction<TData extends RowData, TValue> = (args: {
-  column: Column<TData, TValue>
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}) => React.ReactNode
-
-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
-  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)
-    headerMenuFooter?: React.ReactNode | ColumnMenuRendererFunction<TData, TValue>
-    headerCustomComponent?: React.ReactNode | ColumnMenuRendererFunction<TData, TValue>
-  }
-  // 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

@@ -1,67 +0,0 @@
-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: Make lineHeight configurable / use css variable: --data-grid-line-height
-  const lineHeight = 16
-
-  return 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,
-  }
-}