@postxl/generators 0.2.2

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

@@ -0,0 +1,360 @@
+import { CheckIcon, DragHandleHorizontalIcon, MixerHorizontalIcon } from '@radix-ui/react-icons'
+import type { Table } from '@tanstack/react-table'
+
+import * as React from 'react'
+
+import { Button } from '@components/ui/button/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@components/ui/command/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
+import { cn } from '@lib/utils'
+
+type DataGridViewMenuProps<TData> = {
+  table: Table<TData>
+} & React.ComponentProps<typeof PopoverContent>
+
+export function DataGridViewMenu<TData>({ table, ...props }: DataGridViewMenuProps<TData>) {
+  // Columns that are shown in the view menu. We include any column with an accessor
+  // so users can see the full column list, even when a column cannot be hidden.
+  const viewableColumns = React.useMemo(
+    () => table.getAllColumns().filter((column) => typeof column.accessorFn !== 'undefined'),
+    [table],
+  )
+
+  // Local order state for displaying items in the menu
+  const [order, setOrder] = React.useState<string[]>(() => {
+    const stateOrder = table.getState().columnOrder ?? []
+    if (stateOrder && stateOrder.length > 0) {
+      return stateOrder
+    }
+    return table.getAllColumns().map((c) => c.id)
+  })
+
+  // Search state for the CommandInput — used to conditionally show the empty state
+  const [searchQuery, setSearchQuery] = React.useState<string>('')
+
+  // Drag state
+  const [isDragging, setIsDragging] = React.useState(false)
+  const [insertionIndex, setInsertionIndex] = React.useState<number | null>(null)
+
+  // Keep order in sync with external changes to table state
+  React.useEffect(() => {
+    const stateOrder = table.getState().columnOrder ?? []
+    if (stateOrder && stateOrder.length > 0) {
+      setOrder(stateOrder)
+      return
+    }
+    setOrder(table.getAllColumns().map((c) => c.id))
+  }, [table])
+
+  const visibleSet = React.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns])
+
+  // Derive the ordered columns we will show in the menu (filter to hideable ones)
+  const orderedColumns = React.useMemo(() => {
+    const ordered: ReturnType<typeof table.getAllColumns>[0][] = []
+    for (const id of order) {
+      const col = viewableColumns.find((c) => c.id === id)
+      if (col) {
+        ordered.push(col)
+      }
+    }
+    // Add any missing viewable columns at the end
+    for (const col of viewableColumns) {
+      if (!ordered.find((c) => c.id === col.id)) {
+        ordered.push(col)
+      }
+    }
+    return ordered
+  }, [order, viewableColumns, table])
+
+  const draggingRef = React.useRef<string | null>(null)
+  const groupRef = React.useRef<HTMLDivElement | null>(null)
+
+  const getBaseOrder = React.useCallback((): string[] => {
+    return (
+      table.getState().columnOrder && table.getState().columnOrder.length
+        ? table.getState().columnOrder.slice()
+        : table.getAllColumns().map((c) => c.id)
+    ) as string[]
+  }, [table])
+
+  const computeInsertionIndex = React.useCallback(
+    (clientY: number) => {
+      const baseOrder = getBaseOrder()
+
+      const el = groupRef.current
+      if (!el) {
+        return baseOrder.length
+      }
+
+      const nodes = Array.from(el.querySelectorAll('[data-col-id]')) as HTMLElement[]
+      for (const node of nodes) {
+        const rect = node.getBoundingClientRect()
+        const mid = rect.top + rect.height / 2
+        if (clientY < mid) {
+          const id = node.dataset.colId as string
+          const pos = baseOrder.indexOf(id)
+          const newIndex = pos === -1 ? baseOrder.length : pos
+          return newIndex
+        }
+      }
+      return baseOrder.length
+    },
+    [getBaseOrder],
+  )
+
+  // moveItemInArray was removed; we compute insertion index directly on pointer drag
+
+  function onDragEnd() {
+    draggingRef.current = null
+    setIsDragging(false)
+    setInsertionIndex(null)
+  }
+
+  const doDrop = React.useCallback(
+    (dragId: string, toIndex: number) => {
+      // Build a base order that includes all columns (so hidden columns are preserved)
+      const baseOrder = (
+        table.getState().columnOrder && table.getState().columnOrder.length
+          ? table.getState().columnOrder.slice()
+          : table.getAllColumns().map((c) => c.id)
+      ) as string[]
+
+      const fromIndex = baseOrder.indexOf(dragId)
+      if (fromIndex === -1) {
+        onDragEnd()
+        return
+      }
+
+      const copy = baseOrder.slice()
+      copy.splice(fromIndex, 1)
+
+      // If the dragged element came from before the target index,
+      // removing it shifts indices left by 1, so adjust insertion index.
+      let insertAt = toIndex
+      if (fromIndex < toIndex) {
+        insertAt = toIndex - 1
+      }
+      insertAt = Math.min(Math.max(0, insertAt), copy.length)
+      copy.splice(insertAt, 0, dragId)
+
+      table.setColumnOrder(copy)
+
+      // Update our local order view (only for hideable columns)
+      setOrder(copy.filter((id) => visibleSet.has(id)))
+      onDragEnd()
+    },
+    [table, visibleSet],
+  )
+
+  const startPointerDrag = React.useCallback(
+    (e: React.PointerEvent, id: string) => {
+      e.preventDefault()
+      draggingRef.current = id
+      setIsDragging(true)
+      // initialize insertion index
+      setInsertionIndex(computeInsertionIndex(e.clientY))
+
+      const onMove = (ev: PointerEvent) => {
+        const idx = computeInsertionIndex(ev.clientY)
+        setInsertionIndex(idx)
+      }
+
+      const onUp = (ev: PointerEvent) => {
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', onUp)
+        const dragId = draggingRef.current
+        const toIndex = computeInsertionIndex(ev.clientY)
+        if (dragId) {
+          doDrop(dragId, toIndex)
+        }
+        draggingRef.current = null
+        setIsDragging(false)
+        setInsertionIndex(null)
+      }
+
+      window.addEventListener('pointermove', onMove)
+      window.addEventListener('pointerup', onUp)
+    },
+    [computeInsertionIndex, doDrop],
+  )
+
+  function insertionWouldBeNoOp(targetIndex: number | null) {
+    if (targetIndex === null) {
+      return false
+    }
+    const dragId = draggingRef.current
+    if (!dragId) {
+      return false
+    }
+    const base = getBaseOrder()
+    const fromIndex = base.indexOf(dragId)
+    if (fromIndex === -1) {
+      return false
+    }
+    let insertAt = targetIndex
+    if (fromIndex < targetIndex) {
+      insertAt = targetIndex - 1
+    }
+    return insertAt === fromIndex
+  }
+
+  const dragFromHandle = React.useRef(false)
+
+  function resetTableView() {
+    const defaultOrder = table.getAllColumns().map((c) => c.id)
+
+    try {
+      table.reset()
+    } finally {
+      // Clear persisted localStorage keys for this path
+      try {
+        if (typeof window !== 'undefined') {
+          const path = window.location.pathname || 'unknown'
+          const prefix = `pxl.dataGrid:${path}:`
+          const keys: string[] = []
+          for (let i = 0; i < localStorage.length; i++) {
+            const k = localStorage.key(i)
+            if (k && k.startsWith(prefix)) {
+              keys.push(k)
+            }
+          }
+          for (const k of keys) {
+            localStorage.removeItem(k)
+          }
+          // Also update the local menu order so the UI reflects the reset immediately
+          try {
+            setOrder(defaultOrder.filter((id) => visibleSet.has(id)))
+          } catch (_) {
+            // ignore
+          }
+        }
+      } catch (_) {
+        // ignore storage errors
+      }
+    }
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          aria-label="Toggle columns"
+          role="combobox"
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 font-normal lg:flex"
+        >
+          <MixerHorizontalIcon className="text-neutral-500 dark:text-neutral-400" />
+          View
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className={cn('w-56 p-0 m-4 mt-0', isDragging ? 'cursor-grabbing' : '')} {...props}>
+        <Command>
+          <CommandInput placeholder="Search columns..." onValueChange={setSearchQuery} />
+          <CommandList>
+            {searchQuery.trim() ? <CommandEmpty>No columns found.</CommandEmpty> : null}
+            <div ref={groupRef}>
+              <CommandGroup className="p-1">
+                {/* Insertion indicator at top */}
+                {isDragging && insertionIndex === 0 && !insertionWouldBeNoOp(0) ? (
+                  <div className="h-0.5 bg-accent w-full my-1 rounded" />
+                ) : null}
+                {orderedColumns.map((column) => {
+                  const currentBase = (
+                    table.getState().columnOrder && table.getState().columnOrder.length
+                      ? table.getState().columnOrder.slice()
+                      : table.getAllColumns().map((c) => c.id)
+                  ) as string[]
+                  const pos = currentBase.indexOf(column.id)
+                  const isHideable = column.getCanHide()
+                  return (
+                    <React.Fragment key={column.id}>
+                      <CommandItem
+                        value={column.id}
+                        data-col-id={column.id}
+                        className={cn(
+                          'flex items-center gap-2 px-2 py-1 rounded',
+                          !isDragging
+                            ? 'data-[selected=true]:bg-accent'
+                            : 'data-[selected=true]:bg-transparent cursor-grabbing',
+                          draggingRef.current === column.id && isDragging && 'bg-accent data-[selected=true]:bg-accent',
+                        )}
+                        onSelect={() => {
+                          if (dragFromHandle.current) {
+                            dragFromHandle.current = false
+                            return
+                          }
+                          if (!isHideable) {
+                            // Column cannot be hidden; do nothing when clicked.
+                            return
+                          }
+                          column.toggleVisibility(!column.getIsVisible())
+                        }}
+                      >
+                        <span
+                          onPointerDown={(e) => {
+                            if (searchQuery.trim() !== '') {
+                              return
+                            }
+
+                            dragFromHandle.current = true
+                            e.stopPropagation()
+                            e.preventDefault()
+                            startPointerDrag(e, column.id)
+                          }}
+                          className={cn(
+                            'size-4 text-neutral-400',
+                            searchQuery.trim() !== '' && 'opacity-10',
+                            searchQuery.trim() === '' && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),
+                          )}
+                        >
+                          <DragHandleHorizontalIcon />
+                        </span>
+                        <span className="truncate">{(column.columnDef.meta as any)?.label ?? column.id}</span>
+                        <CheckIcon
+                          className={cn(
+                            'ml-auto size-4 shrink-0',
+                            // Visible columns show the check; non-hideable columns show a muted check
+                            isHideable
+                              ? column.getIsVisible()
+                                ? 'opacity-100'
+                                : 'opacity-0'
+                              : 'opacity-50 text-neutral-400',
+                          )}
+                        />
+                      </CommandItem>
+
+                      {/* Insertion indicator after the item (between items) */}
+                      {isDragging && insertionIndex === pos + 1 && !insertionWouldBeNoOp(pos + 1) ? (
+                        <div className="h-0.5 bg-accent w-full my-1 rounded" />
+                      ) : null}
+                    </React.Fragment>
+                  )
+                })}
+              </CommandGroup>
+            </div>
+          </CommandList>
+        </Command>
+        <div className="border-t px-3 py-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              // Reset table state: order, visibility, pinning and sizing
+              resetTableView()
+            }}
+          >
+            Reset view
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,217 @@
+import { PlusIcon } from '@radix-ui/react-icons'
+import { flexRender } from '@tanstack/react-table'
+
+import * as React from 'react'
+
+import { DataGridColumnHeader } from '@components/ui/data-grid/data-grid-column-header'
+import { DataGridContextMenu } from '@components/ui/data-grid/data-grid-context-menu'
+import { DataGridRow } from '@components/ui/data-grid/data-grid-row'
+import { DataGridSearch } from '@components/ui/data-grid/data-grid-search'
+import { getCommonPinningStyles } from '@components/ui/data-grid/data-grid-utils'
+import type { useDataGrid } from '@components/ui/data-grid/hooks/use-data-grid'
+import { cn } from '@lib/utils'
+
+type DataGridProps<TData> = {
+  height?: number
+} & ReturnType<typeof useDataGrid<TData>> &
+  React.ComponentProps<'div'>
+
+export function DataGrid<TData>({
+  dataGridRef,
+  headerRef,
+  rowMapRef,
+  footerRef,
+  table,
+  rowVirtualizer,
+  height,
+  searchState,
+  columnSizeVars,
+  onRowAdd,
+  className,
+  ...props
+}: DataGridProps<TData>) {
+  const rows = table.getRowModel().rows
+  const columns = table.getAllColumns()
+
+  const meta = table.options.meta
+  const rowHeight = meta?.rowHeight ?? 'short'
+  const focusedCell = meta?.focusedCell ?? null
+
+  const onGridContextMenu = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault()
+  }, [])
+
+  const onAddRowKeyDown = React.useCallback(
+    async (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!onRowAdd) {
+        return
+      }
+
+      if (event.key === 'Enter' || event.key === '') {
+        event.preventDefault()
+        await onRowAdd()
+      }
+    },
+    [onRowAdd],
+  )
+
+  // calculate header/footer heights using simple measurements (no observers)
+  // previous fallbacks were header ~58 and footer ~13
+  const headerHeight = headerRef?.current?.clientHeight ?? 58
+  const footerHeight = onRowAdd ? (footerRef?.current?.clientHeight ?? 12) + 1 : 0
+
+  // if the grid has a horizontal scrollbar, measure its height so it doesn't overlap content
+  let scrollbarHeight = 0
+  if (dataGridRef?.current) {
+    const el = dataGridRef.current
+    if (el.scrollWidth > el.clientWidth) {
+      // offsetHeight - clientHeight approximates the scrollbar thickness (includes borders)
+      scrollbarHeight = Math.max(0, el.offsetHeight - el.clientHeight)
+    }
+  }
+
+  return (
+    <div data-slot="grid-wrapper" className={cn('relative flex w-full flex-col', className)} {...props}>
+      {searchState && <DataGridSearch {...searchState} />}
+      <DataGridContextMenu table={table} />
+      <div
+        role="grid"
+        aria-label="Data grid"
+        aria-rowcount={rows.length + (onRowAdd ? 1 : 0)}
+        aria-colcount={columns.length}
+        data-slot="grid"
+        tabIndex={0}
+        ref={dataGridRef}
+        className="relative grid select-none overflow-auto rounded-md border border-neutral-200 focus:outline-none dark:border-neutral-800"
+        style={{
+          ...columnSizeVars,
+          // dynamically include measured header/footer heights (falling back to previous magic numbers)
+          // include horizontal scrollbar height when present, and add a small buffer of 3px
+          height: `${Math.min(
+            rowVirtualizer.getTotalSize() + headerHeight + footerHeight + scrollbarHeight + 3,
+            height ?? Infinity,
+          )}px`,
+        }}
+        onContextMenu={onGridContextMenu}
+      >
+        <div
+          role="rowgroup"
+          data-slot="grid-header"
+          ref={headerRef}
+          className="sticky top-0 z-10 grid border-b bg-white dark:bg-neutral-950"
+        >
+          {table.getHeaderGroups().map((headerGroup, rowIndex) => (
+            <div
+              key={headerGroup.id}
+              role="row"
+              aria-rowindex={rowIndex + 1}
+              data-slot="grid-header-row"
+              tabIndex={-1}
+              className="flex w-full"
+            >
+              {headerGroup.headers.map((header, colIndex) => {
+                const sorting = table.getState().sorting
+                const currentSort = sorting.find((sort) => sort.id === header.column.id)
+                const isSortable = header.column.getCanSort()
+
+                return (
+                  <div
+                    key={header.id}
+                    role="columnheader"
+                    aria-colindex={colIndex + 1}
+                    aria-sort={
+                      currentSort?.desc === false
+                        ? 'ascending'
+                        : currentSort?.desc === true
+                          ? 'descending'
+                          : isSortable
+                            ? 'none'
+                            : undefined
+                    }
+                    data-slot="grid-header-cell"
+                    tabIndex={-1}
+                    className={cn('relative', {
+                      'border-r': header.column.id !== 'select',
+                    })}
+                    style={{
+                      ...getCommonPinningStyles({ column: header.column }),
+                      width: `calc(var(--header-${header.id}-size) * 1px)`,
+                    }}
+                  >
+                    {header.isPlaceholder ? null : typeof header.column.columnDef.header === 'function' ? (
+                      <div className="size-full px-3 py-1.5 bg-sidebar-accent/80 hover:bg-neutral-100/40 dark:hover:bg-neutral-800/40">
+                        {flexRender(header.column.columnDef.header, header.getContext())}
+                      </div>
+                    ) : (
+                      <DataGridColumnHeader header={header} table={table} />
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+        <div
+          role="rowgroup"
+          data-slot="grid-body"
+          className="relative grid"
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+          }}
+        >
+          {rowVirtualizer.getVirtualIndexes().map((virtualRowIndex) => {
+            const row = rows[virtualRowIndex]
+            if (!row) {
+              return null
+            }
+
+            return (
+              <DataGridRow
+                key={row.id}
+                row={row}
+                rowMapRef={rowMapRef}
+                virtualRowIndex={virtualRowIndex}
+                rowVirtualizer={rowVirtualizer}
+                rowHeight={rowHeight}
+                focusedCell={focusedCell}
+              />
+            )
+          })}
+        </div>
+        {onRowAdd && (
+          <div
+            role="rowgroup"
+            data-slot="grid-footer"
+            ref={footerRef}
+            className="sticky bottom-0 z-10 grid border-t bg-white dark:bg-neutral-950"
+          >
+            <div
+              role="row"
+              aria-rowindex={rows.length + 2}
+              data-slot="grid-add-row"
+              tabIndex={-1}
+              className="flex w-full"
+            >
+              <div
+                role="gridcell"
+                tabIndex={0}
+                className="relative flex h-9 grow items-center bg-neutral-100/30 transition-colors hover:bg-neutral-100/50 focus:bg-neutral-100/50 focus:outline-none dark:bg-neutral-800/30 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50"
+                style={{
+                  width: table.getTotalSize(),
+                  minWidth: table.getTotalSize(),
+                }}
+                onClick={onRowAdd}
+                onKeyDown={onAddRowKeyDown}
+              >
+                <div className="sticky left-0 flex items-center gap-2 px-3 text-neutral-500 dark:text-neutral-400">
+                  <PlusIcon className="size-3.5" />
+                  <span className="text-sm">Add row</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/dist/frontend-core/template/src/components/ui/data-grid/hooks/use-callback-ref.ts

@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+ */
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(callback: T | undefined): T {
+  const callbackRef = React.useRef(callback)
+
+  React.useEffect(() => {
+    callbackRef.current = callback
+  })
+
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, [])
+}
+
+export { useCallbackRef }