@pattern-stack/frontend-patterns 0.1.0 → 0.1.1

package/src/atoms/composed/Toast/Toast.tsx

@@ -0,0 +1,219 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { X, CheckCircle, AlertTriangle, AlertCircle, Info } from 'lucide-react';
+import { cn } from '../../utils/utils';
+import { Button } from '../../ui/button';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface ToastProps {
+  /** Toast content */
+  children: React.ReactNode;
+  /** Toast status type */
+  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  /** Toast title */
+  title?: string;
+  /** Auto-dismiss duration in milliseconds */
+  duration?: number;
+  /** Whether toast can be dismissed */
+  dismissible?: boolean;
+  /** Dismiss handler */
+  onDismiss?: () => void;
+  /** Toast position */
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+  /** Custom icon */
+  icon?: React.ReactNode;
+  /** Hide default icon */
+  hideIcon?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Show progress bar for auto-dismiss */
+  showProgress?: boolean;
+}
+
+const statusIcons = {
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: AlertCircle,
+  info: Info,
+  neutral: Info
+};
+
+export const Toast: React.FC<ToastProps> = ({
+  children,
+  status = 'neutral',
+  title,
+  duration = 0, // 0 means no auto-dismiss
+  dismissible = true,
+  onDismiss,
+  position = 'top-right',
+  icon,
+  hideIcon = false,
+  className,
+  showProgress = false
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [progress, setProgress] = useState(100);
+
+  const IconComponent = statusIcons[status];
+  const displayIcon = icon || (!hideIcon && <IconComponent className="w-5 h-5" />);
+
+  const handleDismiss = useCallback(() => {
+    setIsVisible(false);
+    setTimeout(() => onDismiss?.(), 300); // Wait for exit animation
+  }, [onDismiss]);
+
+  useEffect(() => {
+    if (duration > 0) {
+      const dismissTimer = setTimeout(handleDismiss, duration);
+      
+      if (showProgress) {
+        const progressInterval = setInterval(() => {
+          setProgress(prev => {
+            const decrement = 100 / (duration / 50); // Update every 50ms
+            return Math.max(prev - decrement, 0);
+          });
+        }, 50);
+        
+        return () => {
+          clearTimeout(dismissTimer);
+          clearInterval(progressInterval);
+        };
+      }
+      
+      return () => clearTimeout(dismissTimer);
+    }
+  }, [duration, showProgress, handleDismiss]);
+
+  const positionClasses = {
+    'top-right': 'top-4 right-4',
+    'top-left': 'top-4 left-4',
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2'
+  };
+
+  const statusClasses = {
+    success: 'bg-background text-status-success border-status-success/30 shadow-status-success/10',
+    warning: 'bg-background text-status-warning border-status-warning/30 shadow-status-warning/10',
+    error: 'bg-background text-status-error border-status-error/30 shadow-status-error/10',
+    info: 'bg-background text-status-info border-status-info/30 shadow-status-info/10',
+    neutral: 'bg-background text-foreground border-border shadow-muted/20'
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed z-50 w-full max-w-sm',
+        positionClasses[position]
+      )}
+    >
+      <div
+        className={cn(
+          'rounded-lg border p-4 shadow-lg backdrop-blur-sm',
+          'flex items-start gap-3 relative overflow-hidden',
+          statusClasses[status],
+          getAnimationClasses(animationPresets.card),
+          className
+        )}
+        role="alert"
+        data-component-name="Toast"
+      >
+        {/* 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 text-sm">
+              {title}
+            </h4>
+          )}
+          <div className="text-sm text-current">
+            {children}
+          </div>
+        </div>
+
+        {/* Dismiss button */}
+        {dismissible && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleDismiss}
+            className={cn(
+              'flex-shrink-0 h-auto p-1 -mt-1 -mr-1',
+              'hover:bg-current/10 text-current'
+            )}
+            aria-label="Dismiss notification"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        )}
+
+        {/* Progress bar */}
+        {showProgress && duration > 0 && (
+          <div className="absolute bottom-0 left-0 right-0 h-1 bg-current/10">
+            <div
+              className="h-full bg-current/30 transition-all duration-50 ease-linear"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Toast container component for managing multiple toasts
+export interface ToastContainerProps {
+  /** Toast notifications */
+  toasts: Array<ToastProps & { id: string }>;
+  /** Container position */
+  position?: ToastProps['position'];
+  /** Maximum number of visible toasts */
+  maxToasts?: number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const ToastContainer: React.FC<ToastContainerProps> = ({
+  toasts,
+  position = 'top-right',
+  maxToasts = 5,
+  className
+}) => {
+  const visibleToasts = toasts.slice(0, maxToasts);
+
+  const positionClasses = {
+    'top-right': 'top-4 right-4 flex-col',
+    'top-left': 'top-4 left-4 flex-col',
+    'bottom-right': 'bottom-4 right-4 flex-col-reverse',
+    'bottom-left': 'bottom-4 left-4 flex-col-reverse',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2 flex-col',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 flex-col-reverse'
+  };
+
+  return (
+    <div
+      className={cn(
+        'fixed z-50 flex gap-2 pointer-events-none',
+        positionClasses[position],
+        className
+      )}
+      data-component-name="ToastContainer"
+    >
+      {visibleToasts.map(({ id, ...toastProps }) => (
+        <div key={id} className="pointer-events-auto">
+          <Toast {...toastProps} position={position} />
+        </div>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { Toast, ToastContainer, type ToastProps, type ToastContainerProps } from './Toast';

package/src/atoms/composed/Tooltip/Tooltip.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '../../utils/utils';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface TooltipProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  variant?: 'default' | 'info' | 'warning' | 'error';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  delay?: number;
+  offset?: number;
+  trigger?: 'hover' | 'focus' | 'both';
+  className?: string;
+  contentClassName?: string;
+}
+
+export const Tooltip = ({
+  children,
+  content,
+  position = 'top',
+  variant = 'default',
+  size = 'md',
+  disabled = false,
+  delay = 300,
+  offset = 8,
+  trigger = 'both',
+  className,
+  contentClassName
+}: TooltipProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [actualPosition, setActualPosition] = useState(position);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
+    sm: 'px-2 py-1 text-xs max-w-48',
+    md: 'px-3 py-2 text-sm max-w-64',
+    lg: 'px-4 py-3 text-base max-w-80',
+  };
+
+  const variantClasses: Record<'default' | 'info' | 'warning' | 'error', string> = {
+    default: 'bg-card/95 text-card-foreground border-border/30',
+    info: 'status-info text-card-foreground border-status-info/30',
+    warning: 'status-warning text-card-foreground border-status-warning/30',
+    error: 'status-error text-card-foreground border-status-error/30',
+  };
+
+  const positionClasses: Record<'top' | 'bottom' | 'left' | 'right', string> = {
+    top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 transform -translate-y-1/2 ml-2',
+  };
+
+  const arrowClasses: Record<'top' | 'bottom' | 'left' | 'right', string> = {
+    top: 'top-full left-1/2 transform -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent',
+    bottom: 'bottom-full left-1/2 transform -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent',
+    left: 'left-full top-1/2 transform -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent',
+    right: 'right-full top-1/2 transform -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent',
+  };
+
+  const showTooltip = () => {
+    if (disabled) return;
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+      requestAnimationFrame(() => {
+        checkAndAdjustPosition();
+      });
+    }, delay);
+  };
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(false);
+  };
+
+  const checkAndAdjustPosition = () => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+
+    let newPosition = position;
+
+    // Check if tooltip goes outside viewport and adjust position
+    switch (position) {
+      case 'top':
+        if (triggerRect.top - tooltipRect.height - offset < 0) {
+          newPosition = 'bottom';
+        }
+        break;
+      case 'bottom':
+        if (triggerRect.bottom + tooltipRect.height + offset > viewport.height) {
+          newPosition = 'top';
+        }
+        break;
+      case 'left':
+        if (triggerRect.left - tooltipRect.width - offset < 0) {
+          newPosition = 'right';
+        }
+        break;
+      case 'right':
+        if (triggerRect.right + tooltipRect.width + offset > viewport.width) {
+          newPosition = 'left';
+        }
+        break;
+    }
+
+    setActualPosition(newPosition);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  const triggerProps = {
+    ...(trigger === 'hover' || trigger === 'both' ? {
+      onMouseEnter: showTooltip,
+      onMouseLeave: hideTooltip,
+    } : {}),
+    ...(trigger === 'focus' || trigger === 'both' ? {
+      onFocus: showTooltip,
+      onBlur: hideTooltip,
+    } : {}),
+  };
+
+  const tooltipBaseClasses = cn(
+    'absolute z-50 rounded-lg border backdrop-blur-sm shadow-lg pointer-events-none',
+    'animate-fade-in transition-all duration-200 ease-out',
+    sizeClasses[size],
+    variantClasses[variant],
+    positionClasses[actualPosition],
+    getAnimationClasses({
+      ...animationPresets.subtle,
+      timing: 'fast'
+    }),
+    contentClassName
+  );
+
+  const arrowBaseClasses = cn(
+    'absolute w-0 h-0 border-4',
+    arrowClasses[actualPosition]
+  );
+
+  const getArrowColor = () => {
+    switch (variant) {
+      case 'info':
+        return 'border-t-status-info';
+      case 'warning':
+        return 'border-t-status-warning';
+      case 'error':
+        return 'border-t-status-error';
+      default:
+        return 'border-t-card';
+    }
+  };
+
+  return (
+    <div className={cn("relative inline-block", className)}>
+      <div
+        ref={triggerRef}
+        {...triggerProps}
+        className="cursor-help"
+        aria-describedby={isVisible ? 'tooltip' : undefined}
+        data-component-name="TooltipTrigger"
+      >
+        {children}
+      </div>
+      
+      {isVisible && !disabled && (
+        <div
+          ref={tooltipRef}
+          id="tooltip"
+          role="tooltip"
+          aria-hidden={!isVisible}
+          className={tooltipBaseClasses}
+          style={{
+            marginTop: actualPosition === 'bottom' ? `${offset}px` : actualPosition === 'top' ? `-${offset}px` : '0',
+            marginLeft: actualPosition === 'right' ? `${offset}px` : actualPosition === 'left' ? `-${offset}px` : '0',
+          }}
+          data-component-name="Tooltip"
+        >
+          {content}
+          
+          {/* Arrow */}
+          <div
+            className={cn(
+              arrowBaseClasses,
+              getArrowColor()
+            )}
+            style={{
+              borderTopColor: actualPosition === 'bottom' ? 'inherit' : 'transparent',
+              borderBottomColor: actualPosition === 'top' ? 'inherit' : 'transparent',
+              borderLeftColor: actualPosition === 'right' ? 'inherit' : 'transparent',
+              borderRightColor: actualPosition === 'left' ? 'inherit' : 'transparent',
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export * from './Tooltip';

package/src/atoms/composed/UserAvatar/UserAvatar.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { User, Settings, LogOut, UserCircle, Moon, Sun } from 'lucide-react';
+import { 
+  Avatar, 
+  AvatarFallback, 
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Button
+} from '../../ui';
+import { useAuth } from '../../../features/auth';
+import { cn } from '../../utils/utils';
+
+interface UserAvatarProps {
+  className?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export const UserAvatar: React.FC<UserAvatarProps> = ({ className, category = 1 }) => {
+  const { user, logout } = useAuth();
+  const [isDark, setIsDark] = React.useState(() => 
+    document.documentElement.classList.contains('dark')
+  );
+
+  const toggleDarkMode = () => {
+    const newDarkMode = !isDark;
+    setIsDark(newDarkMode);
+    
+    if (newDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  const userInitials = (user as any)?.name 
+    ? (user as any).name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2)
+    : user?.email?.[0]?.toUpperCase() || 'U';
+
+  const avatarStyles = {
+    background: `linear-gradient(135deg, hsl(var(--category-${category}) / 0.1), hsl(var(--category-${category}) / 0.2))`,
+    borderColor: `hsl(var(--category-${category}) / 0.3)`,
+    color: `hsl(var(--category-${category}))`
+  };
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  return (
+    <div className={cn("flex items-center", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="relative h-9 w-9 rounded p-0 hover:bg-muted/30 transition-colors">
+            <Avatar className="h-9 w-9">
+              <AvatarFallback 
+                className="border font-medium text-sm"
+                style={avatarStyles}
+              >
+                <User className="w-4 h-4" />
+              </AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent 
+          className="w-56 bg-card/95 backdrop-blur-sm border-border/30" 
+          align="end" 
+          forceMount
+        >
+          {/* User Info */}
+          <div className="flex items-center space-x-3 p-3">
+            <Avatar className="h-8 w-8">
+              <AvatarFallback 
+                className="border font-medium text-xs"
+                style={avatarStyles}
+              >
+                {userInitials}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col space-y-0.5">
+              <p className="text-sm font-medium leading-none text-foreground">
+                {(user as any)?.name || 'Design User'}
+              </p>
+              <p className="text-xs leading-none text-muted-foreground">
+                {user?.email || 'user@design.studio'}
+              </p>
+            </div>
+          </div>
+          
+          <DropdownMenuSeparator />
+          
+          {/* Dark Mode Toggle */}
+          <DropdownMenuItem 
+            className="cursor-pointer focus:bg-muted/50"
+            onClick={toggleDarkMode}
+          >
+            {isDark ? (
+              <Sun className="mr-2 h-4 w-4" />
+            ) : (
+              <Moon className="mr-2 h-4 w-4" />
+            )}
+            <span>{isDark ? 'Light Mode' : 'Dark Mode'}</span>
+          </DropdownMenuItem>
+          
+          <DropdownMenuSeparator />
+          
+          {/* Menu Items */}
+          <DropdownMenuItem 
+            className="cursor-pointer focus:bg-muted/50"
+            onClick={() => alert('Profile coming soon!')}
+          >
+            <UserCircle className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+          </DropdownMenuItem>
+          
+          <DropdownMenuItem 
+            className="cursor-pointer focus:bg-muted/50"
+            onClick={() => alert('Settings coming soon!')}
+          >
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+          </DropdownMenuItem>
+          
+          <DropdownMenuSeparator />
+          
+          <DropdownMenuItem 
+            className="cursor-pointer text-destructive focus:text-destructive focus:bg-destructive/10"
+            onClick={handleLogout}
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            <span>Logout</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { UserAvatar } from './UserAvatar';

package/src/atoms/composed/UserMenu/UserMenu.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UserAvatar } from '../UserAvatar';
+import { cn } from '../../utils/utils';
+
+interface UserMenuProps {
+  className?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export const UserMenu: React.FC<UserMenuProps> = ({ className, category }) => {
+  return (
+    <div className={cn("flex items-center", className)}>
+      <UserAvatar category={category} />
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { UserMenu } from './UserMenu';

package/src/atoms/composed/index.ts

@@ -0,0 +1,29 @@
+// Business-specific shared components
+export { DataBadge } from './DataBadge';
+export { StatCard } from './StatCard';
+export { DetailedCard } from './DetailedCard';
+export { EmptyState } from './EmptyState';
+export { ColorSwatch } from './ColorSwatch';
+export { IconBadge } from './IconBadge';
+export { UserAvatar } from './UserAvatar';
+export { UserMenu } from './UserMenu';
+export { GlobalSearch } from './GlobalSearch';
+export { DataTable } from './DataTable';
+export { DateTimePicker } from './DateTimePicker';
+export { Chart } from './Chart';
+export { Accordion } from './Accordion';
+export { Modal } from './Modal';
+export { Tooltip } from './Tooltip';
+export { FileUpload } from './FileUpload';
+
+// Moved from molecules - business UI components
+export { Alert } from './Alert';
+export { Toast, ToastContainer } from './Toast';
+export { ProgressBar } from './ProgressBar';
+export { FormField } from './FormField';
+export { Breadcrumb } from './Breadcrumb';
+
+// Re-export any remaining components
+export { DarkModeToggle } from './DarkModeToggle';
+export { PaletteSwitcher } from './PaletteSwitcher';
+export { StyleGuide } from './StyleGuide';