smbls 0.8.23 → 0.8.26

package/package.json

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

package/src/Box/index.js

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

package/src/Button/index.js

@@ -2,18 +2,24 @@
 
 import { IconText } from '../'
 
-import style from './style'
+const css = {
+  appearance: 'none',
+  border: 'none',
+  outline: 0,
+  cursor: 'pointer',
+  fontFamily: 'inherit'
+}
 
 export const Button = {
   proto: IconText,
   tag: 'button',
-  style,
   props: {
     type: 'button',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    textDecoration: 'none'
+    textDecoration: 'none',
+    css
   },
   attr: {
     type: ({ props }) => props.type
@@ -28,10 +34,8 @@ export const SquareButton = {
     padding: 'Z',
     aspectRatio: '1 / 1',
     justifyContent: 'center',
-    round: 'Z'
-  },
-  class: {
-    squareButton: { boxSizing: 'content-box' }
+    round: 'Z',
+    css: { boxSizing: 'content-box' }
   }
 }
 
@@ -42,15 +46,10 @@ export const CircleButton = {
 
 export const KangorooButton = {
   tag: 'button',
-  style,
+  props: { css },
 
-  iconText: {
-    proto: IconText
-  },
-
-  child: {
-    proto: [IconText]
-  }
+  iconText: { proto: IconText },
+  child: { proto: IconText }
 }
 
 export default Button

package/src/Button/style.js

@@ -1,9 +1,4 @@
 'use strict'
 
 export default {
-  appearance: 'none',
-  border: 'none',
-  outline: 0,
-  cursor: 'pointer',
-  fontFamily: 'inherit'
 }

package/src/Field.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { IconText, Input } from '.'
+
+export const Field = {
+  proto: IconText,
+  props: (el, s) => ({
+    value: s[el.key],
+
+    depth: 16,
+    placeholder: '',
+    padding: 'A B',
+    round: 'C',
+    type: 'text',
+    position: 'relative',
+    width: '16em',
+
+    css: {
+      appearance: 'none',
+      outline: 0,
+      border: 'none',
+      cursor: 'pointer',
+      fontFamily: 'inherit',
+      boxSizing: 'border-box'
+    },
+
+    input: {
+      width: '100%',
+      height: '100%',
+      border: 'none'
+    },
+
+    svg: {
+      position: 'absolute',
+      right: '1em'
+    }
+  }),
+
+  input: { proto: Input }
+}

package/src/Flex/index.js

@@ -16,6 +16,16 @@ export const Flex = {
     alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
-    gap: ({ props }) => props.gap && mapBasedOnRatio(props, 'gap')
+    gap: ({ props }) => props.gap && mapBasedOnRatio(props, 'gap'),
+
+    align: ({ props }) => {
+      if (typeof props.align !== 'string') return
+      const [alignItems, justifyContent] = props.align.split(' ')
+      return {
+        display: 'flex',
+        alignItems: alignItems,
+        justifyContent: justifyContent
+      }
+    }
   }
 }

package/src/Icon.js

@@ -0,0 +1,27 @@
+'use strict'
+
+import { SVG } from '.'
+
+import { ICONS } from '@symbo.ls/scratch'
+
+export const Icon = {
+  proto: SVG,
+  props: ({ key, props, parent }) => {
+    let iconName = props.inheritedString || props.name || props.icon || key
+
+    const isArray = iconName.split(' ')
+    const secondArg = props.iconModifier || isArray[1]
+
+    if (secondArg) iconName = isArray[0] + secondArg.slice(0, 1).toUpperCase() + secondArg.slice(1)
+    const iconFromLibrary = ICONS[iconName] || ICONS[isArray[0]] || ICONS['noIcon']
+
+    return {
+      width: 'A',
+      height: 'A',
+      display: 'inline-block',
+      src: iconFromLibrary,
+      css: { fill: 'currentColor' }
+    }
+  },
+  attr: { viewBox: '0 0 24 24' }
+}

package/src/IconText.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { Flex, Icon } from '.'
+
+export const IconText = {
+  proto: Flex,
+
+  props: {
+    align: 'center center',
+    lineHeight: 1
+  },
+
+  icon: {
+    proto: Icon,
+    if: ({ parent }) => parent.props.icon,
+    props: 'match'
+  },
+
+  text: ({ props }) => props.text
+}

package/src/{Input/index.js → Input.js}

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Box } from '..'
+import { Box } from '.'
 
 export const Input = {
   proto: Box,

package/src/Media/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { RESPONSIVE } from '@symbo.ls/scratch'
+import { MEDIA as BREAKPOINTS } from '@symbo.ls/scratch'
 
 export const Responsive = {
   on: {
@@ -10,7 +10,7 @@ export const Responsive = {
       for (const screen in props) {
         if (screen.slice(0, 1) === '@') {
           const mediaName = screen.slice(1)
-          const responsiveKey = `@media screen and ${RESPONSIVE[mediaName]}`
+          const responsiveKey = `@media screen and ${BREAKPOINTS[mediaName]}`
           const screenProps = props[screen]
           const calculatedScreenProps = {}
 
@@ -39,11 +39,10 @@ export const Responsive = {
           }
         } else if (screen.slice(0, 1) === ':') {
           const selectorProps = {}
-          const selectorName = screen.slice(1)
+          // const selectorName = screen.slice(1)
           const underSelectorProps = props[screen]
           const selectorKey = `&${screen}`
 
-
           for (const prop in underSelectorProps) {
             const classProp = el.class[prop]
             if (typeof classProp !== 'function') continue

package/src/SVG/index.js

@@ -1,14 +1,13 @@
 'use strict'
 
-var useSVGSymbol = file => `<use xlink:href="${file}" />`
+const useSVGSymbol = file => `<use xlink:href="${file}" />`
 
-// create icon
+// create SVG symbol
 export const SVG = {
   tag: 'svg',
   attr: {
     xmlns: 'http://www.w3.org/2000/svg',
     'xmlns:xlink': 'http://www.w3.org/1999/xlink'
   },
-  define: { src: param => param },
-  html: ({ key, src, props }) => useSVGSymbol(props.src || src || key)
+  html: ({ key, props }) => useSVGSymbol(props.src)
 }

package/src/{Select/index.js → Select.js}

@@ -1,12 +1,16 @@
 'use strict'
 
-import Shape from '../Shape'
-import style from './style'
-
 export const Select = {
-  proto: Shape,
   tag: 'select',
-  style,
+
+  props: {
+    fontSize: 'A',
+    css: {
+      border: 'none',
+      boxSizing: 'border-box',
+      cursor: 'pointer'
+    }
+  },
 
   childProto: {
     tag: 'option',

package/src/Shape/index.js

@@ -6,7 +6,7 @@ import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
 import style, { SHAPES, depth } from './style'
 
 const isBorderStyle = str =>
-  ['none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset','initial'].some(v => str.includes(v))
+  ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
 
 const diffBorder = (border, key = 'border') => {
   const obj = {}

package/src/Field/index.js

@@ -1,21 +0,0 @@
-'use strict'
-
-import { IconText, Input } from '../'
-import style from './style'
-
-export const Field = {
-  style,
-  proto: [IconText],
-  props: (el, s) => ({
-    depth: 16,
-    placeholder: '',
-    value: s[el.key],
-    padding: 'A B',
-    round: 'C',
-    type: 'text'
-  }),
-  input: {
-    proto: Input,
-    props: el => el.parent.props
-  }
-}

package/src/Field/style.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import { TYPOGRAPHY } from '@symbo.ls/scratch'
-
-const primaryFont = Object.keys(TYPOGRAPHY)[0]
-const defaultFont = primaryFont || '--system-default'
-
-export default {
-  appearance: 'none',
-  outline: 0,
-  border: 'none',
-  cursor: 'pointer',
-  fontFamily: 'inherit',
-  boxSizing: 'border-box',
-  position: 'relative',
-  padding: 0,
-
-  width: '16em',
-
-  input: {
-    width: '100%',
-    height: '100%',
-    border: 'none'
-  },
-
-  svg: {
-    position: 'absolute',
-    right: '1em'
-  }
-}

package/src/Icon/index.js

@@ -1,14 +0,0 @@
-'use strict'
-
-import style from './style'
-
-import { SVG } from '..'
-
-export const Icon = {
-  proto: SVG,
-  style,
-  define: { name: param => param },
-  name: ({ props }) => props.name || props.icon,
-  attr: { viewBox: '0 0 24 24' },
-  src: ({ key, name }) => name || key || 'noIcon'
-}

package/src/Icon/style.js

@@ -1,8 +0,0 @@
-'use strict'
-
-export default {
-  width: '1em',
-  height: '1em',
-  fill: 'currentColor',
-  display: 'inline-block'
-}

package/src/IconText/index.js

@@ -1,21 +0,0 @@
-'use strict'
-
-import { Icon } from '../Icon'
-
-export const IconText = {
-  props: {
-    flexAlign: 'center flex-start',
-    display: 'flex',
-    alignItems: 'center',
-    alignContent: 'center',
-    lineHeight: 1
-  },
-
-  icon: {
-    proto: Icon,
-    if: ({ parent }) => parent.props.icon,
-    props: ({ parent }) => ({ icon: parent.props.icon })
-  },
-
-  text: ({ props }) => props.text
-}

package/src/IconText/style.js

@@ -1,7 +0,0 @@
-'use strict'
-
-export default {
-  '> svg': {
-    // marginInlineEnd: `${0.35}em`
-  }
-}

package/src/Select/style.js

@@ -1,8 +0,0 @@
-'use strict'
-
-export default {
-  border: 'none',
-  boxSizing: 'border-box',
-  cursor: 'pointer',
-  fontSize: '1em'
-}