@codeleap/styles 5.8.2 → 5.8.4

package/src/variants/tests/dynamicVariants.spec.ts

@@ -0,0 +1,194 @@
+import { describe, expect, test, beforeEach } from 'bun:test'
+import { createDynamicVariants } from '../dynamicVariants'
+import { IColors, IBorderRadius, IEffects } from '../../types'
+
+const mockTheme = {
+  colors: {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    success: '#28a745',
+    danger: '#dc3545',
+    warning: '#ffc107',
+    info: '#17a2b8',
+    light: '#f8f9fa',
+    dark: '#343a40',
+    white: '#ffffff',
+    black: '#000000'
+  } as IColors,
+  radius: {
+    none: '0',
+    sm: '0.125rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    full: '9999px'
+  } as IBorderRadius,
+  effects: {
+    shadowSm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    shadowMd: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+    shadowLg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
+  } as IEffects,
+  isBrowser: true
+}
+
+describe('createDynamicVariants', () => {
+  let dynamicVariants: any
+
+  beforeEach(() => {
+    dynamicVariants = createDynamicVariants()
+  })
+
+  test('should create color variants', () => {
+    expect(dynamicVariants.backgroundColor).toBeDefined()
+    expect(dynamicVariants.color).toBeDefined()
+
+    const bgResult = dynamicVariants.backgroundColor(mockTheme, 'primary')
+    expect(bgResult).toEqual({ backgroundColor: '#007bff' })
+
+    const colorResult = dynamicVariants.color(mockTheme, 'secondary')
+    expect(colorResult).toEqual({ color: '#6c757d' })
+  })
+
+  test('should create border property variants', () => {
+    expect(dynamicVariants.borderColor).toBeDefined()
+    const borderColorResult = dynamicVariants.borderColor(mockTheme, 'success')
+    expect(borderColorResult).toEqual({ borderColor: '#28a745' })
+
+    expect(dynamicVariants.borderWidth).toBeDefined()
+    const borderWidthResult = dynamicVariants.borderWidth(mockTheme, 'md')
+    expect(borderWidthResult).toEqual({ borderWidth: '0.375rem' })
+
+    expect(dynamicVariants.borderRadius).toBeDefined()
+    const borderRadiusResult = dynamicVariants.borderRadius(mockTheme, 'lg')
+    expect(borderRadiusResult).toEqual({ borderRadius: '0.5rem' })
+  })
+
+  test('should create directional border variants', () => {
+    expect(dynamicVariants.borderTopColor).toBeDefined()
+    expect(dynamicVariants.borderRightColor).toBeDefined()
+    expect(dynamicVariants.borderBottomColor).toBeDefined()
+    expect(dynamicVariants.borderLeftColor).toBeDefined()
+
+    const topColorResult = dynamicVariants.borderTopColor(mockTheme, 'danger')
+    expect(topColorResult).toEqual({ borderTopColor: '#dc3545' })
+
+    const leftWidthResult = dynamicVariants.borderLeftWidth(mockTheme, 'sm')
+    expect(leftWidthResult).toEqual({ borderLeftWidth: '0.125rem' })
+  })
+
+  test('should create combined border radius variants', () => {
+    expect(dynamicVariants.borderTopLeftRadius).toBeDefined()
+    expect(dynamicVariants.borderTopRightRadius).toBeDefined()
+    expect(dynamicVariants.borderBottomLeftRadius).toBeDefined()
+    expect(dynamicVariants.borderBottomRightRadius).toBeDefined()
+
+    const topLeftResult = dynamicVariants.borderTopLeftRadius(mockTheme, 'xl')
+    expect(topLeftResult).toEqual({ borderTopLeftRadius: '0.75rem' })
+
+    const bottomRightResult = dynamicVariants.borderBottomRightRadius(mockTheme, '2xl')
+    expect(bottomRightResult).toEqual({ borderBottomRightRadius: '1rem' })
+  })
+
+  test('should create cursor variant', () => {
+    expect(dynamicVariants.cursor).toBeDefined()
+
+    const pointerResult = dynamicVariants.cursor(mockTheme, 'pointer')
+    expect(pointerResult).toEqual({ cursor: 'pointer' })
+
+    const notAllowedResult = dynamicVariants.cursor(mockTheme, 'not-allowed')
+    expect(notAllowedResult).toEqual({ cursor: 'not-allowed' })
+
+    const emptyResult = dynamicVariants.cursor(mockTheme, '')
+    expect(emptyResult).toEqual({ cursor: '' })
+  })
+
+  test('should create bg shortcut variant', () => {
+    expect(dynamicVariants.bg).toBeDefined()
+
+    const bgResult = dynamicVariants.bg(mockTheme, 'warning')
+    expect(bgResult).toEqual({ backgroundColor: '#ffc107' })
+  })
+
+  test('should create br shortcut variant', () => {
+    expect(dynamicVariants.br).toBeDefined()
+
+    const brResult = dynamicVariants.br(mockTheme, 'full')
+    expect(brResult).toEqual({ borderRadius: '9999px' })
+  })
+
+  test('should create effect variant', () => {
+    expect(dynamicVariants.effect).toBeDefined()
+
+    const effectResult = dynamicVariants.effect(mockTheme, 'shadowMd')
+    expect(effectResult).toEqual('0 4px 6px -1px rgba(0, 0, 0, 0.1)')
+  })
+
+  test('should create scale variant', () => {
+    expect(dynamicVariants.scale).toBeDefined()
+
+    // Test in browser environment
+    const scaleResult = dynamicVariants.scale(mockTheme, 1.5)
+    expect(scaleResult).toEqual({ transform: 'scale(1.5)' })
+
+    // Test in non-browser environment
+    const serverTheme = { ...mockTheme, isBrowser: false }
+    const serverScaleResult = dynamicVariants.scale(serverTheme, 0.8)
+    expect(serverScaleResult).toEqual({ transform: [{ scale: 0.8 }] })
+  })
+
+  test('should handle numeric values for scale', () => {
+    const scaleResult = dynamicVariants.scale(mockTheme, 2)
+    expect(scaleResult).toEqual({ transform: 'scale(2)' })
+
+    const decimalResult = dynamicVariants.scale(mockTheme, 1.25)
+    expect(decimalResult).toEqual({ transform: 'scale(1.25)' })
+  })
+
+  test('should handle empty string for cursor', () => {
+    const result = dynamicVariants.cursor(mockTheme, '')
+    expect(result).toEqual({ cursor: '' })
+  })
+
+  test('should return all expected variant functions', () => {
+    const expectedVariants = [
+      'backgroundColor',
+      'color',
+      'borderColor',
+      'borderWidth',
+      'borderRadius',
+      'borderTopColor',
+      'borderRightColor',
+      'borderBottomColor',
+      'borderLeftColor',
+      'borderTopWidth',
+      'borderRightWidth',
+      'borderBottomWidth',
+      'borderLeftWidth',
+      'borderTopRadius',
+      'borderRightRadius',
+      'borderBottomRadius',
+      'borderLeftRadius',
+      'borderTopLeftRadius',
+      'borderTopRightRadius',
+      'borderBottomLeftRadius',
+      'borderBottomRightRadius',
+      'cursor',
+      'bg',
+      'effect',
+      'scale',
+      'br'
+    ]
+
+    expectedVariants.forEach(variant => {
+      expect(dynamicVariants[variant]).toBeDefined()
+      expect(typeof dynamicVariants[variant]).toBe('function')
+    })
+  })
+
+  test('should handle non-existent color gracefully', () => {
+    const result = dynamicVariants.backgroundColor(mockTheme, 'nonexistent')
+    expect(result).toHaveProperty('backgroundColor')
+  })
+})

package/src/variants/tests/spacing.spec.ts

@@ -0,0 +1,177 @@
+import { describe, expect, test } from 'bun:test'
+import { spacingFactory } from '../spacing'
+import { ICSS } from '../../types'
+
+describe('spacing', () => {
+  const base = 8
+  const property = 'margin'
+
+  test('should create basic spacing function', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    expect(margin.margin).toBeDefined()
+    expect(typeof margin.margin).toBe('function')
+    
+    const result = margin.margin(2) as ICSS
+    expect(result).toEqual({ 
+      marginTop: 16,
+      marginRight: 16,
+      marginBottom: 16,
+      marginLeft: 16
+    })
+  })
+
+  test('should handle string numbers', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    const result = margin.margin('2') as ICSS
+    expect(result).toEqual({ 
+      marginTop: 16,
+      marginRight: 16,
+      marginBottom: 16,
+      marginLeft: 16
+    })
+  })
+
+  test('should create all spacing variants', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    // Test all long form variants
+    expect(margin.marginTop(2)).toEqual({ marginTop: 16 })
+    expect(margin.marginRight(2)).toEqual({ marginRight: 16 })
+    expect(margin.marginBottom(2)).toEqual({ marginBottom: 16 })
+    expect(margin.marginLeft(2)).toEqual({ marginLeft: 16 })
+  })
+
+  test('should work with short form notation', () => {
+    const margin = spacingFactory(base, 'm', true)
+    
+    // Test short form variants
+    expect(margin.mt(2)).toEqual({ marginTop: 16 })
+    expect(margin.mr(2)).toEqual({ marginRight: 16 })
+    expect(margin.mb(2)).toEqual({ marginBottom: 16 })
+    expect(margin.ml(2)).toEqual({ marginLeft: 16 })
+    expect(margin.mx(2)).toEqual({ marginLeft: 16, marginRight: 16 })
+    expect(margin.my(2)).toEqual({ marginTop: 16, marginBottom: 16 })
+    expect(margin.m(2)).toEqual({ marginTop: 16, marginBottom: 16, marginLeft: 16, marginRight: 16 })
+  })
+
+  test('should handle horizontal and vertical shortcuts', () => {
+    const margin = spacingFactory(base, 'm', true)
+    
+    const horizontalResult = margin.mx(2) as ICSS
+    expect(horizontalResult).toEqual({
+      marginLeft: 16,
+      marginRight: 16
+    })
+    
+    const verticalResult = margin.my(2) as ICSS
+    expect(verticalResult).toEqual({
+      marginTop: 16,
+      marginBottom: 16
+    })
+  })
+
+  test('should handle "auto" values', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    const result = margin.margin('auto') as ICSS
+    expect(result).toEqual({ 
+      marginTop: 'auto',
+      marginRight: 'auto',
+      marginBottom: 'auto',
+      marginLeft: 'auto'
+    })
+    
+    const topResult = margin.marginTop('auto') as ICSS
+    expect(topResult).toEqual({ marginTop: 'auto' })
+  })
+
+  test('should work with padding property', () => {
+    const padding = spacingFactory(base, 'padding', false)
+    
+    expect(padding.padding(2)).toEqual({ 
+      paddingTop: 16,
+      paddingRight: 16,
+      paddingBottom: 16,
+      paddingLeft: 16
+    })
+    expect(padding.paddingTop(2)).toEqual({ paddingTop: 16 })
+  })
+
+  test('should work with short form padding', () => {
+    const padding = spacingFactory(base, 'p', true)
+    
+    expect(padding.pt(2)).toEqual({ paddingTop: 16 })
+    expect(padding.px(2)).toEqual({ paddingLeft: 16, paddingRight: 16 })
+    expect(padding.p(2)).toEqual({ paddingLeft: 16, paddingRight: 16, paddingBottom: 16, paddingTop: 16 })
+  })
+
+  test('should handle decimal multipliers', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    const result = margin.margin(0.5) as ICSS
+    expect(result).toEqual({ 
+      marginTop: 4,
+      marginRight: 4,
+      marginBottom: 4,
+      marginLeft: 4
+    })
+  })
+
+  test('should handle zero values', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    const result = margin.margin(0) as ICSS
+    expect(result).toEqual({ 
+      marginTop: 0,
+      marginRight: 0,
+      marginBottom: 0,
+      marginLeft: 0
+    })
+  })
+
+  test('should return correct structure with all properties', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    // Check that all expected properties exist
+    expect(margin).toHaveProperty('margin')
+    expect(margin).toHaveProperty('marginTop')
+    expect(margin).toHaveProperty('marginRight')
+    expect(margin).toHaveProperty('marginBottom')
+    expect(margin).toHaveProperty('marginLeft')
+    
+    // Check that they are functions
+    expect(typeof margin.margin).toBe('function')
+    expect(typeof margin.marginTop).toBe('function')
+    expect(typeof margin.marginRight).toBe('function')
+    expect(typeof margin.marginBottom).toBe('function')
+    expect(typeof margin.marginLeft).toBe('function')
+  })
+
+  test('should handle edge cases with invalid numbers', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    // Should handle NaN by converting to NaN (since Number('invalid') returns NaN)
+    const result = margin.margin('invalid') as ICSS
+    expect(result).toEqual({ 
+      marginTop: NaN,
+      marginRight: NaN,
+      marginBottom: NaN,
+      marginLeft: NaN
+    })
+  })
+
+  test('should handle empty string position for full spacing', () => {
+    const margin = spacingFactory(base, property, false)
+    
+    // This tests the case where position is empty string
+    const result = margin.margin(2) as ICSS
+    expect(result).toEqual({
+      marginTop: 16,
+      marginRight: 16,
+      marginBottom: 16,
+      marginLeft: 16
+    })
+  })
+})

package/src/lib/Cacher.ts

@@ -1,112 +0,0 @@
-import { CacheType } from '../types/cache'
-import { StyleConstants } from './constants'
-import { hashKey } from './hashKey'
-import { StateStorage } from '../types/store'
-
-function getStaleTime() {
-  const time = 7
-
-  let currentTime = new Date()
-
-  currentTime.setDate(currentTime.getDate() + time)
-
-  return currentTime
-}
-
-export class Cache<T extends any = any> {
-  cache: Record<string, T> = {}
-
-  get persistKeyCache() {
-    return `@styles.caches.${this.registryName}.cache`
-  }
-
-  get persistKeyStaleTime() {
-    return `@styles.caches.${this.registryName}.staleTime`
-  }
-
-  constructor(
-    public registryName: CacheType,
-    private storage: StateStorage = null,
-    public persistCache: boolean = !!storage,
-  ) {
-    if (!persistCache || !StyleConstants.STORE_CACHE_ENABLED) return
-
-    const { persistedCache, persistedStaleTime } = this.loadStorage()
-
-    const currentTime = new Date()
-
-    const isStaled = currentTime > persistedStaleTime
-
-    if (isStaled) {
-      this.clearStorage()
-      return
-    }
-
-    this.setCache(persistedCache)
-    this.storeStaleTime(persistedStaleTime)
-  }
-
-  keyFor(cacheBaseKey: string, data: Array<any> | any) {
-    const values = [cacheBaseKey, data]
-
-    const cacheKey = hashKey(values)
-    const cachedValue = this.cache[cacheKey] ?? null
-
-    return {
-      key: cacheKey,
-      value: cachedValue,
-    }
-  }
-
-  cacheFor(key: string, cache: T) {
-    this.cache[key] = cache
-    if (this.persistCache) this.storeCache()
-    return cache
-  }
-
-  // utils
-
-  setCache(cache: Record<string, T>) {
-    this.cache = cache ?? {}
-  }
-
-  clear() {
-    this.cache = {}
-    this.clearStorage()
-  }
-
-  // storage
-
-  loadStorage() {
-    if (!this.persistCache) return
-
-    const persistedStaleTime = this.storage.getItem(this.persistKeyStaleTime)
-    const persistedCache = JSON.parse(this.storage.getItem(this.persistKeyCache))
-
-    return {
-      persistedStaleTime: !persistedStaleTime ? getStaleTime() : new Date(persistedStaleTime),
-      persistedCache,
-    }
-  }
-
-  clearStorage() {
-    if (!this.persistCache) return
-
-    this.storage.removeItem(this.persistKeyStaleTime)
-    this.storage.removeItem(this.persistKeyCache)
-  }
-
-  storeCache(cache: Record<string, T> = null) {
-    if (!this.persistCache) return
-
-    const value = JSON.stringify(cache ?? this.cache)
-    this.storage.setItem(this.persistKeyCache, value)
-  }
-
-  storeStaleTime(staleTime: Date) {
-    if (!this.persistCache) return
-
-    const value = staleTime.toISOString()
-    this.storage.setItem(this.persistKeyStaleTime, value)
-  }
-}

package/src/lib/StaleControl.ts

@@ -1,73 +0,0 @@
-
-export class StaleControl {
-  private wiperId: NodeJS.Timer = null
-
-  constructor(
-    private staleTime: number = 60, // minutes
-    private staleTimeIdentifier: string = '//:',
-    private wiperInterval: number = 30 * 60 * 1000, // 30 minutes
-  ) {}
-
-  isStaled(value: string) {
-    const { staleTime } = this.extractStaleTime(value)
-
-    const currentTime = new Date()
-
-    const isStaled = currentTime > staleTime
-
-    return isStaled
-  }
-
-  insertStaleTime(value: string) {
-    let currentTime = new Date()
-
-    currentTime.setMinutes(currentTime.getMinutes() + this.staleTime)
-
-    const staleTime = currentTime.toISOString()
-
-    const valueWithStaleTime = `${value}${this.staleTimeIdentifier}${staleTime}`
-
-    return valueWithStaleTime
-  }
-
-  refreshStaleTime(value: string) {
-    const { value: extractedValue } = this.extractStaleTime(value)
-
-    const refreshedValue = this.insertStaleTime(extractedValue)
-
-    return refreshedValue
-  }
-
-  extractStaleTime(value: string) {
-    const [extractedValue, _staleTime] = value?.split(this.staleTimeIdentifier)
-
-    const staleTime = new Date(_staleTime)
-
-    return {
-      staleTime,
-      value: extractedValue,
-    }
-  }
-
-  /**
-   * wipe staled cache; verify isStaled values and remove
-   */
-  cacheWiper() {
-    throw new Error('Cache Wiper not implement')
-  }
-
-  registerCacheWiper() {
-    if (this.wiperId !== null) {
-      this.unregisterCacheWiper()
-    }
-
-    this.wiperId = setInterval(() => {
-      this.cacheWiper()
-    }, this.wiperInterval)
-  }
-
-  unregisterCacheWiper() {
-    clearInterval(this.wiperId)
-    this.wiperId = null
-  }
-}

package/src/lib/StyleCache.ts

@@ -1,81 +0,0 @@
-import { Cache } from './Cacher'
-import { hashKey } from './hashKey'
-import { StyleConstants } from './constants'
-import { CacheType } from '../types/cache'
-import { minifier } from './minifier'
-import { StateStorage } from '../types/store'
-
-export class StyleCache {
-  baseKey: string
-
-  styles = new Cache('styles')
-
-  compositions = new Cache('compositions')
-
-  responsive = new Cache('responsive')
-
-  variants: Cache
-
-  common: Cache
-
-  components: Cache
-
-  constructor(storage: StateStorage) {
-    this.variants = new Cache('variants', storage)
-    this.common = new Cache('common', storage)
-    this.components = new Cache('components', storage)
-  }
-
-  registerBaseKey(keys: Array<any>) {
-    keys.push(StyleConstants.STORES_PERSIST_VERSION)
-
-    const baseKey = hashKey(keys)
-
-    this.baseKey = baseKey
-
-    return baseKey
-  }
-
-  wipeCache() {
-    this.components.clear()
-    this.responsive.clear()
-    this.compositions.clear()
-    this.variants.clear()
-    this.common.clear()
-    this.styles.clear()
-  }
-
-  keyFor(type: CacheType, keyData: Array<any> | any) {
-    const cache = this[type]
-
-    const withFunctionsHash = Object.values(keyData).map((value) => {
-      if (typeof value === 'function') {
-        return value.toString()
-      }
-
-      return value
-    })
-
-    const values = [this.baseKey, ...withFunctionsHash]
-
-    const cacheKey = hashKey(values)
-    const cachedValue = minifier.decompress(cache.cache[cacheKey] ?? null)
-
-    return {
-      key: cacheKey,
-      value: cachedValue,
-    }
-  }
-
-  cacheFor(type: CacheType, key: string, value: any) {
-    if (!StyleConstants.CACHE_ENABLED) {
-      return value
-    }
-
-    const cache = this[type]
-
-    const minifiedValue = minifier.compress(value)
-
-    return cache.cacheFor(key, minifiedValue)
-  }
-}

package/src/lib/StylePersistor.ts

@@ -1,28 +0,0 @@
-import { StateStorage } from '../types/store'
-import { minifier } from './minifier'
-
-export type StoragePersistor = {
-  set: (key: string, value: any) => void
-  get: (key: string) => any
-  del: (key: string) => void
-}
-
-export class StylePersistor implements StateStorage {
-  constructor(
-    private storage: StoragePersistor
-  ) {}
-
-  setItem(name: string, value: string): void {
-    return this.storage.set(name, value)
-  }
-
-  getItem(name: string): string | null {
-    const persistedValue = this.storage?.get(name)
-
-    return minifier.decompress(persistedValue ?? null)
-  }
-
-  removeItem(name: string): void {
-    return this.storage.del(name)
-  }
-}