smbls 0.10.0 → 0.11.0

package/package.json

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

package/src/Block.js

@@ -1,29 +1,30 @@
 'use strict'
 
-import { SPACING, mapSpacing } from '@symbo.ls/scratch'
+import { SPACING, getSpacingByKey } from '@symbo.ls/scratch'
 
-export const mapBasedOnRatio = (props, prop, unit) => {
+export const getSpacingBasedOnRatio = (props, prop, unit) => {
   const { spacingRatio } = props
   const val = props[prop]
-  // TODO: move this to mapSpacing
+  // TODO: move this to getSpacingByKey
   if (spacingRatio) {
-    const params = SPACING[spacingRatio]
+    let params = SPACING[spacingRatio]
 
     if (!params) {
-      SPACING[spacingRatio] = {
+      params = SPACING[spacingRatio] = {
         base: SPACING.base,
-        type: 'spacing',
+        type: SPACING.type,
         ratio: spacingRatio,
-        range: [-5, +7],
-        subSequence: true,
+        range: SPACING.range,
+        subSequence: SPACING.subSequence,
         sequence: {},
-        scales: {}
+        scales: {},
+        vars: {}
       }
     }
 
-    return mapSpacing(val, prop, params, unit)
+    return getSpacingByKey(val, prop, params, unit)
   }
-  return mapSpacing(val, prop, null, unit)
+  return getSpacingByKey(val, prop, null, unit)
 }
 
 export const Block = {
@@ -36,47 +37,47 @@ export const Block = {
 
     hide: ({ props }) => props.hide && ({ display: 'none' }),
 
-    width: ({ props }) => props.width && mapBasedOnRatio(props, 'width'),
-    height: ({ props }) => props.height && mapBasedOnRatio(props, 'height'),
+    width: ({ props }) => props.width && getSpacingBasedOnRatio(props, 'width'),
+    height: ({ props }) => props.height && getSpacingBasedOnRatio(props, 'height'),
     boxSize: ({ props }) => {
       if (typeof props.boxSize !== 'string') return
       const [height, width] = props.boxSize.split(' ')
       return {
-        ...mapSpacing(height, 'height'),
-        ...mapSpacing(width || height, 'width')
+        ...getSpacingByKey(height, 'height'),
+        ...getSpacingByKey(width || height, 'width')
       }
     },
 
-    maxWidth: ({ props }) => props.maxWidth && mapBasedOnRatio(props, 'maxWidth'),
-    minWidth: ({ props }) => props.minWidth && mapBasedOnRatio(props, 'minWidth'),
+    maxWidth: ({ props }) => props.maxWidth && getSpacingBasedOnRatio(props, 'maxWidth'),
+    minWidth: ({ props }) => props.minWidth && getSpacingBasedOnRatio(props, 'minWidth'),
     widthRange: ({ props }) => {
       if (typeof props.widthRange !== 'string') return
       const [minWidth, maxWidth] = props.widthRange.split(' ')
       return {
-        ...mapSpacing(minWidth, 'minWidth'),
-        ...mapSpacing(maxWidth, 'maxWidth')
+        ...getSpacingByKey(minWidth, 'minWidth'),
+        ...getSpacingByKey(maxWidth, 'maxWidth')
       }
     },
 
-    maxHeight: ({ props }) => props.maxHeight && mapBasedOnRatio(props, 'maxHeight'),
-    minHeight: ({ props }) => props.minHeight && mapBasedOnRatio(props, 'minHeight'),
+    maxHeight: ({ props }) => props.maxHeight && getSpacingBasedOnRatio(props, 'maxHeight'),
+    minHeight: ({ props }) => props.minHeight && getSpacingBasedOnRatio(props, 'minHeight'),
     heightRange: ({ props }) => {
       if (typeof props.heightRange !== 'string') return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
-        ...mapSpacing(minHeight, 'minHeight'),
-        ...mapSpacing(maxHeight || minHeight, 'maxHeight')
+        ...getSpacingByKey(minHeight, 'minHeight'),
+        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
       }
     },
 
     aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
 
-    borderWidth: ({ props }) => props.borderWidth ? mapBasedOnRatio(props, 'borderWidth') : null,
+    borderWidth: ({ props }) => props.borderWidth ? getSpacingBasedOnRatio(props, 'borderWidth') : null,
 
-    padding: ({ props }) => props.padding ? mapBasedOnRatio(props, 'padding') : null,
-    margin: ({ props }) => props.margin ? mapBasedOnRatio(props, 'margin') : null,
+    padding: ({ props }) => props.padding ? getSpacingBasedOnRatio(props, 'padding') : null,
+    margin: ({ props }) => props.margin ? getSpacingBasedOnRatio(props, 'margin') : null,
 
-    gap: ({ props }) => props.gap ? mapBasedOnRatio(props, 'gap') : null,
+    gap: ({ props }) => props.gap ? getSpacingBasedOnRatio(props, 'gap') : null,
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
@@ -111,8 +112,8 @@ export const Block = {
       if (typeof props.heightRange !== 'string') return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
-        ...mapSpacing(minHeight, 'minHeight'),
-        ...mapSpacing(maxHeight || minHeight, 'maxHeight')
+        ...getSpacingByKey(minHeight, 'minHeight'),
+        ...getSpacingByKey(maxHeight || minHeight, 'maxHeight')
       }
     }
   }

package/src/Grid.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { mapBasedOnRatio } from './Block'
+import { getSpacingBasedOnRatio } from './Block'
 
 export const Grid = {
   props: { display: 'grid' },
@@ -11,7 +11,7 @@ export const Grid = {
     area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
     template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
     templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
-    columnGap: ({ props }) => props.columnGap ? mapBasedOnRatio(props, 'columnGap') : null,
-    rowGap: ({ props }) => props.rowGap ? mapBasedOnRatio(props, 'rowGap') : null
+    columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
   }
 }

package/src/Notification.js

@@ -22,11 +22,9 @@ export const Notification = {
       alignItems: 'flex-start'
     },
     caption: {
-      extend: Text,
       text: 'Notification'
     },
     p: {
-      extend: Text,
       props: {
         fontSize: 'Z',
         text: 'is not always a distraction'

package/src/Position.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { mapSpacing } from '@symbo.ls/scratch'
+import { getSpacingByKey } from '@symbo.ls/scratch'
 
 export const Position = {
   props: {},
@@ -10,12 +10,12 @@ export const Position = {
     inset: ({ props }) => {
       const { inset } = props
       if (typeof inset !== 'string') return
-      return { inset: inset.split(' ').map(v => mapSpacing(v,'k').k).join(' ') }
+      return { inset: inset.split(' ').map(v => getSpacingByKey(v,'k').k).join(' ') }
     },
 
-    left: ({ props }) => mapSpacing(props.left, 'left'),
-    top: ({ props }) => mapSpacing(props.top, 'top'),
-    right: ({ props }) => mapSpacing(props.right, 'right'),
-    bottom: ({ props }) => mapSpacing(props.bottom, 'bottom')
+    left: ({ props }) => getSpacingByKey(props.left, 'left'),
+    top: ({ props }) => getSpacingByKey(props.top, 'top'),
+    right: ({ props }) => getSpacingByKey(props.right, 'right'),
+    bottom: ({ props }) => getSpacingByKey(props.bottom, 'bottom')
   }
 }

package/src/Text.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { mapFontSize, getFontFamily, FONT_FAMILY } from '@symbo.ls/scratch'
+import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
 
 export const Text = {
   props: {},
@@ -8,10 +8,10 @@ export const Text = {
   text: ({ props }) => props.text,
 
   class: {
-    fontSize: ({ props }) => props.fontSize ? mapFontSize(props.fontSize) : null,
-    fontFamily: ({ props }) => props.fontFamily && ({ fontFamily: getFontFamily(FONT_FAMILY, props.fontFamily) || props.fontFamily }),
+    fontSize: ({ props }) => props.fontSize ? getFontSizeByKey(props.fontSize) : null,
+    fontFamily: ({ props }) => props.fontFamily && ({ fontFamily: getFontFamily(props.fontFamily) || props.fontFamily }),
     lineHeight: ({ props }) => props.lineHeight && ({ lineHeight: props.lineHeight }),
-    // lineHeight: ({ props }) => props.lineHeight && mapBasedOnRatio(props, 'lineHeight', null, ''),
+    // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
     textDecoration: ({ props }) => props.textDecoration && ({ textDecoration: props.textDecoration }),
     textTransform: ({ props }) => props.textTransform && ({ textTransform: props.textTransform }),
     whiteSpace: ({ props }) => props.whiteSpace && ({ whiteSpace: props.whiteSpace }),

package/src/Theme.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { isArray, isObject } from '@domql/utils'
-import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
+import { getSpacingByKey, getTheme, getColor } from '@symbo.ls/scratch'
 
 import { depth } from './Shape/style'
 
@@ -33,15 +33,15 @@ const transformShadow = shadow => ({
 
     const arr = v.split(' ')
     if (!arr.length) return v
-    return arr.map(v => mapSpacing(v, 'shadow').shadow).join(' ')
+    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
   }).join(' ')
 })
 
 export const Theme = {
   class: {
     depth: ({ props }) => depth[props.depth],
-    round: ({ props, key, ...el }) => props.round ? (mapSpacing(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
-    borderRadius: ({ props, key, ...el }) => props.borderRadius ? (mapSpacing(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
+    round: ({ props, key, ...el }) => props.round ? (getSpacingByKey(props.round, 'borderRadius') || ({ borderRadius: props.round })) : null,
+    borderRadius: ({ props, key, ...el }) => props.borderRadius ? (getSpacingByKey(props.borderRadius, 'borderRadius') || ({ borderRadius: props.borderRadius })) : null,
 
     theme: ({ props, key }) => {
       if (!props.theme) return

package/src/Transition.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { mapTiming } from '@symbo.ls/scratch'
+import { getTimingByKey } from '@symbo.ls/scratch'
 
 const transformTransition = transition => {
   const arr = transition.split(' ')
@@ -9,7 +9,7 @@ const transformTransition = transition => {
 
   return arr.map(v => {
     if (v.length < 3 || v.includes('ms')) {
-      const mapWithSequence = mapTiming(v)
+      const mapWithSequence = getTimingByKey(v)
       return mapWithSequence.duration
     }
     return v