@postxl/generators 1.1.1 → 1.2.1

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

@@ -1,82 +0,0 @@
-import type { Cell, Table } 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'
-
-export type GanttCellProps<TData> = {
-  cell: Cell<TData, { start: Date; end: Date; barClassName?: string } | null>
-  table: Table<TData>
-  rowIndex: number
-  columnId: string
-  isEditing: boolean
-  isFocused: boolean
-  isSelected: boolean
-}
-
-export function GanttCell<TData>({
-  cell,
-  table,
-  rowIndex,
-  columnId,
-  isFocused,
-  isEditing,
-  isSelected,
-}: Readonly<GanttCellProps<TData>>) {
-  const initialValue = cell.getValue() as { start: Date; end: Date; barClassName?: string } | null
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const cellOpts = (cell.column.columnDef.meta as any)?.cell
-
-  const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart
-  const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd
-
-  const timelineStartMs = ts instanceof Date ? ts.getTime() : undefined
-  const timelineEndMs = te instanceof Date ? te.getTime() : undefined
-
-  if (!timelineStartMs || !timelineEndMs) {
-    return null
-  }
-
-  const timelineDurationMs = timelineEndMs - timelineStartMs
-  const hasValidDates = initialValue && initialValue.start instanceof Date && initialValue.end instanceof Date
-
-  const msUntilStart = hasValidDates ? initialValue.start.getTime() - timelineStartMs : 0
-  // end - start time considering timeline bounds
-  const barWidthMs = hasValidDates
-    ? Math.min(initialValue.end.getTime(), timelineEndMs) - Math.max(initialValue.start.getTime(), timelineStartMs)
-    : 0
-
-  return (
-    <DataGridCellWrapper
-      ref={containerRef}
-      cell={cell}
-      table={table}
-      rowIndex={rowIndex}
-      columnId={columnId}
-      isEditing={isEditing}
-      isFocused={isFocused}
-      isSelected={isSelected}
-      className="px-1"
-    >
-      <div className="size-full flex overflow-hidden">
-        {hasValidDates && (
-          <>
-            <div
-              className="shrink-0"
-              style={{
-                width: `${Math.max(0, (msUntilStart / timelineDurationMs) * 100)}%`,
-              }}
-            />
-            <div
-              className={cn('shrink-0 h-full rounded-sm bg-primary', initialValue.barClassName)}
-              style={{
-                width: `${(barWidthMs / timelineDurationMs) * 100}%`,
-              }}
-            />
-          </>
-        )}
-      </div>
-    </DataGridCellWrapper>
-  )
-}

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>
-  )
-}