@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/DiffView.tsx

@@ -0,0 +1,231 @@
+/**
+ * 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';
+
+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 [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="Unified diff"
+            >
+              <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="Side-by-side diff"
+            >
+              <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">No changes</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">
+                Previous
+              </div>
+              <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-muted/50">
+                Current
+              </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

@@ -0,0 +1,46 @@
+/**
+ * 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

@@ -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/InlineCreateRelated.tsx

@@ -0,0 +1,291 @@
+/**
+ * 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>
+  );
+};