@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/src/__tests__/utils.tsx

@@ -1,123 +0,0 @@
-import React from 'react'
-import { render, RenderOptions } from '@testing-library/react'
-import { BrowserRouter } from 'react-router-dom'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
-// Test utilities (equivalent to pytest fixtures)
-
-/**
- * Custom render function that wraps components with necessary providers
- * Similar to how conftest.py provides fixtures for database, auth, etc.
- */
-interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
-  // Add custom options here
-  initialRoute?: string
-  queryClient?: QueryClient
-}
-
-const AllTheProviders = ({ 
-  children, 
-  initialRoute = '/',
-  queryClient 
-}: { 
-  children: React.ReactNode
-  initialRoute?: string
-  queryClient?: QueryClient
-}) => {
-  // Create a fresh QueryClient for each test to avoid test pollution
-  const testQueryClient = queryClient || new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false, // Don't retry in tests
-        gcTime: 0, // Disable garbage collection
-      },
-      mutations: {
-        retry: false,
-      },
-    },
-  })
-
-  // Set initial route for testing
-  if (initialRoute !== '/') {
-    window.history.pushState({}, 'Test page', initialRoute)
-  }
-
-  return (
-    <QueryClientProvider client={testQueryClient}>
-      <BrowserRouter>
-        {children}
-      </BrowserRouter>
-    </QueryClientProvider>
-  )
-}
-
-const customRender = (
-  ui: React.ReactElement,
-  options?: CustomRenderOptions
-) => {
-  const { initialRoute, queryClient, ...renderOptions } = options || {}
-  
-  return render(ui, {
-    wrapper: (props) => (
-      <AllTheProviders 
-        {...props} 
-        initialRoute={initialRoute}
-        queryClient={queryClient}
-      />
-    ),
-    ...renderOptions,
-  })
-}
-
-/**
- * Create a mock API client for testing
- * Similar to how you might mock database connections in backend tests
- */
-export const createMockApiClient = () => ({
-  get: vi.fn(),
-  post: vi.fn(),
-  put: vi.fn(),
-  delete: vi.fn(),
-  patch: vi.fn(),
-})
-
-/**
- * Mock user data factory
- * Similar to factory patterns in backend testing
- */
-export const createMockUser = (overrides = {}) => ({
-  id: '1',
-  name: 'Test User',
-  email: 'test@example.com',
-  role: 'user',
-  ...overrides,
-})
-
-/**
- * Mock auth context for testing
- */
-export const createMockAuthContext = (overrides = {}) => ({
-  user: createMockUser(),
-  isAuthenticated: true,
-  login: vi.fn(),
-  logout: vi.fn(),
-  loading: false,
-  ...overrides,
-})
-
-/**
- * Helper to test error boundaries
- */
-export const ThrowError = ({ shouldThrow }: { shouldThrow?: boolean }) => {
-  if (shouldThrow) {
-    throw new Error('Test error')
-  }
-  return <div>No error</div>
-}
-
-// Re-export everything from testing-library
-export * from '@testing-library/react'
-export { default as userEvent } from '@testing-library/user-event'
-
-// Export our custom render as the default render
-export { customRender as render }

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

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

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

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

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

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

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

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

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