@symbo.ls/preview 2.7.21 → 2.7.23

package/src/components/Page.js

@@ -1,135 +0,0 @@
-'use strict'
-
-import { PageTemplate, Overlay, Flex, IconButton } from '@symbo.ls/components'
-import { Link } from '@symbo.ls/components/src/Link'
-
-import MASK1 from '../assets/mask1.png'
-import MASK2 from '../assets/mask2.png' // eslint-disable-line
-
-export const Page = {
-  tag: 'main',
-  extend: PageTemplate,
-
-  props: {
-    maxWidth: 'K-default'
-  }
-}
-
-export const InitPage = {
-  tag: 'main',
-  extend: Flex,
-
-  props: {
-    width: '100%',
-    maxWidth: 'J',
-    flow: 'column',
-    position: 'relative',
-    align: 'flex-start',
-
-    content: { width: '100%' }
-  },
-
-  back: {
-    extend: [Link, IconButton],
-    props: {
-      position: 'absolute',
-      fontSize: 'A1',
-      top: '0',
-      right: '102.5%',
-      icon: 'arrow angle left'
-    }
-  }
-}
-
-const ifWeHaveComponents = (state) => {
-  const keys = Object.keys(state.__projectLibrary)
-  return !!keys.length
-}
-
-export const DisabledPage = {
-  props: ({ state }) => ({
-    active: ifWeHaveComponents(state),
-    maxHeight: 'none',
-    overflow: 'visible',
-
-    '!active': {
-      maxHeight: 'calc(100vh - 7em)',
-      overflow: 'hidden'
-    },
-
-    '.active': {
-      maxHeight: 'none',
-      overflow: 'visible'
-    }
-  }),
-
-  on: {
-    initUpdate: (element, state) => {
-      element.setProps({ active: ifWeHaveComponents(state) }, { preventUpdate: true, ignoreInitUpdate: true })
-    }
-  },
-
-  disablingOverlay: {
-    extend: [Overlay, Flex],
-
-    props: ({ state }) => ({
-      active: ifWeHaveComponents(state),
-      overflow: 'hidden',
-      background: 'shadow-overlay',
-      '.active': {
-        animation: 'fadeOutDown',
-        animationDuration: 'G',
-        transition: 'G defaultBezier',
-        transitionProperty: 'opacity, transform, visibility',
-        opacity: '0',
-        visibility: 'hidden',
-        transform: 'translate3d(0, 12.5%, 1px)',
-        pointerEvents: 'none'
-      },
-      '!active': {
-        animation: 'fadeInUp',
-        animationDuration: 'G'
-      }
-    }),
-
-    Overlay: {
-      background: 'gradient-colorful',
-      inset: '0 0 0 0',
-      opacity: '.9',
-      style: {
-        WebkitMaskImage: 'url(' + MASK1 + ')',
-        WebkitMaskSize: '100% 100%'
-      }
-    },
-
-    message: {
-      props: ({ state }) => ({
-        animation: 'fadeInUpShort',
-        animationDuration: 'G',
-        animationDelay: 'G',
-        margin: 'auto auto 0',
-        padding: 'C1 E C',
-        width: '100%',
-        maxWidth: 'K-default',
-        ArticleBig: {
-          p: {
-            text: 'Open up ' + state.appKey + ' in a new window to start working with components'
-          }
-        }
-      }),
-
-      ArticleBig: {
-        title: {
-          text: 'Connect to your website'
-        },
-        p: {
-          color: 'white .8',
-          margin: 'X 0 0',
-          animation: 'fadeInUpShort',
-          animationDuration: 'G',
-          animationDelay: 'G1'
-        }
-      }
-    }
-  }
-}

package/src/components/ResponsivePreview.js

@@ -1,44 +0,0 @@
-'use strict'
-
-import { Flex, ResponsiveSreensPreview } from '@symbo.ls/components'
-
-const footer = {
-  extend: Flex,
-  props: {
-    gap: 'A1',
-    align: 'center space-between'
-  },
-
-  Paragraph: {
-    text: 'For the best experience, check it out from screens larger than 1980px',
-    color: 'gray6',
-    margin: '0'
-  },
-
-  ResponsiveToolBar: {
-    extend: true,
-    devices: {
-      childExtend: {
-        on: {
-          click: (ev, el, s) => {
-            const previewSize = s.parent.previewSize !== s.key ? s.key : 'mobileS'
-            s.parent.update({ previewSize })
-          }
-        }
-      }
-    }
-  }
-}
-
-export const ResponsivePreview = {
-  extend: ResponsiveSreensPreview,
-
-  props: {
-    position: 'absolute',
-    left: 'B',
-    right: 'B',
-    padding: '0 0 Z2'
-  },
-
-  footer
-}

package/src/components/Route.js

@@ -1 +0,0 @@
-'use strict'

package/src/components/ShapePreview.js

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

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

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

@@ -1,41 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-import { SpacingButton } from '..' // eslint-disable-line
-import { SPACING_BUTTONS } from './props'
-
-export const setTableButtons = ({ state }) =>
-  Object.keys(SPACING_BUTTONS).filter(v => {
-    const rowState = state[state.selectedIndex]
-    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

@@ -1,114 +0,0 @@
-'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)
-    }
-  }
-}