@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/__tests__/molecules/layout/simple-layout.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '../../utils'
+
+// Simple layout component for testing
+const SimpleHeader = ({ title, showNav = true }: { title: string; showNav?: boolean }) => (
+  <header role="banner" className="bg-background border-b border-border">
+    <div className="flex items-center justify-between p-4">
+      <h1 className="text-xl font-semibold text-foreground">{title}</h1>
+      {showNav && (
+        <nav aria-label="Main navigation">
+          <ul className="flex space-x-4">
+            <li>
+              <a href="/" className="text-primary hover:text-primary-hover">Home</a>
+            </li>
+            <li>
+              <a href="/about" className="text-primary hover:text-primary-hover">About</a>
+            </li>
+          </ul>
+        </nav>
+      )}
+    </div>
+  </header>
+)
+
+describe('Layout Components (Molecule)', () => {
+  it('renders header with title', () => {
+    render(<SimpleHeader title="Test App" />)
+    
+    const header = screen.getByRole('banner')
+    expect(header).toBeInTheDocument()
+    
+    const title = screen.getByRole('heading', { level: 1 })
+    expect(title).toHaveTextContent('Test App')
+  })
+
+  it('renders navigation when showNav is true', () => {
+    render(<SimpleHeader title="Test App" showNav={true} />)
+    
+    const nav = screen.getByRole('navigation', { name: /main navigation/i })
+    expect(nav).toBeInTheDocument()
+    
+    expect(screen.getByRole('link', { name: /home/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /about/i })).toBeInTheDocument()
+  })
+
+  it('hides navigation when showNav is false', () => {
+    render(<SimpleHeader title="Test App" showNav={false} />)
+    
+    const nav = screen.queryByRole('navigation')
+    expect(nav).not.toBeInTheDocument()
+  })
+
+  it('uses design system classes', () => {
+    render(<SimpleHeader title="Test App" />)
+    
+    const header = screen.getByRole('banner')
+    
+    // Should use design system classes
+    expect(header).toHaveClass('bg-background')
+    expect(header).toHaveClass('border-border')
+    
+    // Should not use hardcoded color classes  
+    expect(header.className).not.toMatch(/bg-(blue|red|green)-\d+/)
+  })
+
+  it('has proper accessibility attributes', () => {
+    render(<SimpleHeader title="Test App" />)
+    
+    const header = screen.getByRole('banner')
+    expect(header).toBeInTheDocument()
+    
+    const nav = screen.getByRole('navigation')
+    expect(nav).toHaveAttribute('aria-label', 'Main navigation')
+    
+    const links = screen.getAllByRole('link')
+    links.forEach(link => {
+      expect(link).toHaveAttribute('href')
+    })
+  })
+})

package/src/__tests__/organisms/showcase/simple-showcase.test.tsx

@@ -0,0 +1,167 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen, userEvent } from '../../utils'
+import { cn } from '../../../atoms/utils/utils'
+
+// Simple showcase component for testing
+const SimpleShowcase = () => {
+  const [activeTab, setActiveTab] = React.useState('components')
+
+  return (
+    <main className="p-6">
+      <h1 className="text-3xl font-bold text-foreground mb-6">Component Showcase</h1>
+      
+      <div className="mb-6">
+        <nav aria-label="Showcase navigation">
+          <div role="tablist" className="flex space-x-4 border-b border-border">
+            <button
+              role="tab"
+              aria-selected={activeTab === 'components'}
+              className={cn(
+                'px-4 py-2 font-medium',
+                activeTab === 'components' 
+                  ? 'text-primary border-b-2 border-primary' 
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+              onClick={() => setActiveTab('components')}
+            >
+              Components
+            </button>
+            <button
+              role="tab"
+              aria-selected={activeTab === 'colors'}
+              className={cn(
+                'px-4 py-2 font-medium',
+                activeTab === 'colors' 
+                  ? 'text-primary border-b-2 border-primary' 
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+              onClick={() => setActiveTab('colors')}
+            >
+              Colors
+            </button>
+          </div>
+        </nav>
+      </div>
+
+      <div role="tabpanel">
+        {activeTab === 'components' && (
+          <div data-testid="components-panel">
+            <h2 className="text-xl font-semibold mb-4">UI Components</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <button className="bg-primary text-primary-foreground px-4 py-2 rounded">
+                Primary Button
+              </button>
+              <button className="bg-secondary text-secondary-foreground px-4 py-2 rounded">
+                Secondary Button
+              </button>
+            </div>
+          </div>
+        )}
+        
+        {activeTab === 'colors' && (
+          <div data-testid="colors-panel">
+            <h2 className="text-xl font-semibold mb-4">Color Palette</h2>
+            <div className="grid grid-cols-4 gap-2">
+              <div className="bg-primary h-12 rounded flex items-center justify-center text-primary-foreground text-xs">
+                Primary
+              </div>
+              <div className="bg-secondary h-12 rounded flex items-center justify-center text-secondary-foreground text-xs">
+                Secondary
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}
+
+describe('Showcase Page (Organism)', () => {
+  it('renders main showcase structure', () => {
+    render(<SimpleShowcase />)
+    
+    const main = screen.getByRole('main')
+    expect(main).toBeInTheDocument()
+    
+    const heading = screen.getByRole('heading', { level: 1 })
+    expect(heading).toHaveTextContent('Component Showcase')
+  })
+
+  it('has accessible tab navigation', () => {
+    render(<SimpleShowcase />)
+    
+    const tablist = screen.getByRole('tablist')
+    expect(tablist).toBeInTheDocument()
+    
+    const componentsTab = screen.getByRole('tab', { name: /components/i })
+    const colorsTab = screen.getByRole('tab', { name: /colors/i })
+    
+    expect(componentsTab).toHaveAttribute('aria-selected', 'true')
+    expect(colorsTab).toHaveAttribute('aria-selected', 'false')
+  })
+
+  it('switches between tabs correctly', async () => {
+    const user = userEvent.setup()
+    render(<SimpleShowcase />)
+    
+    // Initially shows components panel
+    expect(screen.getByTestId('components-panel')).toBeInTheDocument()
+    expect(screen.queryByTestId('colors-panel')).not.toBeInTheDocument()
+    
+    // Click colors tab
+    const colorsTab = screen.getByRole('tab', { name: /colors/i })
+    await user.click(colorsTab)
+    
+    // Should now show colors panel
+    expect(screen.getByTestId('colors-panel')).toBeInTheDocument()
+    expect(screen.queryByTestId('components-panel')).not.toBeInTheDocument()
+    
+    // Tab should be selected
+    expect(colorsTab).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('displays interactive components', () => {
+    render(<SimpleShowcase />)
+    
+    // Should have interactive buttons in showcase
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBeGreaterThanOrEqual(2) // Tabs + showcase buttons
+    
+    const primaryButton = screen.getByText('Primary Button')
+    expect(primaryButton).toBeInTheDocument()
+    expect(primaryButton).toHaveClass('bg-primary')
+  })
+
+  it('uses design system classes consistently', () => {
+    render(<SimpleShowcase />)
+    
+    const main = screen.getByRole('main')
+    
+    // Should use design system spacing and colors
+    expect(main).toHaveClass('p-6')
+    
+    const heading = screen.getByRole('heading', { level: 1 })
+    expect(heading).toHaveClass('text-foreground')
+    
+    // Check that components use design system colors
+    const primaryButton = screen.getByText('Primary Button')
+    expect(primaryButton).toHaveClass('bg-primary', 'text-primary-foreground')
+  })
+
+  it('is responsive and accessible', () => {
+    render(<SimpleShowcase />)
+    
+    // Should have proper heading hierarchy
+    const h1 = screen.getByRole('heading', { level: 1 })
+    const h2s = screen.getAllByRole('heading', { level: 2 })
+    
+    expect(h1).toBeInTheDocument()
+    expect(h2s.length).toBeGreaterThan(0)
+    
+    // Should have responsive grid classes
+    const gridElements = screen.getByTestId('components-panel').querySelector('.grid')
+    expect(gridElements?.className).toMatch(/grid-cols-/)
+    expect(gridElements?.className).toMatch(/md:grid-cols-/)
+  })
+})

package/src/__tests__/setup.ts

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom'
+import { beforeAll, afterEach, afterAll } from 'vitest'
+import { cleanup } from '@testing-library/react'
+
+// Global test setup (equivalent to conftest.py)
+
+// Clean up after each test
+afterEach(() => {
+  cleanup()
+})
+
+// Mock environment variables for testing
+beforeAll(() => {
+  // Mock environment variables
+  process.env.VITE_API_URL = 'http://localhost:3001/api/v1'
+  process.env.VITE_APP_NAME = 'Test App'
+  
+  // Mock window.matchMedia (required for responsive components)
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => {},
+    }),
+  })
+
+  // Mock ResizeObserver (required for some components)
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+
+  // Mock IntersectionObserver (required for some components)
+  global.IntersectionObserver = class IntersectionObserver {
+    constructor() {}
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+})
+
+afterAll(() => {
+  // Clean up any global mocks if needed
+})

package/src/__tests__/utils.tsx

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

@@ -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/{dist/atoms/composed/Accordion/index.d.ts → src/atoms/composed/Accordion/index.ts}

@@ -1,2 +1 @@
-export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';
-//# sourceMappingURL=index.d.ts.map
+export { Accordion, type AccordionProps, type AccordionItem } from './Accordion';