@asteby/metacore-runtime-react 11.0.0 → 13.0.0

package/src/dialogs/dynamic-record.tsx

@@ -3,6 +3,7 @@
 // starter. Host-owned infra that was referenced by alias (axios client,
 // branch store) now flows through <ApiProvider> from runtime-react.
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import type { ModelSchema } from './types'
 import {
     Dialog,
     DialogContent,
@@ -59,11 +60,14 @@ interface FieldDef {
     filterBy?: string
 }
 
+// Permissive shape: the wire payload may omit some fields (e.g. `title` is
+// optional on legacy backends). Keep field types loose so a host-supplied
+// `ModelSchema` (see ./types.ts) is structurally assignable here.
 interface ModalMetadata {
-    title: string
-    createTitle: string
-    editTitle: string
-    fields: FieldDef[]
+    title?: string
+    createTitle?: string
+    editTitle?: string
+    fields?: FieldDef[]
 }
 
 export interface DynamicRecordDialogProps {
@@ -74,6 +78,38 @@ export interface DynamicRecordDialogProps {
     recordId?: string | null
     endpoint?: string
     onSaved?: () => void
+    /**
+     * Optional override invoked instead of the default `POST` when the dialog
+     * is in `create` mode. Hosts may use this to route writes through custom
+     * mutations (optimistic updates, audit hooks, etc.). The dialog still
+     * closes and fires `onSaved` on success.
+     */
+    onCreate?: (data: Record<string, any>) => Promise<{ id?: string | number } | void>
+    /**
+     * Optional override invoked instead of the default `PUT` when the dialog
+     * is in `edit` mode. Receives the record id and the form payload.
+     */
+    onUpdate?: (recordId: string, data: Record<string, any>) => Promise<{ id?: string | number } | void>
+    /**
+     * Optional default values seeded into the form on `create`. Ignored when
+     * `mode` is `'edit'` or `'view'` (those fetch from the record endpoint).
+     */
+    defaults?: Record<string, any>
+    /**
+     * Optional pre-fetched metadata. When provided the dialog skips the
+     * `/metadata/modal/:model` request and uses this shape directly.
+     */
+    schema?: ModelSchema
+    /**
+     * Optional handler shown as a "Delete" action in `view` mode. The dialog
+     * awaits the promise and closes on success. Omit to hide the action.
+     */
+    onDelete?: () => Promise<void>
+    /**
+     * Optional handler shown as an "Edit" action in `view` mode. Omit to hide
+     * the action.
+     */
+    onEdit?: () => void
 }
 
 function resolvePath(obj: any, path: string): any {
@@ -136,15 +172,25 @@ export function DynamicRecordDialog({
     recordId,
     endpoint,
     onSaved,
+    onCreate,
+    onUpdate,
+    defaults,
+    schema,
+    onDelete,
+    onEdit,
 }: DynamicRecordDialogProps) {
     const api = useApi()
-    const [modalMeta, setModalMeta] = useState<ModalMetadata | null>(null)
+    const [modalMeta, setModalMeta] = useState<ModalMetadata | null>(
+        schema ? (schema as ModalMetadata) : null,
+    )
     const [record, setRecord] = useState<any | null>(null)
     const [formValues, setFormValues] = useState<Record<string, any>>({})
     const [loading, setLoading] = useState(false)
     const [saving, setSaving] = useState(false)
+    const [deleting, setDeleting] = useState(false)
 
     const isCreate = mode === 'create'
+    const isView = mode === 'view'
     const isEditable = mode === 'create' || mode === 'edit'
     const config = MODE_CONFIG[mode]
 
@@ -157,16 +203,21 @@ export function DynamicRecordDialog({
         const load = async () => {
             setLoading(true)
             try {
-                const metaRes = await api.get(`/metadata/modal/${model}`)
-                if (cancelled) return
-
-                const meta: ModalMetadata = metaRes.data?.data ?? metaRes.data
+                let meta: ModalMetadata | null = schema ? (schema as ModalMetadata) : null
+                if (!meta) {
+                    const metaRes = await api.get(`/metadata/modal/${model}`)
+                    if (cancelled) return
+                    meta = metaRes.data?.data ?? metaRes.data
+                }
                 setModalMeta(meta)
 
                 if (isCreate) {
                     const initial: Record<string, any> = {}
-                    for (const field of meta.fields ?? []) {
-                        initial[field.key] = field.defaultValue ?? ''
+                    for (const field of meta?.fields ?? []) {
+                        initial[field.key] =
+                            (defaults && Object.prototype.hasOwnProperty.call(defaults, field.key)
+                                ? defaults[field.key]
+                                : field.defaultValue) ?? ''
                     }
                     setFormValues(initial)
                 } else {
@@ -181,7 +232,7 @@ export function DynamicRecordDialog({
                     setRecord(rec)
 
                     const initial: Record<string, any> = {}
-                    for (const field of meta.fields ?? []) {
+                    for (const field of meta?.fields ?? []) {
                         initial[field.key] = resolvePath(rec, field.key) ?? field.defaultValue ?? ''
                     }
                     setFormValues(initial)
@@ -196,7 +247,7 @@ export function DynamicRecordDialog({
 
         load()
         return () => { cancelled = true }
-    }, [open, recordId, model, endpoint, isCreate])
+    }, [open, recordId, model, endpoint, isCreate, schema, defaults])
 
     useEffect(() => {
         if (!open) {
@@ -211,7 +262,7 @@ export function DynamicRecordDialog({
         if (!modalMeta) return
 
         if (isEditable) {
-            for (const field of modalMeta.fields) {
+            for (const field of modalMeta.fields ?? []) {
                 if (field.required && !formValues[field.key] && formValues[field.key] !== 0 && formValues[field.key] !== false) {
                     toast.error(`El campo "${field.label}" es obligatorio`)
                     return
@@ -221,6 +272,22 @@ export function DynamicRecordDialog({
 
         setSaving(true)
         try {
+            if (isCreate && onCreate) {
+                await onCreate(formValues)
+                toast.success('Registro creado correctamente')
+                onSaved?.()
+                onOpenChange(false)
+                return
+            }
+
+            if (!isCreate && recordId && onUpdate) {
+                await onUpdate(String(recordId), formValues)
+                toast.success('Guardado correctamente')
+                onSaved?.()
+                onOpenChange(false)
+                return
+            }
+
             let res
             if (isCreate) {
                 const createEndpoint = endpoint || `/dynamic/${model}`
@@ -246,6 +313,20 @@ export function DynamicRecordDialog({
         }
     }
 
+    const handleDelete = async () => {
+        if (!onDelete) return
+        setDeleting(true)
+        try {
+            await onDelete()
+            onOpenChange(false)
+        } catch (err: any) {
+            console.error('[DynamicRecordDialog] delete error:', err)
+            toast.error(err?.response?.data?.message || err?.message || 'Error al eliminar')
+        } finally {
+            setDeleting(false)
+        }
+    }
+
     const title = modalMeta ? config.getTitle(modalMeta) : ''
 
     const visibleFields = modalMeta?.fields?.filter(f => {
@@ -311,9 +392,24 @@ export function DynamicRecordDialog({
                 </div>
 
                 <DialogFooter className="p-4 border-t shrink-0">
-                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving}>
+                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={saving || deleting}>
                         {config.cancelLabel}
                     </Button>
+                    {isView && onDelete && (
+                        <Button
+                            variant="destructive"
+                            onClick={handleDelete}
+                            disabled={deleting || loading}
+                        >
+                            {deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            {deleting ? 'Eliminando...' : 'Eliminar'}
+                        </Button>
+                    )}
+                    {isView && onEdit && (
+                        <Button onClick={onEdit} disabled={deleting || loading}>
+                            Editar
+                        </Button>
+                    )}
                     {isEditable && (
                         <Button
                             type="submit"

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-crud-page.tsx

@@ -36,6 +36,7 @@ import { DynamicRecordDialog } from './dialogs/dynamic-record'
 import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
 import { getModelExtension } from './model-extension-registry'
+import { ModelActionToolbar } from './model-action-toolbar'
 import type { TableMetadata } from './types'
 
 export interface DynamicCRUDPageStrings {
@@ -153,7 +154,10 @@ export function DynamicCRUDPage(props: DynamicCRUDPageProps) {
     }, [title])
 
     const enableCRUD = metadata?.enableCRUDActions ?? false
-    const effectiveHideCreate = hideCreate || ext?.hideCreate
+    // A "create"-placement action ships a custom create experience — it
+    // replaces the generic create button (the ModelActionToolbar renders it).
+    const hasCreateAction = metadata?.actions?.some((a) => a.placement === 'create') ?? false
+    const effectiveHideCreate = hideCreate || ext?.hideCreate || hasCreateAction
     const effectiveHideExport = hideExport || ext?.hideExport
     const effectiveHideImport = hideImport || ext?.hideImport
     // Refresh defaults to hidden in the page header — <DynamicTable> ships
@@ -222,6 +226,12 @@ export function DynamicCRUDPage(props: DynamicCRUDPageProps) {
                         )}
                         {ext?.toolbarExtras && <ext.toolbarExtras model={model} onRefresh={handleRefresh} />}
                         {toolbarExtras}
+                        <ModelActionToolbar
+                            model={model}
+                            endpoint={dataEndpoint}
+                            actions={metadata?.actions}
+                            onChange={handleRefresh}
+                        />
                         {showCreate && (
                             <button
                                 type='button'

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