@pattern-stack/frontend-patterns 0.0.3 → 0.0.4

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';