@pilotiq/pilotiq 0.23.1 → 0.24.2

package/src/react/widgets/StatsOverviewRenderer.tsx

@@ -1,232 +0,0 @@
-import React from 'react'
-import type { ElementMeta } from '../../schema/Element.js'
-import type { StatColor, StatMeta } from '../../schema/Stat.js'
-import { useWidgetData } from '../WidgetDataContext.js'
-import { useIconFor } from '../icon-context.js'
-import type { SerializedIcon } from '../../icons/types.js'
-
-/**
- * Plan #15 Phase B — `StatsOverviewRenderer`.
- *
- * Reads the resolved `_widgetData[id]` payload through `useWidgetData`,
- * lays out a card grid keyed off `meta.columns`, and falls back to a
- * skeleton row while the lazy fetch is in flight.
- */
-
-const COLOR_CARD_CLASSES: Record<StatColor, string> = {
-  default:     'border-border',
-  primary:     'border-primary/30',
-  success:     'border-emerald-500/40',
-  warning:     'border-amber-500/40',
-  destructive: 'border-red-500/40',
-  info:        'border-blue-500/40',
-}
-
-const COLOR_VALUE_CLASSES: Record<StatColor, string> = {
-  default:     'text-foreground',
-  primary:     'text-primary',
-  success:     'text-emerald-600 dark:text-emerald-400',
-  warning:     'text-amber-600 dark:text-amber-400',
-  destructive: 'text-red-600 dark:text-red-400',
-  info:        'text-blue-600 dark:text-blue-400',
-}
-
-const COLOR_SPARKLINE_CLASSES: Record<StatColor, string> = {
-  default:     'text-muted-foreground',
-  primary:     'text-primary',
-  success:     'text-emerald-500',
-  warning:     'text-amber-500',
-  destructive: 'text-red-500',
-  info:        'text-blue-500',
-}
-
-export interface StatsOverviewRendererProps {
-  meta: ElementMeta
-}
-
-export function StatsOverviewRenderer({ meta }: StatsOverviewRendererProps) {
-  const columns = clampColumns(meta['columns'])
-  const { data, error, isLoading } = useWidgetData(meta as Parameters<typeof useWidgetData>[0])
-
-  if (isLoading) return <StatsSkeleton columns={columns} />
-  if (error)     return <StatsError message={error} columns={columns} />
-
-  const stats = readStats(data)
-  if (stats.length === 0) return null
-  return (
-    <div
-      className="grid gap-4"
-      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
-    >
-      {stats.map((s, i) => <StatCard key={i} stat={s} />)}
-    </div>
-  )
-}
-
-function clampColumns(raw: unknown): number {
-  const n = Number(raw)
-  if (!Number.isFinite(n) || n <= 0) return 3
-  return Math.min(6, Math.max(1, Math.floor(n)))
-}
-
-function readStats(data: unknown): StatMeta[] {
-  if (!data || typeof data !== 'object') return []
-  const stats = (data as { stats?: unknown }).stats
-  return Array.isArray(stats) ? (stats as StatMeta[]) : []
-}
-
-// ─── Card ─────────────────────────────────────────────────
-
-interface StatCardProps {
-  stat: StatMeta
-}
-
-function StatCard({ stat }: StatCardProps) {
-  const color = stat.color ?? 'default'
-  const cardClass    = `rounded-xl border bg-card p-5 shadow-sm transition ${COLOR_CARD_CLASSES[color]}`
-  const valueClass   = `text-3xl font-semibold tracking-tight tabular-nums ${COLOR_VALUE_CLASSES[color]}`
-
-  const Inner = (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-start justify-between gap-3">
-        <p className="text-sm font-medium text-muted-foreground">{stat.label}</p>
-        {stat.icon && <StatIcon name={stat.icon} className={`size-5 ${COLOR_VALUE_CLASSES[color]}`} />}
-      </div>
-      <p className={valueClass}>{formatValue(stat.value)}</p>
-      {(stat.description || stat.descriptionIcon) && (
-        <StatDescription stat={stat} />
-      )}
-      {stat.chart && stat.chart.length > 0 && (
-        <Sparkline values={stat.chart} className={COLOR_SPARKLINE_CLASSES[color]} />
-      )}
-    </div>
-  )
-
-  const extraAttrs = (stat.extraAttributes ?? {}) as Record<string, unknown>
-
-  if (stat.url) {
-    return (
-      <a
-        href={stat.url}
-        target={stat.openInNewTab ? '_blank' : undefined}
-        rel={stat.openInNewTab ? 'noopener noreferrer' : undefined}
-        className={`${cardClass} block hover:border-foreground/30 hover:shadow-md`}
-        {...extraAttrs}
-      >
-        {Inner}
-      </a>
-    )
-  }
-
-  return <div className={cardClass} {...extraAttrs}>{Inner}</div>
-}
-
-function formatValue(v: StatMeta['value']): string {
-  if (v === null || v === undefined) return '—'
-  if (typeof v === 'number') return v.toLocaleString()
-  return String(v)
-}
-
-function StatDescription({ stat }: { stat: StatMeta }) {
-  const icon = stat.descriptionIcon
-  const before = icon?.position === 'before'
-  const text = stat.description
-  return (
-    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-      {icon && before && <StatIcon name={icon.name} className="size-3.5" />}
-      {text && <span>{text}</span>}
-      {icon && !before && <StatIcon name={icon.name} className="size-3.5" />}
-    </div>
-  )
-}
-
-function StatIcon({ name, className }: { name: string; className: string }) {
-  // Stats ship icons as registry-name strings; mirror Resource.icon /
-  // panel chrome lookup so the same registry serves both. The lookup
-  // accepts a `SerializedIcon` shape — wrap the bare string.
-  const serialized: SerializedIcon = name
-  const Icon = useIconFor(serialized)
-  if (!Icon) return null
-  return <Icon className={className} aria-hidden />
-}
-
-// ─── Sparkline ────────────────────────────────────────────
-
-interface SparklineProps {
-  values:    number[]
-  className: string
-}
-
-/**
- * Inline-SVG sparkline. Sized fluidly via `viewBox` + `preserveAspectRatio`
- * — the parent card sets the rendered height. No deps, no chart lib.
- *
- * Single-value series renders a flat horizontal line at mid-height; flat
- * series (all values equal) likewise — avoids divide-by-zero when the
- * range collapses.
- */
-function Sparkline({ values, className }: SparklineProps) {
-  if (values.length === 0) return null
-  const W = 100
-  const H = 30
-  const min = Math.min(...values)
-  const max = Math.max(...values)
-  const range = max - min || 1
-  const stepX = values.length > 1 ? W / (values.length - 1) : 0
-  const points = values.map((v, i) => {
-    const x = stepX === 0 ? W / 2 : i * stepX
-    const y = H - ((v - min) / range) * H
-    return `${x.toFixed(2)},${y.toFixed(2)}`
-  }).join(' ')
-  return (
-    <svg
-      viewBox={`0 0 ${W} ${H}`}
-      preserveAspectRatio="none"
-      className={`mt-2 h-8 w-full ${className}`}
-      aria-hidden
-    >
-      <polyline
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        points={points}
-      />
-    </svg>
-  )
-}
-
-// ─── Skeleton + error ─────────────────────────────────────
-
-function StatsSkeleton({ columns }: { columns: number }) {
-  return (
-    <div
-      className="grid gap-4"
-      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
-    >
-      {Array.from({ length: columns }, (_, i) => (
-        <div key={i} className="rounded-xl border border-border bg-card p-5 shadow-sm">
-          <div className="flex flex-col gap-3">
-            <div className="h-4 w-24 rounded bg-muted animate-pulse" />
-            <div className="h-8 w-20 rounded bg-muted animate-pulse" />
-            <div className="h-3 w-32 rounded bg-muted animate-pulse" />
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function StatsError({ message, columns }: { message: string; columns: number }) {
-  return (
-    <div
-      className="grid gap-4"
-      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
-    >
-      <div className="rounded-xl border border-red-500/40 bg-red-50 p-5 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-300">
-        Failed to load stats: {message}
-      </div>
-    </div>
-  )
-}

package/src/react/widgets/TableWidgetRenderer.tsx

@@ -1,231 +0,0 @@
-import React from 'react'
-import type { ElementMeta } from '../../schema/Element.js'
-import type { ColumnMeta } from '../../Column.js'
-import { useWidgetData } from '../WidgetDataContext.js'
-
-/**
- * Plan #15 Phase D — `TableWidgetRenderer`.
- *
- * Reads `_widgetData[id]` from the surrounding `WidgetDataProvider`
- * (lazy widgets fetch on mount via `widgetUrl`), then paints a slim
- * HTML table — column headers + body rows. No filters, no bulk actions,
- * no pagination, no search. The optional `viewAllUrl` renders as a
- * "View all →" link in the widget header.
- *
- * Cell formatting mirrors the full `TableRenderer` paint: per-row
- * `_formatted[colName]` (server-side `formatStateUsing`) wins over
- * built-in `format` specs (`dateTime / since / money / numeric / limit`).
- * Column types beyond plain text (`badge / icon / image`) defer to a
- * compact local switch — slim widgets typically use plain text columns,
- * but the dispatch is here for parity.
- */
-
-interface TableWidgetPayload {
-  rows:  Record<string, unknown>[]
-  total?: number
-}
-
-export interface TableWidgetRendererProps {
-  meta: ElementMeta
-}
-
-export function TableWidgetRenderer({ meta }: TableWidgetRendererProps) {
-  const label      = typeof meta['label']      === 'string' ? (meta['label']      as string) : undefined
-  const viewAllUrl = typeof meta['viewAllUrl'] === 'string' ? (meta['viewAllUrl'] as string) : undefined
-  const columns    = readColumns(meta['columns'])
-
-  const { data, error, isLoading } = useWidgetData(meta as Parameters<typeof useWidgetData>[0])
-
-  return (
-    <div className="rounded-xl border border-border bg-card shadow-sm">
-      {(label || viewAllUrl) && (
-        <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
-          {label
-            ? <h3 className="text-sm font-medium text-foreground">{label}</h3>
-            : <span />}
-          {viewAllUrl && (
-            <a
-              href={viewAllUrl}
-              className="text-xs font-medium text-primary hover:underline"
-            >
-              View all →
-            </a>
-          )}
-        </div>
-      )}
-      <div className="overflow-x-auto">
-        {isLoading
-          ? <TableSkeleton columns={columns} />
-          : error
-          ? <TableError message={error} />
-          : <TableBody columns={columns} rows={readRows(data)} />}
-      </div>
-    </div>
-  )
-}
-
-function readColumns(raw: unknown): ColumnMeta[] {
-  return Array.isArray(raw) ? (raw as ColumnMeta[]) : []
-}
-
-function readRows(data: unknown): Record<string, unknown>[] {
-  if (!data || typeof data !== 'object') return []
-  const rows = (data as TableWidgetPayload).rows
-  return Array.isArray(rows) ? rows : []
-}
-
-interface TableBodyProps {
-  columns: ColumnMeta[]
-  rows:    Record<string, unknown>[]
-}
-
-function TableBody({ columns, rows }: TableBodyProps) {
-  if (columns.length === 0) {
-    return <p className="px-4 py-6 text-sm text-muted-foreground">No columns configured.</p>
-  }
-  if (rows.length === 0) {
-    return <p className="px-4 py-6 text-sm text-muted-foreground">No records to display.</p>
-  }
-  return (
-    <table className="w-full text-sm">
-      <thead className="border-b border-border bg-muted/30">
-        <tr>
-          {columns.map(col => (
-            <th
-              key={col.name}
-              className={`px-4 py-2 text-left font-medium text-muted-foreground ${alignClass(col.alignment)}`}
-              style={col.width ? { width: col.width } : undefined}
-            >
-              {col.label}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row, i) => (
-          <tr key={i} className="border-b border-border last:border-0">
-            {columns.map(col => (
-              <td
-                key={col.name}
-                className={`px-4 py-2 ${alignClass(col.alignment)}`}
-              >
-                {renderCell(row[col.name], col, row)}
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-function alignClass(a?: string): string {
-  if (a === 'center') return 'text-center'
-  if (a === 'end')    return 'text-right'
-  return 'text-left'
-}
-
-/** Slim cell renderer — handles per-row `_formatted` overrides + the
- *  built-in `format` spec. Falls back to a plain stringification for
- *  unhandled `columnType`s; richer painting (badges, icons, images)
- *  belongs to the full `TableRenderer` for the Resource list page. */
-function renderCell(value: unknown, col: ColumnMeta, row: Record<string, unknown>): React.ReactNode {
-  const fallback = col.default ?? '—'
-  const formatted = (row['_formatted'] as Record<string, string> | undefined)?.[col.name]
-  if (formatted !== undefined && formatted !== '') return formatted
-
-  if (value === null || value === undefined || value === '') {
-    return <span className="text-muted-foreground">{fallback}</span>
-  }
-
-  const fmt = col.format
-  if (fmt) return applyFormat(value, fmt)
-
-  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)
-}
-
-function applyFormat(value: unknown, fmt: NonNullable<ColumnMeta['format']>): string {
-  switch (fmt.kind) {
-    case 'dateTime': {
-      const d = value instanceof Date ? value : new Date(String(value))
-      if (Number.isNaN(d.getTime())) return String(value)
-      return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
-    }
-    case 'since': {
-      const d = value instanceof Date ? value : new Date(String(value))
-      if (Number.isNaN(d.getTime())) return String(value)
-      const seconds = Math.round((Date.now() - d.getTime()) / 1000)
-      if (seconds < 60)        return `${seconds}s ago`
-      if (seconds < 3600)      return `${Math.floor(seconds / 60)}m ago`
-      if (seconds < 86_400)    return `${Math.floor(seconds / 3600)}h ago`
-      return `${Math.floor(seconds / 86_400)}d ago`
-    }
-    case 'money': {
-      const n = Number(value)
-      if (!Number.isFinite(n)) return String(value)
-      return new Intl.NumberFormat(fmt.locale, { style: 'currency', currency: fmt.currency }).format(n)
-    }
-    case 'numeric': {
-      const n = Number(value)
-      if (!Number.isFinite(n)) return String(value)
-      const decimals = fmt.decimals ?? 0
-      return new Intl.NumberFormat(fmt.locale, {
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
-      }).format(n)
-    }
-    case 'limit': {
-      const s = String(value)
-      return s.length > fmt.chars ? `${s.slice(0, fmt.chars)}…` : s
-    }
-    case 'words': {
-      const s = String(value).trim()
-      if (s.length === 0) return s
-      const tokens = s.split(/\s+/)
-      return tokens.length > fmt.words ? `${tokens.slice(0, fmt.words).join(' ')}…` : s
-    }
-  }
-}
-
-// ─── Skeleton + error ─────────────────────────────────────
-
-function TableSkeleton({ columns }: { columns: ColumnMeta[] }) {
-  const cols = Math.max(1, columns.length || 3)
-  return (
-    <table className="w-full text-sm">
-      <thead className="border-b border-border bg-muted/30">
-        <tr>
-          {Array.from({ length: cols }, (_, i) => (
-            <th key={i} className="px-4 py-2">
-              <div className="h-3 w-16 rounded bg-muted animate-pulse" />
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {Array.from({ length: 3 }, (_, r) => (
-          <tr key={r} className="border-b border-border last:border-0">
-            {Array.from({ length: cols }, (_, c) => (
-              <td key={c} className="px-4 py-3">
-                <div className="h-3 w-full max-w-[10rem] rounded bg-muted animate-pulse" />
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  )
-}
-
-function TableError({ message }: { message: string }) {
-  return (
-    <div className="border-t border-red-500/40 bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-300">
-      Failed to load table: {message}
-    </div>
-  )
-}

package/src/react/widgets/ViewRenderer.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import type { ElementMeta } from '../../schema/Element.js'
-import { useWidgetData } from '../WidgetDataContext.js'
-import { getWidgetComponent } from '../../widgets/registry.js'
-
-/**
- * Plan #15 — `ViewRenderer`. Mounts the user-supplied React component
- * registered under `meta.component` via `registerWidgetComponents()`,
- * passing `data` resolved from `View.getData(ctx)` (or fetched lazily
- * via the polling endpoint).
- *
- * Failure modes paint inline error panels rather than throwing — a
- * misnamed `View.component('Foo')` in production should surface a clear
- * pointer at the registration step, not a blank widget slot.
- */
-export interface ViewRendererProps {
-  meta: ElementMeta
-}
-
-export function ViewRenderer({ meta }: ViewRendererProps) {
-  const componentName = String(meta['component'] ?? '')
-  const { data, error, isLoading } = useWidgetData(meta as Parameters<typeof useWidgetData>[0])
-
-  if (!componentName) {
-    return (
-      <ViewError>
-        View widget is missing its <code className="font-mono">component</code> name —
-        set <code className="font-mono">static componentName = '...'</code> on the
-        subclass or call <code className="font-mono">.component('...')</code> in the
-        fluent form.
-      </ViewError>
-    )
-  }
-
-  const Component = getWidgetComponent(componentName)
-  if (!Component) {
-    return (
-      <ViewError>
-        No component registered under name <code className="font-mono">{componentName}</code>.
-        Register it at app boot:
-        <pre className="mt-2 overflow-x-auto rounded bg-amber-100/60 p-2 text-xs dark:bg-amber-900/30">{`import { registerWidgetComponents } from '@pilotiq/pilotiq/widgets'\nregisterWidgetComponents({ ${componentName}: ${componentName} })`}</pre>
-      </ViewError>
-    )
-  }
-
-  if (isLoading) return <ViewSkeleton />
-  if (error)     return <ViewError>{error}</ViewError>
-
-  return <Component data={data} />
-}
-
-function ViewSkeleton() {
-  return (
-    <div
-      role="status"
-      aria-label="Loading"
-      className="h-32 animate-pulse rounded-md border border-border bg-muted/40"
-    />
-  )
-}
-
-function ViewError({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      role="alert"
-      className="rounded-md border border-amber-500/40 bg-amber-50 p-3 text-sm text-amber-800 dark:bg-amber-950/30 dark:text-amber-200"
-    >
-      {children}
-    </div>
-  )
-}