@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/context-menu/context-menu.tsx

@@ -0,0 +1,179 @@
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />
+}
+ContextMenuShortcut.displayName = 'ContextMenuShortcut'
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/cell-variant-types.ts

@@ -0,0 +1,11 @@
+import type { Cell, Table } from '@tanstack/react-table'
+
+export type CellVariantProps<TData, TCell> = {
+  cell: Cell<TData, TCell>
+  table: Table<TData>
+  rowIndex: number
+  columnId: string
+  isEditing: boolean
+  isFocused: boolean
+  isSelected: boolean
+}

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

@@ -0,0 +1,112 @@
+import * as React from 'react'
+
+import { Checkbox } from '@components/ui/checkbox/shadcn-checkbox'
+import { DataGridCellWrapper } from '@components/ui/data-grid/data-grid-cell-wrapper'
+import { CellVariantProps } from './cell-variant-types'
+
+export function CheckboxCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isSelected,
+}: Readonly<CellVariantProps<TData, boolean>>) {
+  const initialValue = cell.getValue()
+  const [value, setValue] = React.useState(Boolean(initialValue))
+  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 onCheckedChange = React.useCallback(
+    (checked: boolean) => {
+      setValue(checked)
+      meta?.onDataUpdate?.({ rowIndex, columnId, value: checked })
+    },
+    [meta, rowIndex, columnId],
+  )
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!isEditable) {
+        return
+      }
+      if (isFocused && (event.key === '' || event.key === 'Enter')) {
+        event.preventDefault()
+        event.stopPropagation()
+        onCheckedChange(!value)
+      }
+    },
+    [isFocused, value, onCheckedChange, isEditable],
+  )
+
+  React.useEffect(() => {
+    setValue(Boolean(initialValue))
+  }, [initialValue])
+
+  React.useEffect(() => {
+    if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) {
+      containerRef.current.focus()
+    }
+  }, [isFocused, meta?.searchOpen, meta?.isScrolling])
+
+  const onWrapperClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (!isEditable) {
+        return
+      }
+      if (isFocused) {
+        event.preventDefault()
+        event.stopPropagation()
+        onCheckedChange(!value)
+      }
+    },
+    [isFocused, value, onCheckedChange, isEditable],
+  )
+
+  const onCheckboxClick = React.useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+  }, [])
+
+  const onCheckboxMouseDown = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+  }, [])
+
+  const onCheckboxDoubleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+  }, [])
+
+  return (
+    <DataGridCellWrapper
+      ref={containerRef}
+      cell={cell}
+      table={table}
+      rowIndex={rowIndex}
+      columnId={columnId}
+      isEditing={false}
+      isFocused={isFocused}
+      isSelected={isSelected}
+      onClick={onWrapperClick}
+      onKeyDown={onWrapperKeyDown}
+      className="flex size-full justify-center"
+    >
+      <Checkbox
+        checked={value}
+        onCheckedChange={onCheckedChange}
+        onClick={onCheckboxClick}
+        onMouseDown={onCheckboxMouseDown}
+        onDoubleClick={onCheckboxDoubleClick}
+        className="border-neutral-900 dark:border-neutral-50"
+      />
+    </DataGridCellWrapper>
+  )
+}

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

@@ -0,0 +1,158 @@
+import * as React from 'react'
+
+import { Calendar } from '@components/ui/calendar/calendar'
+import { DataGridCellWrapper } from '@components/ui/data-grid/data-grid-cell-wrapper'
+import { Popover, PopoverAnchor, PopoverContent } from '@components/ui/popover/popover'
+import { cn } from '@lib/utils'
+
+import { CellVariantProps } from './cell-variant-types'
+
+/**
+ * Parse a date value (Date object or ISO string YYYY-MM-DD) as a local date, not UTC.
+ * new Date('2025-12-01') interprets as UTC, causing timezone shifts.
+ */
+function parseToLocalDate(value: string | Date | null | undefined): Date | undefined {
+  if (!value) {
+    return undefined
+  }
+  if (value instanceof Date) {
+    return value
+  }
+  if (typeof value !== 'string') {
+    return undefined
+  }
+
+  // Parse ISO date string in local timezone by explicitly setting year, month, day
+  const regex = /^(\d{4})-(\d{2})-(\d{2})$/
+  const match = regex.exec(value)
+  if (!match) {
+    return undefined
+  }
+
+  const year = Number.parseInt(match[1], 10)
+  const month = Number.parseInt(match[2], 10) - 1 // months are 0-indexed
+  const day = Number.parseInt(match[3], 10)
+
+  return new Date(year, month, day)
+}
+
+function formatDateToISOString(date: Date): string {
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+export function DateCell<TData>({
+  cell,
+  table,
+  rowIndex,
+  columnId,
+  isFocused,
+  isEditing,
+  isSelected,
+}: Readonly<CellVariantProps<TData, string>>) {
+  const initialValue = cell.getValue() as string | Date | null | undefined
+  const [value, setValue] = React.useState<Date | undefined>(parseToLocalDate(initialValue))
+  const [open, setOpen] = React.useState(false)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const meta = table.options.meta
+
+  const prevInitialValueRef = React.useRef(initialValue)
+  if (initialValue !== prevInitialValueRef.current) {
+    prevInitialValueRef.current = initialValue
+    setValue(parseToLocalDate(initialValue))
+  }
+
+  const onDateSelect = React.useCallback(
+    (date: Date | undefined) => {
+      if (!date) {
+        return
+      }
+
+      setValue(date)
+      meta?.onDataUpdate?.({ rowIndex, columnId, value: formatDateToISOString(date) })
+      setOpen(false)
+      meta?.onCellEditingStop?.()
+    },
+    [meta, rowIndex, columnId],
+  )
+
+  const onOpenChange = React.useCallback(
+    (isOpen: boolean) => {
+      setOpen(isOpen)
+      if (!isOpen && isEditing) {
+        meta?.onCellEditingStop?.()
+      }
+    },
+    [isEditing, meta],
+  )
+
+  const onWrapperKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (isEditing) {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          setValue(parseToLocalDate(initialValue))
+          setOpen(false)
+        } else if (event.key === 'Tab') {
+          event.preventDefault()
+          setOpen(false)
+          meta?.onCellEditingStop?.({
+            direction: event.shiftKey ? 'left' : 'right',
+          })
+        }
+      }
+    },
+    [isEditing, initialValue, meta],
+  )
+
+  React.useEffect(() => {
+    setOpen(isEditing)
+  }, [isEditing])
+
+  React.useEffect(() => {
+    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}
+    >
+      <Popover open={open} onOpenChange={onOpenChange}>
+        <PopoverAnchor asChild>
+          <span
+            data-slot="grid-cell-content"
+            className={cn('tabular-nums', (cell.column.columnDef.meta as any)?.align ?? 'text-right')}
+          >
+            {value?.toLocaleDateString() ?? ''}
+          </span>
+        </PopoverAnchor>
+        {isEditing && (
+          <PopoverContent data-grid-cell-editor="" align="start" sideOffset={10} className="w-auto p-0">
+            <Calendar
+              showYearNavigation={true}
+              autoFocus
+              captionLayout="dropdown"
+              mode="single"
+              className="rounded-md border border-neutral-200 shadow-sm dark:border-neutral-800"
+              defaultMonth={value}
+              selected={value}
+              onSelect={onDateSelect}
+            />
+          </PopoverContent>
+        )}
+      </Popover>
+    </DataGridCellWrapper>
+  )
+}

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

@@ -0,0 +1,80 @@
+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 msUntilStart = initialValue ? initialValue.start.getTime() - timelineStartMs : 0
+  // end - start time considering timeline bounds
+  const barWidthMs = initialValue
+    ? 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">
+        {initialValue && (
+          <>
+            <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>
+  )
+}