@object-ui/plugin-detail 0.5.0

package/src/DetailView.tsx

@@ -0,0 +1,212 @@
+/**
+ * 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, Skeleton } from '@object-ui/components';
+import { ArrowLeft, Edit, Trash2, MoreHorizontal } from 'lucide-react';
+import { DetailSection } from './DetailSection';
+import { DetailTabs } from './DetailTabs';
+import { RelatedList } from './RelatedList';
+import { SchemaRenderer } from '@object-ui/react';
+import type { DetailViewSchema, DataSource } from '@object-ui/types';
+
+export interface DetailViewProps {
+  schema: DetailViewSchema;
+  dataSource?: DataSource;
+  className?: string;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  onBack?: () => void;
+}
+
+export const DetailView: React.FC<DetailViewProps> = ({
+  schema,
+  dataSource,
+  className,
+  onEdit,
+  onDelete,
+  onBack,
+}) => {
+  const [data, setData] = React.useState<any>(schema.data);
+  const [loading, setLoading] = React.useState(!schema.data && !!((schema.api && schema.resourceId) || (dataSource && schema.objectName && schema.resourceId)));
+
+  // Fetch data if API or DataSource provided
+  React.useEffect(() => {
+    // If inline data provided, use it
+     if (schema.data) {
+        setData(schema.data);
+        setLoading(false);
+        return;
+    }
+
+    if (dataSource && schema.objectName && schema.resourceId) {
+      setLoading(true);
+      dataSource.findOne(schema.objectName, schema.resourceId).then((result) => {
+         setData(result);
+         setLoading(false);
+      }).catch((err) => {
+         console.error('Failed to fetch detail data:', err);
+         setLoading(false);
+      });
+    } else if (schema.api && schema.resourceId) {
+      setLoading(true);
+      // TODO: Fetch from API
+      // This would integrate with the data provider
+      setTimeout(() => {
+        setLoading(false);
+      }, 500);
+    }
+  }, [schema.api, schema.resourceId]);
+
+  const handleBack = React.useCallback(() => {
+    if (onBack) {
+      onBack();
+    } else if (schema.backUrl) {
+      window.location.href = schema.backUrl;
+    } else {
+      window.history.back();
+    }
+  }, [onBack, schema.backUrl]);
+
+  const handleEdit = React.useCallback(() => {
+    if (onEdit) {
+      onEdit();
+    } else if (schema.editUrl) {
+      window.location.href = schema.editUrl;
+    }
+    // TODO: Implement inline edit mode
+    // else {
+    //   setEditMode(true);
+    // }
+  }, [onEdit, schema.editUrl]);
+
+  const handleDelete = React.useCallback(() => {
+    // TODO: Replace with proper confirmation dialog component
+    const confirmMessage = schema.deleteConfirmation || 'Are you sure you want to delete this record?';
+    if (window.confirm(confirmMessage)) {
+      onDelete?.();
+    }
+  }, [onDelete, schema.deleteConfirmation]);
+
+  if (loading || schema.loading) {
+    return (
+      <div className={cn('space-y-4', className)}>
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-64 w-full" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    );
+  }
+
+  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>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {schema.actions?.map((action, index) => (
+            <SchemaRenderer key={index} schema={action} data={data} />
+          ))}
+
+          {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>
+        </div>
+      </div>
+
+      {/* Custom Header */}
+      {schema.header && (
+        <div>
+          <SchemaRenderer schema={schema.header} data={data} />
+        </div>
+      )}
+
+      {/* Sections */}
+      {schema.sections && schema.sections.length > 0 && (
+        <div className="space-y-4">
+          {schema.sections.map((section, index) => (
+            <DetailSection
+              key={index}
+              section={section}
+              data={data}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Direct Fields (if no sections) */}
+      {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
+        <DetailSection
+          section={{
+            fields: schema.fields,
+            columns: schema.columns || 2,
+          }}
+          data={data}
+        />
+      )}
+
+      {/* Tabs */}
+      {schema.tabs && schema.tabs.length > 0 && (
+        <DetailTabs tabs={schema.tabs} data={data} />
+      )}
+
+      {/* Related Lists */}
+      {schema.related && schema.related.length > 0 && (
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">Related</h2>
+          {schema.related.map((related, index) => (
+            <RelatedList
+              key={index}
+              title={related.title}
+              type={related.type}
+              api={related.api}
+              data={related.data}
+              columns={related.columns as any}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Custom Footer */}
+      {schema.footer && (
+        <div>
+          <SchemaRenderer schema={schema.footer} data={data} />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/RelatedList.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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 { Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import { SchemaRenderer } from '@object-ui/react';
+
+export interface RelatedListProps {
+  title: string;
+  type: 'list' | 'grid' | 'table';
+  api?: string;
+  data?: any[];
+  schema?: any;
+  columns?: any[];
+  className?: string;
+}
+
+export const RelatedList: React.FC<RelatedListProps> = ({
+  title,
+  type,
+  api,
+  data = [],
+  schema,
+  columns,
+  className,
+}) => {
+  const [relatedData] = 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);
+    }
+  }, [api, data]);
+
+  const viewSchema = React.useMemo(() => {
+    if (schema) return schema;
+
+    // Auto-generate schema based on type
+    switch (type) {
+      case 'grid':
+      case 'table':
+        return {
+          type: 'data-table',
+          data: relatedData,
+          columns: columns || [],
+          pagination: relatedData.length > 10,
+          pageSize: 10,
+        };
+      case 'list':
+        return {
+          type: 'data-list',
+          data: relatedData,
+        };
+      default:
+        return { type: 'div', children: 'No view configured' };
+    }
+  }, [type, relatedData, columns, schema]);
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span>{title}</span>
+          <span className="text-sm font-normal text-muted-foreground">
+            {relatedData.length} record{relatedData.length !== 1 ? 's' : ''}
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <div className="flex items-center justify-center py-8 text-muted-foreground">
+            Loading...
+          </div>
+        ) : relatedData.length === 0 ? (
+          <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
+            No related records found
+          </div>
+        ) : (
+          <SchemaRenderer schema={viewSchema} />
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/__tests__/DetailView.test.tsx

@@ -0,0 +1,249 @@
+/**
+ * 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 { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DetailView } from '../DetailView';
+import type { DetailViewSchema } from '@object-ui/types';
+
+describe('DetailView', () => {
+  it('should be exported', () => {
+    expect(DetailView).toBeDefined();
+  });
+
+  it('should be a function', () => {
+    expect(typeof DetailView).toBe('function');
+  });
+
+  it('should render with basic schema', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: {
+        name: 'John Doe',
+        email: 'john@example.com',
+      },
+      fields: [
+        { name: 'name', label: 'Name' },
+        { name: 'email', label: 'Email' },
+      ],
+    };
+
+    const { container } = render(<DetailView schema={schema} />);
+    expect(container).toBeTruthy();
+  });
+
+  it('should render title', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    render(<DetailView schema={schema} />);
+    expect(screen.getByText('Contact Details')).toBeInTheDocument();
+  });
+
+  it('should render back button when showBack is true', () => {
+    const onBack = vi.fn();
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: true,
+    };
+
+    render(<DetailView schema={schema} onBack={onBack} />);
+    
+    const buttons = screen.getAllByRole('button');
+    const backButton = buttons.find(btn => 
+      btn.querySelector('svg') !== null
+    );
+    
+    expect(backButton).toBeTruthy();
+  });
+
+  it('should call onBack when back button is clicked', () => {
+    const onBack = vi.fn();
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showBack: true,
+    };
+
+    render(<DetailView schema={schema} onBack={onBack} />);
+    
+    const buttons = screen.getAllByRole('button');
+    const backButton = buttons.find(btn => 
+      btn.querySelector('svg') !== null
+    );
+    
+    if (backButton) {
+      fireEvent.click(backButton);
+      expect(onBack).toHaveBeenCalled();
+    }
+  });
+
+  it('should render edit button when showEdit is true', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showEdit: true,
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    // Edit button should be present
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('should call onEdit when edit button is clicked', () => {
+    const onEdit = vi.fn();
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showEdit: true,
+      // Disable back button to ensure it's not the first button found if using generic search
+      showBack: false 
+    };
+
+    render(<DetailView schema={schema} onEdit={onEdit} />);
+    
+    // Find button with text "Edit"
+    const editButton = screen.getByRole('button', { name: /edit/i });
+    
+    if (editButton) {
+      fireEvent.click(editButton);
+      expect(onEdit).toHaveBeenCalled();
+    }
+  });
+
+  it('should render delete button when showDelete is true', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      showDelete: true,
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('should render sections when provided', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: {
+        name: 'John Doe',
+        email: 'john@example.com',
+        phone: '123-456-7890',
+      },
+      sections: [
+        {
+          title: 'Basic Information',
+          fields: [
+            { name: 'name', label: 'Name' },
+            { name: 'email', label: 'Email' },
+          ],
+        },
+        {
+          title: 'Contact Information',
+          fields: [
+            { name: 'phone', label: 'Phone' },
+          ],
+        },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    expect(screen.getByText('Basic Information')).toBeInTheDocument();
+    expect(screen.getByText('Contact Information')).toBeInTheDocument();
+  });
+
+  it('should render tabs when provided', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Account Details',
+      data: { name: 'Acme Corp' },
+      tabs: [
+        {
+          key: 'details',
+          label: 'Details',
+          content: {
+            type: 'text',
+            text: 'Details content',
+          },
+        },
+        {
+          key: 'activity',
+          label: 'Activity',
+          content: {
+            type: 'text',
+            text: 'Activity content',
+          },
+        },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    expect(screen.getByText('Details')).toBeInTheDocument();
+    expect(screen.getByText('Activity')).toBeInTheDocument();
+  });
+
+  it('should render related lists when provided', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Account Details',
+      data: { name: 'Acme Corp' },
+      fields: [{ name: 'name', label: 'Name' }],
+      related: [
+        {
+          title: 'Contacts',
+          type: 'table',
+          data: [],
+        },
+      ],
+    };
+
+    render(<DetailView schema={schema} />);
+    
+    expect(screen.getByText('Contacts')).toBeInTheDocument();
+  });
+
+  it('should show loading skeleton when loading is true', () => {
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      data: { name: 'John Doe' },
+      fields: [{ name: 'name', label: 'Name' }],
+      loading: true,
+    };
+
+    const { container } = render(<DetailView schema={schema} />);
+    
+    // Check for skeleton elements (they typically have animate-pulse class)
+    // DetailedView uses Skeleton component which has animate-pulse class
+    const skeletons = container.querySelectorAll('.animate-pulse');
+    expect(skeletons.length).toBeGreaterThan(0);
+  });
+});

package/src/index.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
+import { DetailView } from './DetailView';
+import { DetailSection } from './DetailSection';
+import { DetailTabs } from './DetailTabs';
+import { RelatedList } from './RelatedList';
+import type { DetailViewSchema } from '@object-ui/types';
+
+export { DetailView, DetailSection, DetailTabs, RelatedList };
+export type { DetailViewProps } from './DetailView';
+export type { DetailSectionProps } from './DetailSection';
+export type { DetailTabsProps } from './DetailTabs';
+export type { RelatedListProps } from './RelatedList';
+
+// Register DetailView component
+ComponentRegistry.register('detail-view', DetailView, {
+  namespace: 'plugin-detail',
+  label: 'Detail View',
+  category: 'Views',
+  icon: 'FileText',
+  inputs: [
+    { name: 'title', type: 'string', label: 'Title' },
+    { name: 'objectName', type: 'string', label: 'Object Name' },
+    { name: 'resourceId', type: 'string', label: 'Resource ID' },
+    { name: 'api', type: 'string', label: 'API Endpoint' },
+    { name: 'data', type: 'object', label: 'Data' },
+    { name: 'sections', type: 'array', label: 'Sections' },
+    { name: 'fields', type: 'array', label: 'Fields' },
+    { name: 'tabs', type: 'array', label: 'Tabs' },
+    { name: 'related', type: 'array', label: 'Related Lists' },
+    { name: 'actions', type: 'array', label: 'Actions' },
+    { name: 'showBack', type: 'boolean', label: 'Show Back Button', defaultValue: true },
+    { name: 'showEdit', type: 'boolean', label: 'Show Edit Button', defaultValue: false },
+    { name: 'showDelete', type: 'boolean', label: 'Show Delete Button', defaultValue: false },
+  ],
+  defaultProps: {
+    title: 'Detail View',
+    showBack: true,
+    showEdit: false,
+    showDelete: false,
+    sections: [],
+    fields: [],
+    tabs: [],
+    related: [],
+  }
+});
+
+// Register DetailSection component
+ComponentRegistry.register('detail-section', DetailSection, {
+  namespace: 'plugin-detail',
+  label: 'Detail Section',
+  category: 'Detail Components',
+  inputs: [
+    { name: 'title', type: 'string', label: 'Title' },
+    { name: 'description', type: 'string', label: 'Description' },
+    { name: 'fields', type: 'array', label: 'Fields', required: true },
+    { name: 'collapsible', type: 'boolean', label: 'Collapsible', defaultValue: false },
+    { name: 'defaultCollapsed', type: 'boolean', label: 'Default Collapsed', defaultValue: false },
+    { name: 'columns', type: 'number', label: 'Columns', defaultValue: 2 },
+  ],
+});
+
+// Register RelatedList component
+ComponentRegistry.register('related-list', RelatedList, {
+  namespace: 'plugin-detail',
+  label: 'Related List',
+  category: 'Detail Components',
+  inputs: [
+    { name: 'title', type: 'string', label: 'Title', required: true },
+    { name: 'type', type: 'enum', label: 'Type', enum: [
+      { label: 'List', value: 'list' },
+      { label: 'Grid', value: 'grid' },
+      { label: 'Table', value: 'table' }
+    ], defaultValue: 'table' },
+    { name: 'api', type: 'string', label: 'API Endpoint' },
+    { name: 'data', type: 'array', label: 'Data' },
+    { name: 'columns', type: 'array', label: 'Columns' },
+  ],
+});

package/src/registration.test.tsx

@@ -0,0 +1,18 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Plugin Detail Registration', () => {
+  beforeAll(async () => {
+    await import('./index');
+  }, 15000); // Increase timeout to 15 seconds for async import
+
+  it('registers detail-view component', () => {
+    // We must use getConfig to retrieve the metadata (label, category, etc.)
+    // .get() only returns the React Component.
+    const config = ComponentRegistry.getConfig('detail-view');
+    
+    expect(config).toBeDefined();
+    expect(config?.label).toBe('Detail View');
+    expect(config?.category).toBe('Views');
+  });
+});

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "declarationMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}