@asteby/metacore-runtime-react 4.0.0

package/src/action-modal-dispatcher.tsx

@@ -0,0 +1,275 @@
+// ActionModalDispatcher — renders the right modal for a custom action:
+// 1) Custom component from the SDK registry → use it
+// 2) action.fields[] → GenericActionModal (form)
+// 3) action.confirm → ConfirmActionDialog
+// 4) otherwise → nothing (caller executes immediately)
+//
+// The host injects its axios-like client via <ApiProvider>; we no longer
+// depend on a bundler alias to `@/lib/api`.
+import { useState, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+    DialogFooter,
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    Button,
+    Input,
+    Textarea,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Switch,
+} from '@asteby/metacore-ui/primitives'
+import { Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { useApi } from './api-context'
+import { DynamicIcon } from './dynamic-icon'
+// Canonical registry lives in @asteby/metacore-sdk
+import {
+    type ActionMetadata,
+    type ActionModalProps,
+    getActionComponent,
+} from '@asteby/metacore-sdk'
+
+export type { ActionMetadata, ActionModalProps }
+
+export function ActionModalDispatcher({
+    open,
+    onOpenChange,
+    action,
+    model,
+    record,
+    endpoint,
+    onSuccess,
+}: ActionModalProps) {
+    const CustomComponent = useMemo(
+        () => getActionComponent(model, action.key),
+        [model, action.key],
+    )
+
+    if (CustomComponent) {
+        return (
+            <CustomComponent
+                open={open}
+                onOpenChange={onOpenChange}
+                action={action}
+                model={model}
+                record={record}
+                endpoint={endpoint}
+                onSuccess={onSuccess}
+            />
+        )
+    }
+
+    if (action.fields && action.fields.length > 0) {
+        return (
+            <GenericActionModal
+                open={open}
+                onOpenChange={onOpenChange}
+                action={action}
+                model={model}
+                record={record}
+                endpoint={endpoint}
+                onSuccess={onSuccess}
+            />
+        )
+    }
+
+    if (action.confirm) {
+        return (
+            <ConfirmActionDialog
+                open={open}
+                onOpenChange={onOpenChange}
+                action={action}
+                model={model}
+                record={record}
+                endpoint={endpoint}
+                onSuccess={onSuccess}
+            />
+        )
+    }
+
+    return null
+}
+
+function buildActionUrl(endpoint: string | undefined, model: string, recordId: string, actionKey: string) {
+    return endpoint ? `${endpoint}/${recordId}/action/${actionKey}` : `/data/${model}/me/${recordId}/action/${actionKey}`
+}
+
+function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
+    const { t } = useTranslation()
+    const api = useApi()
+    const [executing, setExecuting] = useState(false)
+
+    const execute = async () => {
+        setExecuting(true)
+        try {
+            const url = buildActionUrl(endpoint, model, record.id, action.key)
+            const res = await api.post(url, {})
+            if (res.data.success) {
+                toast.success(res.data.message || t('common.success'))
+                onOpenChange(false)
+                onSuccess()
+            } else {
+                toast.error(res.data.message || t('common.error'))
+            }
+        } catch (err: any) {
+            toast.error(err?.response?.data?.message || t('common.error'))
+        } finally {
+            setExecuting(false)
+        }
+    }
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle className="flex items-center gap-2">
+                        <DynamicIcon name={action.icon} className="h-5 w-5" />
+                        {action.label}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                        {action.confirmMessage || `${action.label}?`}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel disabled={executing}>{t('common.cancel')}</AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={(e: React.MouseEvent) => { e.preventDefault(); execute() }}
+                        disabled={executing}
+                        style={action.color ? { backgroundColor: action.color } : undefined}
+                    >
+                        {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
+                        {action.label}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}
+
+function GenericActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
+    const { t } = useTranslation()
+    const api = useApi()
+    const [formData, setFormData] = useState<Record<string, any>>({})
+    const [executing, setExecuting] = useState(false)
+
+    useEffect(() => {
+        if (open && action.fields) {
+            const defaults: Record<string, any> = {}
+            for (const field of action.fields) {
+                defaults[field.key] = field.defaultValue ?? (field.type === 'boolean' ? false : '')
+            }
+            setFormData(defaults)
+        }
+    }, [open, action.fields])
+
+    const updateField = (key: string, value: any) => setFormData((prev: Record<string, any>) => ({ ...prev, [key]: value }))
+
+    const execute = async () => {
+        if (action.fields) {
+            for (const field of action.fields) {
+                if (field.required && !formData[field.key] && formData[field.key] !== false) {
+                    toast.error(`${field.label} es requerido`)
+                    return
+                }
+            }
+        }
+        setExecuting(true)
+        try {
+            const url = buildActionUrl(endpoint, model, record.id, action.key)
+            const res = await api.post(url, formData)
+            if (res.data.success) {
+                toast.success(res.data.message || t('common.success'))
+                onOpenChange(false)
+                onSuccess()
+            } else {
+                toast.error(res.data.message || t('common.error'))
+            }
+        } catch (err: any) {
+            toast.error(err?.response?.data?.message || t('common.error'))
+        } finally {
+            setExecuting(false)
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <DynamicIcon name={action.icon} className="h-5 w-5" />
+                        {action.label}
+                    </DialogTitle>
+                    {action.confirmMessage && <DialogDescription>{action.confirmMessage}</DialogDescription>}
+                </DialogHeader>
+                <div className="grid gap-4 py-4">
+                    {action.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, formData[field.key], (v: any) => updateField(field.key, v))}
+                        </div>
+                    ))}
+                </div>
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={executing}>
+                        {t('common.cancel')}
+                    </Button>
+                    <Button
+                        onClick={execute}
+                        disabled={executing}
+                        style={action.color ? { backgroundColor: action.color, color: 'white' } : undefined}
+                    >
+                        {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
+                        {action.label}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+function renderField(
+    field: { key: string; type: string; options?: { value: string; label: string }[]; placeholder?: string },
+    value: any,
+    onChange: (value: 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/addon-loader.tsx

@@ -0,0 +1,111 @@
+// Minimal federated-module addon loader. Injects a remoteEntry.js <script>,
+// waits for the `window[scope]` container to initialize, then calls the
+// addon's `register(api)` export with the AddonAPI injected by the host.
+import { useEffect, useRef, useState } from 'react'
+import type { AddonAPI } from '@asteby/metacore-sdk'
+
+declare global {
+    interface Window {
+        [key: string]: any
+        __webpack_init_sharing__?: (scope: string) => Promise<void>
+        __webpack_share_scopes__?: Record<string, unknown>
+    }
+}
+
+export interface AddonLoaderProps {
+    /** Unique key of the addon — maps to the federation container name. */
+    scope: string
+    /** URL of the addon's remoteEntry.js bundle. */
+    url: string
+    /** Exposed module to import from the remote (e.g. './register'). */
+    module?: string
+    /** Host-provided API passed to the addon's register() call. */
+    api: AddonAPI
+    /** Optional rendering while loading. */
+    fallback?: React.ReactNode
+    /** Called once the addon has successfully registered. */
+    onReady?: () => void
+    /** Called if loading fails. */
+    onError?: (err: Error) => void
+    children?: React.ReactNode
+}
+
+const loadedScripts = new Map<string, Promise<void>>()
+
+function loadScript(url: string, scope: string): Promise<void> {
+    const key = `${scope}::${url}`
+    const existing = loadedScripts.get(key)
+    if (existing) return existing
+    const promise = new Promise<void>((resolve, reject) => {
+        const el = document.createElement('script')
+        el.src = url
+        el.type = 'text/javascript'
+        el.async = true
+        el.onload = () => resolve()
+        el.onerror = () => reject(new Error(`Failed to load addon script: ${url}`))
+        document.head.appendChild(el)
+    })
+    loadedScripts.set(key, promise)
+    return promise
+}
+
+interface FederationContainer {
+    init: (shareScope: unknown) => Promise<void>
+    get: (module: string) => Promise<() => any>
+}
+
+async function loadRemote(scope: string, module: string) {
+    if (typeof window.__webpack_init_sharing__ === 'function') {
+        await window.__webpack_init_sharing__('default')
+    }
+    const container = window[scope] as FederationContainer | undefined
+    if (!container) throw new Error(`Addon container "${scope}" not found on window`)
+    if (typeof container.init === 'function' && window.__webpack_share_scopes__) {
+        await container.init(window.__webpack_share_scopes__.default)
+    }
+    const factory = await container.get(module)
+    return factory()
+}
+
+export function AddonLoader({
+    scope,
+    url,
+    module = './register',
+    api,
+    fallback = null,
+    onReady,
+    onError,
+    children,
+}: AddonLoaderProps) {
+    const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading')
+    const [error, setError] = useState<Error | null>(null)
+    const didRegister = useRef(false)
+
+    useEffect(() => {
+        let cancelled = false
+        ;(async () => {
+            try {
+                await loadScript(url, scope)
+                if (cancelled) return
+                const mod = await loadRemote(scope, module)
+                if (cancelled) return
+                if (!didRegister.current && typeof mod?.register === 'function') {
+                    didRegister.current = true
+                    await Promise.resolve(mod.register(api))
+                }
+                setStatus('ready')
+                onReady?.()
+            } catch (e: any) {
+                if (cancelled) return
+                setError(e)
+                setStatus('error')
+                onError?.(e)
+            }
+        })()
+        return () => { cancelled = true }
+    }, [scope, url, module])
+
+    if (status === 'loading') return <>{fallback}</>
+    if (status === 'error') return <div className="text-sm text-red-500">Addon load error: {error?.message}</div>
+    return <>{children}</>
+}

package/src/api-context.tsx

@@ -0,0 +1,55 @@
+// ApiContext — the host injects its HTTP client (axios-like interface) so
+// runtime-react components (DynamicTable, dialogs, action dispatcher) can
+// talk to the backend without a bundler alias to `@/lib/api`. Hosts wrap
+// their app in <ApiProvider value={axiosInstance}> once at the root.
+import React, { createContext, useContext } from 'react'
+
+/** Minimal axios-compatible client shape consumed by runtime-react. */
+export interface ApiClient {
+    get: (url: string, config?: any) => Promise<{ data: any; headers?: any }>
+    post: (url: string, body?: any, config?: any) => Promise<{ data: any; headers?: any }>
+    put: (url: string, body?: any, config?: any) => Promise<{ data: any; headers?: any }>
+    delete: (url: string, config?: any) => Promise<{ data: any; headers?: any }>
+}
+
+const ApiContext = createContext<ApiClient | null>(null)
+
+export interface ApiProviderProps {
+    client: ApiClient
+    children: React.ReactNode
+}
+
+export function ApiProvider({ client, children }: ApiProviderProps) {
+    return <ApiContext.Provider value={client}>{children}</ApiContext.Provider>
+}
+
+/** Returns the host-injected api client. Throws if no <ApiProvider> is mounted. */
+export function useApi(): ApiClient {
+    const ctx = useContext(ApiContext)
+    if (!ctx) {
+        throw new Error('useApi() requires an <ApiProvider> ancestor. Hosts must inject an axios-like client via runtime-react ApiProvider.')
+    }
+    return ctx
+}
+
+/** Optional branch context — hosts that support tenant branches can supply
+ *  a `currentBranch` so DynamicTable resets pagination/selection on branch
+ *  switches. Hosts without branches can omit this provider entirely. */
+export interface BranchState {
+    id: string | number | null | undefined
+}
+
+const BranchContext = createContext<BranchState>({ id: undefined })
+
+export interface BranchProviderProps {
+    branch: BranchState
+    children: React.ReactNode
+}
+
+export function BranchProvider({ branch, children }: BranchProviderProps) {
+    return <BranchContext.Provider value={branch}>{children}</BranchContext.Provider>
+}
+
+export function useCurrentBranch(): BranchState {
+    return useContext(BranchContext)
+}

package/src/capability-gate.tsx

@@ -0,0 +1,69 @@
+// CapabilityGate — conditionally renders its children based on the current
+// user's capability set. Capabilities are sourced from AddonAPI.capabilities
+// or a React context the host provides.
+import React, { createContext, useContext, useMemo } from 'react'
+
+export type CapabilitySet = ReadonlySet<string> | string[] | Record<string, boolean>
+
+interface CapabilityContextValue {
+    has: (capability: string) => boolean
+    all: (capabilities: string[]) => boolean
+    any: (capabilities: string[]) => boolean
+}
+
+const CapabilityContext = createContext<CapabilityContextValue>({
+    has: () => false,
+    all: () => false,
+    any: () => false,
+})
+
+export interface CapabilityProviderProps {
+    capabilities: CapabilitySet
+    children: React.ReactNode
+}
+
+function normalize(cs: CapabilitySet): Set<string> {
+    if (cs instanceof Set) return cs as Set<string>
+    if (Array.isArray(cs)) return new Set(cs)
+    return new Set(Object.entries(cs).filter(([, v]) => v).map(([k]) => k))
+}
+
+export function CapabilityProvider({ capabilities, children }: CapabilityProviderProps) {
+    const value = useMemo<CapabilityContextValue>(() => {
+        const set = normalize(capabilities)
+        return {
+            has: (c) => set.has(c),
+            all: (cs) => cs.every(c => set.has(c)),
+            any: (cs) => cs.some(c => set.has(c)),
+        }
+    }, [capabilities])
+    return <CapabilityContext.Provider value={value}>{children}</CapabilityContext.Provider>
+}
+
+export function useCapabilities() {
+    return useContext(CapabilityContext)
+}
+
+export interface CapabilityGateProps {
+    /** Single capability required to render children. */
+    require?: string
+    /** All of these capabilities must be present. */
+    all?: string[]
+    /** At least one of these capabilities must be present. */
+    any?: string[]
+    /** Content rendered when the user lacks the required capabilities. */
+    fallback?: React.ReactNode
+    /** Optional negation: render children when capability is ABSENT. */
+    invert?: boolean
+    children: React.ReactNode
+}
+
+export function CapabilityGate({ require, all, any, fallback = null, invert = false, children }: CapabilityGateProps) {
+    const ctx = useCapabilities()
+    let allowed = true
+    if (require) allowed = allowed && ctx.has(require)
+    if (all && all.length) allowed = allowed && ctx.all(all)
+    if (any && any.length) allowed = allowed && ctx.any(any)
+    const show = invert ? !allowed : allowed
+    return <>{show ? children : fallback}</>
+}

package/src/dialogs/_primitives.tsx

@@ -0,0 +1,114 @@
+// Minimal local primitives used by the dialogs copied into runtime-react.
+// These are intentionally dependency-free shims — hosts that want richer
+// visuals (date picker calendar, radix progress, radix radio-group) should
+// override by wrapping these components. The UI package does not currently
+// export these three primitives so we keep them inside the runtime.
+import * as React from 'react'
+
+// ── Progress ────────────────────────────────────────────────────────────────
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number
+}
+
+export function Progress({ value = 0, className = '', ...props }: ProgressProps) {
+    const pct = Math.max(0, Math.min(100, value))
+    return (
+        <div
+            role="progressbar"
+            aria-valuenow={pct}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            className={`relative h-2 w-full overflow-hidden rounded-full bg-secondary ${className}`}
+            {...props}
+        >
+            <div
+                className="h-full bg-primary transition-all"
+                style={{ width: `${pct}%` }}
+            />
+        </div>
+    )
+}
+
+// ── RadioGroup ──────────────────────────────────────────────────────────────
+interface RadioGroupContextValue {
+    value: string
+    onChange: (value: string) => void
+    name: string
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null)
+
+export interface RadioGroupProps {
+    value: string
+    onValueChange: (value: string) => void
+    className?: string
+    children: React.ReactNode
+    name?: string
+}
+
+export function RadioGroup({ value, onValueChange, className = '', children, name = 'radio-group' }: RadioGroupProps) {
+    return (
+        <RadioGroupContext.Provider value={{ value, onChange: onValueChange, name }}>
+            <div role="radiogroup" className={className}>{children}</div>
+        </RadioGroupContext.Provider>
+    )
+}
+
+export interface RadioGroupItemProps {
+    value: string
+    id?: string
+    className?: string
+    disabled?: boolean
+}
+
+export function RadioGroupItem({ value, id, className = '', disabled }: RadioGroupItemProps) {
+    const ctx = React.useContext(RadioGroupContext)
+    if (!ctx) throw new Error('RadioGroupItem must be used inside <RadioGroup>')
+    const checked = ctx.value === value
+    return (
+        <input
+            type="radio"
+            id={id}
+            name={ctx.name}
+            value={value}
+            checked={checked}
+            disabled={disabled}
+            onChange={() => ctx.onChange(value)}
+            className={`h-4 w-4 border-primary text-primary ${className}`}
+        />
+    )
+}
+
+// ── Calendar (minimal) ──────────────────────────────────────────────────────
+// We expose a tiny date-input based Calendar so the record-dialog still
+// renders when no host-provided calendar is available. Hosts wanting a full
+// calendar grid can pass their own via the `calendar` prop on DynamicTable
+// (not wired here) or wrap the dialog. For the build to succeed, this shim
+// is sufficient.
+export interface CalendarProps {
+    mode?: 'single'
+    selected?: Date
+    onSelect?: (date: Date | undefined) => void
+    locale?: any
+    className?: string
+}
+
+export function Calendar({ selected, onSelect, className = '' }: CalendarProps) {
+    const value = selected && !isNaN(selected.getTime())
+        ? selected.toISOString().slice(0, 10)
+        : ''
+    return (
+        <div className={`p-3 ${className}`}>
+            <input
+                type="date"
+                value={value}
+                onChange={(e) => {
+                    const v = e.target.value
+                    if (!v) { onSelect?.(undefined); return }
+                    onSelect?.(new Date(v + 'T00:00:00'))
+                }}
+                className="w-full rounded-md border px-3 py-2 text-sm"
+            />
+        </div>
+    )
+}