@asteby/metacore-runtime-react 10.0.0 → 12.0.0

package/src/dialogs/types.ts

@@ -0,0 +1,119 @@
+/**
+ * Shared types for record-oriented dialogs in `@asteby/metacore-runtime-react`.
+ *
+ * These dialogs are intentionally generic: any addon that drives a metadata-
+ * backed CRUD surface can render them by passing a `modelKey`. The dialogs
+ * resolve field shape, labels, and validation hints from the metadata server
+ * (default: `/metadata/modal/:modelKey`) via the configured `useApi()`
+ * transport. Hosts may override transport behaviour by supplying explicit
+ * `endpoint` overrides and/or `onCreate` / `onDelete` callbacks.
+ *
+ * Wave 2.5 cleanup — replaces the product-specific dialogs that used to live
+ * in `ops/frontend/src/components/dynamic/` for any record kind that does not
+ * need pricing rules, media galleries, or category-driven custom fields.
+ */
+
+/**
+ * Identifier for a model registered with the metadata service. The wire format
+ * is a plain string (e.g. `"products"`, `"organizations"`, `"users"`). The
+ * dialogs do not interpret this value; it is forwarded to the API transport.
+ */
+export type ModelKey = string
+
+/**
+ * Optional schema hint, accepted only as a passthrough for hosts that want to
+ * supply pre-fetched metadata instead of waiting for the dialog to call
+ * `/metadata/modal/:modelKey`. The runtime intentionally keeps the shape loose
+ * because metadata is owned by each backend addon.
+ */
+export interface ModelSchema {
+    title?: string
+    createTitle?: string
+    editTitle?: string
+    fields?: Array<{
+        key: string
+        label: string
+        type: string
+        required?: boolean
+        defaultValue?: unknown
+        placeholder?: string
+        readonly?: boolean
+        hidden?: boolean
+        // additional metadata may be present; the dialogs treat it as opaque
+        [extra: string]: unknown
+    }>
+}
+
+/**
+ * Result shape returned by `onCreate` callbacks. Hosts may return `void` if
+ * the resulting record id is not needed downstream.
+ */
+export type CreateResult = { id: string } | void
+
+/**
+ * Base props shared by every record dialog.
+ */
+export interface RecordDialogProps {
+    /** Model key forwarded to the metadata service and transport calls. */
+    modelKey: ModelKey
+    /** Controlled open state. */
+    open: boolean
+    /** Open-state controller. */
+    onOpenChange: (open: boolean) => void
+    /**
+     * Optional custom endpoint base. When provided, the dialog uses
+     * `${endpoint}` (for create/list) and `${endpoint}/${recordId}` (for
+     * fetch/update/delete). When omitted, the dialog uses
+     * `/dynamic/${modelKey}` / `/dynamic/${modelKey}/${recordId}`.
+     */
+    endpoint?: string
+    /**
+     * Optional pre-fetched schema. When omitted, the dialog fetches metadata
+     * from `/metadata/modal/${modelKey}` via the configured API transport.
+     */
+    schema?: ModelSchema
+}
+
+/**
+ * Props for the create / edit dialog.
+ *
+ * When `recordId` is provided the dialog operates in edit mode; otherwise it
+ * starts in create mode. Supplying `onCreate` overrides the default transport
+ * call so that hosts may route writes through custom mutations (optimistic
+ * updates, audit hooks, etc.). The default behaviour POSTs/PUTs through the
+ * configured `useApi()` transport.
+ */
+export interface CreateRecordDialogProps extends RecordDialogProps {
+    /** When set, the dialog operates as an editor for this record id. */
+    recordId?: string | null
+    /**
+     * Optional override invoked instead of the default POST. The dialog still
+     * closes and calls `onSaved` on success. Hosts that need to support both
+     * create and edit through callbacks should also pass `onUpdate`.
+     */
+    onCreate?: (data: Record<string, unknown>) => Promise<CreateResult>
+    /**
+     * Optional override invoked instead of the default PUT when `recordId`
+     * is provided.
+     */
+    onUpdate?: (recordId: string, data: Record<string, unknown>) => Promise<CreateResult>
+    /** Default values seeded into the form on create. */
+    defaults?: Record<string, unknown>
+    /** Notification when a create or update succeeds. */
+    onSaved?: () => void
+}
+
+/**
+ * Props for the read-only viewer dialog.
+ */
+export interface ViewRecordDialogProps extends RecordDialogProps {
+    /** Identifier of the record to display. */
+    recordId: string
+    /** Optional handler triggered by the "Edit" affordance. */
+    onEdit?: () => void
+    /**
+     * Optional handler triggered by the "Delete" affordance. When omitted the
+     * delete button is hidden. The dialog awaits the promise before closing.
+     */
+    onDelete?: () => Promise<void>
+}

package/src/dialogs/view-record-dialog.tsx

@@ -0,0 +1,37 @@
+/**
+ * ViewRecordDialog — read-only record viewer with optional edit/delete
+ * affordances.
+ *
+ * Thin wrapper around `DynamicRecordDialog` (mode = `'view'`) that exposes a
+ * narrower, intent-specific API matching the Wave 2.5 cleanup spec.
+ * The "Edit" and "Delete" footer buttons are only rendered when the host
+ * supplies `onEdit` / `onDelete`, so the dialog gracefully degrades to a
+ * pure viewer when those affordances are not needed.
+ */
+import { DynamicRecordDialog } from './dynamic-record'
+import type { ViewRecordDialogProps } from './types'
+
+export function ViewRecordDialog({
+    modelKey,
+    open,
+    onOpenChange,
+    recordId,
+    endpoint,
+    schema,
+    onEdit,
+    onDelete,
+}: ViewRecordDialogProps) {
+    return (
+        <DynamicRecordDialog
+            open={open}
+            onOpenChange={onOpenChange}
+            mode="view"
+            model={modelKey}
+            recordId={recordId}
+            endpoint={endpoint}
+            schema={schema}
+            onEdit={onEdit}
+            onDelete={onDelete}
+        />
+    )
+}

package/src/dynamic-form-schema.ts

@@ -47,7 +47,32 @@ export function buildZodSchema(fields: ActionFieldDef[]) {
     return z.object(shape)
 }
 
+/**
+ * Returns the line-items columns of a repeatable-group field, tolerating both
+ * the camelCase `itemFields` (the authored SDK shape) and the raw snake_case
+ * `item_fields` that the kernel serves in action metadata. Empty when the
+ * field is not a line-items group.
+ */
+export function getItemFields(field: ActionFieldDef): ActionFieldDef[] {
+    const raw = field.itemFields ?? (field as { item_fields?: ActionFieldDef[] }).item_fields
+    return Array.isArray(raw) ? raw : []
+}
+
+/** A field is a repeatable line-items group when it declares item columns. */
+export function isLineItemsField(field: ActionFieldDef): boolean {
+    return getItemFields(field).length > 0
+}
+
 function fieldToZod(field: ActionFieldDef): ZodTypeAny {
+    // Repeatable line-items group → array of row objects, each row built from
+    // the item field columns. Required keeps at least one row.
+    const itemFields = getItemFields(field)
+    if (itemFields.length > 0) {
+        const row = buildZodSchema(itemFields)
+        const arr = z.array(row)
+        return field.required ? arr.min(1, `${field.label} requiere al menos un renglón`) : arr
+    }
+
     const v = field.validation ?? ({} as FieldValidation)
     const isNumeric = field.type === 'number'
     const isBool = field.type === 'boolean'

package/src/dynamic-form.tsx

@@ -15,10 +15,12 @@ import {
     SelectValue,
 } from '@asteby/metacore-ui/primitives'
 import type { ActionFieldDef } from './types'
-import { buildZodSchema, resolveWidget } from './dynamic-form-schema'
+import { buildZodSchema, resolveWidget, isLineItemsField } from './dynamic-form-schema'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
+import { DynamicLineItems } from './dynamic-line-items'
 
 export { buildZodSchema, resolveWidget }
+export { DynamicLineItems } from './dynamic-line-items'
 
 export interface DynamicFormProps {
     fields: ActionFieldDef[]
@@ -48,6 +50,10 @@ export function DynamicForm({
     useEffect(() => {
         const defaults: Record<string, any> = {}
         for (const f of fields) {
+            if (isLineItemsField(f)) {
+                defaults[f.key] = initialValues?.[f.key] ?? f.defaultValue ?? []
+                continue
+            }
             defaults[f.key] = initialValues?.[f.key] ?? f.defaultValue ?? (f.type === 'boolean' ? false : '')
         }
         setValues(defaults)
@@ -111,6 +117,11 @@ interface FieldRendererProps {
 }
 
 function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
+    // Repeatable line-items group → render the row grid. Its value is an array
+    // of row objects rather than a scalar.
+    if (isLineItemsField(field)) {
+        return <DynamicLineItems field={field} value={value} onChange={onChange} />
+    }
     const widget = resolveWidget(field)
     // Ref-driven select: hook into useOptionsResolver so the canonical
     // /api/options/<ref>?field=id endpoint feeds the dropdown. This is

package/src/dynamic-line-items.tsx

@@ -0,0 +1,221 @@
+// DynamicLineItems — renders a repeatable line-items group: a table/grid of
+// rows where each column is one of the field's `itemFields` (the v3
+// `item_fields`). Powers declarative multi-line action modals (e.g. the item
+// rows of a "Recibir mercancía" modal, or the debit/credit lines of a journal
+// entry) without needing a custom federated modal.
+//
+// The value is an array of row objects keyed by the item field keys. Add/remove
+// row controls mutate the array; each cell is a widget resolved via
+// `resolveWidget`, matching the flat-field renderer in dynamic-form.tsx.
+import {
+    Input,
+    Textarea,
+    Switch,
+    Button,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@asteby/metacore-ui/primitives'
+import { Plus, Trash2 } from 'lucide-react'
+import type { ActionFieldDef } from './types'
+import { resolveWidget, getItemFields } from './dynamic-form-schema'
+import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
+
+export interface DynamicLineItemsProps {
+    field: ActionFieldDef
+    value: any[] | undefined
+    onChange: (rows: any[]) => void
+    disabled?: boolean
+}
+
+function emptyRow(itemFields: ActionFieldDef[]): Record<string, any> {
+    const row: Record<string, any> = {}
+    for (const f of itemFields) {
+        row[f.key] = f.defaultValue ?? (f.type === 'boolean' ? false : '')
+    }
+    return row
+}
+
+export function DynamicLineItems({ field, value, onChange, disabled = false }: DynamicLineItemsProps) {
+    const itemFields = getItemFields(field)
+    const rows: any[] = Array.isArray(value) ? value : []
+
+    const addRow = () => onChange([...rows, emptyRow(itemFields)])
+    const removeRow = (idx: number) => onChange(rows.filter((_, i) => i !== idx))
+    const updateCell = (idx: number, key: string, cellValue: any) =>
+        onChange(rows.map((r, i) => (i === idx ? { ...r, [key]: cellValue } : r)))
+
+    return (
+        <div className="grid gap-2" data-widget="line_items">
+            <div className="overflow-x-auto rounded-md border">
+                <table className="w-full text-sm">
+                    <thead className="bg-muted/50">
+                        <tr>
+                            {itemFields.map((col) => (
+                                <th key={col.key} className="px-3 py-2 text-left font-medium">
+                                    {col.label}
+                                    {col.required && <span className="text-red-500 ml-1">*</span>}
+                                </th>
+                            ))}
+                            <th className="w-12 px-3 py-2" aria-label="acciones" />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.length === 0 && (
+                            <tr>
+                                <td
+                                    colSpan={itemFields.length + 1}
+                                    className="px-3 py-4 text-center text-muted-foreground"
+                                >
+                                    Sin renglones
+                                </td>
+                            </tr>
+                        )}
+                        {rows.map((row, idx) => (
+                            <tr key={idx} className="border-t align-top">
+                                {itemFields.map((col) => (
+                                    <td key={col.key} className="px-2 py-1.5">
+                                        <CellRenderer
+                                            field={col}
+                                            value={row?.[col.key]}
+                                            onChange={(v: any) => updateCell(idx, col.key, v)}
+                                            disabled={disabled}
+                                        />
+                                    </td>
+                                ))}
+                                <td className="px-2 py-1.5 text-center">
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => removeRow(idx)}
+                                        disabled={disabled}
+                                        aria-label="Eliminar renglón"
+                                    >
+                                        <Trash2 className="h-4 w-4 text-red-500" />
+                                    </Button>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            <div>
+                <Button type="button" variant="outline" size="sm" onClick={addRow} disabled={disabled}>
+                    <Plus className="mr-1 h-4 w-4" />
+                    Agregar renglón
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+interface CellRendererProps {
+    field: ActionFieldDef
+    value: any
+    onChange: (v: any) => void
+    disabled?: boolean
+}
+
+// Per-cell widget. Mirrors the flat FieldRenderer in dynamic-form.tsx but
+// without the per-field Label (the column header is the label) and sized for a
+// table cell. Nested line-items inside a row are not supported (a row column is
+// a scalar widget).
+function CellRenderer({ field, value, onChange, disabled }: CellRendererProps) {
+    const widget = resolveWidget(field)
+    if (widget === 'select' && field.ref) {
+        return <RefCell field={field} value={value} onChange={onChange} disabled={disabled} />
+    }
+    switch (widget) {
+        case 'textarea':
+        case 'richtext':
+            return (
+                <Textarea
+                    value={value || ''}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
+                    placeholder={field.placeholder}
+                    disabled={disabled}
+                    rows={2}
+                />
+            )
+        case 'color':
+            return (
+                <Input
+                    type="color"
+                    value={value || '#000000'}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                    disabled={disabled}
+                />
+            )
+        case 'select':
+            return (
+                <Select value={value || ''} onValueChange={onChange} disabled={disabled}>
+                    <SelectTrigger>
+                        <SelectValue placeholder={field.placeholder || 'Seleccionar...'} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {field.options?.map((opt) => (
+                            <SelectItem key={opt.value} value={opt.value}>
+                                {opt.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            )
+        case 'switch':
+            return <Switch checked={!!value} onCheckedChange={onChange} disabled={disabled} />
+        case 'number':
+            return (
+                <Input
+                    type="number"
+                    value={value ?? ''}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')}
+                    placeholder={field.placeholder}
+                    disabled={disabled}
+                />
+            )
+        case 'date':
+            return (
+                <Input
+                    type="date"
+                    value={value || ''}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                    disabled={disabled}
+                />
+            )
+        default:
+            return (
+                <Input
+                    type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'}
+                    value={value || ''}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+                    placeholder={field.placeholder}
+                    disabled={disabled}
+                />
+            )
+    }
+}
+
+function RefCell({ field, value, onChange, disabled }: CellRendererProps) {
+    const { options, loading } = useOptionsResolver({
+        modelKey: '',
+        fieldKey: 'id',
+        ref: field.ref,
+    })
+    return (
+        <Select value={value || ''} onValueChange={onChange} disabled={disabled || loading}>
+            <SelectTrigger>
+                <SelectValue placeholder={loading ? 'Cargando…' : field.placeholder || 'Seleccionar...'} />
+            </SelectTrigger>
+            <SelectContent>
+                {options.map((opt: ResolvedOption) => (
+                    <SelectItem key={String(opt.id)} value={String(opt.id)}>
+                        {opt.label}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    )
+}

package/src/index.ts

@@ -59,6 +59,16 @@ export {
     type DynamicColumnsHelpers,
 } from './dynamic-columns'
 export { DynamicRecordDialog } from './dialogs/dynamic-record'
+export { CreateRecordDialog } from './dialogs/create-record-dialog'
+export { ViewRecordDialog } from './dialogs/view-record-dialog'
+export type {
+    ModelKey,
+    ModelSchema,
+    CreateResult,
+    RecordDialogProps,
+    CreateRecordDialogProps,
+    ViewRecordDialogProps,
+} from './dialogs/types'
 export { ExportDialog } from './dialogs/export'
 export { ImportDialog } from './dialogs/import'
 export {

package/src/slot.tsx

@@ -22,6 +22,8 @@ class SlotRegistryImpl {
         const entry: SlotEntry = { id: slotId, component, priority: opts?.priority ?? 0, source: opts?.source }
         const list = this.slots.get(slotId) ?? []
         list.push(entry)
+        // Higher priority renders first — canonical across SDK and runtime-react.
+        // See docs/slot-priority.md.
         list.sort((a, b) => b.priority - a.priority)
         this.slots.set(slotId, list)
         this.emit()

package/src/types.ts

@@ -135,6 +135,16 @@ export interface ActionFieldDef {
      * `useOptionsResolver` against `/api/options/<ref>?field=id`.
      */
     ref?: string
+    /**
+     * Columns of a repeatable line-items group. Mirrors the kernel v3
+     * `ActionField.item_fields` (json `item_fields`). Present on a field
+     * with `type: "array"` — the multi-row container (e.g. the item rows
+     * of a "Recibir mercancía" modal, or the debit/credit lines of a
+     * journal entry). Each entry is itself an ActionFieldDef describing
+     * one column's cell widget. The field value is an array of objects
+     * keyed by these item field keys. Rendered by `DynamicLineItems`.
+     */
+    itemFields?: ActionFieldDef[]
 }
 
 export interface ActionDefinition {