@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

package/src/pages/AdminShowcase/AdminDetailShowcase.tsx

@@ -1,385 +0,0 @@
-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

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

package/src/pages/ComponentShowcase/BadgesShowcase.tsx

@@ -1,188 +0,0 @@
-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>
-            )
-          }
-        ]
-      }}
-    />
-  );
-};