@tachui/core 0.7.0-alpha1 → 0.7.1-alpha

package/src/modifiers/responsive/__tests__/layout-patterns.test.ts

@@ -1,558 +0,0 @@
-/**
- * Responsive Layout Patterns Tests
- * 
- * Tests for responsive grid, flexbox, container, visibility, spacing,
- * and typography utility patterns.
- */
-
-import { describe, test, expect } from 'vitest'
-import {
-  ResponsiveGridPatterns,
-  ResponsiveFlexPatterns,
-  ResponsiveContainerPatterns,
-  ResponsiveVisibilityPatterns,
-  ResponsiveSpacingPatterns,
-  ResponsiveTypographyPatterns,
-  LayoutPatterns,
-  ResponsiveGrid,
-  Flex,
-  Container,
-  Visibility,
-  Spacing,
-  ResponsiveTypography
-} from '../layout-patterns'
-
-describe('Responsive Layout Patterns', () => {
-  describe('ResponsiveGridPatterns', () => {
-    test('autoFit() creates correct grid with auto-fit columns', () => {
-      const modifier = ResponsiveGridPatterns.autoFit({
-        minColumnWidth: '200px',
-        gap: '1rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-        gap: '1rem'
-      })
-    })
-    
-    test('autoFit() handles responsive minColumnWidth', () => {
-      const modifier = ResponsiveGridPatterns.autoFit({
-        minColumnWidth: {
-          base: '150px',
-          md: '200px',
-          lg: '250px'
-        },
-        gap: '1rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: {
-          base: 'repeat(auto-fit, minmax(150px, 1fr))',
-          md: 'repeat(auto-fit, minmax(200px, 1fr))',
-          lg: 'repeat(auto-fit, minmax(250px, 1fr))'
-        },
-        gap: '1rem'
-      })
-    })
-    
-    test('autoFit() handles maxColumns constraint', () => {
-      const modifier = ResponsiveGridPatterns.autoFit({
-        minColumnWidth: '200px',
-        maxColumns: 4
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, minmax(200px, 1fr))'
-      })
-    })
-    
-    test('columns() creates correct grid with explicit columns', () => {
-      const modifier = ResponsiveGridPatterns.columns(3, {
-        gap: '2rem',
-        autoRows: 'minmax(200px, auto)'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: 'repeat(3, 1fr)',
-        gap: '2rem',
-        gridAutoRows: 'minmax(200px, auto)'
-      })
-    })
-    
-    test('columns() handles responsive column counts', () => {
-      const modifier = ResponsiveGridPatterns.columns({
-        base: 1,
-        md: 2,
-        lg: 3
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: {
-          base: 'repeat(1, 1fr)',
-          md: 'repeat(2, 1fr)',
-          lg: 'repeat(3, 1fr)'
-        }
-      })
-    })
-    
-    test('masonry() creates masonry-style grid', () => {
-      const modifier = ResponsiveGridPatterns.masonry({
-        columns: { base: 2, lg: 4 },
-        gap: '1rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: {
-          base: 'repeat(2, 1fr)',
-          lg: 'repeat(4, 1fr)'
-        },
-        gridAutoRows: 'max-content',
-        gap: '1rem'
-      })
-    })
-  })
-
-  describe('ResponsiveFlexPatterns', () => {
-    test('stackToRow() creates responsive flex layout', () => {
-      const modifier = ResponsiveFlexPatterns.stackToRow({
-        stackBreakpoint: 'lg',
-        gap: '1rem',
-        align: 'center'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'flex',
-        flexDirection: {
-          base: 'column',
-          lg: 'row'
-        },
-        gap: '1rem',
-        alignItems: 'center'
-      })
-    })
-    
-    test('stackToRow() uses default breakpoint', () => {
-      const modifier = ResponsiveFlexPatterns.stackToRow()
-      
-      expect(modifier.config).toEqual({
-        display: 'flex',
-        flexDirection: {
-          base: 'column',
-          md: 'row'
-        }
-      })
-    })
-    
-    test('wrap() creates flex container with wrapping', () => {
-      const modifier = ResponsiveFlexPatterns.wrap({
-        justify: 'space-between',
-        gap: '1rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'flex',
-        flexWrap: 'wrap',
-        justify: 'space-between',
-        gap: '1rem'
-      })
-    })
-    
-    test('center() creates centered flex layout', () => {
-      const modifier = ResponsiveFlexPatterns.center('column')
-      
-      expect(modifier.config).toEqual({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center'
-      })
-    })
-    
-    test('spaceBetween() creates space-between flex layout', () => {
-      const modifier = ResponsiveFlexPatterns.spaceBetween({
-        base: 'column',
-        md: 'row'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'flex',
-        flexDirection: {
-          base: 'column',
-          md: 'row'
-        },
-        justifyContent: 'space-between',
-        alignItems: 'center'
-      })
-    })
-  })
-
-  describe('ResponsiveContainerPatterns', () => {
-    test('container() creates responsive container with defaults', () => {
-      const modifier = ResponsiveContainerPatterns.container()
-      
-      expect(modifier.config).toEqual({
-        width: '100%',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        maxWidth: {
-          sm: '640px',
-          md: '768px',
-          lg: '1024px',
-          xl: '1280px',
-          '2xl': '1536px'
-        }
-      })
-    })
-    
-    test('container() handles custom configuration', () => {
-      const modifier = ResponsiveContainerPatterns.container({
-        maxWidth: { base: '100%', lg: '800px' },
-        padding: { base: '1rem', md: '2rem' },
-        margin: '2rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        width: '100%',
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        maxWidth: { base: '100%', lg: '800px' },
-        paddingLeft: { base: '1rem', md: '2rem' },
-        paddingRight: { base: '1rem', md: '2rem' },
-        marginTop: '2rem',
-        marginBottom: '2rem'
-      })
-    })
-    
-    test('fullWidth() creates full-width container', () => {
-      const modifier = ResponsiveContainerPatterns.fullWidth()
-      
-      expect(modifier.config).toEqual({
-        width: '100vw',
-        marginLeft: 'calc(-50vw + 50%)',
-        marginRight: 'calc(-50vw + 50%)'
-      })
-    })
-    
-    test('section() creates section container with responsive padding', () => {
-      const modifier = ResponsiveContainerPatterns.section({
-        paddingY: { base: '2rem', md: '4rem' },
-        paddingX: '1rem',
-        maxWidth: '1200px'
-      })
-      
-      expect(modifier.config).toEqual({
-        paddingTop: { base: '2rem', md: '4rem' },
-        paddingBottom: { base: '2rem', md: '4rem' },
-        paddingLeft: '1rem',
-        paddingRight: '1rem',
-        maxWidth: '1200px',
-        marginLeft: 'auto',
-        marginRight: 'auto'
-      })
-    })
-  })
-
-  describe('ResponsiveVisibilityPatterns', () => {
-    test('showOn() creates correct visibility rules', () => {
-      const modifier = ResponsiveVisibilityPatterns.showOn(['md', 'lg'])
-      
-      expect(modifier.config).toEqual({
-        display: {
-          md: 'block',
-          lg: 'block'
-        }
-      })
-    })
-    
-    test('hideOn() creates correct hiding rules', () => {
-      const modifier = ResponsiveVisibilityPatterns.hideOn(['sm', 'md'])
-      
-      expect(modifier.config).toEqual({
-        display: {
-          sm: 'none',
-          md: 'none'
-        }
-      })
-    })
-    
-    test('mobileOnly() hides on desktop', () => {
-      const modifier = ResponsiveVisibilityPatterns.mobileOnly()
-      
-      expect(modifier.config).toEqual({
-        display: {
-          base: 'block',
-          md: 'none'
-        }
-      })
-    })
-    
-    test('desktopOnly() hides on mobile', () => {
-      const modifier = ResponsiveVisibilityPatterns.desktopOnly()
-      
-      expect(modifier.config).toEqual({
-        display: {
-          base: 'none',
-          md: 'block'
-        }
-      })
-    })
-    
-    test('tabletOnly() shows only on tablet', () => {
-      const modifier = ResponsiveVisibilityPatterns.tabletOnly()
-      
-      expect(modifier.config).toEqual({
-        display: {
-          base: 'none',
-          md: 'block',
-          lg: 'none'
-        }
-      })
-    })
-  })
-
-  describe('ResponsiveSpacingPatterns', () => {
-    test('padding() creates responsive padding', () => {
-      const modifier = ResponsiveSpacingPatterns.padding({
-        all: { base: '1rem', md: '2rem' },
-        horizontal: '1.5rem',
-        top: '0.5rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        padding: { base: '1rem', md: '2rem' },
-        paddingLeft: '1.5rem',
-        paddingRight: '1.5rem',
-        paddingTop: '0.5rem'
-      })
-    })
-    
-    test('margin() creates responsive margin', () => {
-      const modifier = ResponsiveSpacingPatterns.margin({
-        vertical: { base: '1rem', lg: '2rem' },
-        left: 'auto',
-        right: 'auto'
-      })
-      
-      expect(modifier.config).toEqual({
-        marginTop: { base: '1rem', lg: '2rem' },
-        marginBottom: { base: '1rem', lg: '2rem' },
-        marginLeft: 'auto',
-        marginRight: 'auto'
-      })
-    })
-    
-    test('gap() creates responsive gap for flexbox/grid', () => {
-      const modifier = ResponsiveSpacingPatterns.gap({
-        all: { base: '0.5rem', md: '1rem' },
-        column: '2rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        gap: { base: '0.5rem', md: '1rem' },
-        columnGap: '2rem'
-      })
-    })
-  })
-
-  describe('ResponsiveTypographyPatterns', () => {
-    test('scale() creates responsive font scaling', () => {
-      const modifier = ResponsiveTypographyPatterns.scale({
-        base: 16,
-        scale: { base: 1, md: 1.2, lg: 1.5 },
-        lineHeight: { base: 1.4, md: 1.6 }
-      })
-      
-      expect(modifier.config).toEqual({
-        fontSize: {
-          base: '16px',
-          md: '19.2px',
-          lg: '24px'
-        },
-        lineHeight: { base: 1.4, md: 1.6 }
-      })
-    })
-    
-    test('scale() handles string base size', () => {
-      const modifier = ResponsiveTypographyPatterns.scale({
-        base: '1rem',
-        scale: { md: 1.5 }
-      })
-      
-      expect(modifier.config).toEqual({
-        fontSize: {
-          md: '1.5px' // Note: this parsing might need improvement
-        }
-      })
-    })
-    
-    test('fluid() creates fluid typography', () => {
-      const modifier = ResponsiveTypographyPatterns.fluid({
-        minSize: 16,
-        maxSize: 24,
-        minBreakpoint: '400px',
-        maxBreakpoint: '1000px'
-      })
-      
-      expect(modifier.config).toEqual({
-        fontSize: 'clamp(16px, calc(16px + (24px - 16px) * ((100vw - 400px) / (1000px - 400px))), 24px)'
-      })
-    })
-  })
-
-  describe('LayoutPatterns', () => {
-    test('sidebar() creates sidebar layout', () => {
-      const modifier = LayoutPatterns.sidebar({
-        sidebarWidth: '300px',
-        collapseBreakpoint: 'lg',
-        gap: '2rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: {
-          base: '1fr',
-          lg: '300px 1fr'
-        },
-        gap: '2rem'
-      })
-    })
-    
-    test('holyGrail() creates holy grail layout', () => {
-      const modifier = LayoutPatterns.holyGrail({
-        headerHeight: '80px',
-        footerHeight: '60px',
-        sidebarWidth: '200px',
-        collapseBreakpoint: 'md'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateAreas: {
-          base: '"header" "main" "footer"',
-          md: '"header header" "sidebar main" "footer footer"'
-        },
-        gridTemplateRows: {
-          base: '80px 1fr 60px',
-          md: '80px 1fr 60px'
-        },
-        gridTemplateColumns: {
-          base: '1fr',
-          md: '200px 1fr'
-        },
-        minHeight: '100vh'
-      })
-    })
-    
-    test('cardGrid() creates card grid layout', () => {
-      const modifier = LayoutPatterns.cardGrid({
-        minCardWidth: '250px',
-        gap: '1.5rem',
-        maxColumns: 4
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'grid',
-        gridTemplateColumns: 'repeat(4, minmax(250px, 1fr))',
-        gap: '1.5rem'
-      })
-    })
-    
-    test('hero() creates hero section layout', () => {
-      const modifier = LayoutPatterns.hero({
-        minHeight: '80vh',
-        textAlign: { base: 'center', md: 'left' },
-        padding: '3rem'
-      })
-      
-      expect(modifier.config).toEqual({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        textAlign: { base: 'center', md: 'left' },
-        minHeight: '80vh',
-        padding: '3rem'
-      })
-    })
-  })
-
-  describe('Export Aliases', () => {
-    test('ResponsiveGrid alias works correctly', () => {
-      expect(ResponsiveGrid).toBe(ResponsiveGridPatterns)
-    })
-    
-    test('Flex alias works correctly', () => {
-      expect(Flex).toBe(ResponsiveFlexPatterns)
-    })
-    
-    test('Container alias works correctly', () => {
-      expect(Container).toBe(ResponsiveContainerPatterns)
-    })
-    
-    test('Visibility alias works correctly', () => {
-      expect(Visibility).toBe(ResponsiveVisibilityPatterns)
-    })
-    
-    test('Spacing alias works correctly', () => {
-      expect(Spacing).toBe(ResponsiveSpacingPatterns)
-    })
-    
-    test('ResponsiveTypography alias works correctly', () => {
-      expect(ResponsiveTypography).toBe(ResponsiveTypographyPatterns)
-    })
-  })
-
-  describe('Integration with Real-World Use Cases', () => {
-    test('responsive card grid with auto-fit', () => {
-      const cardGrid = ResponsiveGrid.autoFit({
-        minColumnWidth: { base: '280px', md: '320px', xl: '350px' },
-        gap: { base: '1rem', md: '1.5rem', lg: '2rem' }
-      })
-      
-      expect(cardGrid.config.display).toBe('grid')
-      expect(cardGrid.config.gridTemplateColumns).toEqual({
-        base: 'repeat(auto-fit, minmax(280px, 1fr))',
-        md: 'repeat(auto-fit, minmax(320px, 1fr))',
-        xl: 'repeat(auto-fit, minmax(350px, 1fr))'
-      })
-    })
-    
-    test('responsive navigation layout', () => {
-      const navLayout = Flex.stackToRow({
-        stackBreakpoint: 'md',
-        gap: { base: '0.5rem', md: '2rem' },
-        justify: { base: 'center', md: 'space-between' }
-      })
-      
-      expect(navLayout.config.flexDirection).toEqual({
-        base: 'column',
-        md: 'row'
-      })
-      expect(navLayout.config.justifyContent).toEqual({
-        base: 'center',
-        md: 'space-between'
-      })
-    })
-    
-    test('responsive content container', () => {
-      const contentContainer = Container.section({
-        paddingY: { base: '2rem', md: '4rem', lg: '6rem' },
-        paddingX: { base: '1rem', md: '2rem' },
-        maxWidth: { base: '100%', md: '768px', xl: '1200px' }
-      })
-      
-      expect(contentContainer.config.maxWidth).toEqual({
-        base: '100%',
-        md: '768px',
-        xl: '1200px'
-      })
-    })
-  })
-})