@pilotiq/pilotiq 0.7.1 → 0.8.0

package/src/react/schemaRenderer/action/renderAction.tsx

@@ -0,0 +1,245 @@
+import React from 'react'
+import type { ElementMeta } from '../../../schema/Element.js'
+import { withTooltip } from '../helpers.js'
+import {
+  actionButtonClass,
+  renderActionBadge,
+  renderActionIcon,
+  type RenderActionOptions,
+} from './buttons.js'
+import { ActionGroupTrigger } from './ActionGroupTrigger.js'
+import { ActionModalDialog } from './ActionModalDialog.js'
+import { ConfirmActionDialog } from './ConfirmActionDialog.js'
+import { HandlerActionButton } from './HandlerActionButton.js'
+import { MethodActionButton } from './MethodActionButton.js'
+
+/**
+ * Function-prop deps for action rendering — injected from
+ * `SchemaRenderer.tsx`'s top-level dispatch. `renderElement` is needed
+ * for slot-component pass-through and modal-content-footer; `renderFormChild`
+ * is needed by `ActionModalDialog` for its form-body fields.
+ */
+export interface ActionRendererDeps {
+  renderElement:  (el: ElementMeta, index: number) => React.ReactNode
+  renderFormChild: (child: ElementMeta, index: number, values: Record<string, unknown>, errors: Record<string, string[]>) => React.ReactNode
+}
+
+/** Render either a single Action or an ActionGroup based on `el.type`.
+ * Used by callsites that accept both (table header / bulk toolbars,
+ * heading actions, container schemas). */
+export function renderActionLike(
+  el:    ElementMeta,
+  index: number,
+  opts:  RenderActionOptions,
+  deps:  ActionRendererDeps,
+): React.ReactNode {
+  if (el.type === 'slotComponent') {
+    // Plugin-contributed React mount — render through the main element
+    // dispatcher, which looks up the registered component and forwards
+    // its serialised props bag. Keeps every action-row slot (heading
+    // children, alert footer, empty-state footer, table-toolbar bulk
+    // strip) usable as a plugin extension point.
+    return deps.renderElement(el, index)
+  }
+  if (el.type === 'actionGroup') {
+    return (
+      <ActionGroupTrigger
+        key={index}
+        el={el}
+        ids={opts.ids ?? []}
+        renderFormChild={deps.renderFormChild}
+        renderElement={deps.renderElement}
+      />
+    )
+  }
+  return renderAction(el, index, opts, deps)
+}
+
+/** Render a single `Action` element. Dispatches on the Action's mode
+ *  (submit / href / method / handler) and chrome (confirm, modal). */
+export function renderAction(
+  el:    ElementMeta,
+  index: number,
+  opts:  RenderActionOptions,
+  deps:  ActionRendererDeps,
+): React.ReactNode {
+  const name        = String(el['name'] ?? '')
+  const label       = String(el['label'] ?? name)
+  const destructive = Boolean(el['destructive'])
+  const href        = el['href']        as string | undefined
+  const method      = el['method']      as 'post' | 'put' | 'patch' | 'delete' | undefined
+  const actionUrl   = el['action']      as string | undefined
+  const dispatchUrl = el['dispatchUrl'] as string | undefined
+  const submit      = Boolean(el['submit'])
+  const confirm     = el['confirm']     as { title?: string; message: string } | undefined
+  const tooltip     = el['tooltip'] as string | undefined
+  const iconOnly    = Boolean(el['iconOnly'])
+  const isDisabled  = Boolean(el['disabled'])
+
+  const className = actionButtonClass(el, opts) + (isDisabled ? ' opacity-50 cursor-not-allowed pointer-events-none' : '')
+  const icon  = renderActionIcon(el)
+  const badge = renderActionBadge(el)
+  // Icon-only buttons hide the label visually but expose it via aria-label.
+  const ariaLabel = iconOnly ? label : undefined
+  const inner = iconOnly ? <>{icon}{badge}</> : <>{icon}<span>{label}</span>{badge}</>
+
+  // Submit-style action — renders as <button type="submit">. Optionally
+  // targets a specific form via the HTML `form="<id>"` attribute so the
+  // button can submit a form it lives outside of (e.g. a page-header
+  // Save button driving a form below). When `formField` is set, the
+  // button posts a sentinel name/value pair (e.g. `_continueCreate=1`)
+  // so the server can branch on which submit was clicked.
+  if (submit) {
+    const formTarget = el['form'] as string | undefined
+    const formField  = el['formField'] as { name: string; value: string } | undefined
+    if (confirm) {
+      // Confirm-gated submit: render as type="button" so click opens the
+      // dialog instead of submitting; on confirm, programmatically submit
+      // the targeted form (or the closest enclosing form if no formTarget).
+      // `formField` is intentionally not threaded here — programmatic
+      // `requestSubmit()` has no submitter, so the name/value pair would
+      // be lost anyway. Pair `.confirm()` with a hidden input on the form
+      // if you need a sentinel under a confirm flow.
+      return (
+        <ConfirmActionDialog
+          key={index}
+          title={confirm.title}
+          message={confirm.message}
+          destructive={destructive}
+          onConfirm={() => {
+            if (typeof document === 'undefined') return
+            const form = formTarget
+              ? document.getElementById(formTarget) as HTMLFormElement | null
+              : document.querySelector<HTMLFormElement>('form')
+            form?.requestSubmit()
+          }}
+          trigger={(open) => withTooltip(
+            <button
+              type="button"
+              onClick={open}
+              className={className}
+              data-action-name={name}
+              aria-label={ariaLabel}
+            >
+              {inner}
+            </button>,
+            tooltip,
+          )}
+        />
+      )
+    }
+    return withTooltip(
+      <button
+        key={index}
+        type="submit"
+        form={formTarget}
+        className={className}
+        data-action-name={name}
+        aria-label={ariaLabel}
+        {...(formField ? { name: formField.name, value: formField.value } : {})}
+      >
+        {inner}
+      </button>,
+      tooltip,
+    )
+  }
+
+  // Substitute the `:id` placeholder with the current row id when this
+  // action is rendered in a row context. Lets row-level link/form actions
+  // ship a single template URL like `/admin/articles/:id/edit`.
+  const rowId = opts.ids?.length === 1 ? opts.ids[0]! : undefined
+  const resolveTemplate = (s: string | undefined): string | undefined =>
+    s && rowId ? s.replace(':id', rowId) : s
+
+  // Link-style action.
+  if (href) {
+    return withTooltip(
+      <a
+        key={index}
+        href={resolveTemplate(href)}
+        className={className}
+        data-action-name={name}
+        aria-label={ariaLabel}
+      >
+        {inner}
+      </a>,
+      tooltip,
+    )
+  }
+
+  // Form-style action (POST/PUT/PATCH/DELETE) — fetch + JSON, no full reload.
+  if (method) {
+    const resolvedUrl = resolveTemplate(actionUrl)
+    return (
+      <MethodActionButton
+        key={index}
+        url={resolvedUrl}
+        method={method}
+        confirm={confirm}
+        destructive={destructive}
+        className={className}
+        name={name}
+        ariaLabel={ariaLabel}
+        tooltip={tooltip}
+        inner={inner}
+      />
+    )
+  }
+
+  // Handler-style action — fetch + JSON dispatch with `ids[]` body.
+  if (dispatchUrl) {
+    const ids = opts.ids ?? []
+    const modal = el['modal']
+    if (confirm || modal) {
+      return (
+        <ActionModalDialog
+          key={index}
+          meta={el}
+          ids={ids}
+          trigger={(open) => withTooltip(
+            <button
+              type="button"
+              onClick={open}
+              className={className}
+              data-action-name={name}
+              aria-label={ariaLabel}
+            >
+              {inner}
+            </button>,
+            tooltip,
+          )}
+          renderFormChild={deps.renderFormChild}
+          renderElement={deps.renderElement}
+        />
+      )
+    }
+    return (
+      <HandlerActionButton
+        key={index}
+        url={dispatchUrl}
+        ids={ids}
+        className={className}
+        name={name}
+        ariaLabel={ariaLabel}
+        tooltip={tooltip}
+        inner={inner}
+      />
+    )
+  }
+
+  // No dispatch wired (no href / method / dispatchUrl). Render a disabled
+  // placeholder so the user sees the button, but it does nothing.
+  return withTooltip(
+    <button
+      key={index}
+      type="button"
+      disabled
+      className={className + ' opacity-50 cursor-not-allowed'}
+      data-action-name={name}
+      aria-label={ariaLabel}
+    >
+      {inner}
+    </button>,
+    tooltip,
+  )
+}

package/src/react/schemaRenderer/columnFormat.ts

@@ -0,0 +1,65 @@
+/** Apply a built-in `ColumnFormat` to a raw value; returns a string.
+ *
+ *  Used by both `formatCell` (table layer) and `renderEntry` (infolist
+ *  Phase #16). Hoisted out of the table block so EntryRenderer doesn't
+ *  need to import across phases. */
+export function applyColumnFormat(value: unknown, format: { kind: string; [k: string]: unknown }): string {
+  if (value === null || value === undefined || value === '') return ''
+  switch (format['kind']) {
+    case 'dateTime': {
+      const d = value instanceof Date ? value : new Date(String(value))
+      if (isNaN(d.getTime())) return String(value)
+      // Default — locale-aware short date+time. Custom patterns aren't
+      // supported (no date-fns dep); pattern is kept on meta for future use.
+      return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
+    }
+    case 'since': {
+      const d = value instanceof Date ? value : new Date(String(value))
+      if (isNaN(d.getTime())) return String(value)
+      const seconds = Math.round((Date.now() - d.getTime()) / 1000)
+      const abs = Math.abs(seconds)
+      const past = seconds >= 0
+      const fmt = (n: number, unit: string): string =>
+        past ? `${n} ${unit}${n === 1 ? '' : 's'} ago` : `in ${n} ${unit}${n === 1 ? '' : 's'}`
+      if (abs < 60)        return past ? 'just now' : 'in a moment'
+      if (abs < 3600)      return fmt(Math.floor(abs / 60),    'minute')
+      if (abs < 86400)     return fmt(Math.floor(abs / 3600),  'hour')
+      if (abs < 2592000)   return fmt(Math.floor(abs / 86400), 'day')
+      if (abs < 31536000)  return fmt(Math.floor(abs / 2592000), 'month')
+      return fmt(Math.floor(abs / 31536000), 'year')
+    }
+    case 'money': {
+      const n = typeof value === 'number' ? value : Number(value)
+      if (isNaN(n)) return String(value)
+      const currency = String(format['currency'] ?? 'USD')
+      const locale   = format['locale'] as string | undefined
+      return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(n)
+    }
+    case 'numeric': {
+      const n = typeof value === 'number' ? value : Number(value)
+      if (isNaN(n)) return String(value)
+      const decimals = format['decimals'] as number | undefined
+      const locale   = format['locale']   as string | undefined
+      const opts: Intl.NumberFormatOptions = {}
+      if (decimals !== undefined) {
+        opts.minimumFractionDigits = decimals
+        opts.maximumFractionDigits = decimals
+      }
+      return new Intl.NumberFormat(locale, opts).format(n)
+    }
+    case 'limit': {
+      const s = String(value)
+      const n = format['chars'] as number
+      return s.length > n ? s.slice(0, n) + '…' : s
+    }
+    case 'words': {
+      const s = String(value).trim()
+      if (s.length === 0) return s
+      const tokens = s.split(/\s+/)
+      const n = format['words'] as number
+      return tokens.length > n ? tokens.slice(0, n).join(' ') + '…' : s
+    }
+    default:
+      return String(value)
+  }
+}

package/src/react/schemaRenderer/constants.ts

@@ -0,0 +1,50 @@
+// Tailwind-class lookup tables shared across SchemaRenderer's element
+// dispatchers. Pure data — no React, no DOM.
+
+export const TEXT_COLOR_CLASSES: Record<string, string> = {
+  default:     '',
+  muted:       'text-muted-foreground',
+  primary:     'text-primary',
+  destructive: 'text-destructive',
+  success:     'text-emerald-600 dark:text-emerald-400',
+  warning:     'text-amber-600 dark:text-amber-400',
+  info:        'text-blue-600 dark:text-blue-400',
+}
+
+export const TEXT_SIZE_CLASSES: Record<string, string> = {
+  xs:   'text-xs',
+  sm:   'text-sm',
+  base: 'text-base',
+  lg:   'text-lg',
+  xl:   'text-xl',
+}
+
+export const TEXT_WEIGHT_CLASSES: Record<string, string> = {
+  normal:   'font-normal',
+  medium:   'font-medium',
+  semibold: 'font-semibold',
+  bold:     'font-bold',
+}
+
+// `ColumnColor` / `ColumnWeight` mirror the text-side scales 1:1. Kept as
+// named aliases so column-cell call sites still read distinctly, but a
+// single source-of-truth means adding a new color / weight only touches
+// the text map.
+export const COLUMN_COLOR_CLASSES  = TEXT_COLOR_CLASSES
+export const COLUMN_WEIGHT_CLASSES = TEXT_WEIGHT_CLASSES
+
+export const BADGE_COLOR_CLASSES: Record<string, string> = {
+  gray:        'bg-muted text-muted-foreground',
+  primary:     'bg-primary/10 text-primary',
+  success:     'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200',
+  warning:     'bg-amber-100  text-amber-800  dark:bg-amber-900/40  dark:text-amber-200',
+  destructive: 'bg-destructive/10 text-destructive',
+  info:        'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200',
+}
+
+export const alertStyles: Record<string, string> = {
+  info:    'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200',
+  warning: 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-200',
+  success: 'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200',
+  danger:  'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-200',
+}

package/src/react/schemaRenderer/form/FormRenderer.tsx

@@ -0,0 +1,233 @@
+import React, { useRef, useState } from 'react'
+import type { ElementMeta } from '../../../schema/Element.js'
+import type { NotificationMeta } from '../../../notifications/Notification.js'
+import { FormIdContext, FormStateProvider, useFormState } from '../../FormStateContext.js'
+import { useNavigate } from '../../navigate.js'
+import { useToast } from '../../Toaster.js'
+import { renderField } from './renderField.js'
+
+// ─── Form ───────────────────────────────────────────────────
+
+type RenderElement = (el: ElementMeta, index: number) => React.ReactNode
+
+/**
+ * Top-level `<form>` element. Owns:
+ *   - HTML form chrome (action, method, _method spoof, hidden formId)
+ *   - Fetch + JSON submission with `Accept: application/json` (so the
+ *     server can return 422 with field errors instead of re-rendering)
+ *   - Inline error stamping (`_form` banner + per-field error strings)
+ *   - `FormStateProvider` mount when the form has any reactive field
+ *     (`live()` or `afterStateUpdatedJs`) and a `stateUrl` was stamped.
+ *
+ * `renderElement` is injected for non-field children inside the form
+ * body (cards / dividers / fieldsets / etc).
+ */
+export function FormRenderer({
+  el,
+  renderElement,
+}: {
+  el: ElementMeta
+  renderElement: RenderElement
+}) {
+  const formId = String(el['formId'] ?? '')
+  const method = String(el['method'] ?? 'post').toLowerCase()
+  const action = el['action'] ? String(el['action']) : undefined
+  const stateUrl = el['stateUrl'] ? String(el['stateUrl']) : undefined
+  const serverValues = (el['values'] as Record<string, unknown> | undefined) ?? {}
+  const serverErrors = (el['errors'] as Record<string, string[]> | undefined) ?? {}
+
+  // Methods other than GET/POST are spoofed via _method, mirroring Laravel.
+  const httpMethod = method === 'get' ? 'get' : 'post'
+  const spoofedMethod = method !== 'get' && method !== 'post' ? method : undefined
+
+  const navigate = useNavigate()
+  const { notify } = useToast()
+
+  // Client-side errors override server-rendered ones after a fetch-mode
+  // 422 response. Field values stay uncontrolled — the inputs in the DOM
+  // still hold whatever the user typed, so we don't need to mirror them.
+  const [clientErrors, setClientErrors] = useState<Record<string, string[]> | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const errors = clientErrors ?? serverErrors
+
+  // Plan #14 — formRef is threaded into FormStateProvider so live triggers
+  // can snapshot the form's full DOM state via FormData (captures
+  // uncontrolled inner-Repeater inputs that don't participate in the
+  // controlled values map).
+  const formRef = useRef<HTMLFormElement | null>(null)
+
+  const formErrors = errors['_form'] ?? []
+  const hasFieldErrors = Object.keys(errors).some(k => k !== '_form')
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
+    if (!action) return                       // no action URL → fall through to native submit
+    e.preventDefault()
+    if (submitting) return
+    setSubmitting(true)
+    setClientErrors(null)
+
+    try {
+      // Thread `event.submitter` so the clicked submit button's
+      // name/value pair lands in the FormData. Without this, secondary
+      // submits like "Create & create another" can't signal which
+      // button fired through the body. Supported in all evergreen
+      // browsers since 2022; cast through `as any` because TS lib.dom
+      // hasn't picked up the optional submitter argument on every
+      // version.
+      const submitter = (e.nativeEvent as SubmitEvent).submitter as HTMLElement | null
+      const fd = new (FormData as any)(e.currentTarget, submitter ?? undefined) as FormData
+      const res = await fetch(action, {
+        method:  'POST',
+        headers: { 'Accept': 'application/json' },
+        body:    fd,
+      })
+      const data = await res.json().catch(() => ({}))
+
+      if (res.status === 422) {
+        const next = (data as { errors?: Record<string, string[]> }).errors ?? {}
+        setClientErrors(next)
+        // Surface a banner-level message if no field errors were returned
+        // — the form-level _form key lights up the existing banner.
+        setSubmitting(false)
+        return
+      }
+      if (!res.ok) {
+        const message = String((data as { error?: string }).error ?? `Request failed (${res.status})`)
+        notify({ type: 'error', title: 'Save failed', body: message })
+        setSubmitting(false)
+        return
+      }
+
+      // Success — drain notifications and SPA-navigate to the redirect.
+      const notifs = (data as { notifications?: NotificationMeta[] }).notifications
+      if (notifs && notifs.length > 0) for (const n of notifs) notify(n)
+      const redirect = String((data as { redirect?: string }).redirect ?? '')
+      // The server may force a navigate even when the redirect equals
+      // the current URL — used by "Create & create another" so the
+      // form remounts with empty defaults instead of preserving the
+      // just-submitted values. Otherwise: skip navigate when the
+      // redirect matches the current URL, since re-fetching the same
+      // page would force a form remount and reset scroll.
+      const force = Boolean((data as { force?: boolean }).force)
+      const currentUrl = typeof window !== 'undefined'
+        ? window.location.pathname + window.location.search
+        : ''
+      if (redirect && (force || redirect !== currentUrl)) {
+        navigate(redirect)
+        // Don't reset submitting on success — the navigation will unmount us.
+      } else {
+        setSubmitting(false)
+      }
+    } catch (err) {
+      notify({ type: 'error', title: 'Save failed', body: err instanceof Error ? err.message : String(err) })
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form
+      ref={formRef}
+      id={formId || undefined}
+      data-form-id={formId || undefined}
+      method={httpMethod}
+      action={action}
+      onSubmit={onSubmit}
+      className="flex flex-col gap-6"
+    >
+      {formId && <input type="hidden" name="_formId" value={formId} />}
+      {spoofedMethod && <input type="hidden" name="_method" value={spoofedMethod} />}
+      {(formErrors.length > 0 || hasFieldErrors) && (
+        <div className="rounded-lg border border-destructive/40 bg-destructive/5 text-destructive p-3 text-sm">
+          {formErrors.length > 0 ? (
+            <ul className="list-disc pl-4">
+              {formErrors.map((msg, i) => <li key={i}>{msg}</li>)}
+            </ul>
+          ) : (
+            'Please correct the errors below.'
+          )}
+        </div>
+      )}
+      <FormIdContext.Provider value={formId}>
+        {stateUrl ? (
+          <FormStateProvider initialMeta={el} initialErrors={errors} formRef={formRef}>
+            <FormBody
+              fallbackChildren={el.children ?? []}
+              fallbackValues={serverValues}
+              fallbackErrors={errors}
+              renderElement={renderElement}
+            />
+          </FormStateProvider>
+        ) : (
+          (el.children ?? []).map((child, i) => renderFormChild(child, i, serverValues, errors, renderElement))
+        )}
+      </FormIdContext.Provider>
+    </form>
+  )
+}
+
+/**
+ * Renders the controlled-form's children, sourcing them from the
+ * `FormStateProvider`'s current `formMeta` (which gets replaced after
+ * each live POST). Falls back to the props if (somehow) used outside a
+ * provider — the shell only mounts this when `stateUrl` is set so the
+ * fallback path is dead code in practice, but keeping it defensive.
+ */
+function FormBody({
+  fallbackChildren, fallbackValues, fallbackErrors, renderElement,
+}: {
+  fallbackChildren: ElementMeta[]
+  fallbackValues:   Record<string, unknown>
+  fallbackErrors:   Record<string, string[]>
+  renderElement:    RenderElement
+}): React.ReactElement {
+  const ctx = useFormState()
+  if (!ctx) {
+    return <>{fallbackChildren.map((child, i) => renderFormChild(child, i, fallbackValues, fallbackErrors, renderElement))}</>
+  }
+  const children = (ctx.formMeta.children ?? []) as ElementMeta[]
+  return <>{children.map((child, i) => renderFormChild(child, i, ctx.values, ctx.errors, renderElement))}</>
+}
+
+/**
+ * Render one child of a form's resolved schema with per-field values + errors.
+ *
+ * Field elements wrap in error-stamp chrome; non-field children fall
+ * through to `renderElement` so the form body can host cards / dividers /
+ * fieldsets / etc.
+ */
+export function renderFormChild(
+  child:         ElementMeta,
+  index:         number,
+  values:        Record<string, unknown>,
+  errors:        Record<string, string[]>,
+  renderElement: RenderElement,
+): React.ReactNode {
+  if (child.type === 'field') {
+    const name      = String(child['name'] ?? '')
+    const fieldErrors = errors[name] ?? []
+    const value     = values[name]
+    return (
+      <div key={index} className="flex flex-col gap-1">
+        {renderFieldWithValue(child, index, value, renderElement)}
+        {fieldErrors.map((msg, i) => (
+          <p key={i} className="text-xs text-destructive">{msg}</p>
+        ))}
+      </div>
+    )
+  }
+  return renderElement(child, index)
+}
+
+function renderFieldWithValue(
+  el: ElementMeta,
+  index: number,
+  value: unknown,
+  renderElement: RenderElement,
+): React.ReactNode {
+  // The form-state value (from `withValues` / record-fill) wins when present;
+  // otherwise the meta's own `defaultValue` (Plan #6 `Field.default()`) survives.
+  const enriched: ElementMeta = value !== undefined
+    ? { ...el, defaultValue: value }
+    : el
+  return renderField(enriched, index, renderElement)
+}