@pilotiq/pilotiq 0.24.1 → 0.24.2

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

@@ -1,308 +0,0 @@
-import React from 'react'
-import { ChevronDownIcon, InboxIcon } from 'lucide-react'
-import type { ElementMeta } from '../../../schema/Element.js'
-import { Checkbox } from '../../ui/checkbox.js'
-import { GroupHeadingLink, useSpaNavClick } from './links.js'
-import { GroupHeaderText } from './filters.js'
-import type { NavigateFn } from '../../navigate.js'
-
-// ─── Cards layout for `Table.contentLayout('cards')` ────────
-
-type RenderElement    = (el: ElementMeta, index: number) => React.ReactNode
-type RenderRowActions = (rowId: string, rowRecord: Record<string, unknown> | undefined, actions: ElementMeta[]) => React.ReactNode
-
-/**
- * Lookup tables for responsive grid column-counts in `contentLayout:
- * 'cards'`. Tailwind's JIT scanner needs **literal** class strings; we
- * can't construct them at runtime via template literals (`grid-cols-${n}`
- * would never be matched). Limit to 1–6 columns + 12 — covers every
- * reasonable card grid; bigger values are silently capped at 6 for
- * non-base breakpoints in `cardsPerRowClasses`.
- */
-const CARDS_GRID_COLS_BASE: Record<number, string> = {
-  1:  'grid-cols-1',
-  2:  'grid-cols-2',
-  3:  'grid-cols-3',
-  4:  'grid-cols-4',
-  5:  'grid-cols-5',
-  6:  'grid-cols-6',
-  12: 'grid-cols-12',
-}
-const CARDS_GRID_COLS_SM: Record<number, string> = {
-  1: 'sm:grid-cols-1',  2: 'sm:grid-cols-2',  3: 'sm:grid-cols-3',
-  4: 'sm:grid-cols-4',  5: 'sm:grid-cols-5',  6: 'sm:grid-cols-6',
-  12: 'sm:grid-cols-12',
-}
-const CARDS_GRID_COLS_MD: Record<number, string> = {
-  1: 'md:grid-cols-1',  2: 'md:grid-cols-2',  3: 'md:grid-cols-3',
-  4: 'md:grid-cols-4',  5: 'md:grid-cols-5',  6: 'md:grid-cols-6',
-  12: 'md:grid-cols-12',
-}
-const CARDS_GRID_COLS_LG: Record<number, string> = {
-  1: 'lg:grid-cols-1',  2: 'lg:grid-cols-2',  3: 'lg:grid-cols-3',
-  4: 'lg:grid-cols-4',  5: 'lg:grid-cols-5',  6: 'lg:grid-cols-6',
-  12: 'lg:grid-cols-12',
-}
-const CARDS_GRID_COLS_XL: Record<number, string> = {
-  1: 'xl:grid-cols-1',  2: 'xl:grid-cols-2',  3: 'xl:grid-cols-3',
-  4: 'xl:grid-cols-4',  5: 'xl:grid-cols-5',  6: 'xl:grid-cols-6',
-  12: 'xl:grid-cols-12',
-}
-const CARDS_GRID_COLS_2XL: Record<number, string> = {
-  1: '2xl:grid-cols-1',  2: '2xl:grid-cols-2',  3: '2xl:grid-cols-3',
-  4: '2xl:grid-cols-4',  5: '2xl:grid-cols-5',  6: '2xl:grid-cols-6',
-  12: '2xl:grid-cols-12',
-}
-
-export function pickCardCols(table: Record<number, string>, raw: number | undefined): string | undefined {
-  if (raw === undefined) return undefined
-  if (table[raw]) return table[raw]
-  // Snap unsupported values to nearest available — values outside [1,6]∪{12}
-  // round down. Already-clamped to [1,12] server-side.
-  if (raw >= 12) return table[12]
-  if (raw >= 6) return table[6]
-  if (raw >= 5) return table[5]
-  if (raw >= 4) return table[4]
-  if (raw >= 3) return table[3]
-  if (raw >= 2) return table[2]
-  return table[1]
-}
-
-/** Build a Tailwind grid-cols class string from a per-row config. Default
- * `{ default: 1, sm: 2, lg: 3 }` mirrors Filament's typical card grid. */
-export function cardsPerRowClasses(opts: Record<string, number> | undefined): string {
-  const cfg = opts ?? {}
-  const baseN = cfg['default'] ?? 1
-  const out: string[] = [pickCardCols(CARDS_GRID_COLS_BASE, baseN)!]
-  if (cfg['sm']  !== undefined) { const c = pickCardCols(CARDS_GRID_COLS_SM,  cfg['sm']);  if (c) out.push(c) }
-  if (cfg['md']  !== undefined) { const c = pickCardCols(CARDS_GRID_COLS_MD,  cfg['md']);  if (c) out.push(c) }
-  if (cfg['lg']  !== undefined) { const c = pickCardCols(CARDS_GRID_COLS_LG,  cfg['lg']);  if (c) out.push(c) }
-  if (cfg['xl']  !== undefined) { const c = pickCardCols(CARDS_GRID_COLS_XL,  cfg['xl']);  if (c) out.push(c) }
-  if (cfg['2xl'] !== undefined) { const c = pickCardCols(CARDS_GRID_COLS_2XL, cfg['2xl']); if (c) out.push(c) }
-  // Unset fallback covers Filament's typical default — 1 column on mobile,
-  // 2 on small screens, 3 on large.
-  if (Object.keys(cfg).length === 0) {
-    return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
-  }
-  return out.join(' ')
-}
-
-
-/**
- * Card-grid body for `Table.contentLayout('cards')`. Renders the rows
- * area only — the surrounding chrome (heading / search / filters /
- * pagination / bulk-action toolbar / "Sort by" picker) lives in the
- * parent `TableRendererBody` so both layouts share it.
- *
- * Each card renders its `_cardChildren` schema via the standard
- * `renderElement` walker, so any display-Element (Heading, Text, Image,
- * Icon, Badge entries, layout primitives, etc.) drops in without a new
- * renderer. Per-row chrome attaches via the same `_recordUrl` /
- * `_recordClasses` / `_visibleActions` / `_disabledActions` keys the
- * table-mode renderer reads from — `loadTableRecords` is unchanged.
- *
- * Group banding splits the rows into contiguous sections by
- * `_groupValue`, emitting a heading row above each section. The user's
- * configured per-card grid (`cardsPerRow`) re-applies inside every
- * section so the column count stays consistent.
- */
-export function CardsLayoutBody({
-  rows, visibleIds, selected, toggleRow,
-  hasBulkActions, hasRowActions, rowActions, hasRecordUrl, hasRecordClasses,
-  activeEmpty, EmptyIcon, hasFilterOrSearch,
-  defaultGroup, groupColumnLabel, groupCollapsible, collapsedGroups, toggleGroupCollapsed,
-  cardsPerRow, navigate,
-  groupHeadingScopable, buildGroupKeyHref,
-  renderElement, renderRowActions,
-}: {
-  rows:              unknown[]
-  visibleIds:        string[]
-  selected:          Set<string>
-  toggleRow:         (id: string) => void
-  hasBulkActions:    boolean
-  hasRowActions:     boolean
-  rowActions:        ElementMeta[]
-  hasRecordUrl:      boolean
-  hasRecordClasses:  boolean
-  activeEmpty:       { heading?: string; description?: string; icon?: string } | undefined
-  EmptyIcon:         React.ComponentType<{ className?: string }>
-  hasFilterOrSearch: boolean
-  defaultGroup:      string | undefined
-  groupColumnLabel:  string | undefined
-  groupCollapsible:  boolean
-  collapsedGroups:   Record<string, boolean>
-  toggleGroupCollapsed: (groupValue: string) => void
-  cardsPerRow:       Record<string, number> | undefined
-  navigate:          NavigateFn
-  // Drill-in affordances. Sparse: when `groupHeadingScopable` is false,
-  // the heading renders as before; `buildGroupKeyHref` is unused.
-  groupHeadingScopable?: boolean
-  buildGroupKeyHref?:    (value: string) => string
-  // Injected renderers — keeps the import cycle clean between
-  // SchemaRenderer.tsx's top-level dispatch and this body.
-  renderElement:     RenderElement
-  renderRowActions:  RenderRowActions
-}) {
-  const gridClass = `grid gap-4 ${cardsPerRowClasses(cardsPerRow)}`
-
-  if (rows.length === 0) {
-    return (
-      <div className="rounded-xl border bg-card py-12 text-center">
-        <div className="flex flex-col items-center gap-2 text-muted-foreground">
-          <EmptyIcon className="size-8 opacity-60" />
-          <p className="text-base font-medium text-foreground">
-            {activeEmpty?.heading
-              ?? (hasFilterOrSearch ? 'No matching records' : 'No records yet')}
-          </p>
-          {(activeEmpty?.description ||
-            (hasFilterOrSearch && !activeEmpty?.description)) && (
-            <p className="text-sm">
-              {activeEmpty?.description
-                ?? 'Try clearing filters or adjusting your search.'}
-            </p>
-          )}
-        </div>
-      </div>
-    )
-  }
-
-  // Split rows into contiguous group-banded sections so each section
-  // can render its own heading + grid. Without an active group this is
-  // one section with no heading.
-  type Section = {
-    groupValue?:  string
-    title?:       string
-    description?: string
-    indices:      number[]
-  }
-  const sections: Section[] = []
-  if (defaultGroup === undefined) {
-    sections.push({ indices: rows.map((_, i) => i) })
-  } else {
-    let current: Section | undefined
-    for (let i = 0; i < rows.length; i++) {
-      const r = rows[i] as Record<string, unknown>
-      const v = String(r['_groupValue'] ?? '')
-      if (current === undefined || current.groupValue !== v) {
-        const title       = r['_groupTitle']       as string | undefined
-        const description = r['_groupDescription'] as string | undefined
-        current = { groupValue: v, indices: [], ...(title ? { title } : {}), ...(description ? { description } : {}) }
-        sections.push(current)
-      }
-      current.indices.push(i)
-    }
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      {sections.map((section, si) => {
-        const collapsed = groupCollapsible
-          && section.groupValue !== undefined
-          && collapsedGroups[section.groupValue] === true
-        return (
-          <div key={si} className="flex flex-col gap-3">
-            {section.groupValue !== undefined && (() => {
-              const drillable = groupHeadingScopable === true
-                && buildGroupKeyHref !== undefined
-                && section.groupValue !== ''
-              const headingText = (
-                <GroupHeaderText
-                  label={groupColumnLabel}
-                  value={section.groupValue}
-                  title={section.title}
-                  description={section.description}
-                />
-              )
-              const headingNode = drillable
-                ? <GroupHeadingLink href={buildGroupKeyHref!(section.groupValue!)} navigate={navigate}>{headingText}</GroupHeadingLink>
-                : headingText
-              if (groupCollapsible) {
-                return (
-                  <div className="flex w-full items-center gap-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                    <button
-                      type="button"
-                      className="inline-flex items-center"
-                      onClick={() => toggleGroupCollapsed(section.groupValue!)}
-                      aria-expanded={!collapsed}
-                      aria-label={collapsed ? 'Expand group' : 'Collapse group'}
-                    >
-                      <ChevronDownIcon
-                        className={[
-                          'size-4 transition-transform',
-                          collapsed ? '-rotate-90' : '',
-                        ].filter(Boolean).join(' ')}
-                      />
-                    </button>
-                    {headingNode}
-                  </div>
-                )
-              }
-              return (
-                <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                  {headingNode}
-                </div>
-              )
-            })()}
-            {!collapsed && (
-              <div className={gridClass}>
-                {section.indices.map((ri) => {
-                  const id = visibleIds[ri]!
-                  const recordObj = rows[ri] as Record<string, unknown>
-                  const isSelected = selected.has(id)
-                  const recordUrl = hasRecordUrl ? (recordObj['_recordUrl'] as string | undefined) : undefined
-                  const customRowClasses = hasRecordClasses
-                    ? (recordObj['_recordClasses'] as string | undefined) ?? ''
-                    : ''
-                  const cardChildren = (recordObj['_cardChildren'] as ElementMeta[] | undefined) ?? []
-                  const cardClassName = [
-                    'group relative flex flex-col gap-3 rounded-xl border bg-card p-4 transition-colors',
-                    recordUrl ? 'hover:border-primary/40 hover:bg-accent/30' : '',
-                    isSelected ? 'border-primary ring-2 ring-primary/20' : '',
-                    customRowClasses,
-                  ].filter(Boolean).join(' ')
-
-                  return (
-                    <div key={id} className={cardClassName}>
-                      {recordUrl !== undefined && (
-                        <a
-                          href={recordUrl}
-                          onClick={useSpaNavClick(recordUrl, navigate)}
-                          aria-label="Open record"
-                          className="absolute inset-0 z-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                        >
-                          <span className="sr-only">Open record</span>
-                        </a>
-                      )}
-                      {hasBulkActions && (
-                        <div className="absolute top-3 right-3 z-10">
-                          <Checkbox
-                            aria-label={`Select row ${id}`}
-                            checked={isSelected}
-                            onCheckedChange={() => toggleRow(id)}
-                            data-no-row-nav
-                          />
-                        </div>
-                      )}
-                      <div className="relative z-[1] flex flex-col gap-3">
-                        {cardChildren.length === 0 ? (
-                          <div className="text-xs italic text-muted-foreground">
-                            No card content configured.
-                          </div>
-                        ) : cardChildren.map((c, i) => renderElement(c, i))}
-                      </div>
-                      {hasRowActions && (
-                        <div className="relative z-10 mt-auto flex items-center justify-end pt-2 border-t border-border/60">
-                          {renderRowActions(id, recordObj, rowActions)}
-                        </div>
-                      )}
-                    </div>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        )
-      })}
-    </div>
-  )
-}

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

@@ -1,123 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import type { ElementMeta } from '../../../schema/Element.js'
-import { TableRendererBody, type TableBodyDeps } from './TableRendererBody.js'
-
-// ─── Table wrapper + deferred-load shell ────────────────────
-
-
-/**
- * Tier-3 deferred-load shell. When `Resource.deferLoading = true`, the
- * SSR pass marks each Table on the page as `deferred` + stamps a
- * `tableUrl`. This wrapper paints a skeleton on first frame and fetches
- * the actual rows from the JSON endpoint after mount; the inner
- * `TableRendererBody` renders identically against either the SSR meta
- * (non-deferred case) or the fetched meta (deferred case).
- *
- * SPA nav with a query change re-runs SSR, which re-stamps `deferred`
- * — so the URL-change effect fires another fetch. The skeleton frame
- * still shows current sort / search / page / filter chrome because the
- * SSR pass mirrors URL state on the deferred Table.
- */
-export function TableRenderer({ el, deps }: { el: ElementMeta; deps: TableBodyDeps }) {
-  const isDeferred = el['deferred'] === true && typeof el['tableUrl'] === 'string'
-  const tableUrl   = isDeferred ? (el['tableUrl'] as string) : ''
-
-  // Track the URL search string so a navigation that changes filters /
-  // sort / page re-fires the fetch. Initialized lazy on first client
-  // render; on the SSR pass we just fall through to skeleton.
-  const [search, setSearch] = useState<string>(() =>
-    typeof window === 'undefined' ? '' : window.location.search,
-  )
-  useEffect(() => {
-    if (!isDeferred) return
-    if (typeof window === 'undefined') return
-    setSearch(window.location.search)
-  }, [isDeferred, el])
-
-  const [deferredMeta, setDeferredMeta] = useState<ElementMeta | null>(null)
-  const [deferredError, setDeferredError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!isDeferred || !tableUrl) return
-    if (typeof window === 'undefined') return
-    let cancelled = false
-    setDeferredMeta(null)
-    setDeferredError(null)
-    fetch(tableUrl + search, {
-      headers:     { 'Accept': 'application/json' },
-      credentials: 'same-origin',
-    })
-      .then(async r => {
-        const data = (await r.json()) as {
-          ok?:     boolean
-          tables?: Record<string, unknown>[]
-          error?:  string
-        }
-        if (cancelled) return
-        if (data.ok && Array.isArray(data.tables) && data.tables.length > 0) {
-          setDeferredMeta(data.tables[0] as ElementMeta)
-        } else {
-          setDeferredError(data.error ?? 'Failed to load table')
-        }
-      })
-      .catch(err => {
-        if (cancelled) return
-        setDeferredError(err instanceof Error ? err.message : 'Failed to load table')
-      })
-    return () => { cancelled = true }
-  }, [isDeferred, tableUrl, search])
-
-  if (isDeferred && deferredError) {
-    return (
-      <div className="rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
-        Failed to load table: {deferredError}
-      </div>
-    )
-  }
-  if (isDeferred && !deferredMeta) {
-    return <TableSkeleton el={el} />
-  }
-
-  return <TableRendererBody el={isDeferred ? deferredMeta! : el} deps={deps} />
-}
-
-/**
- * Skeleton placeholder painted while a deferred-loaded table fetches
- * its rows. Mirrors the table's heading + description chrome (already
- * present on `el`) so the frame doesn't pop layout when the real rows
- * arrive. Renders a small column header strip + 5 placeholder rows.
- */
-export function TableSkeleton({ el }: { el: ElementMeta }) {
-  const heading     = typeof el['heading']     === 'string' ? (el['heading']     as string) : undefined
-  const description = typeof el['description'] === 'string' ? (el['description'] as string) : undefined
-  const children    = el.children ?? []
-  const colCount    = Math.max(1, children.filter(c => c.type === 'column').length)
-  return (
-    <div className="space-y-3">
-      {(heading || description) ? (
-        <div className="space-y-1">
-          {heading     ? <div className="text-lg font-semibold">{heading}</div>            : null}
-          {description ? <div className="text-sm text-muted-foreground">{description}</div> : null}
-        </div>
-      ) : null}
-      <div className="rounded-md border">
-        <div className="grid border-b bg-muted/50 px-4 py-2"
-             style={{ gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }}>
-          {Array.from({ length: colCount }).map((_, i) => (
-            <div key={i} className="h-4 w-20 rounded bg-muted-foreground/20" />
-          ))}
-        </div>
-        <div className="divide-y">
-          {Array.from({ length: 5 }).map((_, rowIdx) => (
-            <div key={rowIdx} className="grid items-center px-4 py-3"
-                 style={{ gridTemplateColumns: `repeat(${colCount}, minmax(0, 1fr))` }}>
-              {Array.from({ length: colCount }).map((_, colIdx) => (
-                <div key={colIdx} className="h-4 w-2/3 rounded bg-muted-foreground/10 animate-pulse" />
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}