@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

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,173 @@
+import React from 'react';
+import { AdminDashboardTemplate } from '../../templates/admin';
+import type { MetricCard, ChartConfig, ActivityItem, AlertItem } from '../../templates/admin';
+import { Users, DollarSign, TrendingUp, ShoppingCart, Calendar, CreditCard } from 'lucide-react';
+
+// Mock data for demonstration
+const mockMetrics: MetricCard[] = [
+  {
+    title: 'Total Revenue',
+    value: '$124,832',
+    change: 15.3,
+    changePeriod: 'from last month',
+    icon: <DollarSign className="w-5 h-5" />,
+    category: 2,
+    onClick: () => console.log('Navigate to revenue')
+  },
+  {
+    title: 'Active Users',
+    value: '8,429',
+    change: 12.5,
+    changePeriod: 'from last week',
+    icon: <Users className="w-5 h-5" />,
+    category: 1,
+    onClick: () => console.log('Navigate to users')
+  },
+  {
+    title: 'Daily Orders',
+    value: '342',
+    change: 8.7,
+    changePeriod: 'from yesterday',
+    icon: <ShoppingCart className="w-5 h-5" />,
+    category: 3,
+    onClick: () => console.log('Navigate to orders')
+  },
+  {
+    title: 'Conversion Rate',
+    value: '4.2%',
+    change: -1.8,
+    changePeriod: 'from last month',
+    icon: <TrendingUp className="w-5 h-5" />,
+    category: 4,
+    onClick: () => console.log('Navigate to analytics')
+  }
+];
+
+const mockCharts: ChartConfig[] = [
+  {
+    title: 'Revenue Trends',
+    type: 'line',
+    data: [
+      { label: 'Jan', value: 89000 },
+      { label: 'Feb', value: 96000 },
+      { label: 'Mar', value: 108000 },
+      { label: 'Apr', value: 115000 },
+      { label: 'May', value: 118000 },
+      { label: 'Jun', value: 125000 }
+    ],
+    category: 2
+  },
+  {
+    title: 'Order Distribution',
+    type: 'pie',
+    data: [
+      { label: 'Online', value: 65, category: 1 },
+      { label: 'Mobile App', value: 25, category: 3 },
+      { label: 'In-Store', value: 10, category: 4 }
+    ],
+    category: 3
+  }
+];
+
+const mockActivities: ActivityItem[] = [
+  {
+    id: '1',
+    type: 'user',
+    message: 'New customer order placed: $342.50',
+    timestamp: new Date(Date.now() - 2 * 60 * 1000),
+    user: 'Order System'
+  },
+  {
+    id: '2',
+    type: 'content',
+    message: 'Product "Summer Collection 2024" launched',
+    timestamp: new Date(Date.now() - 8 * 60 * 1000),
+    user: 'Product Team'
+  },
+  {
+    id: '3',
+    type: 'user',
+    message: 'Premium subscription activated: emma.clark@example.com',
+    timestamp: new Date(Date.now() - 15 * 60 * 1000),
+    user: 'Billing System'
+  },
+  {
+    id: '4',
+    type: 'system',
+    message: 'Daily revenue report generated: $24,892',
+    timestamp: new Date(Date.now() - 25 * 60 * 1000),
+    user: 'Analytics Engine'
+  },
+  {
+    id: '5',
+    type: 'user',
+    message: 'Customer support ticket resolved #8429',
+    timestamp: new Date(Date.now() - 35 * 60 * 1000),
+    user: 'Support Team'
+  },
+  {
+    id: '6',
+    type: 'security',
+    message: 'Weekly security scan completed - no issues found',
+    timestamp: new Date(Date.now() - 45 * 60 * 1000),
+    user: 'Security Monitor'
+  }
+];
+
+const mockAlerts: AlertItem[] = [
+  {
+    id: '1',
+    severity: 'critical',
+    title: 'Payment Gateway Error',
+    description: 'Multiple payment failures detected in the last hour',
+    timestamp: new Date(Date.now() - 8 * 60 * 1000),
+    onResolve: () => console.log('Resolving payment gateway alert')
+  },
+  {
+    id: '2',
+    severity: 'medium',
+    title: 'Inventory Low',
+    description: '5 products are running low on stock',
+    timestamp: new Date(Date.now() - 20 * 60 * 1000),
+    onResolve: () => console.log('Resolving inventory alert')
+  },
+  {
+    id: '3',
+    severity: 'low',
+    title: 'API Rate Limit Warning',
+    description: 'Third-party API usage at 75% of daily limit',
+    timestamp: new Date(Date.now() - 40 * 60 * 1000),
+    onResolve: () => console.log('Resolving API rate limit alert')
+  }
+];
+
+export const AdminDashboardShowcase: React.FC = () => {
+  const handleRefresh = () => {
+    console.log('Refreshing dashboard data...');
+  };
+
+  return (
+    <AdminDashboardTemplate
+      title="Business Dashboard"
+      description="Monitor revenue, orders, customers, and operational health"
+      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">
+            <Calendar className="w-4 h-4 mr-2 inline" />
+            Export Report
+          </button>
+          <button className="px-3 py-2 text-sm bg-category-2 text-white rounded-md hover:bg-category-2/90">
+            <CreditCard className="w-4 h-4 mr-2 inline" />
+            View Transactions
+          </button>
+        </div>
+      }
+    />
+  );
+};