smbls 2.7.12 → 2.8.1

package/src/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/src/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/src/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 })
-  }
-}

package/src/atoms/Timing.js

@@ -1,55 +0,0 @@
-'use strict'
-
-import { isString } from '@domql/utils'
-import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
-
-export const transformTransition = transition => {
-  const arr = transition.split(' ')
-
-  if (!arr.length) return transition
-
-  return arr.map(v => {
-    if (v.slice(0, 2) === '--') return `var(${v})`
-    if (v.length < 3 || v.includes('ms')) {
-      const mapWithSequence = getTimingByKey(v)
-      return mapWithSequence.timing || v
-    }
-    if (getTimingFunction(v)) return getTimingFunction(v)
-    return v
-  }).join(' ')
-}
-
-export const transformDuration = (duration, props, propertyName) => {
-  if (!isString(duration)) return
-  return duration.split(',').map(v => getTimingByKey(v).timing || v).join(',')
-}
-
-export const splitTransition = transition => {
-  const arr = transition.split(',')
-  if (!arr.length) return
-  return arr.map(transformTransition).join(',')
-}
-
-export const Timing = {
-  class: {
-    transition: ({ props }) => props.transition && ({
-      transition: splitTransition(props.transition)
-    }),
-    willChange: ({ props }) => props.willChange && ({
-      willChange: props.willChange
-    }),
-    transitionDuration: ({ props }) => props.transitionDuration && ({
-      transitionDuration: transformDuration(props.transitionDuration)
-    }),
-    transitionDelay: ({ props }) => props.transitionDelay && ({
-      transitionDelay: transformDuration(props.transitionDelay)
-    }),
-    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({
-      transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
-    }),
-    transitionProperty: ({ props }) => props.transitionProperty && ({
-      transitionProperty: props.transitionProperty,
-      willChange: props.transitionProperty
-    })
-  }
-}

package/src/atoms/Transform.js

@@ -1,8 +0,0 @@
-'use strict'
-
-export const Transform = {
-  class: {
-    transform: ({ props }) => props.transform && ({ transform: props.transform }),
-    transformOrigin: ({ props }) => props.transformOrigin && ({ transformOrigin: props.transformOrigin })
-  }
-}

package/src/atoms/XYZ.js

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

package/src/atoms/index.js

@@ -1,24 +0,0 @@
-'use strict'
-
-export * from './Block'
-export * from './Direction'
-export * from './Flex'
-export * from './Grid'
-export * from './Img'
-export * from './Form'
-export * from './Media'
-export * from './Iframe'
-export * from './Interaction'
-export * from './InteractiveComponent'
-export * from './Overflow'
-export * from './Position'
-export * from './Picture'
-export * from './Pseudo'
-export * from './SVG'
-export * from './Shape'
-export * from './Theme'
-export * from './Text'
-export * from './Timing'
-export * from './Transform'
-export * from './XYZ'
-export * from './Animation'

package/src/index.js

@@ -1,32 +0,0 @@
-'use strict'
-
-export * from '@symbo.ls/init'
-export * from '@symbo.ls/socket/client'
-
-// atoms
-export * from './atoms'
-export * from './Box'
-
-// atoms
-export * from './Icon'
-export * from './Link'
-export * from './IconText'
-export * from './Input'
-export * from './TextArea'
-export * from './Field'
-export * from './Button'
-
-export * from './Collection'
-
-// components
-export * from './ButtonSet'
-export * from './User'
-export * from './Banner'
-export * from './Select'
-export * from './Notification'
-export * from './Dropdown'
-export * from './DatePicker'
-export * from './Tooltip'
-export * from './Label'
-export * from './Pills'
-export * from './Range'

package/src/styles.js

@@ -1,6 +0,0 @@
-'use strict'
-
-export const clickable = {
-  cursor: 'pointer',
-  userSelect: 'none'
-}