@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

package/src/atoms/composed/Accordion/Accordion.tsx

@@ -0,0 +1,271 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '../../utils/utils';
+import { getAnimationClasses } from '../../utils/animations';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: React.ReactNode;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  variant?: 'default' | 'bordered' | 'filled';
+  allowMultiple?: boolean;
+  defaultOpen?: string | string[];
+  collapsible?: boolean;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  className?: string;
+  onItemToggle?: (itemId: string, isOpen: boolean) => void;
+}
+
+export const Accordion = ({
+  items,
+  variant = 'default',
+  allowMultiple = false,
+  defaultOpen = [],
+  collapsible = true,
+  category,
+  className,
+  onItemToggle
+}: AccordionProps) => {
+  // Initialize openItems state based on defaultOpen
+  const [openItems, setOpenItems] = useState<Set<string>>(() => {
+    if (Array.isArray(defaultOpen)) {
+      return new Set(defaultOpen);
+    } else if (defaultOpen) {
+      return new Set([defaultOpen]);
+    }
+    return new Set();
+  });
+
+  const handleItemToggle = (itemId: string) => {
+    const isCurrentlyOpen = openItems.has(itemId);
+    
+    if (!allowMultiple) {
+      // Single mode: close others, toggle current
+      if (isCurrentlyOpen && collapsible) {
+        setOpenItems(new Set());
+        onItemToggle?.(itemId, false);
+      } else if (!isCurrentlyOpen) {
+        setOpenItems(new Set([itemId]));
+        onItemToggle?.(itemId, true);
+      }
+    } else {
+      // Multiple mode: toggle current
+      const newOpenItems = new Set(openItems);
+      if (isCurrentlyOpen && collapsible) {
+        newOpenItems.delete(itemId);
+        onItemToggle?.(itemId, false);
+      } else if (!isCurrentlyOpen) {
+        newOpenItems.add(itemId);
+        onItemToggle?.(itemId, true);
+      }
+      setOpenItems(newOpenItems);
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'bordered':
+        return 'border border-border rounded-lg overflow-hidden';
+      case 'filled':
+        return 'bg-muted/30 rounded-lg overflow-hidden';
+      default:
+        return 'space-y-2';
+    }
+  };
+
+  const getItemClasses = (isOpen: boolean) => {
+    const baseClasses = variant === 'default' 
+      ? 'border border-border rounded-lg overflow-hidden'
+      : variant === 'bordered'
+      ? 'border-b border-border last:border-b-0'
+      : '';
+
+    return cn(
+      baseClasses,
+      isOpen && category && variant !== 'filled' && `shadow-category-${category}/20 shadow-lg`,
+      'transition-all duration-200'
+    );
+  };
+
+  const getHeaderClasses = (item: AccordionItem, isOpen: boolean) => {
+    return cn(
+      'w-full flex items-center justify-between p-4 text-left',
+      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      'transition-all duration-200',
+      getAnimationClasses({ type: 'subtle', timing: 'normal' }),
+      
+      // Variant-specific styling
+      variant === 'filled' && 'bg-muted/50',
+      variant === 'default' && 'bg-card hover:bg-muted/30',
+      variant === 'bordered' && 'bg-card hover:bg-muted/30',
+      
+      // Category coloring when open
+      isOpen && category && `bg-category-${category}/5 border-category-${category}/20`,
+      
+      // Disabled state
+      item.disabled && 'opacity-50 cursor-not-allowed',
+      !item.disabled && 'cursor-pointer',
+      
+      // Focus and hover states
+      !item.disabled && 'hover:bg-accent/20',
+      
+      'group'
+    );
+  };
+
+  const getIconClasses = (isOpen: boolean) => {
+    return cn(
+      'w-4 h-4 transition-transform duration-200 flex-shrink-0',
+      isOpen ? 'rotate-90' : 'rotate-0',
+      category ? `text-category-${category}` : 'text-muted-foreground',
+      'group-hover:scale-110'
+    );
+  };
+
+  return (
+    <div 
+      className={cn(
+        getVariantClasses(),
+        className
+      )}
+      data-component-name="Accordion"
+      data-variant={variant}
+      role="tablist"
+    >
+      {items.map((item) => {
+        const isOpen = openItems.has(item.id);
+        
+        return (
+          <AccordionItem
+            key={item.id}
+            item={item}
+            isOpen={isOpen}
+            onToggle={() => handleItemToggle(item.id)}
+            variant={variant}
+            category={category}
+            itemClasses={getItemClasses(isOpen)}
+            headerClasses={getHeaderClasses(item, isOpen)}
+            iconClasses={getIconClasses(isOpen)}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+// Separate AccordionItem component for better performance and cleaner code
+interface AccordionItemComponentProps {
+  item: AccordionItem;
+  isOpen: boolean;
+  onToggle: () => void;
+  variant: 'default' | 'bordered' | 'filled';
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  itemClasses: string;
+  headerClasses: string;
+  iconClasses: string;
+}
+
+const AccordionItem = ({
+  item,
+  isOpen,
+  onToggle,
+  variant,
+  category,
+  itemClasses,
+  headerClasses,
+  iconClasses
+}: AccordionItemComponentProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      if (isOpen) {
+        setContentHeight(contentRef.current.scrollHeight);
+      } else {
+        setContentHeight(0);
+      }
+    }
+  }, [isOpen, item.content]);
+
+  return (
+    <div className={itemClasses}>
+      {/* Header */}
+      <button
+        className={headerClasses}
+        onClick={onToggle}
+        disabled={item.disabled}
+        aria-expanded={isOpen}
+        aria-controls={`accordion-content-${item.id}`}
+        id={`accordion-header-${item.id}`}
+        role="tab"
+        data-component-name="AccordionHeader"
+      >
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {/* Custom icon or default chevron */}
+          {item.icon ? (
+            <div className={cn(
+              'flex-shrink-0',
+              category ? `text-category-${category}` : 'text-muted-foreground'
+            )}>
+              {item.icon}
+            </div>
+          ) : (
+            <ChevronRight className={iconClasses} />
+          )}
+          
+          {/* Title */}
+          <span className={cn(
+            'font-medium text-sm truncate',
+            isOpen && category ? `text-category-${category}` : 'text-foreground',
+            'group-hover:text-foreground transition-colors duration-200'
+          )}>
+            {item.title}
+          </span>
+        </div>
+
+        {/* Collapse indicator */}
+        <ChevronDown 
+          className={cn(
+            'w-4 h-4 transition-transform duration-200 flex-shrink-0 ml-2',
+            isOpen ? 'rotate-180' : 'rotate-0',
+            category && isOpen ? `text-category-${category}` : 'text-muted-foreground',
+            'group-hover:scale-110'
+          )}
+          data-component-name="AccordionChevron"
+        />
+      </button>
+
+      {/* Content */}
+      <div
+        style={{
+          height: contentHeight,
+          overflow: 'hidden',
+          transition: 'height 250ms cubic-bezier(0.4, 0, 0.2, 1)'
+        }}
+        aria-labelledby={`accordion-header-${item.id}`}
+        id={`accordion-content-${item.id}`}
+        role="tabpanel"
+        data-component-name="AccordionContent"
+      >
+        <div 
+          ref={contentRef}
+          className={cn(
+            'p-4 pt-0',
+            variant === 'filled' && 'bg-background/50',
+            isOpen && category && variant !== 'filled' && `bg-category-${category}/2`,
+            'text-muted-foreground text-sm leading-relaxed'
+          )}
+        >
+          {item.content}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';

package/src/atoms/composed/Alert/Alert.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { X, AlertCircle, CheckCircle, AlertTriangle, Info } from 'lucide-react';
+import { cn } from '../../utils/utils';
+import { Button } from '../../ui/button';
+import { getAnimationClasses, animationPresets } from '../../utils/animations';
+
+export interface AlertProps {
+  /** Alert content */
+  children: React.ReactNode;
+  /** Alert status type */
+  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+  /** Alert title */
+  title?: string;
+  /** Whether alert can be dismissed */
+  dismissible?: boolean;
+  /** Dismiss handler */
+  onDismiss?: () => void;
+  /** Visual variant */
+  variant?: 'filled' | 'outlined' | 'soft';
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Additional CSS classes */
+  className?: string;
+  /** Custom icon */
+  icon?: React.ReactNode;
+  /** Hide default icon */
+  hideIcon?: boolean;
+}
+
+const statusIcons = {
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: AlertCircle,
+  info: Info,
+  neutral: Info
+};
+
+export const Alert: React.FC<AlertProps> = ({
+  children,
+  status = 'neutral',
+  title,
+  dismissible = false,
+  onDismiss,
+  variant = 'soft',
+  size = 'md',
+  className,
+  icon,
+  hideIcon = false
+}) => {
+  const IconComponent = statusIcons[status];
+  const displayIcon = icon || (!hideIcon && <IconComponent className="w-5 h-5" />);
+
+  const sizeClasses = {
+    sm: 'p-3 text-sm',
+    md: 'p-4 text-sm',
+    lg: 'p-6 text-base'
+  };
+
+  const variantClasses = {
+    filled: {
+      success: 'bg-status-success text-white border-status-success',
+      warning: 'bg-status-warning text-white border-status-warning',
+      error: 'bg-status-error text-white border-status-error',
+      info: 'bg-status-info text-white border-status-info',
+      neutral: 'bg-muted text-foreground border-border'
+    },
+    outlined: {
+      success: 'bg-background text-status-success border-status-success',
+      warning: 'bg-background text-status-warning border-status-warning',
+      error: 'bg-background text-status-error border-status-error',
+      info: 'bg-background text-status-info border-status-info',
+      neutral: 'bg-background text-foreground border-border'
+    },
+    soft: {
+      success: 'bg-status-success/10 text-status-success border-status-success/20',
+      warning: 'bg-status-warning/10 text-status-warning border-status-warning/20',
+      error: 'bg-status-error/10 text-status-error border-status-error/20',
+      info: 'bg-status-info/10 text-status-info border-status-info/20',
+      neutral: 'bg-muted/50 text-foreground border-border/50'
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border flex items-start gap-3 relative',
+        'transition-all duration-200',
+        sizeClasses[size],
+        variantClasses[variant][status],
+        getAnimationClasses(animationPresets.subtle),
+        className
+      )}
+      role="alert"
+      data-component-name="Alert"
+    >
+      {/* 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">
+            {title}
+          </h4>
+        )}
+        <div className="text-current">
+          {children}
+        </div>
+      </div>
+
+      {/* Dismiss button */}
+      {dismissible && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onDismiss}
+          className={cn(
+            'flex-shrink-0 h-auto p-1 -mt-1 -mr-1',
+            'hover:bg-current/10 text-current'
+          )}
+          aria-label="Dismiss alert"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { Alert, type AlertProps } from './Alert';

package/src/atoms/composed/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ChevronRight, Home } from 'lucide-react';
+import { cn } from '../../utils/utils';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  active?: boolean;
+}
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  showHome?: boolean;
+  homeHref?: string;
+  className?: string;
+  separator?: React.ReactNode;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  showHome = true,
+  homeHref = '/',
+  className,
+  separator = <ChevronRight className="w-4 h-4" />,
+  category = 1
+}) => {
+  const allItems = showHome 
+    ? [{ label: 'Home', href: homeHref, icon: <Home className="w-4 h-4" />, active: false }, ...items]
+    : items;
+
+  return (
+    <nav 
+      className={cn('flex items-center space-x-1 text-sm', className)}
+      aria-label="Breadcrumb"
+      data-component-name="Breadcrumb"
+    >
+      <ol className="flex items-center space-x-1">
+        {allItems.map((item, index) => {
+          const isLast = index === allItems.length - 1;
+          const isActive = item.active || isLast;
+          
+          return (
+            <li key={index} className="flex items-center space-x-1">
+              {item.href && !isActive ? (
+                <a
+                  href={item.href}
+                  className={cn(
+                    'flex items-center space-x-1 hover:text-foreground transition-colors',
+                    `text-category-${category}/70 hover:text-category-${category}`,
+                    'hover:underline'
+                  )}
+                >
+                  {'icon' in item && item.icon}
+                  <span>{item.label}</span>
+                </a>
+              ) : (
+                <span
+                  className={cn(
+                    'flex items-center space-x-1',
+                    isActive 
+                      ? `text-category-${category} font-medium` 
+                      : 'text-muted-foreground'
+                  )}
+                  aria-current={isActive ? 'page' : undefined}
+                >
+                  {'icon' in item && item.icon}
+                  <span>{item.label}</span>
+                </span>
+              )}
+              
+              {!isLast && (
+                <span className="text-muted-foreground ml-1">
+                  {separator}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

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

@@ -0,0 +1 @@
+export { Breadcrumb, type BreadcrumbItem } from './Breadcrumb';