@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

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

@@ -1,425 +0,0 @@
-// 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

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

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

@@ -1,72 +0,0 @@
-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

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

package/src/atoms/composed/DarkModeToggle.tsx

@@ -1,66 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

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