@postxl/generators 1.1.1 → 1.2.0

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

@@ -1,447 +0,0 @@
-import '@glideapps/glide-data-grid/dist/index.css'
-
-import { type Theme as ContextTheme, 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 { brand, colorMode } = useTheme()
-  const theme: ContextTheme = `${brand} ${colorMode}`
-  const [tableTheme, setTableTheme] = useState<Partial<Theme> | undefined>()
-
-  useEffect(() => {
-    const observer = new MutationObserver(() => {
-      setTableTheme(getTableTheme(theme))
-    })
-
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style', 'class'] })
-
-    return () => observer.disconnect()
-  }, [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

@@ -1,77 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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
-  },
-}