smbls 0.8.29 → 0.8.32

package/package.json

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

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

@@ -27,9 +27,11 @@ export const mapBasedOnRatio = (props, prop, unit) => {
 }
 
 export const Block = {
-  props: {},
-
   class: {
+    boxSizing: ({ props }) => props.boxSizing ? ({ display: props.boxSizing }) : {
+      boxSizing: 'border-box'
+    },
+
     display: ({ props }) => props.display && ({ display: props.display }),
 
     hide: ({ props }) => props.hide && ({ display: 'none' }),

package/src/Box.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive } from '.'
+
+const PropsCSS = {
+  class: {
+    propsCSS: ({ props }) => props && props.css
+  }
+}
+
+export const Box = {
+  proto: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS]
+}

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

@@ -1,6 +1,6 @@
 'use strict'
 
-import { IconText } from '../'
+import { IconText } from '.'
 
 const css = {
   appearance: 'none',

package/src/ButtonSet.js

@@ -0,0 +1,10 @@
+'use strict'
+
+import { SquareButton } from './Button'
+import { Flex } from './Flex'
+
+export const ButtonSet = {
+  tag: 'nav',
+  proto: Flex,
+  childProto: SquareButton
+}

package/src/DatePicker/index.js

@@ -3,13 +3,10 @@
 import style from './style'
 
 import Icon from '../Icon'
-import Shape from '../Shape'
-import { Block } from '../Block'
 
 export const DatePicker = {
   style,
 
-  proto: [Shape, Block],
   props: {
     theme: 'lightDark',
     padding: 'A',

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

@@ -1,12 +1,10 @@
 'use strict'
 
-import style from './style'
-import { mapBasedOnRatio } from '../Block'
+import { mapBasedOnRatio } from './Block'
 
 export const Flex = {
-  style,
-
   props: {
+    display: 'flex',
     flow: 'row'
   },
 

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

@@ -1,12 +1,9 @@
 'use strict'
 
-import style from './style'
-import { mapBasedOnRatio } from '../Block'
+import { mapBasedOnRatio } from './Block'
 
 export const Grid = {
-  style,
-
-  props: {},
+  props: { display: 'grid' },
 
   class: {
     columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,

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

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

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

@@ -1,7 +1,7 @@
 'use strict'
 
 import { exec } from '@domql/utils'
-import { Shape, Text } from '..'
+import { Shape, Text } from '.'
 
 export const Link = {
   proto: [Shape, Text],

package/src/Media.js

@@ -1,91 +1,125 @@
 'use strict'
 
-import { merge } from '@domql/utils'
+import { merge, isArray } from '@domql/utils'
 import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
 
-const convertToClass = (subProps, element) => {
+const convertPropsToClass = (subProps, lib, element) => {
   const { class: className } = element
   const subPropsClassname = {}
+
   for (const prop in subProps) {
+    // if (prop.slice(0, 1) === ':') {
+    //   applySelectorProps(prop, lib, element)
+    //   continue
+    // }
+
     const classnameExec = className[prop]
     if (typeof classnameExec !== 'function') continue
 
-    const contertedToClass = classnameExec({ props: subProps })
-    for (const finalProp in contertedToClass) subPropsClassname[finalProp] = contertedToClass[finalProp]
+    let classExec = classnameExec({ props: subProps })
+    if (isArray(classExec)) {
+      classExec = classExec.reduce((a, c) => merge(a, c), {})
+    }
+
+    for (const finalProp in classExec) {
+      subPropsClassname[finalProp] = classExec[finalProp]
+    }
   }
+
+  // console.group(subProps)
+  // console.log(subPropsClassname)
+  // console.log(lib)
+  // console.log(className)
+  // console.groupEnd(subProps)
+
   return subPropsClassname
 }
 
+const applyMediaProps = (key, lib, element) => {
+  const { props } = element
+  const mediaName = CONFIG_MEDIA[key.slice(1)]
+  const mediaKey = `@media screen and ${mediaName}`
+  const mediaProps = props[key]
+  lib.media[mediaKey] = convertPropsToClass(mediaProps, lib, element)
+}
+
+const applySelectorProps = (key, lib, element) => {
+  const { props } = element
+  const selectorKey = `&${key}`
+  const selectorProps = props[key]
+  lib.selector[selectorKey] = convertPropsToClass(selectorProps, lib, element)
+}
+
+const applyCaseProps = (key, lib, element) => {
+  const { props } = element
+  const caseKey = key.slice(1)
+  if (!CONFIG_CASES[caseKey]) return
+  const caseProps = props[key]
+  merge(lib.case, convertPropsToClass(caseProps, lib, element))
+}
+
+const keySetters = {
+  '@': applyMediaProps,
+  ':': applySelectorProps,
+  $: applyCaseProps
+}
+
 const init = (el, s) => {
   const { props, class: className } = el
 
-  for (const screen in props) {
-    if (screen.slice(0, 1) === '@') {
-      const mediaName = CONFIG_MEDIA[screen.slice(1)]
-      const mediaKey = `@media screen and ${mediaName}`
-      const screenProps = props[screen]
-
-      const { MEDIA } = className
-      if (!MEDIA) className.MEDIA = {}
-      className.MEDIA[mediaKey] = convertToClass(screenProps, el)
-    } else if (screen.slice(0, 1) === ':') {
-      const selectorProps = props[screen]
-      const selectorKey = `&${screen}`
-
-      const { SELECTORS } = className
-      if (!SELECTORS) className.SELECTORS = {}
-      className.SELECTORS[selectorKey] = convertToClass(selectorProps, el)
-    } else if (screen.slice(0, 1) === '$') {
-      const caseKey = screen.slice(1)
-      if (!CONFIG_CASES[caseKey]) continue
-
-      const caseProps = props[screen]
-      const execCaseProps = convertToClass(caseProps, el)
-
-      const { CASE } = className
-      if (!CASE) className.CASE = {}
-      merge(className.CASE, execCaseProps)
-    }
+  const CLASS_NAMES = {
+    media: {},
+    selector: {},
+    case: {}
+  }
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (setter) setter(key, CLASS_NAMES, el)
   }
+
+  merge(className, CLASS_NAMES)
 }
 
 export const Responsive = {
-  on: {
-    init,
-    initUpdate: el => {
-      const { props, class: className } = el
-      const rootState = el.__root ? el.__root.state : el.state
-      // console.log(props)
-
-      if (props.theme) {
-        // console.group(props.theme)
-        const { theme } = props
-
-        for (const key in theme) {
-          if (key.includes('dark') || key.includes('light')) {
-            const parse = key.split(': ')[1].split(')')[0]
-            if (rootState.globalTheme === parse) {
-              props.theme = getTheme(theme[key])
-            } else props.theme = theme
-            className.MEDIA_FORCED_BY_STATE = props.theme
-            props.generatedTheme = true
-          }
-        }
-        // console.groupEnd(props.theme)
+  on: { init }
+}
+
+export const initUpdate = el => {
+  // FORCE STATE UPDATE:
+  const { props, class: className } = el
+  const rootState = el.__root ? el.__root.state : el.state
+  console.log(props)
+  if (el.key !== 'app') return
+
+  if (props.theme) {
+    const { theme } = props
+    // console.group(props.theme)
+
+    const convertTheme = getTheme(theme)
+
+    for (const key in convertTheme) {
+      if (key.includes('dark') || key.includes('light')) {
+        const parse = key.split(': ')[1].split(')')[0]
+        if (rootState.globalTheme === parse) {
+          props.theme = getTheme(theme[key])
+        } else props.theme = theme
+        className.MEDIA_FORCED_BY_STATE = props.theme
       }
+    }
+    // console.groupEnd(props.theme)
+  }
 
-      for (const screen in props) {
-        if (screen.slice(0, 1) === '@') {
-          const mediaName = screen.slice(1)
-          const mediaKey = `@media screen and ${CONFIG_MEDIA[mediaName]}`
-          if (mediaName === 'dark' || mediaName === 'light') {
-            const { MEDIA_FORCE } = className
-            if (!MEDIA_FORCE) className.media = {}
-            if (rootState.globalTheme === mediaName) {
-              className.MEDIA_FORCED = className.MEDIA[mediaKey]
-            } else className.MEDIA_FORCED = {}
-          }
-        }
+  for (const screen in props) {
+    if (screen.slice(0, 1) === '@') {
+      const mediaName = screen.slice(1)
+      const mediaKey = `@media screen and ${CONFIG_MEDIA[mediaName]}`
+      if (mediaName === 'dark' || mediaName === 'light') {
+        const { MEDIA_FORCE } = className
+        if (!MEDIA_FORCE) className.media = {}
+        if (rootState.globalTheme === mediaName) {
+          className.MEDIA_FORCED = className.MEDIA[mediaKey]
+        } else className.MEDIA_FORCED = {}
       }
     }
   }

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

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Block, IconText, Direction, Flex, Text } from '../'
+import { Shape, Block, IconText, Direction, Flex, Text } from '.'
 
 export const Notification = {
   style: { cursor: 'pointer' },

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

@@ -2,6 +2,6 @@
 
 export const Overflow = {
   class: {
-    overflow: ({ props }) => props.overflow && ({ overflow: props.overflow }),
+    overflow: ({ props }) => props.overflow && ({ overflow: props.overflow })
   }
 }

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

@@ -1,5 +1,4 @@
 'use strict'
-import Shape from '../Shape'
 
 export const Pills = {
   style: {
@@ -18,13 +17,10 @@ export const Pills = {
   },
   childProto: {
     tag: 'div',
-    proto: Shape,
     props: {
       round: 42,
       theme: 'White'
     }
   },
-  ...[
-    {}, {}, {}
-  ]
+  ...[{}, {}, {}]
 }

package/src/Shape/index.js

@@ -1,35 +1,10 @@
 'use strict'
 
-import { isArray, isObject, exec } from '@domql/utils'
-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))
-
-const diffBorder = (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
-    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
-    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
-  })
-  return obj
-}
-
-const diffStroke = stroke => {
-  const WebkitTextStroke = stroke.split(', ').map(v => {
-    if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
-  }).join(' ')
-  return { WebkitTextStroke }
-}
+import { exec } from '@domql/utils'
+import { SHAPES } from './style'
 
 export const Shape = {
   class: {
-    default: style,
     shape: (element) => {
       const { props } = element
       const { shape } = props
@@ -41,54 +16,8 @@ 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,
-    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,
-
-    theme: ({ props }) => {
-      if (!props.theme) return
-      return getTheme(props.theme)
-    },
-
-    color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
-    background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
-
-    textStroke: ({ props }) => props.textStroke ? diffStroke(props.textStroke) : null,
-
-    border: ({ props }) => props.border ? diffBorder(props.border) : null,
-    borderColor: ({ props }) => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
-    borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
-
-    borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
-    borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
-    borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
-    borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
-
-    opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
-    visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })
+    shapeDirectionColor: ({ props, ...el }) => props.shapeDirection ? { '&:before': { borderColor: el.class.backgroundColor } } : null
   }
-
-  // mode: {
-  //   dark: {
-  //     theme: 'white'
-  //   }
-  // }
-
-  // theme: {
-  //   default: 'primary',
-  //   dark: 'whiteish'
-  // }
-
-  // size: {
-  //   default: 'auto',
-  //   mobile: 'fit'
-  // }
-
-  // padding: {
-  //   default: ratio.phi,
-  //   mobile: ratio.perfect
-  // }
 }
 
 export default Shape

package/src/Shape/style.js

@@ -2,10 +2,6 @@
 
 import { UNIT, getColor, getTheme } from '@symbo.ls/scratch'
 
-export default {
-  boxSizing: 'border-box'
-}
-
 export const depth = {
   4: { boxShadow: `rgba(0,0,0,.10) 0 2${UNIT.default} 4${UNIT.default}` },
   6: { boxShadow: `rgba(0,0,0,.10) 0 3${UNIT.default} 6${UNIT.default}` },

package/src/{SideBar/index.js → Sidebar.js}

@@ -1,5 +1,6 @@
 'use strict'
-import { Icon, Link } from '../'
+
+import { Icon, Link } from '.'
 
 const MenuItem = {
   proto: Link,

package/src/Theme.js

@@ -0,0 +1,58 @@
+'use strict'
+
+import { isArray, isObject } from '@domql/utils'
+import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
+
+import { depth } from './Shape/style'
+
+const isBorderStyle = str =>
+  ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
+
+const diffBorder = (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
+    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
+    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
+  })
+  return obj
+}
+
+const diffStroke = stroke => {
+  const WebkitTextStroke = stroke.split(', ').map(v => {
+    if (v.includes('px')) return v
+    else if (getColor(v)) return getColor(v)
+  }).join(' ')
+  return { WebkitTextStroke }
+}
+
+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,
+
+    theme: ({ props }) => {
+      if (!props.theme) return
+      return getTheme(props.theme)
+    },
+
+    color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
+    background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
+
+    textStroke: ({ props }) => props.textStroke ? diffStroke(props.textStroke) : null,
+
+    border: ({ props }) => props.border ? diffBorder(props.border) : null,
+    borderColor: ({ props }) => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
+    borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
+
+    borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
+    borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
+    borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,
+    borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
+
+    opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
+    visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })
+  }
+}

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

@@ -4,6 +4,6 @@ export const Transform = {
   class: {
     transform: ({ props }) => props.transform && ({
       transform: props.transform
-    }),
+    })
   }
 }

package/src/index.js

@@ -7,6 +7,7 @@ export * from './styles'
 export * from './Text'
 export * from './Block'
 export * from './Shape'
+export * from './Theme'
 export * from './Flex'
 export * from './Grid'
 export * from './Direction'

package/src/Block/style.js

@@ -1 +0,0 @@
-'use strict'

package/src/Box/index.js

@@ -1,13 +0,0 @@
-'use strict'
-
-import { Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive } from '..'
-
-const PropsCSS = {
-  class: {
-    propsCSS: ({ props }) => props && props.css
-  }
-}
-
-export const Box = {
-  proto: [Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS]
-}

package/src/Button/style.js

@@ -1,4 +0,0 @@
-'use strict'
-
-export default {
-}

package/src/ButtonSet/index.js

@@ -1,14 +0,0 @@
-'use strict'
-
-import { SquareButton } from '../Button'
-import { Shape } from '../Shape'
-import { Flex } from '../Flex'
-import { Block } from '../Block'
-
-export const ButtonSet = {
-  tag: 'nav',
-  proto: [Shape, Flex, Block],
-  childProto: {
-    proto: [SquareButton]
-  }
-}

package/src/Flex/style.js

@@ -1,5 +0,0 @@
-'use strict'
-
-export default {
-  display: 'flex'
-}

package/src/Grid/style.js

@@ -1,5 +0,0 @@
-'use strict'
-
-export default {
-  display: 'grid'
-}

package/src/Text/style.js

@@ -1,2 +0,0 @@
-'use strict'
-

package/src/Transition/style.js

@@ -1,2 +0,0 @@
-'use strict'
-