@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

package/src/atoms/composed/PaletteSwitcher.tsx

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

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

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