smbls 0.8.25 → 0.8.28

package/package.json

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

package/src/Box/index.js

@@ -3,7 +3,9 @@
 import { Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive } from '..'
 
 const PropsCSS = {
-  class: { propsCSS: ({ props }) => props && props.css }
+  class: {
+    propsCSS: ({ props }) => props && props.css
+  }
 }
 
 export const Box = {

package/src/Icon.js

@@ -7,14 +7,13 @@ import { ICONS } from '@symbo.ls/scratch'
 export const Icon = {
   proto: SVG,
   props: ({ key, props, parent }) => {
-    let iconName = props.inheritedString || props.name || props.icon || key || 'noIcon'
+    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]
+    const iconFromLibrary = ICONS[iconName] || ICONS[isArray[0]] || ICONS['noIcon']
 
     return {
       width: 'A',

package/src/Media.js

@@ -0,0 +1,130 @@
+'use strict'
+
+import { getTheme, CASES, MEDIA as BREAKPOINTS } from '@symbo.ls/scratch'
+
+const init = (el, s) => {
+  const { props, class: className } = el
+
+  for (const screen in props) {
+    if (screen.slice(0, 1) === '@') {
+      const mediaName = screen.slice(1)
+      const responsiveKey = `@media screen and ${BREAKPOINTS[mediaName]}`
+      const screenProps = props[screen]
+      const calculatedScreenProps = {}
+
+      for (const prop in screenProps) {
+        // if (!className || !className[prop]) return
+        // const classProp = className[prop]
+        const classProp = className[prop]
+        if (typeof classProp !== 'function') continue
+        let calculatedProp = classProp({ props: screenProps })
+
+        if (Array.isArray(calculatedProp)) {
+          calculatedProp = Object.assign({}, ...calculatedProp)
+        }
+
+        for (const finalProp in calculatedProp) {
+          calculatedScreenProps[finalProp] = calculatedProp[finalProp]
+        }
+      }
+
+      const { MEDIA } = className
+      if (!MEDIA) className.MEDIA = {}
+      className.MEDIA[responsiveKey] = calculatedScreenProps
+    } else if (screen.slice(0, 1) === ':') {
+      const selectorProps = {}
+      // const selectorName = screen.slice(1)
+      const underSelectorProps = props[screen]
+      const selectorKey = `&${screen}`
+
+      for (const prop in underSelectorProps) {
+        const classProp = className[prop]
+        if (typeof classProp !== 'function') continue
+        let calculatedProp = classProp({ props: underSelectorProps })
+
+        if (Array.isArray(calculatedProp)) {
+          calculatedProp = Object.assign({}, ...calculatedProp)
+        }
+
+        for (const finalProp in calculatedProp) {
+          selectorProps[finalProp] = calculatedProp[finalProp]
+        }
+      }
+
+      const { SELECTORS } = className
+      if (SELECTORS) SELECTORS[selectorKey] = selectorProps
+      else {
+        className.SELECTORS = {
+          [selectorKey]: selectorProps
+        }
+      }
+    } else if (screen.slice(0, 1) === '$') {
+      const caseKey = screen.slice(1)
+      const caseProps = props[screen]
+      const calculatedCaseProps = {}
+
+      if (!CASES[caseKey]) return
+
+      for (const prop in caseProps) {
+        // if (!className || !className[prop]) return
+        // const classProp = className[prop]
+        const classProp = className[prop]
+        if (typeof classProp !== 'function') continue
+        let calculatedProp = classProp({ props: caseProps })
+
+        if (Array.isArray(calculatedProp)) {
+          calculatedProp = Object.assign({}, ...calculatedProp)
+        }
+
+        for (const finalProp in calculatedProp) {
+          calculatedCaseProps[finalProp] = calculatedProp[finalProp]
+        }
+      }
+
+      const { CASE } = className
+      if (!CASE) className.CASE = {}
+      className.CASE[caseKey] = calculatedCaseProps
+      // Object.assign(className.CASE[caseKey], calculatedCaseProps)
+      // console.log(className.CASE)
+    }
+  }
+}
+
+export const Responsive = {
+  on: {
+    init,
+    initUpdate: el => {
+      const { props, class: className } = el
+      const rootState = el.__root ? el.__root.state : el.state
+
+      if (props.theme) {
+        props.returnGeneratedTheme = getTheme(props.theme)
+        const { returnGeneratedTheme } = props
+
+        for (const key in returnGeneratedTheme) {
+          if (key.includes('dark') || key.includes('light')) {
+            const parse = key.split(': ')[1].split(')')[0]
+            if (rootState.globalTheme === parse) {
+              props.returnGeneratedTheme = getTheme(returnGeneratedTheme[key])
+            } else props.returnGeneratedTheme = returnGeneratedTheme
+            className.MEDIA_FORCED_BY_STATE = props.returnGeneratedTheme
+          }
+        }
+      }
+
+      for (const screen in props) {
+        if (screen.slice(0, 1) === '@') {
+          const mediaName = screen.slice(1)
+          const responsiveKey = `@media screen and ${BREAKPOINTS[mediaName]}`
+          if (mediaName === 'dark' || mediaName === 'light') {
+            const { MEDIA_FORCE } = className
+            if (!MEDIA_FORCE) className.media = {}
+            if (rootState.globalTheme === mediaName) {
+              className.MEDIA_FORCED = className.MEDIA[responsiveKey]
+            } else className.MEDIA_FORCED = {}
+          }
+        }
+      }
+    }
+  }
+}

package/src/SVG/index.js

@@ -2,13 +2,12 @@
 
 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, props }) => useSVGSymbol(props.src || key)
+  html: ({ key, props }) => useSVGSymbol(props.src)
 }

package/src/Shape/index.js

@@ -45,7 +45,12 @@ export const Shape = {
     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 }) => props.theme ? getTheme(props.theme) : null,
+
+    theme: ({ props }) => {
+      if (!props.theme) return
+      return props.returnGeneratedTheme || getTheme(props.theme)
+    },
+
     color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
     background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
     // border: ({ props }) => props.border ? ({ borderColor: getColor(props.border) }) : null,

package/src/Media/index.js

@@ -1,71 +0,0 @@
-'use strict'
-
-import { MEDIA as BREAKPOINTS } from '@symbo.ls/scratch'
-
-export const Responsive = {
-  on: {
-    init: (el, s) => {
-      const { props } = el
-
-      for (const screen in props) {
-        if (screen.slice(0, 1) === '@') {
-          const mediaName = screen.slice(1)
-          const responsiveKey = `@media screen and ${BREAKPOINTS[mediaName]}`
-          const screenProps = props[screen]
-          const calculatedScreenProps = {}
-
-          for (const prop in screenProps) {
-            // if (!el.class || !el.class[prop]) return
-            // const classProp = el.class[prop]
-            const classProp = el.class[prop]
-            if (typeof classProp !== 'function') continue
-            let calculatedProp = classProp({ props: screenProps })
-
-            if (Array.isArray(calculatedProp)) {
-              calculatedProp = Object.assign({}, ...calculatedProp)
-            }
-
-            for (const finalProp in calculatedProp) {
-              calculatedScreenProps[finalProp] = calculatedProp[finalProp]
-            }
-          }
-
-          const { MEDIA } = el.class
-          if (MEDIA) MEDIA[responsiveKey] = calculatedScreenProps
-          else {
-            el.class.MEDIA = {
-              [responsiveKey]: calculatedScreenProps
-            }
-          }
-        } else if (screen.slice(0, 1) === ':') {
-          const selectorProps = {}
-          // 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
-            let calculatedProp = classProp({ props: underSelectorProps })
-
-            if (Array.isArray(calculatedProp)) {
-              calculatedProp = Object.assign({}, ...calculatedProp)
-            }
-
-            for (const finalProp in calculatedProp) {
-              selectorProps[finalProp] = calculatedProp[finalProp]
-            }
-          }
-
-          const { SELECTORS } = el.class
-          if (SELECTORS) SELECTORS[selectorKey] = selectorProps
-          else {
-            el.class.SELECTORS = {
-              [selectorKey]: selectorProps
-            }
-          }
-        }
-      }
-    }
-  }
-}