@object-ui/plugin-detail 3.3.0 → 3.3.1

package/src/RelatedList.tsx

@@ -1,413 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  Badge,
-  Button,
-  Input,
-} from '@object-ui/components';
-import { SchemaRenderer } from '@object-ui/react';
-import {
-  Plus,
-  ExternalLink,
-  Edit,
-  Trash2,
-  ChevronLeft,
-  ChevronRight,
-  ArrowUpDown,
-  ChevronDown,
-} from 'lucide-react';
-import type { DataSource, FieldMetadata } from '@object-ui/types';
-import { getCellRenderer } from '@object-ui/fields';
-import { useDetailTranslation } from './useDetailTranslation';
-import { useSafeFieldLabel } from '@object-ui/react';
-
-export interface RelatedListProps {
-  title: string;
-  type: 'list' | 'grid' | 'table';
-  api?: string;
-  data?: any[];
-  schema?: any;
-  columns?: any[];
-  className?: string;
-  dataSource?: DataSource;
-  /** Object name for i18n field label resolution */
-  objectName?: string;
-  /** Callback when "New" button is clicked */
-  onNew?: () => void;
-  /** Callback when "View All" button is clicked */
-  onViewAll?: () => void;
-  /** Callback when a row Edit action is clicked */
-  onRowEdit?: (row: any) => void;
-  /** Callback when a row Delete action is clicked */
-  onRowDelete?: (row: any) => void;
-  /** Page size for pagination (enables pagination when set) */
-  pageSize?: number;
-  /** Enable column sorting */
-  sortable?: boolean;
-  /** Enable text filtering */
-  filterable?: boolean;
-  /** Whether the card is collapsible */
-  collapsible?: boolean;
-  /** Whether the card starts collapsed (requires collapsible=true) */
-  defaultCollapsed?: boolean;
-}
-
-export const RelatedList: React.FC<RelatedListProps> = ({
-  title,
-  type,
-  api,
-  data = [],
-  schema,
-  columns,
-  className,
-  dataSource,
-  objectName,
-  onNew,
-  onViewAll,
-  onRowEdit,
-  onRowDelete,
-  pageSize,
-  sortable = false,
-  filterable = false,
-  collapsible = false,
-  defaultCollapsed = false,
-}) => {
-  const [relatedData, setRelatedData] = React.useState(data);
-  const [loading, setLoading] = React.useState(false);
-  const [currentPage, setCurrentPage] = React.useState(0);
-  const [sortField, setSortField] = React.useState<string | null>(null);
-  const [sortDirection, setSortDirection] = React.useState<'asc' | 'desc'>('asc');
-  const [filterText, setFilterText] = React.useState('');
-  const [objectSchema, setObjectSchema] = React.useState<any>(null);
-  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
-  const { t } = useDetailTranslation();
-  const { fieldLabel: resolveFieldLabel } = useSafeFieldLabel();
-
-  // Sync internal state when data prop changes (e.g., parent fetches async data)
-  React.useEffect(() => {
-    setRelatedData(data);
-  }, [data]);
-
-  // Auto-fetch object schema when api/dataSource available but columns missing
-  React.useEffect(() => {
-    if (api && dataSource?.getObjectSchema && !columns?.length) {
-      dataSource.getObjectSchema(api).then(setObjectSchema).catch((err: unknown) => {
-        console.warn(`[RelatedList] Failed to fetch schema for ${api}:`, err);
-      });
-    }
-  }, [api, dataSource, columns]);
-
-  React.useEffect(() => {
-    if (api && !data.length) {
-      setLoading(true);
-      if (dataSource && typeof dataSource.find === 'function') {
-        dataSource.find(api).then((result) => {
-          const items = Array.isArray(result)
-            ? result
-            : Array.isArray((result as any)?.data)
-              ? (result as any).data
-              : [];
-          setRelatedData(items);
-          setLoading(false);
-        }).catch((err) => {
-          console.error('Failed to fetch related data:', err);
-          setLoading(false);
-        });
-      } else {
-        fetch(api)
-          .then(res => res.json())
-          .then(result => {
-            const items = Array.isArray(result) ? result : (result?.data || []);
-            setRelatedData(items);
-          })
-          .catch(err => {
-            console.error('Failed to fetch related data:', err);
-          })
-          .finally(() => setLoading(false));
-      }
-    }
-  }, [api, data, dataSource]);
-
-  // Filter data
-  const filteredData = React.useMemo(() => {
-    if (!filterText) return relatedData;
-    const lower = filterText.toLowerCase();
-    return relatedData.filter((row) =>
-      Object.values(row).some((val) =>
-        val !== null && val !== undefined && String(val).toLowerCase().includes(lower)
-      )
-    );
-  }, [relatedData, filterText]);
-
-  // Sort data
-  const sortedData = React.useMemo(() => {
-    if (!sortField) return filteredData;
-    return [...filteredData].sort((a, b) => {
-      const aVal = a[sortField];
-      const bVal = b[sortField];
-      if (aVal == null && bVal == null) return 0;
-      if (aVal == null) return 1;
-      if (bVal == null) return -1;
-      const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
-      return sortDirection === 'asc' ? cmp : -cmp;
-    });
-  }, [filteredData, sortField, sortDirection]);
-
-  // Paginate data
-  const effectivePageSize = pageSize && pageSize > 0 ? pageSize : 0;
-  const totalPages = effectivePageSize ? Math.max(1, Math.ceil(sortedData.length / effectivePageSize)) : 1;
-  const paginatedData = effectivePageSize
-    ? sortedData.slice(currentPage * effectivePageSize, (currentPage + 1) * effectivePageSize)
-    : sortedData;
-
-  // Reset to first page when filter/sort changes
-  React.useEffect(() => {
-    setCurrentPage(0);
-  }, [filterText, sortField, sortDirection]);
-
-  const handleSort = React.useCallback((field: string) => {
-    if (sortField === field) {
-      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
-    } else {
-      setSortField(field);
-      setSortDirection('asc');
-    }
-  }, [sortField]);
-
-  const handleDeleteRow = React.useCallback((row: any) => {
-    if (window.confirm(t('detail.deleteRowConfirmation'))) {
-      onRowDelete?.(row);
-    }
-  }, [onRowDelete, t]);
-
-  // Generate effective columns from explicit prop or object schema fields
-  const effectiveColumns = React.useMemo(() => {
-    if (columns && columns.length > 0) return columns;
-    if (!objectSchema?.fields) return [];
-    const resolvedObjectName = objectName || api || '';
-    return Object.entries(objectSchema.fields)
-      .filter(([key]) => !key.startsWith('_') && key !== 'id')
-      .map(([key, def]: [string, any]) => {
-        const col: any = {
-          accessorKey: key,
-          header: resolveFieldLabel(resolvedObjectName, key, def.label || key),
-        };
-        // Add type-aware cell renderer for typed fields
-        if (def.type) {
-          const CellRenderer = getCellRenderer(def.type);
-          if (CellRenderer) {
-            const fieldMeta: FieldMetadata = {
-              name: key,
-              label: def.label || key,
-              type: def.type,
-              ...(def.options && { options: def.options }),
-              ...(def.currency && { currency: def.currency }),
-              ...(def.precision !== undefined && { precision: def.precision }),
-              ...(def.format && { format: def.format }),
-              ...((def.reference_to || def.reference) && { reference_to: def.reference_to || def.reference }),
-              ...(def.reference_field && { reference_field: def.reference_field }),
-            };
-            col.cell = (value: any) => {
-              if (value === null || value === undefined) {
-                return React.createElement('span', { className: 'text-muted-foreground/50 text-xs italic' }, '—');
-              }
-              return React.createElement(CellRenderer, { value, field: fieldMeta });
-            };
-          }
-        }
-        return col;
-      });
-  }, [columns, objectSchema, objectName, api, resolveFieldLabel]);
-
-  const viewSchema = React.useMemo(() => {
-    if (schema) return schema;
-
-    // Auto-generate schema based on type
-    switch (type) {
-      case 'grid':
-      case 'table':
-        return {
-          type: 'data-table',
-          data: paginatedData,
-          columns: effectiveColumns,
-          pagination: false, // We handle pagination ourselves
-          pageSize: effectivePageSize || 10,
-        };
-      case 'list':
-        return {
-          type: 'data-list',
-          data: paginatedData,
-        };
-      default:
-        return { type: 'div', children: 'No view configured' };
-    }
-  }, [type, paginatedData, effectiveColumns, schema, effectivePageSize]);
-
-  const hasRowActions = !!onRowEdit || !!onRowDelete;
-
-  const headerClassName = collapsible ? 'cursor-pointer select-none' : undefined;
-  const handleHeaderClick = collapsible ? () => setCollapsed((c) => !c) : undefined;
-
-  return (
-    <Card className={className}>
-      <CardHeader className={headerClassName} onClick={handleHeaderClick}>
-        <CardTitle className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            {collapsible && (
-              collapsed
-                ? (<ChevronRight className="h-4 w-4 text-muted-foreground" />)
-                : (<ChevronDown className="h-4 w-4 text-muted-foreground" />)
-            )}
-            <span>{title}</span>
-            <Badge variant="secondary" className="text-xs font-normal" aria-label={`${relatedData.length} records`}>
-              {relatedData.length}
-            </Badge>
-          </div>
-          <div className="flex items-center gap-1">
-            {onNew && (
-              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onNew(); }} className="gap-1 h-7 text-xs">
-                <Plus className="h-3.5 w-3.5" />
-                {t('detail.new')}
-              </Button>
-            )}
-            {onViewAll && (
-              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onViewAll(); }} className="gap-1 h-7 text-xs">
-                {t('detail.viewAll')}
-                <ExternalLink className="h-3 w-3" />
-              </Button>
-            )}
-          </div>
-        </CardTitle>
-      </CardHeader>
-      {!collapsed && <CardContent>
-        {/* Filter bar */}
-        {filterable && relatedData.length > 0 && (
-          <div className="mb-3">
-            <Input
-              placeholder={t('detail.filterPlaceholder')}
-              value={filterText}
-              onChange={(e) => setFilterText(e.target.value)}
-              className="h-8 text-sm"
-            />
-          </div>
-        )}
-
-        {/* Sortable column headers */}
-        {sortable && effectiveColumns && effectiveColumns.length > 0 && relatedData.length > 0 && (
-          <div className="flex flex-wrap gap-1 mb-3">
-            {effectiveColumns.map((col: any) => {
-              const field = col.accessorKey || col.field || col.name;
-              if (!field) return null;
-              const label = col.header || col.label || field;
-              const isActive = sortField === field;
-              return (
-                <Button
-                  key={field}
-                  variant={isActive ? 'secondary' : 'ghost'}
-                  size="sm"
-                  className="gap-1 h-7 text-xs"
-                  onClick={() => handleSort(field)}
-                >
-                  <ArrowUpDown className="h-3 w-3" />
-                  {label}
-                  {isActive && (sortDirection === 'asc' ? ' ↑' : ' ↓')}
-                </Button>
-              );
-            })}
-          </div>
-        )}
-
-        {loading ? (
-          <div className="flex items-center justify-center py-8 text-muted-foreground">
-            {t('detail.loading')}
-          </div>
-        ) : relatedData.length === 0 ? (
-          <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
-            {t('detail.noRelatedRecords')}
-          </div>
-        ) : (
-          <>
-            <SchemaRenderer schema={viewSchema} />
-
-            {/* Row-level actions (rendered as a simple action list below data) */}
-            {hasRowActions && paginatedData.length > 0 && (
-              <div className="mt-2 space-y-1" data-testid="row-actions">
-                {paginatedData.map((row, idx) => (
-                  <div key={row.id || idx} className="flex items-center justify-between px-2 py-1 text-xs border-b last:border-b-0">
-                    <span className="truncate text-muted-foreground">
-                      {row.name || row.title || row.id || `Row ${idx + 1}`}
-                    </span>
-                    <div className="flex items-center gap-1">
-                      {onRowEdit && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 text-xs gap-1 px-2"
-                          onClick={() => onRowEdit(row)}
-                        >
-                          <Edit className="h-3 w-3" />
-                          {t('detail.editRow')}
-                        </Button>
-                      )}
-                      {onRowDelete && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 text-xs gap-1 px-2 text-destructive hover:text-destructive"
-                          onClick={() => handleDeleteRow(row)}
-                        >
-                          <Trash2 className="h-3 w-3" />
-                          {t('detail.deleteRow')}
-                        </Button>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </>
-        )}
-
-        {/* Pagination controls */}
-        {effectivePageSize > 0 && sortedData.length > effectivePageSize && (
-          <div className="flex items-center justify-between mt-3 pt-3 border-t">
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-7 text-xs gap-1"
-              disabled={currentPage === 0}
-              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
-            >
-              <ChevronLeft className="h-3 w-3" />
-              {t('detail.previousPage')}
-            </Button>
-            <span className="text-xs text-muted-foreground">
-              {t('detail.pageOf', { current: currentPage + 1, total: totalPages })}
-            </span>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-7 text-xs gap-1"
-              disabled={currentPage >= totalPages - 1}
-              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
-            >
-              {t('detail.nextPage')}
-              <ChevronRight className="h-3 w-3" />
-            </Button>
-          </div>
-        )}
-      </CardContent>}
-    </Card>
-  );
-};

package/src/RelationshipGraph.tsx

@@ -1,286 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
-import { Network } from 'lucide-react';
-
-export interface GraphNode {
-  id: string;
-  label: string;
-  type?: string;
-  relatedRecords?: GraphNode[];
-}
-
-export interface RelationshipGraphProps {
-  record: GraphNode;
-  relatedRecords: GraphNode[];
-  levels?: number;
-  onNodeClick?: (nodeId: string) => void;
-  className?: string;
-}
-
-interface LayoutNode {
-  id: string;
-  label: string;
-  type?: string;
-  x: number;
-  y: number;
-  level: number;
-}
-
-interface LayoutEdge {
-  fromId: string;
-  toId: string;
-  fromX: number;
-  fromY: number;
-  toX: number;
-  toY: number;
-}
-
-const NODE_RADIUS = 28;
-const LEVEL_COLORS = [
-  'fill-primary stroke-primary',
-  'fill-blue-500 stroke-blue-500',
-  'fill-emerald-500 stroke-emerald-500',
-  'fill-amber-500 stroke-amber-500',
-];
-const LEVEL_TEXT_COLORS = [
-  'fill-primary-foreground',
-  'fill-white',
-  'fill-white',
-  'fill-white',
-];
-
-/** Compute layout positions for nodes in concentric rings. */
-function computeLayout(
-  center: GraphNode,
-  relatedRecords: GraphNode[],
-  levels: number,
-  width: number,
-  height: number,
-): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
-  const nodes: LayoutNode[] = [];
-  const edges: LayoutEdge[] = [];
-  const seen = new Set<string>();
-
-  const cx = width / 2;
-  const cy = height / 2;
-
-  // Center node
-  nodes.push({ id: center.id, label: center.label, type: center.type, x: cx, y: cy, level: 0 });
-  seen.add(center.id);
-
-  // Level 1: direct relations
-  const ringRadius1 = Math.min(width, height) * 0.32;
-  const level1Nodes = relatedRecords.filter((r) => !seen.has(r.id));
-
-  level1Nodes.forEach((node, i) => {
-    const angle = (2 * Math.PI * i) / level1Nodes.length - Math.PI / 2;
-    const x = cx + ringRadius1 * Math.cos(angle);
-    const y = cy + ringRadius1 * Math.sin(angle);
-    nodes.push({ id: node.id, label: node.label, type: node.type, x, y, level: 1 });
-    edges.push({ fromId: center.id, toId: node.id, fromX: cx, fromY: cy, toX: x, toY: y });
-    seen.add(node.id);
-  });
-
-  // Level 2+: related records of related records
-  if (levels >= 2) {
-    const ringRadius2 = Math.min(width, height) * 0.46;
-    const level2Nodes: { node: GraphNode; parentX: number; parentY: number; parentId: string }[] = [];
-
-    level1Nodes.forEach((parentNode) => {
-      const parentLayoutNode = nodes.find((n) => n.id === parentNode.id);
-      if (!parentLayoutNode) return;
-      const children = (parentNode.relatedRecords || []).filter((r) => !seen.has(r.id));
-      children.forEach((child) => {
-        level2Nodes.push({
-          node: child,
-          parentX: parentLayoutNode.x,
-          parentY: parentLayoutNode.y,
-          parentId: parentNode.id,
-        });
-        seen.add(child.id);
-      });
-    });
-
-    level2Nodes.forEach((item, i) => {
-      const angle = (2 * Math.PI * i) / Math.max(level2Nodes.length, 1) - Math.PI / 2;
-      const x = cx + ringRadius2 * Math.cos(angle);
-      const y = cy + ringRadius2 * Math.sin(angle);
-      nodes.push({
-        id: item.node.id,
-        label: item.node.label,
-        type: item.node.type,
-        x,
-        y,
-        level: 2,
-      });
-      edges.push({
-        fromId: item.parentId,
-        toId: item.node.id,
-        fromX: item.parentX,
-        fromY: item.parentY,
-        toX: x,
-        toY: y,
-      });
-    });
-  }
-
-  return { nodes, edges };
-}
-
-/** Truncate label to fit inside a node circle. */
-function truncateLabel(label: string, maxLen: number = 6): string {
-  if (label.length <= maxLen) return label;
-  return label.slice(0, maxLen - 1) + '…';
-}
-
-export const RelationshipGraph: React.FC<RelationshipGraphProps> = ({
-  record,
-  relatedRecords,
-  levels = 1,
-  onNodeClick,
-  className,
-}) => {
-  const svgRef = React.useRef<SVGSVGElement>(null);
-  const [dimensions, setDimensions] = React.useState({ width: 500, height: 400 });
-  const [hoveredNode, setHoveredNode] = React.useState<string | null>(null);
-
-  // Observe container size
-  React.useEffect(() => {
-    const svg = svgRef.current;
-    if (!svg) return;
-    const parent = svg.parentElement;
-    if (!parent) return;
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width } = entry.contentRect;
-        if (width > 0) {
-          setDimensions({ width, height: Math.max(300, width * 0.7) });
-        }
-      }
-    });
-    observer.observe(parent);
-    return () => observer.disconnect();
-  }, []);
-
-  const { nodes, edges } = React.useMemo(
-    () => computeLayout(record, relatedRecords, levels, dimensions.width, dimensions.height),
-    [record, relatedRecords, levels, dimensions],
-  );
-
-  return (
-    <Card className={cn('overflow-hidden', className)}>
-      <CardHeader className="pb-2">
-        <CardTitle className="flex items-center gap-2 text-base">
-          <Network className="h-4 w-4" />
-          Relationships
-          <span className="text-sm font-normal text-muted-foreground">
-            ({relatedRecords.length} related)
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="p-0">
-        <svg
-          ref={svgRef}
-          width="100%"
-          height={dimensions.height}
-          viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
-          className="select-none"
-        >
-          {/* Edges */}
-          {edges.map((edge, i) => (
-            <line
-              key={`edge-${i}`}
-              x1={edge.fromX}
-              y1={edge.fromY}
-              x2={edge.toX}
-              y2={edge.toY}
-              className="stroke-border"
-              strokeWidth={1.5}
-              strokeOpacity={0.5}
-            />
-          ))}
-
-          {/* Nodes */}
-          {nodes.map((node) => {
-            const isHovered = hoveredNode === node.id;
-            const levelColor = LEVEL_COLORS[Math.min(node.level, LEVEL_COLORS.length - 1)];
-            const textColor = LEVEL_TEXT_COLORS[Math.min(node.level, LEVEL_TEXT_COLORS.length - 1)];
-            const radius = node.level === 0 ? NODE_RADIUS + 6 : NODE_RADIUS;
-
-            return (
-              <g
-                key={node.id}
-                className={cn('cursor-pointer transition-transform', onNodeClick && 'hover:opacity-80')}
-                onClick={() => onNodeClick?.(node.id)}
-                onMouseEnter={() => setHoveredNode(node.id)}
-                onMouseLeave={() => setHoveredNode(null)}
-              >
-                <circle
-                  cx={node.x}
-                  cy={node.y}
-                  r={isHovered ? radius + 3 : radius}
-                  className={levelColor}
-                  fillOpacity={node.level === 0 ? 1 : 0.85}
-                  strokeWidth={2}
-                  strokeOpacity={0.3}
-                />
-                <text
-                  x={node.x}
-                  y={node.y}
-                  textAnchor="middle"
-                  dominantBaseline="central"
-                  className={cn('text-[10px] font-medium pointer-events-none', textColor)}
-                >
-                  {truncateLabel(node.label)}
-                </text>
-                {/* Type label below */}
-                {node.type && (
-                  <text
-                    x={node.x}
-                    y={node.y + radius + 12}
-                    textAnchor="middle"
-                    className="fill-muted-foreground text-[9px] pointer-events-none"
-                  >
-                    {node.type}
-                  </text>
-                )}
-                {/* Tooltip on hover */}
-                {isHovered && (
-                  <>
-                    <rect
-                      x={node.x - 50}
-                      y={node.y - radius - 28}
-                      width={100}
-                      height={20}
-                      rx={4}
-                      className="fill-popover stroke-border"
-                      strokeWidth={1}
-                    />
-                    <text
-                      x={node.x}
-                      y={node.y - radius - 16}
-                      textAnchor="middle"
-                      dominantBaseline="central"
-                      className="fill-popover-foreground text-[10px] pointer-events-none"
-                    >
-                      {node.label}
-                    </text>
-                  </>
-                )}
-              </g>
-            );
-          })}
-        </svg>
-      </CardContent>
-    </Card>
-  );
-};