@asteby/metacore-runtime-react 4.0.0

package/src/dialogs/import.tsx

@@ -0,0 +1,404 @@
+// ImportDialog — three-step CSV/JSON import flow (upload → validate → import
+// with per-row error report). Ported from the ops starter. Axios-like client
+// is provided by <ApiProvider>.
+import { useState, useEffect, useRef } from 'react'
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+    Button,
+    Input,
+    Label,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@asteby/metacore-ui/primitives'
+import { Progress } from './_primitives'
+import { toast } from 'sonner'
+import { FileDown, Loader2, Check, AlertCircle } from 'lucide-react'
+import type { TableMetadata } from '../types'
+import { useApi } from '../api-context'
+
+interface ImportDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    model: string
+    metadata: TableMetadata
+    onImported?: () => void
+}
+
+interface ValidationError {
+    row: number
+    field: string
+    message: string
+}
+
+interface ValidationResult {
+    valid: number
+    errors: ValidationError[]
+}
+
+interface ImportResult {
+    created: number
+    errors: ValidationError[]
+}
+
+type Step = 'upload' | 'validation' | 'results'
+
+export function ImportDialog({
+    open,
+    onOpenChange,
+    model,
+    metadata,
+    onImported,
+}: ImportDialogProps) {
+    const api = useApi()
+    const [step, setStep] = useState<Step>('upload')
+    const [file, setFile] = useState<File | null>(null)
+    const [validating, setValidating] = useState(false)
+    const [importing, setImporting] = useState(false)
+    const [validationResult, setValidationResult] = useState<ValidationResult | null>(null)
+    const [importResult, setImportResult] = useState<ImportResult | null>(null)
+    const [progress, setProgress] = useState(0)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        if (open) {
+            setStep('upload')
+            setFile(null)
+            setValidating(false)
+            setImporting(false)
+            setValidationResult(null)
+            setImportResult(null)
+            setProgress(0)
+            if (fileInputRef.current) fileInputRef.current.value = ''
+        }
+    }, [open])
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const selectedFile = e.target.files?.[0] ?? null
+        setFile(selectedFile)
+    }
+
+    const handleDownloadTemplate = async () => {
+        try {
+            const response = await api.get(`/data/${model}/export/template`, {
+                responseType: 'blob',
+            })
+            const url = window.URL.createObjectURL(response.data)
+            const link = document.createElement('a')
+            link.href = url
+            link.download = `${model}-plantilla.csv`
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+            window.URL.revokeObjectURL(url)
+        } catch {
+            toast.error('Error al descargar la plantilla')
+        }
+    }
+
+    const handleValidate = async () => {
+        if (!file) {
+            toast.error('Selecciona un archivo para validar')
+            return
+        }
+
+        setValidating(true)
+        try {
+            const formData = new FormData()
+            formData.append('file', file)
+
+            const res = await api.post(`/data/${model}/import/validate`, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' },
+            })
+
+            const data = res.data?.data ?? res.data
+            setValidationResult({
+                valid: data.valid ?? 0,
+                errors: data.errors ?? [],
+            })
+            setStep('validation')
+        } catch (err: any) {
+            const message =
+                err?.response?.data?.message || 'Error al validar el archivo'
+            toast.error(message)
+        } finally {
+            setValidating(false)
+        }
+    }
+
+    const handleImport = async () => {
+        if (!file) return
+
+        setImporting(true)
+        setProgress(0)
+
+        try {
+            const formData = new FormData()
+            formData.append('file', file)
+
+            const res = await api.post(`/data/${model}/import`, formData, {
+                headers: { 'Content-Type': 'multipart/form-data' },
+                onUploadProgress: (progressEvent: { loaded: number; total?: number }) => {
+                    if (progressEvent.total) {
+                        setProgress(
+                            Math.round((progressEvent.loaded / progressEvent.total) * 100)
+                        )
+                    }
+                },
+            })
+
+            const data = res.data?.data ?? res.data
+            setImportResult({
+                created: data.created ?? 0,
+                errors: data.errors ?? [],
+            })
+            setStep('results')
+
+            if ((data.created ?? 0) > 0) {
+                onImported?.()
+            }
+        } catch (err: any) {
+            const message =
+                err?.response?.data?.message || 'Error al importar los datos'
+            toast.error(message)
+        } finally {
+            setImporting(false)
+            setProgress(0)
+        }
+    }
+
+    const handleClose = () => {
+        onOpenChange(false)
+    }
+
+    const stepTitle = {
+        upload: 'Subir archivo',
+        validation: 'Validacion',
+        results: 'Resultados',
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+                <DialogHeader className="p-6 pb-4 border-b shrink-0">
+                    <DialogTitle>
+                        Importar {metadata.title}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {stepTitle[step]}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="flex-1 overflow-y-auto p-6">
+                    {step === 'upload' && (
+                        <div className="space-y-6">
+                            <div>
+                                <Button
+                                    variant="link"
+                                    className="px-0 h-auto text-sm"
+                                    onClick={handleDownloadTemplate}
+                                >
+                                    <FileDown className="h-4 w-4 mr-1" />
+                                    Descargar plantilla CSV
+                                </Button>
+                                <p className="text-xs text-muted-foreground mt-1">
+                                    Descarga la plantilla para asegurar el formato correcto.
+                                </p>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="import-file" className="text-sm font-medium">
+                                    Archivo
+                                </Label>
+                                <Input
+                                    ref={fileInputRef}
+                                    id="import-file"
+                                    type="file"
+                                    accept=".csv,.json"
+                                    onChange={handleFileChange}
+                                    className="cursor-pointer"
+                                />
+                                <p className="text-xs text-muted-foreground">
+                                    Formatos aceptados: CSV, JSON
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    {step === 'validation' && validationResult && (
+                        <div className="space-y-4">
+                            <div className="flex items-center gap-4">
+                                <div className="flex items-center gap-2 text-sm">
+                                    <Check className="h-4 w-4 text-green-600" />
+                                    <span>
+                                        <strong>{validationResult.valid}</strong> valido(s)
+                                    </span>
+                                </div>
+                                {validationResult.errors.length > 0 && (
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <AlertCircle className="h-4 w-4 text-destructive" />
+                                        <span>
+                                            <strong>{validationResult.errors.length}</strong> error(es)
+                                        </span>
+                                    </div>
+                                )}
+                            </div>
+
+                            {validationResult.errors.length > 0 && (
+                                <div className="border rounded-md max-h-60 overflow-auto">
+                                    <Table>
+                                        <TableHeader>
+                                            <TableRow>
+                                                <TableHead className="w-16">Fila</TableHead>
+                                                <TableHead>Campo</TableHead>
+                                                <TableHead>Error</TableHead>
+                                            </TableRow>
+                                        </TableHeader>
+                                        <TableBody>
+                                            {validationResult.errors.map((error, idx) => (
+                                                <TableRow key={idx}>
+                                                    <TableCell className="font-mono text-xs">
+                                                        {error.row}
+                                                    </TableCell>
+                                                    <TableCell className="text-sm">
+                                                        {error.field}
+                                                    </TableCell>
+                                                    <TableCell className="text-sm text-destructive">
+                                                        {error.message}
+                                                    </TableCell>
+                                                </TableRow>
+                                            ))}
+                                        </TableBody>
+                                    </Table>
+                                </div>
+                            )}
+
+                            {importing && (
+                                <div className="space-y-2">
+                                    <Progress value={progress} />
+                                    <p className="text-xs text-muted-foreground text-center">
+                                        Importando... {progress > 0 ? `${progress}%` : ''}
+                                    </p>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {step === 'results' && importResult && (
+                        <div className="space-y-4">
+                            <div className="flex items-center gap-4">
+                                {importResult.created > 0 && (
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <Check className="h-4 w-4 text-green-600" />
+                                        <span>
+                                            <strong>{importResult.created}</strong> creado(s)
+                                        </span>
+                                    </div>
+                                )}
+                                {importResult.errors.length > 0 && (
+                                    <div className="flex items-center gap-2 text-sm">
+                                        <AlertCircle className="h-4 w-4 text-destructive" />
+                                        <span>
+                                            <strong>{importResult.errors.length}</strong> error(es)
+                                        </span>
+                                    </div>
+                                )}
+                            </div>
+
+                            {importResult.created > 0 && importResult.errors.length === 0 && (
+                                <div className="flex items-center gap-2 rounded-md bg-green-50 dark:bg-green-950/20 p-3 text-sm text-green-700 dark:text-green-400">
+                                    <Check className="h-4 w-4 shrink-0" />
+                                    Todos los registros fueron importados correctamente.
+                                </div>
+                            )}
+
+                            {importResult.errors.length > 0 && (
+                                <div className="border rounded-md max-h-60 overflow-auto">
+                                    <Table>
+                                        <TableHeader>
+                                            <TableRow>
+                                                <TableHead className="w-16">Fila</TableHead>
+                                                <TableHead>Campo</TableHead>
+                                                <TableHead>Error</TableHead>
+                                            </TableRow>
+                                        </TableHeader>
+                                        <TableBody>
+                                            {importResult.errors.map((error, idx) => (
+                                                <TableRow key={idx}>
+                                                    <TableCell className="font-mono text-xs">
+                                                        {error.row}
+                                                    </TableCell>
+                                                    <TableCell className="text-sm">
+                                                        {error.field}
+                                                    </TableCell>
+                                                    <TableCell className="text-sm text-destructive">
+                                                        {error.message}
+                                                    </TableCell>
+                                                </TableRow>
+                                            ))}
+                                        </TableBody>
+                                    </Table>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter className="p-4 border-t shrink-0">
+                    {step === 'upload' && (
+                        <>
+                            <Button variant="outline" onClick={handleClose}>
+                                Cancelar
+                            </Button>
+                            <Button
+                                onClick={handleValidate}
+                                disabled={!file || validating}
+                            >
+                                {validating && (
+                                    <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                                )}
+                                {validating ? 'Validando...' : 'Validar'}
+                            </Button>
+                        </>
+                    )}
+
+                    {step === 'validation' && (
+                        <>
+                            <Button
+                                variant="outline"
+                                onClick={() => setStep('upload')}
+                                disabled={importing}
+                            >
+                                Atras
+                            </Button>
+                            <Button
+                                onClick={handleImport}
+                                disabled={
+                                    importing ||
+                                    (validationResult !== null && validationResult.valid === 0)
+                                }
+                            >
+                                {importing && (
+                                    <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                                )}
+                                {importing ? 'Importando...' : 'Importar'}
+                            </Button>
+                        </>
+                    )}
+
+                    {step === 'results' && (
+                        <Button onClick={handleClose}>Cerrar</Button>
+                    )}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/dynamic-columns-shim.ts

@@ -0,0 +1,36 @@
+// Type-only definitions for dynamic column builders. The actual
+// `getDynamicColumns` implementation is host-owned (it renders design-system
+// specific primitives like Badge/Avatar/MediaGallery tied to the host's
+// shadcn theme). Hosts pass their implementation into <DynamicTable> via the
+// `getDynamicColumns` prop.
+import type { ColumnDef } from '@tanstack/react-table'
+import type { TableMetadata } from './types'
+
+export interface FilterOption {
+    label: string
+    value: string
+    icon?: string
+    color?: string
+}
+
+export interface ColumnFilterConfig {
+    filterType: 'select' | 'boolean' | 'date_range' | 'number_range' | 'text' | string
+    filterKey: string
+    options: FilterOption[]
+    selectedValues: string[]
+    onFilterChange: (filterKey: string, values: string[]) => void
+    loading?: boolean
+    searchEndpoint?: string
+}
+
+/** Signature for the host-provided `getDynamicColumns` factory. */
+export type GetDynamicColumns = (
+    metadata: TableMetadata,
+    handleAction: (action: string, row: any) => void,
+    t: (key: string, options?: any) => string,
+    language: string,
+    columnFilterConfigs: Map<string, ColumnFilterConfig>,
+) => ColumnDef<any>[]
+
+/** Signature for the host-provided `DynamicIcon` renderer. */
+export type DynamicIconComponent = React.ComponentType<{ name: string; className?: string }>

package/src/dynamic-form.tsx

@@ -0,0 +1,108 @@
+// 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 {
+    Input,
+    Textarea,
+    Label,
+    Switch,
+    Button,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@asteby/metacore-ui/primitives'
+import type { ActionFieldDef } from './types'
+
+export interface DynamicFormProps {
+    fields: ActionFieldDef[]
+    initialValues?: Record<string, any>
+    onSubmit: (values: Record<string, any>) => void | Promise<void>
+    onCancel?: () => void
+    submitLabel?: string
+    cancelLabel?: string
+    disabled?: boolean
+}
+
+export function DynamicForm({
+    fields,
+    initialValues,
+    onSubmit,
+    onCancel,
+    submitLabel = 'Guardar',
+    cancelLabel = 'Cancelar',
+    disabled = false,
+}: DynamicFormProps) {
+    const [values, setValues] = useState<Record<string, any>>({})
+    const [submitting, setSubmitting] = useState(false)
+
+    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)
+    }, [fields, initialValues])
+
+    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
+            }
+        }
+        setSubmitting(true)
+        try { await onSubmit(values) } finally { setSubmitting(false) }
+    }
+
+    return (
+        <form onSubmit={handleSubmit} className="grid gap-4">
+            {fields.map((field) => (
+                <div key={field.key} className="grid gap-2">
+                    <Label htmlFor={field.key}>
+                        {field.label}
+                        {field.required && <span className="text-red-500 ml-1">*</span>}
+                    </Label>
+                    {renderField(field, values[field.key], (v: any) => update(field.key, v))}
+                </div>
+            ))}
+            <div className="flex justify-end gap-2 pt-2">
+                {onCancel && (
+                    <Button type="button" variant="outline" onClick={onCancel} disabled={submitting || disabled}>
+                        {cancelLabel}
+                    </Button>
+                )}
+                <Button type="submit" disabled={submitting || disabled}>{submitLabel}</Button>
+            </div>
+        </form>
+    )
+}
+
+function renderField(field: ActionFieldDef, value: any, onChange: (v: any) => void) {
+    switch (field.type) {
+        case 'textarea':
+            return <Textarea id={field.key} value={value || ''} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
+        case 'select':
+            return (
+                <Select value={value || ''} onValueChange={onChange}>
+                    <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 'boolean':
+            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} />
+        case 'date':
+            return <Input id={field.key} type="date" value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} />
+        default:
+            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} />
+    }
+}

package/src/dynamic-icon.tsx

@@ -0,0 +1,15 @@
+// Minimal DynamicIcon — resolves a lucide-react icon by name. Used across
+// action modals and the default row-action menus. Hosts that need custom
+// icon sets can override by shadowing this component via their own prop.
+import * as icons from 'lucide-react'
+
+export interface DynamicIconProps {
+    name: string
+    className?: string
+}
+
+export function DynamicIcon({ name, className }: DynamicIconProps) {
+    const Icon = (icons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[name]
+    if (!Icon) return null
+    return <Icon className={className} />
+}