@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/src/templates/admin/AdminDetailTemplate.tsx

@@ -1,563 +0,0 @@
-import React, { useState } from 'react';
-import { cn } from '../../atoms/utils/utils';
-import { SectionHeader } from '../../molecules/layout/SectionHeader';
-import { Card } from '../../atoms/ui/card';
-import { Button } from '../../atoms/ui/button';
-import { DataBadge } from '../../atoms/composed/DataBadge';
-import { UserAvatar } from '../../atoms/composed/UserAvatar';
-import { DataTable, type Column } from '../../atoms/composed/DataTable';
-import { 
-  ArrowLeft, 
-  Edit, 
-  Copy, 
-  ExternalLink,
-  History,
-  Activity,
-  FileText,
-  Save,
-  X
-} from 'lucide-react';
-
-export interface TabConfig {
-  /** Tab ID */
-  id: string;
-  /** Tab label */
-  label: string;
-  /** Tab icon */
-  icon?: React.ReactNode;
-  /** Tab content */
-  content: React.ReactNode;
-  /** Whether tab is disabled */
-  disabled?: boolean;
-  /** Badge text for tab */
-  badge?: string | number;
-}
-
-export interface ActionConfig {
-  /** Action ID */
-  id: string;
-  /** Action label */
-  label: string;
-  /** Action icon */
-  icon?: React.ReactNode;
-  /** Action variant */
-  variant?: 'default' | 'outline' | 'destructive' | 'secondary';
-  /** Action handler */
-  onClick: () => void;
-  /** Whether action is disabled */
-  disabled?: boolean;
-  /** Action permission required */
-  permission?: string;
-}
-
-export interface FieldSection {
-  /** Section title */
-  title: string;
-  /** Section description */
-  description?: string;
-  /** Section fields */
-  fields: DetailField[];
-  /** Section category for styling */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Whether section is collapsible */
-  collapsible?: boolean;
-  /** Whether section is initially collapsed */
-  defaultCollapsed?: boolean;
-}
-
-export interface DetailField {
-  /** Field key */
-  key: string;
-  /** Field label */
-  label: string;
-  /** Field type for rendering */
-  type?: 'text' | 'email' | 'phone' | 'url' | 'date' | 'datetime' | 'boolean' | 'badge' | 'avatar' | 'json' | 'custom';
-  /** Custom render function */
-  render?: (value: unknown, data: Record<string, unknown>) => React.ReactNode;
-  /** Whether field is editable inline */
-  editable?: boolean;
-  /** Field validation for editing */
-  validation?: Record<string, unknown>;
-  /** Copy to clipboard button */
-  copyable?: boolean;
-}
-
-export interface RelatedData {
-  /** Related data title */
-  title: string;
-  /** Related data description */
-  description?: string;
-  /** Related data items */
-  data: Record<string, unknown>[];
-  /** Columns for related data table */
-  columns: Column<Record<string, unknown>>[];
-  /** Actions for related data */
-  actions?: ActionConfig[];
-  /** Whether to show pagination */
-  showPagination?: boolean;
-  /** Category for styling */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-}
-
-export interface AuditEntry {
-  /** Entry ID */
-  id: string;
-  /** Action performed */
-  action: string;
-  /** User who performed action */
-  user: string;
-  /** Timestamp */
-  timestamp: Date;
-  /** Fields changed */
-  changes?: Array<{
-    field: string;
-    oldValue?: unknown;
-    newValue?: unknown;
-  }>;
-  /** Additional metadata */
-  metadata?: Record<string, unknown>;
-}
-
-export interface AdminDetailTemplateProps {
-  /** Resource title */
-  title: string;
-  /** Resource subtitle */
-  subtitle?: string;
-  /** Resource type */
-  resourceType: string;
-  /** Main resource data */
-  data: Record<string, unknown>;
-  /** Field sections to display */
-  sections: FieldSection[];
-  /** Tab configuration */
-  tabs?: TabConfig[];
-  /** Available actions */
-  actions?: ActionConfig[];
-  /** Related data sections */
-  relatedData?: RelatedData[];
-  /** Audit trail */
-  auditTrail?: AuditEntry[];
-  /** Back navigation handler */
-  onBack?: () => void;
-  /** Data update handler */
-  onUpdate?: (field: string, value: unknown) => Promise<void>;
-  /** Whether data is loading */
-  isLoading?: boolean;
-  /** Additional CSS classes */
-  className?: string;
-  /** Category for styling */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Custom sidebar content */
-  sidebar?: React.ReactNode;
-  /** Whether to show audit trail */
-  showAuditTrail?: boolean;
-}
-
-export const AdminDetailTemplate: React.FC<AdminDetailTemplateProps> = ({
-  title,
-  subtitle,
-  resourceType,
-  data,
-  sections,
-  tabs = [],
-  actions = [],
-  relatedData = [],
-  auditTrail = [],
-  onBack,
-  onUpdate,
-  isLoading = false,
-  className,
-  category = 1,
-  sidebar,
-  showAuditTrail = true
-}) => {
-  const [activeTab, setActiveTab] = useState(tabs[0]?.id || 'overview');
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [editValue, setEditValue] = useState<unknown>('');
-
-  const handleEdit = (field: DetailField, currentValue: unknown) => {
-    setEditingField(field.key);
-    setEditValue(currentValue);
-  };
-
-  const handleSaveEdit = async () => {
-    if (editingField && onUpdate) {
-      try {
-        await onUpdate(editingField, editValue);
-        setEditingField(null);
-        setEditValue('');
-      } catch (error) {
-        console.error('Update failed:', error);
-      }
-    }
-  };
-
-  const handleCancelEdit = () => {
-    setEditingField(null);
-    setEditValue('');
-  };
-
-  const copyToClipboard = (value: string) => {
-    navigator.clipboard.writeText(value);
-    // You could show a toast notification here
-  };
-
-  const renderFieldValue = (field: DetailField, value: unknown) => {
-    // If currently editing this field
-    if (editingField === field.key) {
-      return (
-        <div className="flex items-center gap-2">
-          <input
-            type="text"
-            value={String(editValue)}
-            onChange={(e) => setEditValue(e.target.value)}
-            className="flex-1 px-2 py-1 text-sm border border-input rounded"
-            autoFocus
-          />
-          <Button size="sm" onClick={handleSaveEdit}>
-            <Save className="w-3 h-3" />
-          </Button>
-          <Button size="sm" variant="outline" onClick={handleCancelEdit}>
-            <X className="w-3 h-3" />
-          </Button>
-        </div>
-      );
-    }
-
-    // Custom render function
-    if (field.render) {
-      return field.render(value, data);
-    }
-
-    // Default rendering based on type
-    const stringValue = String(value || '');
-    let displayValue: React.ReactNode;
-    
-    switch (field.type) {
-      case 'email':
-        displayValue = value ? (
-          <a href={`mailto:${stringValue}`} className="text-category-1 hover:underline">
-            {stringValue}
-          </a>
-        ) : '';
-        break;
-      case 'phone':
-        displayValue = value ? (
-          <a href={`tel:${stringValue}`} className="text-category-2 hover:underline">
-            {stringValue}
-          </a>
-        ) : '';
-        break;
-      case 'url':
-        displayValue = value ? (
-          <a href={stringValue} target="_blank" rel="noopener noreferrer" className="text-category-3 hover:underline inline-flex items-center">
-            {stringValue} <ExternalLink className="w-3 h-3 ml-1" />
-          </a>
-        ) : '';
-        break;
-      case 'date':
-        displayValue = value ? new Date(stringValue).toLocaleDateString() : '';
-        break;
-      case 'datetime':
-        displayValue = value ? new Date(stringValue).toLocaleString() : '';
-        break;
-      case 'boolean':
-        displayValue = (
-          <DataBadge 
-            variant="status" 
-            status={value ? 'success' : 'neutral'}
-            size="sm"
-          >
-            {value ? 'Yes' : 'No'}
-          </DataBadge>
-        );
-        break;
-      case 'badge':
-        displayValue = <DataBadge variant="category" category={1} size="sm">{stringValue}</DataBadge>;
-        break;
-      case 'avatar':
-        displayValue = <UserAvatar />;
-        break;
-      case 'json':
-        displayValue = (
-          <pre className="text-xs bg-muted p-2 rounded-md overflow-auto max-w-md">
-            {JSON.stringify(value, null, 2)}
-          </pre>
-        );
-        break;
-      default:
-        displayValue = stringValue;
-        break;
-    }
-
-    return (
-      <div className="flex items-center gap-2">
-        <span>{displayValue as React.ReactNode}</span>
-        {field.copyable && value != null && (
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={() => copyToClipboard(stringValue)}
-            className="h-6 w-6 p-0"
-          >
-            <Copy className="w-3 h-3" />
-          </Button>
-        )}
-        {field.editable && onUpdate && (
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={() => handleEdit(field, value)}
-            className="h-6 w-6 p-0"
-          >
-            <Edit className="w-3 h-3" />
-          </Button>
-        )}
-      </div>
-    );
-  };
-
-  const renderSection = (section: FieldSection) => (
-    <Card key={section.title} className="p-6">
-      <div className="mb-4">
-        <h3 className="text-lg font-semibold text-foreground">{section.title}</h3>
-        {section.description && (
-          <p className="text-sm text-muted-foreground mt-1">{section.description}</p>
-        )}
-      </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        {section.fields.map((field) => (
-          <div key={field.key} className="space-y-1">
-            <label className="text-sm font-medium text-muted-foreground">
-              {field.label}
-            </label>
-            <div className="text-sm text-foreground">
-              {renderFieldValue(field, data[field.key])}
-            </div>
-          </div>
-        ))}
-      </div>
-    </Card>
-  );
-
-  const renderAuditTrail = () => (
-    <Card className="p-6">
-      <div className="mb-4">
-        <h3 className="text-lg font-semibold flex items-center">
-          <History className="w-5 h-5 mr-2" />
-          Audit Trail
-        </h3>
-      </div>
-      <div className="space-y-4">
-        {auditTrail.map((entry) => (
-          <div key={entry.id} className="flex items-start space-x-3 pb-4 border-b border-border last:border-b-0">
-            <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center flex-shrink-0">
-              <Activity className="w-4 h-4 text-muted-foreground" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center justify-between">
-                <p className="text-sm font-medium text-foreground">
-                  {entry.action}
-                </p>
-                <span className="text-xs text-muted-foreground">
-                  {entry.timestamp.toLocaleString()}
-                </span>
-              </div>
-              <p className="text-xs text-muted-foreground mt-1">
-                by {entry.user}
-              </p>
-              {entry.changes && entry.changes.length > 0 && (
-                <div className="mt-2 space-y-1">
-                  {entry.changes.map((change, index) => (
-                    <div key={index} className="text-xs bg-muted p-2 rounded-md">
-                      <span className="font-medium">{change.field}:</span>{' '}
-                      <span className="text-category-8">{String(change.oldValue || 'null')}</span>{' '}
-                      →{' '}
-                      <span className="text-category-2">{String(change.newValue || 'null')}</span>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    </Card>
-  );
-
-  const renderRelatedData = (related: RelatedData) => (
-    <Card key={related.title} className="p-6">
-      <div className="mb-4 flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold">{related.title}</h3>
-          {related.description && (
-            <p className="text-sm text-muted-foreground mt-1">{related.description}</p>
-          )}
-        </div>
-        {related.actions && related.actions.length > 0 && (
-          <div className="flex gap-2">
-            {related.actions.map((action) => (
-              <Button
-                key={action.id}
-                variant={action.variant || 'outline'}
-                size="sm"
-                onClick={action.onClick}
-                disabled={action.disabled}
-              >
-                {action.icon}
-                {action.label}
-              </Button>
-            ))}
-          </div>
-        )}
-      </div>
-      <DataTable
-        data={related.data}
-        columns={related.columns}
-        isLoading={isLoading}
-        hover
-      />
-    </Card>
-  );
-
-  // Build tabs
-  const allTabs = [
-    {
-      id: 'overview',
-      label: 'Overview',
-      icon: <FileText className="w-4 h-4" />,
-      content: (
-        <div className="space-y-6">
-          {sections.map(renderSection)}
-        </div>
-      ),
-    },
-    ...tabs,
-    ...(relatedData.length > 0 ? [{
-      id: 'related',
-      label: 'Related Data',
-      icon: <Activity className="w-4 h-4" />,
-      content: (
-        <div className="space-y-6">
-          {relatedData.map(renderRelatedData)}
-        </div>
-      ),
-    }] : []),
-    ...(showAuditTrail && auditTrail.length > 0 ? [{
-      id: 'audit',
-      label: 'Audit Trail',
-      icon: <History className="w-4 h-4" />,
-      badge: auditTrail.length,
-      content: renderAuditTrail(),
-    }] : []),
-  ];
-
-  return (
-    <div className={cn('flex flex-col min-h-0 flex-1', className)}>
-      {/* Header Section */}
-      <div className="flex-shrink-0 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container mx-auto px-6 py-6">
-          <div className="flex items-start justify-between">
-            <div className="flex-1 min-w-0">
-              {onBack && (
-                <Button
-                  variant="ghost"
-                  onClick={onBack}
-                  className="mb-4 -ml-3"
-                >
-                  <ArrowLeft className="w-4 h-4 mr-2" />
-                  Back to {resourceType}
-                </Button>
-              )}
-              <SectionHeader
-                title={title}
-                subtitle={subtitle}
-                size="lg"
-                className="text-left"
-              />
-            </div>
-            
-            {actions.length > 0 && (
-              <div className="ml-6 flex-shrink-0 flex items-center gap-2">
-                {actions.map((action) => (
-                  <Button
-                    key={action.id}
-                    variant={action.variant || 'outline'}
-                    onClick={action.onClick}
-                    disabled={action.disabled}
-                  >
-                    {action.icon}
-                    {action.label}
-                  </Button>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 min-h-0 overflow-auto">
-        <div className="container mx-auto px-6 py-6">
-          <div className={cn(
-            'grid gap-6',
-            sidebar ? 'grid-cols-1 lg:grid-cols-4' : 'grid-cols-1'
-          )}>
-            
-            {/* Main Content */}
-            <div className={sidebar ? 'lg:col-span-3' : 'col-span-1'}>
-              {allTabs.length > 1 ? (
-                <div className="space-y-6">
-                  {/* Tab Navigation */}
-                  <div className="border-b border-border">
-                    <nav className="-mb-px flex space-x-8">
-                      {allTabs.map((tab) => (
-                        <button
-                          key={tab.id}
-                          onClick={() => setActiveTab(tab.id)}
-                          className={cn(
-                            'py-2 px-1 border-b-2 font-medium text-sm whitespace-nowrap',
-                            activeTab === tab.id
-                              ? `border-category-${category} text-category-${category}`
-                              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
-                          )}
-                        >
-                          <div className="flex items-center gap-2">
-                            {tab.icon}
-                            {tab.label}
-                            {tab.badge && (
-                              <span className={cn(
-                                'ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium',
-                                `bg-category-${category}/20 text-category-${category}`
-                              )}>
-                                {tab.badge}
-                              </span>
-                            )}
-                          </div>
-                        </button>
-                      ))}
-                    </nav>
-                  </div>
-
-                  {/* Tab Content */}
-                  <div>
-                    {allTabs.find(tab => tab.id === activeTab)?.content}
-                  </div>
-                </div>
-              ) : (
-                allTabs[0]?.content
-              )}
-            </div>
-
-            {/* Sidebar */}
-            {sidebar && (
-              <div className="lg:col-span-1">
-                {sidebar}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/templates/admin/index.ts

@@ -1,29 +0,0 @@
-// Admin template exports
-export { 
-  AdminDashboardTemplate,
-  type AdminDashboardTemplateProps,
-  type MetricCard,
-  type ChartConfig,
-  type ActivityItem,
-  type AlertItem
-} from './AdminDashboardTemplate';
-
-export { 
-  AdminCRUDTemplate,
-  type AdminCRUDTemplateProps,
-  type ResourceSchema,
-  type ResourceField,
-  type CRUDPermissions,
-  type CRUDActions
-} from './AdminCRUDTemplate';
-
-export { 
-  AdminDetailTemplate,
-  type AdminDetailTemplateProps,
-  type TabConfig,
-  type ActionConfig,
-  type FieldSection,
-  type DetailField,
-  type RelatedData,
-  type AuditEntry
-} from './AdminDetailTemplate';