@postxl/generators 1.1.0 → 1.2.0

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

@@ -1,330 +0,0 @@
-/* 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

@@ -1,212 +0,0 @@
-'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-foreground ring-inset dark:ring-secondary-foreground': isFocused,
-          'bg-yellow-100 dark:bg-yellow-900/30': isSearchMatch && !isActiveSearchMatch,
-          'bg-orange-200 dark:bg-orange-900/50': isActiveSearchMatch,
-          'bg-accent-foreground/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

@@ -1,157 +0,0 @@
-import type { Cell, Table } from '@tanstack/react-table'
-
-import { CheckboxCell } from './cell-variants/checkbox-cell'
-import { DateCell } from './cell-variants/date-cell'
-import { GanttCell } from './cell-variants/gantt-cell'
-import { LongTextCell } from './cell-variants/long-text-cell'
-import { MultiSelectCell } from './cell-variants/multi-select-cell'
-import { NumberCell } from './cell-variants/number-cell'
-import { ReactNodeCell } from './cell-variants/react-node-cell'
-import { SelectCell } from './cell-variants/select-cell'
-import { ShortTextCell } from './cell-variants/short-text-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}
-        />
-      )
-  }
-}