@pattern-stack/frontend-patterns 0.0.3 → 0.0.4

package/src/atoms/composed/PaletteSwitcher.tsx

@@ -0,0 +1,386 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Card } from '../ui/card';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/Badge';
+import { cn } from '../utils/utils';
+import { 
+  Palette, 
+  Sun, 
+  Moon, 
+  Waves, 
+  Zap, 
+  TreePine, 
+  Sparkles, 
+  Sunset, 
+  Square,
+  Building2
+} from 'lucide-react';
+
+interface ColorPalette {
+  id: string;
+  name: string;
+  description: string;
+  className: string;
+  icon: React.ReactNode;
+  category: 'vibrant' | 'natural' | 'professional' | 'mystical';
+  preview: {
+    primary: string;
+    secondary: string;
+    accent: string;
+    background: string;
+  };
+}
+
+const colorPalettes: ColorPalette[] = [
+  {
+    id: 'default',
+    name: 'Default',
+    description: 'Clean, professional design system',
+    className: '',
+    icon: <Square className="w-4 h-4" />,
+    category: 'professional',
+    preview: {
+      primary: 'hsl(222.2 47.4% 11.2%)',
+      secondary: 'hsl(210 40% 96%)',
+      accent: 'hsl(210 40% 96%)',
+      background: 'hsl(0 0% 100%)'
+    }
+  },
+  {
+    id: 'ocean-depth',
+    name: 'Ocean Depth',
+    description: 'Deep blues with vibrant cyan and coral accents',
+    className: 'palette-ocean-depth',
+    icon: <Waves className="w-4 h-4" />,
+    category: 'vibrant',
+    preview: {
+      primary: 'hsl(195 100% 65%)',
+      secondary: 'hsl(220 20% 25%)',
+      accent: 'hsl(280 100% 70%)',
+      background: 'hsl(220 26% 14%)'
+    }
+  },
+  {
+    id: 'neon-cyber',
+    name: 'Neon Cyber',
+    description: 'Vibrant cyberpunk aesthetics with electric colors',
+    className: 'palette-neon-cyber',
+    icon: <Zap className="w-4 h-4" />,
+    category: 'vibrant',
+    preview: {
+      primary: 'hsl(320 100% 70%)',
+      secondary: 'hsl(260 20% 18%)',
+      accent: 'hsl(180 100% 70%)',
+      background: 'hsl(260 15% 8%)'
+    }
+  },
+  {
+    id: 'earth-tones',
+    name: 'Earth Tones',
+    description: 'Warm, organic colors inspired by nature',
+    className: 'palette-earth-tones',
+    icon: <TreePine className="w-4 h-4" />,
+    category: 'natural',
+    preview: {
+      primary: 'hsl(25 70% 45%)',
+      secondary: 'hsl(35 20% 88%)',
+      accent: 'hsl(200 60% 55%)',
+      background: 'hsl(35 25% 96%)'
+    }
+  },
+  {
+    id: 'aurora',
+    name: 'Aurora Borealis',
+    description: 'Mystical greens and blues like the northern lights',
+    className: 'palette-aurora',
+    icon: <Sparkles className="w-4 h-4" />,
+    category: 'mystical',
+    preview: {
+      primary: 'hsl(160 80% 65%)',
+      secondary: 'hsl(220 20% 20%)',
+      accent: 'hsl(280 90% 75%)',
+      background: 'hsl(220 30% 8%)'
+    }
+  },
+  {
+    id: 'sunset',
+    name: 'Sunset Gradient',
+    description: 'Warm oranges, pinks, and purples',
+    className: 'palette-sunset',
+    icon: <Sunset className="w-4 h-4" />,
+    category: 'natural',
+    preview: {
+      primary: 'hsl(25 85% 60%)',
+      secondary: 'hsl(15 25% 88%)',
+      accent: 'hsl(320 85% 65%)',
+      background: 'hsl(15 30% 95%)'
+    }
+  },
+  {
+    id: 'monochrome',
+    name: 'Monochrome Elite',
+    description: 'Sophisticated grayscale with blue accents',
+    className: 'palette-monochrome',
+    icon: <Square className="w-4 h-4" />,
+    category: 'professional',
+    preview: {
+      primary: 'hsl(240 100% 50%)',
+      secondary: 'hsl(0 0% 90%)',
+      accent: 'hsl(240 100% 50%)',
+      background: 'hsl(0 0% 98%)'
+    }
+  },
+  {
+    id: 'corporate-elite',
+    name: 'Corporate Elite',
+    description: 'Executive boardroom sophistication with navy and gold',
+    className: 'palette-corporate-elite',
+    icon: <Building2 className="w-4 h-4" />,
+    category: 'professional',
+    preview: {
+      primary: 'hsl(224 65% 25%)',
+      secondary: 'hsl(220 10% 88%)',
+      accent: 'hsl(45 85% 55%)',
+      background: 'hsl(220 15% 97%)'
+    }
+  }
+];
+
+const categoryColors = {
+  vibrant: 'bg-category-1',
+  natural: 'bg-category-6', 
+  professional: 'bg-category-4',
+  mystical: 'bg-category-5'
+};
+
+interface PaletteSwitcherProps {
+  className?: string;
+  onPaletteChange?: (paletteId: string) => void;
+}
+
+export const PaletteSwitcher = ({ 
+  className,
+  onPaletteChange 
+}: PaletteSwitcherProps) => {
+  const [activePalette, setActivePalette] = useState('default');
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // Define applyPalette function with useCallback to prevent recreation on each render
+  const applyPalette = useCallback((paletteId: string) => {
+    const palette = colorPalettes.find(p => p.id === paletteId);
+    if (!palette) return;
+
+    // Remove all existing palette classes
+    colorPalettes.forEach(p => {
+      if (p.className) {
+        document.documentElement.classList.remove(p.className);
+      }
+    });
+
+    // Apply new palette class
+    if (palette.className) {
+      document.documentElement.classList.add(palette.className);
+    }
+
+    // Save to localStorage
+    localStorage.setItem('selected-palette', paletteId);
+    
+    // Notify parent component
+    onPaletteChange?.(paletteId);
+  }, [onPaletteChange]);
+
+  // Load saved palette from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('selected-palette');
+    const savedDark = localStorage.getItem('dark-mode') === 'true';
+    
+    if (saved && colorPalettes.find(p => p.id === saved)) {
+      setActivePalette(saved);
+      applyPalette(saved);
+    }
+    
+    setIsDarkMode(savedDark);
+    if (savedDark) {
+      document.documentElement.classList.add('dark');
+    }
+  }, [applyPalette]);
+
+  const handlePaletteChange = (paletteId: string) => {
+    setActivePalette(paletteId);
+    applyPalette(paletteId);
+  };
+
+  const toggleDarkMode = () => {
+    const newDarkMode = !isDarkMode;
+    setIsDarkMode(newDarkMode);
+    
+    if (newDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+    
+    localStorage.setItem('dark-mode', newDarkMode.toString());
+  };
+
+  const groupedPalettes = colorPalettes.reduce((groups, palette) => {
+    const category = palette.category;
+    if (!groups[category]) {
+      groups[category] = [];
+    }
+    groups[category].push(palette);
+    return groups;
+  }, {} as Record<string, ColorPalette[]>);
+
+  return (
+    <div className={cn("space-y-6", className)} data-component-name="PaletteSwitcher">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Palette className="w-5 h-5 text-primary" data-component-name="PaletteSwitcherIcon" />
+          <h3 className="text-lg font-semibold">Color Palettes</h3>
+        </div>
+        
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={toggleDarkMode}
+          className="flex items-center gap-2"
+        >
+          {isDarkMode ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+          {isDarkMode ? 'Light' : 'Dark'}
+        </Button>
+      </div>
+
+      {/* Active Palette Info */}
+      <Card className="p-4" data-component-name="CategoryColorPreview">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded bg-primary/10 text-primary">
+            {colorPalettes.find(p => p.id === activePalette)?.icon}
+          </div>
+          <div className="flex-1">
+            <h4 className="font-medium">
+              {colorPalettes.find(p => p.id === activePalette)?.name}
+            </h4>
+            <p className="text-sm text-muted-foreground">
+              {colorPalettes.find(p => p.id === activePalette)?.description}
+            </p>
+          </div>
+          <Badge 
+            variant="secondary"
+            className={cn(
+              "text-xs",
+              categoryColors[colorPalettes.find(p => p.id === activePalette)?.category || 'professional']
+            )}
+          >
+            {colorPalettes.find(p => p.id === activePalette)?.category}
+          </Badge>
+        </div>
+      </Card>
+
+      {/* Palette Grid by Category */}
+      <div className="space-y-6">
+        {Object.entries(groupedPalettes).map(([category, palettes]) => (
+          <div key={category}>
+            <h4 className="text-sm font-medium text-muted-foreground uppercase tracking-wide mb-3">
+              {category}
+            </h4>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {palettes.map((palette) => (
+                <Card
+                  key={palette.id}
+                  className={cn(
+                    "p-4 cursor-pointer transition-all hover:shadow",
+                    activePalette === palette.id && "ring-2 ring-primary bg-primary/5"
+                  )}
+                  onClick={() => handlePaletteChange(palette.id)}
+                  data-component-name="PaletteCard"
+                  data-active={activePalette === palette.id}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 rounded bg-muted text-muted-foreground">
+                      {palette.icon}
+                    </div>
+                    
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{palette.name}</div>
+                      <div className="text-sm text-muted-foreground truncate">
+                        {palette.description}
+                      </div>
+                    </div>
+                    
+                    {/* Color Preview */}
+                    <div className="flex gap-1">
+                      <div 
+                        className="w-3 h-3 rounded-full border border-border"
+                        style={{ backgroundColor: palette.preview.primary }}
+                        data-component-name="PaletteColorPreview"
+                      />
+                      <div 
+                        className="w-3 h-3 rounded-full border border-border"
+                        style={{ backgroundColor: palette.preview.accent }}
+                        data-component-name="PaletteColorPreview"
+                      />
+                      <div 
+                        className="w-3 h-3 rounded-full border border-border"
+                        style={{ backgroundColor: palette.preview.secondary }}
+                        data-component-name="PaletteColorPreview"
+                      />
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Category Color Preview */}
+      <Card className="p-4" data-component-name="CategoryColorPreview">
+        <h4 className="text-sm font-medium mb-3">Category Colors Preview</h4>
+        <div className="grid grid-cols-4 md:grid-cols-8 gap-2">
+          {[1, 2, 3, 4, 5, 6, 7, 8].map(num => (
+            <div key={num} className="text-center">
+                <div 
+                  className={cn(
+                    "w-8 h-8 rounded mx-auto mb-1 border border-border",
+                    `bg-category-${num}`
+                  )}
+                  data-component-name="ColorSwatch"
+                  data-category={num}
+                />
+              <div className="text-xs text-muted-foreground">{num}</div>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      {/* Status Colors Preview */}
+      <Card className="p-4" data-component-name="StatusColorPreview">
+        <h4 className="text-sm font-medium mb-3">Status Colors Preview</h4>
+        <div className="grid grid-cols-5 gap-2">
+          {[
+            { name: 'Success', class: 'bg-status-success' },
+            { name: 'Warning', class: 'bg-status-warning' },
+            { name: 'Error', class: 'bg-status-error' },
+            { name: 'Info', class: 'bg-status-info' },
+            { name: 'Neutral', class: 'bg-status-neutral' }
+          ].map(status => (
+            <div key={status.name} className="text-center">
+                <div 
+                  className={cn(
+                    "w-8 h-8 rounded mx-auto mb-1 border border-border",
+                    status.class
+                  )}
+                  data-component-name="StatusSwatch"
+                  data-status={status.name.toLowerCase()}
+                />
+              <div className="text-xs text-muted-foreground">{status.name}</div>
+            </div>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,116 @@
+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/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarProps } from './ProgressBar';