@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

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