@object-ui/plugin-detail 0.5.0 → 3.0.0

package/src/DetailView.tsx

@@ -7,8 +7,32 @@
  */
 
 import * as React from 'react';
-import { cn, Button, Skeleton } from '@object-ui/components';
-import { ArrowLeft, Edit, Trash2, MoreHorizontal } from 'lucide-react';
+import { 
+  cn, 
+  Button, 
+  Skeleton,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@object-ui/components';
+import { 
+  ArrowLeft, 
+  Edit, 
+  Trash2, 
+  MoreHorizontal, 
+  Share2, 
+  Copy, 
+  Download, 
+  History, 
+  Star,
+  StarOff,
+} from 'lucide-react';
 import { DetailSection } from './DetailSection';
 import { DetailTabs } from './DetailTabs';
 import { RelatedList } from './RelatedList';
@@ -34,6 +58,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
 }) => {
   const [data, setData] = React.useState<any>(schema.data);
   const [loading, setLoading] = React.useState(!schema.data && !!((schema.api && schema.resourceId) || (dataSource && schema.objectName && schema.resourceId)));
+  const [isFavorite, setIsFavorite] = React.useState(false);
 
   // Fetch data if API or DataSource provided
   React.useEffect(() => {
@@ -55,43 +80,93 @@ export const DetailView: React.FC<DetailViewProps> = ({
       });
     } else if (schema.api && schema.resourceId) {
       setLoading(true);
-      // TODO: Fetch from API
-      // This would integrate with the data provider
-      setTimeout(() => {
-        setLoading(false);
-      }, 500);
+      fetch(`${schema.api}/${schema.resourceId}`)
+        .then(res => res.json())
+        .then(result => {
+          setData(result?.data || result);
+        })
+        .catch(err => {
+          console.error('Failed to fetch detail data:', err);
+        })
+        .finally(() => setLoading(false));
     }
   }, [schema.api, schema.resourceId]);
 
   const handleBack = React.useCallback(() => {
     if (onBack) {
       onBack();
+    } else if (schema.onNavigate) {
+      // SPA-aware navigation
+      const backUrl = schema.backUrl || (schema.objectName ? `/${schema.objectName}` : '/');
+      schema.onNavigate(backUrl, { replace: true });
     } else if (schema.backUrl) {
       window.location.href = schema.backUrl;
     } else {
       window.history.back();
     }
-  }, [onBack, schema.backUrl]);
+  }, [onBack, schema]);
 
   const handleEdit = React.useCallback(() => {
     if (onEdit) {
       onEdit();
+    } else if (schema.onNavigate && schema.editUrl) {
+      // SPA-aware navigation
+      schema.onNavigate(schema.editUrl);
+    } else if (schema.onNavigate && schema.objectName && schema.resourceId) {
+      // Build edit URL from object + resource
+      schema.onNavigate(`/${schema.objectName}/${schema.resourceId}/edit`);
     } else if (schema.editUrl) {
       window.location.href = schema.editUrl;
     }
-    // TODO: Implement inline edit mode
-    // else {
-    //   setEditMode(true);
-    // }
-  }, [onEdit, schema.editUrl]);
+  }, [onEdit, schema]);
 
   const handleDelete = React.useCallback(() => {
-    // TODO: Replace with proper confirmation dialog component
     const confirmMessage = schema.deleteConfirmation || 'Are you sure you want to delete this record?';
+    // Use window.confirm as fallback — the ActionProvider's onConfirm handler
+    // will intercept this if wired up via the action system.
     if (window.confirm(confirmMessage)) {
       onDelete?.();
+      // Navigate back after deletion if onNavigate available
+      if (schema.onNavigate && schema.objectName) {
+        schema.onNavigate(`/${schema.objectName}`, { replace: true });
+      }
+    }
+  }, [onDelete, schema]);
+
+  const handleShare = React.useCallback(() => {
+    // Share functionality - could trigger share dialog or copy link
+    if (navigator.share && schema.objectName && schema.resourceId) {
+      navigator.share({
+        title: schema.title || 'Record Details',
+        text: `${schema.objectName} #${schema.resourceId}`,
+        url: window.location.href,
+      }).catch((err) => console.log('Share failed:', err));
+    } else {
+      // Fallback: copy link to clipboard
+      navigator.clipboard.writeText(window.location.href).then(() => {
+        console.log('Link copied to clipboard');
+      });
     }
-  }, [onDelete, schema.deleteConfirmation]);
+  }, [schema]);
+
+  const handleDuplicate = React.useCallback(() => {
+    // Duplicate functionality - could navigate to create page with prefilled data
+    console.log('Duplicate record:', data);
+  }, [data]);
+
+  const handleExport = React.useCallback(() => {
+    // Export functionality - could download as JSON, PDF, etc.
+    console.log('Export record:', data);
+  }, [data]);
+
+  const handleViewHistory = React.useCallback(() => {
+    // View history functionality
+    console.log('View history for record:', schema.resourceId);
+  }, [schema]);
+
+  const handleToggleFavorite = React.useCallback(() => {
+    setIsFavorite(!isFavorite);
+  }, [isFavorite]);
 
   if (loading || schema.loading) {
     return (
@@ -104,49 +179,123 @@ export const DetailView: React.FC<DetailViewProps> = ({
   }
 
   return (
-    <div className={cn('space-y-6', className)}>
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          {(schema.showBack ?? true) && (
-            <Button variant="ghost" size="icon" onClick={handleBack}>
-              <ArrowLeft className="h-4 w-4" />
-            </Button>
-          )}
-          <div>
-            <h1 className="text-2xl font-bold">{schema.title || 'Details'}</h1>
-            {schema.objectName && (
-              <p className="text-sm text-muted-foreground mt-1">
-                {schema.objectName} #{schema.resourceId}
-              </p>
+    <TooltipProvider>
+      <div className={cn('space-y-6', className)}>
+        {/* Header - Airtable-inspired layout */}
+        <div className="flex flex-col sm:flex-row items-start justify-between gap-3 sm:gap-4 pb-4 border-b">
+          <div className="flex items-start gap-2 sm:gap-3 flex-1 min-w-0">
+            {(schema.showBack ?? true) && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" onClick={handleBack} className="shrink-0 mt-1">
+                    <ArrowLeft className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Back</TooltipContent>
+              </Tooltip>
             )}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <h1 className="text-xl sm:text-2xl font-bold truncate">{schema.title || 'Details'}</h1>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="h-6 w-6 shrink-0"
+                      onClick={handleToggleFavorite}
+                    >
+                      {isFavorite ? (
+                        <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
+                      ) : (
+                        <StarOff className="h-4 w-4 text-muted-foreground" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              {schema.objectName && (
+                <p className="text-sm text-muted-foreground mt-1 flex items-center gap-1.5">
+                  <span className="font-medium">{schema.objectName}</span>
+                  <span className="text-muted-foreground/60">•</span>
+                  <span>#{schema.resourceId}</span>
+                </p>
+              )}
+            </div>
           </div>
-        </div>
 
-        <div className="flex items-center gap-2">
-          {schema.actions?.map((action, index) => (
-            <SchemaRenderer key={index} schema={action} data={data} />
-          ))}
+          <div className="flex flex-wrap items-center gap-1.5 shrink-0 w-full sm:w-auto">
+            {schema.actions?.map((action, index) => (
+              <SchemaRenderer key={index} schema={action} data={data} />
+            ))}
+
+            {/* Share Button */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline" size="icon" onClick={handleShare}>
+                  <Share2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Share</TooltipContent>
+            </Tooltip>
+
+            {/* Edit Button */}
+            {schema.showEdit && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="default" onClick={handleEdit} className="gap-2">
+                    <Edit className="h-4 w-4" />
+                    <span className="hidden sm:inline">Edit</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Edit record</TooltipContent>
+              </Tooltip>
+            )}
 
-          {schema.showEdit && (
-            <Button variant="outline" onClick={handleEdit}>
-              <Edit className="h-4 w-4 mr-2" />
-              Edit
-            </Button>
-          )}
-
-          {schema.showDelete && (
-            <Button variant="destructive" onClick={handleDelete}>
-              <Trash2 className="h-4 w-4 mr-2" />
-              Delete
-            </Button>
-          )}
-
-          <Button variant="ghost" size="icon">
-            <MoreHorizontal className="h-4 w-4" />
-          </Button>
+            {/* More Actions Menu */}
+            <DropdownMenu>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent>More actions</TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent align="end" className="w-[calc(100vw-2rem)] sm:w-48 max-h-[60vh] overflow-y-auto">
+                <DropdownMenuItem onClick={handleDuplicate}>
+                  <Copy className="h-4 w-4 mr-2" />
+                  Duplicate
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={handleExport}>
+                  <Download className="h-4 w-4 mr-2" />
+                  Export
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={handleViewHistory}>
+                  <History className="h-4 w-4 mr-2" />
+                  View history
+                </DropdownMenuItem>
+                {schema.showDelete && (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem 
+                      onClick={handleDelete}
+                      className="text-destructive focus:text-destructive"
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete
+                    </DropdownMenuItem>
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
-      </div>
 
       {/* Custom Header */}
       {schema.header && (
@@ -157,7 +306,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
 
       {/* Sections */}
       {schema.sections && schema.sections.length > 0 && (
-        <div className="space-y-4">
+        <div className="space-y-3 sm:space-y-4">
           {schema.sections.map((section, index) => (
             <DetailSection
               key={index}
@@ -196,6 +345,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
               api={related.api}
               data={related.data}
               columns={related.columns as any}
+              dataSource={dataSource}
             />
           ))}
         </div>
@@ -207,6 +357,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
           <SchemaRenderer schema={schema.footer} data={data} />
         </div>
       )}
-    </div>
+      </div>
+    </TooltipProvider>
   );
 };

package/src/RelatedList.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
 import { SchemaRenderer } from '@object-ui/react';
+import type { DataSource } from '@object-ui/types';
 
 export interface RelatedListProps {
   title: string;
@@ -18,6 +19,7 @@ export interface RelatedListProps {
   schema?: any;
   columns?: any[];
   className?: string;
+  dataSource?: DataSource;
 }
 
 export const RelatedList: React.FC<RelatedListProps> = ({
@@ -28,18 +30,41 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   schema,
   columns,
   className,
+  dataSource,
 }) => {
-  const [relatedData] = React.useState(data);
+  const [relatedData, setRelatedData] = React.useState(data);
   const [loading, setLoading] = React.useState(false);
 
   React.useEffect(() => {
     if (api && !data.length) {
       setLoading(true);
-      // TODO: Fetch data from API
-      // This would integrate with the data provider
-      setLoading(false);
+      if (dataSource) {
+        dataSource.find(api).then((result) => {
+          const items = Array.isArray(result)
+            ? result
+            : Array.isArray((result as any)?.data)
+              ? (result as any).data
+              : [];
+          setRelatedData(items);
+          setLoading(false);
+        }).catch((err) => {
+          console.error('Failed to fetch related data:', err);
+          setLoading(false);
+        });
+      } else {
+        fetch(api)
+          .then(res => res.json())
+          .then(result => {
+            const items = Array.isArray(result) ? result : (result?.data || []);
+            setRelatedData(items);
+          })
+          .catch(err => {
+            console.error('Failed to fetch related data:', err);
+          })
+          .finally(() => setLoading(false));
+      }
     }
-  }, [api, data]);
+  }, [api, data, dataSource]);
 
   const viewSchema = React.useMemo(() => {
     if (schema) return schema;

package/src/index.tsx

@@ -84,3 +84,16 @@ ComponentRegistry.register('related-list', RelatedList, {
     { name: 'columns', type: 'array', label: 'Columns' },
   ],
 });
+
+// Alias for generic view
+ComponentRegistry.register('detail', DetailView, {
+  namespace: 'view',
+  category: 'view',
+  label: 'Detail',
+  icon: 'FileText',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'recordId', type: 'string', label: 'Record ID' },
+    { name: 'fields', type: 'array', label: 'Fields' },
+  ]
+});