smbls 0.9.15 → 0.11.0

package/README.md

@@ -19,7 +19,7 @@ import { Box } from 'smbls'
 3. Use it inside your DOMQL code
 ```
 const Header = {
-  proto: Box,
+  extend: Box,
   // ...Other Properties
 }
 ```

package/package.json

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

package/src/Banner/index.js

@@ -7,17 +7,17 @@ import { UserBundle } from '../User'
 import { styleParentMode } from './style'
 
 export const ParentMode = {
-  proto: Shape,
+  extend: Shape,
   round: 10,
   theme: 'purple',
   style: styleParentMode,
   icon: {
-    proto: Icon,
+    extend: Icon,
     props: { icon: 'checkMedium' }
   },
   h2: 'Welcome to parent Mode',
   description: {
-    proto: UserBundle,
+    extend: UserBundle,
     users: { ...[{}, {}, {}] },
     span: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
   }

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 }),
@@ -84,6 +85,7 @@ export const Block = {
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
     flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
+    alignSelf: ({ props }) => props.alignSelf && ({ alignSelf: props.alignSelf }),
 
     flexWrap: ({ props }) => props.flexWrap && ({
       display: 'flex',
@@ -110,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/Box.js

@@ -9,5 +9,5 @@ const PropsCSS = {
 }
 
 export const Box = {
-  proto: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction]
+  extend: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction]
 }

package/src/Button.js

@@ -11,7 +11,7 @@ const style = {
 }
 
 export const Button = {
-  proto: IconText,
+  extend: IconText,
   tag: 'button',
   props: {
     fontSize: 'A',
@@ -33,7 +33,7 @@ export const Button = {
 }
 
 export const SquareButton = {
-  proto: Button,
+  extend: Button,
   props: {
     fontSize: 'A',
     width: 'A',
@@ -46,7 +46,7 @@ export const SquareButton = {
 }
 
 export const CircleButton = {
-  proto: SquareButton,
+  extend: SquareButton,
   props: { round: 'C' }
 }
 
@@ -54,6 +54,6 @@ export const KangorooButton = {
   tag: 'button',
   props: { style },
 
-  iconText: { proto: IconText },
-  child: { proto: IconText }
+  iconText: { extend: IconText },
+  child: { extend: IconText }
 }

package/src/ButtonSet.js

@@ -5,6 +5,6 @@ import { Flex } from './Flex'
 
 export const ButtonSet = {
   tag: 'nav',
-  proto: Flex,
-  childProto: SquareButton
+  extend: Flex,
+  childExtend: SquareButton
 }

package/src/DatePicker/index.js

@@ -15,7 +15,7 @@ export const DatePicker = {
   },
 
   aside: {
-    childProto: { tag: 'button' },
+    childExtend: { tag: 'button' },
     ...[
       { text: '2020' },
       { text: '2021' },
@@ -32,11 +32,11 @@ export const DatePicker = {
   main: {
     header: {
       icon: {
-        proto: Icon,
+        extend: Icon,
         props: { icon: 'arrowMediumLeft' }
       },
       month: {
-        childProto: { tag: 'span' },
+        childExtend: { tag: 'span' },
         ...[
           { text: 'january' },
           { text: 'february' },
@@ -53,14 +53,14 @@ export const DatePicker = {
         ]
       },
       icon2: {
-        proto: Icon,
+        extend: Icon,
         props: { icon: 'arrowMediumRight' }
       }
     },
     days: {
       tag: 'section',
       header: {
-        childProto: { tag: 'span' },
+        childExtend: { tag: 'span' },
         ...[
           { text: 'Mo' },
           { text: 'Tu' },
@@ -72,7 +72,7 @@ export const DatePicker = {
         ]
       },
       content: {
-        childProto: { tag: 'button' },
+        childExtend: { tag: 'button' },
         ...[
           { text: '1' },
           { text: '2' },

package/src/Dropdown/index.js

@@ -6,15 +6,15 @@ export const DropdownList = {
   style: styleDropDown,
   tag: 'ul',
 
-  proto: Shape,
+  extend: Shape,
 
   state: {
     active: 0
   },
 
-  childProto: {
+  childExtend: {
     tag: 'li',
-    proto: [Shape],
+    extend: [Shape],
 
     style: styleRow,
     props: (el, s) => ({
@@ -24,7 +24,7 @@ export const DropdownList = {
     }),
 
     span: {
-      proto: [IconText],
+      extend: [IconText],
       props: {
         icon: 'checkmark',
         text: ''

package/src/Field.js

@@ -3,7 +3,7 @@
 import { IconText, Input } from '.'
 
 export const Field = {
-  proto: IconText,
+  extend: IconText,
   props: (el, s) => ({
     value: s[el.key],
 
@@ -36,5 +36,5 @@ export const Field = {
     }
   }),
 
-  input: { proto: Input }
+  input: { extend: Input }
 }

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/GridLayouts/index.js

@@ -5,7 +5,7 @@ import { Button, Link } from '..'
 import { styleGrid, styleGrid2 } from './style'
 
 const componentLink = {
-  proto: Link,
+  extend: Link,
   attr: {
     href: '#'
   }

package/src/Icon.js

@@ -5,7 +5,7 @@ import { SVG } from '.'
 import { ICONS } from '@symbo.ls/scratch'
 
 export const Icon = {
-  proto: SVG,
+  extend: SVG,
   props: ({ key, props, parent }) => {
     let iconName = props.inheritedString || props.name || props.icon || key
 

package/src/IconText.js

@@ -3,7 +3,7 @@
 import { Flex, Icon } from '.'
 
 export const IconText = {
-  proto: Flex,
+  extend: Flex,
 
   props: {
     align: 'center center',
@@ -11,7 +11,7 @@ export const IconText = {
   },
 
   icon: {
-    proto: Icon,
+    extend: Icon,
     if: ({ parent }) => parent.props.icon,
     props: 'match'
   },

package/src/Label.js

@@ -4,7 +4,7 @@ import { Shape } from './Shape'
 import { Text } from './Text'
 
 export const Label = {
-  proto: [Shape, Block, Text],
+  extend: [Shape, Block, Text],
 
   style: { lineHeight: 1 },
 

package/src/Notification.js

@@ -4,9 +4,9 @@ import { Shape, Block, IconText, Direction, Flex, Text } from '.'
 
 export const Notification = {
   style: { cursor: 'pointer' },
-  proto: [Shape, Block, Direction, Flex],
+  extend: [Shape, Block, Direction, Flex],
   icon: {
-    proto: [IconText],
+    extend: [IconText],
     props: {
       icon: 'info'
     },
@@ -16,17 +16,15 @@ export const Notification = {
     }
   },
   article: {
-    proto: [Flex],
+    extend: [Flex],
     style: {
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
     caption: {
-      proto: Text,
       text: 'Notification'
     },
     p: {
-      proto: Text,
       props: {
         fontSize: 'Z',
         text: 'is not always a distraction'

package/src/Pills.js

@@ -15,7 +15,7 @@ export const Pills = {
     'div:nth-child(2)': { opacity: '.3' },
     'div:nth-child(3)': { opacity: '.3' }
   },
-  childProto: {
+  childExtend: {
     tag: 'div',
     props: {
       round: 42,

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/Select.js

@@ -12,7 +12,7 @@ export const Select = {
     }
   },
 
-  childProto: {
+  childExtend: {
     tag: 'option',
     props: {
       value: '',

package/src/Sidebar.js

@@ -3,10 +3,10 @@
 import { Icon, Link } from '.'
 
 const MenuItem = {
-  proto: Link,
+  extend: Link,
   props: { icon: '' },
   glyph: {
-    proto: Icon,
+    extend: Icon,
     name: ({ props }) => props.icon
   }
 }
@@ -17,7 +17,7 @@ export const Sidebar = {
     style: {
       a: { cursor: 'pointer' }
     },
-    childProto: MenuItem,
+    childExtend: MenuItem,
     ...[{}]
   }
 }

package/src/Slider/index.js

@@ -65,7 +65,7 @@ const listenProp = (el, prop, def) => {
 
 export const Slider = {
   minus: {
-    proto: SquareButton,
+    extend: SquareButton,
     props: { icon: 'minus' },
     on: {
       click: (ev, el, s) => {
@@ -87,7 +87,7 @@ export const Slider = {
     }
   },
   input: {
-    proto: RangeSlider,
+    extend: RangeSlider,
     attr: {
       value: (el, s) => listenProp(el, 'value', 50),
       min: (el, s) => listenProp(el, 'min', 0),
@@ -100,7 +100,7 @@ export const Slider = {
     }
   },
   plus: {
-    proto: SquareButton,
+    extend: SquareButton,
     props: { icon: 'plus' },
     on: {
       click: (ev, el, s) => {

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/Tooltip/index.js

@@ -6,7 +6,7 @@ import style from './style'
 
 export const Tooltip = {
   style,
-  proto: Shape,
+  extend: Shape,
   props: { theme: 'purple2' },
   caption: 'And tooltip is coming',
   span: 'and winter too'

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

package/src/User/index.js

@@ -4,7 +4,7 @@ import { Shape, Block } from '..'
 import { styleUser, styleUserBundle } from './style'
 
 export const User = {
-  proto: [Shape, Block],
+  extend: [Shape, Block],
   props: { boxSize: 'B B' },
   style: styleUser,
   tag: 'img',
@@ -16,7 +16,7 @@ export const User = {
 export const UserBundle = {
   style: styleUserBundle,
   users: {
-    childProto: User,
+    childExtend: User,
     ...[{}]
   },
   span: 'join classroom'