@asteby/metacore-runtime-react 23.2.0 → 23.4.0

package/src/dynamic-columns.tsx

@@ -38,11 +38,17 @@ import {
 import {
     generateBadgeStyles,
     getInitials,
-    optionColor,
     relationChipStyles,
 } from '@asteby/metacore-ui/lib'
 import { Progress } from './dialogs/_primitives'
 import { humanizeToken } from './dynamic-columns-helpers'
+import {
+    OptionBadge,
+    RelationThumbnail,
+    statusColorFor,
+    useIsDarkTheme,
+} from './display-value'
+import { MediaValue } from './rich-url'
 import { OptionsContext } from './options-context'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
 import { CollectionCell } from './collection-cell'
@@ -158,27 +164,6 @@ export const formatAggregateTotal = (
     )
 }
 
-/**
- * Semantic status → badge color. Used by the `status` cell when no explicit
- * `options` color is declared. Generic, value-driven mapping.
- */
-const statusColorFor = (value: string): string => {
-    const v = value.toLowerCase()
-    if (
-        ['active', 'enabled', 'paid', 'completed', 'done', 'success', 'approved', 'open']
-            .includes(v)
-    )
-        return '#22c55e'
-    if (['pending', 'draft', 'processing', 'in_progress', 'review', 'waiting'].includes(v))
-        return '#eab308'
-    if (
-        ['inactive', 'disabled', 'cancelled', 'canceled', 'failed', 'rejected', 'error', 'closed']
-            .includes(v)
-    )
-        return '#ef4444'
-    return '#6b7280'
-}
-
 /** Copyable monospaced text cell (code/IDs/hashes). */
 const CodeCell: React.FC<{ text: string; maxLength?: number }> = ({ text, maxLength }) => {
     const [copied, setCopied] = React.useState(false)
@@ -293,26 +278,6 @@ const getValueFromPathVariants = (obj: any, path?: string) => {
     return undefined
 }
 
-const useIsDarkTheme = () => {
-    const [isDark, setIsDark] = React.useState(() =>
-        typeof document !== 'undefined' &&
-        document.documentElement.classList.contains('dark')
-    )
-    React.useEffect(() => {
-        if (typeof document === 'undefined') return
-        const sync = () =>
-            setIsDark(document.documentElement.classList.contains('dark'))
-        sync()
-        const observer = new MutationObserver(sync)
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['class'],
-        })
-        return () => observer.disconnect()
-    }, [])
-    return isDark
-}
-
 const renderRelationBadges = (items: any, col: ColumnDefinition) => {
     if (!Array.isArray(items) || items.length === 0) {
         return <span className="text-muted-foreground">-</span>
@@ -359,66 +324,6 @@ const renderRelationBadges = (items: any, col: ColumnDefinition) => {
     )
 }
 
-/**
- * Tiny square thumbnail for a resolved relation/option that carries an `image`
- * (brand logo, product photo, customer/user avatar). Uses the same Avatar
- * primitive as the `avatar`/`creator` cells so a broken/loading image
- * gracefully falls back to the record's initials. Sized small (the box is an
- * inline style so an addon-arbitrary Tailwind class never gets dropped by a
- * consuming app's class scan). Rendered inline alongside a label — never alone.
- */
-const RelationThumbnail: React.FC<{
-    src: string
-    alt: string
-    getImageUrl?: (path: string) => string
-    size?: number
-}> = ({ src, alt, getImageUrl, size = 18 }) => (
-    <Avatar
-        className="shrink-0 rounded-sm ring-1 ring-border/40"
-        style={{ width: size, height: size }}
-    >
-        <AvatarImage
-            src={getImageUrl ? getImageUrl(src) : src}
-            alt={alt}
-            className="object-cover"
-        />
-        <AvatarFallback className="rounded-sm bg-primary/10 text-[8px] font-bold text-primary">
-            {getInitials(alt)}
-        </AvatarFallback>
-    </Avatar>
-)
-
-interface OptionBadgeProps {
-    option: { value: string; label: string; icon?: string; color?: string; image?: string }
-    fallback: string
-    getImageUrl?: (path: string) => string
-}
-
-const OptionBadge: React.FC<OptionBadgeProps> = ({ option, getImageUrl }) => {
-    const isDark = useIsDarkTheme()
-    // Explicit backend color wins; otherwise derive a stable, cohesive color
-    // from the option's value (fallback label) so "dead" gray badges come
-    // alive. Inline style (hex-derived) so it works regardless of the host's
-    // tailwind safelist — addon-arbitrary classes aren't in the host scan.
-    const colorSource = option.color || optionColor(option.value || option.label)
-    const colorStyles = generateBadgeStyles(colorSource, { isDark })
-    return (
-        <Badge variant="outline" className="flex items-center gap-1 border-0" style={colorStyles}>
-            {option.image ? (
-                <RelationThumbnail
-                    src={option.image}
-                    alt={option.label}
-                    getImageUrl={getImageUrl}
-                    size={16}
-                />
-            ) : (
-                option.icon && <DynamicIcon name={option.icon} className="h-3.5 w-3.5" />
-            )}
-            <span>{option.label}</span>
-        </Badge>
-    )
-}
-
 const BadgeWithEndpointOptions: React.FC<{
     endpoint: string
     value: any
@@ -939,33 +844,24 @@ export function makeDefaultGetDynamicColumns(
                                 : value
                             if (!rawUrl) return <EmptyCell />
                             const urlStr = String(rawUrl)
-                            const href = /^https?:\/\//i.test(urlStr) ? urlStr : `https://${urlStr}`
-                            let label: string
-                            if (labelField) {
-                                label = String(getNestedValue(row.original, labelField) ?? href)
-                            } else {
-                                try {
-                                    label = new URL(href).hostname
-                                } catch {
-                                    label = urlStr
-                                }
-                            }
-                            const isExternal = !/^https?:\/\/(localhost|127\.)/i.test(href)
-                            const newTab =
-                                styleCfg(col, 'new_tab', 'newTab') === true || isExternal
-                            const iconName = styleCfg(col, 'icon') || 'ExternalLink'
+                            // Explicit label from a `label_field` wins; otherwise
+                            // the shared primitive derives a smart label (hostname
+                            // / file name). Images render as a small (~h-8) inline
+                            // thumbnail, files as a chip, else a link chip. Same
+                            // renderer as the detail dialog.
+                            const label = labelField
+                                ? String(getNestedValue(row.original, labelField) ?? '')
+                                : undefined
+                            const iconName = styleCfg(col, 'icon')
                             return (
-                                <a
-                                    href={href}
-                                    {...(newTab
-                                        ? { target: '_blank', rel: 'noopener noreferrer' }
-                                        : {})}
-                                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
-                                    onClick={(e) => e.stopPropagation()}
-                                >
-                                    <DynamicIcon name={iconName} className="h-3.5 w-3.5 shrink-0" />
-                                    <span className="truncate max-w-[260px]">{label}</span>
-                                </a>
+                                <MediaValue
+                                    url={urlStr}
+                                    getImageUrl={getImageUrl}
+                                    label={label || undefined}
+                                    icon={iconName || undefined}
+                                    thumbHeight={32}
+                                    maxLabelWidth={260}
+                                />
                             )
                         }
 

package/src/dynamic-row-actions.tsx

@@ -139,11 +139,13 @@ export function useDynamicRowActions({
         try {
             const deleteEndpoint = endpoint ? `${endpoint}/${rowToDelete.id}` : `/data/${model}/${rowToDelete.id}`
             const res = await api.delete(deleteEndpoint)
-            if (res.data.success) { toast.success(res.data.message || 'Eliminado correctamente'); onRefresh() }
-            else toast.error(res.data.message || 'Error al eliminar')
+            // CRUD estándar: no usar res.data.message (el endpoint dinámico
+            // devuelve texto en inglés que se filtraría al toast). String localizado.
+            if (res.data.success) { toast.success(t('dynamic.delete_success', { defaultValue: 'Registro eliminado correctamente' })); onRefresh() }
+            else toast.error(t('dynamic.delete_error', { defaultValue: 'No se pudo eliminar el registro' }))
         } catch (error) {
             console.error('Error al eliminar', error)
-            toast.error('Error al eliminar el registro')
+            toast.error(t('dynamic.delete_error', { defaultValue: 'No se pudo eliminar el registro' }))
         } finally {
             setIsDeleting(false)
             setRowToDelete(null)

package/src/dynamic-table.tsx

@@ -628,8 +628,8 @@ export function DynamicTable({
         setBulkDeleteProgress(0)
         setBulkDeleteTotal(0)
         setRowSelection({})
-        if (successCount > 0) toast.success(`${successCount} registro(s) eliminado(s) correctamente`)
-        if (errorCount > 0) toast.error(`${errorCount} registro(s) no pudieron ser eliminados`)
+        if (successCount > 0) toast.success(t('dynamic.bulk_delete_success', { count: successCount, defaultValue: '{{count}} registro(s) eliminado(s) correctamente' }))
+        if (errorCount > 0) toast.error(t('dynamic.bulk_delete_error', { count: errorCount, defaultValue: '{{count}} registro(s) no pudieron ser eliminados' }))
         handleRefresh()
     }
 

package/src/index.ts

@@ -129,6 +129,23 @@ export {
     type DynamicColumnsHelpers,
 } from './dynamic-columns'
 export { humanizeToken } from './dynamic-columns-helpers'
+export {
+    UrlChip,
+    FileChip,
+    ImageThumbnail,
+    MediaValue,
+    RichText,
+    linkifyText,
+    classifyUrl,
+    isImageUrl,
+    isFileUrl,
+    ensureHref,
+    smartUrlLabel,
+    fileNameFromUrl,
+    splitTrailingPunct,
+    type UrlKind,
+    type LinkifyOptions,
+} from './rich-url'
 export {
     CollectionCell,
     formatScalar,

package/src/rich-url.tsx

@@ -0,0 +1,359 @@
+/**
+ * Rich URL & media rendering primitives.
+ *
+ * A URL is never shown raw. Depending on what it points at we render:
+ *   - an IMAGE (jpg/png/gif/webp/… or a `link.asteby.com/storage/media/` path)
+ *     → an inline clickable THUMBNAIL that opens the full image in a new tab,
+ *   - a FILE (pdf/zip/docx/…) → a chip with a file icon and the file name,
+ *   - anything else → a compact link CHIP: an external-link glyph plus a short
+ *     smart label (hostname, e.g. "github.com", or the last path segment for a
+ *     file-like URL), with the full URL in a native tooltip.
+ *
+ * These live here (not inline in the table/dialog) so the dynamic TABLE cell
+ * (`dynamic-columns.tsx`) and the read-only DETAIL DIALOG (`dynamic-record.tsx`)
+ * share the EXACT same rendering. Ecosystem rule: shared primitives, zero copy.
+ *
+ * No external requests are made to render a link (no favicon service — CSP /
+ * privacy): the icon is a local lucide glyph.
+ */
+import React from 'react'
+import { cn } from '@asteby/metacore-ui/lib'
+import { DynamicIcon } from './dynamic-icon'
+
+/** Image file extensions we render as an inline thumbnail. */
+const IMAGE_EXT_RE = /\.(jpe?g|png|gif|webp|avif|svg|bmp|ico)(?:[?#].*)?$/i
+
+/**
+ * Storage paths that serve images without a file extension (the link.asteby.com
+ * media CDN hands back opaque ids). Treated as images so uploaded photos still
+ * thumbnail.
+ */
+const MEDIA_PATH_RE = /\/storage\/media\//i
+
+/** Non-image file extensions we render as a download-ish file chip. */
+const FILE_EXT_RE =
+    /\.(pdf|zip|rar|7z|tar|t?gz|docx?|xlsx?|pptx?|csv|txt|json|xml|md|rtf|odt|mp4|mov|avi|mkv|webm|mp3|wav|ogg|flac|apk|dmg|exe|pkg)(?:[?#].*)?$/i
+
+export type UrlKind = 'image' | 'file' | 'link'
+
+/** `true` when the string looks like an image URL/path. */
+export function isImageUrl(url: string): boolean {
+    return IMAGE_EXT_RE.test(url) || MEDIA_PATH_RE.test(url)
+}
+
+/** `true` when the string looks like a non-image downloadable file. */
+export function isFileUrl(url: string): boolean {
+    return FILE_EXT_RE.test(url)
+}
+
+/** Classify a URL so the right primitive (thumbnail / file chip / link) renders. */
+export function classifyUrl(url: string): UrlKind {
+    if (isImageUrl(url)) return 'image'
+    if (isFileUrl(url)) return 'file'
+    return 'link'
+}
+
+/** Ensure a URL is absolute so `<a href>` and `new URL()` behave. */
+export function ensureHref(url: string): string {
+    return /^(https?:)?\/\//i.test(url) || /^(mailto|tel):/i.test(url)
+        ? url
+        : `https://${url}`
+}
+
+/**
+ * A short, human label for a URL. For a file-like URL (last segment carries an
+ * extension) the file name wins ("report.pdf"); otherwise the bare hostname
+ * ("github.com"), so a 120-char issue URL never shows raw. Falls back to the
+ * input when it can't be parsed.
+ */
+export function smartUrlLabel(url: string): string {
+    try {
+        const u = new URL(ensureHref(url))
+        const segs = u.pathname.split('/').filter(Boolean)
+        const last = segs[segs.length - 1]
+        if (last && /\.[a-z0-9]{1,8}$/i.test(last)) {
+            return decodeURIComponent(last)
+        }
+        return u.hostname.replace(/^www\./i, '')
+    } catch {
+        return url
+    }
+}
+
+/** Last path segment (decoded) — the file name for a file/image URL. */
+export function fileNameFromUrl(url: string): string {
+    try {
+        const u = new URL(ensureHref(url))
+        const segs = u.pathname.split('/').filter(Boolean)
+        return decodeURIComponent(segs[segs.length - 1] || u.hostname)
+    } catch {
+        return url.split(/[?#]/)[0].split('/').pop() || url
+    }
+}
+
+/** Stops row-click / dialog-close when a link inside them is clicked. */
+function stop(e: React.MouseEvent) {
+    e.stopPropagation()
+}
+
+/**
+ * Compact link chip: external-link glyph + smart label, full URL in the
+ * tooltip, opens in a new tab. The canonical render for a plain (non-media)
+ * URL, matching the table's `url`/`link` cell.
+ */
+export const UrlChip: React.FC<{
+    url: string
+    label?: string
+    icon?: string
+    /** Smaller label cap for a table/kanban cell. */
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, label, icon, maxLabelWidth = 260, className }) => {
+    const href = ensureHref(url)
+    const text = label || smartUrlLabel(url)
+    return (
+        <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={url}
+            onClick={stop}
+            className={cn(
+                'inline-flex max-w-full items-center gap-1.5 align-middle text-sm font-medium text-primary hover:underline',
+                className
+            )}
+        >
+            <DynamicIcon name={icon || 'ExternalLink'} className="h-3.5 w-3.5 shrink-0" />
+            <span className="truncate" style={{ maxWidth: maxLabelWidth }}>
+                {text}
+            </span>
+        </a>
+    )
+}
+
+/**
+ * Chip for a downloadable non-image file: file-text glyph + the file name,
+ * opens the file in a new tab.
+ */
+export const FileChip: React.FC<{
+    url: string
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, maxLabelWidth = 240, className }) => {
+    const href = ensureHref(url)
+    return (
+        <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={url}
+            onClick={stop}
+            className={cn(
+                'inline-flex max-w-full items-center gap-1.5 rounded-md border bg-muted/40 px-2 py-1 align-middle text-sm font-medium text-foreground hover:bg-muted',
+                className
+            )}
+        >
+            <DynamicIcon name="FileText" className="h-3.5 w-3.5 shrink-0 opacity-70" />
+            <span className="truncate" style={{ maxWidth: maxLabelWidth }}>
+                {fileNameFromUrl(url)}
+            </span>
+        </a>
+    )
+}
+
+/**
+ * Inline image thumbnail — rounded, bordered, `object-cover` — that opens the
+ * full image in a new tab. On load error it degrades to a normal link chip so a
+ * dead image URL is still reachable (and never a broken-image icon). `maxHeight`
+ * keeps a cell thumbnail small (~h-8) while the dialog shows a larger preview.
+ */
+export const ImageThumbnail: React.FC<{
+    url: string
+    getImageUrl?: (path: string) => string
+    /** Max rendered height in px. */
+    maxHeight?: number
+    className?: string
+}> = ({ url, getImageUrl, maxHeight = 160, className }) => {
+    const [failed, setFailed] = React.useState(false)
+    const href = ensureHref(url)
+    // Absolute URLs are used verbatim; only relative storage paths go through
+    // the host's image resolver (which prefixes the media base).
+    const src =
+        /^(https?:)?\/\//i.test(url) ? url : getImageUrl ? getImageUrl(url) : url
+    if (failed) return <UrlChip url={url} icon="Image" />
+    return (
+        <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={url}
+            onClick={stop}
+            className="inline-block max-w-full align-middle"
+        >
+            <img
+                src={src}
+                alt={smartUrlLabel(url)}
+                onError={() => setFailed(true)}
+                style={{ maxHeight }}
+                className={cn(
+                    'max-w-full rounded-md border object-cover',
+                    className
+                )}
+            />
+        </a>
+    )
+}
+
+/**
+ * One URL value → the right primitive (thumbnail / file chip / link chip).
+ * Single entry point used by both the table cell and the detail dialog so a URL
+ * renders identically everywhere.
+ */
+export const MediaValue: React.FC<{
+    url: string
+    getImageUrl?: (path: string) => string
+    /** Explicit label for the link chip (from a `label_field`). */
+    label?: string
+    /** Explicit icon for the link chip. */
+    icon?: string
+    /** Thumbnail max height (small in a cell, larger in the dialog). */
+    thumbHeight?: number
+    /** Link/file label truncation cap. */
+    maxLabelWidth?: number
+    className?: string
+}> = ({ url, getImageUrl, label, icon, thumbHeight, maxLabelWidth, className }) => {
+    switch (classifyUrl(url)) {
+        case 'image':
+            return (
+                <ImageThumbnail
+                    url={url}
+                    getImageUrl={getImageUrl}
+                    maxHeight={thumbHeight}
+                    className={className}
+                />
+            )
+        case 'file':
+            return <FileChip url={url} maxLabelWidth={maxLabelWidth} className={className} />
+        default:
+            return (
+                <UrlChip
+                    url={url}
+                    label={label}
+                    icon={icon}
+                    maxLabelWidth={maxLabelWidth}
+                    className={className}
+                />
+            )
+    }
+}
+
+// URL / markdown-link matcher used to linkify free text. Captures either a
+// markdown `[label](url)` or a bare http(s)/www URL. `[^\s<]+` is greedy on
+// purpose — trailing punctuation is trimmed afterwards by `splitTrailingPunct`.
+const LINK_IN_TEXT_RE =
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)|(https?:\/\/[^\s<]+|www\.[^\s<]+)/gi
+
+/**
+ * Peel trailing punctuation a URL shouldn't swallow (sentence period, closing
+ * bracket, quote). A closing paren is kept only when the URL itself opened one
+ * (Wikipedia-style `(…)` paths), so `(see https://x.com/a)` links `https://x.com/a`
+ * but `https://en.wikipedia.org/wiki/Foo_(bar)` keeps its paren.
+ */
+export function splitTrailingPunct(match: string): [string, string] {
+    const m = match.match(/[).,;:!?\]}'"»›]+$/)
+    if (!m) return [match, '']
+    let trail = m[0]
+    let core = match.slice(0, match.length - trail.length)
+    if (trail.startsWith(')')) {
+        const opens = (core.match(/\(/g) || []).length
+        const closes = (core.match(/\)/g) || []).length
+        if (opens > closes) {
+            core += ')'
+            trail = trail.slice(1)
+        }
+    }
+    return [core, trail]
+}
+
+export interface LinkifyOptions {
+    getImageUrl?: (path: string) => string
+    /** Max height for an inline image found in the text. */
+    imageHeight?: number
+}
+
+/**
+ * Turn free text into React nodes, replacing every URL (bare or markdown
+ * `[label](url)`) with the matching rich primitive: an inline thumbnail for an
+ * image URL, a file chip for a file, otherwise a link chip. Plain text between
+ * matches is preserved verbatim (caller keeps `whitespace-pre-wrap`).
+ */
+export function linkifyText(
+    text: string,
+    opts: LinkifyOptions = {}
+): React.ReactNode[] {
+    if (!text) return []
+    const nodes: React.ReactNode[] = []
+    const re = new RegExp(LINK_IN_TEXT_RE.source, 'gi')
+    let lastIndex = 0
+    let key = 0
+    let m: RegExpExecArray | null
+    while ((m = re.exec(text)) !== null) {
+        const [full, mdLabel, mdUrl, bareUrl] = m
+        const start = m.index
+        if (start > lastIndex) nodes.push(text.slice(lastIndex, start))
+
+        if (mdUrl) {
+            // Markdown link: honor the author's label, keep media inline.
+            const kind = classifyUrl(mdUrl)
+            if (kind === 'image') {
+                nodes.push(
+                    <ImageThumbnail
+                        key={key}
+                        url={mdUrl}
+                        getImageUrl={opts.getImageUrl}
+                        maxHeight={opts.imageHeight ?? 200}
+                    />
+                )
+            } else if (kind === 'file') {
+                nodes.push(<FileChip key={key} url={mdUrl} />)
+            } else {
+                nodes.push(<UrlChip key={key} url={mdUrl} label={mdLabel} />)
+            }
+            lastIndex = start + full.length
+        } else {
+            const [core, trail] = splitTrailingPunct(bareUrl)
+            const kind = classifyUrl(core)
+            if (kind === 'image') {
+                nodes.push(
+                    <ImageThumbnail
+                        key={key}
+                        url={core}
+                        getImageUrl={opts.getImageUrl}
+                        maxHeight={opts.imageHeight ?? 200}
+                    />
+                )
+            } else if (kind === 'file') {
+                nodes.push(<FileChip key={key} url={core} />)
+            } else {
+                nodes.push(<UrlChip key={key} url={core} />)
+            }
+            if (trail) nodes.push(trail)
+            lastIndex = start + bareUrl.length
+        }
+        key++
+    }
+    if (lastIndex < text.length) nodes.push(text.slice(lastIndex))
+    return nodes
+}
+
+/**
+ * Linkified free text. Renders the raw string with every URL turned into a rich
+ * chip/thumbnail — the read view for a long-text / textarea / body field.
+ */
+export const RichText: React.FC<{
+    text: string
+    getImageUrl?: (path: string) => string
+    imageHeight?: number
+}> = ({ text, getImageUrl, imageHeight }) => (
+    <>{linkifyText(text, { getImageUrl, imageHeight })}</>
+)