@pilotiq/pilotiq 0.7.1 → 0.8.0

package/src/react/schemaRenderer/table/formatCell.tsx

@@ -0,0 +1,264 @@
+import React, { useState } from 'react'
+import { CheckIcon, CircleIcon, CopyIcon } from 'lucide-react'
+import type { ElementMeta } from '../../../schema/Element.js'
+import {
+  BADGE_COLOR_CLASSES,
+  COLUMN_COLOR_CLASSES,
+  COLUMN_WEIGHT_CLASSES,
+} from '../constants.js'
+import { resolveIcon } from '../helpers.js'
+import { applyColumnFormat } from '../columnFormat.js'
+
+// ─── Table cell rendering ───────────────────────────────────
+//
+// `formatCell` is the column-type dispatch (text / badge / icon /
+// image / color + array variants). `wrapCell` and `wrapCellList`
+// apply the shared text chrome (color / weight / tooltip / line-clamp /
+// wrap / copy-to-clipboard) so every column-type path stays consistent.
+
+/** Render a cell. Honors the column's `columnType` (badge/icon/boolean/
+ * image), built-in `format` spec, and per-row `_formatted[name]`
+ * overrides from server-side `formatStateUsing` callbacks. */
+export function formatCell(
+  value: unknown,
+  col?:  ElementMeta,
+  row?:  Record<string, unknown>,
+): React.ReactNode {
+  if (col === undefined) {
+    // Legacy raw-value fallback for non-column callsites.
+    if (value === null || value === undefined) return <span className="text-muted-foreground">—</span>
+    if (value instanceof Date)               return value.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
+    if (typeof value === 'boolean')          return value ? 'Yes' : 'No'
+    if (typeof value === 'object')           return JSON.stringify(value)
+    return String(value)
+  }
+
+  const columnType = String(col['columnType'] ?? 'text')
+  const fallback   = (col['default'] as string | undefined)
+
+  // Per-row server-eval result wins over everything.
+  const colName    = String(col['name'] ?? '')
+  const formatted  = (row?.['_formatted'] as Record<string, string> | undefined)?.[colName]
+  const richtext   = (row?.['_richtextCells'] as Record<string, true> | undefined)?.[colName] === true
+  const isBlank    = value === null || value === undefined || value === ''
+
+  if (formatted !== undefined && formatted !== '') {
+    return wrapCell(formatted, col, richtext)
+  }
+  if (isBlank) {
+    return <span className="text-muted-foreground">{fallback ?? '—'}</span>
+  }
+
+  switch (columnType) {
+    case 'badge': {
+      const map  = (col['badgeColors'] as Record<string, string> | undefined) ?? {}
+      const color = map[String(value)] ?? 'gray'
+      const cls  = BADGE_COLOR_CLASSES[color] ?? BADGE_COLOR_CLASSES['gray']
+      return (
+        <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}>
+          {String(value)}
+        </span>
+      )
+    }
+    case 'icon':
+    case 'boolean': {
+      const map  = (col['iconOptions'] as Record<string, { icon: string; color?: string }> | undefined) ?? {}
+      const opt  = map[String(value)]
+      if (!opt) return <span className="text-muted-foreground">—</span>
+      const Icon = resolveIcon(opt.icon) ?? CircleIcon
+      const colorClass = opt.color ? (COLUMN_COLOR_CLASSES[opt.color] ?? '') : ''
+      return <Icon className={`size-4 inline ${colorClass}`} aria-label={String(value)} />
+    }
+    case 'image': {
+      const url = String(value)
+      const size = (col['imageSize'] as number | undefined) ?? 32
+      const shape = col['imageShape'] === 'circle' ? 'rounded-full' : 'rounded-md'
+      return (
+        <img
+          src={url}
+          alt=""
+          width={size}
+          height={size}
+          className={`${shape} object-cover`}
+        />
+      )
+    }
+    case 'color': {
+      const css = String(value)
+      const shape = col['colorShape'] as 'rounded' | 'square' | 'circle' | undefined
+      const shapeClass =
+        shape === 'circle' ? 'rounded-full' :
+        shape === 'square' ? 'rounded-none' : 'rounded'
+      const hideValue = col['colorHideValue'] === true
+      return (
+        <span className="inline-flex items-center gap-2">
+          <span
+            className={`size-4 border border-border ${shapeClass}`}
+            style={{ backgroundColor: css }}
+            aria-hidden="true"
+          />
+          {!hideValue && <span className="text-sm">{css}</span>}
+        </span>
+      )
+    }
+    default: {
+      // Array-valued cells — `bulleted()` wins over `listWithLineBreaks()`
+      // when both are set. Falls through to the standard string path for
+      // non-array values so the per-cell formatters keep working.
+      if (Array.isArray(value)) {
+        const items = value.map(v => String(v))
+        if (col['bulleted'] === true) {
+          return wrapCellList(items, col, 'bulleted')
+        }
+        if (col['listWithLineBreaks'] === true) {
+          return wrapCellList(items, col, 'lines')
+        }
+        // Bare array — comma-join (matches the existing legacy fallback).
+        return wrapCell(items.join(', '), col)
+      }
+      // Text column — apply built-in format, then wrapper.
+      const fmt = col['format'] as { kind: string; [k: string]: unknown } | undefined
+      const display = fmt ? applyColumnFormat(value, fmt) : String(value)
+      return wrapCell(display, col)
+    }
+  }
+}
+
+/** Apply text-rendering chrome (color, weight, line-clamp, wrap, tooltip)
+ * to a stringified cell value. Used by the text and per-row formatter
+ * paths so styling stays consistent. When `asHtml` is true the content
+ * is server-rendered HTML (e.g. from the registered richtext renderer)
+ * and gets injected via `dangerouslySetInnerHTML`. */
+function wrapCell(content: string, col: ElementMeta, asHtml = false): React.ReactNode {
+  const color    = col['color']    as string | undefined
+  const weight   = col['weight']   as string | undefined
+  const tooltip  = col['tooltip']  as string | undefined
+  const wrapping = Boolean(col['wrap'])
+  const clamp    = col['lineClamp'] as number | undefined
+  const copyMsg  = col['copyMessage'] as string | undefined
+
+  const colorCls   = color  ? (COLUMN_COLOR_CLASSES[color]  ?? '') : ''
+  const weightCls  = weight ? (COLUMN_WEIGHT_CLASSES[weight] ?? '') : ''
+  const wrapCls    = wrapping ? 'whitespace-normal' : ''
+  const clampStyle = clamp !== undefined
+    ? { display: '-webkit-box', WebkitLineClamp: String(clamp), WebkitBoxOrient: 'vertical' as const, overflow: 'hidden' }
+    : undefined
+
+  const valueNode = asHtml
+    ? (
+        <span
+          className={`prose prose-sm max-w-none dark:prose-invert ${colorCls} ${weightCls} ${wrapCls}`.trim()}
+          title={tooltip}
+          style={clampStyle}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+      )
+    : (
+        <span
+          className={`${colorCls} ${weightCls} ${wrapCls}`.trim()}
+          title={tooltip}
+          style={clampStyle}
+        >
+          {content}
+        </span>
+      )
+
+  if (copyMsg === undefined) return valueNode
+
+  // Copy-to-clipboard trigger — copies the rendered text. For richtext
+  // cells the underlying source isn't separately stamped on the wire
+  // (would double the row payload), so the rendered HTML is what gets
+  // copied; admins comfortable with HTML still get something usable.
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      {valueNode}
+      <CellCopyButton text={content} label={copyMsg} />
+    </span>
+  )
+}
+
+/** Tabular-list rendering used by `Column.bulleted()` /
+ * `Column.listWithLineBreaks()`. `mode='bulleted'` mounts a `<ul>` with
+ * bullet markers; `mode='lines'` separates entries with `<br>`. Both
+ * inherit the same color / weight / wrap / tooltip / clamp chrome as
+ * the text path. Empty arrays fall through to the muted dash. */
+function wrapCellList(
+  items: string[],
+  col:   ElementMeta,
+  mode:  'bulleted' | 'lines',
+): React.ReactNode {
+  if (items.length === 0) {
+    const fallback = (col['default'] as string | undefined) ?? '—'
+    return <span className="text-muted-foreground">{fallback}</span>
+  }
+  const color    = col['color']   as string | undefined
+  const weight   = col['weight']  as string | undefined
+  const tooltip  = col['tooltip'] as string | undefined
+
+  const colorCls   = color  ? (COLUMN_COLOR_CLASSES[color]  ?? '') : ''
+  const weightCls  = weight ? (COLUMN_WEIGHT_CLASSES[weight] ?? '') : ''
+
+  if (mode === 'bulleted') {
+    return (
+      <ul
+        className={`list-disc pl-4 space-y-0.5 ${colorCls} ${weightCls}`.trim()}
+        title={tooltip}
+      >
+        {items.map((s, i) => <li key={i}>{s}</li>)}
+      </ul>
+    )
+  }
+  return (
+    <span
+      className={`${colorCls} ${weightCls}`.trim()}
+      title={tooltip}
+    >
+      {items.map((s, i) => (
+        <React.Fragment key={i}>
+          {i > 0 && <br />}
+          {s}
+        </React.Fragment>
+      ))}
+    </span>
+  )
+}
+
+/** Slim copy-to-clipboard button used by `Column.copyMessage()`. The
+ * label doubles as the toast text. Mirrors `EntryCopyButton`'s shape
+ * but compact enough to live inline next to a cell value. */
+function CellCopyButton({ text, label }: { text: string; label: string }): React.ReactNode {
+  const [copied, setCopied] = useState(false)
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true)
+        setTimeout(() => setCopied(false), 1500)
+      }).catch(() => { /* ignore — older browser / permission denied */ })
+    }
+  }
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      aria-label={copied ? label : 'Copy'}
+      title={copied ? label : 'Copy'}
+      data-no-row-nav
+      className="inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted"
+    >
+      {copied ? <CheckIcon className="size-3" /> : <CopyIcon className="size-3" />}
+    </button>
+  )
+}
+
+/** Resolve a stable row identifier — prefers the row's `id` field, falls
+ *  back to the row index for rows missing one. Used as the React key
+ *  in table bodies and as the `:id` substitution for row actions. */
+export function rowId(row: unknown, index: number): string {
+  if (row && typeof row === 'object' && 'id' in row) {
+    const id = (row as { id?: unknown }).id
+    if (id !== undefined && id !== null) return String(id)
+  }
+  return String(index)
+}

package/src/react/schemaRenderer/table/links.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import type { NavigateFn } from '../../navigate.js'
+
+// ─── Inline link chrome ─────────────────────────────────────
+//
+// Three small chrome components used by the table body:
+//   - RecordCellLink wraps each row-data cell in a real <a href> so
+//     cmd-click / right-click "open in new tab" works; plain clicks
+//     SPA-nav via useNavigate.
+//   - ActiveGroupKeyChip surfaces the current `?groupKey=` drill-in
+//     state above the table with an × that clears it.
+//   - GroupHeadingLink turns a banded group's heading into a clickable
+//     drill-in trigger when the group is scopable.
+
+/**
+ * Modifier-aware SPA-nav click handler. Plain left-click intercepts to
+ * `navigate(href)`; cmd / ctrl / shift / alt-click and middle-click
+ * fall through to the browser so "open in new tab" / "save link as"
+ * semantics keep working on every real `<a href>` in the table body.
+ */
+export function useSpaNavClick(
+  href:     string,
+  navigate: NavigateFn,
+): (e: React.MouseEvent<HTMLAnchorElement>) => void {
+  return (e) => {
+    if (e.button !== 0) return
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
+    e.preventDefault()
+    void navigate(href)
+  }
+}
+
+export function RecordCellLink({
+  href, navigate, children,
+}: {
+  href:     string
+  navigate: NavigateFn
+  children: React.ReactNode
+}) {
+  const onClick = useSpaNavClick(href, navigate)
+  return (
+    <a
+      href={href}
+      onClick={onClick}
+      className="block px-2 py-2 text-inherit no-underline hover:text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+    >
+      {children}
+    </a>
+  )
+}
+
+/**
+ * "Drilled into <Label>: <Value>" chip above the table when a group
+ * heading has been clicked. The × clears `?<prefix>groupKey=`, returning
+ * the table to its banded view. Real `<a href>` with `useNavigate()`
+ * intercept on plain left-click so cmd-click / middle-click open a
+ * fresh tab (rare but valid for sharing the banded view URL).
+ */
+export function ActiveGroupKeyChip({
+  label, value, displayValue, clearHref, navigate,
+}: {
+  label:        string
+  value:        string
+  displayValue: string
+  clearHref:    string
+  navigate:     NavigateFn
+}) {
+  const onClick = useSpaNavClick(clearHref, navigate)
+  return (
+    <div className="flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm">
+      <span className="text-muted-foreground">Drilled into</span>
+      <span className="font-medium text-foreground">
+        {label ? `${label}: ` : ''}{displayValue || value}
+      </span>
+      <a
+        href={clearHref}
+        onClick={onClick}
+        aria-label="Clear drill-in"
+        className="ms-auto text-muted-foreground hover:text-foreground"
+      >
+        ×
+      </a>
+    </div>
+  )
+}
+
+/**
+ * Group-heading text wrapped in a real `<a href>` that SPA-navs into the
+ * drilled-in URL. Plain left-click intercepts for `useNavigate()`;
+ * cmd/ctrl/shift-click + middle-click fall through to the browser so
+ * "open in new tab" semantics work. Visually inherits the heading
+ * styling — the link adds underline-on-hover affordance without
+ * disturbing the surrounding text-transform / size.
+ */
+export function GroupHeadingLink({
+  href, navigate, children,
+}: {
+  href:     string
+  navigate: NavigateFn
+  children: React.ReactNode
+}) {
+  const onClick = useSpaNavClick(href, navigate)
+  return (
+    <a
+      href={href}
+      onClick={onClick}
+      className="inline-flex items-center gap-1 text-inherit no-underline hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+    >
+      {children}
+    </a>
+  )
+}

package/src/react/schemaRenderer/table/renderRowActions.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import type { ElementMeta } from '../../../schema/Element.js'
+import type { RenderActionOptions } from '../action/buttons.js'
+
+// ─── Row-action chrome ──────────────────────────────────────
+//
+// Inline action strip mounted in the trailing cell of each table row.
+// Per-row visibility and disabled state come from the server-side eval
+// inside `dispatchTable` (`_visibleActions` / `_disabledActions` keys on
+// the row); we just consume the stamped allow/disallow sets here.
+//
+// The dispatch (link / fetch+JSON / modal / confirm) lives on the
+// action layer — `renderActionLike` is injected to keep the cycle
+// between this module and `SchemaRenderer.tsx`'s top-level dispatch
+// clean.
+
+type RenderActionLike = (el: ElementMeta, index: number, opts?: RenderActionOptions) => React.ReactNode
+
+/**
+ * Render row actions inline. Each Action becomes a small button next to
+ * the others; an `ActionGroup` placed in row position keeps its dropdown
+ * via `ActionGroupTrigger` (the dropdown UX is opt-in via grouping, not
+ * a default). The `:id` substitution comes from `opts.ids = [rowId]`.
+ */
+export function renderRowActions(
+  rowId:            string,
+  rowRecord:        Record<string, unknown> | undefined,
+  actions:          ElementMeta[],
+  renderActionLike: RenderActionLike,
+): React.ReactNode {
+  const rowVisibleSet  = new Set((rowRecord?.['_visibleActions']  as string[] | undefined) ?? [])
+  const rowDisabledSet = new Set((rowRecord?.['_disabledActions'] as string[] | undefined) ?? [])
+
+  const visible = actions.filter(a => {
+    if (!a['conditional']) return true
+    return rowVisibleSet.has(String(a['name'] ?? ''))
+  })
+
+  const decorate = (a: ElementMeta): ElementMeta => {
+    const name = String(a['name'] ?? '')
+    if (rowDisabledSet.has(name)) {
+      return { ...a, disabled: true }
+    }
+    return a
+  }
+
+  return (
+    <div className="flex items-center justify-end gap-1">
+      {visible.map((a, i) => renderActionLike(decorate(a), i, { ids: [rowId], size: 'sm' }))}
+    </div>
+  )
+}

package/src/react/schemaRenderer/table/url.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import type { NavigateFn } from '../../navigate.js'
+
+// ─── Table URL helpers ──────────────────────────────────────
+//
+// The table renderer mirrors its current sort / search / page / group
+// state to the URL query string. These helpers build / parse / dedupe
+// that slice without dragging the server-side dispatcher into the
+// client bundle.
+
+export interface TableUrlState {
+  search?: string
+  sort?:   { column: string; direction: 'asc' | 'desc' }
+  page?:   number
+  /** Active group column for `?group=`. Empty string means an explicit
+   * "no grouping" override (set on the URL when the user picks "None"
+   * in the dropdown to override `defaultGroup`); `undefined` omits the
+   * key entirely so the configured default takes over. */
+  group?:  string
+  /** Drilled-in group key for `?groupKey=`. `undefined` omits — the
+   * heading is banded (or no group at all); empty string explicitly
+   * clears (used by the chip's × so a stale URL value doesn't return
+   * via foreign-param round-trip). */
+  groupKey?: string
+}
+
+// Mirror of `prefixedKey` in `elements/dispatchTable.ts`. Kept inline so
+// SchemaRenderer doesn't drag the server-side dispatcher into the client
+// bundle.
+export function prefixK(prefix: string | undefined, key: string): string {
+  return prefix === undefined || prefix === '' ? key : `${prefix}_${key}`
+}
+
+let cachedSearchString: string | null = null
+let cachedSearchParams: URLSearchParams | null = null
+
+export function getCurrentSearchParams(): URLSearchParams | null {
+  if (typeof window === 'undefined') return null
+  const s = window.location.search
+  if (s === cachedSearchString && cachedSearchParams) return cachedSearchParams
+  cachedSearchString = s
+  cachedSearchParams = new URLSearchParams(s)
+  return cachedSearchParams
+}
+
+export function SearchFormHiddenInputs({ prefix }: { prefix: string | undefined }): React.ReactElement {
+  const sp = getCurrentSearchParams()
+  if (!sp) return <></>
+  const searchKey = prefixK(prefix, 'search')
+  const pageKey = prefixK(prefix, 'page')
+  const inputs: React.ReactElement[] = []
+  let i = 0
+  for (const [k, v] of sp) {
+    if (k === searchKey || k === pageKey) continue
+    inputs.push(<input key={i++} type="hidden" name={k} value={v} />)
+  }
+  return <>{inputs}</>
+}
+
+export function buildTableQuery(
+  state:        TableUrlState,
+  override:     TableUrlState,
+  pathname:     string,
+  filterValues: Record<string, string> = {},
+  prefix?:      string,
+): string {
+  const merged: TableUrlState = { ...state, ...override }
+  const params = new URLSearchParams()
+  // Foreign URL params (other tables' state, app-level params) round-trip
+  // verbatim so this builder only ever rewrites its own slice.
+  const currentParams = getCurrentSearchParams()
+  if (currentParams) {
+    const ours = new Set([
+      prefixK(prefix, 'search'),
+      prefixK(prefix, 'sort'),
+      prefixK(prefix, 'page'),
+      prefixK(prefix, 'perPage'),
+      prefixK(prefix, 'group'),
+      prefixK(prefix, 'groupKey'),
+      ...Object.keys(filterValues).map(n => prefixK(prefix, n)),
+    ])
+    for (const [k, v] of currentParams) {
+      if (ours.has(k)) continue
+      params.set(k, v)
+    }
+  }
+  // Carry forward active filter values so sort/pagination links don't
+  // accidentally clear them. Filter names can't collide with reserved
+  // keys (search/sort/page/perPage/group) — that's enforced upstream.
+  for (const [name, val] of Object.entries(filterValues)) {
+    if (val) params.set(prefixK(prefix, name), val)
+  }
+  if (merged.search)    params.set(prefixK(prefix, 'search'), merged.search)
+  if (merged.sort)      params.set(prefixK(prefix, 'sort'), `${merged.sort.column}:${merged.sort.direction}`)
+  if (merged.page && merged.page > 1) params.set(prefixK(prefix, 'page'), String(merged.page))
+  if (merged.group !== undefined) params.set(prefixK(prefix, 'group'), merged.group)
+  // groupKey is sparse — only writes when the override sets a non-empty
+  // value. Drill-out (chip ×) passes `''` to clear; the foreign-param
+  // dedupe set above already filtered the stale value out, so an empty
+  // override produces a URL without the key.
+  if (merged.groupKey) params.set(prefixK(prefix, 'groupKey'), merged.groupKey)
+  const qs = params.toString()
+  // Always anchor to a real pathname — Vike's client-side router treats
+  // a bare `?qs` href as a fresh URL with empty pathname, which routes
+  // to the dashboard and blanks the page during SPA navigation.
+  const base = pathname || (typeof window !== 'undefined' ? window.location.pathname : '')
+  return qs ? `${base}?${qs}` : (base || '#')
+}
+
+/**
+ * SPA-navigate to the current URL with the filter slice patched in
+ * place. `null` or empty-string values delete the key; non-empty values
+ * set it. The accompanying `?page` is always cleared so users land on
+ * the first page of the relaxed / tightened set. No-op on SSR.
+ *
+ * Used by every filter widget's "apply" / "clear" path (FilterSelect /
+ * MultiSelect / DateRange / Form / QueryBuilder + ActiveFiltersBar).
+ */
+export function patchFilterUrl(
+  navigate: NavigateFn,
+  prefix:   string | undefined,
+  patches:  Record<string, string | null>,
+): void {
+  if (typeof window === 'undefined') return
+  const url = new URL(window.location.href)
+  for (const [name, value] of Object.entries(patches)) {
+    const k = prefixK(prefix, name)
+    if (value === null || value === '') url.searchParams.delete(k)
+    else                                 url.searchParams.set(k, value)
+  }
+  url.searchParams.delete(prefixK(prefix, 'page'))
+  void navigate(url.pathname + url.search)
+}
+
+export function nextSortDir(
+  current: TableUrlState['sort'],
+  column:  string,
+): { column: string; direction: 'asc' | 'desc' } {
+  if (current?.column === column) {
+    return { column, direction: current.direction === 'asc' ? 'desc' : 'asc' }
+  }
+  return { column, direction: 'asc' }
+}