@postxl/generators 0.2.2

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

@@ -0,0 +1,448 @@
+import '@glideapps/glide-data-grid/dist/index.css'
+
+import { useTheme } from '@context-providers/theme-context-provider'
+import {
+  type CellClickedEventArgs,
+  DataEditor,
+  type DataEditorProps,
+  type DataEditorRef,
+  type GridCell,
+  GridCellKind,
+  type GridColumn,
+  type GridMouseEventArgs,
+  type Item,
+  type LoadingCell,
+  type Rectangle,
+  Theme,
+} from '@glideapps/glide-data-grid'
+import { ParentSize } from '@visx/responsive'
+
+import { type Dispatch, ReactNode, type SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
+
+import { Loader } from '@components/ui/loader/loader'
+
+import { countryArrayDataTableRenderer } from './renderers/country-array-cell-renderer'
+import { countryDataTableRenderer } from './renderers/country-cell-renderer'
+import { favoriteDataTableRenderer } from './renderers/favorite-cell-renderer'
+import { linksTableRenderer } from './renderers/links-cell-renderer'
+import { getTableTheme, isHoverableRenderer } from './utils/data-table.utils'
+import type { ContextMenuAction, ContextMenuConfig } from './context-menu-simple'
+
+export type TableSort<FieldName extends string> = {
+  field: FieldName
+  order: 'asc' | 'desc' | null
+}
+
+export type DataTableProps<T extends object, ColumnId extends string> = {
+  data: T[]
+  columns: DataTableColumn<T, ColumnId>[]
+  totalRows?: number
+  onEndReached?: () => void
+  sortHandler?: (columnId: ColumnId, sort: 'asc' | 'desc' | null) => void
+  freezeColumns?: number
+  currentSort?: TableSort<ColumnId>
+  isLoading?: boolean
+  isLoadingLabel?: string
+  hasHeaderGroup?: boolean
+  footer?: ReactNode
+  /**
+   * E2E test_id to identify the button.
+   */
+  __e2e_test_id__?: string
+
+  /**
+   * Callback function to be called when the user right-clicks on a cell.
+   * This function should be used to show and position the context menu.
+   */
+  setContextMenu?: Dispatch<SetStateAction<ContextMenuConfig>>
+} & Omit<DataEditorProps, 'columns' | 'rows' | 'getCellContent'>
+
+/**
+ * We take the `GridColumn` type from the `@glideapps/glide-data-grid` so the
+ * user can use all of its props and extend it to include the `toCell`,
+ * `onFilter`, and `onSort` functions.
+ */
+export type DataTableColumn<Row extends object, ColumnId extends string> = GridColumn & {
+  id: ColumnId
+
+  tooltip?: string
+
+  /**
+   * We use this to render the cell content to the column. This then uses the
+   * `GridCell` type to render the content/data.
+   */
+  toCell: (item: Row) => GridCell
+
+  /**
+   * The function that performs an action when the user clicks on a cell in this column.
+   */
+  onClick?: (row: Row, event: CellClickedEventArgs) => void
+
+  /**
+   * The function that returns context actions for a given row. Will be called when a cell in this column is right-clicked.
+   */
+  onContextMenu?: OnContextMenuCallback<Row>
+
+  sortComparator: (row1: Row, row2: Row, direction: 'asc' | 'desc' | null) => number
+}
+
+export type OnContextMenuCallback<Row> = (row: Row, event: CellClickedEventArgs) => ContextMenuAction[]
+
+/**
+ * We take the `GridColumn` type from the `@glideapps/glide-data-grid` so the
+ * user can use all of its props and extend it to include the `toCell`,
+ * `onFilter`, and `onSort` functions.
+ */
+export type DataGridColumn<Row extends object, ColumnId extends string> = GridColumn & {
+  id: ColumnId
+  /**
+   * We use this to render the cell content to the column. This then uses the
+   * `GridCell` type to render the content/data.
+   */
+  toCell: (item: Row) => GridCell
+
+  onClick?: (rowData: Row, event: CellClickedEventArgs) => void
+}
+
+type ManagedDataTableColumn<Row extends object, ColumnId extends string> = DataTableColumn<Row, ColumnId> & {
+  activeSort: 'asc' | 'desc' | null
+}
+
+export function DataTable<Row extends object, ColumnId extends string = string>({
+  data,
+  columns,
+  onEndReached,
+  sortHandler,
+  freezeColumns,
+  currentSort,
+  __e2e_test_id__,
+  isLoading,
+  isLoadingLabel = 'Loading...',
+  hasHeaderGroup,
+  footer,
+  setContextMenu,
+  ...delegated
+}: DataTableProps<Row, ColumnId>) {
+  const sortOrder = currentSort?.order === 'asc' ? 'sortAscending' : 'sortDescending'
+  const [managedColumns, setManagedColumns] = useState<ManagedDataTableColumn<Row, ColumnId>[]>([])
+  const { theme, isThemeReady } = useTheme()
+  const [tableTheme, setTableTheme] = useState<Partial<Theme> | undefined>()
+
+  const getTheme = useCallback(() => getTableTheme(theme), [theme])
+
+  useEffect(() => {
+    // we need this timeout to make sure 'getTableTheme' returns the correct css variables
+    if (isThemeReady) {
+      setTimeout(() => {
+        const newTheme = getTheme()
+        setTableTheme(newTheme)
+      }, 0)
+    }
+  }, [getTheme, isThemeReady, theme])
+
+  useEffect(() => {
+    setManagedColumns(
+      columns.map((col) => ({
+        ...col,
+        activeSort: currentSort?.field === col.id ? currentSort.order : null,
+        isDraggable: true,
+        icon: currentSort?.field === col.id ? sortOrder : undefined,
+      })),
+    )
+  }, [columns, currentSort, sortOrder])
+
+  const [visibleRegion, setVisibleRegion] = useState<Rectangle>({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  })
+
+  // const dataEditorTheme: Partial<Theme> = useMemo(() => getTableTheme(), [theme === 'dark'])
+
+  useEffect(() => {
+    if (data.length > 1 && visibleRegion.y + visibleRegion.height > data.length - 20) {
+      onEndReached?.()
+    }
+  }, [visibleRegion, onEndReached, data.length])
+
+  const getRowContent = useCallback(
+    (row: number) => {
+      return data[row]
+    },
+    [data],
+  )
+
+  const getCellContent = useCallback(
+    ([col, row]: Item) => {
+      const rowData = getRowContent(row)
+
+      if (!rowData) {
+        return { kind: GridCellKind.Loading, allowOverlay: true } satisfies LoadingCell
+      }
+
+      const toCell = managedColumns[col].toCell
+
+      return toCell(rowData)
+    },
+    [getRowContent, managedColumns],
+  )
+
+  const dataEditorRef = useRef<DataEditorRef>(null)
+  const tableWrapperRef = useRef<HTMLDivElement>(null)
+
+  const onRightClick = useCallback(
+    ([col, row]: Item, event: CellClickedEventArgs) => {
+      if (!dataEditorRef?.current) {
+        return
+      }
+      const cellBounds: Rectangle | undefined = dataEditorRef.current.getBounds(col, row)
+      if (!cellBounds) {
+        return
+      }
+      const position = {
+        x: cellBounds.x + event.localEventX,
+        y: cellBounds.y + event.localEventY,
+      }
+
+      // Uncomment to get coordinates during test creation
+      // console.log('absolute', position)
+      // console.log('relative', { x: event.localEventX, y: event.localEventY })
+
+      if (!setContextMenu) {
+        return
+      }
+      const rowData = getRowContent(row)
+      if (!rowData) {
+        return { kind: GridCellKind.Loading, allowOverlay: true } satisfies LoadingCell
+      }
+
+      const onContextMenuFn = managedColumns[col].onContextMenu
+      if (!onContextMenuFn) {
+        return
+      }
+
+      const actions = onContextMenuFn(rowData, event)
+      if (!actions) {
+        return
+      }
+      event.preventDefault()
+
+      setContextMenu({
+        position,
+        actions,
+      })
+    },
+    [dataEditorRef, setContextMenu, getRowContent, managedColumns],
+  )
+
+  const [hoveredCellData, setHoveredCellData] = useState<{
+    x: number
+    y: number
+    data: any
+    hoverOverlay?: (data: any) => React.ReactNode
+  } | null>(null)
+
+  const [hoveredHeader, setHoveredHeader] = useState<{
+    columnId: number
+    x: number
+    y: number
+  } | null>(null)
+  const onItemHovered = useCallback(
+    (args: GridMouseEventArgs) => {
+      const tableBounds = tableWrapperRef.current?.getBoundingClientRect()
+
+      if (args.kind === 'cell') {
+        setHoveredHeader(null)
+        const [col, row] = args.location
+        const cell = getCellContent([col, row])
+        if (!cell || cell.kind !== GridCellKind.Custom) {
+          setHoveredCellData(null)
+          return
+        }
+        const x = args.bounds.x - (tableBounds?.x ?? 0) + 10
+        const y = args.bounds.y - (tableBounds?.y ?? 0) + args.bounds.height
+        const hoverableRenderers = [countryArrayDataTableRenderer]
+        const renderer = hoverableRenderers.find((r) => r.isMatch(cell))
+        const data = cell.data
+        const hoverOverlay = isHoverableRenderer(renderer) ? renderer.hoverOverlay : undefined
+
+        setHoveredCellData({ x, y, data, hoverOverlay })
+        return
+      }
+
+      if (args.kind === 'header') {
+        setHoveredCellData(null)
+        const [columnId] = args.location
+        const x = args.bounds.x - (tableBounds?.x ?? 0) + 10
+        const y = args.bounds.height
+
+        setHoveredHeader({ columnId, x, y: y + (hasHeaderGroup ? 20 : 0) })
+        return
+      }
+
+      setHoveredCellData(null)
+      setHoveredHeader(null)
+    },
+    [getCellContent, hasHeaderGroup],
+  )
+
+  const onHeaderMenuClick = useCallback(
+    (colIndex: number) => {
+      if (!sortHandler) {
+        // If sorting is not supported, do nothing on header click
+        return
+      }
+      setManagedColumns((cols) =>
+        cols.map((col, i) => {
+          if (i !== colIndex) {
+            return { ...col, activeSort: null, icon: undefined }
+          }
+          let newSort: 'asc' | 'desc' | null
+          let icon: 'sortAscending' | 'sortDescending' | undefined = undefined
+
+          switch (col.activeSort) {
+            case null:
+              newSort = 'asc'
+              icon = 'sortAscending'
+              break
+            case 'asc':
+              newSort = 'desc'
+              icon = 'sortDescending'
+              break
+            case 'desc':
+              newSort = null
+              icon = undefined
+              break
+          }
+
+          console.log(`Column ${col.id} sort state: ${col.activeSort} -> ${newSort}`)
+
+          if (sortHandler) {
+            sortHandler(col.id, newSort)
+          }
+          return { ...col, activeSort: newSort, icon }
+        }),
+      )
+    },
+    [sortHandler],
+  )
+
+  const onCellClicked = useCallback(
+    ([col, row]: Item, event: CellClickedEventArgs) => {
+      const rowData = getRowContent(row)
+      const columnId = managedColumns[col].id
+      const columnDefinition = managedColumns.find((col) => col.id === columnId)!
+      if (columnDefinition.onClick) {
+        columnDefinition.onClick(rowData, event)
+      }
+    },
+    [getRowContent, managedColumns],
+  )
+
+  const onColumnResize = useCallback(
+    ({ id }: { id?: string }, width: number) => {
+      setManagedColumns((oldColumns) =>
+        oldColumns.map((oldColumn) => (oldColumn.id === id ? { ...oldColumn, width } : oldColumn)),
+      )
+    },
+    [setManagedColumns],
+  )
+  return (
+    <ParentSize className="flex h-full min-h-[inherit] relative">
+      {({ height }) => (
+        <div
+          className={`h-[${height}px] w-full flex flex-col relative`}
+          ref={tableWrapperRef}
+          data-test-id={__e2e_test_id__}
+        >
+          <DataEditor
+            ref={dataEditorRef}
+            freezeColumns={freezeColumns ?? 0}
+            customRenderers={[
+              linksTableRenderer,
+              countryDataTableRenderer,
+              countryArrayDataTableRenderer,
+              favoriteDataTableRenderer,
+            ]}
+            columns={managedColumns}
+            getCellContent={getCellContent}
+            rows={data.length}
+            onHeaderClicked={onHeaderMenuClick}
+            onCellActivated={(cell) => console.log('cell activated', cell)}
+            onItemHovered={onItemHovered}
+            onHeaderMenuClick={onHeaderMenuClick}
+            onColumnResize={onColumnResize}
+            onCellClicked={onCellClicked}
+            verticalBorder={false}
+            headerIcons={{ sortAscending, sortDescending, noSort }}
+            {...delegated}
+            onCellContextMenu={onRightClick}
+            theme={tableTheme}
+            onVisibleRegionChanged={setVisibleRegion}
+            rowHeight={22}
+            headerHeight={22}
+            smoothScrollX
+            smoothScrollY
+          />
+
+          {hoveredHeader && managedColumns[hoveredHeader.columnId]?.tooltip && (
+            <div
+              style={
+                {
+                  '--header-x': `${hoveredHeader.x}px`,
+                  '--header-y': `${hoveredHeader.y}px`,
+                } as React.CSSProperties
+              }
+              className={
+                'absolute left-(--header-x) top-(--header-y) bg-background p-2 m-0.5 border border-(--discreet-border) shadow-md max-w-[400px]'
+              }
+              dangerouslySetInnerHTML={{ __html: managedColumns[hoveredHeader.columnId].tooltip ?? '' }}
+            />
+          )}
+
+          {hoveredCellData?.hoverOverlay && (
+            <div
+              style={
+                {
+                  '--header-x': `${hoveredCellData.x}px`,
+                  '--header-y': `${hoveredCellData.y}px`,
+                } as React.CSSProperties
+              }
+              className={
+                'absolute left-(--header-x) top-(--header-y) bg-background p-2 m-0.5 border border-(--discreet-border) shadow-md max-w-[400px]'
+              }
+            >
+              {hoveredCellData.hoverOverlay(hoveredCellData.data)}
+            </div>
+          )}
+
+          {footer ? (
+            <div className="flex absolute bottom-0 w-full items-center px-1 py-4 font-bold bg-background text-muted-foreground">
+              {footer}
+            </div>
+          ) : null}
+
+          {isLoading && <Loader label={isLoadingLabel} />}
+        </div>
+      )}
+    </ParentSize>
+  )
+}
+
+// CUSTOM ICONS ----------------------------------------------------------------
+
+const noSort = () => `
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path transform="scale(0.75)"  stroke-linecap="round" stroke-linejoin="round" d="M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" />
+</svg>
+`
+
+const sortAscending = () => `
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 9H11L7.5 4.5L4 9Z" fill="currentColor"></path></svg>
+
+`
+
+const sortDescending = () => `
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6H11L7.5 10.5L4 6Z" fill="currentColor"></path></svg>
+`

package/dist/frontend-core/template/src/components/ui/data-table/renderers/country-array-cell-renderer.tsx

@@ -0,0 +1,77 @@
+import type { CustomCell, CustomRenderer } from '@glideapps/glide-data-grid'
+import { GridCellKind } from '@glideapps/glide-data-grid'
+
+import { ReactNode } from 'react'
+
+import { APP_CONFIG } from '@lib/config'
+
+export type HoverableRenderer<T extends CustomCell = CustomCell> = {
+  hoverOverlay?: (cellData: T['data']) => ReactNode
+} & CustomRenderer<T>
+
+export type CountryArrayCell = CustomCell<{
+  kind: 'country-array-cell'
+  countries: { id: string; label: string; hoverLabel?: string }[]
+}>
+
+const countryImageCache: Record<string, HTMLImageElement> = {}
+
+export const countryArrayDataTableRenderer: HoverableRenderer<CountryArrayCell> = {
+  kind: GridCellKind.Custom,
+  isMatch: (cell): cell is CountryArrayCell => (cell.data as { kind?: string }).kind === 'country-array-cell',
+  draw: ({ ctx, rect, theme }, { data: { countries } }) => {
+    const flagHeight = rect.height - theme.cellVerticalPadding * 2
+    const flagWidth = flagHeight * 1.5 // flags are 3:2 aspect ratio
+
+    let x = rect.x + theme.cellHorizontalPadding
+    const y = rect.y + theme.cellVerticalPadding
+
+    for (const { id, label } of countries) {
+      const isUnknown = !id || id === ''
+
+      let image: HTMLImageElement | undefined
+
+      if (!isUnknown) {
+        if (!countryImageCache[id]) {
+          countryImageCache[id] = new Image()
+          countryImageCache[id].src = `/flags/${id}.svg`
+          countryImageCache[id].onload = () => {
+            ctx.canvas.dispatchEvent(new Event('invalidate'))
+          }
+        }
+        image = countryImageCache[id]
+      }
+
+      const circlepath = new Path2D()
+      circlepath.roundRect(x, y, flagWidth, flagHeight, 2)
+      ctx.save()
+      ctx.clip(circlepath)
+
+      if (isUnknown || !image || !image.complete || image.naturalHeight === 0 || APP_CONFIG.useTestAssets) {
+        // Draw grey rectangle for unknown country
+        ctx.fillStyle = '#cccccc'
+        ctx.fillRect(x, y, flagWidth, flagHeight)
+      } else {
+        ctx.drawImage(image, x, y, flagWidth, flagHeight)
+      }
+
+      ctx.restore()
+
+      ctx.save()
+      ctx.font = `${theme.baseFontFull} ${theme.fontFamily}`
+      ctx.fillStyle = theme.textDark
+      ctx.fillText(label, x + flagWidth + 5, y + flagHeight / 2)
+      ctx.restore()
+
+      const labelWidth = ctx.measureText(label).width
+      x += flagWidth + 5 + labelWidth + 10
+    }
+
+    return true
+  },
+  needsHover: true,
+  hoverOverlay: (data) => {
+    const { countries } = data
+    return <>{countries.map((c) => c.hoverLabel || c.label).join(', ')}</>
+  },
+}

package/dist/frontend-core/template/src/components/ui/data-table/renderers/country-cell-renderer.tsx

@@ -0,0 +1,56 @@
+import type { CustomCell, CustomRenderer } from '@glideapps/glide-data-grid'
+import { GridCellKind } from '@glideapps/glide-data-grid'
+
+import { APP_CONFIG } from '@lib/config'
+
+export type CountryCell = CustomCell<{ kind: 'country'; name: string; code: string }>
+
+const countryImageCache: Record<string, HTMLImageElement> = {}
+
+export const countryDataTableRenderer: CustomRenderer<CountryCell> = {
+  kind: GridCellKind.Custom,
+  isMatch: (cell): cell is CountryCell => (cell.data as { kind?: string }).kind === 'country',
+  draw: ({ ctx, rect, theme }, { data: { name, code } }) => {
+    if (!code || code === '') {
+      return false
+    }
+    const flagHeight = rect.height - theme.cellVerticalPadding * 2
+    const flagWidth = flagHeight * 1.5 // flags are 3:2 aspect ratio
+
+    const top = rect.y + theme.cellVerticalPadding
+    const left = rect.x + theme.cellHorizontalPadding
+
+    if (!countryImageCache[code]) {
+      countryImageCache[code] = new Image()
+      countryImageCache[code].src = `/flags/${code}.svg`
+      countryImageCache[code].onload = () => {
+        ctx.canvas.dispatchEvent(new Event('invalidate'))
+      }
+    }
+
+    const image = countryImageCache[code]
+
+    if (image.complete && image.naturalHeight !== 0 && !APP_CONFIG.useTestAssets) {
+      const circlepath = new Path2D()
+      circlepath.roundRect(left, top, flagWidth, flagHeight, 2)
+
+      ctx.save()
+      ctx.clip(circlepath)
+      ctx.drawImage(image, left, top, flagWidth, flagHeight)
+      ctx.restore()
+    } else {
+      ctx.save()
+      ctx.fillStyle = theme.textLight
+      ctx.fillRect(left, top, flagWidth, flagHeight)
+      ctx.restore()
+    }
+
+    ctx.save()
+    ctx.font = `${theme.baseFontFull} ${theme.fontFamily}`
+    ctx.fillStyle = theme.textDark
+    ctx.fillText(name, left + flagWidth + 5, top + flagHeight / 2)
+    ctx.restore()
+
+    return true
+  },
+}

package/dist/frontend-core/template/src/components/ui/data-table/renderers/favorite-cell-renderer.tsx

@@ -0,0 +1,68 @@
+import type { CustomCell, CustomRenderer } from '@glideapps/glide-data-grid'
+import { GridCellKind } from '@glideapps/glide-data-grid'
+
+export type FavoriteCell = CustomCell<{ kind: 'favorite'; isFavorite: boolean; isSelected?: boolean }>
+
+export const favoriteDataTableRenderer: CustomRenderer<FavoriteCell> = {
+  kind: GridCellKind.Custom,
+  isMatch: (cell): cell is FavoriteCell => (cell.data as { kind?: string }).kind === 'favorite',
+  draw: ({ ctx, rect, theme }, { data: { isFavorite, isSelected } }) => {
+    const size = Math.min(rect.width, rect.height) - theme.cellVerticalPadding * 2
+    const centerX = rect.x + rect.width / 2
+    const centerY = rect.y + rect.height / 2
+    const scale = size / 24 // Lucide icons are typically designed on a 24x24 grid
+
+    // Save the current context state
+    ctx.save()
+
+    // Center and scale the coordinate system
+    ctx.translate(centerX, centerY)
+    ctx.scale(scale, scale)
+
+    // Draw the star path following Lucide.dev's star shape
+    ctx.beginPath()
+
+    // These points create a star path similar to Lucide's design
+    // Star points in a 24x24 grid centered at 0,0
+    const points = [
+      [0, -10], // Top point
+      [2.9, -3.1], // Upper right connecting point
+      [10, -3.1], // Right point
+      [3.8, 1.2], // Lower right connecting point
+      [6.2, 8.2], // Lower right point
+      [0, 4.4], // Bottom connecting point
+      [-6.2, 8.2], // Lower left point
+      [-3.8, 1.2], // Lower left connecting point
+      [-10, -3.1], // Left point
+      [-2.9, -3.1], // Upper left connecting point
+    ]
+
+    // Draw the star path
+    ctx.moveTo(points[0][0], points[0][1])
+    for (let i = 1; i < points.length; i++) {
+      ctx.lineTo(points[i][0], points[i][1])
+    }
+    ctx.closePath()
+
+    // Fill or just stroke based on favourite state
+    if (isFavorite) {
+      // Lucide uses a yellow/gold fill when active
+      ctx.fillStyle = '#FFD700' // Gold color for filled star
+      ctx.fill()
+      ctx.lineWidth = 2
+      ctx.strokeStyle = isSelected ? '#fb4b28' : '#D4AF37'
+    } else {
+      // When not favorited, only draw the outline
+      ctx.lineWidth = isSelected ? 2 : 1 // Thinner line for cleaner look
+      ctx.strokeStyle = isSelected ? '#fb4b28' : theme.textMedium
+    }
+
+    // Always draw the stroke
+    ctx.stroke()
+
+    // Restore the context state
+    ctx.restore()
+
+    return true
+  },
+}