@symbo.ls/atoms 2.11.522 → 3.0.1

package/Media.js

@@ -1,217 +0,0 @@
-'use strict'
-
-import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
-import { getSystemGlobalTheme } from './Theme'
-
-export const keySetters = {
-  '@': (key, props, result, element, isSubtree) => applyMediaProps(
-    key, props, isSubtree ? result : (result && result.media), element
-  ),
-  ':': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '[': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '*': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '+': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '~': (key, props, result, element, isSubtree) => applySelectorProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '&': (key, props, result, element, isSubtree) => applyAndProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  '>': (key, props, result, element, isSubtree) => applyAndProps(
-    key, props, isSubtree ? result : (result && result.selector), element
-  ),
-  $: (key, props, result, element, isSubtree) => applyCaseProps(
-    key, props, isSubtree ? result : (result && result.case), element
-  ),
-  '-': (key, props, result, element, isSubtree) => applyVariableProps(
-    key, props, isSubtree ? result : (result && result.variable), element
-  ),
-  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(
-    key, props, isSubtree ? result : (result && result.case), element
-  ),
-  '!': (key, props, result, element, isSubtree) => applyConditionalFalsyProps(
-    key, props, isSubtree ? result : (result && result.case), element
-  )
-}
-
-const execClass = (key, props, result, element) => {
-  const { class: className } = element
-  const classnameExec = className[key]
-
-  if (typeof classnameExec !== 'function') return
-
-  let classExec = classnameExec({
-    props,
-    context: element.context,
-    state: element.state,
-    deps: element.deps
-  }, element.state, element.context)
-
-  if (isArray(classExec)) classExec = classExec.reduce((a, c) => merge(a, c), {})
-
-  for (const finalProp in classExec) {
-    result[finalProp] = classExec[finalProp]
-  }
-
-  return classExec
-}
-
-const convertPropsToClass = (props, result, element) => {
-  const propsClassObj = {}
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (setter) {
-      setter(key, props[key], propsClassObj, element, true)
-      continue
-    } else {
-      execClass(key, props, propsClassObj, element)
-    }
-  }
-
-  return propsClassObj
-}
-
-const applyMediaProps = (key, props, result, element) => {
-  const { context } = element
-  if (!context.designSystem || !context.designSystem.MEDIA) return
-  const globalTheme = getSystemGlobalTheme(element)
-  const { MEDIA } = context.designSystem
-  const mediaValue = MEDIA[key.slice(1)]
-  const generatedClass = convertPropsToClass(props, result, element)
-
-  const name = key.slice(1)
-  const isTheme = ['dark', 'light'].includes(name)
-  const matchesGlobal = name === globalTheme
-
-  if (globalTheme && isTheme) {
-    if (matchesGlobal) return merge(result, generatedClass)
-    return
-  }
-
-  const printValue = '@media ' + (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`)
-  const mediaKey = mediaValue ? printValue : key
-  result[mediaKey] = generatedClass
-  return result[mediaKey]
-}
-
-const applyAndProps = (key, props, result, element) => {
-  result[key] = convertPropsToClass(props, result, element)
-  return result[key]
-}
-
-const applySelectorProps = (key, props, result, element) => {
-  const selectorKey = `&${key}`
-  result[selectorKey] = convertPropsToClass(props, result, element)
-  return result[selectorKey]
-}
-
-const applyCaseProps = (key, props, result, element) => {
-  const { CASES } = element.context && element.context.designSystem
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey]
-  if (!CASES[caseKey] && !isPropTrue) return
-  return merge(result, convertPropsToClass(props, result, element))
-}
-
-const applyVariableProps = (key, props, result, element) => {
-  result[key] = props
-  return result
-}
-
-const applyConditionalCaseProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
-  if (!isPropTrue) return // remove classname if not here
-  return overwriteDeep(result, convertPropsToClass(props, result, element))
-}
-
-const applyConditionalFalsyProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
-  if (!isPropTrue) return overwriteDeep(result, convertPropsToClass(props, result, element))
-}
-
-const applyTrueProps = (props, result, element) => merge(result, convertPropsToClass(props, result, element))
-
-const beforeClassAssign = (element, s, ctx) => {
-  const { props, class: className, context } = element
-
-  const CLASS_NAMES = {
-    media: {},
-    selector: {},
-    case: {},
-    variable: {}
-  }
-
-  if (!context) return
-  const globalTheme = context.designSystem.globalTheme
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (globalTheme) {
-      if (key === 'theme' && !props.themeModifier) {
-        props.update({
-          themeModifier: globalTheme
-        }, {
-          preventListeners: true,
-          preventRecursive: true,
-          isForced: true,
-          preventDefineUpdate: true
-        })
-      }
-    }
-    if (setter) setter(key, props[key], CLASS_NAMES, element)
-    else if (key === 'class') {
-      const value = element.props.class
-      if (!element.call('isString', value)) return
-      const classArr = value.split(' ')
-      const scratchClasses = ctx.designSystem.CLASS
-      CLASS_NAMES.class = classArr.reduce((accumulator, current) => {
-        const scratchClass = scratchClasses[current]
-        return merge(accumulator, scratchClass)
-      }, {})
-    } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
-  }
-
-  // override props
-  // if (props['^']) {
-  //   for (const key in props['^']) {
-  //     execClass(key, props, CLASS_NAMES, element)
-  //   }
-  // }
-
-  const parentProps = element.parent && element.parent.props
-  if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
-    element.setProps({
-      spacingRatio: parentProps.spacingRatio,
-      inheritSpacingRatio: true
-    }, {
-      preventListeners: true,
-      preventRecursive: true,
-      isForced: true,
-      preventDefineUpdate: true
-    })
-  }
-
-  overwriteShallow(className, CLASS_NAMES)
-}
-
-export const Media = {
-  class: {
-    case: (el, s) => {
-      return {
-        //
-      }
-    }
-  },
-  on: { beforeClassAssign }
-}

package/Overflow.js

@@ -1,19 +0,0 @@
-'use strict'
-
-export const Overflow = {
-  class: {
-    overflow: ({ props, deps }) => !deps.isUndefined(props.overflow) && ({
-      overflow: props.overflow,
-      scrollBehavior: 'smooth'
-    }),
-    overflowX: ({ props, deps }) => !deps.isUndefined(props.overflowX) && ({
-      overflowX: props.overflowX
-    }),
-    overflowY: ({ props, deps }) => !deps.isUndefined(props.overflowY) && ({
-      overflowY: props.overflowY
-    }),
-    overscrollBehavior: ({ props, deps }) => !deps.isUndefined(props.overscrollBehavior) && ({
-      overscrollBehavior: props.overscrollBehavior
-    })
-  }
-}

package/Position.js

@@ -1,42 +0,0 @@
-'use strict'
-
-import { getSpacingByKey } from '@symbo.ls/scratch'
-
-export const Position = {
-  deps: { getSpacingByKey },
-
-  class: {
-    position: ({ props }) => props.position && ({ position: props.position }),
-    inset: ({ props, deps, context }) => {
-      const { inset } = props
-      if (context.utils.isNumber(inset)) return ({ inset })
-      if (!context.utils.isString(inset)) return
-      return { inset: inset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k).join(' ') }
-    },
-
-    left: ({ props, deps }) => deps.getSpacingByKey(props.left, 'left'),
-    top: ({ props, deps }) => deps.getSpacingByKey(props.top, 'top'),
-    right: ({ props, deps }) => deps.getSpacingByKey(props.right, 'right'),
-    bottom: ({ props, deps }) => deps.getSpacingByKey(props.bottom, 'bottom'),
-
-    verticalInset: ({ props, deps }) => {
-      const { verticalInset } = props
-      if (typeof verticalInset !== 'string') return
-      const vi = verticalInset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k)
-      return {
-        top: vi[0],
-        bottom: vi[1] || vi[0]
-      }
-    },
-
-    horizontalInset: ({ props, deps }) => {
-      const { horizontalInset } = props
-      if (typeof horizontalInset !== 'string') return
-      const vi = horizontalInset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k)
-      return {
-        left: vi[0],
-        right: vi[1] || vi[0]
-      }
-    }
-  }
-}

package/Pseudo.js

@@ -1,7 +0,0 @@
-'use strict'
-
-export const Pseudo = {
-  class: {
-    content: ({ props }) => props.content && ({ content: props.content })
-  }
-}

package/Timing.js

@@ -1,39 +0,0 @@
-'use strict'
-
-import {
-  getTimingFunction,
-  splitTransition,
-  transformDuration
-} from '@symbo.ls/scratch'
-
-import { isUndefined } from '@domql/utils'
-
-export const Timing = {
-  deps: {
-    getTimingFunction,
-    splitTransition,
-    transformDuration
-  },
-
-  class: {
-    transition: ({ props, deps }) => !isUndefined(props.transition) && ({
-      transition: deps.splitTransition(props.transition)
-    }),
-    willChange: ({ props }) => !isUndefined(props.willChange) && ({
-      willChange: props.willChange
-    }),
-    transitionDuration: ({ props, deps }) => !isUndefined(props.transitionDuration) && ({
-      transitionDuration: deps.transformDuration(props.transitionDuration)
-    }),
-    transitionDelay: ({ props, deps }) => !isUndefined(props.transitionDelay) && ({
-      transitionDelay: deps.transformDuration(props.transitionDelay)
-    }),
-    transitionTimingFunction: ({ props, deps }) => !isUndefined(props.transitionTimingFunction) && ({
-      transitionTimingFunction: deps.getTimingFunction(props.transitionTimingFunction)
-    }),
-    transitionProperty: ({ props }) => !isUndefined(props.transitionProperty) && ({
-      transitionProperty: props.transitionProperty,
-      willChange: props.transitionProperty
-    })
-  }
-}

package/Transform.js

@@ -1,12 +0,0 @@
-'use strict'
-
-import { isUndefined } from '@domql/utils'
-
-export const Transform = {
-  class: {
-    zoom: ({ props }) => !isUndefined(props.zoom) && ({ zoom: props.zoom }),
-    transform: ({ props }) => !isUndefined(props.transform) && ({ transform: props.transform }),
-    transformOrigin: ({ props }) => !isUndefined(props.transformOrigin) && ({ transformOrigin: props.transformOrigin }),
-    backfaceVisibility: ({ props }) => !isUndefined(props.backfaceVisibility) && ({ backfaceVisibility: props.backfaceVisibility })
-  }
-}

package/XYZ.js

@@ -1,11 +0,0 @@
-'use strict'
-
-import { isUndefined } from '@domql/utils'
-
-export const XYZ = {
-  class: {
-    zIndex: ({ props }) => !isUndefined(props.zIndex) && ({ zIndex: props.zIndex }),
-    perspective: ({ props }) => !isUndefined(props.perspective) && ({ perspective: props.perspective }),
-    perspectiveOrigin: ({ props }) => !isUndefined(props.perspectiveOrigin) && ({ perspectiveOrigin: props.perspectiveOrigin })
-  }
-}