@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

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

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

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

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

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

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

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>
-  );
-};