@object-ui/plugin-detail 2.0.0 → 3.0.0

package/src/DetailSection.tsx

@@ -7,8 +7,23 @@
  */
 
 import * as React from 'react';
-import { cn, Card, CardHeader, CardTitle, CardContent, Collapsible, CollapsibleTrigger, CollapsibleContent } from '@object-ui/components';
-import { ChevronDown, ChevronRight } from 'lucide-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 type { DetailViewSection as DetailViewSectionType } from '@object-ui/types';
 
@@ -24,6 +39,15 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
   className,
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
+  const [copiedField, setCopiedField] = React.useState<string | null>(null);
+
+  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);
+    });
+  }, []);
 
   const renderField = (field: any) => {
     const value = data?.[field.name] ?? field.value;
@@ -41,14 +65,60 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
                       field.span === 5 ? 'col-span-5' :
                       field.span === 6 ? 'col-span-6' : '';
 
-    // Default field rendering
+    const displayValue = value !== null && value !== undefined ? 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", spanClass)}>
-        <div className="text-sm font-medium text-muted-foreground">
+      <div key={field.name} className={cn("space-y-1.5 group", spanClass)}>
+        <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           {field.label || field.name}
         </div>
-        <div className="text-sm">
-          {value !== null && value !== undefined ? String(value) : '-'}
+        <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 ? 'Copied!' : 'Copy to clipboard'}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
         </div>
       </div>
     );
@@ -57,11 +127,11 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
   const content = (
     <div 
       className={cn(
-        "grid gap-4",
+        "grid gap-3 sm:gap-4",
         section.columns === 1 ? "grid-cols-1" :
-        section.columns === 2 ? "grid-cols-2" :
-        section.columns === 3 ? "grid-cols-3" :
-        "grid-cols-2 md:grid-cols-3"
+        section.columns === 2 ? "grid-cols-1 sm:grid-cols-2" :
+        section.columns === 3 ? "grid-cols-1 sm:grid-cols-2 md:grid-cols-3" :
+        "grid-cols-1 sm:grid-cols-2 md:grid-cols-3"
       )}
     >
       {section.fields.map(renderField)}
@@ -70,19 +140,26 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
 
   if (!section.collapsible) {
     return (
-      <Card className={className}>
+      <Card className={cn(section.showBorder === false ? 'border-none shadow-none' : '', className)}>
         {section.title && (
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              {section.icon && <span className="text-muted-foreground">{section.icon}</span>}
-              <span>{section.title}</span>
+          <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">{section.description}</p>
+              <p className="text-sm text-muted-foreground mt-1.5">{section.description}</p>
             )}
           </CardHeader>
         )}
-        <CardContent>
+        <CardContent className="pt-4 sm:pt-6 px-3 sm:px-6">
           {content}
         </CardContent>
       </Card>
@@ -97,21 +174,35 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
     >
       <Card>
         <CollapsibleTrigger asChild>
-          <CardHeader className="cursor-pointer hover:bg-muted/50 transition-colors">
+          <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>
-              {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
             </CardTitle>
             {section.description && !isCollapsed && (
-              <p className="text-sm text-muted-foreground mt-1">{section.description}</p>
+              <p className="text-sm text-muted-foreground mt-1.5">{section.description}</p>
             )}
           </CardHeader>
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <CardContent>
+          <CardContent className="pt-4 sm:pt-6 px-3 sm:px-6">
             {content}
           </CardContent>
         </CollapsibleContent>

package/src/DetailView.stories.tsx

@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { Building2, User } from 'lucide-react';
+
+const meta = {
+  title: 'Plugins/DetailView',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Enhanced detail view component with Airtable-inspired features: tooltips, functional menus, collapsible sections, and copy-to-clipboard.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Employee Details',
+    data: {
+      name: 'Sarah Connor',
+      email: 'sarah.connor@example.com',
+      phone: '+1 (555) 867-5309',
+      department: 'Engineering',
+      role: 'Tech Lead',
+      location: 'Austin, TX',
+    },
+    fields: [
+      { name: 'name', label: 'Full Name' },
+      { name: 'email', label: 'Email' },
+      { name: 'phone', label: 'Phone' },
+      { name: 'department', label: 'Department' },
+      { name: 'role', label: 'Role' },
+      { name: 'location', label: 'Location' },
+    ],
+    showBack: true,
+    showEdit: true,
+    showDelete: true,
+  } as any,
+};
+
+export const WithSections: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Account: TechCorp Inc.',
+    data: {
+      name: 'TechCorp Inc.',
+      industry: 'Software',
+      website: 'https://techcorp.io',
+      employees: '200-500',
+      revenue: '$25M - $50M',
+      street: '456 Innovation Blvd',
+      city: 'Seattle',
+      state: 'WA',
+      zipcode: '98101',
+      country: 'USA',
+    },
+    sections: [
+      {
+        title: 'Company Info',
+        icon: '🏢',
+        fields: [
+          { name: 'name', label: 'Company Name' },
+          { name: 'industry', label: 'Industry' },
+          { name: 'website', label: 'Website' },
+          { name: 'employees', label: 'Employees' },
+          { name: 'revenue', label: 'Annual Revenue' },
+        ],
+        columns: 2,
+      },
+      {
+        title: 'Address',
+        icon: '📍',
+        collapsible: true,
+        fields: [
+          { name: 'street', label: 'Street' },
+          { name: 'city', label: 'City' },
+          { name: 'state', label: 'State' },
+          { name: 'zipcode', label: 'Zip Code' },
+          { name: 'country', label: 'Country' },
+        ],
+        columns: 2,
+      },
+    ],
+    showBack: true,
+    showEdit: true,
+    showDelete: true,
+  } as any,
+};
+
+export const WithRelatedLists: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Account: TechCorp Inc.',
+    data: {
+      name: 'TechCorp Inc.',
+      industry: 'Software',
+    },
+    fields: [
+      { name: 'name', label: 'Account Name' },
+      { name: 'industry', label: 'Industry' },
+    ],
+    related: [
+      {
+        title: 'Contacts',
+        type: 'table',
+        data: [
+          { id: '1', name: 'Mike Ross', email: 'mike@techcorp.io', title: 'VP Engineering' },
+          { id: '2', name: 'Lisa Chen', email: 'lisa@techcorp.io', title: 'Product Manager' },
+        ],
+        columns: ['name', 'email', 'title'],
+      },
+      {
+        title: 'Opportunities',
+        type: 'table',
+        data: [
+          { id: '1', name: 'Enterprise License', amount: '$120,000', stage: 'Negotiation' },
+          { id: '2', name: 'Support Contract', amount: '$45,000', stage: 'Proposal' },
+        ],
+        columns: ['name', 'amount', 'stage'],
+      },
+    ],
+    showBack: true,
+    showEdit: true,
+    showDelete: true,
+  } as any,
+};
+
+/**
+ * Enhanced view showcasing new Airtable-inspired features
+ */
+export const EnhancedAirtableStyle: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Sarah Johnson',
+    objectName: 'Contact',
+    resourceId: 'CNT-001',
+    showEdit: true,
+    showDelete: true,
+    showBack: true,
+    data: {
+      name: 'Sarah Johnson',
+      email: 'sarah.johnson@example.com',
+      phone: '+1 (555) 123-4567',
+      company: 'Acme Corporation',
+      title: 'Senior Product Manager',
+      department: 'Product',
+      location: 'San Francisco, CA',
+      website: 'https://example.com',
+      notes: 'Key decision maker for enterprise deals. Prefers email communication.',
+      linkedin: 'linkedin.com/in/sarahjohnson',
+      twitter: '@sarahjohnson',
+      status: 'Active',
+      lead_source: 'Website',
+    },
+    sections: [
+      {
+        title: 'Contact Information',
+        description: 'Primary contact details',
+        collapsible: false,
+        columns: 2,
+        fields: [
+          { name: 'email', label: 'Email' },
+          { name: 'phone', label: 'Phone' },
+          { name: 'title', label: 'Job Title' },
+          { name: 'department', label: 'Department' },
+          { name: 'location', label: 'Location' },
+          { name: 'website', label: 'Website' },
+        ],
+      },
+      {
+        title: 'Company Details',
+        collapsible: true,
+        defaultCollapsed: false,
+        columns: 2,
+        fields: [
+          { name: 'company', label: 'Company Name' },
+          { name: 'status', label: 'Status' },
+          { name: 'lead_source', label: 'Lead Source' },
+        ],
+      },
+      {
+        title: 'Social Media',
+        collapsible: true,
+        defaultCollapsed: true,
+        columns: 1,
+        fields: [
+          { name: 'linkedin', label: 'LinkedIn' },
+          { name: 'twitter', label: 'Twitter' },
+        ],
+      },
+    ],
+  } as any,
+};
+
+/**
+ * View with field count badges in section headers
+ */
+export const WithFieldCounts: Story = {
+  render: renderStory,
+  args: {
+    type: 'detail-view',
+    title: 'Deal Overview',
+    objectName: 'Deal',
+    resourceId: 'DEAL-456',
+    showEdit: true,
+    data: {
+      name: 'Enterprise License',
+      amount: '$120,000',
+      stage: 'Negotiation',
+      probability: '75%',
+      close_date: '2024-03-31',
+      owner: 'Sarah Johnson',
+      account: 'TechCorp Inc.',
+      contact: 'Mike Ross',
+      created: '2024-01-15',
+    },
+    sections: [
+      {
+        title: 'Deal Information',
+        columns: 2,
+        fields: [
+          { name: 'name', label: 'Deal Name', span: 2 },
+          { name: 'amount', label: 'Amount' },
+          { name: 'stage', label: 'Stage' },
+          { name: 'probability', label: 'Win Probability' },
+          { name: 'close_date', label: 'Expected Close' },
+        ],
+      },
+      {
+        title: 'Related Records',
+        collapsible: true,
+        columns: 2,
+        fields: [
+          { name: 'account', label: 'Account' },
+          { name: 'contact', label: 'Primary Contact' },
+          { name: 'owner', label: 'Deal Owner' },
+        ],
+      },
+    ],
+  } as any,
+};