@symbo.ls/atoms 2.11.522 → 3.0.1

package/Theme.js

@@ -1,17 +1,7 @@
 'use strict'
 
-import {
-  getMediaTheme,
-  getMediaColor,
-  transformTextStroke,
-  transformShadow,
-  transformBoxShadow,
-  transformBorder,
-  transformBackgroundImage
-} from '@symbo.ls/scratch'
-
 import { depth } from './Shape/style'
-import { isUndefined, isString } from '@domql/utils'
+import { isUndefined } from '@domql/utils'
 
 export const getSystemGlobalTheme = ({ context, state }) => {
   const rootState = state && state.root
@@ -20,185 +10,10 @@ export const getSystemGlobalTheme = ({ context, state }) => {
 
 export const Theme = {
   deps: {
-    depth,
-    getSystemGlobalTheme,
-    getMediaTheme,
-    getMediaColor,
-    transformTextStroke,
-    transformShadow,
-    transformBoxShadow,
-    transformBorder,
-    transformBackgroundImage
+    depth
   },
 
   class: {
-    depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth],
-
-    theme: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.theme) return
-      const hasSubtheme = props.theme.includes(' ') && !props.theme.includes('@')
-      const globalThemeForced = `@${props.themeModifier || globalTheme}`
-      if (hasSubtheme) {
-        const themeAppliedInVal = props.theme.split(' ')
-        themeAppliedInVal.splice(1, 0, globalThemeForced)
-        return deps.getMediaTheme(themeAppliedInVal)
-      } else if (props.theme.includes('@{globalTheme}')) props.theme.replace('@{globalTheme}', globalThemeForced)
-      return deps.getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
-    },
-
-    color: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.color) return
-      return {
-        color: deps.getMediaColor(props.color, globalTheme)
-      }
-    },
-
-    background: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.background) return
-      return {
-        background: deps.getMediaColor(props.background, globalTheme)
-      }
-    },
-
-    backgroundColor: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.backgroundColor) return
-      return {
-        backgroundColor: deps.getMediaColor(props.backgroundColor, globalTheme)
-      }
-    },
-
-    backgroundImage: (element, s, context) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      let val = props.backgroundImage
-      if (!val) return
-      const file = context.files && context.files[val]
-      if (file && file.content) val = file.content.src
-      return ({
-        backgroundImage: deps.transformBackgroundImage(val, globalTheme)
-      })
-    },
-    backgroundSize: ({ props }) => !isUndefined(props.backgroundSize)
-      ? ({
-          backgroundSize: props.backgroundSize
-        })
-      : null,
-    backgroundPosition: ({ props }) => !isUndefined(props.backgroundPosition)
-      ? ({
-          backgroundPosition: props.backgroundPosition
-        })
-      : null,
-    backgroundRepeat: ({ props }) => !isUndefined(props.backgroundRepeat)
-      ? ({
-          backgroundRepeat: props.backgroundRepeat
-        })
-      : null,
-
-    textStroke: ({ props, deps }) => !isUndefined(props.textStroke)
-      ? ({
-          WebkitTextStroke: deps.transformTextStroke(props.textStroke)
-        })
-      : null,
-
-    outline: ({ props, deps }) => !isUndefined(props.outline) && ({
-      outline: deps.transformBorder(props.outline)
-    }),
-    outlineOffset: ({ props, deps }) => deps.transformSizeRatio('outlineOffset', props),
-
-    border: ({ props, deps }) => !isUndefined(props.border) && ({
-      border: deps.transformBorder(props.border)
-    }),
-
-    borderColor: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.borderColor) return
-      return {
-        borderColor: deps.getMediaColor(props.borderColor, globalTheme)
-      }
-    },
-    borderStyle: ({ props }) => !isUndefined(props.borderStyle) && ({
-      borderStyle: props.borderStyle
-    }),
-
-    borderLeft: ({ props, deps }) => !isUndefined(props.borderLeft) && ({
-      borderLeft: deps.transformBorder(props.borderLeft)
-    }),
-    borderTop: ({ props, deps }) => !isUndefined(props.borderTop) && ({
-      borderTop: deps.transformBorder(props.borderTop)
-    }),
-    borderRight: ({ props, deps }) => !isUndefined(props.borderRight) && ({
-      borderRight: deps.transformBorder(props.borderRight)
-    }),
-    borderBottom: ({ props, deps }) => !isUndefined(props.borderBottom) && ({
-      borderBottom: deps.transformBorder(props.borderBottom)
-    }),
-
-    shadow: (element) => {
-      const { props, deps } = element
-      const globalTheme = deps.getSystemGlobalTheme(element)
-      if (!props.backgroundImage) return
-      return ({
-        boxShadow: deps.transformShadow(props.shadow, globalTheme)
-      })
-    },
-
-    // boxShadow: ({ props, deps }) => isString(props.boxShadow) && ({
-    //   boxShadow: deps.transformBoxShadow(props.boxShadow)
-    // }),
-
-    boxShadow: (element, state, context) => {
-      const { props, deps } = element
-      if (!isString(props.boxShadow)) return
-      const [val, hasImportant] = props.boxShadow.split('!importan')
-      const globalTheme = getSystemGlobalTheme(element)
-      const important = hasImportant ? ' !important' : ''
-      return {
-        boxShadow: deps.transformBoxShadow(val.trim(), globalTheme) + important
-      }
-    },
-
-    textShadow: ({ props, deps, context }) => !isUndefined(props.textShadow) && ({
-      textShadow: deps.transformBoxShadow(props.textShadow, context.designSystem.globalTheme)
-    }),
-
-    backdropFilter: ({ props, deps }) => !isUndefined(props.backdropFilter) && ({
-      backdropFilter: props.backdropFilter
-    }),
-
-    caretColor: ({ props }) => !isUndefined(props.caretColor) && ({
-      caretColor: props.caretColor
-    }),
-
-    opacity: ({ props }) => !isUndefined(props.opacity) && ({
-      opacity: props.opacity
-    }),
-    visibility: ({ props }) => !isUndefined(props.visibility) && ({
-      visibility: props.visibility
-    }),
-
-    columnRule: ({ props, deps }) => !isUndefined(props.columnRule) && ({
-      columnRule: deps.transformBorder(props.columnRule)
-    }),
-
-    filter: ({ props, deps }) => !isUndefined(props.filter) && ({
-      filter: props.filter
-    }),
-
-    mixBlendMode: ({ props, deps }) => !isUndefined(props.mixBlendMode) && ({
-      mixBlendMode: props.mixBlendMode
-    }),
-
-    appearance: ({ props }) => !isUndefined(props.appearance) && ({
-      appearance: props.appearance
-    })
+    depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth]
   }
 }

package/Video.js

@@ -3,7 +3,7 @@
 export const Video = {
   tag: 'video',
 
-  childExtend: {
+  childExtends: {
     tag: 'source',
     attr: {
       src: ({ props }) => props.src,

package/index.js

@@ -1,26 +1,14 @@
 'use strict'
 
 export * from './Block'
-export * from './Direction'
-export * from './Flex'
-export * from './Grid'
 export * from './Img'
 export * from './Form'
-export * from './Media'
 export * from './Iframe'
-export * from './Interaction'
 export * from './InteractiveComponent'
-export * from './Overflow'
-export * from './Collection'
-export * from './Position'
 export * from './Picture'
-export * from './Pseudo'
 export * from './Svg'
 export * from './Shape'
 export * from './Video'
 export * from './Theme'
 export * from './Text'
-export * from './Timing'
-export * from './Transform'
-export * from './XYZ'
-export * from './Animation'
+export * from './Box'

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.522",
+  "version": "3.0.1",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "f0cf0f8e16c7cac278886a322e85cb8d8188ca24",
+  "gitHead": "a4e7f586f7e4f60bd7b6a8388bdacc3ae1879433",
   "dependencies": {
     "@domql/state": "^2.5.0",
     "@domql/utils": "^2.5.0",
-    "@symbo.ls/emotion": "^2.11.515",
-    "@symbo.ls/scratch": "^2.11.522"
+    "@symbo.ls/emotion": "^3.0.1",
+    "@symbo.ls/scratch": "^3.0.1"
   },
   "source": "src/index.js",
   "devDependencies": {

package/Animation.js

@@ -1,57 +0,0 @@
-'use strict'
-
-import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
-import { isObject } from '@domql/utils'
-import { emotion } from '@symbo.ls/emotion'
-
-const applyAnimationProps = (animation, element) => {
-  const { emotion: ctxEmotion } = element.context
-  const { keyframes } = ctxEmotion || emotion
-  if (isObject(animation)) return { animationName: keyframes(animation) }
-  const { ANIMATION } = element.context && element.context.designSystem
-  const record = ANIMATION[animation]
-  return keyframes(record)
-}
-
-const props = {
-  animation: (el) => el.props.animation && {
-    animationName: el.deps.applyAnimationProps(el.props.animation, el),
-    animationDuration: el.deps.getTimingByKey(el.props.animationDuration || 'A').timing,
-    animationDelay: el.deps.getTimingByKey(el.props.animationDelay || '0s').timing,
-    animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || 'ease'),
-    animationFillMode: el.props.animationFillMode || 'both',
-    animationPlayState: el.props.animationPlayState,
-    animationDirection: el.props.animationDirection
-  },
-  animationName: (el) => el.props.animationName && {
-    animationName: el.deps.applyAnimationProps(el.props.animationName, el)
-  },
-  animationDuration: ({ props, deps }) => props.animationDuration && ({
-    animationDuration: deps.getTimingByKey(props.animationDuration).timing
-  }),
-  animationDelay: ({ props, deps }) => props.animationDelay && ({
-    animationDelay: deps.getTimingByKey(props.animationDelay).timing
-  }),
-  animationTimingFunction: ({ props, deps }) => props.animationTimingFunction && ({
-    animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
-  })
-}
-
-export const Animation = {
-  deps: { isObject, getTimingByKey, getTimingFunction, applyAnimationProps },
-  class: {
-    ...props,
-    animationFillMode: ({ props }) => props.animationFillMode && ({
-      animationFillMode: props.animationFillMode
-    }),
-    animationPlayState: ({ props }) => props.animationPlayState && ({
-      animationPlayState: props.animationPlayState
-    }),
-    animationIterationCount: ({ props }) => props.animationIterationCount && ({
-      animationIterationCount: props.animationIterationCount || 1
-    }),
-    animationDirection: ({ props }) => props.animationDirection && ({
-      animationDirection: props.animationDirection
-    })
-  }
-}

package/Collection.js

@@ -1,210 +0,0 @@
-'use strict'
-
-import { isState, getChildStateInKey } from '@domql/state'
-import { isString, isNumber, isNot, isArray, isObject, isObjectLike, exec, deepClone, addAdditionalExtend } from '@domql/utils'
-
-export const Collection = {
-  define: {
-    $collection: (param, el, state) => {
-      const { __ref: ref } = el
-      const { children: childrenProps, childrenAs, childExtends } = (el.props || {})
-      const children = childrenProps && exec(childrenProps, el, state)
-
-      const childrenAsDefault = childrenAs || 'props'
-
-      if (children) {
-        if (isObject(children)) {
-          if (children.$$typeof) return el.call('renderReact', children, el)
-          param = deepClone(children)
-          param = Object.keys(param).map(v => {
-            const val = param[v]
-            return addAdditionalExtend(v, val)
-          })
-        } else if (isArray(children)) {
-          param = deepClone(children)
-          if (childrenAsDefault || childrenAsDefault !== 'element') {
-            param = param.map(v => ({
-              extend: childExtends,
-              [childrenAsDefault]: isObjectLike(v) ? v : childrenAsDefault === 'state' ? { value: v } : { text: v }
-            }))
-          }
-        } else if (isString(children) || isNumber(children)) {
-          el.removeContent()
-          el.content = { text: param }
-          return
-        }
-      }
-
-      if (!param) return
-
-      const filterReact = param.filter(v => !v.$$typeof)
-      if (filterReact.length !== param.length) {
-        const extractedReactComponents = param.filter(v => v.$$typeof)
-        el.call('renderReact', extractedReactComponents, el)
-      } param = filterReact
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-      if (isState(param)) param = param.parse()
-      if (isNot(param)('array', 'object')) return
-
-      param = deepClone(param)
-
-      if (ref.__collectionCache) {
-        const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache)
-        if (equals) {
-          ref.__noCollectionDifference = true
-          return
-        } else {
-          ref.__collectionCache = deepClone(param)
-          delete ref.__noCollectionDifference
-        }
-      } else {
-        ref.__collectionCache = deepClone(param)
-      }
-
-      const obj = {
-        tag: 'fragment',
-        props: {
-          ignoreChildProps: true,
-          childProps: el.props && el.props.childProps
-        }
-      }
-
-      for (const key in param) {
-        const value = param[key]
-        if (value) obj[key] = isObjectLike(value) ? value : { value }
-      }
-
-      el.removeContent()
-      el.content = obj
-
-      // return deepClone(param)
-    },
-
-    $setCollection: (param, el, state) => {
-      if (!param) return
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-
-      const data = (isArray(param) ? param : isObject(param) ? Object.values(param) : [])
-        .map(item => !isObjectLike(item)
-          ? { props: { value: item } }
-          : item)
-
-      if (data.length) {
-        const t = setTimeout(() => {
-          el.set({ tag: 'fragment', ...data }, { preventDefineUpdate: '$setCollection' })
-          clearTimeout(t)
-        })
-      }
-
-      return data
-    },
-
-    $stateCollection: (param, el, state, ctx) => {
-      const { children, childrenAs } = (el.props || {})
-      if (!param || children || childrenAs) return
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-      if (isState(param)) param = param.parse()
-      if (isNot(param)('array', 'object')) return
-
-      const { __ref: ref } = el
-      param = deepClone(param)
-
-      if (ref.__stateCollectionCache) {
-        const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache)
-        if (equals) {
-          ref.__noCollectionDifference = true
-          return
-        } else {
-          ref.__stateCollectionCache = deepClone(param)
-          delete ref.__noCollectionDifference
-        }
-      } else {
-        ref.__stateCollectionCache = deepClone(param)
-      }
-
-      const obj = {
-        tag: 'fragment',
-        props: {
-          ignoreChildProps: true,
-          childProps: el.props && el.props.childProps
-        }
-      }
-
-      for (const key in param) {
-        const value = param[key]
-        if (value) obj[key] = { state: isObjectLike(value) ? value : { value } }
-      }
-
-      el.removeContent()
-      el.content = obj
-
-      // return deepClone(param)
-    },
-
-    $propsCollection: (param, el, state) => {
-      const { children, childrenAs } = (el.props || {})
-      if (!param || children || childrenAs) return
-
-      if (isString(param)) {
-        if (param === 'state') param = state.parse()
-        else param = getChildStateInKey(param, state)
-      }
-      if (isState(param)) param = param.parse()
-      if (isNot(param)('array', 'object')) return
-
-      const { __ref: ref } = el
-      param = deepClone(param)
-
-      if (ref.__propsCollectionCache) {
-        const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache) // eslint-disable-line
-        if (equals) {
-          ref.__noCollectionDifference = true
-          return
-        } else {
-          ref.__propsCollectionCache = deepClone(param)
-          delete ref.__noCollectionDifference
-        }
-      } else {
-        ref.__propsCollectionCache = deepClone(param)
-      }
-
-      const obj = {
-        tag: 'fragment',
-        props: {
-          ignoreChildProps: true,
-          childProps: el.props && el.props.childProps
-        }
-      }
-
-      for (const key in param) {
-        const value = param[key]
-        if (value) obj[key] = { props: isObjectLike(value) ? value : { value } }
-      }
-
-      el.removeContent()
-      el.content = obj
-
-      // const set = () => {
-      //   el.set(obj, { preventDefineUpdate: '$propsCollection' })
-      // }
-
-      // if (el.props && el.props.lazyLoad) {
-      //   window.requestAnimationFrame(set)
-      // } else set()
-
-      // return deepClone(param)
-    }
-  }
-}

package/Direction.js

@@ -1,10 +0,0 @@
-'use strict'
-
-export const Direction = {
-  props: {
-    direction: 'ltr'
-  },
-  class: {
-    direction: ({ props }) => ({ direction: props.direction })
-  }
-}

package/Flex.js

@@ -1,29 +0,0 @@
-'use strict'
-
-import { isString } from '@domql/utils'
-
-export const Flex = {
-  props: {
-    display: 'flex'
-  },
-
-  class: {
-    flow: ({ props }) => {
-      const { flow, reverse } = props
-      if (!isString(flow)) return
-      let [direction, wrap] = (flow || 'row').split(' ')
-      if (flow.startsWith('x') || flow === 'row') direction = 'row'
-      if (flow.startsWith('y') || flow === 'column') direction = 'column'
-      return {
-        flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
-      }
-    },
-
-    wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }),
-    align: ({ props }) => {
-      if (!isString(props.align)) return
-      const [alignItems, justifyContent] = props.align.split(' ')
-      return { alignItems, justifyContent }
-    }
-  }
-}

package/Grid.js

@@ -1,29 +0,0 @@
-'use strict'
-
-import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
-
-export const Grid = {
-  deps: { getSpacingBasedOnRatio },
-
-  props: { display: 'grid' },
-
-  class: {
-    area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
-    template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
-    templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
-
-    column: ({ props }) => props.column ? ({ gridColumn: props.column }) : null,
-    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
-    templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null,
-    autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null,
-    columnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
-
-    row: ({ props }) => props.row ? ({ gridRow: props.row }) : null,
-    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
-    templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
-    autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
-    rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
-
-    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null
-  }
-}

package/Interaction.js

@@ -1,17 +0,0 @@
-'use strict'
-
-export const Interaction = {
-  class: {
-    userSelect: ({ props }) => props.userSelect && ({ userSelect: props.userSelect }),
-    pointerEvents: ({ props }) => props.pointerEvents && ({ pointerEvents: props.pointerEvents }),
-    cursor: (el, s, ctx) => {
-      let val = el.props.cursor
-      if (!val) return
-
-      const file = ctx.files && ctx.files[val]
-      if (file && file.content) val = `url(${file.content.src})`
-
-      return ({ cursor: val })
-    }
-  }
-}