@pattern-stack/frontend-patterns 1.0.0

package/src/organisms/showcase/index.ts

@@ -0,0 +1 @@
+export { ComponentShowcasePage } from './ComponentShowcasePage';

package/src/pages/AdminShowcase/AdminCRUDShowcase.tsx

@@ -0,0 +1,242 @@
+import React, { useState } from 'react';
+import { AdminCRUDTemplate } from '../../templates/admin';
+import type { ResourceSchema, CRUDPermissions, CRUDActions } from '../../templates/admin';
+import { DataBadge } from '../../atoms/composed';
+
+// Mock user data
+const mockUsers = [
+  {
+    id: '1',
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    role: 'Admin',
+    status: 'Active',
+    lastLogin: '2024-01-15',
+    isActive: true
+  },
+  {
+    id: '2',
+    name: 'Sarah Wilson',
+    email: 'sarah.wilson@example.com',
+    role: 'Editor',
+    status: 'Active',
+    lastLogin: '2024-01-14',
+    isActive: true
+  },
+  {
+    id: '3',
+    name: 'Mike Johnson',
+    email: 'mike.johnson@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    lastLogin: '2024-01-10',
+    isActive: false
+  },
+  {
+    id: '4',
+    name: 'Emily Davis',
+    email: 'emily.davis@example.com',
+    role: 'Editor',
+    status: 'Active',
+    lastLogin: '2024-01-15',
+    isActive: true
+  },
+  {
+    id: '5',
+    name: 'Alex Chen',
+    email: 'alex.chen@example.com',
+    role: 'Admin',
+    status: 'Active',
+    lastLogin: '2024-01-13',
+    isActive: true
+  }
+];
+
+const userSchema: ResourceSchema = {
+  primaryKey: 'id',
+  displayName: 'User',
+  displayNamePlural: 'Users',
+  fields: [
+    {
+      name: 'name',
+      label: 'Full Name',
+      type: 'text',
+      required: true,
+      searchable: true,
+      showInTable: true
+    },
+    {
+      name: 'email',
+      label: 'Email Address',
+      type: 'email',
+      required: true,
+      searchable: true,
+      showInTable: true
+    },
+    {
+      name: 'role',
+      label: 'Role',
+      type: 'select',
+      required: true,
+      showInTable: true,
+      options: [
+        { value: 'admin', label: 'Administrator' },
+        { value: 'editor', label: 'Editor' },
+        { value: 'viewer', label: 'Viewer' }
+      ],
+      render: (value) => {
+        const roleCategories: Record<string, 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8> = {
+          'Admin': 1,
+          'Editor': 2, 
+          'Viewer': 6
+        };
+        return (
+          <DataBadge 
+            variant="category" 
+            category={roleCategories[value as string] || 3}
+          >
+            {value as string}
+          </DataBadge>
+        );
+      }
+    },
+    {
+      name: 'isActive',
+      label: 'Active Status',
+      type: 'boolean',
+      required: true,
+      showInTable: true
+    },
+    {
+      name: 'lastLogin',
+      label: 'Last Login',
+      type: 'date',
+      showInTable: true
+    }
+  ]
+};
+
+const permissions: CRUDPermissions = {
+  view: true,
+  create: true,
+  edit: true,
+  delete: true,
+  export: true,
+  import: true,
+  bulkEdit: true
+};
+
+export const AdminCRUDShowcase: React.FC = () => {
+  const [users, setUsers] = useState(mockUsers);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const actions: CRUDActions = {
+    onCreate: async (data) => {
+      setIsLoading(true);
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      const newUser = {
+        id: String(users.length + 1),
+        name: data.name as string,
+        email: data.email as string,
+        role: data.role as string,
+        status: data.isActive ? 'Active' : 'Inactive',
+        lastLogin: new Date().toISOString().split('T')[0],
+        isActive: data.isActive as boolean
+      };
+      
+      setUsers(prev => [...prev, newUser]);
+      setIsLoading(false);
+      console.log('Created user:', newUser);
+    },
+
+    onUpdate: async (id, data) => {
+      setIsLoading(true);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      setUsers(prev => prev.map(user => 
+        user.id === id 
+          ? { 
+              ...user, 
+              name: data.name as string,
+              email: data.email as string,
+              role: data.role as string,
+              isActive: data.isActive as boolean,
+              status: data.isActive ? 'Active' : 'Inactive'
+            }
+          : user
+      ));
+      setIsLoading(false);
+      console.log('Updated user:', id, data);
+    },
+
+    onDelete: async (id) => {
+      setIsLoading(true);
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      setUsers(prev => prev.filter(user => user.id !== id));
+      setIsLoading(false);
+      console.log('Deleted user:', id);
+    },
+
+    onBulkDelete: async (ids) => {
+      setIsLoading(true);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
+      setUsers(prev => prev.filter(user => !ids.includes(user.id)));
+      setIsLoading(false);
+      console.log('Bulk deleted users:', ids);
+    },
+
+    onExport: async (format) => {
+      console.log('Exporting users as:', format);
+      // Simulate export
+      const data = JSON.stringify(users, null, 2);
+      const blob = new Blob([data], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `users.${format}`;
+      a.click();
+      URL.revokeObjectURL(url);
+    },
+
+    onImport: async (file) => {
+      console.log('Importing users from file:', file.name);
+      // In a real app, you'd parse the file and add users
+    },
+
+    onRefresh: async () => {
+      setIsLoading(true);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      setIsLoading(false);
+      console.log('Refreshed user data');
+    }
+  };
+
+  const customActions = [
+    {
+      label: 'Send Invitation',
+      onClick: () => console.log('Sending bulk invitations'),
+      variant: 'outline' as const
+    },
+    {
+      label: 'Generate Report',
+      onClick: () => console.log('Generating user report'),
+      variant: 'outline' as const
+    }
+  ];
+
+  return (
+    <AdminCRUDTemplate
+      schema={userSchema}
+      data={users}
+      permissions={permissions}
+      actions={actions}
+      isLoading={isLoading}
+      customActions={customActions}
+      category={1}
+    />
+  );
+};

package/src/pages/AdminShowcase/AdminDashboardShowcase.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { AdminDashboardTemplate } from '../../templates/admin';
+import type { MetricCard, ChartConfig, ActivityItem, AlertItem } from '../../templates/admin';
+import { Users, DollarSign, TrendingUp } from 'lucide-react';
+
+// Mock data for demonstration
+const mockMetrics: MetricCard[] = [
+  {
+    title: 'Total Users',
+    value: '12,486',
+    change: 12.5,
+    changePeriod: 'from last month',
+    icon: <Users className="w-5 h-5" />,
+    category: 1,
+    onClick: () => console.log('Navigate to users')
+  },
+  {
+    title: 'Revenue',
+    value: '$89,432',
+    change: 8.2,
+    changePeriod: 'from last month',
+    icon: <DollarSign className="w-5 h-5" />,
+    category: 2,
+    onClick: () => console.log('Navigate to revenue')
+  },
+  {
+    title: 'Growth Rate',
+    value: '23.8%',
+    change: -2.1,
+    changePeriod: 'from last quarter',
+    icon: <TrendingUp className="w-5 h-5" />,
+    category: 3,
+    onClick: () => console.log('Navigate to analytics')
+  },
+  {
+    title: 'Active Sessions',
+    value: '1,247',
+    change: 5.7,
+    changePeriod: 'from yesterday',
+    icon: <Users className="w-5 h-5" />,
+    category: 4,
+    onClick: () => console.log('Navigate to sessions')
+  }
+];
+
+const mockCharts: ChartConfig[] = [
+  {
+    title: 'User Growth',
+    type: 'line',
+    data: [
+      { label: 'Jan', value: 1200 },
+      { label: 'Feb', value: 1400 },
+      { label: 'Mar', value: 1800 },
+      { label: 'Apr', value: 2200 },
+      { label: 'May', value: 2800 },
+      { label: 'Jun', value: 3200 }
+    ],
+    category: 1
+  },
+  {
+    title: 'Revenue Distribution',
+    type: 'pie',
+    data: [
+      { label: 'Subscriptions', value: 45000, category: 2 },
+      { label: 'One-time', value: 28000, category: 3 },
+      { label: 'Enterprise', value: 16000, category: 1 }
+    ],
+    category: 2
+  }
+];
+
+const mockActivities: ActivityItem[] = [
+  {
+    id: '1',
+    type: 'user',
+    message: 'New user registered: john.doe@example.com',
+    timestamp: new Date(Date.now() - 5 * 60 * 1000),
+    user: 'System'
+  },
+  {
+    id: '2',
+    type: 'security',
+    message: 'Failed login attempt detected',
+    timestamp: new Date(Date.now() - 15 * 60 * 1000),
+    user: 'Security Monitor'
+  },
+  {
+    id: '3',
+    type: 'content',
+    message: 'Blog post published: "Getting Started Guide"',
+    timestamp: new Date(Date.now() - 30 * 60 * 1000),
+    user: 'content.manager'
+  },
+  {
+    id: '4',
+    type: 'system',
+    message: 'Database backup completed successfully',
+    timestamp: new Date(Date.now() - 60 * 60 * 1000),
+    user: 'System'
+  },
+  {
+    id: '5',
+    type: 'user',
+    message: 'User updated profile: sarah.wilson@example.com',
+    timestamp: new Date(Date.now() - 90 * 60 * 1000),
+    user: 'sarah.wilson'
+  },
+  {
+    id: '6',
+    type: 'error',
+    message: 'Payment processing error for order #12847',
+    timestamp: new Date(Date.now() - 120 * 60 * 1000),
+    user: 'Payment System'
+  }
+];
+
+const mockAlerts: AlertItem[] = [
+  {
+    id: '1',
+    severity: 'critical',
+    title: 'High CPU Usage',
+    description: 'Server CPU usage has exceeded 90% for the last 5 minutes',
+    timestamp: new Date(Date.now() - 10 * 60 * 1000),
+    onResolve: () => console.log('Resolving CPU alert')
+  },
+  {
+    id: '2',
+    severity: 'medium',
+    title: 'Low Disk Space',
+    description: 'Database server disk usage is at 85%',
+    timestamp: new Date(Date.now() - 30 * 60 * 1000),
+    onResolve: () => console.log('Resolving disk space alert')
+  },
+  {
+    id: '3',
+    severity: 'low',
+    title: 'SSL Certificate Expiring',
+    description: 'SSL certificate will expire in 30 days',
+    timestamp: new Date(Date.now() - 60 * 60 * 1000),
+    onResolve: () => console.log('Resolving SSL alert')
+  }
+];
+
+export const AdminDashboardShowcase: React.FC = () => {
+  const handleRefresh = () => {
+    console.log('Refreshing dashboard data...');
+  };
+
+  return (
+    <AdminDashboardTemplate
+      title="System Overview"
+      description="Monitor key metrics, system health, and recent activity"
+      metrics={mockMetrics}
+      charts={mockCharts}
+      activities={mockActivities}
+      alerts={mockAlerts}
+      onRefresh={handleRefresh}
+      lastUpdated={new Date()}
+      actions={
+        <div className="flex gap-2">
+          <button className="px-3 py-2 text-sm border border-input rounded-md hover:bg-muted">
+            Export Report
+          </button>
+          <button className="px-3 py-2 text-sm bg-category-1 text-white rounded-md hover:bg-category-1/90">
+            View Analytics
+          </button>
+        </div>
+      }
+    />
+  );
+};