@object-ui/plugin-detail 3.1.5 → 3.3.1

package/src/DetailSection.tsx

@@ -1,340 +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, 
-  Collapsible, 
-  CollapsibleTrigger, 
-  CollapsibleContent,
-  Badge,
-  Button,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@object-ui/components';
-import { ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
-import { SchemaRenderer } from '@object-ui/react';
-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';
-import { useSafeFieldLabel } from '@object-ui/react';
-
-/**
- * Compute responsive col-span classes so that col-span never exceeds the
- * visible column count at each Tailwind breakpoint.
- *
- * For columns=1: no span class (always single column)
- * For columns=2: md:col-span-{min(span,2)}
- * For columns>=3: md:col-span-{min(span,2)} lg:col-span-{min(span,3)}
- */
-export function getResponsiveSpanClass(span: number | undefined, columns: number): string {
-  if (!span || span <= 1 || columns <= 1) return '';
-
-  if (columns === 2) {
-    return span >= 2 ? 'md:col-span-2' : '';
-  }
-
-  // columns >= 3: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
-  if (span === 2) return 'md:col-span-2';
-  if (span >= 3) return 'md:col-span-2 lg:col-span-3';
-
-  return '';
-}
-
-export interface VirtualScrollOptions {
-  /** Enable virtual scrolling for large field sets */
-  enabled?: boolean;
-  /** Height of each field row in px (default: 60) */
-  itemHeight?: number;
-  /** Number of fields to render in the initial batch before revealing all (default: 20) */
-  batchSize?: number;
-}
-
-export interface DetailSectionProps {
-  section: DetailViewSectionType;
-  data?: any;
-  className?: string;
-  /** Object schema from DataSource for field type enrichment */
-  objectSchema?: any;
-  /** Object name for i18n field label resolution */
-  objectName?: string;
-  /** Whether inline editing is active */
-  isEditing?: boolean;
-  /** Callback when a field value changes during inline editing */
-  onFieldChange?: (field: string, value: any) => void;
-  /** Virtual scrolling configuration for sections with many fields */
-  virtualScroll?: VirtualScrollOptions;
-}
-
-export const DetailSection: React.FC<DetailSectionProps> = ({
-  section,
-  data,
-  className,
-  objectSchema,
-  objectName,
-  isEditing = false,
-  onFieldChange,
-  virtualScroll,
-}) => {
-  const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
-  const [copiedField, setCopiedField] = React.useState<string | null>(null);
-  const [visibleCount, setVisibleCount] = React.useState<number | undefined>(undefined);
-  const { t } = useDetailTranslation();
-  const { fieldLabel } = useSafeFieldLabel();
-
-  const handleCopyField = React.useCallback((fieldName: string, value: any) => {
-    const textValue = value !== null && value !== undefined ? String(value) : '';
-    navigator.clipboard.writeText(textValue).then(() => {
-      setCopiedField(fieldName);
-      setTimeout(() => setCopiedField(null), 2000);
-    });
-  }, []);
-
-  // 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 renderField = (field: DetailViewField) => {
-    const value = data?.[field.name] ?? field.value;
-    
-    // If custom renderer provided
-    if (field.render) {
-      return <SchemaRenderer schema={field.render} data={{ ...data, value }} />;
-    }
-
-    // Calculate responsive span class so col-span never exceeds the visible
-    // column count at each breakpoint, preventing implicit columns on mobile.
-    const spanClass = getResponsiveSpanClass(field.span, effectiveColumns);
-
-    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;
-        const refTarget = objectDefField.reference_to || objectDefField.reference;
-        if (refTarget && !enrichedField.reference_to) enrichedField.reference_to = refTarget;
-        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;
-
-    // Default field rendering with copy button and touch-friendly targets
-    return (
-      <div key={field.name} className={cn("space-y-1.5 group", spanClass)}>
-        <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-          {fieldLabel(objectName || '', field.name, 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",
-            canCopy && "cursor-pointer active:bg-muted/60 transition-colors"
-          )}
-          onClick={canCopy ? () => handleCopyField(field.name, value) : undefined}
-          onKeyDown={canCopy ? (e: React.KeyboardEvent) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              handleCopyField(field.name, value);
-            }
-          } : undefined}
-          role={canCopy ? "button" : undefined}
-          tabIndex={canCopy ? 0 : undefined}
-        >
-          <div className="text-sm flex-1 break-words py-1">
-            {displayValue}
-          </div>
-          {canCopy && (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleCopyField(field.name, value);
-                    }}
-                  >
-                    {isCopied ? (
-                      <Check className="h-3 w-3 text-green-600" />
-                    ) : (
-                      <Copy className="h-3 w-3" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {isCopied ? t('detail.copied') : t('detail.copyToClipboard')}
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
-        </div>
-        )}
-      </div>
-    );
-  };
-
-  // Virtual scroll: progressive batch rendering for large field sets
-  const vsEnabled = virtualScroll?.enabled === true;
-  const vsBatchSize = virtualScroll?.batchSize ?? 20;
-  /** Delay (ms) before revealing remaining fields after the initial batch */
-  const VS_REVEAL_DELAY = 100;
-
-  React.useEffect(() => {
-    if (!vsEnabled) {
-      setVisibleCount(undefined);
-      return;
-    }
-    // Start with a batch, then progressively reveal more
-    if (layoutFields.length <= vsBatchSize) {
-      setVisibleCount(undefined);
-      return;
-    }
-    setVisibleCount(vsBatchSize);
-    const timer = setTimeout(() => setVisibleCount(undefined), VS_REVEAL_DELAY);
-    return () => clearTimeout(timer);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vsEnabled, layoutFields.length, vsBatchSize]);
-
-  const renderedFields = visibleCount !== undefined
-    ? layoutFields.slice(0, visibleCount)
-    : layoutFields;
-
-  const content = (
-    <div 
-      className={cn(
-        "grid gap-3 sm:gap-4",
-        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"
-      )}
-    >
-      {renderedFields.map(renderField)}
-    </div>
-  );
-
-  if (!section.collapsible) {
-    return (
-      <Card className={cn(section.showBorder === false ? 'border-none shadow-none' : '', className)}>
-        {section.title && (
-          <CardHeader className={cn(section.headerColor && `bg-${section.headerColor}`)}>
-            <CardTitle className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                {section.icon && <span className="text-muted-foreground">{section.icon}</span>}
-                <span>{section.title}</span>
-                {section.fields && (
-                  <Badge variant="secondary" className="ml-2 text-xs">
-                    {section.fields.length}
-                  </Badge>
-                )}
-              </div>
-            </CardTitle>
-            {section.description && (
-              <p className="text-sm text-muted-foreground mt-1.5">{section.description}</p>
-            )}
-          </CardHeader>
-        )}
-        <CardContent className="pt-4 sm:pt-6 px-3 sm:px-6">
-          {content}
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Collapsible
-      open={!isCollapsed}
-      onOpenChange={(open) => setIsCollapsed(!open)}
-      className={className}
-    >
-      <Card>
-        <CollapsibleTrigger asChild>
-          <CardHeader className={cn(
-            "cursor-pointer hover:bg-muted/50 transition-colors",
-            section.headerColor && `bg-${section.headerColor}`
-          )}>
-            <CardTitle className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                {section.icon && <span className="text-muted-foreground">{section.icon}</span>}
-                <span>{section.title}</span>
-                {section.fields && (
-                  <Badge variant="secondary" className="ml-2 text-xs">
-                    {section.fields.length}
-                  </Badge>
-                )}
-              </div>
-              <div className="flex items-center gap-2">
-                {isCollapsed ? (
-                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                ) : (
-                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                )}
-              </div>
-            </CardTitle>
-            {section.description && !isCollapsed && (
-              <p className="text-sm text-muted-foreground mt-1.5">{section.description}</p>
-            )}
-          </CardHeader>
-        </CollapsibleTrigger>
-        <CollapsibleContent>
-          <CardContent className="pt-4 sm:pt-6 px-3 sm:px-6">
-            {content}
-          </CardContent>
-        </CollapsibleContent>
-      </Card>
-    </Collapsible>
-  );
-};

package/src/DetailTabs.tsx

@@ -1,73 +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 { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from '@object-ui/components';
-import { SchemaRenderer } from '@object-ui/react';
-import type { DetailViewTab } from '@object-ui/types';
-
-export interface DetailTabsProps {
-  tabs: DetailViewTab[];
-  data?: any;
-  className?: string;
-}
-
-export const DetailTabs: React.FC<DetailTabsProps> = ({
-  tabs,
-  data,
-  className,
-}) => {
-  const [activeTab, setActiveTab] = React.useState(tabs[0]?.key);
-
-  const visibleTabs = tabs.filter(tab => {
-    if (typeof tab.visible === 'boolean') return tab.visible;
-    if (typeof tab.visible === 'string') {
-      // Simple expression evaluation could go here
-      return true;
-    }
-    return true;
-  });
-
-  return (
-    <Tabs value={activeTab} onValueChange={setActiveTab} className={className}>
-      <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0">
-        {visibleTabs.map((tab) => (
-          <TabsTrigger
-            key={tab.key}
-            value={tab.key}
-            className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-          >
-            <div className="flex items-center gap-2">
-              {tab.icon && <span>{tab.icon}</span>}
-              <span>{tab.label}</span>
-              {tab.badge && (
-                <Badge variant="secondary" className="ml-1">
-                  {tab.badge}
-                </Badge>
-              )}
-            </div>
-          </TabsTrigger>
-        ))}
-      </TabsList>
-
-      {visibleTabs.map((tab) => (
-        <TabsContent key={tab.key} value={tab.key} className="mt-4">
-          {Array.isArray(tab.content) ? (
-            <div className="space-y-4">
-              {tab.content.map((schema, index) => (
-                <SchemaRenderer key={index} schema={schema} data={data} />
-              ))}
-            </div>
-          ) : (
-            <SchemaRenderer schema={tab.content} data={data} />
-          )}
-        </TabsContent>
-      ))}
-    </Tabs>
-  );
-};