@codeleap/styles 5.8.2 → 5.8.4

package/src/tools/tests/minifier.spec.ts

@@ -0,0 +1,173 @@
+import { test, expect, describe } from 'bun:test'
+import { compress, decompress, minifier } from '../minifier'
+
+describe('minifier', () => {
+  describe('compress', () => {
+    test('should compress string values', () => {
+      const original = 'hello world'
+      const compressed = compress(original)
+      
+      expect(typeof compressed).toBe('string')
+      expect(compressed).not.toBe(original)
+      expect(compressed.length).toBeGreaterThan(0)
+    })
+
+    test('should compress objects', () => {
+      const original = { name: 'John', age: 30, items: [1, 2, 3] }
+      const compressed = compress(original)
+      
+      expect(typeof compressed).toBe('string')
+      expect(compressed).not.toEqual(original)
+    })
+
+    test('should return falsy values unchanged', () => {
+      expect(compress(null)).toBe(null)
+      expect(compress(undefined)).toBe(undefined)
+      expect(compress('')).toBe('')
+      expect(compress(0)).toBe(0)
+      expect(compress(false)).toBe(false)
+    })
+
+    test('should handle arrays', () => {
+      const original = [1, 2, { a: 'test' }, [4, 5]]
+      const compressed = compress(original)
+      
+      expect(typeof compressed).toBe('string')
+      expect(compressed.length).toBeGreaterThan(0)
+    })
+
+    test('should handle nested objects', () => {
+      const original = {
+        level1: {
+          level2: {
+            level3: {
+              data: 'nested value',
+              numbers: [1, 2, 3, 4, 5]
+            }
+          }
+        }
+      }
+      const compressed = compress(original)
+      
+      expect(typeof compressed).toBe('string')
+      expect(compressed.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('decompress', () => {
+    test('should decompress string values', () => {
+      const original = 'hello world'
+      const compressed = compress(original)
+      const decompressed = decompress(compressed)
+      
+      expect(decompressed).toBe(original)
+    })
+
+    test('should decompress objects', () => {
+      const original = { name: 'John', age: 30, items: [1, 2, 3] }
+      const compressed = compress(original)
+      const decompressed = decompress(compressed)
+      
+      expect(decompressed).toEqual(original)
+      expect(decompressed).not.toBe(original) // Different object reference
+    })
+
+    test('should return falsy values unchanged', () => {
+      expect(decompress(null)).toBe(null)
+      expect(decompress(undefined)).toBe(undefined)
+      expect(decompress('')).toBe('')
+      expect(decompress(0)).toBe(0)
+      expect(decompress(false)).toBe(false)
+    })
+
+    test('should handle arrays', () => {
+      const original = [1, 2, { a: 'test' }, [4, 5]]
+      const compressed = compress(original)
+      const decompressed = decompress(compressed)
+      
+      expect(decompressed).toEqual(original)
+    })
+
+    test('should handle nested objects', () => {
+      const original = {
+        level1: {
+          level2: {
+            level3: {
+              data: 'nested value',
+              numbers: [1, 2, 3, 4, 5]
+            }
+          }
+        }
+      }
+      const compressed = compress(original)
+      const decompressed = decompress(compressed)
+      
+      expect(decompressed).toEqual(original)
+    })
+  })
+
+  describe('roundtrip compression', () => {
+    test('should maintain data integrity through compress/decompress cycle', () => {
+      const testCases = [
+        'simple string',
+        { simple: 'object' },
+        [1, 2, 3, 4, 5],
+        { mixed: ['array', { nested: true }] },
+        42,
+        true,
+        { date: '2023-01-01', count: 100 }
+      ]
+
+      testCases.forEach(original => {
+        const compressed = compress(original)
+        const decompressed = decompress(compressed)
+        expect(decompressed).toEqual(original)
+      })
+    })
+
+    test('should actually compress large repetitive data', () => {
+      const original = {
+        data: Array(1000).fill('repeated string data that should compress well')
+      }
+      const compressed = compress(original)
+      const originalStr = JSON.stringify(original)
+      
+      expect(compressed.length).toBeLessThan(originalStr.length)
+      
+      const decompressed = decompress(compressed)
+      expect(decompressed).toEqual(original)
+    })
+  })
+
+  describe('minifier object', () => {
+    test('should have compress and decompress methods', () => {
+      expect(typeof minifier.compress).toBe('function')
+      expect(typeof minifier.decompress).toBe('function')
+    })
+
+    test('should work the same as individual functions', () => {
+      const original = { test: 'data' }
+      
+      const compressed1 = compress(original)
+      const compressed2 = minifier.compress(original)
+      expect(compressed1).toBe(compressed2)
+      
+      const decompressed1 = decompress(compressed1)
+      const decompressed2 = minifier.decompress(compressed1)
+      expect(decompressed1).toEqual(decompressed2)
+    })
+  })
+
+  describe('error handling', () => {
+    test('should return null for invalid compressed data', () => {
+      const result = decompress('invalid-base64-data')
+      expect(result).toBe(null)
+    })
+
+    test('should throw error for non-JSON compressed data', () => {
+      // Create a valid base64 string that decompresses to non-JSON
+      const nonJsonCompressed = compress('valid data').slice(0, -1) + 'X' // Corrupt the data
+      expect(() => decompress(nonJsonCompressed)).toThrow()
+    })
+  })
+})

package/src/types/store.ts

@@ -1,5 +1,5 @@
 export interface StateStorage {
-  getItem: (name: string) => string | null
-  setItem: (name: string, value: string) => void
+  getItem: (name: string) => any | null
+  setItem: (name: string, value: any) => void
   removeItem: (name: string) => void
 }

package/src/types/style.ts

@@ -1,6 +1,6 @@
-import { DynamicVariants } from '../lib/dynamicVariants'
-import { Queries } from '../lib/mediaQuery'
-import { DefaultVariants } from '../lib/defaultVariants'
+import { DynamicVariants } from '../variants/dynamicVariants'
+import { Queries } from '../variants/mediaQuery'
+import { DefaultVariants } from '../variants/defaultVariants'
 import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects, ITheme } from './core'
 import { Multiplier, Spacing } from './spacing'
 

package/src/types/theme.ts

@@ -1,7 +1,7 @@
-import { BorderCreator } from '../lib/borderCreator'
-import { MediaQueries } from '../lib/mediaQuery'
-import type { DefaultVariants } from '../lib/defaultVariants'
-import { MultiplierFunction, Spacings } from '../lib/spacing'
+import { BorderCreator } from '../variants/borderCreator'
+import { MediaQueries } from '../variants/mediaQuery'
+import type { DefaultVariants } from '../variants/defaultVariants'
+import { MultiplierFunction, Spacings } from '../variants/spacing'
 import { ICSS, IEffect } from './core'
 
 type AnyMap = {

package/src/{lib/utils.ts → utils.ts}

@@ -1,6 +1,6 @@
-import deepmerge from '@fastify/deepmerge'
-import { ICSS, StyledProp } from '../types'
-import { spacingShortVariants, spacingVariants } from '../types/spacing'
+import { ICSS, StyledProp } from './types'
+import { spacingShortVariants, spacingVariants } from './types/spacing'
+import { deepmerge } from './tools'
 
 export function capitalize(str: string, reverse = false) {
   if (!str.length) return str

package/src/{lib → variants}/borderCreator.ts

@@ -1,7 +1,7 @@
 import { IColors, ICSS } from '../types'
 import { borderDirection } from './dynamicVariants'
-import { themeStore } from './themeStore'
-import { capitalize } from './utils'
+import { themeStore } from '../theme'
+import { capitalize } from '../utils'
 
 type BorderCreatorArgs = {
   color: keyof IColors | (string & {})

package/src/{lib → variants}/createAppVariants.ts

@@ -1,5 +1,5 @@
 import { ICSS, ITheme } from '../types'
-import { themeStore } from './themeStore'
+import { themeStore } from '../theme'
 
 type AppVariantsMap = {
   [x: string]: ICSS | ((theme: ITheme) => ICSS)

package/src/{lib → variants}/dynamicVariants.ts

@@ -1,5 +1,5 @@
 import { IBorderRadius, IColors, IEffects } from '../types'
-import { capitalize } from './utils'
+import { capitalize } from '../utils'
 
 export type VariantFunction = (value: any) => any
 

package/src/variants/index.ts

@@ -0,0 +1,6 @@
+export * from './borderCreator'
+export * from './createAppVariants'
+export * from './defaultVariants'
+export * from './dynamicVariants'
+export * from './mediaQuery'
+export * from './spacing'

package/src/{lib → variants}/spacing.ts

@@ -7,9 +7,9 @@ export type Spacings<T extends string, S = boolean> = {
   [Property in (S extends boolean ? SpacingVariants : SpacingShortVariants) as `${T}${string & Property}`]: MultiplierFunction;
 } & {
     [Property in T]: (multiplier: number) => ICSS;
-} & {
-  value: (multiplier: number) => number
-}
+  } & {
+    value: (multiplier: number) => number
+  }
 
 const shortMapValues = {
   'x': 'Horizontal',
@@ -22,59 +22,72 @@ const shortMapValues = {
   'p': 'padding'
 }
 
+const shortPositionMap = {
+  'x': 'Horizontal',
+  'y': 'Vertical',
+  'l': 'Left',
+  'r': 'Right',
+  't': 'Top',
+  'b': 'Bottom'
+}
+
 export function spacingFactory<T extends string>(
   base: number,
   spacingProperty: T,
   isShort: boolean = false
 ): any {
-  const property = isShort ? shortMapValues[spacingProperty as string] : spacingProperty
+  const baseProperty = isShort ? shortMapValues[spacingProperty as keyof typeof shortMapValues] : spacingProperty
   const positions = isShort ? spacingShortVariants : spacingVariants
 
   const spacings = {
-    [`${spacingProperty}`]: (n: number | string) => ({
-      [`${property}`]: base * Number(n),
-    }),
+    [`${spacingProperty}`]: (n: number | string) => {
+      if (n === 'auto') {
+        return { [baseProperty]: 'auto' }
+      }
+      return { [baseProperty]: base * Number(n) }
+    },
   }
 
   for (const _position of positions) {
-    const position = isShort ? shortMapValues[_position] : _position
+    const position = isShort
+      ? shortPositionMap[_position as keyof typeof shortPositionMap] || _position
+      : _position
+
     const key = `${spacingProperty}${_position}`
 
     let getter = null
 
     switch (position) {
       case 'Horizontal':
-        getter = (value: number) => ({
-          [`${property}Left`]: value,
-          [`${property}Right`]: value,
+        getter = (value: number | string) => ({
+          [`${baseProperty}Left`]: value,
+          [`${baseProperty}Right`]: value,
         })
         break
       case 'Vertical':
-        getter = (value: number) => ({
-          [`${property}Top`]: value,
-          [`${property}Bottom`]: value,
+        getter = (value: number | string) => ({
+          [`${baseProperty}Top`]: value,
+          [`${baseProperty}Bottom`]: value,
         })
         break
       case '':
-        getter = (value: number) => ({
-          [`${property}Top`]: value,
-          [`${property}Left`]: value,
-          [`${property}Right`]: value,
-          [`${property}Bottom`]: value,
+        getter = (value: number | string) => ({
+          [`${baseProperty}Top`]: value,
+          [`${baseProperty}Right`]: value,
+          [`${baseProperty}Bottom`]: value,
+          [`${baseProperty}Left`]: value,
         })
         break
       default:
-        getter = (value: number) => ({
-          [`${property}${position}`]: value,
+        getter = (value: number | string) => ({
+          [`${baseProperty}${position}`]: value,
         })
         break
     }
 
     spacings[key] = (n: number | string) => {
-      if (n == 'auto') return getter('auto')
-
+      if (n === 'auto') return getter('auto')
       const value = base * Number(n)
-
       return getter(value)
     }
   }

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

@@ -0,0 +1,180 @@
+import { describe, expect, test, beforeEach } from 'bun:test'
+import { borderCreator } from '../borderCreator'
+import { mockTheme } from '../../tests/theme'
+
+describe('borderCreator', () => {
+  beforeEach(() => {
+    mockTheme()
+  })
+
+  test('should create border with default parameters', () => {
+    const result = borderCreator({ color: '#007bff' })
+
+    expect(result).toEqual({
+      borderTopColor: '#007bff',
+      borderTopWidth: 1,
+      borderTopStyle: 'solid',
+      borderRightColor: '#007bff',
+      borderRightWidth: 1,
+      borderRightStyle: 'solid',
+      borderBottomColor: '#007bff',
+      borderBottomWidth: 1,
+      borderBottomStyle: 'solid',
+      borderLeftColor: '#007bff',
+      borderLeftWidth: 1,
+      borderLeftStyle: 'solid'
+    })
+  })
+
+  test('should create border with custom width', () => {
+    const result = borderCreator({
+      color: '#6c757d',
+      width: 2
+    })
+
+    expect(result).toEqual({
+      borderTopColor: '#6c757d',
+      borderTopWidth: 2,
+      borderTopStyle: 'solid',
+      borderRightColor: '#6c757d',
+      borderRightWidth: 2,
+      borderRightStyle: 'solid',
+      borderBottomColor: '#6c757d',
+      borderBottomWidth: 2,
+      borderBottomStyle: 'solid',
+      borderLeftColor: '#6c757d',
+      borderLeftWidth: 2,
+      borderLeftStyle: 'solid'
+    })
+  })
+
+  test('should create border with custom style', () => {
+    const result = borderCreator({
+      color: '#28a745',
+      style: 'dashed'
+    })
+
+    expect(result).toEqual({
+      borderTopColor: '#28a745',
+      borderTopWidth: 1,
+      borderTopStyle: 'dashed',
+      borderRightColor: '#28a745',
+      borderRightWidth: 1,
+      borderRightStyle: 'dashed',
+      borderBottomColor: '#28a745',
+      borderBottomWidth: 1,
+      borderBottomStyle: 'dashed',
+      borderLeftColor: '#28a745',
+      borderLeftWidth: 1,
+      borderLeftStyle: 'dashed'
+    })
+  })
+
+  test('should create border for specific directions', () => {
+    const result = borderCreator({
+      color: '#dc3545',
+      directions: ['top', 'bottom']
+    })
+
+    expect(result).toEqual({
+      borderTopColor: '#dc3545',
+      borderTopWidth: 1,
+      borderTopStyle: 'solid',
+      borderBottomColor: '#dc3545',
+      borderBottomWidth: 1,
+      borderBottomStyle: 'solid'
+    })
+
+    const leftResult = borderCreator({
+      color: '#ffc107',
+      directions: ['left']
+    })
+
+    expect(leftResult).toEqual({
+      borderLeftColor: '#ffc107',
+      borderLeftWidth: 1,
+      borderLeftStyle: 'solid'
+    })
+  })
+
+  test('should handle string width values', () => {
+    const result = borderCreator({
+      color: '#17a2b8',
+      width: '2px'
+    })
+
+    expect(result).toEqual({
+      borderTopColor: '#17a2b8',
+      borderTopWidth: '2px',
+      borderTopStyle: 'solid',
+      borderRightColor: '#17a2b8',
+      borderRightWidth: '2px',
+      borderRightStyle: 'solid',
+      borderBottomColor: '#17a2b8',
+      borderBottomWidth: '2px',
+      borderBottomStyle: 'solid',
+      borderLeftColor: '#17a2b8',
+      borderLeftWidth: '2px',
+      borderLeftStyle: 'solid'
+    })
+  })
+
+  test('should handle custom color strings (not from theme)', () => {
+    const result = borderCreator({
+      color: '#ff0000',
+      width: 3
+    })
+
+    expect(result).toEqual({
+      borderTopColor: '#ff0000',
+      borderTopWidth: 3,
+      borderTopStyle: 'solid',
+      borderRightColor: '#ff0000',
+      borderRightWidth: 3,
+      borderRightStyle: 'solid',
+      borderBottomColor: '#ff0000',
+      borderBottomWidth: 3,
+      borderBottomStyle: 'solid',
+      borderLeftColor: '#ff0000',
+      borderLeftWidth: 3,
+      borderLeftStyle: 'solid'
+    })
+  })
+
+  test('should handle empty directions array', () => {
+    const result = borderCreator({
+      color: '#000',
+      directions: []
+    })
+
+    expect(result).toEqual({})
+  })
+
+  test('should handle single direction', () => {
+    const result = borderCreator({
+      color: '#f8f9fa',
+      directions: ['right']
+    })
+
+    expect(result).toEqual({
+      borderRightColor: '#f8f9fa',
+      borderRightWidth: 1,
+      borderRightStyle: 'solid'
+    })
+  })
+
+  test('should handle all border directions individually', () => {
+    const directions = ['top', 'right', 'bottom', 'left'] as const
+
+    directions.forEach(direction => {
+      const result = borderCreator({
+        color: 'primary',
+        directions: [direction]
+      })
+
+      expect(result).toHaveProperty(`border${direction.charAt(0).toUpperCase() + direction.slice(1)}Color`)
+      expect(result).toHaveProperty(`border${direction.charAt(0).toUpperCase() + direction.slice(1)}Width`)
+      expect(result).toHaveProperty(`border${direction.charAt(0).toUpperCase() + direction.slice(1)}Style`)
+    })
+  })
+})