@asteby/metacore-runtime-react 8.0.0 → 9.1.0

package/src/__tests__/dynamic-relation.test.ts

@@ -0,0 +1,293 @@
+import { describe, it, expect } from 'vitest'
+import {
+    buildCreatePayload,
+    buildPivotAttachPayload,
+    buildPivotRowIndex,
+    buildRelationFilterParams,
+    deriveRelationFormFields,
+    diffSelection,
+    extractSelectedTargetIds,
+    pickOptionLabel,
+    relationRowKey,
+} from '../dynamic-relation-helpers'
+import type { ColumnDefinition, TableMetadata } from '../types'
+
+describe('buildRelationFilterParams', () => {
+    it('produce el filtro f_<fk>=eq:<id> con string parentId', () => {
+        expect(buildRelationFilterParams('invoice_id', 'inv_42')).toEqual({
+            f_invoice_id: 'eq:inv_42',
+        })
+    })
+
+    it('coerce parentId numérico a string en el query', () => {
+        expect(buildRelationFilterParams('invoice_id', 42)).toEqual({
+            f_invoice_id: 'eq:42',
+        })
+    })
+
+    it('rechaza foreignKey vacío', () => {
+        expect(() => buildRelationFilterParams('', 'x')).toThrow(/foreignKey/)
+    })
+
+    it('rechaza parentId vacío / null / undefined', () => {
+        expect(() => buildRelationFilterParams('invoice_id', '')).toThrow(/parentId/)
+        // @ts-expect-error testing runtime guard
+        expect(() => buildRelationFilterParams('invoice_id', null)).toThrow(/parentId/)
+        // @ts-expect-error testing runtime guard
+        expect(() => buildRelationFilterParams('invoice_id', undefined)).toThrow(/parentId/)
+    })
+})
+
+describe('buildCreatePayload', () => {
+    it('inyecta el foreign key sobre los valores del form', () => {
+        const payload = buildCreatePayload('invoice_id', 'inv_42', { qty: 3, sku: 'A' })
+        expect(payload).toEqual({ qty: 3, sku: 'A', invoice_id: 'inv_42' })
+    })
+
+    it('el foreign key sobreescribe lo que venga del form', () => {
+        const payload = buildCreatePayload('invoice_id', 'inv_42', { invoice_id: 'inv_OTHER', qty: 1 })
+        expect(payload.invoice_id).toBe('inv_42')
+    })
+
+    it('preserva el parentId numérico tal cual', () => {
+        const payload = buildCreatePayload('invoice_id', 7, { qty: 1 })
+        expect(payload.invoice_id).toBe(7)
+    })
+
+    it('rechaza foreignKey vacío', () => {
+        expect(() => buildCreatePayload('', 'x', {})).toThrow(/foreignKey/)
+    })
+})
+
+describe('deriveRelationFormFields', () => {
+    const baseMeta: Pick<TableMetadata, 'columns'> = {
+        columns: [
+            { key: 'id', label: 'ID', type: 'text', sortable: true, filterable: false, hidden: true },
+            { key: 'invoice_id', label: 'Factura', type: 'text', sortable: false, filterable: false },
+            { key: 'sku', label: 'SKU', type: 'text', sortable: true, filterable: true },
+            { key: 'qty', label: 'Cantidad', type: 'number', sortable: true, filterable: false },
+            { key: 'taxable', label: 'Aplica IVA', type: 'boolean', sortable: false, filterable: false },
+            { key: 'category', label: 'Categoría', type: 'select', sortable: false, filterable: true, options: [
+                { value: 'a', label: 'A' }, { value: 'b', label: 'B' },
+            ] },
+        ],
+    }
+
+    it('omite la foreign key porque está fija al parentId', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id')
+        expect(fields.find(f => f.key === 'invoice_id')).toBeUndefined()
+    })
+
+    it('omite columnas marcadas hidden', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id')
+        expect(fields.find(f => f.key === 'id')).toBeUndefined()
+    })
+
+    it('mapea types de ColumnDefinition al ActionFieldDef.type', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id')
+        const byKey = Object.fromEntries(fields.map(f => [f.key, f]))
+        expect(byKey['sku']?.type).toBe('string')
+        expect(byKey['qty']?.type).toBe('number')
+        expect(byKey['taxable']?.type).toBe('boolean')
+        expect(byKey['category']?.type).toBe('select')
+    })
+
+    it('propaga options con value coerced a string', () => {
+        const fields = deriveRelationFormFields(baseMeta, 'invoice_id')
+        const cat = fields.find(f => f.key === 'category')
+        expect(cat?.options).toEqual([
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B' },
+        ])
+    })
+
+    it('devuelve [] cuando no hay metadata', () => {
+        expect(deriveRelationFormFields(null, 'invoice_id')).toEqual([])
+        expect(deriveRelationFormFields(undefined, 'invoice_id')).toEqual([])
+        expect(deriveRelationFormFields({ columns: [] }, 'invoice_id')).toEqual([])
+    })
+})
+
+describe('relationRowKey', () => {
+    it('usa row.id como key cuando existe', () => {
+        expect(relationRowKey({ id: 'abc' }, 0, 'invoice_id')).toBe('abc')
+        expect(relationRowKey({ id: 7 }, 5, 'invoice_id')).toBe('7')
+    })
+
+    it('cae a synthetic key cuando id falta o es vacío', () => {
+        expect(relationRowKey({}, 2, 'invoice_id')).toBe('__rel-invoice_id-2')
+        expect(relationRowKey({ id: '' }, 3, 'invoice_id')).toBe('__rel-invoice_id-3')
+        expect(relationRowKey({ id: null }, 1, 'invoice_id')).toBe('__rel-invoice_id-1')
+        expect(relationRowKey(undefined, 0, 'invoice_id')).toBe('__rel-invoice_id-0')
+    })
+})
+
+// ---------------------------------------------------------------------------
+// many_to_many helpers
+// ---------------------------------------------------------------------------
+
+describe('buildPivotAttachPayload', () => {
+    it('produce el body con los dos FKs fijos', () => {
+        const body = buildPivotAttachPayload('org_id', 'org_1', 'user_id', 'user_42')
+        expect(body).toEqual({ org_id: 'org_1', user_id: 'user_42' })
+    })
+
+    it('mezcla campos extra del pivot sin pisar los FKs', () => {
+        const body = buildPivotAttachPayload('org_id', 1, 'user_id', 2, {
+            role: 'owner',
+            org_id: 'evil',
+            user_id: 'evil',
+        })
+        expect(body.org_id).toBe(1)
+        expect(body.user_id).toBe(2)
+        expect(body.role).toBe('owner')
+    })
+
+    it('rechaza foreignKey / referencesKey vacíos', () => {
+        expect(() => buildPivotAttachPayload('', 'p', 'r', 't')).toThrow(/foreignKey/)
+        expect(() => buildPivotAttachPayload('f', 'p', '', 't')).toThrow(/referencesKey/)
+    })
+
+    it('rechaza parentId / targetId vacíos', () => {
+        expect(() => buildPivotAttachPayload('f', '', 'r', 't')).toThrow(/parentId/)
+        expect(() => buildPivotAttachPayload('f', 'p', 'r', '')).toThrow(/targetId/)
+        // @ts-expect-error testing runtime guard
+        expect(() => buildPivotAttachPayload('f', 'p', 'r', null)).toThrow(/targetId/)
+    })
+})
+
+describe('extractSelectedTargetIds', () => {
+    it('mapea pivot rows al set de target ids como strings', () => {
+        const ids = extractSelectedTargetIds(
+            [
+                { id: 1, org_id: 'org_1', user_id: 'u_1' },
+                { id: 2, org_id: 'org_1', user_id: 7 },
+            ],
+            'user_id',
+        )
+        expect(ids).toEqual(['u_1', '7'])
+    })
+
+    it('omite filas sin valor en el referencesKey', () => {
+        const ids = extractSelectedTargetIds(
+            [
+                { id: 1, user_id: 'u_1' },
+                { id: 2, user_id: null },
+                { id: 3, user_id: '' },
+                { id: 4 },
+            ],
+            'user_id',
+        )
+        expect(ids).toEqual(['u_1'])
+    })
+
+    it('devuelve [] cuando no hay rows o referencesKey', () => {
+        expect(extractSelectedTargetIds(null, 'user_id')).toEqual([])
+        expect(extractSelectedTargetIds(undefined, 'user_id')).toEqual([])
+        expect(extractSelectedTargetIds([{ user_id: 'x' }], '')).toEqual([])
+    })
+})
+
+describe('buildPivotRowIndex', () => {
+    it('mapea targetId -> pivotRowId', () => {
+        const idx = buildPivotRowIndex(
+            [
+                { id: 'p1', user_id: 'u_1' },
+                { id: 'p2', user_id: 7 },
+            ],
+            'user_id',
+        )
+        expect(idx.get('u_1')).toBe('p1')
+        expect(idx.get('7')).toBe('p2')
+    })
+
+    it('omite filas sin id pivot o sin target', () => {
+        const idx = buildPivotRowIndex(
+            [
+                { id: 'p1', user_id: 'u_1' },
+                { user_id: 'u_2' },
+                { id: 'p3' },
+                { id: 'p4', user_id: null },
+            ],
+            'user_id',
+        )
+        expect(Array.from(idx.keys())).toEqual(['u_1'])
+    })
+
+    it('última fila gana cuando hay duplicados', () => {
+        const idx = buildPivotRowIndex(
+            [
+                { id: 'p1', user_id: 'u_1' },
+                { id: 'p2', user_id: 'u_1' },
+            ],
+            'user_id',
+        )
+        expect(idx.get('u_1')).toBe('p2')
+    })
+})
+
+describe('diffSelection', () => {
+    it('detecta toAdd y toRemove respecto al estado previo', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b', 'c'], ['b', 'c', 'd'])
+        expect(toAdd).toEqual(['d'])
+        expect(toRemove).toEqual(['a'])
+    })
+
+    it('preserva el orden de aparición en next/prev', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b'], ['c', 'a', 'd'])
+        expect(toAdd).toEqual(['c', 'd'])
+        expect(toRemove).toEqual(['b'])
+    })
+
+    it('devuelve arrays vacíos cuando no cambia nada', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b'], ['b', 'a'])
+        expect(toAdd).toEqual([])
+        expect(toRemove).toEqual([])
+    })
+
+    it('caso vacío -> next agrega todo', () => {
+        const { toAdd, toRemove } = diffSelection([], ['a', 'b'])
+        expect(toAdd).toEqual(['a', 'b'])
+        expect(toRemove).toEqual([])
+    })
+
+    it('caso prev -> [] remueve todo', () => {
+        const { toAdd, toRemove } = diffSelection(['a', 'b'], [])
+        expect(toAdd).toEqual([])
+        expect(toRemove).toEqual(['a', 'b'])
+    })
+})
+
+describe('pickOptionLabel', () => {
+    const cols: ColumnDefinition[] = [
+        { key: 'id', label: 'ID', type: 'text', sortable: false, filterable: false, hidden: true },
+        { key: 'name', label: 'Nombre', type: 'text', sortable: true, filterable: true },
+        { key: 'email', label: 'Email', type: 'text', sortable: false, filterable: true },
+    ]
+
+    it('respeta displayKey cuando existe en la fila', () => {
+        expect(pickOptionLabel({ id: 1, name: 'Alice', email: 'a@x' }, 'email', cols)).toBe('a@x')
+    })
+
+    it('cae al primer column no-id no-hidden cuando displayKey falta', () => {
+        expect(pickOptionLabel({ id: 1, name: 'Alice', email: 'a@x' }, undefined, cols)).toBe('Alice')
+    })
+
+    it('salta valores nulos / vacíos al inferir', () => {
+        expect(pickOptionLabel({ id: 1, name: '', email: 'a@x' }, undefined, cols)).toBe('a@x')
+    })
+
+    it('cae a row.id cuando no hay match en columns', () => {
+        expect(pickOptionLabel({ id: 7 }, undefined, cols)).toBe('7')
+        expect(pickOptionLabel({ id: 7 }, undefined, undefined)).toBe('7')
+    })
+
+    it('devuelve "—" cuando no hay nada usable', () => {
+        expect(pickOptionLabel(null, undefined, cols)).toBe('—')
+        expect(pickOptionLabel({}, undefined, cols)).toBe('—')
+    })
+
+    it('ignora valores object al inferir', () => {
+        expect(pickOptionLabel({ id: 1, name: { nested: true }, email: 'a@x' }, undefined, cols)).toBe('a@x')
+    })
+})

package/src/column-visibility.ts

@@ -0,0 +1,43 @@
+// Pure helpers that map kernel `manifest.ColumnDef` metadata flags
+// (Visibility, Searchable) into client-side decisions:
+//   - which columns the dynamic table should render
+//   - which column keys are in scope for the global search
+//
+// Kept side-effect free and free of React/UI imports so the same logic can
+// be tested with plain unit tests against mock metadata.
+
+import type { ColumnDefinition, TableMetadata } from './types'
+
+/**
+ * Whether a column should render in a list/index table view.
+ *
+ * A column is hidden when its `visibility` is scoped away from the table
+ * (`'modal'`: only the create/edit dialog; `'list'`: only API payloads) or
+ * when the legacy `hidden` boolean is set. Empty / `'all'` / `'table'` keep
+ * the column visible — preserving zero-value behaviour for metadata emitted
+ * by older kernels that don't set `visibility` at all.
+ */
+export function isColumnVisibleInTable(col: ColumnDefinition): boolean {
+    if (col.hidden) return false
+    const v = col.visibility
+    if (!v) return true
+    return v === 'all' || v === 'table'
+}
+
+/**
+ * Returns the keys of columns that opt into the model's full-text search,
+ * or `null` when no column declares `searchable` at all.
+ *
+ * `null` is the legacy signal: the host should NOT narrow the search request
+ * (every column participates, matching pre-Searchable kernels). An empty
+ * array is meaningful — it means every column has been explicitly opted out
+ * and the host should disable the global search input.
+ */
+export function getSearchableColumnKeys(
+    metadata: Pick<TableMetadata, 'columns'>,
+): string[] | null {
+    const cols = metadata.columns ?? []
+    const declared = cols.some(c => typeof c.searchable === 'boolean')
+    if (!declared) return null
+    return cols.filter(c => c.searchable === true).map(c => c.key)
+}

package/src/dynamic-columns.tsx

@@ -35,6 +35,7 @@ import { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib'
 import { OptionsContext } from './options-context'
 import { DynamicIcon } from './dynamic-icon'
 import type { TableMetadata, ColumnDefinition } from './types'
+import { isColumnVisibleInTable } from './column-visibility'
 import type {
     ColumnFilterConfig,
     GetDynamicColumns,
@@ -221,7 +222,9 @@ export function makeDefaultGetDynamicColumns(
         ]
 
         metadata.columns.forEach((col) => {
-            if (col.hidden) return
+            // Honors both the legacy `hidden` boolean and the kernel's
+            // `visibility` scope (skips `'modal'` and `'list'`).
+            if (!isColumnVisibleInTable(col)) return
 
             const translatedLabel = col.label
             const filterConfig = filterConfigs?.get(col.key)

package/src/dynamic-form-schema.ts

@@ -0,0 +1,66 @@
+// Pure schema-building helpers for DynamicForm. Lives in its own module so
+// callers (and unit tests) can use the zod schema without pulling in React or
+// metacore-ui primitives.
+import { z, type ZodTypeAny } from 'zod'
+import type { ActionFieldDef, FieldValidation } from './types'
+
+// Builds a zod object schema from an ActionFieldDef[]. Required fields stay
+// non-empty; optional fields accept undefined / "". Validation rules
+// (regex/min/max) layer on top: for numeric columns they bound the value, for
+// strings they bound length — same dual semantics the kernel uses.
+export function buildZodSchema(fields: ActionFieldDef[]) {
+    const shape: Record<string, ZodTypeAny> = {}
+    for (const field of fields) {
+        shape[field.key] = fieldToZod(field)
+    }
+    return z.object(shape)
+}
+
+function fieldToZod(field: ActionFieldDef): ZodTypeAny {
+    const v = field.validation ?? ({} as FieldValidation)
+    const isNumeric = field.type === 'number'
+    const isBool = field.type === 'boolean'
+
+    if (isBool) {
+        const base = z.boolean()
+        return field.required ? base : base.optional()
+    }
+
+    if (isNumeric) {
+        let s = z.coerce.number()
+        if (typeof v.min === 'number') s = s.min(v.min, `Debe ser ≥ ${v.min}`)
+        if (typeof v.max === 'number') s = s.max(v.max, `Debe ser ≤ ${v.max}`)
+        if (field.required) return s
+        return z.preprocess((val) => (val === '' || val == null ? undefined : val), s.optional())
+    }
+
+    let s = z.string()
+    if (typeof v.min === 'number') s = s.min(v.min, `Mínimo ${v.min} caracteres`)
+    if (typeof v.max === 'number') s = s.max(v.max, `Máximo ${v.max} caracteres`)
+    if (v.regex) {
+        try { s = s.regex(new RegExp(v.regex), `Formato inválido`) }
+        catch { /* malformed regex from manifest — skip rather than throw at render time */ }
+    }
+    if (field.type === 'email') s = s.email('Email inválido')
+    if (field.type === 'url') s = s.url('URL inválida')
+
+    if (field.required) {
+        return s.min(Math.max(typeof v.min === 'number' ? v.min : 1, 1), `${field.label} es requerido`)
+    }
+    return s.optional().or(z.literal(''))
+}
+
+// Resolves the renderer widget for a field. Explicit `widget` wins; otherwise
+// it is inferred from `type` to preserve the legacy behaviour (zero-value =
+// same render as before).
+export function resolveWidget(field: ActionFieldDef): string {
+    if (field.widget) return field.widget
+    switch (field.type) {
+        case 'textarea': return 'textarea'
+        case 'select': return 'select'
+        case 'boolean': return 'switch'
+        case 'number': return 'number'
+        case 'date': return 'date'
+        default: return 'text'
+    }
+}

package/src/dynamic-form.tsx

@@ -1,7 +1,7 @@
 // Minimal standalone DynamicForm. Factored from the dynamic-record-dialog
 // pattern + ActionFieldDef renderer so callers can reuse the form layout
 // outside the full record-edit modal.
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import {
     Input,
     Textarea,
@@ -15,6 +15,9 @@ import {
     SelectValue,
 } from '@asteby/metacore-ui/primitives'
 import type { ActionFieldDef } from './types'
+import { buildZodSchema, resolveWidget } from './dynamic-form-schema'
+
+export { buildZodSchema, resolveWidget }
 
 export interface DynamicFormProps {
     fields: ActionFieldDef[]
@@ -36,28 +39,38 @@ export function DynamicForm({
     disabled = false,
 }: DynamicFormProps) {
     const [values, setValues] = useState<Record<string, any>>({})
+    const [errors, setErrors] = useState<Record<string, string>>({})
     const [submitting, setSubmitting] = useState(false)
 
+    const schema = useMemo(() => buildZodSchema(fields), [fields])
+
     useEffect(() => {
         const defaults: Record<string, any> = {}
         for (const f of fields) {
             defaults[f.key] = initialValues?.[f.key] ?? f.defaultValue ?? (f.type === 'boolean' ? false : '')
         }
         setValues(defaults)
+        setErrors({})
     }, [fields, initialValues])
 
-    const update = (k: string, v: any) => setValues((prev: Record<string, any>) => ({ ...prev, [k]: v }))
+    const update = (k: string, v: any) =>
+        setValues((prev: Record<string, any>) => ({ ...prev, [k]: v }))
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault()
-        for (const f of fields) {
-            if (f.required && !values[f.key] && values[f.key] !== false) {
-                alert(`${f.label} es requerido`)
-                return
+        const result = schema.safeParse(values)
+        if (!result.success) {
+            const next: Record<string, string> = {}
+            for (const issue of result.error.issues) {
+                const key = issue.path[0]
+                if (typeof key === 'string' && !next[key]) next[key] = issue.message
             }
+            setErrors(next)
+            return
         }
+        setErrors({})
         setSubmitting(true)
-        try { await onSubmit(values) } finally { setSubmitting(false) }
+        try { await onSubmit(result.data as Record<string, any>) } finally { setSubmitting(false) }
     }
 
     return (
@@ -69,6 +82,9 @@ export function DynamicForm({
                         {field.required && <span className="text-red-500 ml-1">*</span>}
                     </Label>
                     {renderField(field, values[field.key], (v: any) => update(field.key, v))}
+                    {errors[field.key] && (
+                        <span className="text-red-500 text-sm" role="alert">{errors[field.key]}</span>
+                    )}
                 </div>
             ))}
             <div className="flex justify-end gap-2 pt-2">
@@ -84,9 +100,17 @@ export function DynamicForm({
 }
 
 function renderField(field: ActionFieldDef, value: any, onChange: (v: any) => void) {
-    switch (field.type) {
+    const widget = resolveWidget(field)
+    switch (widget) {
         case 'textarea':
             return <Textarea id={field.key} value={value || ''} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
+        case 'richtext':
+            // Until a real rich-text primitive lands in metacore-ui this maps
+            // to a tagged Textarea. The data attribute lets app-level theming
+            // / future MDX editor pick it up without breaking the contract.
+            return <Textarea id={field.key} data-widget="richtext" value={value || ''} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
+        case 'color':
+            return <Input id={field.key} type="color" value={value || '#000000'} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} />
         case 'select':
             return (
                 <Select value={value || ''} onValueChange={onChange}>
@@ -96,7 +120,7 @@ function renderField(field: ActionFieldDef, value: any, onChange: (v: any) => vo
                     </SelectContent>
                 </Select>
             )
-        case 'boolean':
+        case 'switch':
             return <Switch id={field.key} checked={!!value} onCheckedChange={onChange} />
         case 'number':
             return <Input id={field.key} type="number" value={value ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')} placeholder={field.placeholder} />
@@ -106,3 +130,4 @@ function renderField(field: ActionFieldDef, value: any, onChange: (v: any) => vo
             return <Input id={field.key} type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'} value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
     }
 }
+