@symbo.ls/uikit 2.7.7 → 2.7.16

package/src/IconText.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { Flex, Icon } from '.'
+
+export const IconText = {
+  extend: Flex,
+
+  props: {
+    align: 'center center',
+    lineHeight: 1
+  },
+
+  icon: {
+    extend: Icon,
+    if: ({ parent }) => parent.props.icon,
+    props: 'match'
+  },
+
+  text: ({ props }) => props.text
+}

package/src/Input.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import { Focusable } from '.'
+
+export const Input = {
+  extend: [Focusable],
+  tag: 'input',
+
+  props: {
+    border: 'none',
+    type: 'input',
+    theme: 'quaternary',
+    fontSize: 'A',
+    round: 'C',
+    lineHeight: 1,
+    fontFamily: 'smbls',
+    padding: 'Z A'
+  },
+
+  attr: {
+    pattern: ({ props }) => props.pattern,
+    minlength: ({ props }) => props.minlength,
+    maxlength: ({ props }) => props.maxlength,
+    name: ({ props }) => props.name,
+    placeholder: ({ props }) => props.placeholder,
+    value: ({ props, state }) => props.value,
+    disabled: ({ props }) => props.disabled || null,
+    readonly: ({ props }) => props.readonly,
+    required: ({ props }) => props.required,
+    type: ({ props }) => props.type
+  }
+}

package/src/Label.js

@@ -0,0 +1,25 @@
+'use strict'
+
+import { Button } from '.'
+
+export const Label = {
+  extend: Button,
+
+  props: {
+    fontSize: 'Z2',
+    emoji: '👍',
+    text: '3',
+    padding: 'X2 Z',
+    round: 'C',
+    lineHeight: 1,
+    gap: 'X2',
+    depth: 16,
+    fontWeight: '500',
+    background: 'blue .3',
+    color: 'white'
+  },
+
+  emoji: {
+    props: ({ parent }) => ({ text: parent.props.emoji })
+  }
+}

package/src/Link.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import { exec } from '@domql/utils'
+import { Focusable } from './atoms'
+
+export const Link = {
+  extend: Focusable,
+  tag: 'a',
+  props: {
+    aria: {},
+    fontWeight: 'bold',
+    textDecoration: 'none',
+    color: 'currentColor'
+  },
+  attr: {
+    href: element => exec(element.props.href, element) || exec(element.props, element).href,
+    target: ({ props }) => props.target,
+    'aria-label': ({ props }) => props.aria ? props.aria.label : props.text
+  }
+}

package/src/Notification.js

@@ -0,0 +1,46 @@
+'use strict'
+
+import { IconText, Flex } from '.'
+
+export const Notification = {
+  extend: Flex,
+
+  props: {
+    theme: 'alert',
+    padding: 'Z1 B Z A',
+    round: 'A A A Y2',
+    gap: 'X2',
+    cursor: 'pointer',
+    align: 'flex-start center',
+
+    icon: {
+      icon: 'info outline'
+    },
+
+    article: {
+      flow: 'column',
+      align: 'flex-start',
+      gap: 'X2',
+      title: {
+        fontWeight: '600',
+        lineHeight: '1em',
+        text: 'Notification'
+      },
+      p: {
+        fontSize: 'Z',
+        margin: '0',
+        text: 'is not always a distraction'
+      }
+    }
+  },
+
+  icon: {
+    extend: [IconText]
+  },
+
+  article: {
+    extend: Flex,
+    title: {},
+    p: {}
+  }
+}

package/src/Pills.js

@@ -0,0 +1,25 @@
+'use strict'
+
+import { Flex } from '.'
+
+export const Pills = {
+  extend: Flex,
+  props: (el, s) => ({
+    display: 'flex',
+    gap: 'Y2',
+
+    childProps: {
+      background: 'gray6',
+      width: 'Y2',
+      height: 'Y2',
+      round: 'A',
+
+      '.active': {
+        background: 'gray9'
+      }
+    }
+  }),
+  childExtend: {
+    props: (el, s) => ({ active: parseInt(el.key) === s.active })
+  }
+}

package/src/Range.js

@@ -0,0 +1,132 @@
+'use strict'
+
+import { opacify } from '@symbo.ls/scratch'
+import { isFunction } from '@domql/utils'
+
+import { SquareButton } from '.'
+
+const props = {
+  appearance: 'none',
+  width: '100%',
+  height: '2px',
+  outline: 'none',
+  flex: 1,
+
+  style: {
+    appearance: 'none'
+  },
+
+  '::-webkit-slider-thumb': {
+    boxSizing: 'content-box',
+    width: '8px',
+    height: '8px',
+    borderWidth: '2px',
+    borderStyle: 'solid',
+    borderRadius: '100%',
+    opacity: '.8',
+
+    style: {
+      appearance: 'none'
+    }
+  },
+
+  '::-webkit-slider-runnable-track': {
+  },
+
+  '@dark': {
+    background: 'white 0.2',
+
+    '::-webkit-slider-thumb': {
+      background: '#232526',
+      borderColor: opacify('#454646', 0.75)
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: opacify('#fff', 0.35)
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: '#3C6AC0'
+      }
+    }
+  },
+
+  '@light': {
+    background: 'gray9',
+
+    '::-webkit-slider-thumb': {
+      background: 'white',
+      borderColor: 'gray9'
+    },
+
+    ':hover': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'gray7'
+      }
+    },
+
+    ':focus': {
+      '::-webkit-slider-thumb': {
+        borderColor: 'blue'
+      }
+    }
+  }
+}
+
+export const Range = {
+  props,
+
+  tag: 'input',
+  attr: { type: 'range' }
+}
+
+const listenProp = (el, prop, def) => {
+  const val = el.props && el.props[prop]
+  const r = (isFunction(val) ? val(el, el.state) : val !== undefined ? val : def !== undefined ? def : 50)
+  return r + ''
+}
+
+export const RangeWithButtons = {
+  minus: {
+    extend: SquareButton,
+    props: { theme: 'tertiary', icon: 'minus' },
+    on: {
+      click: (ev, el, s) => {
+        el.props && isFunction(el.props.onClick) && el.props.onClick(ev, el, s)
+      }
+    }
+  },
+  value: {
+    style: { width: '4ch' },
+    tag: 'span',
+    text: (el, s) => {
+      const unit = listenProp(el.parent.input, 'unit', '')
+      return '' + (s.value || 50) + unit
+    }
+  },
+  input: {
+    extend: Range,
+    attr: {
+      value: (el, s) => parseFloat(s.value),
+      min: (el, s) => listenProp(el, 'min', 0),
+      max: (el, s) => listenProp(el, 'max', 100),
+      step: (el, s) => listenProp(el, 'step', 1)
+    },
+    on: {
+      input: (ev, el, s) => el.props && isFunction(el.props.onInput) && el.props.onInput(ev, el, s),
+      change: (ev, el, s) => el.props && isFunction(el.props.onChange) && el.props.onChange(ev, el, s)
+    }
+  },
+  plus: {
+    extend: SquareButton,
+    props: { theme: 'tertiary', icon: 'plus' },
+    on: {
+      click: (ev, el, s) => {
+        el.props && isFunction(el.props.onClick) && el.props.onClick(ev, el, s)
+      }
+    }
+  }
+}

package/src/Select.js

@@ -0,0 +1,36 @@
+'use strict'
+
+import { Focusable } from './atoms'
+
+export const Select = {
+  extend: Focusable,
+  tag: 'select',
+
+  props: {
+    fontSize: 'A',
+    style: {
+      border: 'none',
+      boxSizing: 'border-box',
+      cursor: 'pointer'
+    }
+  },
+
+  childExtend: {
+    tag: 'option',
+    props: {
+      value: '',
+      selected: '',
+      disabled: ''
+    },
+    attr: {
+      value: ({ props }) => props.value,
+      selected: ({ props }) => props.selected,
+      disabled: ({ props }) => props.disabled
+    }
+  },
+
+  attr: {
+    name: ({ props }) => props.name,
+    disabled: ({ props }) => props.disabled
+  }
+}

package/src/Sidebar.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { Icon, Link } from '.'
+
+const MenuItem = {
+  extend: Link,
+  props: { icon: '' },
+  glyph: {
+    extend: Icon,
+    name: ({ props }) => props.icon
+  }
+}
+
+export const Sidebar = {
+  caption: '',
+  nav: {
+    style: {
+      a: { cursor: 'pointer' }
+    },
+    childExtend: MenuItem,
+    ...[{}]
+  }
+}

package/src/TextArea.js

@@ -0,0 +1,15 @@
+'use strict'
+
+import { Input, Focusable } from '.'
+
+const props = {
+  height: 'E',
+  lineHeight: 1.4,
+  style: { resize: 'none' }
+}
+
+export const TextArea = {
+  extend: [Input, Focusable],
+  props,
+  tag: 'textarea'
+}

package/src/Tooltip.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { Flex } from '.'
+
+export const Tooltip = {
+  extend: Flex,
+  props: {
+    background: 'black',
+    color: 'white',
+    flow: 'column',
+    shape: 'tooltip',
+    shapeDirection: 'top',
+    padding: 'Z1 A',
+    round: 'Y2',
+    minWidth: 'D2',
+    gap: 'X',
+    textAlign: 'center',
+
+    title: {
+      fontWeight: 500,
+      color: 'gray12',
+      text: 'And tooltip is coming'
+    },
+    p: {
+      fontSize: 'Z2',
+      margin: '0',
+      color: 'gray6',
+      text: 'and winter too',
+      fontWeight: '400'
+    }
+  },
+
+  attr: { tooltip: true },
+
+  title: {},
+  p: {}
+}

package/src/User.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import { Img, Flex } from '.'
+
+export const User = {
+  extend: Img,
+  key: 'nikoloza',
+  props: {
+    display: 'block',
+    avatarType: 'initials',
+    borderRadius: '100%',
+    boxSize: 'B',
+    cursor: 'pointer'
+  },
+  attr: {
+    src: ({ key, props }) => props.src || `https://avatars.dicebear.com/api/${props.avatarType || 'adventurer-neutral'}/${props.key || key}.svg`
+  }
+}
+
+export const UserBundle = {
+  extend: Flex,
+  childExtend: {
+    extend: User,
+    props: ({ key }) => ({
+      boxSize: 'B1',
+      border: '0.1312em, black .85, solid',
+      ':not(:last-child)': {
+        margin: '0 -Y2 0 0'
+      }
+    })
+  }
+}

package/src/__/Media copy.js

@@ -0,0 +1,121 @@
+'use strict'
+
+import { merge, isArray } from '@domql/utils'
+import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
+
+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) => applyCaseProps(key, props, isSubtree ? result : result.case, element),
+  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(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 })
+  if (isArray(classExec)) {
+    classExec = classExec.reduce((a, c) => merge(a, c), {})
+  }
+
+  for (const finalProp in classExec) {
+    result[finalProp] = classExec[finalProp]
+  }
+}
+
+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 mediaName = CONFIG_MEDIA[key.slice(1)]
+  const mediaKey = `@media screen and ${mediaName}`
+  result[mediaKey] = convertPropsToClass(props, result, element)
+}
+
+const applySelectorProps = (key, props, result, element) => {
+  const selectorKey = `&${key}`
+  result[selectorKey] = convertPropsToClass(props, result, element)
+}
+
+const applyCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  if (!CONFIG_CASES[caseKey]) return
+  merge(result, convertPropsToClass(props, result, element))
+}
+
+const applyConditionalCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  if (!element.props[caseKey]) return // remove classname if not here
+  merge(result, convertPropsToClass(props, result, element))
+}
+
+const init = (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 = el => {
+  // FORCE PROJECT_STATE UPDATE:
+  const { props, class: className } = el
+  const rootState = el.__root ? el.__root.state : el.state
+  // if (el.key !== 'app') return
+  const { props, class: className } = element
+
+  if (props.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_PROJECT_STATE = 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 = {}
+      }
+    }
+  }
+}
+
+export const Responsive = {
+  on: { init, initUpdate }
+}

package/src/atoms/Animation.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
+import { isObject } from '@domql/utils'
+import { emotion } from '@symbo.ls/emotion'
+const { keyframes } = emotion
+
+const applyAnimationProps = (animation, element) => {
+  if (isObject(animation)) return { animationName: keyframes(animation) }
+  const { ANIMATION } = element.context && element.context.system
+  const record = ANIMATION[animation]
+  return keyframes(record)
+}
+
+export const Animation = {
+  class: {
+    animation: (el) => el.props.animation && {
+      animationName: applyAnimationProps(el.props.animation, el),
+      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
+      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
+      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
+      animationFillMode: el.props.animationFillMode || 'both',
+      animationPlayState: el.props.animationPlayState,
+      animationDirection: el.props.animationDirection
+    },
+    animationName: (el) => el.props.animationName && {
+      animationName: applyAnimationProps(el.props.animationName, el)
+    },
+
+    animationDuration: ({ props }) => props.animationDuration && ({
+      animationDuration: getTimingByKey(props.animationDuration).timing
+    }),
+    animationDelay: ({ props }) => props.animationDelay && ({
+      animationDelay: getTimingByKey(props.animationDelay).timing
+    }),
+    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
+      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
+    }),
+    animationFillMode: ({ props }) => props.animationFillMode && ({
+      animationFillMode: props.animationFillMode
+    }),
+    animationPlayState: ({ props }) => props.animationPlayState && ({
+      animationPlayState: props.animationPlayState
+    }),
+    animationIterationCount: ({ props }) => props.animationIterationCount && ({
+      animationIterationCount: props.animationIterationCount || 1
+    }),
+    animationDirection: ({ props }) => props.animationDirection && ({
+      animationDirection: props.animationDirection
+    })
+  }
+}