@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/gradients/__tests__/linear-gradient.test.ts

@@ -1,92 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { LinearGradient } from '../index'
-import { generateLinearGradientCSS } from '../css-generator'
-import { createColorAsset } from '../../assets'
-
-describe('LinearGradient', () => {
-  it('creates a linear gradient definition', () => {
-    const gradient = LinearGradient({
-      colors: ['#FF0000', '#00FF00'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    expect(gradient.type).toBe('linear')
-    expect(gradient.options.colors).toEqual(['#FF0000', '#00FF00'])
-    expect(gradient.options.startPoint).toBe('top')
-    expect(gradient.options.endPoint).toBe('bottom')
-  })
-
-  it('generates correct CSS for simple gradient', () => {
-    const css = generateLinearGradientCSS({
-      colors: ['#FF0000', '#00FF00'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    expect(css).toBe('linear-gradient(to bottom, #FF0000, #00FF00)')
-  })
-
-  it('generates correct CSS for diagonal gradient', () => {
-    const css = generateLinearGradientCSS({
-      colors: ['#FF0000', '#00FF00'],
-      startPoint: 'topLeading',
-      endPoint: 'bottomTrailing'
-    })
-
-    expect(css).toBe('linear-gradient(to bottom right, #FF0000, #00FF00)')
-  })
-
-  it('generates correct CSS with angle override', () => {
-    const css = generateLinearGradientCSS({
-      colors: ['#FF0000', '#00FF00'],
-      startPoint: 'top',
-      endPoint: 'bottom',
-      angle: 45
-    })
-
-    expect(css).toBe('linear-gradient(45deg, #FF0000, #00FF00)')
-  })
-
-  it('supports color stops', () => {
-    const css = generateLinearGradientCSS({
-      colors: ['#FF0000', '#00FF00', '#0000FF'],
-      startPoint: 'top',
-      endPoint: 'bottom',
-      stops: [0, 50, 100]
-    })
-
-    expect(css).toBe('linear-gradient(to bottom, #FF0000 0%, #00FF00 50%, #0000FF 100%)')
-  })
-
-  it('works with Asset colors', () => {
-    const redAsset = createColorAsset('#FF0000', '#AA0000', 'red-asset')
-
-    const greenAsset = createColorAsset('#00FF00', '#00AA00', 'green-asset')
-
-    const css = generateLinearGradientCSS({
-      colors: [redAsset, greenAsset],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    expect(css).toContain('linear-gradient(to bottom,')
-    expect(css).toContain('#FF0000')
-    expect(css).toContain('#00FF00')
-  })
-
-  it('handles mixed static colors and Assets', () => {
-    const blueAsset = createColorAsset('#0000FF', '#0000AA', 'blue-asset')
-
-    const css = generateLinearGradientCSS({
-      colors: ['#FF0000', blueAsset, '#00FF00'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    expect(css).toContain('linear-gradient(to bottom,')
-    expect(css).toContain('#FF0000')
-    expect(css).toContain('#0000FF')
-    expect(css).toContain('#00FF00')
-  })
-})

package/src/gradients/__tests__/phase4-features.test.ts

@@ -1,386 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { 
-  LinearGradientPresets,
-  InteractiveGradientPresets,
-  GradientUtilities as GradientUtils,
-  GradientValidation,
-  GradientTypeGuards,
-  GradientExamples,
-  GradientDebugger
-} from '../index'
-import { LinearGradient } from '../index'
-
-describe('Phase 4 Features', () => {
-  describe('Gradient Presets', () => {
-    it('should provide linear gradient presets', () => {
-      const oceanGradient = LinearGradientPresets.ocean()
-      expect(oceanGradient.type).toBe('linear')
-      expect(oceanGradient.options.colors).toHaveLength(2)
-    })
-
-    it('should provide iOS blue preset', () => {
-      const iosBlue = LinearGradientPresets.iosBlue()
-      expect(iosBlue.type).toBe('linear')
-      expect(iosBlue.options.startPoint).toBe('top')
-      expect(iosBlue.options.endPoint).toBe('bottom')
-    })
-
-    it('should provide interactive presets', () => {
-      const primaryButton = InteractiveGradientPresets.primaryButton()
-      expect(primaryButton.default).toBeDefined()
-      expect(primaryButton.hover).toBeDefined()
-      expect(primaryButton.active).toBeDefined()
-      expect(primaryButton.animation).toBeDefined()
-    })
-
-    it('should provide danger button preset', () => {
-      const dangerButton = InteractiveGradientPresets.dangerButton()
-      expect(dangerButton.default).toBeDefined()
-      expect(dangerButton.hover).toBeDefined()
-      expect(dangerButton.active).toBeDefined()
-      expect(dangerButton.disabled).toBe('#CCCCCC')
-    })
-  })
-
-  describe('Gradient Utilities', () => {
-    const testGradient = LinearGradient({
-      colors: ['#ff0000', '#0000ff'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    it('should reverse gradient colors', () => {
-      const reversed = GradientUtils.reverse(testGradient)
-      expect(reversed.options.colors).toEqual(['#0000ff', '#ff0000'])
-    })
-
-    it('should mirror linear gradient', () => {
-      const mirrored = GradientUtils.mirror(testGradient)
-      expect(mirrored.options.startPoint).toBe('bottom')
-      expect(mirrored.options.endPoint).toBe('top')
-    })
-
-    it('should analyze gradient complexity', () => {
-      const complexity = GradientUtils.getComplexityScore(testGradient)
-      expect(typeof complexity).toBe('number')
-      expect(complexity).toBeGreaterThan(0)
-    })
-
-    it('should get performance impact', () => {
-      const impact = GradientUtils.getPerformanceImpact(testGradient)
-      expect(['low', 'medium', 'high']).toContain(impact)
-    })
-
-    it('should extract colors from gradient', () => {
-      const colors = GradientUtils.extractColors(testGradient)
-      expect(colors).toEqual(['#ff0000', '#0000ff'])
-    })
-
-    it('should convert gradient to radial', () => {
-      const radial = GradientUtils.toRadial(testGradient, 50)
-      expect(radial.type).toBe('radial')
-      expect(radial.options.colors).toEqual(['#ff0000', '#0000ff'])
-    })
-  })
-
-  describe('Color Utilities', () => {
-    it('should lighten colors', () => {
-      const lighter = GradientUtils.lighten('#007AFF', 0.2)
-      expect(typeof lighter).toBe('string')
-      expect(lighter).toMatch(/^#[0-9a-f]{6}$/i)
-    })
-
-    it('should darken colors', () => {
-      const darker = GradientUtils.darken('#007AFF', 0.2)
-      expect(typeof darker).toBe('string')
-      expect(darker).toMatch(/^#[0-9a-f]{6}$/i)
-    })
-
-    it('should add alpha to colors', () => {
-      const withAlpha = GradientUtils.withAlpha('#007AFF', 0.5)
-      expect(withAlpha).toContain('rgba')
-      expect(withAlpha).toContain('0.5')
-    })
-
-    it('should get complementary color', () => {
-      const complement = GradientUtils.complement('#ff0000')
-      expect(typeof complement).toBe('string')
-      expect(complement).toMatch(/^#[0-9a-f]{6}$/i)
-    })
-
-    it('should blend colors', () => {
-      const blended = GradientUtils.blendColors('#ff0000', '#0000ff', 0.5)
-      expect(typeof blended).toBe('string')
-      expect(blended).toMatch(/^#[0-9a-f]{6}$/i)
-    })
-  })
-
-  describe('Gradient Validation', () => {
-    it('should validate linear gradients', () => {
-      const validGradient = LinearGradient({
-        colors: ['#ff0000', '#0000ff'],
-        startPoint: 'top',
-        endPoint: 'bottom'
-      })
-
-      const validation = GradientValidation.validateGradient(validGradient)
-      expect(validation.valid).toBe(true)
-      expect(validation.errors).toHaveLength(0)
-    })
-
-    it('should detect invalid gradients', () => {
-      const invalidGradient = {
-        type: 'linear',
-        options: {
-          colors: ['invalid-color'],
-          startPoint: 'invalid-point',
-          endPoint: 'bottom'
-        }
-      } as any
-
-      const validation = GradientValidation.validateGradient(invalidGradient)
-      expect(validation.valid).toBe(false)
-      expect(validation.errors.length).toBeGreaterThan(0)
-    })
-
-    it('should validate color formats', () => {
-      const validHex = GradientValidation.validateColor('#ff0000')
-      expect(validHex.valid).toBe(true)
-
-      const validRgb = GradientValidation.validateColor('rgb(255, 0, 0)')
-      expect(validRgb.valid).toBe(true)
-
-      const invalidColor = GradientValidation.validateColor('not-a-color')
-      expect(invalidColor.valid).toBe(false)
-    })
-
-    it('should validate color arrays', () => {
-      const validColors = GradientValidation.validateColors(['#ff0000', '#00ff00'])
-      expect(validColors.valid).toBe(true)
-
-      const invalidColors = GradientValidation.validateColors(['#ff0000'])
-      expect(invalidColors.valid).toBe(false) // Need at least 2 colors
-    })
-  })
-
-  describe('Type Guards', () => {
-    const testGradient = LinearGradient({
-      colors: ['#ff0000', '#0000ff'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    it('should identify gradient definitions', () => {
-      expect(GradientTypeGuards.isGradientDefinition(testGradient)).toBe(true)
-      expect(GradientTypeGuards.isGradientDefinition('not-a-gradient')).toBe(false)
-      expect(GradientTypeGuards.isGradientDefinition(null)).toBe(false)
-    })
-
-    it('should identify linear gradients', () => {
-      expect(GradientTypeGuards.isLinearGradient(testGradient)).toBe(true)
-      expect(GradientTypeGuards.isLinearGradient({ type: 'radial', options: {} })).toBe(false)
-    })
-
-    it('should identify state gradient options', () => {
-      const stateOptions = { default: testGradient, hover: testGradient }
-      expect(GradientTypeGuards.isStateGradientOptions(stateOptions)).toBe(true)
-      expect(GradientTypeGuards.isStateGradientOptions(testGradient)).toBe(false)
-    })
-
-    it('should identify gradient start points', () => {
-      expect(GradientTypeGuards.isGradientStartPoint('top')).toBe(true)
-      expect(GradientTypeGuards.isGradientStartPoint('topLeading')).toBe(true)
-      expect(GradientTypeGuards.isGradientStartPoint('invalid')).toBe(false)
-    })
-
-    it('should identify gradient centers', () => {
-      expect(GradientTypeGuards.isGradientCenter('center')).toBe(true)
-      expect(GradientTypeGuards.isGradientCenter([50, 50])).toBe(true)
-      expect(GradientTypeGuards.isGradientCenter('invalid')).toBe(false)
-      expect(GradientTypeGuards.isGradientCenter([50])).toBe(false) // Need 2 coordinates
-    })
-  })
-
-  describe('Gradient Generators', () => {
-    it('should generate rainbow gradient', () => {
-      const rainbow = GradientUtils.rainbow(6)
-      expect(rainbow.type).toBe('linear')
-      expect(rainbow.options.colors).toHaveLength(6)
-    })
-
-    it('should generate monochromatic gradient', () => {
-      const mono = GradientUtils.monochromatic('#007AFF', 5)
-      expect(mono.type).toBe('linear')
-      expect(mono.options.colors).toHaveLength(5)
-    })
-
-    it('should generate complementary gradient', () => {
-      const comp = GradientUtils.complementary('#ff0000')
-      expect(comp.type).toBe('linear')
-      expect(comp.options.colors).toHaveLength(2)
-    })
-  })
-
-  describe('State Gradient Utilities', () => {
-    const baseGradient = LinearGradient({
-      colors: ['#007AFF', '#0051D2'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    it('should create hover effects', () => {
-      const hoverEffect = GradientUtils.createHoverEffect(baseGradient, 0.1)
-      expect(hoverEffect.default).toBeDefined()
-      expect(hoverEffect.hover).toBeDefined()
-      expect(hoverEffect.animation).toBeDefined()
-    })
-
-    it('should create button states', () => {
-      const buttonStates = GradientUtils.createButtonStates('#007AFF', 'primary')
-      expect(buttonStates.default).toBeDefined()
-      expect(buttonStates.hover).toBeDefined()
-      expect(buttonStates.active).toBeDefined()
-      expect(buttonStates.disabled).toBe('#cccccc')
-    })
-
-    it('should create card hover effect', () => {
-      const cardHover = GradientUtils.createCardHover('#ffffff')
-      expect(cardHover.default).toBe('#ffffff')
-      expect(cardHover.hover).toBeDefined()
-      expect(cardHover.animation).toBeDefined()
-    })
-  })
-
-  describe('Gradient Examples', () => {
-    it('should provide button gradient examples', () => {
-      expect(GradientExamples.Button.iosPrimary).toBeDefined()
-      expect(GradientExamples.Button.materialRaised).toBeDefined()
-      expect(GradientExamples.Button.glassMorphism).toBeDefined()
-      expect(GradientExamples.Button.ctaButton).toBeDefined()
-    })
-
-    it('should provide card gradient examples', () => {
-      expect(GradientExamples.Card.subtleHover).toBeDefined()
-      expect(GradientExamples.Card.darkCard).toBeDefined()
-      expect(GradientExamples.Card.heroCard).toBeDefined()
-    })
-
-    it('should create component gradients', () => {
-      const iosGradients = GradientExamples.createComponentGradients('ios')
-      expect(iosGradients.Button.primary).toBeDefined()
-      expect(iosGradients.Card.default).toBeDefined()
-      expect(iosGradients.Input.default).toBeDefined()
-      expect(iosGradients.Background.app).toBeDefined()
-    })
-  })
-
-  describe('Gradient Debugger', () => {
-    const testGradient = LinearGradient({
-      colors: ['#ff0000', '#0000ff'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    it('should debug gradient configurations', () => {
-      const debug = GradientDebugger.debugGradient(testGradient)
-      expect(debug.isValid).toBe(true)
-      expect(debug.errors).toHaveLength(0)
-      expect(debug.performance.complexity).toBeGreaterThan(0)
-      expect(['low', 'medium', 'high']).toContain(debug.performance.impact)
-      expect(debug.cssOutput).toContain('linear-gradient')
-    })
-
-    it('should debug state gradient configurations', () => {
-      const stateGradient = {
-        default: testGradient,
-        hover: testGradient,
-        animation: { duration: 200, easing: 'ease' }
-      }
-
-      const debug = GradientDebugger.debugStateGradient(stateGradient)
-      expect(debug.isValid).toBe(true)
-      expect(debug.stateAnalysis.default).toBeDefined()
-      expect(debug.stateAnalysis.hover).toBeDefined()
-    })
-
-    it('should profile operations', () => {
-      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
-      
-      const result = GradientDebugger.profileOperation('test-operation', () => {
-        return 'test-result'
-      })
-      
-      expect(result).toBe('test-result')
-      
-      // In development mode, should log timing
-      if (process.env.NODE_ENV === 'development') {
-        expect(consoleSpy).toHaveBeenCalled()
-      }
-      
-      consoleSpy.mockRestore()
-    })
-  })
-
-  describe('CSS Utilities', () => {
-    const testGradient = LinearGradient({
-      colors: ['#ff0000', '#0000ff'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    it('should convert gradients to CSS', () => {
-      const css = GradientUtils.toCSS(testGradient)
-      expect(css).toContain('linear-gradient')
-      expect(css).toContain('#ff0000')
-      expect(css).toContain('#0000ff')
-    })
-
-    it('should handle string backgrounds', () => {
-      const css = GradientUtils.toCSS('#ff0000')
-      expect(css).toBe('#ff0000')
-    })
-
-    it('should handle state gradient backgrounds', () => {
-      const stateGradient = { default: testGradient, hover: testGradient }
-      const css = GradientUtils.toCSS(stateGradient)
-      expect(css).toContain('linear-gradient')
-    })
-  })
-
-  describe('Gradient Cloning and Comparison', () => {
-    const testGradient = LinearGradient({
-      colors: ['#ff0000', '#0000ff'],
-      startPoint: 'top',
-      endPoint: 'bottom'
-    })
-
-    it('should clone gradients', () => {
-      const cloned = GradientUtils.clone(testGradient)
-      expect(cloned).toEqual(testGradient)
-      expect(cloned).not.toBe(testGradient) // Different object reference
-    })
-
-    it('should compare gradients for equality', () => {
-      const gradient1 = LinearGradient({
-        colors: ['#ff0000', '#0000ff'],
-        startPoint: 'top',
-        endPoint: 'bottom'
-      })
-
-      const gradient2 = LinearGradient({
-        colors: ['#ff0000', '#0000ff'],
-        startPoint: 'top',
-        endPoint: 'bottom'
-      })
-
-      const gradient3 = LinearGradient({
-        colors: ['#00ff00', '#0000ff'],
-        startPoint: 'top',
-        endPoint: 'bottom'
-      })
-
-      expect(GradientUtils.equals(gradient1, gradient2)).toBe(true)
-      expect(GradientUtils.equals(gradient1, gradient3)).toBe(false)
-    })
-  })
-})

package/src/gradients/__tests__/radial-gradient.test.ts

@@ -1,110 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { RadialGradient } from '../index'
-import { generateRadialGradientCSS } from '../css-generator'
-import { createColorAsset } from '../../assets'
-
-describe('RadialGradient', () => {
-  it('creates a radial gradient definition', () => {
-    const gradient = RadialGradient({
-      colors: ['#FF0000', '#00FF00'],
-      center: 'center',
-      startRadius: 0,
-      endRadius: 100
-    })
-
-    expect(gradient.type).toBe('radial')
-    expect(gradient.options.colors).toEqual(['#FF0000', '#00FF00'])
-    expect(gradient.options.center).toBe('center')
-    expect(gradient.options.startRadius).toBe(0)
-    expect(gradient.options.endRadius).toBe(100)
-  })
-
-  it('generates correct CSS for simple radial gradient', () => {
-    const css = generateRadialGradientCSS({
-      colors: ['#FF0000', '#00FF00'],
-      center: 'center',
-      startRadius: 0,
-      endRadius: 100
-    })
-
-    expect(css).toBe('radial-gradient(circle 100px at center, #FF0000, #00FF00)')
-  })
-
-  it('generates correct CSS for elliptical gradient', () => {
-    const css = generateRadialGradientCSS({
-      colors: ['#FF0000', '#00FF00'],
-      center: 'center',
-      startRadius: 0,
-      endRadius: 100,
-      shape: 'ellipse'
-    })
-
-    expect(css).toBe('radial-gradient(ellipse 100px 100px at center, #FF0000, #00FF00)')
-  })
-
-  it('supports custom center positioning', () => {
-    const css = generateRadialGradientCSS({
-      colors: ['#FF0000', '#00FF00'],
-      center: 'top',
-      startRadius: 0,
-      endRadius: 50
-    })
-
-    expect(css).toBe('radial-gradient(circle 50px at top, #FF0000, #00FF00)')
-  })
-
-  it('supports array-based center positioning', () => {
-    const css = generateRadialGradientCSS({
-      colors: ['#FF0000', '#00FF00'],
-      center: [25, 75],
-      startRadius: 0,
-      endRadius: 80
-    })
-
-    expect(css).toBe('radial-gradient(circle 80px at 25% 75%, #FF0000, #00FF00)')
-  })
-
-  it('supports color stops', () => {
-    const css = generateRadialGradientCSS({
-      colors: ['#FF0000', '#FFFF00', '#00FF00'],
-      center: 'center',
-      startRadius: 0,
-      endRadius: 100,
-      stops: [0, 50, 100]
-    })
-
-    expect(css).toBe('radial-gradient(circle 100px at center, #FF0000 0%, #FFFF00 50%, #00FF00 100%)')
-  })
-
-  it('works with Asset colors', () => {
-    const redAsset = createColorAsset('#FF0000', '#AA0000', 'red-asset')
-    const greenAsset = createColorAsset('#00FF00', '#00AA00', 'green-asset')
-
-    const css = generateRadialGradientCSS({
-      colors: [redAsset, greenAsset],
-      center: 'center',
-      startRadius: 0,
-      endRadius: 100
-    })
-
-    expect(css).toContain('radial-gradient(circle 100px at center,')
-    expect(css).toContain('#FF0000')
-    expect(css).toContain('#00FF00')
-  })
-
-  it('handles mixed static colors and Assets', () => {
-    const blueAsset = createColorAsset('#0000FF', '#0000AA', 'blue-asset')
-
-    const css = generateRadialGradientCSS({
-      colors: ['#FF0000', blueAsset, '#00FF00'],
-      center: 'center',
-      startRadius: 10,
-      endRadius: 100
-    })
-
-    expect(css).toContain('radial-gradient(circle 100px at center,')
-    expect(css).toContain('#FF0000')
-    expect(css).toContain('#0000FF')
-    expect(css).toContain('#00FF00')
-  })
-})