@airoom/nextmin-react 1.1.0 → 1.3.0

package/dist/components/viewer/DynamicViewer.d.ts

@@ -0,0 +1,7 @@
+import type { SchemaDef } from '../../lib/types';
+type Props = {
+    schema?: SchemaDef;
+    data: Record<string, any>;
+};
+export declare function DynamicViewer({ schema, data }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/viewer/DynamicViewer.js

@@ -0,0 +1,274 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { formatCell } from '../../views/list/formatters';
+import { summarizeObject } from '../../views/list/jsonSummary';
+// Hide technical keys in the viewer
+const HIDDEN_KEYS = new Set(['id', '_id', 'v', '__v', 'baseId', 'exId', '__childId', 'createdAt', 'updatedAt', 'deletedAt']);
+// Detect password-like keys generically (no value should be visible)
+function normKey(k) {
+    return k.toLowerCase().replace(/[^a-z]/g, '');
+}
+function isPasswordKeyRaw(k) {
+    const n = normKey(k);
+    // Generic detection: match common variants and substrings
+    if (n === 'password' || n === 'pwd')
+        return true;
+    if (n.includes('password'))
+        return true; // e.g., userpassword, passwordhash
+    if (n.includes('passwd'))
+        return true; // passwd
+    if (n.includes('passcode'))
+        return true; // passcode
+    if (n.includes('secret'))
+        return true; // clientsecret, secretKey
+    return false;
+}
+function isPasswordByAttr(attr) {
+    const a = (Array.isArray(attr) ? attr[0] : attr);
+    const t = String(a?.type ?? '').toLowerCase();
+    const f = String(a?.format ?? '').toLowerCase();
+    return t === 'password' || f === 'password';
+}
+// --- small helpers (duplicated minimal logic from table) ---
+const IMG_EXT_RE = /(png|jpe?g|gif|webp|bmp|svg|avif|heic|heif)$/i;
+function isUrlLike(s) {
+    return /^https?:\/\//i.test(s) || s.startsWith('/') || s.startsWith('data:');
+}
+function isLikelyImageUrl(s) {
+    if (!isUrlLike(s))
+        return false;
+    if (s.startsWith('data:image/'))
+        return true;
+    try {
+        const url = new URL(s, 'http://x');
+        const path = url.pathname || '';
+        return IMG_EXT_RE.test(path.split('.').pop() || '');
+    }
+    catch {
+        const path = s.split('?')[0] || '';
+        return IMG_EXT_RE.test(path.split('.').pop() || '');
+    }
+}
+function extractUrl(v) {
+    if (!v)
+        return null;
+    if (typeof v === 'string' && isLikelyImageUrl(v))
+        return v;
+    if (typeof v === 'object') {
+        const u = (v.url || v.src || v.value);
+        return u && isLikelyImageUrl(u) ? u : null;
+    }
+    return null;
+}
+function extractAllImageUrls(val) {
+    if (Array.isArray(val)) {
+        const list = val.map(extractUrl).filter(Boolean);
+        if (list.length)
+            return list;
+        return (val.filter((s) => typeof s === 'string' && isLikelyImageUrl(s)) || []);
+    }
+    const one = extractUrl(val);
+    return one ? [one] : [];
+}
+function humanizeLabel(key) {
+    const spaced = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/_/g, ' ');
+    return spaced.slice(0, 1).toUpperCase() + spaced.slice(1);
+}
+/** ---------- Date/time helpers (local timezone formatting) ---------- */
+// Check if a field name is a date field
+function isDateField(key) {
+    if (!key)
+        return false;
+    const k = key.toLowerCase().replace(/[^a-z]/g, '');
+    return k === 'createdat' || k === 'updatedat' || k === 'deletedat';
+}
+function tryParseDate(val) {
+    if (val == null)
+        return null;
+    // Already a Date
+    if (val instanceof Date)
+        return isNaN(val.getTime()) ? null : val;
+    // ONLY parse ISO-like strings, NOT numbers (to avoid phone numbers, experience years, etc.)
+    if (typeof val === 'string') {
+        const s = val.trim();
+        // Must look like an ISO date: YYYY-MM-DD or contain 'T' or end with 'Z'
+        const looksIso = /^\d{4}-\d{2}-\d{2}/.test(s) || s.includes('T') || s.endsWith('Z');
+        if (!looksIso)
+            return null;
+        const d = new Date(s);
+        return isNaN(d.getTime()) ? null : d;
+    }
+    return null;
+}
+function formatDateTimeLocal(d) {
+    // Use the runtime locale and include seconds for precision
+    try {
+        return d.toLocaleString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: true,
+        });
+    }
+    catch {
+        return d.toString();
+    }
+}
+function isPrivate(attr) {
+    const a = (Array.isArray(attr) ? attr[0] : attr);
+    return !!a?.private;
+}
+function FieldRow({ label, children }) {
+    return (_jsxs("div", { className: "grid grid-cols-12 gap-3 border-b border-default-100 py-3", children: [_jsx("div", { className: "col-span-4 md:col-span-3 text-foreground/70 text-sm", children: label }), _jsx("div", { className: "col-span-8 md:col-span-9 break-words", children: children })] }));
+}
+function ImageThumbs({ urls }) {
+    return (_jsx("div", { className: "flex flex-wrap gap-2", children: urls.map((u, i) => (_jsx("a", { href: u, target: "_blank", rel: "noreferrer", children: _jsx("img", { src: u, alt: "image", width: 64, height: 64, className: "h-16 w-16 rounded-md object-cover border border-default-200 bg-default-100", loading: "lazy" }) }, `${u}-${i}`))) }));
+}
+/** ---------- Generic label + nested-list condensation ---------- */
+const COMMON_LABEL_KEYS = ['name', 'title', 'label', 'display', 'show'];
+function toLabel(v) {
+    if (v == null)
+        return null;
+    if (typeof v === 'string')
+        return v.trim() || null;
+    if (typeof v === 'number' || typeof v === 'boolean')
+        return String(v);
+    if (typeof v === 'object') {
+        // Prefer common label keys
+        for (const k of COMMON_LABEL_KEYS) {
+            const val = v[k];
+            if (typeof val === 'string' && val.trim())
+                return val;
+        }
+        // Fallbacks
+        if (typeof v.value === 'string' && v.value.trim())
+            return v.value;
+        if (typeof v.id === 'string' && v.id.trim())
+            return v.id;
+    }
+    return null;
+}
+function listLabels(arr) {
+    if (!Array.isArray(arr))
+        return null;
+    const labels = arr
+        .map((it) => toLabel(it))
+        .filter((s) => !!s && !!s.trim());
+    return labels.length ? labels : null;
+}
+function summarizeList(labels, max = 10) {
+    if (labels.length <= max)
+        return labels.join(', ');
+    const shown = labels.slice(0, max).join(', ');
+    const more = labels.length - max;
+    return `${shown}, +${more} more`;
+}
+function tryCondenseEntity(obj) {
+    if (!obj || typeof obj !== 'object')
+        return null;
+    // Primary label from the object itself
+    const primary = toLabel(obj);
+    if (!primary)
+        return null;
+    // Find the most informative array property that yields labels
+    let best = null;
+    for (const [k, v] of Object.entries(obj)) {
+        if (HIDDEN_KEYS.has(k) || isPasswordKeyRaw(k))
+            continue;
+        if (!Array.isArray(v))
+            continue;
+        const labels = listLabels(v);
+        if (labels && labels.length) {
+            if (!best || labels.length > best.length)
+                best = labels;
+        }
+    }
+    if (best && best.length) {
+        return `${primary} — ${summarizeList(best)}`;
+    }
+    return null;
+}
+function maybeParseJson(val) {
+    if (typeof val !== 'string')
+        return val;
+    const s = val.trim();
+    if (!s)
+        return val;
+    if (!(s.startsWith('{') || s.startsWith('[')))
+        return val;
+    try {
+        const parsed = JSON.parse(s);
+        if (parsed && (typeof parsed === 'object' || Array.isArray(parsed)))
+            return parsed;
+        return val;
+    }
+    catch {
+        return val;
+    }
+}
+function renderValue(input, key) {
+    const val = maybeParseJson(input);
+    if (val == null)
+        return _jsx("span", { className: "text-foreground/50", children: "\u2014" });
+    // Only parse dates for known date fields (createdAt, updatedAt, deletedAt)
+    if (isDateField(key)) {
+        const d = tryParseDate(val);
+        if (d) {
+            const iso = d.toISOString();
+            return (_jsx("time", { dateTime: iso, title: iso, className: "whitespace-pre-wrap", children: formatDateTimeLocal(d) }));
+        }
+    }
+    // Detect images
+    const urls = extractAllImageUrls(val);
+    if (urls.length)
+        return _jsx(ImageThumbs, { urls: urls });
+    // Primitive or simple object/array formatting via shared formatter
+    if (Array.isArray(val)) {
+        // Prefer shared summarizer for arrays
+        if (val.length && typeof val[0] === 'object') {
+            // Show each summarized object on its own line for readability
+            const lines = val
+                .map((v) => (v && typeof v === 'object' ? summarizeObject(v)?.text : null))
+                .filter((s) => !!s && !!s.trim());
+            if (lines.length) {
+                return (_jsx("div", { className: "grid gap-1", children: lines.map((s, i) => (_jsx("div", { className: "text-foreground/90", children: s }, i))) }));
+            }
+        }
+        // Fallback detailed rendering
+        return (_jsx("div", { className: "grid gap-2", children: val.map((v, i) => (_jsx("div", { className: "rounded-medium border border-default-100 p-2", children: typeof v === 'object' && v !== null ? (_jsx(ObjectView, { obj: v })) : (_jsx("span", { children: formatCell(v, key) })) }, i))) }));
+    }
+    if (typeof val === 'object') {
+        const condensed = summarizeObject(val)?.text || tryCondenseEntity(val);
+        if (condensed)
+            return _jsx("span", { children: condensed });
+        return _jsx(ObjectView, { obj: val });
+    }
+    return _jsx("span", { children: formatCell(val, key) });
+}
+function ObjectView({ obj }) {
+    const entries = Object.entries(obj).filter(([k]) => !HIDDEN_KEYS.has(k) && !isPasswordKeyRaw(k));
+    if (!entries.length)
+        return _jsx("span", { className: "text-foreground/50", children: '{ }' });
+    return (_jsx("div", { className: "grid gap-1", children: entries.map(([k, v]) => (_jsxs("div", { className: "flex gap-2 items-start", children: [_jsxs("div", { className: "min-w-24 text-foreground/60 text-sm", children: [humanizeLabel(k), ":"] }), _jsx("div", { className: "flex-1", children: renderValue(v, k) })] }, k))) }));
+}
+export function DynamicViewer({ schema, data }) {
+    // Use schema order if available, otherwise object keys order
+    const attributes = (schema?.attributes ?? {});
+    const keys = React.useMemo(() => {
+        const base = Object.keys(attributes).filter((k) => {
+            if (HIDDEN_KEYS.has(k) || isPasswordKeyRaw(k))
+                return false;
+            if (isPasswordByAttr(attributes[k]))
+                return false;
+            return !isPrivate(attributes[k]);
+        });
+        if (base.length)
+            return base;
+        return Object.keys(data || {}).filter((k) => !HIDDEN_KEYS.has(k) && !isPasswordKeyRaw(k));
+    }, [attributes, data]);
+    return (_jsx("div", { className: "grid gap-1", children: keys.map((key) => (_jsx(FieldRow, { label: humanizeLabel(key), children: renderValue(data?.[key], key) }, key))) }));
+}

package/dist/components/viewer/useViewDrawer.d.ts

@@ -0,0 +1,12 @@
+import type { SchemaDef } from '../../lib/types';
+export type OpenViewParams = {
+    title?: string;
+    model?: string;
+    schema?: SchemaDef;
+    data: Record<string, any>;
+};
+export declare function useViewDrawer(): {
+    readonly open: (params: OpenViewParams) => void;
+    readonly close: () => void;
+    readonly ViewDrawerPortal: () => import("react/jsx-runtime").JSX.Element | null;
+};

package/dist/components/viewer/useViewDrawer.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Button, } from '@heroui/react';
+import { DynamicViewer } from './DynamicViewer';
+export function useViewDrawer() {
+    const [state, setState] = React.useState(null);
+    const open = React.useCallback((params) => {
+        setState({ ...params, isOpen: true });
+    }, []);
+    const close = React.useCallback(() => {
+        setState((s) => (s ? { ...s, isOpen: false } : s));
+        // delay unmount slightly for animation
+        setTimeout(() => setState(null), 200);
+    }, []);
+    const ViewDrawerPortal = React.useCallback(() => {
+        if (!state)
+            return null;
+        const { isOpen, title, model, schema, data } = state;
+        const headerTitle = title || model || 'Details';
+        return (_jsx(Drawer, { isOpen: isOpen, onClose: close, placement: "right", size: "lg", children: _jsxs(DrawerContent, { className: "w-[100vw] md:max-w-[50vw]", children: [_jsx(DrawerHeader, { className: "border-b border-default-200", children: headerTitle }), _jsx(DrawerBody, { className: "px-4 py-3", children: _jsx(DynamicViewer, { schema: schema, data: data }) }), _jsx(DrawerFooter, { className: "border-t border-default-200", children: _jsx(Button, { variant: "flat", onPress: close, children: "Close" }) })] }) }));
+    }, [state, close]);
+    return { open, close, ViewDrawerPortal };
+}