@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

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

@@ -1,2 +0,0 @@
-export { IconBadge } from './IconBadge';
-export type { IconBadgeProps } from './IconBadge';

package/src/atoms/composed/Modal/Modal.tsx

@@ -1,223 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from '../../ui/button';
-import { X } from 'lucide-react';
-import { cn } from '../../utils/utils';
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  variant?: 'default' | 'destructive' | 'success';
-  closeOnBackdrop?: boolean;
-  closeOnEscape?: boolean;
-  showCloseButton?: boolean;
-  footer?: React.ReactNode;
-  className?: string;
-  overlayClassName?: string;
-  contentClassName?: string;
-}
-
-const sizeClasses = {
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-lg', 
-  xl: 'max-w-xl'
-};
-
-const variantClasses = {
-  default: 'border-border',
-  destructive: 'border-l-4 border-l-status-error',
-  success: 'border-l-4 border-l-status-success'
-};
-
-export const Modal = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  size = 'md',
-  variant = 'default',
-  closeOnBackdrop = true,
-  closeOnEscape = true,
-  showCloseButton = true,
-  footer,
-  className,
-  overlayClassName,
-  contentClassName
-}: ModalProps) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const previousActiveElement = useRef<HTMLElement | null>(null);
-
-  // Handle escape key
-  useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
-
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, closeOnEscape, onClose]);
-
-  // Handle focus management
-  useEffect(() => {
-    if (!isOpen) return;
-
-    // Store the currently focused element
-    previousActiveElement.current = document.activeElement as HTMLElement;
-
-    // Focus the modal
-    if (modalRef.current) {
-      modalRef.current.focus();
-    }
-
-    // Restore focus when modal closes
-    return () => {
-      if (previousActiveElement.current) {
-        previousActiveElement.current.focus();
-      }
-    };
-  }, [isOpen]);
-
-  // Prevent body scroll when modal is open
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isOpen]);
-
-  // Handle backdrop click
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (closeOnBackdrop && e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  // Trap focus within modal
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Tab') {
-      const focusableElements = modalRef.current?.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      
-      if (!focusableElements?.length) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-      if (e.shiftKey) {
-        if (document.activeElement === firstElement) {
-          e.preventDefault();
-          lastElement.focus();
-        }
-      } else {
-        if (document.activeElement === lastElement) {
-          e.preventDefault();
-          firstElement.focus();
-        }
-      }
-    }
-  };
-
-  if (!isOpen) return null;
-
-  return createPortal(
-    <div
-      className={cn(
-        "fixed inset-0 z-50 flex items-center justify-center p-4",
-        "bg-black/50 backdrop-blur-sm",
-        "animate-in fade-in-0 duration-200",
-        overlayClassName
-      )}
-      onClick={handleBackdropClick}
-      data-component-name="ModalOverlay"
-    >
-      <div
-        ref={modalRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? "modal-title" : undefined}
-        tabIndex={-1}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          "relative w-full max-h-[90vh] overflow-hidden",
-          "bg-card border rounded-lg shadow-lg",
-          "animate-in zoom-in-95 duration-200",
-          sizeClasses[size],
-          variantClasses[variant],
-          className
-        )}
-        data-component-name="Modal"
-        data-variant={variant}
-        data-size={size}
-      >
-        {/* Header */}
-        {(title || showCloseButton) && (
-          <div className="flex items-center justify-between p-6 border-b border-border">
-            {title && (
-              <h2 
-                id="modal-title"
-                className={cn(
-                  "text-lg font-semibold text-foreground",
-                  variant === 'destructive' && "text-status-error",
-                  variant === 'success' && "text-status-success"
-                )}
-                data-component-name="ModalTitle"
-              >
-                {title}
-              </h2>
-            )}
-            {showCloseButton && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={onClose}
-                className="h-8 w-8 rounded hover:bg-muted/80"
-                aria-label="Close modal"
-                data-component-name="ModalCloseButton"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Content */}
-        <div 
-          className={cn(
-            "p-6 overflow-y-auto",
-            (!title && !showCloseButton) && "pt-6",
-            !footer && "pb-6",
-            contentClassName
-          )}
-          data-component-name="ModalContent"
-        >
-          {children}
-        </div>
-
-        {/* Footer */}
-        {footer && (
-          <div 
-            className="flex items-center justify-end gap-3 p-6 pt-0 border-t border-border"
-            data-component-name="ModalFooter"
-          >
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-};

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

@@ -1,2 +0,0 @@
-export { Modal } from './Modal';
-export type { ModalProps } from './Modal';

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