smbls 0.13.2 → 0.13.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [
@@ -26,9 +26,12 @@
     "@symbo.ls/scratch": "latest"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
-    "babel-eslint": "^10.1.0",
+    "@babel/core": "^7.11.5",
+    "@emotion/css": "^11.5.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.1.0",
+    "parcel-bundler": "^1.12.4",
+    "parcel-plugin-svg-sprite": "^1.4.1",
     "standard": "^13.1.0"
   },
   "standard": {

package/src/Block.js

@@ -2,17 +2,20 @@
 
 import { SPACING, getSpacingByKey } from '@symbo.ls/scratch'
 
-export const getSpacingBasedOnRatio = (props, prop, unit) => {
+export const getSpacingBasedOnRatio = (props, propertyName, unit) => {
   const { spacingRatio } = props
-  const val = props[prop]
+
+  // if (spacingRatio) console.log(propertyName, props)
+
+  const val = props[propertyName]
   // TODO: move this to getSpacingByKey
   if (spacingRatio) {
     let params = SPACING[spacingRatio]
 
     if (!params) {
       params = SPACING[spacingRatio] = {
-        base: SPACING.base,
-        type: SPACING.type,
+        base: props.base || SPACING.base,
+        type: SPACING.type + '-' + spacingRatio,
         ratio: spacingRatio,
         range: SPACING.range,
         subSequence: SPACING.subSequence,
@@ -22,9 +25,9 @@ export const getSpacingBasedOnRatio = (props, prop, unit) => {
       }
     }
 
-    return getSpacingByKey(val, prop, params, unit)
+    return getSpacingByKey(val, propertyName, params, unit, false)
   }
-  return getSpacingByKey(val, prop, null, unit)
+  return getSpacingByKey(val, propertyName, null, unit)
 }
 
 export const Block = {

package/src/Icon.js

@@ -4,16 +4,20 @@ import { SVG } from '.'
 
 import { ICONS } from '@symbo.ls/scratch'
 
+function camelize (str) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+    return index === 0 ? word.toLowerCase() : word.toUpperCase()
+  }).replace(/\s+/g, '')
+}
+
 export const Icon = {
   extend: SVG,
   props: ({ key, props, parent }) => {
-    let iconName = props.inheritedString || props.name || props.icon || key
-
-    const isArray = iconName.split(' ')
-    const secondArg = props.iconModifier || isArray[1]
+    const iconName = props.inheritedString || props.name || props.icon || key
+    const camelCase = camelize(iconName)
+    const isArray = camelCase.replace(/([a-z])([A-Z])/g, '$1 $2')
 
-    if (secondArg) iconName = isArray[0] + secondArg.slice(0, 1).toUpperCase() + secondArg.slice(1)
-    const iconFromLibrary = ICONS[iconName] || ICONS[isArray[0]] || ICONS['noIcon']
+    const iconFromLibrary = ICONS[camelCase] || ICONS[isArray[0] + isArray[1]] || ICONS[isArray[0]] || ICONS['noIcon']
 
     return {
       width: 'A',

package/src/Notification.js

@@ -1,35 +1,43 @@
 'use strict'
 
-import { Shape, Block, IconText, Direction, Flex, Text } from '.'
+import { IconText, Flex } from '.'
 
 export const Notification = {
-  style: { cursor: 'pointer' },
-  extend: [Shape, Block, Direction, Flex],
+  extend: Flex,
+
+  props: {
+    padding: 'Z1 B Z1 A1',
+    round: 'A',
+    gap: 'X2',
+    style: { cursor: 'pointer' },
+
+    article: {
+      gap: 'X2',
+      title: {
+        fontWeight: '600',
+        lineHeight: '1em'
+      },
+      p: {
+        fontSize: 'Z',
+        margin: '0'
+      }
+    }
+  },
+
   icon: {
     extend: [IconText],
     props: {
-      icon: 'info'
-    },
-    style: {
-      width: 'fit-content',
-      height: 'fit-content'
+      icon: 'info outline'
     }
   },
+
   article: {
-    extend: [Flex],
-    style: {
-      flexDirection: 'column',
-      alignItems: 'flex-start'
-    },
-    caption: {
-      text: 'Notification'
+    extend: Flex,
+    props: {
+      flow: 'column',
+      align: 'flex-start'
     },
-    p: {
-      props: {
-        fontSize: 'Z',
-        text: 'is not always a distraction'
-      },
-      style: { margin: 0 }
-    }
+    title: { text: 'Notification' },
+    p: { text: 'is not always a distraction' }
   }
 }

package/src/Shape/index.js

@@ -1,7 +1,15 @@
 'use strict'
 
-import { exec } from '@domql/utils'
+import { exec, isString } from '@domql/utils'
 import { SHAPES } from './style'
+import { getSpacingByKey } from '@symbo.ls/scratch'
+
+const transformBorderRadius = (radius, props) => {
+  if (!isString(radius)) return
+  return {
+    borderRadius: radius.split(' ').map((v, k) => getSpacingByKey(v, 'radius').radius).join(' ')
+  }
+}
 
 export const Shape = {
   class: {
@@ -16,7 +24,10 @@ export const Shape = {
       const shapeDir = SHAPES[shape + 'Direction']
       return shape ? shapeDir[shapeDirection || 'top'] : null
     },
-    shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null
+    shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null,
+
+    round: ({ props, key, ...el }) => transformBorderRadius(props.round || props.borderRadius, props),
+    borderRadius: ({ props, key, ...el }) => transformBorderRadius(props.borderRadius || props.round, props)
   }
 }
 

package/src/Theme.js

@@ -12,7 +12,7 @@ const transformBorder = (border, key = 'border') => {
   const obj = {}
   const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
   arr.map(v => {
-    if (v.includes('px')) obj[`${key}Width`] = v // TODO: add map spacing
+    if (v.slice(-2) === 'px' || v.slice(-2) === 'em') obj[`${key}Width`] = v // TODO: add map spacing
     else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
     else if (getColor(v)) obj[`${key}Color`] = getColor(v)
   })
@@ -40,8 +40,6 @@ const transformShadow = shadow => ({
 export const Theme = {
   class: {
     depth: ({ props }) => depth[props.depth],
-    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

@@ -27,6 +27,8 @@ const splitTransition = transition => {
 export const Transition = {
   class: {
     transition: ({ props }) => props.transition && splitTransition(props.transition),
+    transitionEasing: ({ props }) => props.transitionEasing && ({ transitionEasing: props.transitionEasing }),
+    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({ transitionTimingFunction: props.transitionTimingFunction }),
     transitionProperty: ({ props }) => props.transitionProperty && ({
       transitionProperty: props.transitionProperty,
       willChange: props.transitionProperty

package/src/User.js

@@ -0,0 +1,29 @@
+'use strict'
+
+import { Img, Flex } from '.'
+
+export const User = {
+  extend: Img,
+  props: {
+    borderRadius: '100%',
+    boxSize: 'B',
+    src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5',
+    style: {
+      cursor: 'pointer'
+    }
+  }
+}
+
+export const UserBundle = {
+  extend: Flex,
+  childExtend: {
+    extend: User,
+    props: {
+      boxSize: 'B1',
+      border: '0.1312em, black .85, solid',
+      ':not(:last-child)': {
+        margin: '0 -Y2 0 0'
+      }
+    }
+  }
+}

package/src/User/index.js

@@ -1,25 +0,0 @@
-'use strict'
-
-import { Shape, Block } from '..'
-import { styleUser, styleUserBundle } from './style'
-
-export const User = {
-  extend: [Shape, Block],
-  props: { boxSize: 'B B' },
-  style: styleUser,
-  tag: 'img',
-  attr: {
-    src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
-  }
-}
-
-export const UserBundle = {
-  style: styleUserBundle,
-  users: {
-    childExtend: User,
-    ...[{}]
-  },
-  span: 'join classroom'
-}
-
-export default User

package/src/User/style.js

@@ -1,19 +0,0 @@
-'use strict'
-
-export const styleUser = {
-  cursor: 'pointer',
-  borderRadius: '100%'
-}
-
-export const styleUserBundle = {
-  display: 'flex',
-  alignItems: 'center',
-  textTransform: 'capitalize',
-  '> div': {
-    display: 'flex',
-    marginRight: '1em',
-    '> img': {
-      marginRight: '-0.5em'
-    }
-  }
-}