@symbo.ls/preview 2.0.7 → 2.6.0

package/src/components/ShapePreview.js

@@ -0,0 +1,63 @@
+'use strict'
+
+import { Scene, Flex, Code } from '@symbo.ls/components'
+
+const scene = {
+  extend: Scene,
+
+  scene: {
+    props: {
+      content: {
+        background: 'shape 1',
+        color: 'gray11',
+        padding: 'Z A1',
+        text: 'Shape Preview'
+      }
+    },
+
+    on: {
+      update: (el, s) => {
+        el.set({
+          props: s.props
+        })
+      }
+    }
+  }
+}
+
+export const ShapePreview = {
+  extend: Flex,
+  props: {
+    height: 'E3',
+    zIndex: '9999',
+    gap: 'A',
+    alignItems: 'stretch ',
+
+    scene: { flex: 1 },
+
+    style: {
+      backdropFilter: 'blur(15px)'
+    }
+  },
+
+  scene,
+  code: {
+    extend: Code,
+    props: ({ state }) => ({
+      hide: Object.keys(state.props).length === 0,
+      flex: '0 0 360px',
+      margin: '0',
+      code: {
+        height: '100%',
+        margin: '0'
+      },
+      buttons: { marginInline: 'X2' }
+    }),
+    title: null,
+    code: {
+      props: {
+        text: ({ state }) => 'const props = ' + JSON.stringify(state.props, null, 2)
+      }
+    }
+  }
+}

package/src/components/ShapeSet.js

@@ -0,0 +1,85 @@
+'use strict'
+
+import { ClickableItem, Flex } from '@symbo.ls/components'
+
+const isActive = (el, s) => s.parent.active === `${el.parent.parent.parent.key}-${el.key}`
+
+const ShapeItem = {
+  extend: [ClickableItem, Flex],
+
+  props: (el, s) => ({
+    padding: 'B',
+    round: 'Z',
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: '0, shape, solid',
+    background: 'gray1',
+    theme: null,
+    cursor: 'pointer',
+
+    active: isActive(el, s),
+
+    '.active': {
+      outline: 'X, shape, solid',
+      opacity: '1',
+      background: 'gray2'
+    },
+
+    _shape: {
+      transition: 'A defaultBezier',
+      transitionProperty: 'background',
+      width: 'C1',
+      height: 'C1',
+      background: 'gray3'
+    }
+  }),
+
+  _shape: {},
+
+  on: {
+    click: (ev, el, s) => {
+      const active = `${el.parent.parent.parent.key}-${el.key}`
+      s.parent.props = s.parse()
+      s.parent.update({ active })
+    },
+    mouseover: (ev, el, s) => {
+      el._shape.setProps({ background: 'gray5' })
+    },
+    mouseleave: (ev, el, s) => {
+      const active = isActive(el, s)
+      if (!active) el._shape.setProps({ background: 'gray3' })
+    },
+    update: (el, s) => {
+      const active = isActive(el, s)
+      el._shape.setProps({ background: active ? 'gray5' : 'gray3' })
+    }
+  }
+}
+
+export const ShapeSet = {
+  props: {
+    label: {
+      display: 'block',
+      opacity: '.65',
+      padding: '0 0 Z 0',
+      span: {
+        opacity: '.65'
+      }
+    }
+  },
+
+  label: {},
+  list: {
+    extend: Flex,
+    props: {
+      gap: 'A2',
+      wrap: 'wrap'
+    },
+    childExtend: {
+      extend: ShapeItem,
+      _shape: {
+        props: ({ state }) => state
+      }
+    }
+  }
+}

package/src/components/SlidersWithResponsive.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+export const SlidersWithResponsive = {
+  extend: Flex,
+
+  props: {
+    align: 'flex-end space-between',
+    position: 'sticky',
+    top: 'C2',
+    theme: 'header',
+    zIndex: '1000',
+    margin: '-B2 -B -B',
+    padding: 'B2 B B',
+    style: {
+      backdropFilter: 'blur(15px)'
+    }
+  },
+
+  SequenceSliders: {},
+  ResponsiveToolBar: {}
+}

package/src/components/SpacingButton/actionButtons.js

@@ -0,0 +1,41 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+import { SpacingButton } from '..'
+import { SPACING_BUTTONS } from './props'
+
+export const setTableButtons = ({ state }) =>
+  Object.keys(SPACING_BUTTONS).filter(v => {
+    const rowState = state.sequence[state.selectedKey]
+    const { maxValue } = SPACING_BUTTONS[v]
+    return maxValue ? maxValue > (rowState && rowState.val) : true
+  })
+
+export const setRowButtons = ({ state }) =>
+  Object.keys(SPACING_BUTTONS).filter(v => {
+    const { maxValue } = SPACING_BUTTONS[v]
+    return maxValue ? maxValue > state.val : true
+  })
+
+export default {
+  extend: Flex,
+
+  props: {
+    position: 'absolute',
+    left: 'G3',
+    gap: 'X',
+    top: 'Y',
+    height: 'B2',
+    zIndex: 99,
+    boxSizing: 'content-box',
+    padding: '- - E',
+    transition: 'C ease-out',
+    transitionProperty: 'transform, opacity',
+    opacity: '0',
+
+    ':hover': { opacity: '1' }
+  },
+
+  childExtend: SpacingButton,
+  $setStateCollection: setTableButtons
+}

package/src/components/SpacingButton/dropdown.js

@@ -0,0 +1,114 @@
+'use strict'
+
+import {
+  Dropdown,
+  GridInDropdown
+} from '@symbo.ls/components'
+
+import {
+  ChoosableButton,
+  diffIconTypes,
+  diffPropPosition,
+  diffPropValue,
+  getStateTree,
+  keysOf
+} from '.'
+import { SPACING_BUTTONS } from './props'
+
+const ButtonInDropdown = {
+  extend: [ChoosableButton],
+  props: (element) => {
+    const { table, row, property: direction } = getStateTree(element)
+    const property = direction.parent
+
+    const propValue = property.value
+    const directionValue = direction.value
+
+    const activeProperty = SPACING_BUTTONS[property.value]
+    const keyLength = Object.keys(activeProperty).length
+    const iconKey = diffIconTypes(propValue, directionValue)
+
+    const active = table.props[propValue] === (row && row.key)
+
+    const gridArea = keyLength > 3 && diffPropPosition(propValue, directionValue)
+
+    return {
+      active,
+      gridArea,
+      lazyLoad: true,
+      icon: { name: iconKey },
+      theme: null,
+      '@dark': {
+        background: 'transparent 0',
+        color: 'gray7',
+        ':hover': {
+          theme: 'quinary',
+          color: 'gray8'
+        }
+      },
+      ':hover': null,
+      '.active': {
+        theme: null,
+        color: 'blue'
+      }
+    }
+  },
+  attr: { title: ({ state }) => state.value },
+  on: {
+    click: (ev, element) => {
+      const { table, row, property: direction } = getStateTree(element)
+      const property = direction.parent
+
+      const propKey = diffPropValue(property.value, direction.value)
+      const active = table.props[propKey] === row.key
+
+      if (active) {
+        delete table.props[propKey] && table.update()
+      } else {
+        table.update({ props: { [propKey]: row.key } })
+      }
+    }
+  }
+}
+
+export default {
+  extend: Dropdown,
+
+  props: {
+    lazyLoad: true,
+    minWidth: 'none',
+    left: 'auto',
+    grid: { gap: '0' }
+  },
+
+  header: { text: ({ state }) => state.value },
+
+  grid: {
+    extend: GridInDropdown,
+
+    props: ({ state }) => {
+      const keys = keysOf(state)
+      if (keys.length < 4) {
+        return {
+          lazyLoad: true,
+          columns: 'repeat(4, 1fr)'
+        }
+      }
+      return {
+        lazyLoad: true,
+        columns: 'auto 32px auto',
+        rows: 'auto 32px auto',
+        templateAreas: `"endStart blockStart startEnd"
+        "inlineStart content inlineEnd"
+        "startStart blockEnd endEnd"`
+      }
+    },
+
+    childExtend: ButtonInDropdown,
+
+    $setStateCollection: (element) => {
+      const { property } = getStateTree(element)
+      return keysOf(property)
+    }
+  }
+}

package/src/components/SpacingButton/index.js

@@ -0,0 +1,248 @@
+'use strict'
+
+import { WiderButton, DropdownParent, Icon } from '@symbo.ls/components'
+
+import { SPACING_BUTTONS } from './props'
+import dropdown from './dropdown'
+
+export const ChoosableButton = {
+  props: ({ key }) => ({
+    padding: 'Z',
+    icon: key,
+    theme: null,
+    transition: 'B defaultBezier',
+    transitionProperty: 'opacity, background, color',
+    '@dark': {
+      background: 'gray1',
+      color: 'gray5'
+    },
+    '@light': {
+      background: 'white .5',
+      color: 'gray7'
+    },
+    ':hover': {
+      theme: 'quaternary',
+      '.active': { color: 'blue' }
+    },
+    '.active': {
+      theme: null
+    }
+  })
+}
+
+export const DotForPropButton = {
+  props: (el) => {
+    const { table, row, property: direction } = getStateTree(el)
+    const property = direction.parent
+
+    const propKey = diffPropValue(property.value, direction.value)
+    const active = table.props[propKey] === (row && row.key)
+
+    const isRadius = property.value === 'borderRadius'
+
+    return {
+      position: 'absolute',
+      round: '100%',
+      background: 'blue',
+      boxSize: 'W2',
+      lazyLoad: true,
+
+      hide: !active,
+      isRadius,
+
+      '!isRadius': {
+        ':nth-child(1)': { left: '45%', top: 'W' },
+        ':nth-child(2)': { right: 'W', top: '45%' },
+        ':nth-child(3)': { left: '45%', bottom: 'W' },
+        ':nth-child(4)': { left: 'W', top: '45%' }
+      },
+
+      '.isRadius': {
+        ':nth-child(1)': { left: 'X2', top: 'X2' },
+        ':nth-child(2)': { right: 'X2', top: 'X2' },
+        ':nth-child(3)': { right: 'X2', bottom: 'X2' },
+        ':nth-child(4)': { left: 'X2', bottom: 'X2' }
+      }
+    }
+  }
+}
+
+export const DotForRowButton = {
+  extend: DotForPropButton,
+  props: ({ state }) => {
+    const direction = state
+    const property = direction.parent
+    const row = property.parent
+    const table = row.parent
+
+    const propKey = diffPropValue(property.value, direction.value)
+    const active = table.props[propKey] === row.key
+
+    return {
+      hide: !active,
+      background: 'blue .65'
+    }
+  }
+}
+
+export const SpacingButton = {
+  extend: [ChoosableButton, DropdownParent, WiderButton],
+
+  props: (element) => {
+    const { table, row, property } = getStateTree(element)
+    const propValue = property.value
+    const active = table.props[propValue] === (row && row.key)
+    return {
+      active,
+      icon: { name: property.value },
+
+      '.active': {
+        color: 'blue',
+        ':hover': { color: 'blue' }
+      },
+
+      style: {
+        '&:hover, &:focus-visible': {
+          '& [tooltip]': {
+            transform: 'translate3d(-50%,0,0)'
+          }
+        }
+      }
+    }
+  },
+
+  dots: {
+    props: {
+      lazyLoad: true,
+      position: 'absolute',
+      inset: '0 0 0 0'
+    },
+
+    on: {
+      click: (ev, el) => {
+        const { table, row, property } = getStateTree(el)
+        const active = table.props[property.value] === row.key
+        if (active) {
+          delete table.props[property.value] && table.update()
+        } else {
+          const allKeys = Object.keys(table.props)
+          allKeys.filter(v => {
+            const splitInWords = property.value.split(/(?=[A-Z])/)
+            return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
+          })
+            .forEach(v => delete table.props[v])
+          table.update({ props: { [property.value]: row.key } })
+        }
+      }
+    },
+
+    attr: { title: ({ state }) => state.value },
+
+    childExtend: DotForPropButton,
+
+    $setStateCollection: ({ state }) => {
+      const buttonsByProperty = keysOf(state)
+      return buttonsByProperty
+    }
+  },
+
+  dropdown
+}
+
+const DotsInButton = SpacingButton.dots
+
+export const SpacingRowButton = {
+  props: ({ state }) => {
+    const property = state
+    const row = property.parent
+    const table = row.parent
+
+    const propKey = property.value
+
+    const active = Object.keys(table.props).filter(prop => {
+      const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+      const keyMathes = table.props[prop] === row.key
+      return hasProp && keyMathes
+    }).length
+
+    return {
+      active: !!active,
+      position: 'relative',
+      round: 'Z',
+      display: 'flex',
+
+      icon: {
+        name: propKey,
+        opacity: '0',
+        color: 'gray5',
+        margin: 'auto'
+      },
+
+      '.active': {
+        boxShadow: '0, 0, 0, 3px, gray1, inset'
+      }
+    }
+  },
+
+  icon: {
+    extend: Icon,
+    props: ({ state }) => {
+      const property = state
+      const row = property.parent
+      const table = row.parent
+
+      const propKey = property.value
+      const middleActive = table.props[propKey] === row.key
+
+      const active = Object.keys(table.props).filter(prop => {
+        const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+        const keyMathes = table.props[prop] === row.key
+        return hasProp && keyMathes
+      }).length
+
+      return {
+        active,
+        middleActive,
+        '.active': { opacity: '1' },
+        '.middleActive': { color: 'blue' }
+      }
+    }
+  },
+
+  dots: {
+    childExtend: DotForRowButton,
+    $setStateCollection: DotsInButton.$setStateCollection
+  }
+}
+
+export const getStateTree = element => {
+  const table = element.lookup('Page').state
+  const row = table.sequence[table.selectedKey]
+  const property = element.state
+
+  return { table, row, property }
+}
+
+export const jointPropDirection = (parentKey, key) => {
+  return parentKey + key.slice(0, 1).toUpperCase() + key.slice(1)
+}
+
+export const diffPropValue = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) parentKey = 'border'
+  return jointPropDirection(parentKey, key)
+}
+
+export const diffPropPosition = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) return key.split('Width')[0]
+  return key
+}
+
+export const diffIconTypes = (parentKey, key) => {
+  if (parentKey.includes('borderWidth')) key = key.split('Width')[0]
+  if (parentKey.includes('margin') || parentKey === 'borderWidth') parentKey = 'padding'
+  return jointPropDirection(parentKey, key)
+}
+
+export const keysOf = state => {
+  return Object.keys(SPACING_BUTTONS[state.value]).filter(v => v !== 'maxValue')
+}

package/src/components/SpacingButton/props.js

@@ -0,0 +1,45 @@
+'use strict'
+
+export const SPACING_BUTTONS = {
+  margin: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  height: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  width: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  borderWidth: {
+    maxValue: 1280,
+    blockStartWidth: {},
+    inlineEndWidth: {},
+    blockEndWidth: {},
+    inlineStartWidth: {}
+  },
+  padding: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  gap: {
+    maxValue: 3000,
+    Horizontal: {},
+    Vertical: {}
+  },
+  borderRadius: {
+    maxValue: 1280,
+    endStart: {},
+    startEnd: {},
+    endEnd: {},
+    startStart: {}
+  }
+}