@pattern-stack/frontend-patterns 1.0.0

package/src/atoms/composed/Alert/Alert.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { X, AlertCircle, CheckCircle, AlertTriangle, Info } from 'lucide-react';
+import { cn } from '../../utils/utils';
+import { Button } from '../../ui/button';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface AlertProps {
+  /** Alert content */
+  children: React.ReactNode;
+  /** Alert status type */
+  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  /** Alert title */
+  title?: string;
+  /** Whether alert can be dismissed */
+  dismissible?: boolean;
+  /** Dismiss handler */
+  onDismiss?: () => void;
+  /** Visual variant */
+  variant?: 'filled' | 'outlined' | 'soft';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional CSS classes */
+  className?: string;
+  /** Custom icon */
+  icon?: React.ReactNode;
+  /** Hide default icon */
+  hideIcon?: boolean;
+}
+
+const statusIcons = {
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: AlertCircle,
+  info: Info,
+  neutral: Info
+};
+
+export const Alert: React.FC<AlertProps> = ({
+  children,
+  status = 'neutral',
+  title,
+  dismissible = false,
+  onDismiss,
+  variant = 'soft',
+  size = 'md',
+  className,
+  icon,
+  hideIcon = false
+}) => {
+  const IconComponent = statusIcons[status];
+  const displayIcon = icon || (!hideIcon && <IconComponent className="w-5 h-5" />);
+
+  const sizeClasses = {
+    sm: 'p-3 text-sm',
+    md: 'p-4 text-sm',
+    lg: 'p-6 text-base'
+  };
+
+  const variantClasses = {
+    filled: {
+      success: 'bg-status-success text-white border-status-success',
+      warning: 'bg-status-warning text-white border-status-warning',
+      error: 'bg-status-error text-white border-status-error',
+      info: 'bg-status-info text-white border-status-info',
+      neutral: 'bg-muted text-foreground border-border'
+    },
+    outlined: {
+      success: 'bg-background text-status-success border-status-success',
+      warning: 'bg-background text-status-warning border-status-warning',
+      error: 'bg-background text-status-error border-status-error',
+      info: 'bg-background text-status-info border-status-info',
+      neutral: 'bg-background text-foreground border-border'
+    },
+    soft: {
+      success: 'bg-status-success/10 text-status-success border-status-success/20',
+      warning: 'bg-status-warning/10 text-status-warning border-status-warning/20',
+      error: 'bg-status-error/10 text-status-error border-status-error/20',
+      info: 'bg-status-info/10 text-status-info border-status-info/20',
+      neutral: 'bg-muted/50 text-foreground border-border/50'
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border flex items-start gap-3 relative',
+        'transition-all duration-200',
+        sizeClasses[size],
+        variantClasses[variant][status],
+        getAnimationClasses(animationPresets.subtle),
+        className
+      )}
+      role="alert"
+      data-component-name="Alert"
+    >
+      {/* Icon */}
+      {displayIcon && (
+        <div className="flex-shrink-0 mt-0.5">
+          {displayIcon}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        {title && (
+          <h4 className="font-semibold mb-1">
+            {title}
+          </h4>
+        )}
+        <div className="text-current">
+          {children}
+        </div>
+      </div>
+
+      {/* Dismiss button */}
+      {dismissible && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onDismiss}
+          className={cn(
+            'flex-shrink-0 h-auto p-1 -mt-1 -mr-1',
+            'hover:bg-current/10 text-current'
+          )}
+          aria-label="Dismiss alert"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { Alert, type AlertProps } from './Alert';

package/src/atoms/composed/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ChevronRight, Home } from 'lucide-react';
+import { cn } from '../../utils/utils';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  active?: boolean;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  showHome?: boolean;
+  homeHref?: string;
+  className?: string;
+  separator?: React.ReactNode;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  showHome = true,
+  homeHref = '/',
+  className,
+  separator = <ChevronRight className="w-4 h-4" />,
+  category = 1
+}) => {
+  const allItems = showHome 
+    ? [{ label: 'Home', href: homeHref, icon: <Home className="w-4 h-4" />, active: false }, ...items]
+    : items;
+
+  return (
+    <nav 
+      className={cn('flex items-center space-x-1 text-sm', className)}
+      aria-label="Breadcrumb"
+      data-component-name="Breadcrumb"
+    >
+      <ol className="flex items-center space-x-1">
+        {allItems.map((item, index) => {
+          const isLast = index === allItems.length - 1;
+          const isActive = item.active || isLast;
+          
+          return (
+            <li key={index} className="flex items-center space-x-1">
+              {item.href && !isActive ? (
+                <a
+                  href={item.href}
+                  className={cn(
+                    'flex items-center space-x-1 hover:text-foreground transition-colors',
+                    `text-category-${category}/70 hover:text-category-${category}`,
+                    'hover:underline'
+                  )}
+                >
+                  {'icon' in item && item.icon}
+                  <span>{item.label}</span>
+                </a>
+              ) : (
+                <span
+                  className={cn(
+                    'flex items-center space-x-1',
+                    isActive 
+                      ? `text-category-${category} font-medium` 
+                      : 'text-muted-foreground'
+                  )}
+                  aria-current={isActive ? 'page' : undefined}
+                >
+                  {'icon' in item && item.icon}
+                  <span>{item.label}</span>
+                </span>
+              )}
+              
+              {!isLast && (
+                <span className="text-muted-foreground ml-1">
+                  {separator}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

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

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbItem } from './Breadcrumb';

package/src/atoms/composed/Chart/Chart.tsx

@@ -0,0 +1,425 @@
+// WIP: Chart component - basic implementation for showcase
+// TODO: Rework chart implementations, improve styling, add more chart types
+// TODO: Consider external chart library integration for production use
+
+import { Card } from '../../ui/card';
+import { Skeleton } from '../../ui/skeleton';
+import { DataBadge } from '../DataBadge';
+import { cn } from '../../utils/utils';
+import type { ILoadable } from '../../types';
+import { DASHBOARD_CHART_HEIGHTS } from '../../shared/config/dashboard-sizes';
+import { TrendingUp, TrendingDown, Minus, BarChart3, LineChart, AreaChart } from 'lucide-react';
+
+export type ChartType = 'line' | 'bar' | 'area' | 'pie';
+export type ChartVariant = 'default' | 'minimal' | 'detailed';
+
+export interface ChartDataPoint {
+  label: string;
+  value: number;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  color?: string;
+}
+
+export interface ChartProps extends ILoadable {
+  title: string;
+  subtitle?: string;
+  data: ChartDataPoint[];
+  type: ChartType;
+  variant?: ChartVariant;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  showLegend?: boolean;
+  showValues?: boolean;
+  showTrend?: boolean;
+  trend?: {
+    value: number;
+    label?: string;
+  };
+  /** Chart height - use standardized sizes from dashboard-sizes.ts */
+  height?: number | keyof typeof DASHBOARD_CHART_HEIGHTS;
+  onClick?: () => void;
+  className?: string;
+  /** Enable accessibility features like data table fallback */
+  includeDataTable?: boolean;
+  /** Custom color overrides for data points */
+  colorOverrides?: string[];
+  /** Don't render the outer Card wrapper (for embedded use) */
+  noWrapper?: boolean;
+}
+
+export const Chart = ({
+  title,
+  subtitle,
+  data,
+  type,
+  variant = 'default',
+  category,
+  showLegend = true,
+  showValues = false,
+  showTrend = false,
+  trend,
+  height = 'medium',
+  onClick,
+  className,
+  includeDataTable = true,
+  colorOverrides,
+  isLoading = false,
+  noWrapper = false
+}: ChartProps) => {
+  // Resolve height to numeric value
+  const chartHeight = typeof height === 'string' ? DASHBOARD_CHART_HEIGHTS[height] : height;
+  const getChartIcon = () => {
+    switch (type) {
+      case 'line': return <LineChart className="w-4 h-4" />;
+      case 'bar': return <BarChart3 className="w-4 h-4" />;
+      case 'area': return <AreaChart className="w-4 h-4" />;
+      default: return <BarChart3 className="w-4 h-4" />;
+    }
+  };
+
+  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';
+  };
+
+  const getDataPointColor = (index: number, point: ChartDataPoint) => {
+    // Priority: custom color override > point category > point color > chart category > default category cycle
+    if (colorOverrides && colorOverrides[index]) {
+      return colorOverrides[index];
+    }
+    if (point.category) {
+      return `hsl(var(--category-${point.category}))`;
+    }
+    if (point.color) {
+      return point.color;
+    }
+    if (category) {
+      return `hsl(var(--category-${category}))`;
+    }
+    // Default to cycling through categories
+    const categoryNum = ((index % 8) + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    return `hsl(var(--category-${categoryNum}))`;
+  };
+
+  const maxValue = Math.max(...data.map(d => d.value));
+
+  const renderBarChart = () => {
+    return (
+      <div className="space-y-3" style={{ height: chartHeight }}>
+        <div className="flex items-end justify-between h-full gap-2">
+          {data.map((point, index) => {
+            const percentage = (point.value / maxValue) * 100;
+            const color = getDataPointColor(index, point);
+            
+            return (
+              <div key={index} className="flex flex-col items-center flex-1 h-full justify-end gap-2">
+                <div
+                  className="w-full rounded-t transition-all hover:opacity-80 relative group"
+                  style={{
+                    height: `${percentage}%`,
+                    backgroundColor: color,
+                    minHeight: '4px'
+                  }}
+                  role="img"
+                  aria-label={`${point.label}: ${point.value}`}
+                >
+                  {showValues && (
+                    <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 text-xs font-medium text-foreground whitespace-nowrap">
+                      {point.value}
+                    </div>
+                  )}
+                  {/* Tooltip on hover */}
+                  <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 px-2 py-1 bg-popover text-popover-foreground text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-10">
+                    {point.label}: {point.value}
+                  </div>
+                </div>
+                <div className="text-xs text-muted-foreground text-center truncate w-full">
+                  {point.label}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  const renderLineChart = () => {
+    const width = 300;
+    const internalHeight = chartHeight - 40;
+    const padding = 20;
+    const chartWidth = width - (padding * 2);
+    
+    const points = data.map((point, index) => {
+      const x = padding + (index / (data.length - 1)) * chartWidth;
+      const y = internalHeight - ((point.value / maxValue) * (internalHeight - padding)) + padding;
+      return { x, y, ...point };
+    });
+
+    const pathD = points.reduce((path, point, index) => {
+      const command = index === 0 ? 'M' : 'L';
+      return `${path} ${command} ${point.x} ${point.y}`;
+    }, '');
+
+    const areaPathD = `${pathD} L ${points[points.length - 1]?.x || 0} ${internalHeight} L ${padding} ${internalHeight} Z`;
+
+    return (
+      <div className="relative" style={{ height: chartHeight }}>
+        <svg width={width} height={chartHeight} className="w-full h-full">
+          {/* Grid lines */}
+          <defs>
+            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="hsl(var(--border))" strokeWidth="0.5" opacity="0.3" />
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#grid)" />
+          
+          {/* Area fill for area chart */}
+          {type === 'area' && (
+            <path
+              d={areaPathD}
+              fill={category ? `hsl(var(--category-${category}))` : 'hsl(var(--category-1))'}
+              fillOpacity="0.1"
+            />
+          )}
+          
+          {/* Line */}
+          <path
+            d={pathD}
+            fill="none"
+            stroke={category ? `hsl(var(--category-${category}))` : 'hsl(var(--category-1))'}
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          
+          {/* Data points */}
+          {points.map((point, index) => (
+            <g key={index}>
+              <circle
+                cx={point.x}
+                cy={point.y}
+                r="4"
+                fill={getDataPointColor(index, point)}
+                stroke="hsl(var(--background))"
+                strokeWidth="2"
+                className="hover:r-6 transition-all cursor-pointer"
+              />
+              {showValues && (
+                <text
+                  x={point.x}
+                  y={point.y - 10}
+                  textAnchor="middle"
+                  className="text-xs fill-foreground font-medium"
+                >
+                  {point.value}
+                </text>
+              )}
+            </g>
+          ))}
+        </svg>
+        
+        {/* X-axis labels */}
+        <div className="absolute bottom-0 left-0 right-0 flex justify-between px-5">
+          {data.map((point, index) => (
+            <div key={index} className="text-xs text-muted-foreground text-center">
+              {point.label}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+
+  const renderChart = () => {
+    switch (type) {
+      case 'line':
+      case 'area':
+        return renderLineChart();
+      case 'bar':
+        return renderBarChart();
+      default:
+        return renderBarChart();
+    }
+  };
+
+  // Loading state skeleton
+  if (isLoading) {
+    const loadingContent = (
+      <div className={cn("space-y-4", noWrapper && className)}>
+        {/* Header skeleton */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <Skeleton className="h-5 w-32" />
+            {subtitle && <Skeleton className="h-4 w-24" />}
+          </div>
+          <Skeleton className="h-8 w-8" />
+        </div>
+        
+        {/* Chart skeleton */}
+        <div className="space-y-2" style={{ height: chartHeight }}>
+          <Skeleton className="h-full w-full" />
+        </div>
+        
+        {/* Legend skeleton */}
+        {showLegend && variant !== 'minimal' && (
+          <div className="space-y-2 pt-2 border-t border-border">
+            {Array.from({ length: Math.min(data.length || 3, 4) }, (_, i) => (
+              <div key={i} className="flex items-center gap-2">
+                <Skeleton className="h-3 w-3" />
+                <Skeleton className="h-4 w-20" />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+
+    if (noWrapper) {
+      return loadingContent;
+    }
+
+    return (
+      <Card 
+        className={cn(
+          "card-container relative overflow-hidden",
+          className
+        )}
+        category={category}
+        data-component-name="Chart"
+      >
+        {loadingContent}
+      </Card>
+    );
+  }
+
+  const chartContent = (
+    <div className={cn("space-y-4", noWrapper && className)}>
+      {/* Header */}
+      {variant !== 'minimal' && (
+        <div className="flex items-center justify-between">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+              <div className={cn(
+                "p-2 rounded-md flex items-center justify-center transition-colors",
+                category ? `bg-category-${category}/8 text-category-${category}` : "bg-muted/50 text-muted-foreground"
+              )}>
+                {getChartIcon()}
+              </div>
+            </div>
+            {subtitle && (
+              <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>
+            )}
+          </div>
+          {showTrend && 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-muted-foreground">{trend.label}</span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Chart */}
+      <div className="relative">
+        {renderChart()}
+      </div>
+
+      {/* Legend */}
+      {showLegend && variant !== 'minimal' && (
+        <div className="flex flex-wrap gap-3 pt-2 border-t border-border">
+          {data.map((point, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <div
+                className="w-3 h-3 rounded-sm flex-shrink-0"
+                style={{ backgroundColor: getDataPointColor(index, point) }}
+              />
+              <span className="text-sm text-foreground">{point.label}</span>
+              {point.category && (
+                <DataBadge variant="category" category={point.category} size="sm">
+                  {`Cat ${point.category}`}
+                </DataBadge>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Accessibility: Data table fallback */}
+      {includeDataTable && !noWrapper && (
+        <details className="mt-4">
+          <summary className="text-sm text-muted-foreground cursor-pointer hover:text-foreground transition-colors">
+            View data table (accessible)
+          </summary>
+          <div className="mt-2 border border-border rounded overflow-hidden">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50">
+                <tr>
+                  <th className="text-left p-2 border-b border-border">Label</th>
+                  <th className="text-right p-2 border-b border-border">Value</th>
+                </tr>
+              </thead>
+              <tbody>
+                {data.map((point, index) => (
+                  <tr key={index} className="border-b border-border last:border-b-0">
+                    <td className="p-2 font-medium">{point.label}</td>
+                    <td className="p-2 text-right">{point.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </details>
+      )}
+    </div>
+  );
+
+  if (noWrapper) {
+    return chartContent;
+  }
+
+  return (
+    <Card 
+      className={cn(
+        "card-container relative overflow-hidden transition-all animate-slide-up",
+        onClick && "cursor-pointer hover:shadow-md hover:scale-[1.01] active:scale-[0.99]",
+        category && `hover:shadow-category-${category}`,
+        "group",
+        className
+      )}
+      category={category}
+      data-component-name="Chart"
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={onClick ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick();
+        }
+      } : undefined}
+    >
+      {chartContent}
+    </Card>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { Chart } from './Chart';
+export type { ChartProps, ChartDataPoint, ChartType, ChartVariant } from './Chart';