@postxl/generators 1.1.1 → 1.2.1

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

@@ -1,340 +0,0 @@
-import type { ColumnSort, Header, SortDirection, SortingState, Table } from '@tanstack/react-table'
-
-import {
-  BaselineIcon,
-  CalendarIcon,
-  CheckSquareIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  EyeOffIcon,
-  HashIcon,
-  ListChecksIcon,
-  ListIcon,
-  PinIcon,
-  PinOffIcon,
-  TextInitialIcon,
-  XIcon,
-} from 'lucide-react'
-import * as React from 'react'
-
-import type { Cell, ColumnMenuRendererFunction } from '@components/ui/data-grid/data-grid-types'
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@components/ui/dropdown-menu/dropdown-menu'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@components/ui/tooltip/tooltip'
-import { cn } from '@lib/utils'
-
-import { GanttTimeline } from './cell-variants/utils/gantt-timeline'
-
-function getColumnVariant(variant?: Cell['variant']): {
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
-  label: string
-} | null {
-  switch (variant) {
-    case 'short-text':
-      return { icon: BaselineIcon, label: 'Short text' }
-    case 'long-text':
-      return { icon: TextInitialIcon, label: 'Long text' }
-    case 'number':
-      return { icon: HashIcon, label: 'Number' }
-    case 'select':
-      return { icon: ListIcon, label: 'Select' }
-    case 'multi-select':
-      return { icon: ListChecksIcon, label: 'Multi-select' }
-    case 'checkbox':
-      return { icon: CheckSquareIcon, label: 'Checkbox' }
-    case 'date':
-      return { icon: CalendarIcon, label: 'Date' }
-    default:
-      return null
-  }
-}
-
-type DataGridColumnHeaderProps<TData, TValue> = {
-  header: Header<TData, TValue>
-  table: Table<TData>
-} & React.ComponentProps<typeof DropdownMenuTrigger>
-
-export function DataGridColumnHeader<TData, TValue>({
-  header,
-  table,
-  className,
-  onPointerDown,
-  ...props
-}: DataGridColumnHeaderProps<TData, TValue>) {
-  const [open, setOpen] = React.useState(false)
-
-  const column = header.column
-  const label = column.columnDef.meta?.label
-    ? column.columnDef.meta.label
-    : typeof column.columnDef.header === 'string'
-      ? column.columnDef.header
-      : column.id
-
-  const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn
-
-  const cellVariant = column.columnDef.meta?.cell
-  const columnVariant = getColumnVariant(cellVariant?.variant)
-
-  const pinnedPosition = column.getIsPinned()
-  const isPinnedLeft = pinnedPosition === 'left'
-  const isPinnedRight = pinnedPosition === 'right'
-
-  const onSortingChange = React.useCallback(
-    (direction: SortDirection) => {
-      table.setSorting((prev: SortingState) => {
-        const existingSortIndex = prev.findIndex((sort) => sort.id === column.id)
-        const newSort: ColumnSort = {
-          id: column.id,
-          desc: direction === 'desc',
-        }
-
-        if (existingSortIndex >= 0) {
-          const updated = [...prev]
-          updated[existingSortIndex] = newSort
-          return updated
-        } else {
-          return [...prev, newSort]
-        }
-      })
-    },
-    [column.id, table],
-  )
-
-  const onSortRemove = React.useCallback(() => {
-    table.setSorting((prev: SortingState) => prev.filter((sort) => sort.id !== column.id))
-  }, [column.id, table])
-
-  const onLeftPin = React.useCallback(() => {
-    column.pin('left')
-  }, [column])
-
-  const onRightPin = React.useCallback(() => {
-    column.pin('right')
-  }, [column])
-
-  const onUnpin = React.useCallback(() => {
-    column.pin(false)
-  }, [column])
-
-  const onTriggerPointerDown = React.useCallback(
-    (event: React.PointerEvent<HTMLButtonElement>) => {
-      onPointerDown?.(event)
-      if (event.defaultPrevented) {
-        return
-      }
-
-      if (event.button !== 0) {
-        return
-      }
-      table.options.meta?.onColumnClick?.(column.id)
-    },
-    [table.options.meta, column.id, onPointerDown],
-  )
-
-  return (
-    <>
-      <DropdownMenu open={open} onOpenChange={setOpen}>
-        <DropdownMenuTrigger
-          className={cn(
-            'flex size-full items-center justify-between gap-2 p-2 text-sm bg-sidebar-accent/80 font-bold hover:bg-secondary/40 data-[state=open]:bg-secondary/40 [&_svg]:size-4',
-            isAnyColumnResizing && 'pointer-events-none',
-            className,
-          )}
-          onPointerDown={onTriggerPointerDown}
-          {...props}
-        >
-          <div className="flex min-w-0 flex-1 items-center gap-1.5">
-            {columnVariant && (
-              <TooltipProvider>
-                <Tooltip delayDuration={100}>
-                  <TooltipTrigger asChild>
-                    <columnVariant.icon className="size-3.5 shrink-0 text-muted-foreground" />
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    <p>{columnVariant.label}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )}
-            <span className="truncate">{label}</span>
-          </div>
-          <ChevronDownIcon className="shrink-0 text-muted-foreground" />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" sideOffset={0} className="w-60">
-          {column.getCanSort() && (
-            <>
-              <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
-                checked={column.getIsSorted() === 'asc'}
-                onClick={() => onSortingChange('asc')}
-              >
-                <ChevronUpIcon />
-                Sort asc
-              </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
-                checked={column.getIsSorted() === 'desc'}
-                onClick={() => onSortingChange('desc')}
-              >
-                <ChevronDownIcon />
-                Sort desc
-              </DropdownMenuCheckboxItem>
-              {column.getIsSorted() && (
-                <DropdownMenuItem onClick={onSortRemove}>
-                  <XIcon />
-                  Remove sort
-                </DropdownMenuItem>
-              )}
-            </>
-          )}
-          {column.getCanPin() && (
-            <>
-              {column.getCanSort() && <DropdownMenuSeparator />}
-
-              {isPinnedLeft ? (
-                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onUnpin}>
-                  <PinOffIcon />
-                  Unpin from left
-                </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onLeftPin}>
-                  <PinIcon />
-                  Pin to left
-                </DropdownMenuItem>
-              )}
-              {isPinnedRight ? (
-                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onUnpin}>
-                  <PinOffIcon />
-                  Unpin from right
-                </DropdownMenuItem>
-              ) : (
-                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onRightPin}>
-                  <PinIcon />
-                  Pin to right
-                </DropdownMenuItem>
-              )}
-            </>
-          )}
-          {column.getCanHide() && (
-            <>
-              <DropdownMenuSeparator />
-              <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
-                checked={!column.getIsVisible()}
-                onClick={() => column.toggleVisibility(false)}
-              >
-                <EyeOffIcon />
-                Hide column
-              </DropdownMenuCheckboxItem>
-            </>
-          )}
-
-          {/* Render header menu footer (custom optional component) */}
-          {column.columnDef.meta?.headerMenuFooter && (
-            <>
-              <DropdownMenuSeparator />
-              <div className="dropdown-footer">
-                {isMenuRendererFunction(column.columnDef.meta.headerMenuFooter)
-                  ? column.columnDef.meta.headerMenuFooter({ column, open, onOpenChange: setOpen })
-                  : column.columnDef.meta.headerMenuFooter}
-              </div>
-            </>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      {/* Render any variant-provided header component from HeaderComponents. */}
-      {(() => {
-        const variant = column.columnDef.meta?.cell?.variant
-        const variantHeader = variant ? HeaderComponents[variant] : undefined
-        if (variantHeader) {
-          return variantHeader({ header, table })
-        }
-
-        return null
-      })()}
-
-      {/* Render custom column header component (optional columnDef.meta) */}
-      {column.columnDef.meta?.headerCustomComponent && (
-        <>
-          {isMenuRendererFunction(column.columnDef.meta.headerCustomComponent)
-            ? column.columnDef.meta.headerCustomComponent({ column })
-            : column.columnDef.meta.headerCustomComponent}
-        </>
-      )}
-
-      {header.column.getCanResize() && <DataGridColumnResizer header={header} table={table} label={label} />}
-    </>
-  )
-}
-
-const DataGridColumnResizer = React.memo(DataGridColumnResizerImpl, (prev, next) => {
-  const prevColumn = prev.header.column
-  const nextColumn = next.header.column
-
-  if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) {
-    return false
-  }
-
-  if (prev.label !== next.label) {
-    return false
-  }
-
-  return true
-}) as typeof DataGridColumnResizerImpl
-
-type DataGridColumnResizerProps<TData, TValue> = {
-  label: string
-} & DataGridColumnHeaderProps<TData, TValue>
-
-function DataGridColumnResizerImpl<TData, TValue>({ header, table, label }: DataGridColumnResizerProps<TData, TValue>) {
-  const defaultColumnDef = table._getDefaultColumnDef()
-
-  const onDoubleClick = React.useCallback(() => {
-    header.column.resetSize()
-  }, [header.column])
-
-  return (
-    <div
-      role="separator"
-      aria-orientation="vertical"
-      aria-label={`Resize ${label} column`}
-      aria-valuenow={header.column.getSize()}
-      aria-valuemin={defaultColumnDef.minSize}
-      aria-valuemax={defaultColumnDef.maxSize}
-      tabIndex={0}
-      className={cn(
-        'right-0 absolute top-0 z-50 h-full w-0 touch-none select-none cursor-ew-resize focus:outline-none',
-        // visible thin line (use right positioning and a stable 1px width)
-        "before:content-[''] before:absolute before:inset-y-0 before:right-0 before:translate-x-1/2 before:w-px before:h-full before:bg-accent-foreground/70 before:opacity-0 before:transition-opacity before:duration-150",
-        // large invisible hit area
-        "after:content-[''] after:absolute after:inset-y-0 after:right-0 after:translate-x-1/2 after:w-[18px] after:h-full after:bg-transparent",
-        header.column.getIsResizing() ? 'before:opacity-100 before:bg-accent-foreground' : 'hover:before:opacity-100',
-      )}
-      style={{ willChange: 'transform, opacity', transform: 'translateZ(0)' }}
-      onDoubleClick={onDoubleClick}
-      onMouseDown={header.getResizeHandler()}
-      onTouchStart={header.getResizeHandler()}
-    />
-  )
-}
-
-function isMenuRendererFunction<TData, TValue>(
-  value: React.ReactNode | ColumnMenuRendererFunction<TData, TValue>,
-): value is ColumnMenuRendererFunction<TData, TValue> {
-  return typeof value === 'function'
-}
-
-/**
- * Optional header components keyed by cell variant. Components receive { header, table } and
- * should return a React node (or null). This allows the column header to render variant-specific
- * header visuals without coupling the header implementation to variants.
- */
-export const HeaderComponents: Record<string, (props: any) => React.ReactNode | null> = {
-  gantt: (props) => <GanttTimeline {...props} />,
-}

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

@@ -1,271 +0,0 @@
-import { CopyIcon, EraserIcon, TrashIcon } from '@radix-ui/react-icons'
-import type { Table, TableMeta } from '@tanstack/react-table'
-
-import * as React from 'react'
-import { toast } from 'sonner'
-
-import type { UpdateCell } from '@components/ui/data-grid/data-grid-types'
-import { parseCellKey } from '@components/ui/data-grid/data-grid-utils'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@components/ui/dropdown-menu/dropdown-menu'
-
-type DataGridContextMenuProps<TData> = {
-  table: Table<TData>
-}
-
-export function DataGridContextMenu<TData>({ table }: DataGridContextMenuProps<TData>) {
-  const meta = table.options.meta
-  const contextMenu = meta?.contextMenu
-  const onContextMenuOpenChange = meta?.onContextMenuOpenChange
-  const selectionState = meta?.selectionState
-  const dataGridRef = meta?.dataGridRef
-  const onDataUpdate = meta?.onDataUpdate
-  const onRowsDelete = meta?.onRowsDelete
-
-  if (!contextMenu) {
-    return null
-  }
-
-  return (
-    <ContextMenu
-      table={table}
-      dataGridRef={dataGridRef}
-      contextMenu={contextMenu}
-      onContextMenuOpenChange={onContextMenuOpenChange}
-      selectionState={selectionState}
-      onDataUpdate={onDataUpdate}
-      onRowsDelete={onRowsDelete}
-    />
-  )
-}
-
-type ContextMenuProps<TData> = {
-  table: Table<TData>
-} & Pick<
-  TableMeta<TData>,
-  'dataGridRef' | 'onContextMenuOpenChange' | 'selectionState' | 'onDataUpdate' | 'onRowsDelete'
-> &
-  Required<Pick<TableMeta<TData>, 'contextMenu'>>
-
-const ContextMenu = React.memo(ContextMenuImpl, (prev, next) => {
-  if (prev.contextMenu.open !== next.contextMenu.open) {
-    return false
-  }
-  if (!next.contextMenu.open) {
-    return true
-  }
-  if (prev.contextMenu.x !== next.contextMenu.x) {
-    return false
-  }
-  if (prev.contextMenu.y !== next.contextMenu.y) {
-    return false
-  }
-
-  const prevSize = prev.selectionState?.selectedCells?.size ?? 0
-  const nextSize = next.selectionState?.selectedCells?.size ?? 0
-  if (prevSize !== nextSize) {
-    return false
-  }
-
-  return true
-}) as typeof ContextMenuImpl
-
-function ContextMenuImpl<TData>({
-  table,
-  dataGridRef,
-  contextMenu,
-  onContextMenuOpenChange,
-  selectionState,
-  onDataUpdate,
-  onRowsDelete,
-}: ContextMenuProps<TData>) {
-  const triggerStyle = React.useMemo<React.CSSProperties>(
-    () => ({
-      position: 'fixed',
-      left: `${contextMenu.x}px`,
-      top: `${contextMenu.y}px`,
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: 0,
-      border: 'none',
-      background: 'transparent',
-      pointerEvents: 'none',
-      opacity: 0,
-    }),
-    [contextMenu.x, contextMenu.y],
-  )
-
-  const onCloseAutoFocus: NonNullable<React.ComponentProps<typeof DropdownMenuContent>['onCloseAutoFocus']> =
-    React.useCallback(
-      (event) => {
-        event.preventDefault()
-        dataGridRef?.current?.focus()
-      },
-      [dataGridRef],
-    )
-
-  const onCopy = React.useCallback(async () => {
-    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
-      return
-    }
-
-    const rows = table.getRowModel().rows
-    const columnIds: string[] = []
-
-    const selectedCellsArray = Array.from(selectionState.selectedCells)
-    for (const cellKey of selectedCellsArray) {
-      const { columnId } = parseCellKey(cellKey)
-      if (columnId && !columnIds.includes(columnId)) {
-        columnIds.push(columnId)
-      }
-    }
-
-    const cellData = new Map<string, string>()
-    for (const cellKey of selectedCellsArray) {
-      const { rowIndex, columnId } = parseCellKey(cellKey)
-      const row = rows[rowIndex]
-      if (row) {
-        const cell = row.getVisibleCells().find((c) => c.column.id === columnId)
-        if (cell) {
-          const value = cell.getValue()
-          cellData.set(cellKey, String(value ?? ''))
-        }
-      }
-    }
-
-    const rowIndices = new Set<number>()
-    const colIndices = new Set<number>()
-
-    for (const cellKey of selectedCellsArray) {
-      const { rowIndex, columnId } = parseCellKey(cellKey)
-      rowIndices.add(rowIndex)
-      const colIndex = columnIds.indexOf(columnId)
-      if (colIndex >= 0) {
-        colIndices.add(colIndex)
-      }
-    }
-
-    const sortedRowIndices = Array.from(rowIndices).sort((a, b) => a - b)
-    const sortedColIndices = Array.from(colIndices).sort((a, b) => a - b)
-    const sortedColumnIds = sortedColIndices.map((i) => columnIds[i])
-
-    const tsvData = sortedRowIndices
-      .map((rowIndex) =>
-        sortedColumnIds
-          .map((columnId) => {
-            const cellKey = `${rowIndex}:${columnId}`
-            return cellData.get(cellKey) ?? ''
-          })
-          .join('\t'),
-      )
-      .join('\n')
-
-    await navigator.clipboard.writeText(tsvData)
-    toast.success(
-      `${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? 's' : ''} copied`,
-    )
-  }, [table, selectionState])
-
-  // Determine whether the selected cells are all editable. If any selected cell belongs to a non-editable column (meta.editable === false), disable the Clear action.
-  const canClear = React.useMemo(() => {
-    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
-      return false
-    }
-
-    const visibleCols = table.getVisibleLeafColumns()
-    const rows = table.getRowModel().rows
-
-    for (const cellKey of selectionState.selectedCells) {
-      const { rowIndex, columnId } = parseCellKey(cellKey)
-      if (!columnId) {
-        continue
-      }
-      const col = visibleCols.find((c) => c.id === columnId)
-      const editable = col?.columnDef?.meta?.editable
-
-      if (editable === false) {
-        return false
-      }
-
-      if (typeof editable === 'function') {
-        const row = rows[rowIndex]
-        if (row && !editable(row.original)) {
-          return false
-        }
-      }
-    }
-
-    return true
-  }, [selectionState, table])
-
-  const onClear = React.useCallback(() => {
-    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
-      return
-    }
-
-    if (!canClear) {
-      return
-    }
-
-    const updates: UpdateCell[] = []
-
-    for (const cellKey of selectionState.selectedCells) {
-      const { rowIndex, columnId } = parseCellKey(cellKey)
-      updates.push({ rowIndex, columnId, value: '' })
-    }
-
-    onDataUpdate?.(updates)
-
-    toast.success(`${updates.length} cell${updates.length !== 1 ? 's' : ''} cleared`)
-  }, [onDataUpdate, selectionState, canClear])
-
-  const onDelete = React.useCallback(async () => {
-    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
-      return
-    }
-
-    const rowIndices = new Set<number>()
-    for (const cellKey of selectionState.selectedCells) {
-      const { rowIndex } = parseCellKey(cellKey)
-      rowIndices.add(rowIndex)
-    }
-
-    const rowIndicesArray = Array.from(rowIndices).sort((a, b) => a - b)
-    const rowCount = rowIndicesArray.length
-
-    await onRowsDelete?.(rowIndicesArray)
-
-    toast.success(`${rowCount} row${rowCount !== 1 ? 's' : ''} deleted`)
-  }, [onRowsDelete, selectionState])
-
-  return (
-    <DropdownMenu open={contextMenu.open} onOpenChange={onContextMenuOpenChange}>
-      <DropdownMenuTrigger style={triggerStyle} />
-      <DropdownMenuContent data-grid-popover="" align="start" className="w-48" onCloseAutoFocus={onCloseAutoFocus}>
-        <DropdownMenuItem onSelect={onCopy}>
-          <CopyIcon />
-          Copy
-        </DropdownMenuItem>
-        <DropdownMenuItem onSelect={onClear} disabled={!canClear}>
-          <EraserIcon />
-          Clear
-        </DropdownMenuItem>
-        {onRowsDelete && (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem variant="destructive" onSelect={onDelete}>
-              <TrashIcon />
-              Delete rows
-            </DropdownMenuItem>
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}