@object-ui/plugin-detail 3.3.0 → 3.3.1

package/src/DiffView.tsx

@@ -1,233 +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, Button, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
-import { Columns2, Rows3 } from 'lucide-react';
-import { useDetailTranslation } from './useDetailTranslation';
-
-export type DiffFieldType = 'string' | 'number' | 'boolean' | 'json' | 'date';
-export type DiffMode = 'unified' | 'side-by-side';
-
-export interface DiffLine {
-  type: 'added' | 'removed' | 'unchanged';
-  value: string;
-}
-
-export interface DiffViewProps {
-  oldValue: any;
-  newValue: any;
-  fieldName: string;
-  fieldType?: DiffFieldType;
-  mode?: DiffMode;
-  className?: string;
-}
-
-/** Convert a value to diffable string lines based on its type. */
-function valueToLines(value: any, fieldType: DiffFieldType): string[] {
-  if (value == null) return ['(empty)'];
-
-  switch (fieldType) {
-    case 'json':
-      try {
-        const parsed = typeof value === 'string' ? JSON.parse(value) : value;
-        return JSON.stringify(parsed, null, 2).split('\n');
-      } catch {
-        return String(value).split('\n');
-      }
-    case 'boolean':
-      return [String(!!value)];
-    case 'number':
-      return [String(value)];
-    case 'date':
-      try {
-        return [new Date(value).toLocaleString()];
-      } catch {
-        return [String(value)];
-      }
-    default:
-      return String(value).split('\n');
-  }
-}
-
-/** Compute a simple line-by-line diff between old and new lines. */
-function computeDiff(oldLines: string[], newLines: string[]): DiffLine[] {
-  const result: DiffLine[] = [];
-  const maxLen = Math.max(oldLines.length, newLines.length);
-
-  for (let i = 0; i < maxLen; i++) {
-    const oldLine = i < oldLines.length ? oldLines[i] : undefined;
-    const newLine = i < newLines.length ? newLines[i] : undefined;
-
-    if (oldLine === newLine) {
-      result.push({ type: 'unchanged', value: oldLine! });
-    } else {
-      if (oldLine !== undefined) {
-        result.push({ type: 'removed', value: oldLine });
-      }
-      if (newLine !== undefined) {
-        result.push({ type: 'added', value: newLine });
-      }
-    }
-  }
-
-  return result;
-}
-
-const LINE_STYLES: Record<DiffLine['type'], string> = {
-  added: 'bg-green-50 text-green-800 dark:bg-green-950/30 dark:text-green-300',
-  removed: 'bg-red-50 text-red-800 dark:bg-red-950/30 dark:text-red-300',
-  unchanged: 'text-muted-foreground',
-};
-
-const LINE_PREFIX: Record<DiffLine['type'], string> = {
-  added: '+',
-  removed: '-',
-  unchanged: ' ',
-};
-
-export const DiffView: React.FC<DiffViewProps> = ({
-  oldValue,
-  newValue,
-  fieldName,
-  fieldType = 'string',
-  mode: initialMode = 'unified',
-  className,
-}) => {
-  const { t } = useDetailTranslation();
-  const [mode, setMode] = React.useState<DiffMode>(initialMode);
-
-  const oldLines = React.useMemo(() => valueToLines(oldValue, fieldType), [oldValue, fieldType]);
-  const newLines = React.useMemo(() => valueToLines(newValue, fieldType), [newValue, fieldType]);
-  const diffLines = React.useMemo(() => computeDiff(oldLines, newLines), [oldLines, newLines]);
-
-  const hasChanges = diffLines.some((l) => l.type !== 'unchanged');
-
-  // Build side-by-side pairs
-  const sideBySidePairs = React.useMemo(() => {
-    if (mode !== 'side-by-side') return [];
-
-    const pairs: { left: DiffLine | null; right: DiffLine | null }[] = [];
-    let i = 0;
-    while (i < diffLines.length) {
-      const line = diffLines[i];
-      if (line.type === 'unchanged') {
-        pairs.push({ left: line, right: line });
-        i++;
-      } else if (line.type === 'removed') {
-        // Check if next is 'added' to pair them
-        const next = i + 1 < diffLines.length ? diffLines[i + 1] : null;
-        if (next && next.type === 'added') {
-          pairs.push({ left: line, right: next });
-          i += 2;
-        } else {
-          pairs.push({ left: line, right: null });
-          i++;
-        }
-      } else {
-        pairs.push({ left: null, right: line });
-        i++;
-      }
-    }
-    return pairs;
-  }, [mode, diffLines]);
-
-  return (
-    <Card className={cn('overflow-hidden', className)}>
-      <CardHeader className="pb-2">
-        <CardTitle className="flex items-center justify-between text-sm">
-          <span className="font-medium">{fieldName}</span>
-          <div className="flex items-center gap-1">
-            <Button
-              variant={mode === 'unified' ? 'secondary' : 'ghost'}
-              size="icon"
-              className="h-7 w-7"
-              onClick={() => setMode('unified')}
-              title={t('detail.unifiedDiff')}
-            >
-              <Rows3 className="h-3.5 w-3.5" />
-            </Button>
-            <Button
-              variant={mode === 'side-by-side' ? 'secondary' : 'ghost'}
-              size="icon"
-              className="h-7 w-7"
-              onClick={() => setMode('side-by-side')}
-              title={t('detail.sideBySideDiff')}
-            >
-              <Columns2 className="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="p-0">
-        {!hasChanges ? (
-          <p className="px-4 py-3 text-sm text-muted-foreground">{t('detail.noChanges')}</p>
-        ) : mode === 'unified' ? (
-          /* Unified diff view */
-          <div className="font-mono text-xs overflow-x-auto">
-            {diffLines.map((line, index) => (
-              <div
-                key={index}
-                className={cn(
-                  'px-4 py-0.5 whitespace-pre-wrap border-l-2',
-                  LINE_STYLES[line.type],
-                  line.type === 'added' && 'border-l-green-500',
-                  line.type === 'removed' && 'border-l-red-500',
-                  line.type === 'unchanged' && 'border-l-transparent',
-                )}
-              >
-                <span className="select-none mr-2 inline-block w-3 text-center opacity-60">
-                  {LINE_PREFIX[line.type]}
-                </span>
-                {line.value}
-              </div>
-            ))}
-          </div>
-        ) : (
-          /* Side-by-side diff view */
-          <div className="overflow-x-auto">
-            <div className="grid grid-cols-2 divide-x font-mono text-xs min-w-0">
-              {/* Headers */}
-              <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-muted/50">
-                {t('detail.previousVersion')}
-              </div>
-              <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-muted/50">
-                {t('detail.currentVersion')}
-              </div>
-              {/* Rows */}
-              {sideBySidePairs.map((pair, index) => (
-                <React.Fragment key={index}>
-                  <div
-                    className={cn(
-                      'px-3 py-0.5 whitespace-pre-wrap min-h-[1.5em]',
-                      pair.left
-                        ? LINE_STYLES[pair.left.type]
-                        : 'bg-muted/20',
-                    )}
-                  >
-                    {pair.left?.value ?? ''}
-                  </div>
-                  <div
-                    className={cn(
-                      'px-3 py-0.5 whitespace-pre-wrap min-h-[1.5em]',
-                      pair.right
-                        ? LINE_STYLES[pair.right.type]
-                        : 'bg-muted/20',
-                    )}
-                  >
-                    {pair.right?.value ?? ''}
-                  </div>
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

package/src/FieldChangeItem.tsx

@@ -1,46 +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 } from '@object-ui/components';
-import { ArrowRight } from 'lucide-react';
-import type { FieldChangeEntry } from '@object-ui/types';
-
-export interface FieldChangeItemProps {
-  /** The field change entry to render */
-  change: FieldChangeEntry;
-  className?: string;
-}
-
-/**
- * FieldChangeItem — Renders a single field change entry.
- * Shows: field label → old value → new value with human-readable display values.
- * Aligned with @objectstack/spec FieldChangeEntrySchema.
- */
-export const FieldChangeItem: React.FC<FieldChangeItemProps> = ({
-  change,
-  className,
-}) => {
-  const label =
-    change.fieldLabel ??
-    change.field.charAt(0).toUpperCase() + change.field.slice(1).replace(/_/g, ' ');
-
-  const oldDisplay =
-    change.oldDisplayValue ?? (change.oldValue != null ? String(change.oldValue) : '(empty)');
-  const newDisplay =
-    change.newDisplayValue ?? (change.newValue != null ? String(change.newValue) : '(empty)');
-
-  return (
-    <div className={cn('flex items-center gap-1.5 text-sm flex-wrap', className)}>
-      <span className="font-medium text-foreground">{label}</span>
-      <span className="text-muted-foreground line-through">{oldDisplay}</span>
-      <ArrowRight className="h-3 w-3 text-muted-foreground shrink-0" />
-      <span className="text-foreground">{newDisplay}</span>
-    </div>
-  );
-};

package/src/HeaderHighlight.tsx

@@ -1,88 +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, CardContent } from '@object-ui/components';
-import type { HighlightField } from '@object-ui/types';
-import { getCellRenderer } from '@object-ui/fields';
-import { useSafeFieldLabel } from '@object-ui/react';
-
-export interface HeaderHighlightProps {
-  fields: HighlightField[];
-  data?: any;
-  className?: string;
-  /** Object name for i18n field label resolution */
-  objectName?: string;
-  /** Object schema for field metadata enrichment */
-  objectSchema?: any;
-}
-
-export const HeaderHighlight: React.FC<HeaderHighlightProps> = ({
-  fields,
-  data,
-  className,
-  objectName,
-  objectSchema,
-}) => {
-  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];
-            // Enrich field metadata from objectSchema
-            const objectDefField = objectSchema?.fields?.[field.name];
-            const resolvedType = field.type || objectDefField?.type;
-            const enrichedField = {
-              name: field.name,
-              label: field.label,
-              type: resolvedType || 'text',
-              ...(objectDefField?.options && { options: objectDefField.options }),
-              ...(objectDefField?.currency && { currency: objectDefField.currency }),
-              ...(objectDefField?.precision !== undefined && { precision: objectDefField.precision }),
-              ...(objectDefField?.format && { format: objectDefField.format }),
-            };
-
-            // Use type-aware cell renderer — all renderers coerce values via
-            // coerceToSafeValue() so even object/array data is safe (no error #310).
-            const CellRenderer = getCellRenderer(resolvedType || 'text');
-
-            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">
-                  <CellRenderer value={value} field={enrichedField as any} />
-                </span>
-              </div>
-            );
-          })}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};

package/src/InlineCreateRelated.tsx

@@ -1,291 +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,
-  Button,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  Input,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from '@object-ui/components';
-import { Plus, Link, Search, X, Loader2 } from 'lucide-react';
-
-export interface RelatedFieldDefinition {
-  name: string;
-  label: string;
-  type: 'string' | 'number' | 'boolean' | 'date';
-  required?: boolean;
-  placeholder?: string;
-}
-
-export interface RelatedRecordOption {
-  id: string;
-  label: string;
-  description?: string;
-}
-
-export interface InlineCreateRelatedProps {
-  objectName: string;
-  relationshipField: string;
-  fields: RelatedFieldDefinition[];
-  onCreateRecord?: (values: Record<string, any>) => void | Promise<void>;
-  onLinkRecord?: (recordId: string) => void | Promise<void>;
-  onSearch?: (query: string) => Promise<RelatedRecordOption[]>;
-  existingRecords?: RelatedRecordOption[];
-  className?: string;
-}
-
-export const InlineCreateRelated: React.FC<InlineCreateRelatedProps> = ({
-  objectName,
-  relationshipField,
-  fields,
-  onCreateRecord,
-  onLinkRecord,
-  onSearch,
-  existingRecords = [],
-  className,
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [activeTab, setActiveTab] = React.useState<string>('create');
-  const [formValues, setFormValues] = React.useState<Record<string, any>>({});
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [searchResults, setSearchResults] = React.useState<RelatedRecordOption[]>(existingRecords);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [isSearching, setIsSearching] = React.useState(false);
-
-  const filteredResults = React.useMemo(() => {
-    if (!searchQuery.trim()) return searchResults;
-    const query = searchQuery.toLowerCase();
-    return searchResults.filter(
-      (r) =>
-        r.label.toLowerCase().includes(query) ||
-        r.description?.toLowerCase().includes(query),
-    );
-  }, [searchQuery, searchResults]);
-
-  const handleSearchChange = React.useCallback(
-    async (value: string) => {
-      setSearchQuery(value);
-      if (onSearch && value.trim().length >= 2) {
-        setIsSearching(true);
-        try {
-          const results = await onSearch(value);
-          setSearchResults(results);
-        } finally {
-          setIsSearching(false);
-        }
-      }
-    },
-    [onSearch],
-  );
-
-  const handleFieldChange = React.useCallback(
-    (fieldName: string, value: string) => {
-      setFormValues((prev) => ({ ...prev, [fieldName]: value }));
-    },
-    [],
-  );
-
-  const handleCreate = React.useCallback(async () => {
-    if (!onCreateRecord) return;
-    setIsSubmitting(true);
-    try {
-      await onCreateRecord({ ...formValues, [relationshipField]: true });
-      setFormValues({});
-      setIsOpen(false);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [onCreateRecord, formValues, relationshipField]);
-
-  const handleLink = React.useCallback(
-    async (recordId: string) => {
-      if (!onLinkRecord) return;
-      setIsSubmitting(true);
-      try {
-        await onLinkRecord(recordId);
-        setSearchQuery('');
-        setIsOpen(false);
-      } finally {
-        setIsSubmitting(false);
-      }
-    },
-    [onLinkRecord],
-  );
-
-  const isCreateValid = React.useMemo(() => {
-    return fields
-      .filter((f) => f.required)
-      .every((f) => formValues[f.name]?.toString().trim());
-  }, [fields, formValues]);
-
-  if (!isOpen) {
-    return (
-      <div className={cn('flex gap-2', className)}>
-        {onCreateRecord && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              setActiveTab('create');
-              setIsOpen(true);
-            }}
-            className="gap-1.5"
-          >
-            <Plus className="h-3.5 w-3.5" />
-            New {objectName}
-          </Button>
-        )}
-        {onLinkRecord && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              setActiveTab('link');
-              setIsOpen(true);
-            }}
-            className="gap-1.5"
-          >
-            <Link className="h-3.5 w-3.5" />
-            Link Existing
-          </Button>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <Card className={cn('', className)}>
-      <CardHeader className="pb-3">
-        <CardTitle className="flex items-center justify-between text-sm">
-          <span>
-            {activeTab === 'create' ? 'Create' : 'Link'} {objectName}
-          </span>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-6 w-6"
-            onClick={() => setIsOpen(false)}
-          >
-            <X className="h-3.5 w-3.5" />
-          </Button>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className="mb-3 w-full">
-            {onCreateRecord && (
-              <TabsTrigger value="create" className="flex-1 gap-1.5">
-                <Plus className="h-3.5 w-3.5" />
-                Create New
-              </TabsTrigger>
-            )}
-            {onLinkRecord && (
-              <TabsTrigger value="link" className="flex-1 gap-1.5">
-                <Link className="h-3.5 w-3.5" />
-                Link Existing
-              </TabsTrigger>
-            )}
-          </TabsList>
-
-          {/* Create New Tab */}
-          {onCreateRecord && (
-            <TabsContent value="create" className="space-y-3 mt-0">
-              {fields.map((field) => (
-                <div key={field.name}>
-                  <label className="text-xs font-medium text-muted-foreground mb-1 block">
-                    {field.label}
-                    {field.required && (
-                      <span className="text-destructive ml-0.5">*</span>
-                    )}
-                  </label>
-                  <Input
-                    type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
-                    placeholder={field.placeholder || `Enter ${field.label.toLowerCase()}`}
-                    value={formValues[field.name] || ''}
-                    onChange={(e) => handleFieldChange(field.name, e.target.value)}
-                    className="h-8 text-sm"
-                  />
-                </div>
-              ))}
-              <div className="flex justify-end gap-2 pt-1">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setIsOpen(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  size="sm"
-                  onClick={handleCreate}
-                  disabled={!isCreateValid || isSubmitting}
-                  className="gap-1.5"
-                >
-                  {isSubmitting && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
-                  Create
-                </Button>
-              </div>
-            </TabsContent>
-          )}
-
-          {/* Link Existing Tab */}
-          {onLinkRecord && (
-            <TabsContent value="link" className="space-y-3 mt-0">
-              <div className="relative">
-                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-                <Input
-                  placeholder={`Search ${objectName}…`}
-                  value={searchQuery}
-                  onChange={(e) => handleSearchChange(e.target.value)}
-                  className="h-8 text-sm pl-8"
-                />
-              </div>
-              <div className="max-h-48 overflow-y-auto space-y-1">
-                {isSearching ? (
-                  <div className="flex items-center justify-center py-4 text-sm text-muted-foreground">
-                    <Loader2 className="h-4 w-4 animate-spin mr-2" />
-                    Searching…
-                  </div>
-                ) : filteredResults.length === 0 ? (
-                  <p className="text-sm text-muted-foreground text-center py-4">
-                    {searchQuery ? 'No records found' : 'Type to search records'}
-                  </p>
-                ) : (
-                  filteredResults.map((record) => (
-                    <button
-                      key={record.id}
-                      type="button"
-                      className="w-full text-left px-3 py-2 rounded-md hover:bg-accent text-sm transition-colors"
-                      onClick={() => handleLink(record.id)}
-                      disabled={isSubmitting}
-                    >
-                      <span className="font-medium">{record.label}</span>
-                      {record.description && (
-                        <span className="block text-xs text-muted-foreground mt-0.5">
-                          {record.description}
-                        </span>
-                      )}
-                    </button>
-                  ))
-                )}
-              </div>
-            </TabsContent>
-          )}
-        </Tabs>
-      </CardContent>
-    </Card>
-  );
-};