@pattern-stack/frontend-patterns 1.0.0

package/src/pages/AdminShowcase/AdminDetailShowcase.tsx

@@ -0,0 +1,385 @@
+import React, { useState } from 'react';
+import { AdminDetailTemplate } from '../../templates/admin';
+import type { FieldSection, ActionConfig, AuditEntry, RelatedData } from '../../templates/admin';
+import { Edit, Trash2, Lock, Mail, Phone, Calendar } from 'lucide-react';
+
+// Mock user data
+const mockUserData = {
+  id: '1',
+  name: 'John Doe',
+  email: 'john.doe@example.com',
+  phone: '+1 (555) 123-4567',
+  role: 'Administrator',
+  department: 'Engineering',
+  location: 'San Francisco, CA',
+  isActive: true,
+  lastLogin: '2024-01-15T10:30:00Z',
+  createdAt: '2023-06-15T08:00:00Z',
+  updatedAt: '2024-01-15T10:30:00Z',
+  avatar: 'https://api.dicebear.com/7.x/initials/svg?seed=John Doe',
+  bio: 'Senior software engineer with 8 years of experience in full-stack development.',
+  permissions: ['read', 'write', 'admin'],
+  preferences: {
+    theme: 'dark',
+    notifications: true,
+    language: 'en'
+  }
+};
+
+const fieldSections: FieldSection[] = [
+  {
+    title: 'Basic Information',
+    description: 'Primary user details and contact information',
+    category: 1,
+    fields: [
+      {
+        key: 'name',
+        label: 'Full Name',
+        type: 'text',
+        editable: true,
+        copyable: true
+      },
+      {
+        key: 'email',
+        label: 'Email Address',
+        type: 'email',
+        editable: true,
+        copyable: true
+      },
+      {
+        key: 'phone',
+        label: 'Phone Number',
+        type: 'phone',
+        editable: true,
+        copyable: true
+      },
+      {
+        key: 'location',
+        label: 'Location',
+        type: 'text',
+        editable: true
+      }
+    ]
+  },
+  {
+    title: 'Role & Permissions',
+    description: 'User role and system access permissions',
+    category: 2,
+    fields: [
+      {
+        key: 'role',
+        label: 'Role',
+        type: 'badge',
+        editable: true
+      },
+      {
+        key: 'department',
+        label: 'Department',
+        type: 'text',
+        editable: true
+      },
+      {
+        key: 'isActive',
+        label: 'Account Status',
+        type: 'boolean',
+        editable: true
+      },
+      {
+        key: 'permissions',
+        label: 'Permissions',
+        type: 'custom',
+        render: (value) => (
+          <div className="flex gap-1 flex-wrap">
+            {(value as string[]).map((permission) => (
+              <span
+                key={permission}
+                className="px-2 py-1 text-xs bg-category-2/10 text-category-2 rounded-md"
+              >
+                {permission}
+              </span>
+            ))}
+          </div>
+        )
+      }
+    ]
+  },
+  {
+    title: 'Activity & Timestamps',
+    description: 'Account activity and important dates',
+    category: 3,
+    fields: [
+      {
+        key: 'lastLogin',
+        label: 'Last Login',
+        type: 'datetime'
+      },
+      {
+        key: 'createdAt',
+        label: 'Account Created',
+        type: 'datetime'
+      },
+      {
+        key: 'updatedAt',
+        label: 'Last Updated',
+        type: 'datetime'
+      }
+    ]
+  },
+  {
+    title: 'Preferences',
+    description: 'User preferences and settings',
+    category: 4,
+    fields: [
+      {
+        key: 'preferences',
+        label: 'User Preferences',
+        type: 'json'
+      },
+      {
+        key: 'bio',
+        label: 'Biography',
+        type: 'text',
+        editable: true
+      }
+    ]
+  }
+];
+
+const actions: ActionConfig[] = [
+  {
+    id: 'edit',
+    label: 'Edit User',
+    icon: <Edit className="w-4 h-4 mr-2" />,
+    variant: 'default',
+    onClick: () => console.log('Edit user')
+  },
+  {
+    id: 'reset-password',
+    label: 'Reset Password',
+    icon: <Lock className="w-4 h-4 mr-2" />,
+    variant: 'outline',
+    onClick: () => console.log('Reset password')
+  },
+  {
+    id: 'send-email',
+    label: 'Send Email',
+    icon: <Mail className="w-4 h-4 mr-2" />,
+    variant: 'outline',
+    onClick: () => console.log('Send email')
+  },
+  {
+    id: 'delete',
+    label: 'Delete User',
+    icon: <Trash2 className="w-4 h-4 mr-2" />,
+    variant: 'destructive',
+    onClick: () => console.log('Delete user')
+  }
+];
+
+const auditTrail: AuditEntry[] = [
+  {
+    id: '1',
+    action: 'User profile updated',
+    user: 'admin.user',
+    timestamp: new Date(Date.now() - 60 * 60 * 1000),
+    changes: [
+      { field: 'phone', oldValue: '+1 (555) 123-4566', newValue: '+1 (555) 123-4567' },
+      { field: 'location', oldValue: 'New York, NY', newValue: 'San Francisco, CA' }
+    ]
+  },
+  {
+    id: '2',
+    action: 'Password reset requested',
+    user: 'john.doe',
+    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
+  },
+  {
+    id: '3',
+    action: 'Role changed from Editor to Administrator',
+    user: 'admin.user',
+    timestamp: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+    changes: [
+      { field: 'role', oldValue: 'Editor', newValue: 'Administrator' }
+    ]
+  },
+  {
+    id: '4',
+    action: 'Account created',
+    user: 'system',
+    timestamp: new Date('2023-06-15T08:00:00Z')
+  }
+];
+
+const relatedData: RelatedData[] = [
+  {
+    title: 'Recent Projects',
+    description: 'Projects the user has been involved with',
+    data: [
+      {
+        id: '1',
+        name: 'E-commerce Platform',
+        role: 'Lead Developer',
+        status: 'Active',
+        lastActivity: '2024-01-15'
+      },
+      {
+        id: '2', 
+        name: 'Mobile App Redesign',
+        role: 'Technical Lead',
+        status: 'Completed',
+        lastActivity: '2024-01-10'
+      },
+      {
+        id: '3',
+        name: 'API Migration',
+        role: 'Senior Developer',
+        status: 'In Progress',
+        lastActivity: '2024-01-14'
+      }
+    ],
+    columns: [
+      { key: 'name', header: 'Project Name' },
+      { key: 'role', header: 'Role' },
+      { key: 'status', header: 'Status', cell: (item) => (
+        <span className={`px-2 py-1 text-xs rounded-md ${
+          item.status === 'Active' ? 'bg-category-2/10 text-category-2' :
+          item.status === 'Completed' ? 'bg-category-3/10 text-category-3' :
+          'bg-category-1/10 text-category-1'
+        }`}>
+          {item.status as string}
+        </span>
+      )},
+      { key: 'lastActivity', header: 'Last Activity', cell: (item) => 
+        new Date(item.lastActivity as string).toLocaleDateString()
+      }
+    ],
+    actions: [
+      {
+        id: 'view-project',
+        label: 'View All Projects',
+        variant: 'outline',
+        onClick: () => console.log('View all projects')
+      }
+    ],
+    category: 1
+  },
+  {
+    title: 'Team Members',
+    description: 'Other team members in the same department',
+    data: [
+      {
+        id: '2',
+        name: 'Sarah Wilson',
+        role: 'Product Manager',
+        email: 'sarah.wilson@example.com'
+      },
+      {
+        id: '3',
+        name: 'Mike Johnson',
+        role: 'Designer',
+        email: 'mike.johnson@example.com'
+      },
+      {
+        id: '4',
+        name: 'Emily Davis',
+        role: 'QA Engineer',
+        email: 'emily.davis@example.com'
+      }
+    ],
+    columns: [
+      { key: 'name', header: 'Name' },
+      { key: 'role', header: 'Role' },
+      { key: 'email', header: 'Email', cell: (item) => (
+        <a href={`mailto:${item.email}`} className="text-category-1 hover:underline">
+          {item.email as string}
+        </a>
+      )}
+    ],
+    category: 2
+  }
+];
+
+export const AdminDetailShowcase: React.FC = () => {
+  const [userData, setUserData] = useState(mockUserData);
+
+  const handleUpdate = async (field: string, value: unknown) => {
+    console.log('Updating field:', field, 'with value:', value);
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    setUserData(prev => ({
+      ...prev,
+      [field]: value,
+      updatedAt: new Date().toISOString()
+    }));
+  };
+
+  const handleBack = () => {
+    console.log('Navigate back to users list');
+  };
+
+  const sidebar = (
+    <div className="space-y-6">
+      {/* Quick Actions */}
+      <div className="bg-muted/30 rounded-lg p-4">
+        <h4 className="font-medium text-sm mb-3 text-foreground">Quick Actions</h4>
+        <div className="space-y-2">
+          <button className="w-full text-left text-sm p-2 rounded-md hover:bg-muted flex items-center">
+            <Mail className="w-4 h-4 mr-2" />
+            Send Message
+          </button>
+          <button className="w-full text-left text-sm p-2 rounded-md hover:bg-muted flex items-center">
+            <Phone className="w-4 h-4 mr-2" />
+            Schedule Call
+          </button>
+          <button className="w-full text-left text-sm p-2 rounded-md hover:bg-muted flex items-center">
+            <Calendar className="w-4 h-4 mr-2" />
+            View Calendar
+          </button>
+        </div>
+      </div>
+
+      {/* User Stats */}
+      <div className="bg-muted/30 rounded-lg p-4">
+        <h4 className="font-medium text-sm mb-3 text-foreground">Statistics</h4>
+        <div className="space-y-3">
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Projects</span>
+            <span className="font-medium">12</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Tasks Completed</span>
+            <span className="font-medium">147</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Hours Logged</span>
+            <span className="font-medium">1,248</span>
+          </div>
+          <div className="flex justify-between text-sm">
+            <span className="text-muted-foreground">Team Rating</span>
+            <span className="font-medium">4.8/5</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <AdminDetailTemplate
+      title={userData.name}
+      subtitle={`${userData.role} • ${userData.department}`}
+      resourceType="Users"
+      data={userData}
+      sections={fieldSections}
+      actions={actions}
+      relatedData={relatedData}
+      auditTrail={auditTrail}
+      onBack={handleBack}
+      onUpdate={handleUpdate}
+      category={1}
+      sidebar={sidebar}
+      showAuditTrail={true}
+    />
+  );
+};

package/src/pages/AdminShowcase/index.tsx

@@ -0,0 +1,3 @@
+export { AdminDashboardShowcase } from './AdminDashboardShowcase';
+export { AdminCRUDShowcase } from './AdminCRUDShowcase';
+export { AdminDetailShowcase } from './AdminDetailShowcase';

package/src/pages/ComponentShowcase/BadgesShowcase.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { ComponentShowcaseTemplate } from '../../templates';
+import { DataBadge } from '../../atoms/composed';
+import { Badge } from '../../atoms/ui';
+import { CheckCircle, AlertTriangle, XCircle, Info, Clock } from 'lucide-react';
+
+export const BadgesShowcase: React.FC = () => {
+  return (
+    <ComponentShowcaseTemplate
+      category={1}
+      title="Badges"
+      description="Semantic badges for categorizing and indicating status in data interfaces."
+      primaryComponent={{
+        title: "Badge Component",
+        description: "Foundation badge component with multiple variants, sizes, and states. Base for all badge-based components.",
+        badge: {
+          text: "UI Foundation",
+          variant: "category",
+          category: 1
+        },
+        children: (
+          <div className="space-y-6">
+            {/* Basic Badge Variants */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Badge Variants</h4>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="default">Default</Badge>
+                <Badge variant="secondary">Secondary</Badge>
+                <Badge variant="destructive">Destructive</Badge>
+                <Badge variant="outline">Outline</Badge>
+              </div>
+            </div>
+
+            {/* Badge Sizes */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">Sizes</h4>
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge variant="default" className="text-xs px-2 py-0.5">Small</Badge>
+                <Badge variant="default">Medium</Badge>
+                <Badge variant="default" className="text-base px-3 py-1.5">Large</Badge>
+              </div>
+            </div>
+
+            {/* Badge with Icons */}
+            <div className="space-y-4">
+              <h4 className="text-base font-medium">With Icons</h4>
+              <div className="flex flex-wrap gap-2">
+                <Badge variant="default">
+                  <CheckCircle className="w-3 h-3 mr-1" />
+                  Success
+                </Badge>
+                <Badge variant="destructive">
+                  <XCircle className="w-3 h-3 mr-1" />
+                  Error
+                </Badge>
+                <Badge variant="outline">
+                  <Info className="w-3 h-3 mr-1" />
+                  Info
+                </Badge>
+              </div>
+            </div>
+          </div>
+        )
+      }}
+      composedExamples={{
+        title: "Business Badge Components",
+        description: "Specialized badge components built for specific data interface use cases with enhanced functionality.",
+        sections: [
+          {
+            title: "DataBadge Component",
+            description: "Enhanced badge component with category theming, status variants, and interactive capabilities for data interfaces.",
+            badge: {
+              text: "Business Component",
+              variant: "category",
+              category: 2
+            },
+            category: 2,
+            children: (
+              <div className="space-y-6">
+                {/* Basic DataBadge Usage */}
+                <div className="space-y-4">
+                  <h4 className="text-base font-medium">Basic Usage</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <DataBadge variant="category" category={1}>Category 1</DataBadge>
+                    <DataBadge variant="status" status="success">Success</DataBadge>
+                    <DataBadge variant="status" status="neutral">Neutral</DataBadge>
+                  </div>
+                </div>
+
+                {/* DataBadge Sizes */}
+                <div className="space-y-4">
+                  <h4 className="text-base font-medium">Sizes</h4>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <DataBadge variant="category" category={2} size="sm">Small</DataBadge>
+                    <DataBadge variant="category" category={2} size="md">Medium</DataBadge>
+                    <DataBadge variant="category" category={2} size="lg">Large</DataBadge>
+                  </div>
+                </div>
+
+                {/* Interactive DataBadge */}
+                <div className="space-y-4">
+                  <h4 className="text-base font-medium">Interactive</h4>
+                  <div className="flex flex-wrap gap-2">
+                    <DataBadge 
+                      variant="category" 
+                      category={3} 
+                      interactive 
+                      onClick={() => alert('Badge clicked!')}
+                    >
+                      Clickable Badge
+                    </DataBadge>
+                  </div>
+                </div>
+              </div>
+            )
+          },
+          {
+            title: "Category Badges",
+            description: "Use category badges to classify and organize different types of content, data, or functionality.",
+            badge: {
+              text: "8 Categories",
+              variant: "category",
+              category: 1
+            },
+            category: 2,
+            children: (
+              <div className="space-y-4">
+                <div className="flex flex-wrap gap-2">
+                  {[1, 2, 3, 4, 5, 6, 7, 8].map(category => (
+                    <DataBadge key={category} variant="category" category={category as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}>
+                      Category {category}
+                    </DataBadge>
+                  ))}
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <DataBadge variant="category" category={1} size="sm">Small</DataBadge>
+                  <DataBadge variant="category" category={2} size="md">Medium</DataBadge>
+                  <DataBadge variant="category" category={3} size="lg">Large</DataBadge>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  <DataBadge variant="category" category={4} interactive onClick={() => alert('Clicked!')}>
+                    Interactive
+                  </DataBadge>
+                </div>
+              </div>
+            )
+          },
+          {
+            title: "Status Badges",
+            description: "Use status badges to communicate operational states, health indicators, and system feedback.",
+            badge: {
+              text: "5 States",
+              variant: "status",
+              status: "success"
+            },
+            category: 2,
+            children: (
+              <div className="space-y-4">
+                <div className="flex flex-wrap gap-2">
+                  <DataBadge variant="status" status="success">
+                    <CheckCircle className="w-3 h-3 mr-1" />
+                    Success
+                  </DataBadge>
+                  <DataBadge variant="status" status="warning">
+                    <AlertTriangle className="w-3 h-3 mr-1" />
+                    Warning
+                  </DataBadge>
+                  <DataBadge variant="status" status="error">
+                    <XCircle className="w-3 h-3 mr-1" />
+                    Error
+                  </DataBadge>
+                  <DataBadge variant="status" status="info">
+                    <Info className="w-3 h-3 mr-1" />
+                    Info
+                  </DataBadge>
+                  <DataBadge variant="status" status="neutral">
+                    <Clock className="w-3 h-3 mr-1" />
+                    Neutral
+                  </DataBadge>
+                </div>
+              </div>
+            )
+          }
+        ]
+      }}
+    />
+  );
+};