@object-ui/plugin-detail 3.1.0 → 3.1.1

package/src/HeaderHighlight.tsx

@@ -0,0 +1,67 @@
+/**
+ * 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, CardContent } from '@object-ui/components';
+import type { HighlightField } from '@object-ui/types';
+import { useSafeFieldLabel } from '@object-ui/react';
+
+export interface HeaderHighlightProps {
+  fields: HighlightField[];
+  data?: any;
+  className?: string;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
+}
+
+export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
+  fields,
+  data,
+  className,
+  objectName,
+}) => {
+  const { fieldLabel } = useSafeFieldLabel();
+  if (!fields.length || !data) return null;
+
+  // Filter to only fields with values
+  const visibleFields = fields.filter((f) => {
+    const val = data?.[f.name];
+    return val !== null && val !== undefined && val !== '';
+  });
+
+  if (visibleFields.length === 0) return null;
+
+  return (
+    <Card className={cn('bg-muted/30 border-dashed', className)}>
+      <CardContent className="py-3 px-4">
+        <div className={cn(
+          'grid gap-4',
+          visibleFields.length === 1 ? 'grid-cols-1' :
+          visibleFields.length === 2 ? 'grid-cols-2' :
+          visibleFields.length === 3 ? 'grid-cols-3' :
+          'grid-cols-2 md:grid-cols-4'
+        )}>
+          {visibleFields.map((field) => {
+            const value = data[field.name];
+            return (
+              <div key={field.name} className="flex flex-col gap-0.5">
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                  {field.icon && <span className="mr-1">{field.icon}</span>}
+                  {fieldLabel(objectName || '', field.name, field.label)}
+                </span>
+                <span className="text-sm font-semibold truncate">
+                  {String(value)}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/src/RelatedList.tsx

@@ -7,11 +7,30 @@
  */
 
 import * as React from 'react';
-import { Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+  Button,
+  Input,
+} from '@object-ui/components';
 import { SchemaRenderer } from '@object-ui/react';
-import { Plus, ExternalLink } from 'lucide-react';
-import type { DataSource } from '@object-ui/types';
+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;
@@ -22,10 +41,26 @@ export interface RelatedListProps {
   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> = ({
@@ -37,12 +72,41 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   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) {
@@ -75,6 +139,97 @@ export const RelatedList: React.FC<RelatedListProps> = ({
     }
   }, [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('_'))
+      .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;
 
@@ -84,44 +239,50 @@ export const RelatedList: React.FC<RelatedListProps> = ({
       case 'table':
         return {
           type: 'data-table',
-          data: relatedData,
-          columns: columns || [],
-          pagination: relatedData.length > 10,
-          pageSize: 10,
+          data: paginatedData,
+          columns: effectiveColumns,
+          pagination: false, // We handle pagination ourselves
+          pageSize: effectivePageSize || 10,
         };
       case 'list':
         return {
           type: 'data-list',
-          data: relatedData,
+          data: paginatedData,
         };
       default:
         return { type: 'div', children: 'No view configured' };
     }
-  }, [type, relatedData, columns, schema]);
+  }, [type, paginatedData, effectiveColumns, schema, effectivePageSize]);
 
-  const recordCountText = relatedData.length === 1
-    ? t('detail.relatedRecordOne', { count: relatedData.length })
-    : t('detail.relatedRecords', { count: relatedData.length });
+  const hasRowActions = !!onRowEdit || !!onRowDelete;
+
+  const headerClassName = collapsible ? 'cursor-pointer select-none' : undefined;
+  const handleHeaderClick = collapsible ? () => setCollapsed((c) => !c) : undefined;
 
   return (
     <Card className={className}>
-      <CardHeader>
+      <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>
-            <span className="text-sm font-normal text-muted-foreground">
-              {recordCountText}
-            </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={onNew} className="gap-1 h-7 text-xs">
+              <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={onViewAll} className="gap-1 h-7 text-xs">
+              <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>
@@ -129,7 +290,44 @@ export const RelatedList: React.FC<RelatedListProps> = ({
           </div>
         </CardTitle>
       </CardHeader>
-      <CardContent>
+      {!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')}
@@ -139,9 +337,77 @@ export const RelatedList: React.FC<RelatedListProps> = ({
             {t('detail.noRelatedRecords')}
           </div>
         ) : (
-          <SchemaRenderer schema={viewSchema} />
+          <>
+            <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>
+      </CardContent>}
     </Card>
   );
 };

package/src/SectionGroup.tsx

@@ -0,0 +1,101 @@
+/**
+ * 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,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from '@object-ui/components';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { DetailSection } from './DetailSection';
+import type { SectionGroup as SectionGroupType } from '@object-ui/types';
+
+export interface SectionGroupProps {
+  group: SectionGroupType;
+  data?: any;
+  className?: string;
+  objectSchema?: any;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
+  isEditing?: boolean;
+  onFieldChange?: (field: string, value: any) => void;
+}
+
+export const SectionGroup: React.FC<SectionGroupProps> = ({
+  group,
+  data,
+  className,
+  objectSchema,
+  objectName,
+  isEditing = false,
+  onFieldChange,
+}) => {
+  const collapsible = group.collapsible ?? true;
+  const [isCollapsed, setIsCollapsed] = React.useState(group.defaultCollapsed ?? false);
+
+  const sectionsContent = (
+    <div className="space-y-3 sm:space-y-4">
+      {group.sections.map((section, index) => (
+        <DetailSection
+          key={index}
+          section={section}
+          data={data}
+          objectSchema={objectSchema}
+          objectName={objectName}
+          isEditing={isEditing}
+          onFieldChange={onFieldChange}
+        />
+      ))}
+    </div>
+  );
+
+  if (!collapsible) {
+    return (
+      <div className={cn('space-y-3', className)}>
+        <div className="flex items-center gap-2 pb-2 border-b">
+          {group.icon && <span className="text-muted-foreground">{group.icon}</span>}
+          <h3 className="text-lg font-semibold">{group.title}</h3>
+        </div>
+        {group.description && (
+          <p className="text-sm text-muted-foreground">{group.description}</p>
+        )}
+        {sectionsContent}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible
+      open={!isCollapsed}
+      onOpenChange={(open) => setIsCollapsed(!open)}
+      className={className}
+    >
+      <CollapsibleTrigger asChild>
+        <div className="flex items-center gap-2 pb-2 border-b cursor-pointer hover:bg-muted/50 transition-colors rounded-t-md px-2 py-1.5">
+          {isCollapsed ? (
+            <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
+          ) : (
+            <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
+          )}
+          {group.icon && <span className="text-muted-foreground">{group.icon}</span>}
+          <h3 className="text-lg font-semibold">{group.title}</h3>
+        </div>
+      </CollapsibleTrigger>
+      {group.description && !isCollapsed && (
+        <p className="text-sm text-muted-foreground mt-1">{group.description}</p>
+      )}
+      <CollapsibleContent>
+        <div className="mt-3">
+          {sectionsContent}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

package/src/__tests__/DetailSection.test.tsx

@@ -112,7 +112,7 @@ describe('DetailSection', () => {
     const { container } = render(
       <DetailSection section={section} data={{}} />
     );
-    // The grid container should have the sm:grid-cols-2 class
+    // The grid container should have the md:grid-cols-2 class
     const grid = container.querySelector('.grid');
     expect(grid).toBeTruthy();
     expect(grid!.className).toContain('md:grid-cols-2');

package/src/__tests__/HeaderHighlight.test.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { HeaderHighlight } from '../HeaderHighlight';
+import type { HighlightField } from '@object-ui/types';
+
+describe('HeaderHighlight', () => {
+  const fields: HighlightField[] = [
+    { name: 'revenue', label: 'Annual Revenue' },
+    { name: 'employees', label: 'Employees' },
+    { name: 'industry', label: 'Industry' },
+  ];
+
+  const data = {
+    revenue: '$5M',
+    employees: 150,
+    industry: 'Technology',
+  };
+
+  it('should render highlight fields with labels and values', () => {
+    render(<HeaderHighlight fields={fields} data={data} />);
+    expect(screen.getByText('Annual Revenue')).toBeInTheDocument();
+    expect(screen.getByText('$5M')).toBeInTheDocument();
+    expect(screen.getByText('Employees')).toBeInTheDocument();
+    expect(screen.getByText('150')).toBeInTheDocument();
+    expect(screen.getByText('Industry')).toBeInTheDocument();
+    expect(screen.getByText('Technology')).toBeInTheDocument();
+  });
+
+  it('should not render when no data is provided', () => {
+    const { container } = render(<HeaderHighlight fields={fields} />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should not render when fields array is empty', () => {
+    const { container } = render(<HeaderHighlight fields={[]} data={data} />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should hide fields with null or empty values', () => {
+    const sparseData = { revenue: '$5M', employees: null, industry: '' };
+    render(<HeaderHighlight fields={fields} data={sparseData} />);
+    expect(screen.getByText('$5M')).toBeInTheDocument();
+    expect(screen.queryByText('Employees')).not.toBeInTheDocument();
+    expect(screen.queryByText('Industry')).not.toBeInTheDocument();
+  });
+
+  it('should not render when all field values are empty', () => {
+    const emptyData = { revenue: null, employees: undefined, industry: '' };
+    const { container } = render(<HeaderHighlight fields={fields} data={emptyData} />);
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('should render icon when provided', () => {
+    const fieldsWithIcon: HighlightField[] = [
+      { name: 'revenue', label: 'Revenue', icon: '💰' },
+    ];
+    render(<HeaderHighlight fields={fieldsWithIcon} data={{ revenue: '$5M' }} />);
+    expect(screen.getByText('💰')).toBeInTheDocument();
+  });
+});