@postxl/generators 1.1.1 → 1.2.0

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

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

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

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