@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

package/src/organisms/showcase/index.ts

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

package/src/pages/AdminShowcase/AdminCRUDShowcase.tsx

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

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