@pattern-stack/frontend-patterns 0.1.0 → 0.1.1

package/src/__tests__/atoms/hooks/simple-hooks.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useState } from 'react'
+
+describe('Simple Hook Tests (Example)', () => {
+  it('useState hook works correctly', () => {
+    const { result } = renderHook(() => useState(0))
+    
+    const [count, setCount] = result.current
+    expect(count).toBe(0)
+    
+    // Test that hook function is returned
+    expect(typeof setCount).toBe('function')
+  })
+
+  it('useEffect-like behavior can be tested', () => {
+    const { result, rerender } = renderHook(
+      ({ initialValue }) => useState(initialValue),
+      { initialProps: { initialValue: 10 } }
+    )
+
+    expect(result.current[0]).toBe(10)
+
+    // Test re-render with new props
+    rerender({ initialValue: 20 })
+    // Note: useState doesn't re-initialize on prop changes, this is just testing the pattern
+    expect(result.current[0]).toBe(10) // Still 10 because useState doesn't re-init
+  })
+
+  it('custom hook pattern testing', () => {
+    const useCounter = (initial = 0) => {
+      const [count, setCount] = useState(initial)
+      const increment = () => setCount(c => c + 1)
+      const decrement = () => setCount(c => c - 1)
+      return { count, increment, decrement }
+    }
+
+    const { result } = renderHook(() => useCounter(5))
+
+    expect(result.current.count).toBe(5)
+    expect(typeof result.current.increment).toBe('function')
+    expect(typeof result.current.decrement).toBe('function')
+  })
+})

package/src/__tests__/atoms/ui/button.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen, userEvent } from '../../utils'
+import { Button } from '../../../atoms/ui/button'
+
+describe('Button (Atom)', () => {
+  it('renders with default variant', () => {
+    render(<Button>Click me</Button>)
+    const button = screen.getByRole('button', { name: /click me/i })
+    expect(button).toBeInTheDocument()
+    // The button uses gradient, so check for primary color reference
+    expect(button.className).toContain('from-primary')
+  })
+
+  it('renders with different variants', () => {
+    const { rerender } = render(<Button variant="secondary">Secondary</Button>)
+    expect(screen.getByRole('button')).toHaveClass('bg-gray-100')
+
+    rerender(<Button variant="destructive">Destructive</Button>)
+    expect(screen.getByRole('button').className).toContain('from-destructive')
+  })
+
+  it('renders with different sizes', () => {
+    const { rerender } = render(<Button size="sm">Small</Button>)
+    expect(screen.getByRole('button')).toHaveClass('h-9')
+
+    rerender(<Button size="lg">Large</Button>)
+    expect(screen.getByRole('button')).toHaveClass('h-12')
+  })
+
+  it('handles click events', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+    
+    render(<Button onClick={handleClick}>Click me</Button>)
+    
+    await user.click(screen.getByRole('button'))
+    expect(handleClick).toHaveBeenCalledOnce()
+  })
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Disabled</Button>)
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    expect(button).toHaveClass('disabled:pointer-events-none')
+  })
+
+  it('renders as child component when asChild is true', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link button</a>
+      </Button>
+    )
+    
+    const link = screen.getByRole('link')
+    expect(link).toBeInTheDocument()
+    expect(link.className).toContain('from-primary')
+    expect(link).toHaveAttribute('href', '/test')
+  })
+
+  it('forwards ref correctly', () => {
+    const ref = React.createRef<HTMLButtonElement>()
+    render(<Button ref={ref}>Button</Button>)
+    
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+    expect(ref.current).toHaveTextContent('Button')
+  })
+})

package/src/__tests__/atoms/utils/simple.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Simple Test (Example)', () => {
+  it('basic arithmetic works', () => {
+    expect(2 + 2).toBe(4)
+  })
+
+  it('string manipulation works', () => {
+    const str = 'hello world'
+    expect(str.toUpperCase()).toBe('HELLO WORLD')
+  })
+
+  it('array operations work', () => {
+    const arr = [1, 2, 3]
+    expect(arr.length).toBe(3)
+    expect(arr.includes(2)).toBe(true)
+  })
+})

package/src/__tests__/atoms/utils/utils.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { cn } from '../../../atoms/utils/utils'
+
+describe('Utils (Atoms)', () => {
+  describe('cn (className utility)', () => {
+    it('merges class names correctly', () => {
+      const result = cn('px-4 py-2', 'bg-blue-500')
+      expect(result).toBe('px-4 py-2 bg-blue-500')
+    })
+
+    it('handles conditional classes', () => {
+      const isActive = true
+      const isDisabled = false
+      
+      const result = cn(
+        'base-class',
+        isActive && 'active-class',
+        isDisabled && 'disabled-class'
+      )
+      
+      expect(result).toBe('base-class active-class')
+    })
+
+    it('resolves conflicting Tailwind classes', () => {
+      // tailwind-merge should resolve conflicts
+      const result = cn('px-2 px-4') // px-4 should win
+      expect(result).toBe('px-4')
+    })
+
+    it('handles arrays of classes', () => {
+      const result = cn(['px-4', 'py-2'], ['bg-blue-500', 'text-white'])
+      expect(result).toBe('px-4 py-2 bg-blue-500 text-white')
+    })
+
+    it('handles object syntax', () => {
+      const result = cn({
+        'px-4': true,
+        'py-2': true,
+        'bg-red-500': false,
+        'bg-blue-500': true,
+      })
+      expect(result).toBe('px-4 py-2 bg-blue-500')
+    })
+
+    it('handles undefined and null values', () => {
+      const result = cn('px-4', undefined, null, 'py-2')
+      expect(result).toBe('px-4 py-2')
+    })
+
+    it('handles empty strings', () => {
+      const result = cn('', 'px-4', '', 'py-2')
+      expect(result).toBe('px-4 py-2')
+    })
+
+    it('maintains design system classes', () => {
+      // Test that design system classes are preserved
+      const result = cn('bg-primary text-primary-foreground', 'hover:bg-primary-hover')
+      expect(result).toBe('bg-primary text-primary-foreground hover:bg-primary-hover')
+    })
+
+    it('works with status classes', () => {
+      const status = 'success'
+      const result = cn(
+        'base-class',
+        status === 'success' && 'status-success',
+        status === 'error' && 'status-error'
+      )
+      expect(result).toBe('base-class status-success')
+    })
+
+    it('works with category classes', () => {
+      const category = 2
+      const result = cn('base-class', `category-${category}`)
+      expect(result).toBe('base-class category-2')
+    })
+  })
+})

package/src/__tests__/features/auth/simple-auth.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '../../utils'
+
+// Simple auth component for testing
+const AuthStatus = ({ isAuthenticated }: { isAuthenticated: boolean }) => (
+  <div>
+    {isAuthenticated ? (
+      <span data-testid="authenticated">User is logged in</span>
+    ) : (
+      <span data-testid="not-authenticated">Please log in</span>
+    )}
+  </div>
+)
+
+describe('Auth Components (Feature)', () => {
+  it('displays authenticated state correctly', () => {
+    render(<AuthStatus isAuthenticated={true} />)
+    
+    expect(screen.getByTestId('authenticated')).toBeInTheDocument()
+    expect(screen.getByText('User is logged in')).toBeInTheDocument()
+  })
+
+  it('displays unauthenticated state correctly', () => {
+    render(<AuthStatus isAuthenticated={false} />)
+    
+    expect(screen.getByTestId('not-authenticated')).toBeInTheDocument()
+    expect(screen.getByText('Please log in')).toBeInTheDocument()
+  })
+
+  it('toggles between states correctly', () => {
+    const { rerender } = render(<AuthStatus isAuthenticated={false} />)
+    
+    expect(screen.getByText('Please log in')).toBeInTheDocument()
+    
+    rerender(<AuthStatus isAuthenticated={true} />)
+    
+    expect(screen.getByText('User is logged in')).toBeInTheDocument()
+  })
+})

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 }