@symbo.ls/atoms 2.29.5 → 2.29.7

package/Media.js

@@ -1,45 +1,93 @@
 'use strict'
 
 import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
-import { getSystemGlobalTheme } from './Theme'
+import { getSystemGlobalTheme } from './Box'
 
 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
-  )
+  '@': (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) => {
@@ -48,14 +96,19 @@ const execClass = (key, props, result, element) => {
 
   if (typeof classnameExec !== 'function') return
 
-  let classExec = classnameExec({
-    props,
-    context: element.context,
-    state: element.state,
-    deps: element.deps
-  }, element.state, element.context)
+  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), {})
+  if (isArray(classExec))
+    classExec = classExec.reduce((a, c) => merge(a, c), {})
 
   for (const finalProp in classExec) {
     result[finalProp] = classExec[finalProp]
@@ -97,7 +150,9 @@ const applyMediaProps = (key, props, result, element) => {
     return
   }
 
-  const printValue = '@media ' + (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`)
+  const printValue =
+    '@media ' +
+    (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`)
   const mediaKey = mediaValue ? printValue : key
   result[mediaKey] = generatedClass
   return result[mediaKey]
@@ -129,20 +184,28 @@ const applyVariableProps = (key, props, result, element) => {
 
 const applyConditionalCaseProps = (key, props, result, element) => {
   const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
+  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 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 applyTrueProps = (props, result, element) =>
+  merge(result, convertPropsToClass(props, result, element))
 
-const beforeClassAssign = (element, s, ctx) => {
+export const beforeClassAssign = (element, s, ctx) => {
   const { props, class: className, context } = element
 
   const CLASS_NAMES = {
@@ -159,14 +222,17 @@ const beforeClassAssign = (element, s, ctx) => {
     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
-        })
+        props.update(
+          {
+            themeModifier: globalTheme
+          },
+          {
+            preventListeners: true,
+            preventRecursive: true,
+            isForced: true,
+            preventDefineUpdate: true
+          }
+        )
       }
     }
     if (setter) setter(key, props[key], CLASS_NAMES, element)
@@ -190,28 +256,24 @@ const beforeClassAssign = (element, s, ctx) => {
   // }
 
   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
-    })
+  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/Picture.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { getSystemGlobalTheme } from './Theme'
+import { getSystemGlobalTheme } from './Box'
 
 export const Picture = {
   deps: { getSystemGlobalTheme },
@@ -9,14 +9,15 @@ export const Picture = {
   childExtend: {
     tag: 'source',
     attr: {
-      media: (element) => {
+      media: element => {
         const { props, key, context, deps } = element
         const { MEDIA } = context.designSystem
         const globalTheme = deps.getSystemGlobalTheme(element)
         const mediaName = (props.media || key).slice(1)
 
         if (mediaName === globalTheme) return '(min-width: 0px)'
-        else if (mediaName === 'dark' || mediaName === 'light') return '(max-width: 0px)'
+        else if (mediaName === 'dark' || mediaName === 'light')
+          return '(max-width: 0px)'
 
         return MEDIA[mediaName]
       },

package/{Shape/style.js → Shape.js}

@@ -1,28 +1,42 @@
 'use strict'
 
 import { getActiveConfig, getColor } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
-import { Timing } from '../Timing'
+import { Box } from './Box'
 
 const CONFIG = getActiveConfig()
 
 export const depth = {
-  4: { boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.UNIT.default} 4${CONFIG.UNIT.default}` },
-  6: { boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.UNIT.default} 6${CONFIG.UNIT.default}` },
-  10: { boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.UNIT.default} 10${CONFIG.UNIT.default}` },
-  16: { boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.UNIT.default} 16${CONFIG.UNIT.default}` },
-  26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}` },
-  42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}` }
+  4: {
+    boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.UNIT.default} 4${CONFIG.UNIT.default}`
+  },
+  6: {
+    boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.UNIT.default} 6${CONFIG.UNIT.default}`
+  },
+  10: {
+    boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.UNIT.default} 10${CONFIG.UNIT.default}`
+  },
+  16: {
+    boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.UNIT.default} 16${CONFIG.UNIT.default}`
+  },
+  26: {
+    boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}`
+  },
+  42: {
+    boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}`
+  }
 }
 
 const getComputedBackgroundColor = ({ props }) => {
-  return getColor(props.shapeDirectionColor) ||
+  return (
+    getColor(props.shapeDirectionColor) ||
     getColor(props.borderColor) ||
     getColor(props.backgroundColor) ||
     getColor(props.background)
+  )
 }
 
 const inheritTransition = ({ props, deps }) => {
-  const exec = Timing.class.transition({ props, deps })
+  const exec = Box.class.transition({ props, deps })
   return exec && exec.transition
 }
 
@@ -168,10 +182,14 @@ export const SHAPES = {
       transformOrigin: '50% 50%',
       transition: inheritTransition({ props, deps }),
       transitionProperty: 'background'
-
     },
     '&:before': {
-      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props, deps })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props, deps })} 25%, transparent 25%)`
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({
+        props,
+        deps
+      })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(
+        { props, deps }
+      )} 25%, transparent 25%)`
     },
     '&:after': {
       background: getComputedBackgroundColor({ props, deps }),

package/index.js

@@ -1,27 +1,16 @@
 'use strict'
 
-export * from './Block'
-export * from './Direction'
+export * from './Box'
 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 './Hgroup'
-export * from './Transform'
-export * from './XYZ'
-export * from './Animation'

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.29.5",
+  "version": "2.29.7",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "0fc6ec7b96b836e2c61a79253a57b63da13c41e2",
+  "gitHead": "c74c4ee77eaebbd1a58ce94b258175f59b7572f4",
   "dependencies": {
-    "@domql/state": "^2.29.5",
-    "@domql/utils": "^2.29.5",
-    "@symbo.ls/emotion": "^2.29.5",
-    "@symbo.ls/scratch": "^2.29.5"
+    "@domql/state": "^2.29.7",
+    "@domql/utils": "^2.29.7",
+    "@symbo.ls/emotion": "^2.29.7",
+    "@symbo.ls/scratch": "^2.29.7"
   },
   "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
-    })
-  }
-}