@pattern-stack/frontend-patterns 0.1.0 → 0.1.1

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

package/src/atoms/composed/ColorSwatch/ColorSwatch.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { cn } from '../../utils/utils';
+
+export interface ColorSwatchProps {
+  /** CSS color value (hex, hsl, rgb, or CSS variable) */
+  color: string;
+  /** Display name for the color */
+  name: string;
+  /** Optional size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Optional label to show below the swatch */
+  label?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the swatch is interactive */
+  interactive?: boolean;
+  /** Click handler for interactive swatches */
+  onClick?: () => void;
+}
+
+export const ColorSwatch: React.FC<ColorSwatchProps> = ({
+  color,
+  name,
+  size = 'md',
+  label,
+  className,
+  interactive = false,
+  onClick
+}) => {
+  const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-16 h-16', 
+    lg: 'w-24 h-24'
+  };
+
+  const labelSizes = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base'
+  };
+
+  return (
+    <div 
+      className={cn(
+        'flex flex-col items-center space-y-2',
+        interactive && 'cursor-pointer group',
+        className
+      )}
+      data-component-name="ColorSwatch"
+      onClick={onClick}
+    >
+      <div
+        className={cn(
+          'rounded border border-border/20 flex items-center justify-center text-white font-medium',
+          sizeClasses[size],
+          interactive && 'transition-all hover:scale-105 hover:shadow group-hover:border-border'
+        )}
+        style={{ backgroundColor: color }}
+        title={`${name}: ${color}`}
+      >
+        {size === 'lg' && <span className="text-sm">{name}</span>}
+      </div>
+      
+      {label && (
+        <div className={cn('text-center space-y-1', labelSizes[size])}>
+          <div className="font-medium text-foreground">{label}</div>
+          <div className="text-muted-foreground font-mono text-xs">{color}</div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch';

package/src/atoms/composed/DarkModeToggle.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { cn } from '../utils/utils';
+
+export const DarkModeToggle = ({ className }: { className?: string }) => {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Check for saved preference or system preference
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+      setIsDark(true);
+      document.documentElement.classList.add('dark');
+    } else {
+      setIsDark(false);
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    if (isDark) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+      setIsDark(false);
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+      setIsDark(true);
+    }
+  };
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className={cn(
+        "relative inline-flex h-10 w-20 items-center justify-center rounded-full",
+        "bg-muted dark:bg-muted",
+        "transition-all",
+        "hover:bg-muted/80 dark:hover:bg-muted/80",
+        "focus:outline-none focus:ring-2 focus:ring-primary",
+        className
+      )}
+      data-component-name="DarkModeToggle"
+      data-state={isDark ? 'dark' : 'light'}
+      aria-label="Toggle dark mode"
+    >
+      <span
+        className={cn(
+          "absolute left-1 inline-flex h-8 w-8 items-center justify-center rounded-full",
+          "bg-background dark:bg-background",
+          "shadow transition-transform",
+          isDark && "translate-x-10"
+        )}
+        data-component-name="DarkModeToggleThumb"
+      >
+        {isDark ? (
+          <Moon className="h-4 w-4 text-category-4" data-component-name="DarkModeToggleIcon" />
+        ) : (
+          <Sun className="h-4 w-4 text-category-3" data-component-name="DarkModeToggleIcon" />
+        )}
+      </span>
+    </button>
+  );
+};

package/src/atoms/composed/DataBadge/DataBadge.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { cn, useTextOverflow } from '../../utils/utils';
+import { Tooltip } from '../Tooltip';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface DataBadgeProps {
+  children: React.ReactNode;
+  variant?: 'category' | 'status';
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  size?: 'sm' | 'md' | 'lg';
+  interactive?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const DataBadge = ({  
+  children,
+  variant = 'category',
+  category = 1,
+  status = 'neutral',
+  size = 'md',
+  interactive = false,
+  onClick,
+  className
+}: DataBadgeProps) => {
+  const { ref, isOverflowing } = useTextOverflow();
+
+  const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
+    sm: 'px-2 py-0.5 text-xs h-5 min-w-[1.5rem] max-w-[150px]',
+    md: 'px-2.5 py-1 text-sm h-7 min-w-[2rem] max-w-[200px]',
+    lg: 'px-3 py-1.5 text-base h-9 min-w-[2.5rem] max-w-[250px]',
+  };
+
+  const baseClasses = cn(
+    'inline-flex items-center font-medium rounded-lg border truncate',
+    sizeClasses[size],
+    interactive && [
+      'cursor-pointer',
+      getAnimationClasses({
+        ...animationPresets.dataBadge,
+        size: size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'
+      })
+    ],
+    className
+  );
+
+  const variantClasses = variant === 'category' 
+    ? `badge-category-${category}`
+    : `status-${status}`;
+
+  const badge = (
+    <span 
+      ref={ref as React.RefObject<HTMLSpanElement>}
+      className={cn(baseClasses, variantClasses, 'animate-fade-in')}
+      onClick={onClick}
+      role={interactive ? 'button' : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      onKeyDown={interactive ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick?.();
+        }
+      } : undefined}
+      data-component-name="DataBadge"
+    >
+      {children}
+    </span>
+  );
+
+  // Show tooltip when text is truncated
+  if (isOverflowing && typeof children === 'string') {
+    return (
+      <Tooltip content={children} position="top" size="sm">
+        {badge}
+      </Tooltip>
+    );
+  }
+
+  return badge;
+};

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

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