@tachui/core 0.7.0-alpha1 → 0.8.0-alpha

package/src/constants/__tests__/layout.test.ts

@@ -1,215 +0,0 @@
-/**
- * Tests for TachUI Layout Constants
- */
-
-import { describe, it, expect } from 'vitest'
-import {
-  infinity,
-  InfinityValue,
-  Dimension,
-  SUI,
-  isInfinity,
-  dimensionToCSS,
-  infinityToFlexCSS,
-  shouldExpandForInfinity
-} from '../layout'
-
-describe('TachUI Layout Constants', () => {
-  describe('infinity constant', () => {
-    it('should be a unique symbol', () => {
-      expect(typeof infinity).toBe('symbol')
-      expect(infinity.toString()).toBe('Symbol(tachui.infinity)')
-    })
-
-    it('should be the same symbol when accessed multiple times', () => {
-      const infinity1 = infinity
-      const infinity2 = infinity
-      expect(infinity1).toBe(infinity2)
-    })
-
-    it('should be available through SUI compatibility object', () => {
-      expect(SUI.infinity).toBe(infinity)
-    })
-  })
-
-  describe('isInfinity', () => {
-    it('should correctly identify infinity symbol', () => {
-      expect(isInfinity(infinity)).toBe(true)
-      expect(isInfinity(SUI.infinity)).toBe(true)
-    })
-
-    it('should return false for non-infinity values', () => {
-      expect(isInfinity(100)).toBe(false)
-      expect(isInfinity('100%')).toBe(false)
-      expect(isInfinity('100px')).toBe(false)
-      expect(isInfinity(null)).toBe(false)
-      expect(isInfinity(undefined)).toBe(false)
-      expect(isInfinity({})).toBe(false)
-      expect(isInfinity(Symbol('other'))).toBe(false)
-    })
-  })
-
-  describe('dimensionToCSS', () => {
-    it('should convert infinity to 100%', () => {
-      expect(dimensionToCSS(infinity)).toBe('100%')
-    })
-
-    it('should convert numbers to px values', () => {
-      expect(dimensionToCSS(100)).toBe('100px')
-      expect(dimensionToCSS(0)).toBe('0px')
-      expect(dimensionToCSS(42.5)).toBe('42.5px')
-    })
-
-    it('should pass through string values', () => {
-      expect(dimensionToCSS('100%')).toBe('100%')
-      expect(dimensionToCSS('50vh')).toBe('50vh')
-      expect(dimensionToCSS('auto')).toBe('auto')
-      expect(dimensionToCSS('1rem')).toBe('1rem')
-    })
-
-    it('should return undefined for undefined input', () => {
-      expect(dimensionToCSS(undefined)).toBeUndefined()
-    })
-  })
-
-  describe('infinityToFlexCSS', () => {
-    it('should return proper flex properties for expansion', () => {
-      const flexProps = infinityToFlexCSS()
-      expect(flexProps).toEqual({
-        flexGrow: '1',
-        flexShrink: '1',
-        flexBasis: '0%'
-      })
-    })
-  })
-
-  describe('shouldExpandForInfinity', () => {
-    it('should detect width expansion when width is infinity', () => {
-      const result = shouldExpandForInfinity({ width: infinity })
-      expect(result.expandWidth).toBe(true)
-      expect(result.expandHeight).toBe(false)
-      expect(result.cssProps).toEqual({
-        flexGrow: '1 !important',
-        flexShrink: '1 !important',
-        flexBasis: '0% !important',
-        alignSelf: 'stretch !important'
-      })
-    })
-
-    it('should detect height expansion when height is infinity', () => {
-      const result = shouldExpandForInfinity({ height: infinity })
-      expect(result.expandWidth).toBe(false)
-      expect(result.expandHeight).toBe(true)
-      expect(result.cssProps).toEqual({
-        flexGrow: '1 !important',
-        flexShrink: '1 !important',
-        flexBasis: '0% !important',
-        alignSelf: 'stretch !important'
-      })
-    })
-
-    it('should detect width expansion when maxWidth is infinity', () => {
-      const result = shouldExpandForInfinity({ maxWidth: infinity })
-      expect(result.expandWidth).toBe(true)
-      expect(result.expandHeight).toBe(false)
-      expect(result.cssProps).toEqual({
-        flexGrow: '1 !important',
-        flexShrink: '1 !important',
-        flexBasis: '0% !important',
-        alignSelf: 'stretch !important'
-      })
-    })
-
-    it('should detect height expansion when maxHeight is infinity', () => {
-      const result = shouldExpandForInfinity({ maxHeight: infinity })
-      expect(result.expandWidth).toBe(false)
-      expect(result.expandHeight).toBe(true)
-      expect(result.cssProps).toEqual({
-        flexGrow: '1 !important',
-        flexShrink: '1 !important',
-        flexBasis: '0% !important',
-        alignSelf: 'stretch !important'
-      })
-    })
-
-    it('should handle both dimensions being infinity', () => {
-      const result = shouldExpandForInfinity({ 
-        width: infinity, 
-        height: infinity 
-      })
-      expect(result.expandWidth).toBe(true)
-      expect(result.expandHeight).toBe(true)
-      expect(result.cssProps).toEqual({
-        flexGrow: '1 !important',
-        flexShrink: '1 !important',
-        flexBasis: '0% !important',
-        alignSelf: 'stretch !important'
-      })
-    })
-
-    it('should not expand for non-infinity values', () => {
-      const result = shouldExpandForInfinity({
-        width: 100,
-        height: '50%',
-        maxWidth: 500,
-        maxHeight: '80vh'
-      })
-      expect(result.expandWidth).toBe(false)
-      expect(result.expandHeight).toBe(false)
-      expect(result.cssProps).toEqual({})
-    })
-
-    it('should prioritize infinity constraints over regular values', () => {
-      const result = shouldExpandForInfinity({
-        width: 100,
-        maxWidth: infinity,
-        height: 200,
-        maxHeight: infinity
-      })
-      expect(result.expandWidth).toBe(true)
-      expect(result.expandHeight).toBe(true)
-      expect(result.cssProps).toEqual({
-        flexGrow: '1 !important',
-        flexShrink: '1 !important',
-        flexBasis: '0% !important',
-        alignSelf: 'stretch !important'
-      })
-    })
-
-    it('should handle empty options', () => {
-      const result = shouldExpandForInfinity({})
-      expect(result.expandWidth).toBe(false)
-      expect(result.expandHeight).toBe(false)
-      expect(result.cssProps).toEqual({})
-    })
-  })
-
-  describe('Type compatibility', () => {
-    it('should accept infinity as Dimension type', () => {
-      const dimension: Dimension = infinity
-      expect(isInfinity(dimension)).toBe(true)
-    })
-
-    it('should accept numbers as Dimension type', () => {
-      const dimension: Dimension = 100
-      expect(typeof dimension).toBe('number')
-    })
-
-    it('should accept strings as Dimension type', () => {
-      const dimension: Dimension = '100%'
-      expect(typeof dimension).toBe('string')
-    })
-  })
-
-  describe('Symbol identity', () => {
-    it('should maintain symbol identity across imports', () => {
-      const symbolKey = Symbol.for('tachui.infinity')
-      expect(infinity).toBe(symbolKey)
-    })
-
-    it('should be serializable for debugging', () => {
-      expect(infinity.toString()).toBe('Symbol(tachui.infinity)')
-      expect(infinity.description).toBe('tachui.infinity')
-    })
-  })
-})

package/src/constants/frame-utils.ts

@@ -1,174 +0,0 @@
-/**
- * Frame Utility Functions
- *
- * Convenience functions for common frame operations using infinity
- * Provides SwiftUI-compatible patterns for responsive layouts
- */
-
-import { infinity } from './layout'
-import type { Modifier } from '../modifiers/types'
-import { LayoutModifier } from '../modifiers/base'
-
-/**
- * Create a frame that fills maximum width
- * Equivalent to SwiftUI's .frame(maxWidth: .infinity)
- */
-export function fillMaxWidth(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      maxWidth: infinity
-    }
-  })
-}
-
-/**
- * Create a frame that fills maximum height
- * Equivalent to SwiftUI's .frame(maxHeight: .infinity)
- */
-export function fillMaxHeight(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      maxHeight: infinity
-    }
-  })
-}
-
-/**
- * Create a frame that fills both maximum width and height
- * Equivalent to SwiftUI's .frame(maxWidth: .infinity, maxHeight: .infinity)
- */
-export function fillMaxSize(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      maxWidth: infinity,
-      maxHeight: infinity
-    }
-  })
-}
-
-/**
- * Create a frame that expands to fill available space
- * Sets both width and height to infinity with flex properties
- */
-export function expand(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      width: infinity,
-      height: infinity
-    }
-  })
-}
-
-/**
- * Create a frame with specific width but infinite height
- * Useful for sidebars or navigation panels
- */
-export function fixedWidthExpandHeight(width: number | string): Modifier {
-  return new LayoutModifier({
-    frame: {
-      width,
-      maxHeight: infinity
-    }
-  })
-}
-
-/**
- * Create a frame with specific height but infinite width
- * Useful for headers, footers, or horizontal bars
- */
-export function fixedHeightExpandWidth(height: number | string): Modifier {
-  return new LayoutModifier({
-    frame: {
-      height,
-      maxWidth: infinity
-    }
-  })
-}
-
-/**
- * Create a frame with constrained maximum dimensions
- * Expands within the given constraints
- */
-export function constrainedExpand(maxWidth?: number | string, maxHeight?: number | string): Modifier {
-  return new LayoutModifier({
-    frame: {
-      width: infinity,
-      height: infinity,
-      maxWidth,
-      maxHeight
-    }
-  })
-}
-
-/**
- * Create a responsive frame that adapts to container
- * Useful for cards or content areas
- */
-export function responsive(
-  minWidth?: number | string,
-  maxWidth?: number | string,
-  minHeight?: number | string,
-  maxHeight?: number | string
-): Modifier {
-  return new LayoutModifier({
-    frame: {
-      width: infinity,
-      height: infinity,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight
-    }
-  })
-}
-
-/**
- * Create a frame for flexible content
- * Grows to fill space but respects content size
- */
-export function flexible(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      maxWidth: infinity,
-      maxHeight: infinity
-    }
-  })
-}
-
-/**
- * Create a frame for full viewport coverage
- * Useful for overlays, modals, or full-screen components
- */
-export function fullScreen(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      width: '100vw',
-      height: '100vh'
-    }
-  })
-}
-
-/**
- * Create a frame that takes remaining space in flex containers
- * Combines infinity with flex-grow for optimal space distribution
- */
-export function remainingSpace(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      width: infinity,
-      height: infinity
-    }
-  })
-}
-
-/**
- * Create a frame for equal distribution in containers
- * Useful for button groups or tab layouts
- */
-export function equalShare(): Modifier {
-  return new LayoutModifier({
-    frame: {
-      width: infinity
-    }
-  })
-}

package/src/constants/index.ts

@@ -1,8 +0,0 @@
-/**
- * TachUI Constants
- *
- * Exports all constants for easy access throughout the framework
- */
-
-export * from './layout'
-export * from './frame-utils'

package/src/constants/layout.ts

@@ -1,120 +0,0 @@
-/**
- * TachUI Layout Constants
- *
- * Provides SwiftUI-style constants for layout and sizing operations.
- * Enables familiar APIs like `.frame(maxWidth: infinity)` for responsive layouts.
- */
-
-/**
- * Infinity constant representing unlimited space availability
- * Equivalent to SwiftUI's .infinity for frame dimensions
- */
-export const infinity = Symbol.for('tachui.infinity')
-
-/**
- * Type definition for the infinity constant
- */
-export type InfinityValue = typeof infinity
-
-/**
- * Dimension type that accepts numbers, strings, or infinity
- * Used throughout the modifier system for size-related properties
- */
-export type Dimension = number | string | InfinityValue
-
-/**
- * SUI-compatible export object (SUI = SwiftUI-inspired)
- * Allows usage like: import { SUI } from '@tachui/core'; SUI.infinity
- */
-export const SUI = {
-  infinity: infinity
-} as const
-
-/**
- * Helper function to check if a value is the infinity constant
- */
-export function isInfinity(value: any): value is InfinityValue {
-  return value === infinity
-}
-
-/**
- * Convert a Dimension value to appropriate CSS value
- * 
- * @param value - The dimension value to convert
- * @returns CSS-compatible string or undefined
- */
-export function dimensionToCSS(value: Dimension | undefined): string | undefined {
-  if (value === undefined) {
-    return undefined
-  }
-  
-  if (value === infinity) {
-    return '100%'
-  }
-  
-  if (typeof value === 'number') {
-    return `${value}px`
-  }
-  
-  // String values are passed through as-is (allows for custom units)
-  return value
-}
-
-/**
- * Convert infinity to flexbox properties for proper expansion
- * Used when width/height is set to infinity to ensure proper flex behavior
- */
-export function infinityToFlexCSS(): Record<string, string> {
-  return {
-    flexGrow: '1',
-    flexShrink: '1',
-    flexBasis: '0%'
-  }
-}
-
-/**
- * Helper to determine if a frame constraint should expand to fill
- * Takes precedence of constraints into account
- */
-export function shouldExpandForInfinity(options: {
-  width?: Dimension
-  height?: Dimension
-  maxWidth?: Dimension
-  maxHeight?: Dimension
-  minWidth?: Dimension
-  minHeight?: Dimension
-}): { 
-  expandWidth: boolean
-  expandHeight: boolean 
-  cssProps: Record<string, string>
-} {
-  const expandWidth = options.width === infinity || options.maxWidth === infinity
-  const expandHeight = options.height === infinity || options.maxHeight === infinity
-  
-  const cssProps: Record<string, string> = {}
-  
-  // Apply flex properties for infinity dimensions
-  if (expandWidth) {
-    Object.assign(cssProps, {
-      flexGrow: '1 !important',
-      flexShrink: '1 !important', 
-      flexBasis: '0% !important',
-      alignSelf: 'stretch !important'  // Override parent's align-items constraint
-    })
-  }
-  
-  if (expandHeight) {
-    Object.assign(cssProps, {
-      flexGrow: '1 !important',
-      flexShrink: '1 !important',
-      flexBasis: '0% !important',
-      alignSelf: 'stretch !important'  // Override parent's align-items constraint
-    })
-  }
-  
-  return {
-    expandWidth,
-    expandHeight,
-    cssProps
-  }
-}

package/src/css-classes/component-base.ts

@@ -1,117 +0,0 @@
-/**
- * CSS Classes Enhancement - Component Base
- * 
- * Base class for components that support CSS class integration.
- * Provides utilities for processing and applying CSS classes.
- */
-
-import { createComputed, isSignal, isComputed } from '../reactive'
-import type { Signal } from '../reactive/types'
-import { cssClassManager } from './css-class-manager'
-import type { CSSClassesProps } from './types'
-
-/**
- * Base class for components with CSS class support
- */
-export abstract class ComponentWithCSSClasses {
-  protected cssClassManager = cssClassManager
-
-  /**
-   * Process CSS classes from props and integrate with component classes
-   */
-  protected processComponentClasses(
-    props: CSSClassesProps, 
-    baseClasses: string[] = []
-  ): string[] {
-    if (!props.css) {
-      return baseClasses
-    }
-
-    const userClasses = this.cssClassManager.processClasses(props.css)
-    return this.cssClassManager.combineClasses(baseClasses, userClasses)
-  }
-
-  /**
-   * Create class string for DOM nodes - handles both static and reactive classes
-   */
-  protected createClassString(
-    props: CSSClassesProps,
-    baseClasses: string[] = []
-  ): Signal<string> | string {
-    // If css is reactive, create reactive class string
-    if (props.css && (isSignal(props.css) || isComputed(props.css))) {
-      return createComputed(() => {
-        const processedClasses = this.processComponentClasses(props, baseClasses)
-        return processedClasses.join(' ')
-      })
-    }
-
-    // Static class processing
-    const processedClasses = this.processComponentClasses(props, baseClasses)
-    return processedClasses.join(' ')
-  }
-
-  /**
-   * Create class array for components that need array format
-   */
-  protected createClassArray(
-    props: CSSClassesProps,
-    baseClasses: string[] = []
-  ): Signal<string[]> | string[] {
-    // If css is reactive, create reactive class array
-    if (props.css && isSignal(props.css)) {
-      return createComputed(() => {
-        return this.processComponentClasses(props, baseClasses)
-      })
-    }
-
-    // Static class processing
-    return this.processComponentClasses(props, baseClasses)
-  }
-
-  /**
-   * Validate CSS classes for development warnings
-   */
-  protected validateCSSClasses(props: CSSClassesProps): void {
-    if (process.env.NODE_ENV !== 'development' || !props.css) {
-      return
-    }
-
-    // Validate that css is the right type
-    const classes = props.css
-    const isValidType = typeof classes === 'string' || 
-                       Array.isArray(classes) || 
-                       isSignal(classes)
-
-    if (!isValidType) {
-      console.warn('[tachUI] css must be a string, array of strings, or signal. Got:', typeof classes)
-    }
-
-    // Validate array contents if it's an array
-    if (Array.isArray(classes)) {
-      const invalidItems = classes.filter(item => typeof item !== 'string')
-      if (invalidItems.length > 0) {
-        console.warn('[tachUI] All items in css array must be strings. Invalid items:', invalidItems)
-      }
-    }
-  }
-
-  /**
-   * Get debug information about processed classes
-   */
-  protected getClassDebugInfo(
-    props: CSSClassesProps,
-    baseClasses: string[] = []
-  ): { base: string[], user: string[], processed: string[], final: string } {
-    const userClasses = props.css ? 
-      this.cssClassManager.processClasses(props.css) : []
-    const processedClasses = this.processComponentClasses(props, baseClasses)
-    
-    return {
-      base: baseClasses,
-      user: userClasses,
-      processed: processedClasses,
-      final: processedClasses.join(' ')
-    }
-  }
-}