@object-ui/plugin-detail 3.0.2 → 3.1.0

package/src/DetailSection.tsx

@@ -25,21 +25,34 @@ import {
 } from '@object-ui/components';
 import { ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
 import { SchemaRenderer } from '@object-ui/react';
-import type { DetailViewSection as DetailViewSectionType } from '@object-ui/types';
+import { getCellRenderer } from '@object-ui/fields';
+import type { DetailViewSection as DetailViewSectionType, DetailViewField, FieldMetadata } from '@object-ui/types';
+import { applyDetailAutoLayout } from './autoLayout';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface DetailSectionProps {
   section: DetailViewSectionType;
   data?: any;
   className?: string;
+  /** Object schema from DataSource for field type enrichment */
+  objectSchema?: any;
+  /** Whether inline editing is active */
+  isEditing?: boolean;
+  /** Callback when a field value changes during inline editing */
+  onFieldChange?: (field: string, value: any) => void;
 }
 
 export const DetailSection: React.FC<DetailSectionProps> = ({
   section,
   data,
   className,
+  objectSchema,
+  isEditing = false,
+  onFieldChange,
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
   const [copiedField, setCopiedField] = React.useState<string | null>(null);
+  const { t } = useDetailTranslation();
 
   const handleCopyField = React.useCallback((fieldName: string, value: any) => {
     const textValue = value !== null && value !== undefined ? String(value) : '';
@@ -49,7 +62,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     });
   }, []);
 
-  const renderField = (field: any) => {
+  const renderField = (field: DetailViewField) => {
     const value = data?.[field.name] ?? field.value;
     
     // If custom renderer provided
@@ -65,7 +78,31 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
                       field.span === 5 ? 'col-span-5' :
                       field.span === 6 ? 'col-span-6' : '';
 
-    const displayValue = value !== null && value !== undefined ? String(value) : '-';
+    const displayValue = (() => {
+      if (value === null || value === undefined) return <span className="text-muted-foreground/50 text-xs italic">—</span>;
+      // Enrich field with objectSchema metadata — merge missing properties
+      // even when field.type is explicitly set (e.g., type: 'lookup' without reference_to)
+      const objectDefField = objectSchema?.fields?.[field.name];
+      const resolvedType = field.type || objectDefField?.type;
+      const enrichedField: Record<string, any> = { ...field };
+      if (objectDefField) {
+        if (!field.type && objectDefField.type) enrichedField.type = objectDefField.type;
+        if (objectDefField.options && !enrichedField.options) enrichedField.options = objectDefField.options;
+        if (objectDefField.currency && !enrichedField.currency) enrichedField.currency = objectDefField.currency;
+        if (objectDefField.precision !== undefined && enrichedField.precision === undefined) enrichedField.precision = objectDefField.precision;
+        if (objectDefField.format && !enrichedField.format) enrichedField.format = objectDefField.format;
+        if (objectDefField.reference_to && !enrichedField.reference_to) enrichedField.reference_to = objectDefField.reference_to;
+        if (objectDefField.reference_field && !enrichedField.reference_field) enrichedField.reference_field = objectDefField.reference_field;
+      }
+      // Use type-aware cell renderer when field type is available (explicit or enriched)
+      if (resolvedType) {
+        const CellRenderer = getCellRenderer(resolvedType);
+        if (CellRenderer) {
+          return <CellRenderer value={value} field={enrichedField as unknown as FieldMetadata} />;
+        }
+      }
+      return String(value);
+    })();
     const canCopy = value !== null && value !== undefined && value !== '';
     const isCopied = copiedField === field.name;
 
@@ -75,6 +112,16 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
         <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           {field.label || field.name}
         </div>
+        {isEditing && !field.readonly ? (
+          <div className="min-h-[44px] sm:min-h-0">
+            <input
+              type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
+              className="w-full px-2 py-1.5 text-sm border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+              value={value != null ? String(value) : ''}
+              onChange={(e) => onFieldChange?.(field.name, e.target.value)}
+            />
+          </div>
+        ) : (
         <div
           className={cn(
             "flex items-start justify-between gap-2 min-h-[44px] sm:min-h-0 rounded-md",
@@ -114,27 +161,45 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  {isCopied ? 'Copied!' : 'Copy to clipboard'}
+                  {isCopied ? t('detail.copied') : t('detail.copyToClipboard')}
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
           )}
         </div>
+        )}
       </div>
     );
   };
 
+  // Filter out empty fields when hideEmpty is set
+  const visibleFields = section.hideEmpty
+    ? section.fields.filter((field) => {
+        const value = data?.[field.name] ?? field.value;
+        return value !== null && value !== undefined && value !== '';
+      })
+    : section.fields;
+
+  // Hide entire section when all fields are empty
+  if (visibleFields.length === 0) return null;
+
+  // Apply auto-layout: infer columns and auto-span wide fields
+  const { fields: layoutFields, columns: effectiveColumns } = applyDetailAutoLayout(
+    visibleFields,
+    section.columns
+  );
+
   const content = (
     <div 
       className={cn(
         "grid gap-3 sm:gap-4",
-        section.columns === 1 ? "grid-cols-1" :
-        section.columns === 2 ? "grid-cols-1 sm:grid-cols-2" :
-        section.columns === 3 ? "grid-cols-1 sm:grid-cols-2 md:grid-cols-3" :
-        "grid-cols-1 sm:grid-cols-2 md:grid-cols-3"
+        effectiveColumns === 1 ? "grid-cols-1" :
+        effectiveColumns === 2 ? "grid-cols-1 md:grid-cols-2" :
+        effectiveColumns === 3 ? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3" :
+        "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       )}
     >
-      {section.fields.map(renderField)}
+      {layoutFields.map(renderField)}
     </div>
   );
 

package/src/DetailView.stories.tsx

@@ -256,3 +256,79 @@ export const WithFieldCounts: Story = {
     ],
   } as any,
 };
+
+/**
+ * Primary Field + Summary Badges — record name as header, key attributes as badges
+ */
+export const PrimaryFieldWithBadges: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Contact',
+    primaryField: 'name',
+    summaryFields: ['status', 'department'],
+    objectName: 'Contact',
+    resourceId: 'CNT-042',
+    showBack: true,
+    showEdit: true,
+    data: {
+      name: 'Sarah Johnson',
+      email: 'sarah@example.com',
+      phone: '+1 (555) 123-4567',
+      status: 'Active',
+      department: 'Engineering',
+      title: 'Senior Engineer',
+    },
+    fields: [
+      { name: 'email', label: 'Email' },
+      { name: 'phone', label: 'Phone' },
+      { name: 'title', label: 'Job Title' },
+      { name: 'status', label: 'Status' },
+      { name: 'department', label: 'Department' },
+    ],
+  } as any,
+};
+
+/**
+ * Hide Empty Fields — sections with hideEmpty filter out null/undefined/empty fields
+ */
+export const HideEmptyFields: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Contact',
+    primaryField: 'name',
+    showBack: true,
+    data: {
+      name: 'Mike Ross',
+      email: 'mike@techcorp.io',
+      phone: null,
+      department: '',
+      title: 'VP Engineering',
+      website: undefined,
+      linkedin: 'linkedin.com/in/mikeross',
+    },
+    sections: [
+      {
+        title: 'Contact Info',
+        hideEmpty: true,
+        fields: [
+          { name: 'email', label: 'Email' },
+          { name: 'phone', label: 'Phone' },
+          { name: 'title', label: 'Job Title' },
+          { name: 'department', label: 'Department' },
+          { name: 'website', label: 'Website' },
+          { name: 'linkedin', label: 'LinkedIn' },
+        ],
+      },
+      {
+        title: 'Empty Section (hidden)',
+        hideEmpty: true,
+        fields: [
+          { name: 'fax', label: 'Fax' },
+          { name: 'pager', label: 'Pager' },
+        ],
+      },
+    ],
+  } as any,
+};