smbls 0.15.22 → 0.15.24

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.15.22",
+  "version": "0.15.24",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Box.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, Interaction, XYZ } from './atoms'
+import { Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, Interaction, XYZ, Animation } from './atoms'
 
 const PropsCSS = {
   class: {
@@ -9,5 +9,5 @@ const PropsCSS = {
 }
 
 export const Box = {
-  extend: [Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, PropsCSS, Interaction, XYZ]
+  extend: [Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Media, PropsCSS, Interaction, XYZ, Animation]
 }

package/src/atoms/Animation.js

@@ -1,42 +1,38 @@
 'use strict'
 
-import { merge } from '@domql/utils'
-import { getTimingFunction } from '@symbo.ls/scratch'
-import { convertPropsToClass } from './Media'
-import { transformDuration } from './Timing'
+import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
+import { isObject } from '@domql/utils'
+import { convertPropsToClass } from './Media' // eslint-disable-line no-unused-vars
+import createEmotion from '@symbo.ls/create-emotion'
+const { keyframes } = createEmotion
 
-const applyAnimationProps = (key, props, result, element) => {
+const applyAnimationProps = (animation, element) => {
+  if (isObject(animation)) return { animationName: keyframes(animation) }
   const { ANIMATION } = element.context && element.context.SYSTEM
-  const mediaName = ANIMATION[key.slice(1)]
-  const generatedClass = convertPropsToClass(props, result, element)
-
-  const rootState = element.__root ? element.__root.state : element.state
-  const { globalTheme } = rootState
-  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 mediaKey = `@media screen and ${mediaName}`
-  result[mediaKey] = generatedClass
-  return result[mediaKey]
+  const record = ANIMATION[animation]
+  return keyframes(record)
 }
 
 export const Animation = {
   class: {
-    animation: ({ props }) => props.animation && ({
-      animation: applyAnimationProps(props.animation)
-    }),
+    animation: (el) => el.props.animation && {
+      animationName: applyAnimationProps(el.props.animation, el),
+      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
+      animationDelay: getTimingByKey(el.props.animationDelay).timing || '0s',
+      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
+      animationFillMode: el.props.animationFillMode || 'both',
+      animationPlayState: el.props.animationPlayState,
+      animationDirection: el.props.animationDirection
+    },
+    animationName: (el) => el.props.animationName && {
+      animationName: applyAnimationProps(el.props.animationName, el)
+    },
 
     animationDuration: ({ props }) => props.animationDuration && ({
-      animationDuration: transformDuration(props.animationDuration)
+      animationDuration: getTimingByKey(props.animationDuration).timing
     }),
     animationDelay: ({ props }) => props.animationDelay && ({
-      animationDelay: transformDuration(props.animationDelay)
+      animationDelay: getTimingByKey(props.animationDelay).timing
     }),
     animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
       animationTimingFunction: getTimingFunction(props.animationTimingFunction)
@@ -44,9 +40,14 @@ export const Animation = {
     animationFillMode: ({ props }) => props.animationFillMode && ({
       animationFillMode: props.animationFillMode
     }),
-    animationProperty: ({ props }) => props.animationProperty && ({
-      animationProperty: props.animationProperty,
-      willChange: props.animationProperty
+    animationPlayState: ({ props }) => props.animationPlayState && ({
+      animationPlayState: props.animationPlayState
+    }),
+    animationIterationCount: ({ props }) => props.animationIterationCount && ({
+      animationIterationCount: props.animationIterationCount || 1
+    }),
+    animationDirection: ({ props }) => props.animationDirection && ({
+      animationDirection: props.animationDirection
     })
   }
 }

package/src/atoms/Block.js

@@ -135,7 +135,9 @@ export const Block = {
         ...getSpacingByKey(minHeight, 'minHeight'),
         ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
       }
-    }
+    },
+
+    columns: ({ props }) => props.columns && ({ columns: props.columns })
   }
 }
 

package/src/atoms/Interaction.js

@@ -2,6 +2,7 @@
 
 export const Interaction = {
   class: {
+    userSelect: ({ props }) => props.userSelect && ({ userSelect: props.userSelect }),
     pointerEvents: ({ props }) => props.pointerEvents && ({ pointerEvents: props.pointerEvents }),
     cursor: ({ props }) => props.cursor && ({ cursor: props.cursor })
   }
@@ -43,7 +44,7 @@ export const Clickable = {
 export const Focusable = {
   props: {
     border: 'none',
-    outline: 'none',
+    outline: 'solid, 0, blue .3',
     ':focus-visible': {
       opacity: 1,
       outline: 'solid, X, blue .3'
@@ -51,6 +52,7 @@ export const Focusable = {
   },
 
   attr: {
-    placeholder: ({ props }) => props.placeholder
+    placeholder: ({ props }) => props.placeholder,
+    tabIndex: ({ props }) => props.tabIndex
   }
 }

package/src/atoms/Timing.js

@@ -34,6 +34,9 @@ export const Timing = {
     transition: ({ props }) => props.transition && ({
       transition: splitTransition(props.transition)
     }),
+    willChange: ({ props }) => props.willChange && ({
+      willChange: props.willChange
+    }),
     transitionDuration: ({ props }) => props.transitionDuration && ({
       transitionDuration: transformDuration(props.transitionDuration)
     }),
@@ -46,23 +49,6 @@ export const Timing = {
     transitionProperty: ({ props }) => props.transitionProperty && ({
       transitionProperty: props.transitionProperty,
       willChange: props.transitionProperty
-    }),
-
-    animationDuration: ({ props }) => props.animationDuration && ({
-      animationDuration: transformDuration(props.animationDuration)
-    }),
-    animationDelay: ({ props }) => props.animationDelay && ({
-      animationDelay: transformDuration(props.animationDelay)
-    }),
-    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
-      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
-    }),
-    animationFillMode: ({ props }) => props.animationFillMode && ({
-      animationFillMode: props.animationFillMode
-    }),
-    animationProperty: ({ props }) => props.animationProperty && ({
-      animationProperty: props.animationProperty,
-      willChange: props.animationProperty
     })
   }
 }

package/src/atoms/Transform.js

@@ -2,8 +2,7 @@
 
 export const Transform = {
   class: {
-    transform: ({ props }) => props.transform && ({
-      transform: props.transform
-    })
+    transform: ({ props }) => props.transform && ({ transform: props.transform }),
+    transformOrigin: ({ props }) => props.transformOrigin && ({ transformOrigin: props.transformOrigin })
   }
 }

package/src/atoms/index.js

@@ -18,3 +18,4 @@ export * from './Text'
 export * from './Timing'
 export * from './Transform'
 export * from './XYZ'
+export * from './Animation'