@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/src/__tests__/atoms/utils/icon-resolver.test.tsx

@@ -1,140 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '../../utils'
-import { Icon, getIcon, iconMap } from '../../../atoms/utils/icon-resolver'
-
-// Mock console.warn to avoid noise in tests
-const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-describe('Icon Resolver', () => {
-  afterEach(() => {
-    consoleSpy.mockClear()
-  })
-
-  describe('Icon component', () => {
-    it('renders valid icon', () => {
-      render(<Icon name="Home" data-testid="home-icon" />)
-      
-      const icon = screen.getByTestId('home-icon')
-      expect(icon).toBeInTheDocument()
-    })
-
-    it('applies default className', () => {
-      render(<Icon name="Users" data-testid="users-icon" />)
-      
-      const icon = screen.getByTestId('users-icon')
-      expect(icon).toHaveClass('w-5', 'h-5')
-    })
-
-    it('applies custom className', () => {
-      render(<Icon name="Settings" className="w-8 h-8 text-blue-500" data-testid="settings-icon" />)
-      
-      const icon = screen.getByTestId('settings-icon')
-      expect(icon).toHaveClass('w-8', 'h-8', 'text-blue-500')
-    })
-
-    it('applies size prop', () => {
-      render(<Icon name="Search" size={24} data-testid="search-icon" />)
-      
-      const icon = screen.getByTestId('search-icon')
-      expect(icon).toHaveAttribute('width', '24')
-      expect(icon).toHaveAttribute('height', '24')
-    })
-
-    it('renders fallback icon for invalid name', () => {
-      render(<Icon name="InvalidIcon" data-testid="fallback-icon" />)
-      
-      const icon = screen.getByTestId('fallback-icon')
-      expect(icon).toBeInTheDocument()
-      expect(consoleSpy).toHaveBeenCalledWith('Icon "InvalidIcon" not found. Using default Menu icon.')
-    })
-
-    it('handles undefined icon name gracefully', () => {
-      render(<Icon name={undefined as any} data-testid="undefined-icon" />)
-      
-      const icon = screen.getByTestId('undefined-icon')
-      expect(icon).toBeInTheDocument()
-      expect(consoleSpy).toHaveBeenCalled()
-    })
-  })
-
-  describe('getIcon function', () => {
-    it('returns icon component for valid name', () => {
-      const HomeIcon = getIcon('Home')
-      expect(HomeIcon).toBeDefined()
-      expect(typeof HomeIcon).toBe('function')
-    })
-
-    it('returns Menu icon for invalid name', () => {
-      const InvalidIcon = getIcon('InvalidIcon' as any)
-      expect(InvalidIcon).toBeDefined()
-      expect(typeof InvalidIcon).toBe('function')
-    })
-
-    it('returns Menu icon for undefined name', () => {
-      const UndefinedIcon = getIcon(undefined as any)
-      expect(UndefinedIcon).toBeDefined()
-    })
-  })
-
-  describe('iconMap', () => {
-    it('contains expected common icons', () => {
-      const expectedIcons = [
-        'Home', 'Users', 'Settings', 'Search', 'Menu',
-        'ChevronDown', 'ChevronRight', 'X', 'Plus',
-        'ShoppingCart', 'Calendar', 'Mail', 'Phone'
-      ]
-
-      expectedIcons.forEach(iconName => {
-        expect(iconMap).toHaveProperty(iconName)
-        expect(typeof iconMap[iconName]).toBe('function')
-      })
-    })
-
-    it('has reasonable number of icons', () => {
-      const iconCount = Object.keys(iconMap).length
-      expect(iconCount).toBeGreaterThan(30)
-      expect(iconCount).toBeLessThan(100) // Keep it manageable
-    })
-
-    it('all icon map values are functions', () => {
-      Object.values(iconMap).forEach(iconComponent => {
-        expect(typeof iconComponent).toBe('function')
-      })
-    })
-  })
-
-  describe('Icon rendering variations', () => {
-    const testIcons = ['Home', 'Users', 'Settings', 'Search', 'Bell']
-
-    testIcons.forEach(iconName => {
-      it(`renders ${iconName} icon without errors`, () => {
-        render(<Icon name={iconName} data-testid={`${iconName.toLowerCase()}-icon`} />)
-        
-        const icon = screen.getByTestId(`${iconName.toLowerCase()}-icon`)
-        expect(icon).toBeInTheDocument()
-      })
-    })
-  })
-
-  describe('Integration with real icon names', () => {
-    it('renders navigation icons correctly', () => {
-      const navIcons = ['Home', 'Users', 'Settings', 'FileText', 'BarChart']
-      
-      navIcons.forEach(iconName => {
-        const { unmount } = render(<Icon name={iconName} />)
-        // If it renders without throwing, it's valid
-        unmount()
-      })
-    })
-
-    it('renders action icons correctly', () => {
-      const actionIcons = ['Plus', 'Edit', 'Trash2', 'Save', 'Download']
-      
-      actionIcons.forEach(iconName => {
-        const { unmount } = render(<Icon name={iconName} />)
-        // If it renders without throwing, it's valid
-        unmount()
-      })
-    })
-  })
-})

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-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
-})