@postxl/generators 1.1.0 → 1.2.0

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

@@ -1,175 +0,0 @@
-import { CheckIcon } from '@radix-ui/react-icons'
-
-import * as React from 'react'
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@components/ui/command/command'
-import { DataGridCellWrapper } from '@components/ui/data-grid/data-grid-cell-wrapper'
-import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select/select'
-
-import { CellVariantProps } from './cell-variant-types'
-
-export function SelectCell<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 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 === 'select' ? cellOpts.options : []
-  const hasSearch = (cellOpts?.variant === 'select' && cellOpts?.hasSearch) ?? false
-  const sideOffset = -(inputRef.current?.clientHeight ?? 0)
-
-  const onValueChange = React.useCallback(
-    (newValue: string) => {
-      setValue(newValue)
-      meta?.onDataUpdate?.({ rowIndex, columnId, value: newValue })
-      meta?.onCellEditingStop?.()
-    },
-    [meta, rowIndex, columnId],
-  )
-
-  const onOpenChange = React.useCallback(
-    (isOpen: boolean) => {
-      setOpen(isOpen)
-      if (!isOpen) {
-        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()
-          setValue(initialValue)
-          setOpen(false)
-          meta?.onCellEditingStop?.()
-        } else if (event.key === 'Tab') {
-          event.preventDefault()
-          setOpen(false)
-          meta?.onCellEditingStop?.({
-            direction: event.shiftKey ? 'left' : 'right',
-          })
-        }
-      }
-    },
-    [isEditing, initialValue, meta],
-  )
-
-  React.useEffect(() => {
-    setValue(initialValue)
-  }, [initialValue])
-
-  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])
-
-  const displayLabel = options.find((opt) => opt.value === value)?.label ?? value
-  let editingContent: React.ReactNode
-
-  if (hasSearch) {
-    editingContent = (
-      <Popover open={open} onOpenChange={onOpenChange}>
-        <PopoverTrigger asChild>
-          <div className="size-full items-start text-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden line-clamp-1">
-            {displayLabel}
-          </div>
-        </PopoverTrigger>
-        <PopoverContent
-          data-grid-cell-editor=""
-          align="start"
-          sideOffset={sideOffset}
-          className="max-w-[500px] w-full rounded-none p-0"
-          onOpenAutoFocus={onOpenAutoFocus}
-        >
-          <Command>
-            <CommandList>
-              <CommandInput ref={inputRef} placeholder="Search..." className="h-auto flex-1 p-0" />
-              <CommandEmpty>No results found.</CommandEmpty>
-              <CommandGroup>
-                {options.map((option) => (
-                  <CommandItem
-                    key={option.value}
-                    onSelect={() => {
-                      onValueChange(option.value)
-                    }}
-                  >
-                    <span>{option.label}</span>
-                    {value === option.value ? <CheckIcon className="ml-auto h-4 w-4" /> : null}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    )
-  } else {
-    editingContent = (
-      <Select value={value} onValueChange={onValueChange} open={open} onOpenChange={onOpenChange}>
-        <SelectTrigger className="size-full items-start text-start border-none p-0 shadow-none focus-visible:ring-0 dark:bg-transparent [&_svg]:hidden">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent
-          data-grid-cell-editor=""
-          // compensate for the wrapper padding
-          align="start"
-          alignOffset={-8}
-          sideOffset={-2}
-          className="min-w-[calc(var(--radix-select-trigger-width)+16px)]"
-        >
-          {options.map((option) => (
-            <SelectItem key={option.value} value={option.value} spacing="sm">
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    )
-  }
-  return (
-    <DataGridCellWrapper
-      ref={containerRef}
-      cell={cell}
-      table={table}
-      rowIndex={rowIndex}
-      columnId={columnId}
-      isEditing={isEditing}
-      isFocused={isFocused}
-      isSelected={isSelected}
-      onKeyDown={onWrapperKeyDown}
-    >
-      {isEditing ? editingContent : <span data-slot="grid-cell-content">{displayLabel}</span>}
-    </DataGridCellWrapper>
-  )
-}

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

@@ -1,138 +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 ShortTextCell<TData>({
-  cell,
-  table,
-  rowIndex,
-  columnId,
-  isEditing,
-  isFocused,
-  isSelected,
-}: Readonly<CellVariantProps<TData, string>>) {
-  const initialValue = cell.getValue()
-  const [value, setValue] = React.useState(initialValue)
-  const inputRef = React.useRef<HTMLInputElement>(null)
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const meta = table.options.meta
-  const colMeta = cell.column.columnDef.meta
-  // 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 onBlur = React.useCallback(() => {
-    const currentValue = inputRef.current?.value ?? ''
-    if (currentValue !== initialValue) {
-      meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue })
-    }
-    meta?.onCellEditingStop?.()
-  }, [meta, rowIndex, columnId, initialValue])
-  const onChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-  }, [])
-  const handleEditingKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'Enter') {
-        event.preventDefault()
-        const currentValue = inputRef.current?.value ?? ''
-        if (currentValue !== initialValue) {
-          meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue })
-        }
-        meta?.onCellEditingStop?.({ moveToNextRow: true })
-      } else if (event.key === 'Tab') {
-        event.preventDefault()
-        const currentValue = inputRef.current?.value ?? ''
-        if (currentValue !== initialValue) {
-          meta?.onDataUpdate?.({ rowIndex, columnId, value: currentValue })
-        }
-        meta?.onCellEditingStop?.({
-          direction: event.shiftKey ? 'left' : 'right',
-        })
-      } else if (event.key === 'Escape') {
-        event.preventDefault()
-        setValue(initialValue)
-        inputRef.current?.blur()
-      }
-    },
-    [initialValue, meta, rowIndex, columnId],
-  )
-
-  const handleFocusedKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
-        // For non-editable columns we must not change the displayed value when the user types while focused.
-        if (!isEditable) {
-          return
-        }
-
-        // Handle typing to pre-fill the value when editing starts
-        setValue(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(() => {
-    setValue(initialValue)
-  }, [initialValue])
-
-  React.useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length)
-    }
-    // Don't focus if we're in the middle of a scroll operation
-    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="text"
-          value={value ?? ''}
-          onBlur={onBlur}
-          onChange={onChange}
-          className="size-full bg-transparent outline-none"
-        />
-      ) : (
-        <div data-slot="grid-cell-content" className="size-full overflow-hidden outline-none">
-          {value}
-        </div>
-      )}
-    </DataGridCellWrapper>
-  )
-}

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

@@ -1,92 +0,0 @@
-import { useRef } from 'react'
-
-import { GanttTimerangePicker } from './gantt-timerange-picker'
-
-// Gantt header component rendering the timeline scale
-export const GanttTimeline = ({ header }: { header: any }) => {
-  const cellOpts = header.column.columnDef.meta?.cell
-  const containerRef = useRef<HTMLDivElement>(null)
-  if (!cellOpts) {
-    return null
-  }
-  const ts = cellOpts.dateRangeFrom ?? cellOpts.timelineStart
-  const te = cellOpts.dateRangeTo ?? cellOpts.timelineEnd
-  if (!(ts instanceof Date) || !(te instanceof Date)) {
-    return null
-  }
-  const timelineStartMs = ts.getTime()
-  const timelineEndMs = te.getTime()
-  if (timelineEndMs <= timelineStartMs) {
-    return null
-  }
-  const firstFullYear = ts.getFullYear() + 1
-  const totalYears = te.getFullYear() - ts.getFullYear() + 1
-
-  const scale = containerRef.current?.getBoundingClientRect().width
-    ? containerRef.current.getBoundingClientRect().width / (totalYears ?? 1)
-    : 1
-  const showMonths = scale / 12 >= 5
-
-  const timelineDurationMs = timelineEndMs - timelineStartMs
-  const firstYearPartialMs = new Date(firstFullYear, 0, 1).getTime() - timelineStartMs
-  const lastYearPartialMs = timelineEndMs - new Date(te.getFullYear(), 0, 1).getTime()
-
-  const firstMonthPartialMs = new Date(ts.getFullYear(), ts.getMonth() + 1, 1).getTime() - timelineStartMs
-  const lastMonthPartialMs = timelineEndMs - new Date(te.getFullYear(), te.getMonth(), 1).getTime()
-
-  return (
-    <>
-      <div className="absolute right-8 top-1/2 z-10 -translate-y-1/2">
-        <GanttTimerangePicker
-          initialDateFrom={cellOpts.dateRangeFrom ?? undefined}
-          initialDateTo={cellOpts.dateRangeTo ?? undefined}
-          onRangeChange={cellOpts.onRangeChange ?? undefined}
-          timelineStart={cellOpts.timelineStart}
-          timelineEnd={cellOpts.timelineEnd}
-        />
-      </div>
-      <div ref={containerRef} className="pointer-events-none absolute left-0 right-0 bottom-0 z-0 h-3 flex px-1">
-        {Array.from({ length: totalYears }, (_, i) => firstFullYear + i - 1).map((year, index) => (
-          /* distribute space between years with flex-grow except for first and last as they might only be partial */
-          <div
-            key={year}
-            className="h-full relative flex grow border-l border-muted-foreground/30 first:border-none first:grow-0 last:grow-0 overflow-hidden"
-            style={
-              // index == 0: first year, index == totalYears -1: last year
-              index == 0 || index == totalYears - 1
-                ? { width: `${((index == 0 ? firstYearPartialMs : lastYearPartialMs) / timelineDurationMs) * 100}%` }
-                : undefined
-            }
-          >
-            {showMonths && (
-              /* first month with calculated width as it might only be partial */
-              <div className="absolute bottom-0 left-0 right-0 flex h-1.5 w-full">
-                {index == 0 && ts.getMonth() < 11 && (
-                  <div
-                    className="h-full border-r border-dashed border-muted-foreground/30"
-                    style={{ width: `${(firstMonthPartialMs / firstYearPartialMs) * 100}%` }}
-                  />
-                )}
-                {/* distribute rest of space between months with flex-grow */}
-                {Array.from({
-                  length: (index == totalYears - 1 ? te.getMonth() : 12) - (index == 0 ? ts.getMonth() + 1 : 0),
-                }).map((_, monthIndex) => (
-                  <div
-                    key={`${year}-${monthIndex}`}
-                    className="grow h-full border-r border-dashed border-muted-foreground/30 last:border-0"
-                  />
-                ))}
-                {/* last month with calculated width as it might only be partial */}
-                {index == totalYears - 1 && te.getMonth() > 0 && (
-                  <div className="h-full" style={{ width: `${(lastMonthPartialMs / lastYearPartialMs) * 100}%` }} />
-                )}
-              </div>
-            )}
-
-            <span className="ps-0.5 -mt-px text-xs text-muted-foreground select-none z-1">{year}</span>
-          </div>
-        ))}
-      </div>
-    </>
-  )
-}