@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

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

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

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

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