@codeleap/styles 4.0.1

package/src/lib/createTheme.ts

@@ -0,0 +1,89 @@
+import { AppTheme, ColorScheme, 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'
+
+type ColorSchemaPersistor = {
+  get: () => string
+  set: (colorSchema: string) => void
+}
+
+export const createTheme = <T extends Theme>(theme: T, colorSchemaPersistor: ColorSchemaPersistor): AppTheme<T> => {
+  const themeObj:AppTheme<T> = {
+    get currentColorScheme(): string {
+      return themeStore.getState().colorScheme
+    },
+
+    breakpoints: theme.breakpoints ?? {},
+
+    get colors() {
+      const colorScheme = themeStore.getState().colorScheme
+
+      if (colorScheme === 'default') return theme.colors
+      
+      return theme.alternateColors?.[colorScheme]
+    },
+
+    setColorScheme(colorScheme: ColorScheme<Theme>) {
+      themeStore.setState({ colorScheme: colorScheme as string })
+      colorSchemaPersistor.set(colorScheme as string)
+    },
+
+    baseSpacing: theme.baseSpacing,
+    value: (n = 1) => theme.baseSpacing * n,
+
+    spacing: {
+      value: (n = 1) => theme.baseSpacing * n,
+      gap: multiplierProperty(theme.baseSpacing, 'gap'),
+      ...spacingFactory(theme.baseSpacing, 'padding'),
+      ...spacingFactory(theme.baseSpacing, 'margin'),
+      ...spacingFactory(theme.baseSpacing, 'p', true),
+      ...spacingFactory(theme.baseSpacing, 'm', true),
+    },
+
+    inset: {
+      top: multiplierProperty(theme.baseSpacing, 'top'),
+      bottom: multiplierProperty(theme.baseSpacing, 'bottom'),
+      left: multiplierProperty(theme.baseSpacing, 'left'),
+      right: multiplierProperty(theme.baseSpacing, 'right')
+    },
+
+    presets: {
+      ...defaultVariants,
+      ...theme.presets,
+    },
+
+    borderRadius: theme.borderRadius ?? {},
+
+    effects: theme.effects ?? {},
+
+    media: createMediaQueries(theme.breakpoints),
+
+    border: borderCreator,
+
+    typography: theme.typography ?? {},
+
+    icons: theme.icons,
+
+    values: theme.values ?? {},
+
+    sized: (size) => {
+      const value = typeof size == 'number' ? size * theme.baseSpacing : size
+      
+      return {
+        width: value,
+        height: value,
+      }
+    },
+  }
+
+  themeStore.setState({ 
+    current: themeObj, 
+    colorScheme: colorSchemaPersistor.get() ?? 'default'
+  })
+
+  return themeObj
+}

package/src/lib/defaultVariants.ts

@@ -0,0 +1,180 @@
+import { ICSS } from '../types'
+
+export const defaultVariants = {
+  inline: {
+    display: 'inline-block',
+  },
+  block: {
+    display: 'block',
+  },
+  flex: {
+    display: 'flex',
+    flex: 1,
+  },
+  inlineFlex: {
+    display: 'inline-flex',
+  },
+  absolute: {
+    position: 'absolute',
+  },
+  relative: {
+    position: 'relative',
+  },
+  fixed: {
+    position: 'fixed',
+  },
+  sticky: {
+    position: 'sticky',
+  },
+  inset: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  insetX: {
+    left: 0,
+    right: 0,
+  },
+  insetY: {
+    top: 0,
+    bottom: 0,
+  },
+  hidden: {
+    display: 'none',
+  },
+  full: {
+    width: '100%',
+    height: '100%',
+  },
+  noWrap: {
+    whiteSpace: 'nowrap',
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  fullHeight: {
+    height: '100%',
+  },
+  fullView: {
+    width: '100vw',
+    height: 'calc(100vh - calc(100vh - 100%))',
+  },
+  fullViewWidth: {
+    width: '100vw',
+  },
+  fullViewHeight: {
+    height: 'calc(100vh - calc(100vh - 100%))',
+  },
+  whole: {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  centerRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  listStyles: {
+    overflow: 'auto',
+  },
+  column: {
+    flexDirection: 'column',
+  },
+  center: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  alignStart: {
+    alignItems: 'flex-start',
+  },
+  alignEnd: {
+    alignItems: 'flex-end',
+  },
+  alignCenter: {
+    alignItems: 'center',
+  },
+  alignStretch: {
+    alignItems: 'stretch',
+  },
+  alignSelfCenter: {
+    alignSelf: 'center',
+  },
+  alignSelfStart: {
+    alignSelf: 'flex-start',
+  },
+  alignSelfStretch: {
+    alignSelf: 'stretch',
+  },
+  alignSelfEnd: {
+    alignSelf: 'flex-end',
+  },
+  justifyStart: {
+    justifyContent: 'flex-start',
+  },
+  justifyEnd: {
+    justifyContent: 'flex-end',
+  },
+  justifyCenter: {
+    justifyContent: 'center',
+  },
+  justifySpaceBetween: {
+    justifyContent: 'space-between',
+  },
+  justifySpaceAround: {
+    justifyContent: 'space-around',
+  },
+  textRight: {
+    textAlign: 'right',
+  },
+  textLeft: {
+    textAlign: 'left',
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  blur: {
+    backdropFilter: 'blur(4px)',
+    '-webkit-backdrop-filter': 'blur(4px)',
+    transition: '500ms',
+  },
+  elevated: {
+    boxShadow: '0px 0px 16px 16px #aaaaaa1a',
+  },
+  neumorphism: {
+    boxShadow: '10px 10px 20px 0 #AEAEC077, -10px -10px 20px 0 #fff',
+  },
+  scrollX: {
+    overflowX: 'auto',
+  },
+  scrollY: {
+    overflowY: 'auto',
+  },
+  scrollXY: {
+    overflowX: 'auto',
+    overflowY: 'auto',
+  },
+  wrap: {
+    flexWrap: 'wrap',
+  },
+  debRed: {
+    backgroundColor: '#f00',
+  },
+  debGreen: {
+    backgroundColor: '#0f0',
+  },
+  debBlue: {
+    backgroundColor: '#00f',
+  },
+  debYellow: {
+    backgroundColor: '#f9e902',
+  },
+} as const
+
+export type DefaultVariants = Record<keyof typeof defaultVariants, ICSS>

package/src/lib/dynamicVariants.ts

@@ -0,0 +1,83 @@
+import { IBorderRadius, IColors, IEffects } from '../types'
+import { capitalize } from './utils'
+
+export type VariantFunction = (value: any) => any
+
+export const colorVariants = ['backgroundColor', 'color'] as const
+
+export const borderXDirection = ['left', 'right'] as const
+export const borderYDirection = ['bottom', 'top'] as const
+export const borderDirection = [...borderYDirection, ...borderXDirection, ''] as const
+export const borderProperties = ['color', 'radius', 'width'] as const
+
+export const cursorTypes = [
+  'not-allowed', 
+  'help', 
+  'pointer', 
+  'wait', 
+  ''
+] as const
+
+export type Value =
+  | number
+  | ''
+
+export type DynamicVariants = 
+  `${typeof colorVariants[number]}:${keyof IColors}` |
+  `border${Capitalize<typeof borderDirection[number]>}Width:${keyof IBorderRadius}` |
+  `border${Capitalize<typeof borderDirection[number]>}Color:${keyof IColors}` |
+  `borderRadius:${keyof IBorderRadius}` |
+  `border${Capitalize<typeof borderYDirection[number]>}${Capitalize<typeof borderXDirection[number]>}Radius:${keyof IBorderRadius}` |
+  `cursor:${typeof cursorTypes[number]}` |
+  `bg:${keyof IColors}` |
+  `scale:${Value}`
+
+export const createDynamicVariants = () => {
+  const dynamicVariants = {}
+
+  function createVariant(variantName: string, variantReturn: any) {
+    dynamicVariants[variantName] = variantReturn
+  }
+
+  colorVariants.forEach(variant => {
+    createVariant(variant, (theme, color: keyof IColors) => ({
+      [variant]: theme['colors'][color]
+    }))
+  })
+
+  borderDirection.forEach(direction => {
+    if (borderYDirection.includes(direction as any)) {
+      borderXDirection.forEach(y => {
+        const variant = `border${capitalize(direction)}${capitalize(y)}Radius`
+
+        createVariant(variant, (theme, value: keyof IBorderRadius) => ({
+          [variant]: theme['borderRadius'][value]
+        }))
+      })
+    }
+
+    borderProperties.forEach(property => {
+      const variant = `border${capitalize(direction)}${capitalize(property)}`
+
+      createVariant(variant, (theme, value: string) => ({
+        [variant]: property == 'color' ? theme['colors'][value] : theme['borderRadius'][value]
+      }))
+    })
+  })
+
+  createVariant('cursor', (theme, cursor: typeof cursorTypes[number]) => ({ cursor }))
+
+  createVariant('bg', (theme, color: keyof IColors) => ({ 
+    backgroundColor: theme['colors'][color] 
+  }))
+
+  createVariant('effect', (theme, effect: keyof IEffects) => theme['effects'][effect])
+
+  createVariant('scale', (theme, value: any) => ({
+    transform: typeof localStorage !== 'undefined' ? `scale(${value})` : [{ 'scale': Number(value) }]
+  }))
+
+  return dynamicVariants
+}
+
+export const dynamicVariants = createDynamicVariants()

package/src/lib/hashKey.ts

@@ -0,0 +1,12 @@
+import { sha256 } from 'js-sha256'
+
+const styleKey = '@styles-version'
+const version = require('../../package.json')?.version
+
+export const hashKey = (value: Array<any>): string => {
+  value.push({ [styleKey]: version })
+
+  const str = JSON.stringify(value)
+
+  return sha256(str)
+}

package/src/lib/hooks.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+import { ICSS } from '../types'
+import { getNestedStylesByKey } from './utils'
+import { useShallow } from 'zustand/react/shallow'
+import { ThemeStore, themeStore } from './themeStore'
+
+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])
+}
+
+export function useNestedStylesByKey<T extends string>(match: string, componentStyles: Partial<Record<T, ICSS>>) {
+  const styles = {
+    ...componentStyles
+  }
+
+  return useMemo(() => {
+    return getNestedStylesByKey(match, styles)
+  }, [styles])
+}
+
+type ThemeSelector<T extends Record<string, any>> = (store: ThemeStore) => T
+
+export const useTheme = <T extends Record<string, any>>(selector: ThemeSelector<T>): T => {
+  return themeStore(useShallow(selector))
+}
+
+export function useCompositionStyles<T extends string, C extends string>(
+  composition: Array<T>,
+  componentStyles: Partial<Record<C, ICSS>>
+): Partial<Record<T, ICSS>> {
+  const styles = {
+    ...componentStyles
+  }
+
+  return useMemo(() => {
+    const compositionStyles = {}
+
+    for (const element of composition) {
+      compositionStyles[element as string] = getNestedStylesByKey(element, styles)
+    }
+
+    return compositionStyles
+  }, [styles])
+}

package/src/lib/index.ts

@@ -0,0 +1,11 @@
+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'

package/src/lib/mediaQuery.ts

@@ -0,0 +1,70 @@
+import { Breakpoint } from '../types'
+
+export type Queries = {
+  up: (breakpoint: string) => string
+  down: (breakpoint: Breakpoint) => string
+  is: (breakpoint: string) => string
+  not: (breakpoint: string) => string
+}
+
+export type MediaQueries = Queries & {
+  renderToPlatformQuery: (props: Record<keyof Queries, any>) => string
+}
+
+function getBreakpointValue(breakpoint: any, breakpoints: any) {
+  if (breakpoints[breakpoint]) {
+    return breakpoints[breakpoint]
+  }
+
+  return Infinity
+}
+
+export function createMediaQueries<T extends any>(breakpoints: T): MediaQueries {
+  function getBreakpoint(breakpoint: any) {
+    return getBreakpointValue(breakpoint, breakpoints)
+  }
+
+  const queries: Queries = {
+    up: (breakpoint: any) => {
+      // Upwards of... (excluding)
+      const min = getBreakpoint(breakpoint)
+      return `@media screen and (min-width:${min}px)`
+    },
+    down: (breakpoint: any) => {
+      // Downwards of... (excluding)
+      const max = getBreakpoint(breakpoint)
+      return `@media screen and (max-width:${max}px)`
+    },
+    is: (breakpoint: any) => {
+      // Is media... (exact)
+      const value = getBreakpoint(breakpoint)
+      return `@media screen and (min-width:${value}px) and (max-width:${value}px)`
+    },
+    not: (breakpoint: any) => {
+      // Is NOT media... (exact)
+      const value = getBreakpoint(breakpoint)
+      return `@media not screen and (min-width:${value}px) and (max-width:${value}px)`
+    },
+  }
+
+  const renderToPlatformQuery = (props: Record<keyof Queries, any>) => {
+    let query = ''
+
+    if (props?.is) {
+      query = queries.not(props.is as never)
+    } else if (props?.not) {
+      query = queries.is(props.not as never)
+    } else if (props?.up) {
+      query = queries.down(props.up as never)
+    } else if (props?.down) {
+      query = queries.up(props.down as never)
+    }
+
+    return query
+  }
+
+  return {
+    ...queries,
+    renderToPlatformQuery,
+  }
+}

package/src/lib/minifier.ts

@@ -0,0 +1,20 @@
+import { compressToBase64, decompressFromBase64 } from 'lz-string'
+
+export function compress(value: any): any {
+  if (!value) return value
+  
+  return compressToBase64(JSON.stringify(value))
+}
+
+export function decompress(value: any): any {
+  if (!value) return value
+
+  const decoded = decompressFromBase64(value)
+
+  return JSON.parse(decoded)
+}
+
+export const minifier = {
+  compress,
+  decompress,
+}

package/src/lib/multiplierProperty.ts

@@ -0,0 +1,13 @@
+
+export function multiplierProperty<T extends string>(
+  base: number,
+  property: T,
+) {
+  return (multiplier: number | string) => {
+    const value = base * Number(multiplier)
+
+    return {
+      [property]: value,
+    }
+  }
+}

package/src/lib/spacing.ts

@@ -0,0 +1,83 @@
+import { ICSS } from '../types'
+import { spacingVariants, spacingShortVariants, SpacingVariants, SpacingShortVariants } from '../types/spacing'
+
+export type MultiplierFunction = (multiplier: number | string) => ICSS
+
+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
+}
+
+const shortMapValues = {
+  'x': 'Horizontal',
+  'y': 'Vertical',
+  'l': 'Left',
+  'r': 'Right',
+  't': 'Top',
+  'b': 'Bottom',
+  'm': 'margin',
+  'p': 'padding'
+}
+
+export function spacingFactory<T extends string>(
+  base: number,
+  spacingProperty: T,
+  isShort: boolean = false
+): any {
+  const property = isShort ? shortMapValues[spacingProperty as string] : spacingProperty
+  const positions = isShort ? spacingShortVariants : spacingVariants
+
+  const spacings = {
+    [`${spacingProperty}`]: (n: number | string) => ({
+      [`${property}`]: base * Number(n),
+    }),
+  }
+
+  for (const _position of positions) {
+    const position = isShort ? shortMapValues[_position] : _position
+    const key = `${spacingProperty}${_position}`
+
+    let getter = null
+
+    switch (position) {
+      case 'Horizontal':
+        getter = (value: number) => ({
+          [`${property}Left`]: value,
+          [`${property}Right`]: value,
+        })
+        break
+      case 'Vertical':
+        getter = (value: number) => ({
+          [`${property}Top`]: value,
+          [`${property}Bottom`]: value,
+        })
+        break
+      case '':
+        getter = (value: number) => ({
+          [`${property}Top`]: value,
+          [`${property}Left`]: value,
+          [`${property}Right`]: value,
+          [`${property}Bottom`]: value,
+        })
+        break
+      default:
+        getter = (value: number) => ({
+          [`${property}${position}`]: value,
+        })
+        break
+    }
+
+    spacings[key] = (n: number | string) => {
+      if (n == 'auto') return getter('auto')
+
+      const value = base * Number(n)
+
+      return getter(value)
+    }
+  }
+
+  return spacings
+}

package/src/lib/themeStore.ts

@@ -0,0 +1,14 @@
+import { create } from 'zustand'
+import { IAppVariants, ITheme } from '../types'
+
+export type ThemeStore = {
+  colorScheme: string | null
+  current: ITheme | null
+  variants: IAppVariants
+}
+
+export const themeStore = create<ThemeStore>(() => ({
+  colorScheme: null,
+  current: null,
+  variants: {},
+}))

package/src/lib/utils.ts

@@ -0,0 +1,74 @@
+import deepmerge from '@fastify/deepmerge'
+import { ICSS, StyledProp } from '../types'
+import { spacingShortVariants, spacingVariants } from '../types/spacing'
+
+export function capitalize(str: string, reverse = false) {
+  if (!str.length) return str
+  const firstChar = reverse ? str[0].toLowerCase() : str[0].toUpperCase()
+  return firstChar + str.substring(1)
+}
+
+export const spacingKeys = [
+  'gap',
+  'top',
+  'left',
+  'right',
+  'bottom',
+]
+
+for (const longProperty of ['padding', 'margin']) {
+  for (const variant of spacingVariants) {
+    spacingKeys.push(`${longProperty}${capitalize(variant)}`)
+  }
+}
+
+for (const shortProperty of ['p', 'm']) {
+  for (const shortVariant of spacingShortVariants) {
+    spacingKeys.push(shortProperty + shortVariant)
+  }
+}
+
+export function isSpacingKey(key: string) {
+  if (!key) return false
+
+  return spacingKeys?.includes(key)
+}
+
+export function getNestedStylesByKey<T extends string>(match: string, styles: Partial<Record<T, ICSS>>) {
+  const stylesByKey = {}
+
+  for (const [key, value] of Object.entries(styles)) {
+    if (key.startsWith(match)) {
+      const partName = capitalize(key.replace(match, ''), true)
+      stylesByKey[partName] = value
+    }
+  }
+
+  return stylesByKey
+}
+
+export const mergeStyles = (styles: Array<any>) => {
+  const style = styles?.filter(s => !!s)
+
+  return deepmerge({ all: true })(...style)
+}
+
+export const ignoredStyleKeys = [
+  'textAlign',
+  'textDecoration',
+  'textOverflow'
+]
+
+export const concatStyles = <T extends string>(styles: Array<StyledProp<T>>): StyledProp<T> => {
+  const results = []
+  
+  for (const style of styles) {
+    if (Array.isArray(style)) {
+      results.push(...style)
+    } else {
+      results.push(style)
+    }
+  }
+
+  return results as unknown as StyledProp<T>
+}