@symbo.ls/uikit 1.2.2 → 1.2.6

package/components/Atoms/Media.js

@@ -1,164 +0,0 @@
-'use strict'
-
-import { merge, isArray } from '@domql/utils'
-import { getSystemTheme } from './Theme'
-
-const keySetters = {
-  '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
-  ':': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
-  '[': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
-  '&': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
-  $: (key, props, result, element, isSubtree) => applyCaseProps(key, props, isSubtree ? result : result.case, element),
-  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(key, props, isSubtree ? result : result.case, element),
-  '!': (key, props, result, element, isSubtree) => applyConditionalFalsyProps(key, props, isSubtree ? result : result.case, element)
-}
-
-const execClass = (key, props, result, element) => {
-  const { class: className } = element
-  const classnameExec = className[key]
-
-  if (typeof classnameExec !== 'function') return
-
-  let classExec = classnameExec({
-    props,
-    context: element.context,
-    state: element.state
-  })
-  if (isArray(classExec)) {
-    classExec = classExec.reduce((a, c) => merge(a, c), {})
-  }
-
-  for (const finalProp in classExec) {
-    result[finalProp] = classExec[finalProp]
-  }
-
-  return classExec
-}
-
-const convertPropsToClass = (props, result, element) => {
-  const propsClassObj = {}
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (setter) {
-      setter(key, props[key], propsClassObj, element, true)
-      continue
-    } else {
-      execClass(key, props, propsClassObj, element)
-    }
-  }
-
-  return propsClassObj
-}
-
-const applyMediaProps = (key, props, result, element) => {
-  const { context } = element
-  if (!context.system || !context.system.MEDIA) return
-  const globalTheme = getSystemTheme(element)
-  const { MEDIA } = context.system
-  const mediaName = MEDIA[key.slice(1)]
-  const generatedClass = convertPropsToClass(props, result, element)
-
-  const name = key.slice(1)
-  const isTheme = ['dark', 'light'].includes(name)
-  const matchesGlobal = name === globalTheme
-
-  if (globalTheme && isTheme) {
-    if (matchesGlobal) return merge(result, generatedClass)
-    return
-  }
-
-  const mediaKey = `@media screen and ${mediaName}`
-  result[mediaKey] = generatedClass
-  return result[mediaKey]
-}
-
-const applySelectorProps = (key, props, result, element) => {
-  const selectorKey = `&${key}`
-  result[selectorKey] = convertPropsToClass(props, result, element)
-  return result[selectorKey]
-}
-
-const applyCaseProps = (key, props, result, element) => {
-  const { CASES } = element.context && element.context.system
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey]
-  if (!CASES[caseKey] && !isPropTrue) return
-  return merge(result, convertPropsToClass(props, result, element))
-}
-
-const applyConditionalCaseProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] || element.state[caseKey] === true
-  if (!isPropTrue) return // remove classname if not here
-  return merge(result, convertPropsToClass(props, result, element))
-}
-
-const applyConditionalFalsyProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  const isPropTrue = element.props[caseKey] || element.state[caseKey] === true
-  if (!isPropTrue) return merge(result, convertPropsToClass(props, result, element))
-}
-
-const applyTrueProps = (props, result, element) => merge(result, convertPropsToClass(props, result, element))
-
-const beforeClassAssign = (element, s) => {
-  const { props, class: className } = element
-
-  const CLASS_NAMES = {
-    media: {},
-    selector: {},
-    case: {}
-  }
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (setter) setter(key, props[key], CLASS_NAMES, element)
-  }
-
-  merge(className, CLASS_NAMES)
-}
-
-export const initUpdate = element => {
-  const { props, class: className } = element
-  const globalTheme = getSystemTheme(element)
-
-  const parentProps = element.parent.props
-  if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
-    element.setProps({
-      spacingRatio: parentProps.spacingRatio,
-      inheritSpacingRatio: true
-    }, {
-      preventRecursive: true,
-      ignoreInitUpdate: true
-    })
-  }
-
-  if (globalTheme) {
-    const CLASS_NAMES = {
-      media: {},
-      selector: {},
-      case: {}
-    }
-
-    for (const key in props) {
-      const setter = keySetters[key.slice(0, 1)]
-      if (key === 'theme') {
-        props.update({
-          themeModifier: globalTheme
-        }, { preventRecursive: true, ignoreInitUpdate: true, preventDefineUpdate: '$setStateCollection' })
-      } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
-      if (setter) setter(key, props[key], CLASS_NAMES, element)
-    }
-
-    if (Object.keys(CLASS_NAMES.media).length) {
-      className.media = CLASS_NAMES.media
-    }
-    className.selector = CLASS_NAMES.selector
-    className.case = CLASS_NAMES.case
-  }
-}
-
-export const Media = {
-  on: { beforeClassAssign, initUpdate }
-}

package/components/Atoms/Overflow.js

@@ -1,7 +0,0 @@
-'use strict'
-
-export const Overflow = {
-  class: {
-    overflow: ({ props }) => props.overflow && ({ overflow: props.overflow })
-  }
-}

package/components/Atoms/Picture.js

@@ -1,31 +0,0 @@
-'use strict'
-
-import { getSystemTheme } from './Theme'
-
-export const Picture = {
-  tag: 'picture',
-
-  childExtend: {
-    tag: 'source',
-    attr: {
-      media: element => {
-        const { props, key, context } = element
-        const { MEDIA } = context.system
-        const globalTheme = getSystemTheme(element)
-        const mediaName = (props.media || key).slice(1)
-
-        if (mediaName === globalTheme) return '(min-width: 0px)'
-        else if (mediaName === 'dark' || mediaName === 'light') return '(max-width: 0px)'
-
-        return MEDIA[mediaName]
-      },
-      srcset: ({ props }) => props.srcset
-    }
-  },
-
-  // Img: ({ props }) => ({
-  //   width: 'inherit',
-  //   height: 'inherit',
-  //   src: props.src
-  // })
-}

package/components/Atoms/Position.js

@@ -1,21 +0,0 @@
-'use strict'
-
-import { getSpacingByKey } from '@symbo.ls/scratch'
-
-export const Position = {
-  props: {},
-
-  class: {
-    position: ({ props }) => props.position && ({ position: props.position }),
-    inset: ({ props }) => {
-      const { inset } = props
-      if (typeof inset !== 'string') return
-      return { inset: inset.split(' ').map(v => getSpacingByKey(v, 'k').k).join(' ') }
-    },
-
-    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/components/Atoms/Pseudo.js

@@ -1,7 +0,0 @@
-'use strict'
-
-export const Pseudo = {
-  class: {
-    content: ({ props }) => props.content && ({ content: props.content })
-  }
-}

package/components/Atoms/SVG.js

@@ -1,16 +0,0 @@
-'use strict'
-
-const useSVGSymbol = file => `<use xlink:href="${file}" />`
-
-// create SVG symbol
-export const SVG = {
-  tag: 'svg',
-  props: {
-    style: { '*': { fill: 'currentColor' } }
-  },
-  attr: {
-    xmlns: 'http://www.w3.org/2000/svg',
-    'xmlns:xlink': 'http://www.w3.org/1999/xlink'
-  },
-  html: ({ key, props }) => useSVGSymbol(props.src)
-}

package/components/Atoms/Shape/index.js

@@ -1,42 +0,0 @@
-'use strict'
-
-import { exec, isString } from '@domql/utils'
-import { SHAPES } from './style'
-import { getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch'
-import { Pseudo } from '../Pseudo'
-
-const transformBorderRadius = (radius, props, propertyName) => {
-  if (!isString(radius)) return
-  return {
-    borderRadius: radius.split(' ').map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(' ')
-  }
-}
-
-export const Shape = {
-  extend: Pseudo,
-
-  class: {
-    shape: (element) => {
-      const { props } = element
-      const { shape } = props
-      return shape ? exec(SHAPES[shape], element) : null
-    },
-    shapeDirection: ({ props }) => {
-      const { shape, shapeDirection } = props
-      if (!shape || !shapeDirection) return
-      const shapeDir = SHAPES[shape + 'Direction']
-      return shape && shapeDir ? shapeDir[shapeDirection || 'left'] : null
-    },
-    shapeDirectionColor: el => {
-      const { props } = el
-      const { background, backgroundColor } = props
-      const borderColor = getMediaColor(background || backgroundColor, 'borderColor')
-      return props.shapeDirection ? borderColor : null
-    },
-
-    round: ({ props, key, ...el }) => transformBorderRadius(props.round || props.borderRadius, props, 'round'),
-    borderRadius: ({ props, key, ...el }) => transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius')
-  }
-}
-
-export default Shape

package/components/Atoms/Shape/style.js

@@ -1,204 +0,0 @@
-'use strict'
-
-import { UNIT, getColor, getTheme } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
-import { Timing } from '../Timing'
-
-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}` },
-  10: { boxShadow: `rgba(0,0,0,.10) 0 4${UNIT.default} 10${UNIT.default}` },
-  16: { boxShadow: `rgba(0,0,0,.10) 0 8${UNIT.default} 16${UNIT.default}` },
-  26: { boxShadow: `rgba(0,0,0,.10) 0 14${UNIT.default} 26${UNIT.default}` },
-  42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
-}
-
-const getComputedBackgroundColor = ({ props }) => {
-  return getColor(props.borderColor) || getColor(props.backgroundColor) || getColor(props.background)
-}
-
-const inheritTransition = (el) => {
-  const exec = Timing.class.transition(el)
-  return exec && exec['transition']
-}
-
-export const SHAPES = {
-  rectangle: {},
-  circle: { borderRadius: '100%' },
-  bubble: {},
-  tv: {
-    borderRadius: '1.15em/2.5em'
-  },
-
-  tooltip: el => ({
-    position: el.props.position || 'relative',
-    '&:before': {
-      content: '""',
-      display: 'block',
-      width: '0px',
-      height: '0px',
-      border: `.35em solid`,
-      borderColor: getComputedBackgroundColor(el),
-      transition: inheritTransition(el),
-      transitionProperty: 'border-color',
-      position: 'absolute',
-      borderRadius: '.15em'
-    }
-  }),
-
-  tooltipDirection: {
-    top: {
-      '&:before': {
-        top: '0',
-        left: '50%',
-        transform: 'translate(-50%, -50%) rotate(45deg)'
-      }
-    },
-    right: {
-      '&:before': {
-        top: '50%',
-        right: '0',
-        transform: 'translate(50%, -50%) rotate(45deg)'
-      }
-    },
-    bottom: {
-      '&:before': {
-        bottom: '0',
-        left: '50%',
-        transform: 'translate(-50%, 50%) rotate(45deg)'
-      }
-    },
-    left: {
-      '&:before': {
-        top: '50%',
-        left: '0',
-        transform: 'translate(-50%, -50%) rotate(45deg)'
-      }
-    }
-  },
-
-  tag: el => ({
-    position: 'relative',
-    '&:before': {
-      content: '""',
-      display: 'block',
-      background: getComputedBackgroundColor(el),
-      transition: inheritTransition(el),
-      transitionProperty: 'background',
-      borderRadius: '.25em',
-      position: 'absolute',
-      zIndex: '-1',
-      aspectRatio: '1/1',
-      top: '50%',
-      transformOrigin: '50% 50%',
-      height: '73%'
-    }
-  }),
-
-  tagDirection: {
-    top: {
-      '&:before': {
-        bottom: '100%',
-        left: '50%',
-        transform: 'translate(-50%, 50%) rotate(45deg)'
-      }
-    },
-    right: {
-      '&:before': {
-        top: '50%',
-        left: '100%',
-        transform: 'translate(-50%, -50%) rotate(45deg)'
-      }
-    },
-    bottom: {
-      '&:before': {
-        top: '100%',
-        left: '50%',
-        transform: 'translate(-50%, -50%) rotate(45deg)'
-      }
-    },
-    left: {
-      '&:before': {
-        top: '50%',
-        right: '100%',
-        transform: 'translate(50%, -50%) rotate(45deg)'
-      }
-    }
-  },
-
-  hexagon: el => ({
-    position: 'relative',
-    '&:before, &:after': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      zIndex: '-1',
-      borderRadius: '.25em',
-      aspectRatio: '1/1',
-      top: '50%',
-      transformOrigin: '50% 50%',
-      height: '73%',
-      background: getComputedBackgroundColor(el),
-      transition: inheritTransition(el),
-      transitionProperty: 'background'
-    },
-    '&:before': {
-      left: '0',
-      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
-    },
-    '&:after': {
-      left: '100%',
-      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
-    }
-  }),
-
-  chevron: el => ({
-    position: 'relative',
-    // overflow: 'hidden',
-    '&:before, &:after': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      zIndex: '-1',
-      aspectRatio: '1/1',
-      top: '50%',
-      transformOrigin: '50% 50%',
-      transition: inheritTransition(el),
-      transitionProperty: 'background'
-
-    },
-    '&:before': {
-      background: `linear-gradient(225deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%)`
-    },
-    '&:after': {
-      background: getComputedBackgroundColor(el),
-      borderRadius: '.25em'
-    }
-  }),
-
-  chevronDirection: {
-    left: {
-      '&:before': {
-        height: '100%',
-        left: '100%',
-        transform: 'translate3d(-1%, -50%, 1px) scale(-1, 1)'
-      },
-      '&:after': {
-        height: '73%',
-        left: '0',
-        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
-      }
-    },
-    right: {
-      '&:before': {
-        height: '100%',
-        left: '0',
-        transform: 'translate3d(-99%, -50%, 1px)'
-      },
-      '&:after': {
-        height: '73%',
-        left: '100%',
-        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
-      }
-    }
-  }
-}

package/components/Atoms/Text.js

@@ -1,40 +0,0 @@
-'use strict'
-
-import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
-
-export const Text = {
-  text: ({ key, props, state }) => {
-    if (props.text === true) return (state && state[key]) || (props && props[key])
-    return props.text
-  },
-  class: {
-    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 && 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 }),
-    letterSpacing: ({ props }) => props.letterSpacing && ({ letterSpacing: props.letterSpacing }),
-    textAlign: ({ props }) => props.textAlign && ({ textAlign: props.textAlign }),
-    fontWeight: ({ props }) => props.fontWeight && ({
-      fontWeight: props.fontWeight,
-      fontVariationSettings: '"wght" ' + props.fontWeight
-    })
-  }
-}
-
-export const H1 = { tag: 'h1' }
-export const H2 = { tag: 'h2' }
-export const H3 = { tag: 'h3' }
-export const H4 = { tag: 'h4' }
-export const H5 = { tag: 'h5' }
-export const H6 = { tag: 'h6' }
-export const P = { tag: 'p' }
-export const Caption = { tag: 'caption' }
-export const Strong = {
-  tag: 'strong',
-  props: { fontWeight: '700' }
-}
-export const Underline = { tag: 'u' }
-export const Italic = { tag: 'i' }

package/components/Atoms/Theme.js

@@ -1,136 +0,0 @@
-'use strict'
-
-import { getSpacingByKey, getMediaTheme, getColor, getMediaColor } 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 transformBorder = border => {
-  const arr = border.split(', ')
-  return arr.map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    else if (isBorderStyle(v)) return v || 'solid'
-    else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
-    else if (getColor(v).length > 2) return getColor(v)
-    return getSpacingByKey(v, 'border').border
-  }).join(' ')
-}
-
-const transformTextStroke = stroke => ({
-  WebkitTextStroke: stroke.split(', ').map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
-  }).join(' ')
-})
-
-export const transformShadow = shadows => shadows.split('|').map(shadow => {
-  return shadow.split(', ').map(v => {
-    v = v.trim()
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (getColor(v).length > 2) return getColor(v)
-    if (v.includes('px') || v.slice(-2) === 'em') return v
-    const arr = v.split(' ')
-    if (!arr.length) return v
-    return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
-  }).join(' ')
-}).join(',')
-
-const transformBackgroundImage = (backgroundImage, ctx, globalTheme) => ({
-  backgroundImage: backgroundImage.split(', ').map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.includes('url') || v.includes('gradient')) return v
-    else if (ctx.system.GRADIENT[backgroundImage]) {
-      return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
-    }
-    return `url(${v})`
-  }).join(' ')
-})
-
-export const getSystemTheme = (element, state) => {
-  const { context } = element
-  const rootState = element.__root ? element.__root.state : element.state
-  return rootState.globalTheme || context.system.globalTheme
-}
-
-export const Theme = {
-  class: {
-    depth: ({ props }) => depth[props.depth],
-
-    theme: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
-      if (!props.theme) return
-      return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
-    },
-
-    color: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
-      if (!props.color) return
-      return getMediaColor(props.color, 'color', globalTheme)
-    },
-
-    background: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
-      if (!props.background) return
-      return getMediaColor(props.background, 'background', globalTheme)
-    },
-
-    backgroundColor: (element) => {
-      const { props } = element
-      const globalTheme = getSystemTheme(element)
-      if (!props.backgroundColor) return
-      return getMediaColor(props.backgroundColor, 'backgroundColor', globalTheme)
-    },
-
-    backgroundImage: (element) => {
-      const { props, context } = element
-      const globalTheme = getSystemTheme(element)
-      if (!props.backgroundImage) return
-      return transformBackgroundImage(props.backgroundImage, context, globalTheme)
-    },
-    backgroundSize: ({ props }) => props.backgroundSize ? ({ backgroundSize: props.backgroundSize }) : null,
-    backgroundPosition: ({ props }) => props.backgroundPosition ? ({ backgroundPosition: props.backgroundPosition }) : null,
-
-    textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
-
-    outline: ({ props }) => props.outline && ({
-      outline: transformBorder(props.outline)
-    }),
-
-    border: ({ props }) => props.border && ({
-      border: transformBorder(props.border)
-    }),
-    borderColor: ({ props }) => (props.borderColor) && getMediaColor(props.borderColor, 'borderColor'),
-    borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
-
-    borderLeft: ({ props }) => props.borderLeft && ({
-      borderLeft: transformBorder(props.borderLeft)
-    }),
-    borderTop: ({ props }) => props.borderTop && ({
-      borderTop: transformBorder(props.borderTop)
-    }),
-    borderRight: ({ props }) => props.borderRight && ({
-      borderRight: transformBorder(props.borderRight)
-    }),
-    borderBottom: ({ props }) => props.borderBottom && ({
-      borderBottom: transformBorder(props.borderBottom)
-    }),
-
-    boxShadow: ({ props }) => props.boxShadow && ({
-      boxShadow: transformShadow(props.boxShadow)
-    }),
-
-    textShadow: ({ props }) => props.textShadow && ({
-      textShadow: transformShadow(props.textShadow)
-    }),
-
-    opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
-    visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })
-  }
-}