@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/atoms/composed/SalesPanel/mockSalesData.ts

@@ -0,0 +1,151 @@
+// Mock sales data for demonstrations
+export const mockSalesData = [
+  {
+    id: 'SALE-2024-001',
+    customer: 'TechCorp Industries',
+    product: 'Enterprise License',
+    amount: 45000,
+    stage: 'Closed Won',
+    salesperson: 'Sarah Chen',
+    region: 'North America',
+    closeDate: '2024-06-08',
+    dealSize: 'Large'
+  },
+  {
+    id: 'SALE-2024-002',
+    customer: 'StartupXYZ',
+    product: 'Professional Plan',
+    amount: 12000,
+    stage: 'Proposal Sent',
+    salesperson: 'Mike Johnson',
+    region: 'North America',
+    closeDate: '2024-06-15',
+    dealSize: 'Medium'
+  },
+  {
+    id: 'SALE-2024-003',
+    customer: 'Global Enterprises Ltd',
+    product: 'Enterprise Suite',
+    amount: 78000,
+    stage: 'Negotiation',
+    salesperson: 'Lisa Wang',
+    region: 'Europe',
+    closeDate: '2024-06-20',
+    dealSize: 'Large'
+  },
+  {
+    id: 'SALE-2024-004',
+    customer: 'Innovation Labs',
+    product: 'Starter Package',
+    amount: 5000,
+    stage: 'Qualified',
+    salesperson: 'David Kim',
+    region: 'Asia Pacific',
+    closeDate: '2024-06-25',
+    dealSize: 'Small'
+  },
+  {
+    id: 'SALE-2024-005',
+    customer: 'FutureTech Solutions',
+    product: 'Custom Integration',
+    amount: 95000,
+    stage: 'Discovery',
+    salesperson: 'Sarah Chen',
+    region: 'North America',
+    closeDate: '2024-07-01',
+    dealSize: 'Large'
+  }
+];
+
+// Sales configuration for entity template
+export const salesConfig = {
+  entityType: 'performance' as const,
+  display: {
+    title: 'Sales Performance',
+    subtitle: 'Monitor sales metrics, team performance, and revenue trends',
+    category: 3 as const
+  },
+  metrics: [
+    {
+      key: 'revenue',
+      label: 'Total Revenue',
+      type: 'currency' as const,
+      aggregate: 'sum',
+      showTrend: true,
+      category: 2
+    },
+    {
+      key: 'deals',
+      label: 'Deals Closed',
+      type: 'number' as const,
+      aggregate: 'count',
+      showTrend: true,
+      category: 3
+    },
+    {
+      key: 'conversion',
+      label: 'Conversion Rate',
+      type: 'percentage' as const,
+      aggregate: 'average',
+      showTrend: true,
+      category: 1
+    },
+    {
+      key: 'pipeline',
+      label: 'Pipeline Value',
+      type: 'currency' as const,
+      aggregate: 'sum',
+      showTrend: true,
+      category: 4
+    }
+  ],
+  categories: [
+    { key: 'region', label: 'By Region', type: 'categorical' },
+    { key: 'product', label: 'By Product', type: 'categorical' },
+    { key: 'stage', label: 'By Stage', type: 'categorical' }
+  ],
+  trends: {
+    periods: ['7d', '30d', '90d', '1y'],
+    defaultPeriod: '30d'
+  }
+};
+
+// Sample sales performance data
+export const salesPerformanceData = [
+  {
+    id: 'sale-1',
+    revenue: 45000,
+    deals: 12,
+    conversion: 0.24,
+    pipeline: 125000,
+    region: 'North America',
+    product: 'Enterprise',
+    stage: 'Closed Won',
+    date: '2024-06-01',
+    salesperson: 'Sarah Chen'
+  },
+  {
+    id: 'sale-2',
+    revenue: 32000,
+    deals: 8,
+    conversion: 0.18,
+    pipeline: 89000,
+    region: 'Europe',
+    product: 'Professional',
+    stage: 'Negotiation',
+    date: '2024-06-02',
+    salesperson: 'Mike Johnson'
+  },
+  {
+    id: 'sale-3',
+    revenue: 67000,
+    deals: 15,
+    conversion: 0.31,
+    pipeline: 156000,
+    region: 'Asia Pacific',
+    product: 'Enterprise',
+    stage: 'Closed Won',
+    date: '2024-06-03',
+    salesperson: 'Lisa Wang'
+  }
+];

package/src/atoms/composed/StatCard/StatCard.tsx

@@ -0,0 +1,219 @@
+import React from 'react';
+import { Card } from '../../ui/card';
+import { Skeleton } from '../../ui/skeleton';
+import { Tooltip } from '../Tooltip';
+import { TrendingUp, TrendingDown, Minus, ArrowRight } from 'lucide-react';
+import { cn } from '../../utils/utils';
+import type { ILoadable } from '../../types';
+
+export interface StatCardProps extends ILoadable {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  trend?: {
+    value: number;
+    label?: string;
+  };
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  /** Tooltip content for the value (useful for showing full numbers when abbreviated) */
+  valueTooltip?: string;
+  /** Tooltip content for the icon */
+  iconTooltip?: string;
+}
+
+export const StatCard = ({
+  title,
+  value,
+  subtitle,
+  trend,
+  category,
+  icon,
+  onClick,
+  className,
+  valueTooltip,
+  iconTooltip,
+  isLoading = false
+}: StatCardProps) => {
+  const getTrendIcon = () => {
+    if (!trend) return null;
+    
+    if (trend.value > 0) {
+      return <TrendingUp className="w-4 h-4" />;
+    } else if (trend.value < 0) {
+      return <TrendingDown className="w-4 h-4" />;
+    }
+    return <Minus className="w-4 h-4" />;
+  };
+
+  const getTrendColor = () => {
+    if (!trend) return '';
+    
+    if (trend.value > 0) return 'text-status-success';
+    if (trend.value < 0) return 'text-status-error';
+    return 'text-status-neutral';
+  };
+
+  // Loading state skeleton that matches StatCard dimensions
+  if (isLoading) {
+    return (
+      <Card 
+        className={cn(
+          "card-container relative overflow-hidden",
+          className
+        )}
+        category={category}
+        data-component-name="StatCard"
+      >
+        <div className="space-y-3 relative">
+          {/* Hidden content that defines exact dimensions */}
+          <div className="flex items-center justify-between">
+            <div className="text-data-label font-medium" style={{ visibility: 'hidden' }}>
+              {title}
+            </div>
+            {icon && (
+              <div className={cn(
+                "p-2 rounded-md flex items-center justify-center transition-colors",
+                category ? `bg-muted/50 text-category-${category}` : "bg-muted/50 text-muted-foreground"
+              )} style={{ visibility: 'hidden' }}>
+                {icon}
+              </div>
+            )}
+          </div>
+
+          <div className="space-y-1">
+            <div className={cn(
+              "text-3xl font-bold transition-all group-hover:scale-105",
+              category ? `text-category-${category}` : "text-foreground"
+            )} style={{ visibility: 'hidden' }}>
+              {value}
+            </div>
+            {subtitle && (
+              <div className="text-data-meta" style={{ visibility: 'hidden' }}>
+                {subtitle}
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center justify-between">
+            {trend && (
+              <div className={cn("flex items-center gap-1.5 text-sm", "text-muted-foreground")} style={{ visibility: 'hidden' }}>
+                {/* Render actual trend content hidden */}
+                <span>{trend.value > 0 && '+'}{trend.value}%</span>
+                {trend.label && <span>{trend.label}</span>}
+              </div>
+            )}
+            {onClick && (
+              <div style={{ visibility: 'hidden' }}>→</div>
+            )}
+          </div>
+
+          {/* Skeleton overlay positioned absolutely */}
+          <div className="absolute inset-0 space-y-3">
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-5 w-24" />
+              {icon && (
+                <div className="p-2 rounded flex items-center justify-center bg-muted/50">
+                  <Skeleton className="h-5 w-5" />
+                </div>
+              )}
+            </div>
+            <div className="space-y-1">
+              <Skeleton className="h-9 w-20" />
+              {subtitle && <Skeleton className="h-4 w-32" />}
+            </div>
+            <div className="flex items-center justify-between">
+              {trend && <Skeleton className="h-4 w-16" />}
+              {onClick && <Skeleton className="h-4 w-4 ml-auto" />}
+            </div>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <Card 
+      className={cn(
+        "card-container relative overflow-hidden transition-all animate-slide-up",
+        onClick && "cursor-pointer hover:shadow-md hover:scale-105 active:scale-95",
+        category && `hover:shadow-category-${category}`,
+        "group",
+        className
+      )}
+      category={category} // Pass category directly to Card component
+      data-component-name="StatCard"
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick();
+        }
+      } : undefined}
+    >
+      <div className="space-y-3">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div className="text-sm font-semibold text-foreground" data-component-name="StatCard">{title}</div>
+          {icon && (
+            <Tooltip 
+              content={iconTooltip} 
+              disabled={!iconTooltip}
+              position="left"
+              size="sm"
+            >
+              <div className={cn(
+                "p-2 rounded-md flex items-center justify-center transition-colors",
+                category ? `bg-muted/50 text-category-${category}` : "bg-muted/50 text-muted-foreground"
+              )} data-component-name="StatCardIcon">
+                {icon}
+              </div>
+            </Tooltip>
+          )}
+        </div>
+
+        {/* Value */}
+        <div className="space-y-1">
+          <Tooltip 
+            content={valueTooltip} 
+            disabled={!valueTooltip}
+            position="top"
+            size="sm"
+          >
+            <div className={cn(
+              "text-3xl font-bold transition-all group-hover:scale-105",
+              category ? `text-category-${category}` : "text-foreground"
+            )}>
+              {value}
+            </div>
+          </Tooltip>
+          {subtitle && (
+            <div className="text-data-meta">{subtitle}</div>
+          )}
+        </div>
+
+        {/* Trend or Action */}
+        <div className="flex items-center justify-between">
+          {trend && (
+            <div className={cn("flex items-center gap-1.5 text-sm", getTrendColor())}>
+              {getTrendIcon()}
+              <span className="font-medium">
+                {trend.value > 0 && '+'}{trend.value}%
+              </span>
+              {trend.label && (
+                <span className="text-data-meta">{trend.label}</span>
+              )}
+            </div>
+          )}
+          {onClick && (
+            <ArrowRight className="w-4 h-4 text-muted-foreground ml-auto transition-transform group-hover:translate-x-1" data-component-name="StatCardArrow" />
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+};

package/src/atoms/composed/StatCard/index.ts

@@ -0,0 +1 @@
+export * from './StatCard';