@postxl/generators 0.2.2

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

@@ -0,0 +1,205 @@
+import {
+  type CustomCell,
+  type CustomRenderer,
+  getMiddleCenterBias,
+  GridCellKind,
+  measureTextCached,
+} from '@glideapps/glide-data-grid'
+
+import { YesNo, YesNoBlank } from '@components/ui/data-table/utils/columns'
+
+export type Link = {
+  readonly label: string
+
+  readonly isFilteredOut?: boolean
+  /**
+   * Will be triggered if the user clicks on the link.
+   */
+  readonly onClick?: () => void
+
+  readonly url?: URL
+}
+
+type LinksCellProps = {
+  readonly kind: 'links-cell'
+  /**
+   * Used to hand tune the position of the underline as this is not a native canvas capability,
+   * it can need tweaking for different fonts.
+   */
+  readonly underlineOffset?: number
+  readonly links: readonly Link[]
+  /**
+   * Will only be triggered if the user click outside of a link - or if
+   * the items does not have a separate `onClick` handler.
+   */
+  readonly onClick?: <T>(items: T) => void
+
+  readonly rowData: any
+}
+
+export type LinksCell = CustomCell<LinksCellProps>
+
+export function stringToLink(item: string | Link): Link {
+  if (typeof item === 'string') {
+    return { label: item }
+  }
+  return item
+}
+
+export function booleanToLink(item: boolean | YesNo | YesNoBlank | null | undefined | Link): Link {
+  if (typeof item === 'object') {
+    return item as Link
+  } else if (item === null || item === undefined) {
+    return { label: '' }
+  } else if (item === true || item === 'Yes') {
+    return { label: 'Yes' }
+  } else if (item === false || item === 'No') {
+    return { label: 'No' }
+  }
+  return { label: '' }
+}
+
+export function linkToBoolean(item: boolean | string | undefined | null | Link): boolean | null {
+  if (typeof item === 'boolean') {
+    return item
+  } else if (typeof item === 'string') {
+    return item === 'Yes'
+  } else if (typeof item === 'object') {
+    return item?.label === 'Yes'
+  } else {
+    return null
+  }
+}
+
+export function linkToString(item: string | Link): string {
+  if (typeof item === 'string') {
+    return item
+  }
+  return item.label
+}
+/**
+ * Based on the mouse position, this function will return the link that
+ * is currently hovered. If no link is hovered, it will return `undefined`.
+ */
+function getHoveredLink(e: Parameters<NonNullable<CustomRenderer<LinksCell>['onSelect']>>[0]) {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d', { alpha: false })
+  if (ctx === null) {
+    return
+  }
+
+  const { posX: hoverX, bounds: rect, cell, theme } = e
+  const font = theme.baseFontFull
+  ctx.font = font
+
+  const { links } = cell.data
+
+  const xPad = theme.cellHorizontalPadding
+
+  let drawX = rect.x + xPad
+
+  const mouseX = rect.x + hoverX
+
+  for (const [index, link] of links.entries()) {
+    const needsComma = index < links.length - 1
+    const metrics = measureTextCached(link.label, ctx)
+    const commaMetrics = needsComma ? measureTextCached(link.label + ',', ctx, font) : metrics
+
+    const isHovered = drawX <= mouseX && mouseX <= drawX + metrics.width
+
+    if (isHovered) {
+      return link
+    }
+
+    drawX += commaMetrics.width + 5
+  }
+
+  return undefined
+}
+
+export const linksTableRenderer: CustomRenderer<LinksCell> = {
+  kind: GridCellKind.Custom,
+  needsHover: true,
+  needsHoverPosition: true,
+  isMatch: (c): c is LinksCell => (c.data as { kind?: string }).kind === 'links-cell',
+  onSelect: (e) => {
+    if (getHoveredLink(e) !== undefined) {
+      e.preventDefault()
+    }
+  },
+  onClick: (event) => {
+    // We first check if the user clicked on a specific link and if we have a link-specific handler.
+    const clickedItem = getHoveredLink(event)
+    if (clickedItem?.onClick) {
+      clickedItem.onClick()
+      event.preventDefault()
+      return undefined
+    }
+
+    // In case the item has a URL, we open it in a new tab
+    if (clickedItem?.url) {
+      window.open(clickedItem.url, '_blank')
+      return undefined
+    }
+
+    // As a fallback, ie if either the user clicked in the cell but not on a link or if the
+    // cell does not have a separate `onClick` handler, we check if the cell has a generic
+    // `onClick` handler.
+    const { onClick: genericCellOnClick } = event.cell.data
+    if (genericCellOnClick) {
+      genericCellOnClick(event.cell.data.rowData)
+      event.preventDefault()
+      return undefined
+    }
+
+    return undefined
+  },
+
+  draw: (args, cell) => {
+    const { ctx, rect, theme, hoverX = -100 } = args
+    const { links, underlineOffset = 5 } = cell.data
+
+    const xPad = theme.cellHorizontalPadding
+
+    let drawX = rect.x + xPad
+
+    const rectHoverX = rect.x + hoverX
+
+    const font = theme.baseFontFull
+
+    const middleCenterBias = getMiddleCenterBias(ctx, font)
+    const drawY = rect.y + rect.height / 2 + middleCenterBias
+
+    for (const [index, l] of links.entries()) {
+      const needsComma = index < links.length - 1
+      const metrics = measureTextCached(l.label, ctx, font)
+      const commaMetrics = needsComma ? measureTextCached(l.label + ',', ctx, font) : metrics
+
+      const isHovered = rectHoverX > drawX && rectHoverX < drawX + metrics.width
+
+      if (isHovered) {
+        args.overrideCursor?.('pointer')
+        ctx.moveTo(drawX, Math.floor(drawY + underlineOffset) + 0.5)
+        ctx.lineTo(drawX + metrics.width, Math.floor(drawY + underlineOffset) + 0.5)
+
+        ctx.lineWidth = 1
+        ctx.strokeStyle = theme.textDark
+        ctx.stroke()
+
+        ctx.fillStyle = theme.linkColor
+      } else {
+        ctx.fillStyle = theme.textDark
+      }
+
+      if (l.isFilteredOut === true) {
+        ctx.fillStyle = theme.textLight
+      }
+
+      ctx.fillText(needsComma ? l.label + ',' : l.label, drawX, drawY)
+
+      drawX += commaMetrics.width + 4
+    }
+
+    return true
+  },
+}

package/dist/frontend-core/template/src/components/ui/data-table/utils/columns.ts

@@ -0,0 +1,351 @@
+import { type BaseGridCell, type CellClickedEventArgs, GridCellKind, type GridColumn } from '@glideapps/glide-data-grid'
+
+import type { ContextMenuAction } from '../context-menu-simple'
+import { type DataTableColumn } from '../data-table'
+import { booleanToLink, type Link, linkToBoolean, linkToString, stringToLink } from '../renderers/links-cell-renderer'
+
+export type YesNo = 'Yes' | 'No'
+export type YesNoBlank = 'Yes' | 'No' | 'Blank'
+
+export type ColumnDefinition<Row extends object, ColumnId extends string> = GridColumn & {
+  id: ColumnId
+  tooltip?: string
+  onClick?: (row: Row, event: CellClickedEventArgs) => void
+  themeOverride?: (row: Row) => BaseGridCell['themeOverride']
+  onContextMenu?: (row: Row, event: CellClickedEventArgs) => ContextMenuAction[]
+  isSelected?: (row: Row) => boolean
+  sortComparator?: (row1: Row, row2: Row, direction: 'asc' | 'desc' | null) => number
+}
+
+// STRING ----------------------------------------------------------------------
+export function stringColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => Link | string,
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: (row1, row2, direction) => {
+      const value1 = linkToString(lookup(row1))
+      const value2 = linkToString(lookup(row2))
+      return compare(value1, value2, direction)
+    },
+
+    ...definition,
+    // We omit the `onClick` property because the custom renderer has its own handler for it.
+    onClick: undefined,
+    themeOverride: undefined,
+    toCell: (item) => ({
+      kind: GridCellKind.Custom,
+      allowOverlay: true,
+      copyData: linkToString(lookup(item)),
+      data: {
+        kind: 'links-cell',
+        underlineOffset: 6,
+        links: [stringToLink(lookup(item))],
+        onClick: definition.onClick,
+        rowData: item,
+      },
+      themeOverride: definition.themeOverride?.(item),
+    }),
+  }
+}
+
+// STRING ARRAY ----------------------------------------------------------------
+export function stringArrayColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => Link[] | string[],
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: (row1, row2, direction) => {
+      const value1 = linkToString(lookup(row1)[0]) ?? ''
+      const value2 = linkToString(lookup(row2)[0]) ?? ''
+      return compare(value1, value2, direction)
+    },
+    ...definition,
+    // We omit the `onClick` property because the custom renderer has its own handler for it.
+    onClick: undefined,
+    toCell: (item) => ({
+      kind: GridCellKind.Custom,
+      allowOverlay: true,
+      copyData: lookup(item).map(linkToString).join(', '),
+      data: {
+        kind: 'links-cell',
+        underlineOffset: 6,
+        links: lookup(item).map(stringToLink),
+        onClick: definition.onClick,
+        rowData: item,
+      },
+      themeOverride: definition.themeOverride?.(item),
+    }),
+  }
+}
+
+// NUMBER ----------------------------------------------------------------------
+
+export function numberColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => number,
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: (row1, row2, direction) => compare(lookup(row1), lookup(row2), direction),
+    ...definition,
+    toCell: (item) => ({
+      contentAlign: 'right',
+      kind: GridCellKind.Text,
+      data: lookup(item).toLocaleString(),
+      allowOverlay: false,
+      displayData: lookup(item).toLocaleString(),
+      themeOverride: { cellHorizontalPadding: 0, ...definition.themeOverride?.(item) },
+    }),
+  }
+}
+
+export function optionalNumberColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => number | undefined | null,
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: (row1, row2, direction) => compare(lookup(row1), lookup(row2), direction),
+    ...definition,
+    toCell: (item) => ({
+      contentAlign: 'right',
+      kind: GridCellKind.Text,
+      data: lookup(item)?.toLocaleString() ?? '',
+      allowOverlay: false,
+      displayData: lookup(item)?.toLocaleString() ?? '',
+      themeOverride: { cellHorizontalPadding: 0, ...definition.themeOverride?.(item) },
+    }),
+  }
+}
+
+// PERCENTAGE ------------------------------------------------------------------
+export function percentageColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => string,
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: (row1, row2, direction) => compare(lookup(row1), lookup(row2), direction),
+    ...definition,
+    themeOverride: undefined,
+    toCell: (item) => ({
+      kind: GridCellKind.Text,
+      data: lookup(item),
+      allowOverlay: false,
+      displayData: lookup(item),
+
+      contentAlign: 'right',
+      themeOverride: definition.themeOverride?.(item),
+    }),
+  }
+}
+
+//BOOLEAN ----------------------------------------------------------------------
+export function booleanColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => Link | YesNo | YesNoBlank | boolean | null | undefined,
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: (row1, row2, direction) =>
+      compare(linkToBoolean(lookup(row1)) ? 1 : 0, linkToBoolean(lookup(row2)) ? 1 : 0, direction),
+
+    ...definition,
+    // We omit the `onClick` property because the custom renderer has its own handler for it.
+    onClick: undefined,
+    toCell: (item) => ({
+      kind: GridCellKind.Custom,
+      allowOverlay: true,
+      copyData: linkToBoolean(lookup(item)) ? 'true' : 'false',
+      data: {
+        kind: 'links-cell',
+        underlineOffset: 6,
+        links: [booleanToLink(lookup(item))],
+        onClick: definition.onClick,
+        rowData: item,
+      },
+      themeOverride: definition.themeOverride?.(item),
+    }),
+  }
+}
+
+export function toYesNo(value: boolean | null): 'Yes' | 'No' | '-' {
+  if (value === null) {
+    return '-'
+  }
+  return value ? 'Yes' : 'No'
+}
+
+export function toYesNoBlank(value: YesNoBlank): 'Yes' | 'No' | '-' {
+  if (value === 'Yes') {
+    return 'Yes'
+  }
+  if (value === 'No') {
+    return 'No'
+  }
+  return '-'
+}
+
+// COUNTRY ---------------------------------------------------------------------
+export function countryColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => { name: string; code: string },
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: Math.max(definition.title.length * 10, 200),
+    sortComparator: (row1, row2, direction) => compare(lookup(row1).name, lookup(row2).name, direction),
+    ...definition,
+    toCell: (item) => ({
+      kind: GridCellKind.Custom,
+      data: { kind: 'country', ...lookup(item) },
+      copyData: lookup(item).name,
+      displayData: lookup(item).name,
+      allowOverlay: false,
+      themeOverride: definition.themeOverride?.(item),
+    }),
+  }
+}
+
+// COUNTRY ARRAY ----------------------------------------------------------------
+export function countryArrayColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => { code: string; label: string; hoverLabel?: string }[],
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: Math.max(definition.title.length * 10, 200),
+    sortComparator: (row1, row2, direction) =>
+      compare(lookup(row1)[0]?.label ?? '', lookup(row2)[0]?.label ?? '', direction),
+    ...definition,
+    toCell: (item) => {
+      const values = lookup(item)
+      return {
+        kind: GridCellKind.Custom,
+        allowOverlay: true,
+        copyData: values.map((v) => v.label).join(', '),
+        data: {
+          kind: 'country-array-cell',
+          countries: values.map((v) => ({ id: v.code, label: v.label, hoverLabel: v.hoverLabel })),
+          rowData: item,
+        },
+        themeOverride: definition.themeOverride?.(item),
+      }
+    },
+  }
+}
+
+// INLINE BAR ------------------------------------------------------------------
+export function inlineBarChartColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => number[],
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    sortComparator: () => 0, // No sorting for inline bar charts
+    ...definition,
+    toCell: (item: Row) => ({
+      kind: GridCellKind.Custom,
+      data: { kind: 'inline-bar-chart', datapoints: lookup(item) },
+      copyData: lookup(item).join(', '),
+      allowOverlay: false,
+      themeOverride: definition.themeOverride?.(item),
+    }),
+  }
+}
+
+// FAVORITE -------------------------------------------------------------------
+export function favoriteColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => boolean,
+  definition: ColumnDefinition<Row, ColumnId>,
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: () => 0, // No sorting for favorites
+    ...definition,
+    toCell: (item) => ({
+      kind: GridCellKind.Custom,
+      allowOverlay: false,
+      data: { kind: 'favorite', isFavorite: lookup(item), rowData: item, isSelected: definition.isSelected?.(item) },
+      copyData: lookup(item) ? 'true' : 'false',
+      onClick: definition.onClick,
+      themeOverride: definition.themeOverride?.(item),
+    }),
+  }
+}
+
+export function compare(
+  value1: string | number | null | undefined,
+  value2: string | number | null | undefined,
+  direction: 'asc' | 'desc' | null,
+): number {
+  if (direction === null) {
+    return 0
+  }
+  if (value1 === null || value1 === undefined) {
+    return direction === 'asc' ? -1 : 1
+  }
+  if (value2 === null || value2 === undefined) {
+    return direction === 'asc' ? 1 : -1
+  }
+  if (value1 < value2) {
+    return direction === 'asc' ? -1 : 1
+  }
+  if (value1 > value2) {
+    return direction === 'asc' ? 1 : -1
+  }
+  return 0
+}
+
+export type FrontendSort<Row extends object, Fieldname extends string> =
+  | { order: null; field: null }
+  | {
+      order: 'asc' | 'desc'
+      sortComparator: (row1: Row, row2: Row, direction: 'asc' | 'desc' | null) => number
+      field: Fieldname
+    }
+export function sortData<Row extends object, Fieldname extends string>(
+  sortConfig: FrontendSort<Row, Fieldname>,
+  data: Row[],
+): Row[] {
+  if (!sortConfig.order) {
+    return data
+  }
+  return data.toSorted((a, b) => {
+    return sortConfig.sortComparator(a, b, sortConfig.order)
+  })
+}
+
+// DATE ------------------------------------------------------------------------
+type FallbackValue = {
+  /**
+   * Default value to use when the number is null or undefined.
+   * Defaults to an empty string.
+   * @default ''
+   * @example '-', '0.00', 'N/A'
+   */
+  fallback: string
+}
+
+export function dateColumn<Row extends object, ColumnId extends string>(
+  lookup: (item: Row) => Date | null | undefined,
+  definition: ColumnDefinition<Row, ColumnId>,
+  format: Intl.DateTimeFormatOptions & FallbackValue = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    fallback: '',
+  },
+): DataTableColumn<Row, ColumnId> {
+  return {
+    width: definition.title.length * 10,
+    sortComparator: () => 0, // TODO: implement sorting for dates later
+    ...definition,
+    toCell: (item) => {
+      const date = lookup(item)
+      const formattedDate = date ? date.toLocaleDateString(undefined, format) : format.fallback
+
+      return { kind: GridCellKind.Text, data: formattedDate, allowOverlay: false, displayData: formattedDate }
+    },
+  }
+}

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

@@ -0,0 +1,49 @@
+import { Theme } from '@context-providers/theme-context-provider'
+import type { CustomCell, CustomRenderer } from '@glideapps/glide-data-grid'
+
+const cache: Record<string, string> = {}
+export function cssVarToTableString(name: string, theme: Theme) {
+  const themeName = `${theme}_${name}`
+
+  if (!(themeName in cache) || cache[themeName] === '' || cache[themeName] === undefined) {
+    let value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    // Convert numeric font-weight to keyword if variable name suggests font-weight
+    if (name.includes('font-weight')) {
+      value = value === '700' ? 'bold' : 'normal'
+    }
+
+    cache[themeName] = value
+  }
+  return cache[themeName]
+}
+
+export const getTableTheme = (theme: Theme) => ({
+  bgHeader: cssVarToTableString('--background', theme),
+  bgHeaderHovered: cssVarToTableString('--background', theme),
+  bgHeaderHasFocus: cssVarToTableString('--background', theme),
+  bgCell: cssVarToTableString('--background', theme),
+  accentColor: 'transparent',
+  textHeaderSelected: cssVarToTableString('--foreground', theme),
+  textGroupHeader: cssVarToTableString('--foreground', theme),
+  textHeader: cssVarToTableString('--foreground', theme),
+  textLight: cssVarToTableString('--background', theme),
+  textDark: cssVarToTableString('--table-foreground', theme),
+  textMedium: cssVarToTableString('--muted-foreground', theme),
+
+  accentLight: cssVarToTableString('--background', theme),
+  linkColor: cssVarToTableString('--primary', theme),
+  drilldownBorder: cssVarToTableString('--background', theme),
+  cellHorizontalPadding: 15,
+  headerFontStyle: `${cssVarToTableString('--font-weight-bold', theme)} ${cssVarToTableString('--text-base', theme)}`,
+  baseFontStyle: `${cssVarToTableString('--font-weight-medium', theme)} ${cssVarToTableString('--text-base', theme)}`,
+
+  fontFamily: 'Helvetica, sans-serif',
+})
+
+export type HoverableRenderer<T extends CustomCell = CustomCell> = {
+  hoverOverlay?: (cellData: T['data']) => React.ReactNode
+} & CustomRenderer<T>
+
+export function isHoverableRenderer(r: any): r is { hoverOverlay: (data: any) => React.ReactNode } {
+  return typeof r?.hoverOverlay === 'function'
+}