@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/atoms/composed/ProgressBar/ProgressBar.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { cn } from '../../utils/utils';
-import { getAnimationClasses, animationPresets } from '../../utils/animations';
-
-export interface ProgressBarProps {
-  /** Progress value (0-100) */
-  value: number;
-  /** Maximum value */
-  max?: number;
-  /** Status-based coloring */
-  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
-  /** Category-based coloring */
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  /** Size variant */
-  size?: 'sm' | 'md' | 'lg';
-  /** Show percentage label */
-  showLabel?: boolean;
-  /** Custom label */
-  label?: string;
-  /** Progress bar variant */
-  variant?: 'default' | 'striped' | 'animated';
-  /** Additional CSS classes */
-  className?: string;
-  /** Accessible label */
-  'aria-label'?: string;
-}
-
-export const ProgressBar: React.FC<ProgressBarProps> = ({
-  value,
-  max = 100,
-  status,
-  category,
-  size = 'md',
-  showLabel = false,
-  label,
-  variant = 'default',
-  className,
-  'aria-label': ariaLabel
-}) => {
-  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-  
-  const sizeClasses = {
-    sm: 'h-2',
-    md: 'h-3',
-    lg: 'h-4'
-  };
-
-  const trackClasses = 'w-full bg-muted rounded-full overflow-hidden';
-  
-  const getBarClasses = () => {
-    let baseClasses = 'h-full transition-all duration-500 ease-out';
-    
-    // Color classes
-    if (status) {
-      baseClasses += ` bg-status-${status}`;
-    } else if (category) {
-      baseClasses += ` bg-category-${category}`;
-    } else {
-      baseClasses += ' bg-primary';
-    }
-    
-    // Variant classes
-    if (variant === 'striped') {
-      baseClasses += ' bg-gradient-to-r from-current via-current/80 to-current';
-      baseClasses += ' bg-[length:1rem_1rem]';
-      baseClasses += ' bg-repeat-x';
-    }
-    
-    if (variant === 'animated') {
-      baseClasses += ' bg-gradient-to-r from-current via-current/60 to-current';
-      baseClasses += ' bg-[length:2rem_100%]';
-      baseClasses += ' animate-pulse';
-    }
-    
-    return baseClasses;
-  };
-
-  const displayLabel = label || (showLabel ? `${Math.round(percentage)}%` : undefined);
-
-  return (
-    <div
-      className={cn('w-full', className)}
-      data-component-name="ProgressBar"
-    >
-      {displayLabel && (
-        <div className="flex justify-between items-center mb-2 text-sm">
-          <span className="text-foreground font-medium">
-            {displayLabel}
-          </span>
-          {showLabel && !label && (
-            <span className="text-muted-foreground">
-              {value}/{max}
-            </span>
-          )}
-        </div>
-      )}
-      
-      <div
-        className={cn(trackClasses, sizeClasses[size])}
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        aria-label={ariaLabel || `Progress: ${percentage.toFixed(1)}%`}
-      >
-        <div
-          className={cn(
-            getBarClasses(),
-            getAnimationClasses(animationPresets.subtle)
-          )}
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-    </div>
-  );
-};

package/src/atoms/composed/SalesPanel/SalesPanel.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { DataBadge } from '../DataBadge';
-import { Button } from '../../ui/button';
-import { 
-  Target,
-  ExternalLink
-} from 'lucide-react';
-
-interface SalesPanelProps {
-  sales: Array<{
-    id: string;
-    customer: string;
-    product: string;
-    amount: number;
-    stage: string;
-    salesperson: string;
-    region: string;
-    closeDate: string;
-    dealSize: string;
-  }>;
-  onSaleClick?: (sale: any) => void;
-  onClose?: () => void;
-}
-
-const getStageStatus = (stage: string) => {
-  switch (stage) {
-    case 'Closed Won': return 'success';
-    case 'Negotiation': return 'warning'; 
-    case 'Proposal Sent': return 'info';
-    case 'Qualified': return 'info';
-    case 'Discovery': return 'neutral';
-    default: return 'neutral';
-  }
-};
-
-export const SalesPanel: React.FC<SalesPanelProps> = ({
-  sales,
-  onSaleClick,
-  onClose
-}) => {
-  const topDeals = sales.slice(0, 5); // Show only top 5 recent deals
-  const totalValue = sales.reduce((sum, sale) => sum + sale.amount, 0);
-
-  return (
-    <div className="fixed right-0 top-16 h-[calc(100vh-4rem)] w-72 bg-background border-l border-border shadow-lg flex flex-col z-30">
-      {/* Header */}
-      <div className="p-3 border-b border-border">
-        <div className="flex items-center justify-between">
-          <h3 className="font-medium flex items-center gap-2">
-            <Target className="w-4 h-4" />
-            Pipeline
-          </h3>
-          {onClose && (
-            <Button variant="ghost" size="sm" onClick={onClose}>
-              ×
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Quick Stats */}
-      <div className="p-3 border-b border-border">
-        <div className="space-y-2">
-          <div className="flex justify-between">
-            <span className="text-sm text-muted-foreground">Total Value</span>
-            <span className="font-semibold text-green-600">${totalValue.toLocaleString()}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-sm text-muted-foreground">Active Deals</span>
-            <span className="font-semibold">{sales.length}</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Recent Deals */}
-      <div className="flex-1 overflow-auto p-3">
-        <h4 className="text-sm font-medium mb-3">Recent Opportunities</h4>
-        <div className="space-y-2">
-          {topDeals.map((sale) => (
-            <div 
-              key={sale.id}
-              className="p-2 border border-border rounded-md hover:bg-muted/50 cursor-pointer transition-colors"
-              onClick={() => onSaleClick?.(sale)}
-            >
-              <div className="flex justify-between items-start mb-1">
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">{sale.customer}</p>
-                  <p className="text-xs text-muted-foreground truncate">{sale.product}</p>
-                </div>
-                <div className="text-right ml-2">
-                  <p className="text-sm font-semibold text-green-600">
-                    ${sale.amount.toLocaleString()}
-                  </p>
-                </div>
-              </div>
-              <div className="flex justify-between items-center">
-                <DataBadge variant="status" status={getStageStatus(sale.stage)}>
-                  {sale.stage}
-                </DataBadge>
-                <span className="text-xs text-muted-foreground">{sale.salesperson}</span>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="p-3 border-t border-border">
-        <Button variant="outline" size="sm" className="w-full">
-          <ExternalLink className="w-4 h-4 mr-2" />
-          View All Deals
-        </Button>
-      </div>
-    </div>
-  );
-};

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

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

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