@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/long-text-cell.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react'
+
+import { DataGridCellWrapper } from '@components/ui/data-grid/data-grid-cell-wrapper'
+import { useDebouncedCallback } from '@components/ui/data-grid/hooks/use-debounced-callback'
+import { Popover, PopoverAnchor, PopoverContent } from '@components/ui/popover/popover'
+import { Textarea } from '@components/ui/textarea/textarea'
+import { CellVariantProps } from './cell-variant-types'
+
+export function LongTextCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isEditing,
+  isSelected,
+}: Readonly<CellVariantProps<TData, string>>) {
+  const initialValue = cell.getValue()
+  const [value, setValue] = React.useState(initialValue ?? '')
+  const [open, setOpen] = React.useState(false)
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const meta = table.options.meta
+  const sideOffset = -(containerRef.current?.clientHeight ?? 0)
+
+  const prevInitialValueRef = React.useRef(initialValue)
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue
+    setValue(initialValue ?? '')
+  }
+
+  // Debounced auto-save (300ms delay)
+  const debouncedSave = useDebouncedCallback((newValue: string) => {
+    meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue })
+  }, 300)
+
+  const onSave = React.useCallback(() => {
+    // Immediately save any pending changes and close the popover
+    if (value !== initialValue) {
+      meta?.onDataUpdate?.({ rowIndex, columnId, value })
+    }
+    setOpen(false)
+    meta?.onCellEditingStop?.()
+  }, [meta, value, initialValue, rowIndex, columnId])
+
+  const onCancel = React.useCallback(() => {
+    // Restore the original value
+    setValue(initialValue ?? '')
+    meta?.onDataUpdate?.({ rowIndex, columnId, value: initialValue })
+    setOpen(false)
+    meta?.onCellEditingStop?.()
+  }, [meta, initialValue, rowIndex, columnId])
+
+  const onChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = event.target.value
+      setValue(newValue)
+      // Debounced auto-save
+      debouncedSave(newValue)
+    },
+    [debouncedSave],
+  )
+
+  const onOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      setOpen(isOpen)
+      if (!isOpen) {
+        // Immediately save any pending changes when closing
+        if (value !== initialValue) {
+          meta?.onDataUpdate?.({ rowIndex, columnId, value })
+        }
+        meta?.onCellEditingStop?.()
+      }
+    },
+    [meta, value, initialValue, rowIndex, columnId],
+  )
+
+  const onOpenAutoFocus: NonNullable<React.ComponentProps<typeof PopoverContent>['onOpenAutoFocus']> =
+    React.useCallback((event) => {
+      event.preventDefault()
+      if (textareaRef.current) {
+        textareaRef.current.focus()
+        const length = textareaRef.current.value.length
+        textareaRef.current.setSelectionRange(length, length)
+      }
+    }, [])
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isEditing && !open) {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          meta?.onCellEditingStop?.()
+        } else if (event.key === 'Tab') {
+          event.preventDefault()
+          // Save any pending changes
+          if (value !== initialValue) {
+            meta?.onDataUpdate?.({ rowIndex, columnId, value })
+          }
+          meta?.onCellEditingStop?.({
+            direction: event.shiftKey ? 'left' : 'right',
+          })
+        }
+      }
+    },
+    [isEditing, open, meta, value, initialValue, rowIndex, columnId],
+  )
+
+  const onTextareaKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        onCancel()
+      } else if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault()
+        onSave()
+      }
+      // Stop propagation to prevent grid navigation
+      event.stopPropagation()
+    },
+    [onCancel, onSave],
+  )
+
+  const onTextareaBlur = React.useCallback(() => {
+    // Immediately save any pending changes on blur
+    if (value !== initialValue) {
+      meta?.onDataUpdate?.({ rowIndex, columnId, value })
+    }
+    setOpen(false)
+    meta?.onCellEditingStop?.()
+  }, [meta, value, initialValue, rowIndex, columnId])
+
+  React.useEffect(() => {
+    if (isEditing && !open) {
+      setOpen(true)
+    }
+    if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) {
+      containerRef.current.focus()
+    }
+  }, [isFocused, isEditing, open, meta?.searchOpen, meta?.isScrolling])
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverAnchor asChild>
+        <DataGridCellWrapper
+          ref={containerRef}
+          cell={cell}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+          onKeyDown={onWrapperKeyDown}
+        >
+          <span data-slot="grid-cell-content">{value}</span>
+        </DataGridCellWrapper>
+      </PopoverAnchor>
+      <PopoverContent
+        data-grid-cell-editor=""
+        align="start"
+        side="bottom"
+        sideOffset={sideOffset}
+        className="w-[400px] rounded-none p-0"
+        onOpenAutoFocus={onOpenAutoFocus}
+      >
+        <Textarea
+          ref={textareaRef}
+          value={value}
+          onChange={onChange}
+          onKeyDown={onTextareaKeyDown}
+          onBlur={onTextareaBlur}
+          className="min-h-[150px] resize-none rounded-none border-0 shadow-none focus-visible:ring-0"
+          placeholder="Enter text..."
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/multi-select-cell.tsx

@@ -0,0 +1,284 @@
+import { CheckIcon, Cross2Icon } from '@radix-ui/react-icons'
+
+import * as React from 'react'
+
+import { Badge } from '@components/ui/badge/badge'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@components/ui/command/command'
+import { DataGridCellWrapper } from '@components/ui/data-grid/data-grid-cell-wrapper'
+import { getLineCount } from '@components/ui/data-grid/data-grid-utils'
+import { Popover, PopoverAnchor, PopoverContent } from '@components/ui/popover/popover'
+import { cn } from '@lib/utils'
+import { CellVariantProps } from './cell-variant-types'
+
+export function MultiSelectCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isEditing,
+  isSelected,
+}: Readonly<CellVariantProps<TData, string[]>>) {
+  const cellValue = React.useMemo(() => cell.getValue() ?? [], [cell])
+
+  const cellId = `${rowIndex}-${columnId}`
+  const prevCellIdRef = React.useRef(cellId)
+
+  const [selectedValues, setSelectedValues] = React.useState<string[]>(cellValue)
+  const [open, setOpen] = React.useState(false)
+  const [searchValue, setSearchValue] = React.useState('')
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const meta = table.options.meta
+  const cellOpts = cell.column.columnDef.meta?.cell
+  const options = cellOpts?.variant === 'multi-select' ? cellOpts.options : []
+  const sideOffset = -(containerRef.current?.clientHeight ?? 0)
+
+  if (prevCellIdRef.current !== cellId) {
+    prevCellIdRef.current = cellId
+    setSelectedValues(cellValue)
+    setOpen(false)
+    setSearchValue('')
+  }
+
+  const onValueChange = React.useCallback(
+    (value: string) => {
+      const newValues = selectedValues.includes(value)
+        ? selectedValues.filter((v) => v !== value)
+        : [...selectedValues, value]
+
+      setSelectedValues(newValues)
+      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues })
+      // Clear search input and focus back on input after selection
+      setSearchValue('')
+      queueMicrotask(() => inputRef.current?.focus())
+    },
+    [selectedValues, meta, rowIndex, columnId],
+  )
+
+  const removeValue = React.useCallback(
+    (valueToRemove: string, event?: React.MouseEvent) => {
+      event?.stopPropagation()
+      event?.preventDefault()
+      const newValues = selectedValues.filter((v) => v !== valueToRemove)
+      setSelectedValues(newValues)
+      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValues })
+      // Focus back on input after removing
+      setTimeout(() => inputRef.current?.focus(), 0)
+    },
+    [selectedValues, meta, rowIndex, columnId],
+  )
+
+  const clearAll = React.useCallback(() => {
+    setSelectedValues([])
+    meta?.onDataUpdate?.({ rowIndex, columnId, value: [] })
+    queueMicrotask(() => inputRef.current?.focus())
+  }, [meta, rowIndex, columnId])
+
+  const onOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      setOpen(isOpen)
+      if (!isOpen) {
+        setSearchValue('')
+        meta?.onCellEditingStop?.()
+      }
+    },
+    [meta],
+  )
+
+  const onOpenAutoFocus: NonNullable<React.ComponentProps<typeof PopoverContent>['onOpenAutoFocus']> =
+    React.useCallback((event) => {
+      event.preventDefault()
+      inputRef.current?.focus()
+    }, [])
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isEditing) {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          setSelectedValues(cellValue)
+          setSearchValue('')
+          setOpen(false)
+          meta?.onCellEditingStop?.()
+        } else if (event.key === 'Tab') {
+          event.preventDefault()
+          setSearchValue('')
+          setOpen(false)
+          meta?.onCellEditingStop?.({
+            direction: event.shiftKey ? 'left' : 'right',
+          })
+        }
+      }
+    },
+    [isEditing, cellValue, meta],
+  )
+
+  const onInputKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      // Handle backspace when input is empty - remove last selected item
+      if (event.key === 'Backspace' && searchValue === '' && selectedValues.length > 0) {
+        event.preventDefault()
+        const lastValue = selectedValues.at(-1)
+        if (lastValue) {
+          removeValue(lastValue)
+        }
+      }
+      // Prevent escape from propagating to close the popover immediately
+      // Let the command handle it first
+      if (event.key === 'Escape') {
+        event.stopPropagation()
+      }
+    },
+    [searchValue, selectedValues, removeValue],
+  )
+
+  React.useEffect(() => {
+    if (isEditing && !open) {
+      setOpen(true)
+    }
+    if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) {
+      containerRef.current.focus()
+    }
+  }, [isFocused, isEditing, open, meta?.searchOpen, meta?.isScrolling])
+
+  // Focus input when popover opens
+  React.useEffect(() => {
+    if (open && inputRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 0)
+    }
+  }, [open])
+
+  const displayLabels = selectedValues
+    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)
+    .filter(Boolean)
+
+  const rowHeight = table.options.meta?.rowHeight ?? 'short'
+
+  const lineCount = getLineCount(rowHeight)
+  const maxVisibleBadgeCount = lineCount * 3
+
+  const visibleLabels = displayLabels.slice(0, maxVisibleBadgeCount)
+  const hiddenBadgeCount = Math.max(0, displayLabels.length - maxVisibleBadgeCount)
+
+  return (
+    <DataGridCellWrapper
+      ref={containerRef}
+      cell={cell}
+      table={table}
+      rowIndex={rowIndex}
+      columnId={columnId}
+      isEditing={isEditing}
+      isFocused={isFocused}
+      isSelected={isSelected}
+      onKeyDown={onWrapperKeyDown}
+    >
+      {isEditing ? (
+        <Popover open={open} onOpenChange={onOpenChange}>
+          <PopoverAnchor asChild>
+            <div className="absolute inset-0" />
+          </PopoverAnchor>
+          <PopoverContent
+            data-grid-cell-editor=""
+            align="start"
+            sideOffset={sideOffset}
+            className="w-[300px] rounded-none p-0"
+            onOpenAutoFocus={onOpenAutoFocus}
+          >
+            <Command className="[&_[data-slot=command-input-wrapper]]:h-auto [&_[data-slot=command-input-wrapper]]:border-none [&_[data-slot=command-input-wrapper]]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden">
+              <div className="flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5">
+                {selectedValues.map((value) => {
+                  const option = options.find((opt) => opt.value === value)
+                  const label = option?.label ?? value
+
+                  return (
+                    <Badge key={value} variant="secondary" className="h-5 gap-1 px-1.5 text-xs">
+                      {label}
+                      <button
+                        type="button"
+                        onClick={(event) => removeValue(value, event)}
+                        onPointerDown={(event) => {
+                          event.preventDefault()
+                          event.stopPropagation()
+                        }}
+                      >
+                        <Cross2Icon className="size-3" />
+                      </button>
+                    </Badge>
+                  )
+                })}
+                <CommandInput
+                  ref={inputRef}
+                  value={searchValue}
+                  onValueChange={setSearchValue}
+                  onKeyDown={onInputKeyDown}
+                  placeholder="Search..."
+                  className="h-auto flex-1 p-0"
+                />
+              </div>
+              <CommandList className="max-h-full">
+                <CommandEmpty>No options found.</CommandEmpty>
+                <CommandGroup className="max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden">
+                  {options.map((option) => {
+                    const isSelected = selectedValues.includes(option.value)
+
+                    return (
+                      <CommandItem key={option.value} value={option.label} onSelect={() => onValueChange(option.value)}>
+                        <div
+                          className={cn(
+                            'flex size-4 items-center justify-center rounded-sm border border-neutral-200 border-neutral-900 dark:border-neutral-800 dark:border-neutral-50',
+                            isSelected
+                              ? 'bg-neutral-900 text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900'
+                              : 'opacity-50 [&_svg]:invisible',
+                          )}
+                        >
+                          <CheckIcon className="size-3" />
+                        </div>
+                        <span>{option.label}</span>
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+                {selectedValues.length > 0 && (
+                  <>
+                    <CommandSeparator />
+                    <CommandGroup>
+                      <CommandItem
+                        onSelect={clearAll}
+                        className="justify-center text-neutral-500 dark:text-neutral-400"
+                      >
+                        Clear all
+                      </CommandItem>
+                    </CommandGroup>
+                  </>
+                )}
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      ) : null}
+      {displayLabels.length > 0 ? (
+        <div className="flex flex-wrap items-center gap-1 overflow-hidden">
+          {visibleLabels.map((label, index) => (
+            <Badge key={selectedValues[index]} variant="secondary" className="h-5 shrink-0 px-1.5 text-xs">
+              {label}
+            </Badge>
+          ))}
+          {hiddenBadgeCount > 0 && (
+            <Badge variant="outline" className="h-5 shrink-0 px-1.5 text-neutral-500 text-xs dark:text-neutral-400">
+              +{hiddenBadgeCount}
+            </Badge>
+          )}
+        </div>
+      ) : null}
+    </DataGridCellWrapper>
+  )
+}

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

@@ -0,0 +1,167 @@
+import type { ColumnMeta } from '@tanstack/react-table'
+
+import * as React from 'react'
+import { DataGridCellWrapper } from '@components/ui/data-grid/data-grid-cell-wrapper'
+import { cn } from '@lib/utils'
+import { CellVariantProps } from './cell-variant-types'
+
+export function NumberCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isEditing,
+  isSelected,
+}: Readonly<CellVariantProps<TData, number>>) {
+  const initialValue = cell.getValue() as number | null
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const meta = table.options.meta
+  const colMeta = cell.column.columnDef.meta as ColumnMeta<TData, number>
+  const cellOptions = colMeta?.cell
+  // Normalize editable to a resolver function and memoize to avoid typeof checks per cell
+  const editableResolver = React.useMemo(() => {
+    const v = colMeta?.editable
+    if (v === undefined) {
+      return () => true
+    }
+    return typeof v === 'function' ? (v as (row: TData) => boolean) : () => Boolean(v)
+  }, [colMeta?.editable])
+  const isEditable = editableResolver(cell.row.original)
+  const {
+    min,
+    max,
+    step,
+    prefix = '',
+    suffix = '',
+    fallbackValue = '',
+  } = cellOptions?.variant === 'number' ? cellOptions : {}
+
+  // Keep an unformatted string for editing (no grouping separators)
+  const [editValue, setEditValue] = React.useState<string>(
+    initialValue !== null && initialValue !== undefined ? String(initialValue) : '',
+  )
+
+  const onBlur = React.useCallback(() => {
+    const numValue = editValue === '' ? null : Number(editValue)
+    if (numValue !== initialValue) {
+      meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue })
+    }
+    meta?.onCellEditingStop?.()
+  }, [meta, rowIndex, columnId, initialValue, editValue])
+
+  const onChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setEditValue(event.target.value)
+  }, [])
+
+  const parseNumValue = React.useCallback((): number | null => {
+    return editValue === '' ? null : Number(editValue)
+  }, [editValue])
+
+  const saveAndStop = React.useCallback(
+    (options?: { moveToNextRow?: boolean; direction?: 'left' | 'right' }) => {
+      const numValue = parseNumValue()
+      if (numValue !== initialValue) {
+        meta?.onDataUpdate?.({ rowIndex, columnId, value: numValue })
+      }
+      meta?.onCellEditingStop?.(options)
+    },
+    [parseNumValue, initialValue, meta, rowIndex, columnId],
+  )
+
+  const handleEditingKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        saveAndStop({ moveToNextRow: true })
+      } else if (event.key === 'Tab') {
+        event.preventDefault()
+        saveAndStop({ direction: event.shiftKey ? 'left' : 'right' })
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        setEditValue(initialValue !== null && initialValue !== undefined ? String(initialValue) : '')
+        inputRef.current?.blur()
+      }
+    },
+    [saveAndStop, initialValue],
+  )
+
+  const handleFocusedKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!isEditable) return
+
+      if (event.key === 'Backspace') {
+        setEditValue('')
+      } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+        setEditValue(event.key)
+      }
+    },
+    [isEditable],
+  )
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isEditing) {
+        handleEditingKeyDown(event)
+      } else if (isFocused) {
+        handleFocusedKeyDown(event)
+      }
+    },
+    [isEditing, isFocused, handleEditingKeyDown, handleFocusedKeyDown],
+  )
+
+  React.useEffect(() => {
+    setEditValue(initialValue !== null && initialValue !== undefined ? String(initialValue) : '')
+  }, [initialValue])
+
+  React.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+    if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) {
+      containerRef.current.focus()
+    }
+  }, [isFocused, isEditing, meta?.searchOpen, meta?.isScrolling])
+
+  return (
+    <DataGridCellWrapper
+      ref={containerRef}
+      cell={cell}
+      table={table}
+      rowIndex={rowIndex}
+      columnId={columnId}
+      isEditing={isEditing}
+      isFocused={isFocused}
+      isSelected={isSelected}
+      onKeyDown={onWrapperKeyDown}
+    >
+      {isEditing ? (
+        <input
+          ref={inputRef}
+          type="number"
+          value={editValue}
+          min={min}
+          max={max}
+          step={step}
+          onBlur={onBlur}
+          onChange={onChange}
+          className="w-full border-none bg-transparent p-0 outline-none"
+        />
+      ) : (
+        <span data-slot="grid-cell-content" className={cn('tabular-nums', colMeta?.align ?? 'text-right')}>
+          {initialValue === null || initialValue === undefined || editValue === '' ? (
+            fallbackValue
+          ) : (
+            <>
+              {prefix}
+              {initialValue.toLocaleString()}
+              {suffix}
+            </>
+          )}
+        </span>
+      )}
+    </DataGridCellWrapper>
+  )
+}

package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/react-node-cell.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+
+import { DataGridCellWrapper } from '@components/ui/data-grid/data-grid-cell-wrapper'
+import { CellVariantProps } from './cell-variant-types'
+
+export function ReactNodeCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isSelected,
+}: Readonly<CellVariantProps<TData, React.ReactNode>>) {
+  const children = cell.getValue()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  return (
+    <DataGridCellWrapper
+      ref={containerRef}
+      cell={cell}
+      table={table}
+      rowIndex={rowIndex}
+      columnId={columnId}
+      isEditing={false}
+      isFocused={isFocused}
+      isSelected={isSelected}
+      className="flex size-full justify-center"
+    >
+      {children ?? null}
+    </DataGridCellWrapper>
+  )
+}