@pattern-stack/frontend-patterns 0.1.2 → 0.1.3

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

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

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

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

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

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

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

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

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

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

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

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

package/src/atoms/composed/index.ts

@@ -1,29 +0,0 @@
-// 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';