@symbo.ls/uikit 2.7.7 → 2.7.15

package/src/atoms/Shape/style.js

@@ -0,0 +1,204 @@
+'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

@@ -0,0 +1,40 @@
+'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

@@ -0,0 +1,136 @@
+'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

@@ -0,0 +1,55 @@
+'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

@@ -0,0 +1,8 @@
+'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

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

package/src/atoms/index.js

@@ -0,0 +1,24 @@
+'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

@@ -0,0 +1,32 @@
+'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

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

package/index.js

@@ -1,30 +0,0 @@
-'use strict'
-
-export * from '@symbo.ls/init'
-
-// export * from './styles'
-
-export * from '@symbo.ls/atoms'
-
-export * from '@symbo.ls/box'
-
-export * from '@symbo.ls/svg'
-export * from '@symbo.ls/icon'
-export * from '@symbo.ls/img'
-export * from '@symbo.ls/link'
-export * from '@symbo.ls/icon-text'
-export * from '@symbo.ls/input'
-export * from '@symbo.ls/field'
-export * from '@symbo.ls/button'
-
-export * from '@symbo.ls/buttonset'
-export * from '@symbo.ls/user'
-export * from '@symbo.ls/banner'
-export * from '@symbo.ls/slider'
-export * from '@symbo.ls/notification'
-export * from '@symbo.ls/dropdown'
-export * from '@symbo.ls/datepicker'
-export * from '@symbo.ls/tooltip'
-export * from '@symbo.ls/label'
-export * from '@symbo.ls/pills'
-export * from '@symbo.ls/select'

package/react.js

@@ -1,8 +0,0 @@
-'use strict'
-
-import Box from '@symbo.ls/react-box'
-
-export * from '@symbo.ls/init'
-export { Box }
-
-// export * from './styles'