@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/atoms/composed/IconBadge/IconBadge.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { cn } from '../../utils/utils';
+import { Tooltip } from '../Tooltip';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface IconBadgeProps {
+  children?: React.ReactNode;
+  icon?: 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;
+  /** Tooltip content to show on hover */
+  tooltip?: string;
+}
+
+export const IconBadge = ({  
+  children,
+  icon,
+  variant = 'category',
+  category = 1,
+  status = 'neutral',
+  size = 'md',
+  interactive = false,
+  onClick,
+  className,
+  tooltip
+}: IconBadgeProps) => {
+
+  const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
+    sm: 'w-8 h-8 text-xs rounded-lg',
+    md: 'w-10 h-10 text-sm rounded-xl',
+    lg: 'w-12 h-12 text-base rounded-xl',
+  };
+
+  const baseClasses = cn(
+    'inline-flex items-center justify-center font-bold shadow-md',
+    sizeClasses[size],
+    interactive && [
+      'cursor-pointer',
+      getAnimationClasses({
+        ...animationPresets.dataBadge,
+        size: size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'
+      })
+    ],
+    className
+  );
+
+  // Generate gradient classes based on variant
+  const gradientClasses = variant === 'category' 
+    ? `bg-gradient-to-br from-category-${category} to-category-${Math.min(category + 1, 8)}`
+    : variant === 'status'
+    ? `bg-gradient-to-br from-status-${status} to-status-${status}`
+    : 'bg-gradient-to-br from-category-1 to-category-2';
+
+  const badge = (
+    <div 
+      className={cn(baseClasses, gradientClasses, '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="IconBadge"
+    >
+      {icon && (
+        <span className="text-primary-foreground drop-shadow">
+          {icon}
+        </span>
+      )}
+      {children && !icon && (
+        <span className="text-primary-foreground font-bold">
+          {children}
+        </span>
+      )}
+    </div>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip content={tooltip} position="top" size="sm">
+        {badge}
+      </Tooltip>
+    );
+  }
+
+  return badge;
+};

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

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

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

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

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