@codeleap/styles 5.8.1 → 5.8.3

package/src/hooks/tests/useCompositionStyles.spec.ts

@@ -0,0 +1,107 @@
+import { renderHook } from '@testing-library/react'
+import { describe, it, expect } from 'bun:test'
+import { useCompositionStyles } from '../useCompositionStyles'
+import { getNestedStylesByKey } from '../../utils'
+
+describe('useCompositionStyles', () => {
+  const mockComponentStyles = {
+    button: {
+      backgroundColor: 'blue',
+      color: 'white',
+      padding: '10px'
+    },
+    input: {
+      border: '1px solid gray',
+      padding: '5px'
+    },
+    container: {
+      display: 'flex',
+      gap: '10px'
+    }
+  }
+
+  it('should return styles for single element', () => {
+    const { result } = renderHook(() =>
+      useCompositionStyles('button', mockComponentStyles)
+    )
+
+    expect(result.current).toEqual({
+      button: getNestedStylesByKey('button', mockComponentStyles)
+    })
+  })
+
+  it('should return styles for array of elements', () => {
+    const composition = ['button', 'input']
+    
+    const { result } = renderHook(() =>
+      useCompositionStyles(composition, mockComponentStyles)
+    )
+
+    expect(result.current).toEqual({
+      button: getNestedStylesByKey('button', mockComponentStyles),
+      input: getNestedStylesByKey('input', mockComponentStyles)
+    })
+  })
+
+  it('should handle empty array', () => {
+    const { result } = renderHook(() =>
+      useCompositionStyles([], mockComponentStyles)
+    )
+
+    expect(result.current).toEqual({})
+  })
+
+  it('should memoize results with same props', () => {
+    const { result, rerender } = renderHook(
+      ({ composition, styles }) => useCompositionStyles(composition, styles),
+      {
+        initialProps: {
+          composition: 'button',
+          styles: mockComponentStyles
+        }
+      }
+    )
+
+    const firstResult = result.current
+    rerender({ composition: 'button', styles: mockComponentStyles })
+    expect(result.current).toEqual(firstResult)
+  })
+
+  it('should update when composition changes', () => {
+    const { result, rerender } = renderHook(
+      ({ composition }) => useCompositionStyles(composition, mockComponentStyles),
+      {
+        initialProps: { composition: 'button' }
+      }
+    )
+
+    expect(result.current).toEqual({
+      button: getNestedStylesByKey('button', mockComponentStyles)
+    })
+
+    rerender({ composition: 'input' })
+    expect(result.current).toEqual({
+      input: getNestedStylesByKey('input', mockComponentStyles)
+    })
+  })
+
+  it('should handle non-existent keys', () => {
+    const { result } = renderHook(() =>
+      useCompositionStyles('nonexistent', mockComponentStyles)
+    )
+
+    expect(result.current).toEqual({
+      nonexistent: getNestedStylesByKey('nonexistent', mockComponentStyles)
+    })
+  })
+
+  it('should preserve original componentStyles object', () => {
+    const originalStyles = { ...mockComponentStyles }
+    
+    renderHook(() =>
+      useCompositionStyles('button', mockComponentStyles)
+    )
+
+    expect(mockComponentStyles).toEqual(originalStyles)
+  })
+})

package/src/hooks/tests/useStyleObserver.spec.ts

@@ -0,0 +1,89 @@
+import { renderHook } from '@testing-library/react'
+import { describe, it, expect } from 'bun:test'
+import { useStyleObserver } from '../useStyleObserver'
+
+describe('useStyleObserver', () => {
+  it('should return string representation for primitive values', () => {
+    const { result } = renderHook(() => useStyleObserver('red'))
+    expect(result.current).toBe('red')
+
+    const { result: numberResult } = renderHook(() => useStyleObserver(10))
+    expect(numberResult.current).toBe(10)
+
+    const { result: boolResult } = renderHook(() => useStyleObserver(true))
+    expect(boolResult.current).toBe(true)
+  })
+
+  it('should stringify object styles', () => {
+    const style = { color: 'red', fontSize: '14px' }
+    const { result } = renderHook(() => useStyleObserver(style))
+    
+    expect(result.current).toBe(JSON.stringify(style))
+  })
+
+  it('should stringify array styles and filter falsy values', () => {
+    const style = ['btn', 'btn-primary', null, '', undefined, false]
+    const { result } = renderHook(() => useStyleObserver(style))
+    
+    expect(result.current).toBe(JSON.stringify(['btn', 'btn-primary']))
+  })
+
+  it('should handle empty array', () => {
+    const { result } = renderHook(() => useStyleObserver([]))
+    expect(result.current).toBe(JSON.stringify([]))
+  })
+
+  it('should handle array with all falsy values', () => {
+    const { result } = renderHook(() => useStyleObserver([null, '', undefined, false]))
+    expect(result.current).toBe(JSON.stringify([]))
+  })
+
+  it('should handle null and undefined', () => {
+    const { result: nullResult } = renderHook(() => useStyleObserver(null))
+    expect(nullResult.current).toBe(JSON.stringify(null))
+
+    const { result: undefinedResult } = renderHook(() => useStyleObserver(undefined))
+    expect(undefinedResult.current).toBe(undefined)
+  })
+
+  it('should memoize results with same input', () => {
+    const style = { color: 'blue' }
+    const { result, rerender } = renderHook(
+      ({ styleInput }) => useStyleObserver(styleInput),
+      { initialProps: { styleInput: style } }
+    )
+
+    const firstResult = result.current
+    rerender({ styleInput: style })
+    expect(result.current).toBe(firstResult)
+  })
+
+  it('should update when style changes', () => {
+    const { result, rerender } = renderHook(
+      ({ style }) => useStyleObserver(style),
+      { initialProps: { style: { color: 'red' } } }
+    )
+
+    expect(result.current).toBe(JSON.stringify({ color: 'red' }))
+
+    rerender({ style: { color: 'blue' } })
+    expect(result.current).toBe(JSON.stringify({ color: 'blue' }))
+  })
+
+  it('should handle nested objects', () => {
+    const style = { 
+      button: { color: 'red' }, 
+      container: { padding: '10px' } 
+    }
+    const { result } = renderHook(() => useStyleObserver(style))
+    
+    expect(result.current).toBe(JSON.stringify(style))
+  })
+
+  it('should handle mixed array with objects and strings', () => {
+    const style = ['btn', { active: true }, null, 'primary']
+    const { result } = renderHook(() => useStyleObserver(style))
+    
+    expect(result.current).toBe(JSON.stringify(['btn', { active: true }, 'primary']))
+  })
+})

package/src/hooks/useCompositionStyles.ts

@@ -0,0 +1,33 @@
+import { useMemo } from 'react'
+import { ICSS } from '../types'
+import { getNestedStylesByKey } from '../utils'
+
+/**
+ * Hook that processes composition styles based on component styles.
+ * 
+ * @param {T | Array<T>} composition - Composition element(s)
+ * @param {Partial<Record<C, ICSS>>} componentStyles - Component styles object
+ * @returns {Partial<Record<T, ICSS>>} Mapped styles for each composition element
+ */
+export function useCompositionStyles<T extends string, C extends string>(
+  composition: (T | Array<T>),
+  componentStyles: Partial<Record<C, ICSS>>
+): Partial<Record<T, ICSS>> {
+  const styles = {
+    ...componentStyles
+  }
+
+  return useMemo(() => {
+    const compositionStyles = {}
+
+    if (Array.isArray(composition)) {
+      for (const element of composition) {
+        compositionStyles[element as string] = getNestedStylesByKey(element, styles)
+      }
+    } else {
+      compositionStyles[composition as string] = getNestedStylesByKey(composition, styles)
+    }
+
+    return compositionStyles
+  }, [styles])
+}

package/src/hooks/useNestedStylesByKey.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react'
+import { ICSS } from '../types'
+import { getNestedStylesByKey } from '../utils'
+
+export function useNestedStylesByKey<T extends string>(match: string, componentStyles: Partial<Record<T, ICSS>>) {
+  const styles = {
+    ...componentStyles
+  }
+
+  return useMemo(() => {
+    return getNestedStylesByKey(match, styles)
+  }, [styles])
+}

package/src/hooks/useStyleObserver.ts

@@ -0,0 +1,19 @@
+import { useMemo } from 'react'
+
+/**
+ * Hook that observes style changes by creating a memoized string representation.
+ * 
+ * @param {any} style - Style value to observe (array, object, or primitive)
+ * @returns {string} Serialized string representation of the style for comparison
+ */
+export const useStyleObserver = (style) => {
+  return useMemo(() => {
+    if (Array.isArray(style)) {
+      return JSON.stringify(style?.filter(v => !!v))
+    } else if (typeof style === 'object'){
+      return JSON.stringify(style)
+    } else {
+      return style
+    }
+  }, [style])
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,16 @@
+import { ThemeState, themeStoreComputed } from '../theme'
+import { useStore } from '@nanostores/react'
+
+type ThemeSelector<T> = (state: ThemeState) => T
+
+export const useTheme = <T = ThemeState>(
+  selector?: ThemeSelector<T>
+): T => {
+  const state = useStore(themeStoreComputed)
+  
+  if (!selector) {
+    return state as T
+  }
+  
+  return selector(state)
+}

package/src/index.ts

@@ -1,8 +1,12 @@
-import './lib/constants'
-import './lib/utils'
+import './constants'
+import './utils'
 
+export * from './classes'
+export * from './hooks'
 export * from './lib'
-export * from './types'
+export * from './theme'
 export * from './tools'
-
-export { default as deepmerge } from '@fastify/deepmerge'
+export * from './types'
+export * from './variants'
+export * from './constants'
+export * from './utils'

package/src/lib/createStyles.ts

@@ -1,10 +1,19 @@
 import { AnyRecord, ICSS, ITheme } from '../types'
-import { themeStore } from './themeStore'
+import { themeStore } from '../theme'
 
 type Value = AnyRecord
 
 type StylesShape<K extends string, V extends Value> = Partial<Record<K, ICSS & Partial<Omit<V, keyof ICSS>>>>
 
+/**
+ * Creates a reactive styles object that automatically updates when theme changes.
+ * Uses a proxy to re-compute styles on each access, ensuring theme changes are reflected.
+ * 
+ * @template K - Style keys (extends string)
+ * @template V - Additional value type (extends AnyRecord)
+ * @param {StylesShape<K, V> | ((theme: ITheme) => StylesShape<K, V>)} styles - Static styles object or function that receives theme
+ * @returns {StylesShape<K, V>} Proxied styles object that recomputes on theme changes
+ */
 export function createStyles<K extends string, V extends Value = {}>(
   styles: StylesShape<K, V> | ((theme: ITheme) => StylesShape<K, V>),
 ) {

package/src/lib/createTheme.ts

@@ -1,10 +1,7 @@
 import { AppTheme, Theme } from '../types'
-import { borderCreator } from './borderCreator'
-import { createMediaQueries } from './mediaQuery'
-import { multiplierProperty } from './multiplierProperty'
-import { defaultVariants } from './defaultVariants'
-import { spacingFactory } from './spacing'
-import { themeStore } from './themeStore'
+import { borderCreator, createMediaQueries, defaultVariants, spacingFactory } from '../variants'
+import { minifier, multiplierProperty } from '../tools'
+import { themeStore } from '../theme'
 
 type ThemePersistor = {
   get: (name: string) => any
@@ -30,9 +27,20 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
     ...otherThemeValues
   } = theme
 
-  themeStore.setColorScheme(themePersistor.get(colorSchemeKey) ?? 'default')
+  const persistor = {
+    get: (key: string) => {
+      const value = themePersistor.get(key)
+      if (!value) return null
+      return minifier.decompress(value)
+    },
+    set: (key: string, value: any) => {
+      return themePersistor.set(key, !value ? '' : minifier.compress(value))
+    }
+  }
+
+  themeStore.setColorScheme(persistor.get(colorSchemeKey) ?? 'default')
 
-  const persistedAlternateColors = themePersistor.get(alternateColorsKey)
+  const persistedAlternateColors = persistor.get(alternateColorsKey)
 
   const alternateColors = {
     ...(persistedAlternateColors ?? {}),
@@ -80,31 +88,32 @@ export const createTheme = <T extends Theme>(theme: T, themePersistor: ThemePers
 
       themeStore.setColorScheme(colorScheme)
 
-      themePersistor.set(colorSchemeKey, colorScheme)
+      persistor.set(colorSchemeKey, colorScheme)
     },
 
     injectColorScheme(name, colorMap) {
       themeStore.injectColorScheme(name, colorMap)
 
-      const persistedAlternateColors = themePersistor.get(alternateColorsKey)
+      const persistedAlternateColors = persistor.get(alternateColorsKey)
 
       const unpersistedAlternateColors = {
         ...(persistedAlternateColors ?? {}),
         [name]: colorMap,
       }
 
-      themePersistor.set(alternateColorsKey, unpersistedAlternateColors)
+      persistor.set(alternateColorsKey, unpersistedAlternateColors)
     },
+    
     ejectColorScheme(name) {
       themeStore.ejectColorScheme(name)
 
-      const persistedAlternateColors = themePersistor.get(alternateColorsKey)
+      const persistedAlternateColors = persistor.get(alternateColorsKey)
 
       if (name in persistedAlternateColors) {
         delete persistedAlternateColors[name]
       }
 
-      themePersistor.set(alternateColorsKey, persistedAlternateColors)
+      persistor.set(alternateColorsKey, persistedAlternateColors)
     },
 
     baseSpacing: theme.baseSpacing,

package/src/lib/index.ts

@@ -1,11 +1,2 @@
-export { validateTheme } from './validateTheme'
-export { themeStore } from './themeStore'
-export { createTheme } from './createTheme'
-export { createAppVariants } from './createAppVariants'
 export { createStyles } from './createStyles'
-export { getNestedStylesByKey, mergeStyles, concatStyles } from './utils'
-export { CodeleapStyleRegistry } from './StyleRegistry'
-export { StylePersistor } from './StylePersistor'
-
-export * from './constants'
-export * from './hooks'
+export { createTheme } from './createTheme'

package/src/lib/tests/createStyles.spec.ts

@@ -0,0 +1,151 @@
+import { describe, it, expect, beforeEach } from 'bun:test'
+import { createStyles } from '../createStyles'
+import { themeStore } from '../../theme'
+import { mockTheme, MockedTheme } from '../../tests/theme'
+
+describe('createStyles', () => {
+  let currentTheme: MockedTheme = null
+
+  beforeEach(() => {
+    mockTheme()
+
+    currentTheme = themeStore.theme as unknown as MockedTheme
+  })
+
+  it('should return static styles when provided as object', () => {
+    const staticStyles = {
+      button: { color: 'red', padding: '10px' },
+      input: { border: '1px solid gray' }
+    }
+
+    const styles = createStyles(staticStyles)
+
+    expect(styles.button).toEqual({ color: 'red', padding: '10px' })
+    expect(styles.input).toEqual({ border: '1px solid gray' })
+  })
+
+  it('should handle empty static styles object', () => {
+    const styles = createStyles({})
+    expect(Object.keys(styles)).toHaveLength(0)
+  })
+
+  it('should compute styles from function when theme is available', () => {
+    const functionStyles = (theme: MockedTheme) => ({
+      button: {
+        color: theme.colors.neutralSo,
+        backgroundColor: theme.colors.secondary
+      },
+      container: {
+        padding: theme.spacing.value(2)
+      }
+    })
+
+    const styles = createStyles(functionStyles)
+
+    expect(styles.button).toEqual({
+      color: currentTheme.colors.neutralSo,
+      backgroundColor: currentTheme.colors.secondary
+    })
+    expect(styles.container).toEqual({
+      padding: 16
+    })
+  })
+
+  it('should recompute styles when theme changes (proxy behavior)', () => {
+    const functionStyles = (theme: MockedTheme) => ({
+      button: { color: theme.colors.buttonRegularPrimaryBgDefault }
+    })
+
+    const styles = createStyles(functionStyles)
+
+    // Initial theme
+    expect(styles.button).toEqual({ color: currentTheme.colors.primarySolid800 })
+
+    currentTheme.setColorScheme('dark')
+
+    // Should reflect new theme due to proxy
+    expect(styles.button).toEqual({ color: currentTheme.colors.primarySolid500 })
+  })
+
+  it('should handle complex theme-based styles', () => {
+    const functionStyles = (theme: MockedTheme) => ({
+      button: {
+        color: theme.colors.redSolid100,
+        border: `1px solid ${theme.colors.neutralSolid1000}`,
+        '@media (max-width: 768px)': {
+          fontSize: '14px'
+        }
+      },
+      alert: {
+        backgroundColor: theme.colors.redSolid600
+      }
+    })
+
+    const styles = createStyles(functionStyles)
+
+    expect(styles.button).toEqual({
+      color: currentTheme.colors.redSolid100,
+      border: `1px solid ${currentTheme.colors.neutralSolid1000}`,
+      '@media (max-width: 768px)': {
+        fontSize: '14px'
+      }
+    })
+    expect(styles.alert).toEqual({
+      backgroundColor: currentTheme.colors.redSolid600
+    })
+  })
+
+  it('should handle accessing non-existent properties', () => {
+    const staticStyles = {
+      button: { color: 'red' }
+    } as any
+
+    const styles = createStyles(staticStyles)
+
+    expect(styles.nonExistent).toBeUndefined()
+  })
+
+  it('should work with mixed ICSS and custom properties', () => {
+    const functionStyles = (theme: MockedTheme) => ({
+      component: {
+        // ICSS properties
+        color: theme.colors.blueSolid900,
+        padding: '10px',
+        // Custom properties (merged with ICSS)
+        customProp: 'custom-value',
+        dataAttribute: 'test'
+      }
+    })
+
+    const styles = createStyles(functionStyles)
+
+    expect(styles.component).toEqual({
+      color: currentTheme.colors.blueSolid900,
+      padding: '10px',
+      customProp: 'custom-value',
+      dataAttribute: 'test'
+    })
+  })
+
+  it('should maintain proxy behavior across multiple accesses', () => {
+    let computeCount = 0
+
+    const functionStyles = (theme: MockedTheme) => {
+      computeCount++
+      return {
+        button: { color: theme.colors.blueSolid100 }
+      }
+    }
+
+    const styles = createStyles(functionStyles)
+
+    computeCount = 0
+
+    // Each property access should trigger recomputation
+    styles.button
+    styles.button
+    styles.button
+
+    expect(computeCount).toBe(3)
+  })
+})