smbls 0.15.19 → 0.15.21

package/package.json

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

package/src/Icon.js

@@ -1,13 +1,12 @@
 'use strict'
 
 import { SVG } from './atoms'
-
-import { ICONS } from '@symbo.ls/scratch'
 import { toCamelCase } from '@symbo.ls/utils'
 
 export const Icon = {
   extend: SVG,
-  props: ({ key, props, parent }) => {
+  props: ({ key, props, parent, context }) => {
+    const { ICONS } = context && context.SYSTEM
     const iconName = props.inheritedString || props.name || props.icon || key
     const camelCase = toCamelCase(iconName)
     const isArray = camelCase.split(/([a-z])([A-Z])/g)

package/src/atoms/Animation.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { merge } from '@domql/utils'
+import { getTimingFunction } from '@symbo.ls/scratch'
+import { convertPropsToClass } from './Media'
+import { transformDuration } from './Timing'
+
+const applyAnimationProps = (key, props, result, element) => {
+  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]
+}
+
+export const Animation = {
+  class: {
+    animation: ({ props }) => props.animation && ({
+      animation: applyAnimationProps(props.animation)
+    }),
+
+    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/Block.js

@@ -99,10 +99,11 @@ export const Block = {
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
+    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
     alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
-    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
+    justifyItems: ({ props }) => props.justifyItems && ({ justifyItems: props.justifyItems }),
     alignSelf: ({ props }) => props.alignSelf && ({ alignSelf: props.alignSelf }),
     order: ({ props }) => props.order && ({ order: props.order }),
 

package/src/atoms/Grid.js

@@ -6,11 +6,20 @@ export const Grid = {
   props: { display: 'grid' },
 
   class: {
-    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
-    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
     area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
     template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
     templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : 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,
+
+    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
+    templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
+    autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
+
+    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
+
     columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
     rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
   }

package/src/atoms/Interaction.js

@@ -27,6 +27,19 @@ export const Hoverable = {
   }
 }
 
+export const Clickable = {
+  extend: Hoverable,
+  props: {
+    ':active': {
+      opacity: 1,
+      transform: 'scale(1.015)'
+    },
+    '.active': {
+      opacity: 1
+    }
+  }
+}
+
 export const Focusable = {
   props: {
     border: 'none',

package/src/atoms/Media.js

@@ -1,7 +1,6 @@
 'use strict'
 
 import { merge, isArray } from '@domql/utils'
-import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA } from '@symbo.ls/scratch'
 
 const keySetters = {
   '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
@@ -46,7 +45,8 @@ const convertPropsToClass = (props, result, element) => {
 }
 
 const applyMediaProps = (key, props, result, element) => {
-  const mediaName = CONFIG_MEDIA[key.slice(1)]
+  const { MEDIA } = element.context && element.context.SYSTEM
+  const mediaName = MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
 
   const rootState = element.__root ? element.__root.state : element.state
@@ -72,9 +72,10 @@ const applySelectorProps = (key, props, result, element) => {
 }
 
 const applyCaseProps = (key, props, result, element) => {
+  const { CASES } = element.context && element.context.SYSTEM
   const caseKey = key.slice(1)
   const isPropTrue = element.props[caseKey]
-  if (!CONFIG_CASES[caseKey] && !isPropTrue) return
+  if (!CASES[caseKey] && !isPropTrue) return
   return merge(result, convertPropsToClass(props, result, element))
 }
 
@@ -127,30 +128,30 @@ export const initUpdate = element => {
 
   const { globalTheme } = rootState
 
-  if (!globalTheme) return
+  if (globalTheme) {
+    const CLASS_NAMES = {
+      media: {},
+      selector: {},
+      case: {}
+    }
 
-  const CLASS_NAMES = {
-    media: {},
-    selector: {},
-    case: {}
-  }
+    for (const key in props) {
+      const setter = keySetters[key.slice(0, 1)]
+      if (key === 'theme') {
+        props.update({
+          themeModifier: `@${globalTheme}`
+        }, { preventRecursive: true, ignoreInitUpdate: true })
+      } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
 
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (key === 'theme') {
-      props.update({
-        themeModifier: `@${globalTheme}`
-      }, { preventRecursive: true, ignoreInitUpdate: true })
-    } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
-
-    if (setter) setter(key, props[key], CLASS_NAMES, element)
-  }
+      if (setter) setter(key, props[key], CLASS_NAMES, element)
+    }
 
-  if (Object.keys(CLASS_NAMES.media).length) {
-    className.media = CLASS_NAMES.media
+    if (Object.keys(CLASS_NAMES.media).length) {
+      className.media = CLASS_NAMES.media
+    }
+    className.selector = CLASS_NAMES.selector
+    className.case = CLASS_NAMES.case
   }
-  className.selector = CLASS_NAMES.selector
-  className.case = CLASS_NAMES.case
 }
 
 export const Media = {

package/src/atoms/Timing.js

@@ -3,7 +3,7 @@
 import { isString } from '@domql/utils'
 import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
 
-const transformTransition = transition => {
+export const transformTransition = transition => {
   const arr = transition.split(' ')
 
   if (!arr.length) return transition
@@ -18,12 +18,12 @@ const transformTransition = transition => {
   }).join(' ')
 }
 
-const transformDuration = (duration, props, propertyName) => {
+export const transformDuration = (duration, props, propertyName) => {
   if (!isString(duration)) return
   return duration.split(',').map(getTimingByKey).join(',')
 }
 
-const splitTransition = transition => {
+export const splitTransition = transition => {
   const arr = transition.split(',')
   if (!arr.length) return
   return arr.map(transformTransition).join(',')
@@ -57,6 +57,9 @@ export const Timing = {
     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