@postxl/generators 1.1.0 → 1.2.0

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

@@ -1,180 +0,0 @@
-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

@@ -1,280 +0,0 @@
-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-border',
-                            isSelected ? 'bg-accent-foreground text-secondary' : '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-muted-foreground">
-                        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-muted-foreground text-xs">
-              +{hiddenBadgeCount}
-            </Badge>
-          )}
-        </div>
-      ) : null}
-    </DataGridCellWrapper>
-  )
-}

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

@@ -1,169 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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 p-0"
-    >
-      {children ?? null}
-    </DataGridCellWrapper>
-  )
-}