@postxl/generators 0.2.2

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

@@ -0,0 +1,330 @@
+/* Modified DateRangePicker based DateRangePicker by John Polacek (https://github.com/johnpolacek/date-range-picker-for-shadcn) (MIT License) */
+
+import { CalendarIcon, Cross2Icon } from '@radix-ui/react-icons'
+
+import React, { useEffect, useState } from 'react'
+
+import { Button } from '@components/ui/button/button'
+import { Calendar } from '@components/ui/calendar/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select/select'
+import { cn } from '@lib/utils'
+
+export type GanttTimerangePickerProps = {
+  initialDateFrom?: Date
+  initialDateTo?: Date
+  // onRangeChange now receives ISO string date range (UTC-normalized) or undefined
+  onRangeChange?: (values: ISODateRange | undefined) => void
+  timelineStart?: Date
+  timelineEnd?: Date
+}
+
+type DateRange = {
+  from?: Date
+  to?: Date
+}
+
+// ISODateRange with ISO string dates for UTC-normalized range for querying
+export type ISODateRange = {
+  from?: string
+  to?: string
+}
+
+// reusable helper: convert an ISO UTC-normalized date string back to a local Date
+export const isoToLocalDate = (iso?: string): Date | undefined => {
+  if (!iso) {
+    return undefined
+  }
+  const d = new Date(iso) // parse ISO instant
+  // build a local Date that has the same calendar day as the UTC date parts
+  return new Date(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate())
+}
+
+// helper to convert internal Date range to ISO strings normalized to UTC start/end of day
+const convertRangeToISO = (r?: { from?: Date; to?: Date } | undefined): ISODateRange | undefined => {
+  if (!(r?.from && r?.to)) {
+    return undefined
+  }
+  const from = r.from
+  const to = r.to
+
+  const fromIso = new Date(
+    Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), from.getUTCDate(), 0, 0, 0, 0),
+  ).toISOString()
+  const toIso = new Date(
+    Date.UTC(to.getUTCFullYear(), to.getUTCMonth(), to.getUTCDate(), 23, 59, 59, 999),
+  ).toISOString()
+
+  return { from: fromIso, to: toIso }
+}
+
+type Preset = {
+  name: string
+  label: string
+}
+
+const PRESETS: Preset[] = [
+  { name: 'sinceStart', label: 'Since timeline start' },
+  { name: 'thisYear', label: 'This year' },
+  { name: 'nextFullYear', label: 'Next full year' },
+  { name: 'next1Year', label: 'Next 1 year' },
+  { name: 'next2Year', label: 'Next 2 years' },
+  { name: 'next3Year', label: 'Next 3 years' },
+  { name: 'untilEnd', label: 'Until timeline end' },
+]
+
+export const GanttTimerangePicker = ({
+  initialDateFrom,
+  initialDateTo,
+  onRangeChange,
+  timelineStart,
+  timelineEnd,
+}: GanttTimerangePickerProps) => {
+  const [range, setRange] = useState<DateRange | undefined>(
+    initialDateFrom || initialDateTo ? { from: initialDateFrom, to: initialDateTo } : undefined,
+  )
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedPreset, setSelectedPreset] = useState<string | undefined>(undefined)
+  const [isSmallScreen, setIsSmallScreen] = useState(
+    globalThis.window === undefined ? false : globalThis.window.innerWidth < 960,
+  )
+
+  // listen to window resize events to enable a small screen mode
+  useEffect(() => {
+    const handleResize = (): void => {
+      setIsSmallScreen(globalThis.window.innerWidth < 960)
+    }
+    globalThis.window.addEventListener('resize', handleResize)
+    // Clean up event listener on unmount
+    return () => {
+      globalThis.window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  const getPresetRange = (presetName: string, timelineStart?: Date, timelineEnd?: Date): DateRange => {
+    const preset = PRESETS.find(({ name }) => name === presetName)
+    if (!preset) {
+      throw new Error(`Unknown date range preset: ${presetName}`)
+    }
+    const from = new Date()
+    const to = new Date()
+
+    switch (preset.name) {
+      case 'sinceStart':
+        if (timelineStart) {
+          from.setFullYear(timelineStart.getFullYear(), timelineStart.getMonth(), timelineStart.getDate())
+        }
+        from.setHours(0, 0, 0, 0)
+        to.setHours(23, 59, 59, 999)
+        break
+      case 'thisYear':
+        from.setFullYear(from.getFullYear(), 0, 1)
+        from.setHours(0, 0, 0, 0)
+        to.setFullYear(to.getFullYear(), 11, 31)
+        to.setHours(23, 59, 59, 999)
+        break
+      case 'nextFullYear':
+        from.setFullYear(from.getFullYear() + 1, 0, 1)
+        from.setHours(0, 0, 0, 0)
+        to.setFullYear(to.getFullYear() + 1, 11, 31)
+        to.setHours(23, 59, 59, 999)
+        break
+      case 'next1Year':
+        from.setHours(0, 0, 0, 0)
+        to.setFullYear(to.getFullYear() + 1)
+        to.setHours(23, 59, 59, 999)
+        break
+      case 'next2Year':
+        from.setHours(0, 0, 0, 0)
+        to.setFullYear(to.getFullYear() + 2)
+        to.setHours(23, 59, 59, 999)
+        break
+      case 'next3Year':
+        from.setHours(0, 0, 0, 0)
+        to.setFullYear(to.getFullYear() + 3)
+        to.setHours(23, 59, 59, 999)
+        break
+      case 'untilEnd':
+        from.setHours(0, 0, 0, 0)
+        if (timelineEnd) {
+          to.setFullYear(timelineEnd.getFullYear(), timelineEnd.getMonth(), timelineEnd.getDate())
+        }
+        to.setHours(23, 59, 59, 999)
+        break
+    }
+
+    return { from, to }
+  }
+
+  // automatically detect selected preset when range changes (internal Date range)
+  useEffect(() => {
+    if (!range?.from || !range.to) {
+      setSelectedPreset(undefined)
+      return
+    }
+    for (const preset of PRESETS) {
+      const presetRange = getPresetRange(preset.name, timelineStart, timelineEnd)
+      if (!presetRange.from || !presetRange.to) {
+        continue
+      }
+
+      const normalizedRangeFrom = new Date(range.from)
+      normalizedRangeFrom.setHours(0, 0, 0, 0)
+      const normalizedPresetFrom = new Date(presetRange.from)
+      normalizedPresetFrom.setHours(0, 0, 0, 0)
+
+      const normalizedRangeTo = new Date(range.to)
+      normalizedRangeTo.setHours(0, 0, 0, 0)
+      const normalizedPresetTo = new Date(presetRange.to)
+      normalizedPresetTo.setHours(0, 0, 0, 0)
+
+      if (
+        normalizedRangeFrom.getTime() === normalizedPresetFrom.getTime() &&
+        normalizedRangeTo.getTime() === normalizedPresetTo.getTime()
+      ) {
+        setSelectedPreset(preset.name)
+        return
+      }
+    }
+    setSelectedPreset(undefined)
+  }, [range, timelineStart, timelineEnd])
+
+  return (
+    <Popover
+      modal={true}
+      open={isOpen}
+      onOpenChange={(isOpen) => {
+        setIsOpen(isOpen)
+        // on close, emit ISO-normalized range
+        if (!isOpen) {
+          onRangeChange?.(convertRangeToISO(range))
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button size="iconSm" variant="extraGhost2">
+          <CalendarIcon className="size-3" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto p-2 m-2 relative">
+        <div className="flex justify-between items-center">
+          <span className="pl-2">
+            {range?.from && range?.to
+              ? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()} selected`
+              : 'No range selected'}
+          </span>
+          <Button
+            variant="outline"
+            size="icon"
+            className="size-6 rounded"
+            onClick={() => {
+              setIsOpen(false)
+            }}
+          >
+            <Cross2Icon className="size-5" />
+          </Button>
+        </div>
+        <div className="flex">
+          <div className="flex">
+            <div className="flex flex-col">
+              {isSmallScreen && (
+                <Select
+                  defaultValue={selectedPreset}
+                  onValueChange={(value) => {
+                    setRange(getPresetRange(value))
+                  }}
+                >
+                  <SelectTrigger size="xs" className="w-[180px] mx-auto mt-2">
+                    <SelectValue placeholder="Select..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PRESETS.map((preset) => (
+                      <SelectItem key={preset.name} value={preset.name}>
+                        {preset.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+              <div className={cn('h-[325px]', isSmallScreen && 'mb-8')}>
+                <Calendar
+                  mode="range"
+                  showYearNavigation={true}
+                  disabled={(date) =>
+                    (timelineStart ? date < timelineStart : false) || (timelineEnd ? date > timelineEnd : false)
+                  }
+                  onSelect={(value: { from?: Date; to?: Date } | undefined) => {
+                    if (value?.from != null) {
+                      const from = value.from
+                      const to = value.to ?? value.from
+                      // Normalize the range so that from <= to
+                      setRange(to < from ? { from: to, to: from } : { from, to })
+                    }
+                  }}
+                  selected={range?.from && range?.to ? { from: range.from, to: range.to } : undefined}
+                  numberOfMonths={isSmallScreen ? 1 : 2}
+                  defaultMonth={new Date(new Date().setMonth(new Date().getMonth() - (isSmallScreen ? 0 : 1)))}
+                />
+              </div>
+            </div>
+          </div>
+          {!isSmallScreen && (
+            <div className="flex flex-col items-start gap-1 pr-2 pl-12 py-3">
+              {PRESETS.map((preset) => (
+                <PresetButton
+                  key={preset.name}
+                  preset={preset.name}
+                  label={preset.label}
+                  isSelected={selectedPreset === preset.name}
+                  onSelect={(presetName) => setRange(getPresetRange(presetName))}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="flex gap-2 absolute bottom-3 right-3">
+          <Button
+            variant="outlineInvert"
+            size="smLow"
+            className=""
+            onClick={() => {
+              setRange(undefined)
+            }}
+          >
+            Clear Range
+          </Button>
+          <Button
+            size="smLow"
+            onClick={() => {
+              setIsOpen(false)
+              onRangeChange?.(convertRangeToISO(range))
+            }}
+          >
+            Apply
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+const PresetButton = ({
+  preset,
+  label,
+  isSelected,
+  onSelect,
+}: {
+  preset: string
+  label: string
+  isSelected: boolean
+  onSelect: (preset: string) => void
+}): React.ReactNode => (
+  <Button
+    className={`w-full justify-start ${isSelected ? 'pointer-events-none bg-accent' : ''}`}
+    variant="ghost"
+    size="smLow"
+    onClick={() => onSelect(preset)}
+  >
+    {label}
+  </Button>
+)

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

@@ -0,0 +1,212 @@
+'use client'
+
+import type { Cell, Table } from '@tanstack/react-table'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+type DataGridCellWrapperProps<TData> = {
+  cell: Cell<TData, unknown>
+  table: Table<TData>
+  rowIndex: number
+  columnId: string
+  isEditing: boolean
+  isFocused: boolean
+  isSelected: boolean
+} & React.ComponentProps<'div'>
+
+export function DataGridCellWrapper<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isEditing,
+  isFocused,
+  isSelected,
+  className,
+  onClick: onClickProp,
+  onKeyDown: onKeyDownProp,
+  ...props
+}: DataGridCellWrapperProps<TData>) {
+  const meta = table.options.meta
+
+  const rowOriginal = (cell?.row?.original ?? {}) as any
+  const colCellMeta = cell?.column?.columnDef?.meta as any
+  const align: 'left' | 'right' | 'center' = colCellMeta?.align ?? 'left'
+
+  // Normalize editable to a resolver function and memoize to avoid typeof checks per cell
+  const editableResolver = React.useMemo(() => {
+    const v = colCellMeta?.editable
+    if (v === undefined) {
+      return () => true
+    }
+    return typeof v === 'function' ? (v as (row: TData) => boolean) : () => Boolean(v)
+  }, [colCellMeta?.editable])
+  const isEditable = editableResolver(rowOriginal)
+
+  // Normalize className to a resolver function and memoize to avoid typeof checks per cell
+  const classNameResolver = React.useMemo(() => {
+    const v = colCellMeta?.className
+    return typeof v === 'function' ? (v as (row: any) => string | undefined) : () => v as string | undefined
+  }, [colCellMeta?.className])
+  const colCellClassName = classNameResolver(rowOriginal)
+
+  const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false
+  const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false
+
+  const onClick = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (!isEditing) {
+        event.preventDefault()
+        onClickProp?.(event)
+        if (isFocused) {
+          if (isEditable) {
+            meta?.onCellEditingStart?.(rowIndex, columnId)
+          }
+        } else {
+          meta?.onCellClick?.(rowIndex, columnId, event)
+        }
+      }
+    },
+    [meta, rowIndex, columnId, isEditing, isFocused, onClickProp, isEditable],
+  )
+
+  const onContextMenu = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (!isEditing) {
+        meta?.onCellContextMenu?.(rowIndex, columnId, event)
+      }
+    },
+    [meta, rowIndex, columnId, isEditing],
+  )
+
+  const onMouseDown = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (!isEditing) {
+        meta?.onCellMouseDown?.(rowIndex, columnId, event)
+      }
+    },
+    [meta, rowIndex, columnId, isEditing],
+  )
+
+  const onMouseEnter = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (!isEditing) {
+        meta?.onCellMouseEnter?.(rowIndex, columnId, event)
+      }
+    },
+    [meta, rowIndex, columnId, isEditing],
+  )
+
+  const onMouseUp = React.useCallback(() => {
+    if (!isEditing) {
+      meta?.onCellMouseUp?.()
+    }
+  }, [meta, isEditing])
+
+  const onDoubleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (!isEditing) {
+        event.preventDefault()
+        if (isEditable) {
+          meta?.onCellDoubleClick?.(rowIndex, columnId)
+        }
+      }
+    },
+    [meta, rowIndex, columnId, isEditing, isEditable],
+  )
+
+  const onKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      onKeyDownProp?.(event)
+
+      if (event.defaultPrevented) {
+        return
+      }
+
+      if (
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight' ||
+        event.key === 'Home' ||
+        event.key === 'End' ||
+        event.key === 'PageUp' ||
+        event.key === 'PageDown' ||
+        event.key === 'Tab'
+      ) {
+        return
+      }
+
+      if (isFocused && !isEditing) {
+        if (event.key === 'F2' || event.key === 'Enter') {
+          event.preventDefault()
+          event.stopPropagation()
+          if (isEditable) {
+            meta?.onCellEditingStart?.(rowIndex, columnId)
+          }
+          return
+        }
+
+        if (event.key === '') {
+          event.preventDefault()
+          event.stopPropagation()
+          meta?.onCellEditingStart?.(rowIndex, columnId)
+          return
+        }
+
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
+          event.preventDefault()
+          event.stopPropagation()
+          if (isEditable) {
+            meta?.onCellEditingStart?.(rowIndex, columnId)
+          }
+        }
+      }
+    },
+    [onKeyDownProp, isFocused, isEditing, meta, rowIndex, columnId, isEditable],
+  )
+
+  const rowHeight = meta?.rowHeight ?? 'short'
+
+  return (
+    <div
+      role="button"
+      data-slot="grid-cell-wrapper"
+      data-editing={isEditing ? '' : undefined}
+      data-focused={isFocused ? '' : undefined}
+      data-selected={isSelected ? '' : undefined}
+      tabIndex={isFocused && !isEditing ? 0 : -1}
+      className={cn(
+        'size-full px-2 py-1.5 text-sm outline-none -has-data-[slot=checkbox]:pt-2.5', // why has-data-[slot=checkbox] ?
+        {
+          'text-left': align === 'left',
+          'text-right': align === 'right',
+          'text-center': align === 'center',
+        },
+        {
+          'ring-1 ring-neutral-950 ring-inset dark:ring-neutral-300': isFocused,
+          'bg-yellow-100 dark:bg-yellow-900/30': isSearchMatch && !isActiveSearchMatch,
+          'bg-orange-200 dark:bg-orange-900/50': isActiveSearchMatch,
+          'bg-neutral-900/10 dark:bg-neutral-50/10': isSelected && !isEditing,
+          'cursor-default': !isEditing,
+          '**:data-[slot=grid-cell-content]:line-clamp-1': !isEditing && rowHeight === 'short',
+          '**:data-[slot=grid-cell-content]:line-clamp-2': !isEditing && rowHeight === 'medium',
+          '**:data-[slot=grid-cell-content]:line-clamp-3': !isEditing && rowHeight === 'tall',
+          '**:data-[slot=grid-cell-content]:line-clamp-4': !isEditing && rowHeight === 'extra-tall',
+        },
+        colCellClassName,
+        className,
+      )}
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      onDoubleClick={onDoubleClick}
+      onMouseDown={onMouseDown}
+      onMouseEnter={onMouseEnter}
+      onMouseUp={onMouseUp}
+      onKeyDown={onKeyDown}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,156 @@
+import type { Cell, Table } from '@tanstack/react-table'
+import { ShortTextCell } from './cell-variants/short-text-cell'
+import { LongTextCell } from './cell-variants/long-text-cell'
+import { NumberCell } from './cell-variants/number-cell'
+import { SelectCell } from './cell-variants/select-cell'
+import { MultiSelectCell } from './cell-variants/multi-select-cell'
+import { CheckboxCell } from './cell-variants/checkbox-cell'
+import { DateCell } from './cell-variants/date-cell'
+import { ReactNodeCell } from './cell-variants/react-node-cell'
+import { GanttCell } from './cell-variants/gantt-cell'
+
+type DataGridCellProps<TData> = {
+  cell: Cell<TData, unknown>
+  table: Table<TData>
+}
+
+export function DataGridCell<TData>({ cell, table }: DataGridCellProps<TData>) {
+  const meta = table.options.meta
+  const originalRowIndex = cell.row.index
+
+  const rows = table.getRowModel().rows
+  const displayRowIndex = rows.findIndex((row) => row.original === cell.row.original)
+  const rowIndex = displayRowIndex >= 0 ? displayRowIndex : originalRowIndex
+  const columnId = cell.column.id
+
+  const isFocused = meta?.focusedCell?.rowIndex === rowIndex && meta?.focusedCell?.columnId === columnId
+  const isEditing = meta?.editingCell?.rowIndex === rowIndex && meta?.editingCell?.columnId === columnId
+  const isSelected = meta?.getIsCellSelected?.(rowIndex, columnId) ?? false
+
+  const cellOpts = cell.column.columnDef.meta?.cell
+  const variant = cellOpts?.variant ?? 'text'
+
+  switch (variant) {
+    case 'short-text':
+      return (
+        <ShortTextCell
+          cell={cell as Cell<TData, string>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'long-text':
+      return (
+        <LongTextCell
+          cell={cell as Cell<TData, string>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'number':
+      return (
+        <NumberCell
+          cell={cell as Cell<TData, number>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'select':
+      return (
+        <SelectCell
+          cell={cell as Cell<TData, string>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'multi-select':
+      return (
+        <MultiSelectCell
+          cell={cell as Cell<TData, string[]>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'checkbox':
+      return (
+        <CheckboxCell
+          cell={cell as Cell<TData, boolean>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'date':
+      return (
+        <DateCell
+          cell={cell as Cell<TData, string>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'react-node':
+      return (
+        <ReactNodeCell
+          cell={cell as Cell<TData, React.ReactNode>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+    case 'gantt':
+      return (
+        <GanttCell
+          cell={cell as Cell<TData, { start: Date; end: Date } | null>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+
+    default:
+      return (
+        <ShortTextCell
+          cell={cell as Cell<TData, string>}
+          table={table}
+          rowIndex={rowIndex}
+          columnId={columnId}
+          isEditing={isEditing}
+          isFocused={isFocused}
+          isSelected={isSelected}
+        />
+      )
+  }
+}