@symbo.ls/preview 0.0.98 → 2.0.7

package/src/components/FontText.js

@@ -1,193 +0,0 @@
-'use strict'
-
-import { Flex, IconText } from '@symbo.ls/components'
-
-const fontName = {
-  tag: 'caption',
-  props: {
-    text: 'avenir next',
-    whiteSpace: 'nowrap',
-    textTransform: 'capitalize'
-  }
-}
-
-const fontWeights = {
-  extend: Flex,
-  props: {
-    position: 'relative',
-    width: 'fit-content',
-    ':after': {
-      content: '"+"',
-      position: 'absolute',
-      right: '-Z',
-      top: '0',
-      fontSize: '20px'
-    },
-    childProps: { fontSize: 'F2' }
-  },
-  childExtend: {
-    extend: { text: 'A' }
-  },
-  ...[
-    { props: { fontWeight: '700' } },
-    { props: { fontWeight: '500' } },
-    { props: { fontWeight: '400' } }
-  ]
-}
-
-const letterTransform = {
-  extend: Flex,
-  props: {
-    alignItems: 'center',
-    height: 'fit-content',
-    gap: 'X2',
-    childProps: {
-      minHeight: 'fit-content'
-    }
-  },
-  childExtend: {},
-  ...[
-    { props: { text: 'a', textTransform: 'uppercase', fontSize: 'F2', fontWeight: '700' } },
-    { props: { text: 'b', fontWeight: '700', fontSize: 'F' } },
-    { props: { text: 'c', fontWeight: '500', fontSize: 'D2' } },
-    { props: { text: 'd', fontSize: 'C2' } },
-    { props: { text: 'e', fontSize: 'C' } },
-    { props: { text: 'f', fontSize: 'B' } }
-  ]
-}
-
-const fontStyle = {
-  extend: Flex,
-  props: {
-    gap: 'V2'
-  },
-  childExtend: {
-    props: {
-      fontSize: 'F2',
-      textTransform: 'uppercase',
-      fontWeight: '300',
-      margin: '0',
-      padding: '0'
-    }
-  },
-  ...[{
-    props: { text: 'a' }
-  }, {
-    props: {
-      text: 'b',
-      style: {
-        fontStyle: 'italic'
-      }
-    }
-  }, {
-    props: {
-      text: 'c',
-      position: 'relative',
-      ':before': {
-        content: '""',
-        width: '100%',
-        height: '2px',
-        background: 'black .75',
-        position: 'absolute',
-        bottom: '10px'
-      }
-    }
-  }]
-}
-
-const paragraph = {
-  extend: Flex,
-  props: {
-    flow: 'column',
-    gap: 'Y',
-    title: {
-      text: 'Sometimes high',
-      fontSize: 'A2',
-      margin: '0'
-    },
-    p: {
-      text: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.`,
-      margin: '0',
-      fontWeight: '400',
-      maxWidth: 'G3',
-      color: 'gray6'
-    }
-  },
-  title: { tag: 'h3' },
-  p: {}
-}
-
-const iconText = {
-  extend: IconText,
-  props: {
-    fontSize: 'Z',
-    gap: 'X1',
-    icon: 'eyeOpen',
-    text: 'ABCDEFGHIKLMNOPQRSTVWXYZabcdefghijklmnopqrstvwxyz0123456789!@#$%^&*()'
-  }
-}
-
-const underlineSpan = {
-  props: {
-    text: 'Sometimes low',
-    textDecoration: 'underline',
-    style: { fontStyle: 'italic' }
-  }
-}
-
-const props = {
-  width: 'fit-content',
-  color: 'black',
-  background: 'white',
-  position: 'relative',
-  padding: 'A B',
-  round: 'A1',
-  flow: 'column',
-  gap: 'B',
-
-  fontName: {
-    position: 'absolute'
-
-  },
-
-  content: {
-    gap: 'D',
-    fonts: {
-      gap: 'C',
-      align: 'flex-end center'
-    },
-    paragraph: {
-    }
-  },
-
-  footer: {
-    justifyContent: 'space-between',
-    color: 'gray7'
-  }
-
-}
-export const FontText = {
-  extend: Flex,
-  props,
-
-  fontName,
-
-  content: {
-    extend: Flex,
-    fonts: {
-      extend: Flex,
-
-      fontWeights,
-      letterTransform,
-      fontStyle
-    },
-
-    paragraph
-  },
-
-  footer: {
-    extend: Flex,
-    iconText,
-    underlineSpan
-  }
-}

package/src/components/Header.js

@@ -1,50 +0,0 @@
-'use strict'
-
-import { router } from '@domql/router'
-import { HeaderSignup, HeaderOfMember } from '@symbo.ls/components'
-
-export const Header = {
-  props: {
-    position: 'sticky',
-    width: '100%',
-    top: '0',
-    zIndex: 99999,
-
-    content: {
-      maxWidth: '100%',
-      width: '100%'
-    }
-  }
-}
-
-let cacheToken
-export const HeaderOnRouter = {
-  extend: Header,
-  props: { width: '100%' },
-
-  define: { routes: param => param },
-  routes: {
-    '/': HeaderSignup, // HeaderInitial,
-    '/*': HeaderOfMember
-  },
-
-  on: {
-    render: (element, s) => {
-      if (s.userToken) {
-        router(element, '/*', {}, { updateState: false, pushState: false })
-      } else {
-        router(element, '/', {}, { updateState: false, pushState: false })
-      }
-    },
-    update: (element, s, changes) => {
-      if (cacheToken !== s.userToken) {
-        cacheToken = s.userToken
-        if (s.userToken) {
-          router(element, '/*', {}, { updateState: false, pushState: false })
-        } else {
-          router(element, '/', {}, { updateState: false, pushState: false })
-        }
-      }
-    }
-  }
-}

package/src/components/HeaderHeading.js

@@ -1,23 +0,0 @@
-'use strict'
-
-export const HeaderHeading = {
-  tag: 'header',
-
-  props: { margin: '- - C2 -' },
-
-  Caption: {
-    text: `Let's get started`,
-    whiteSpace: 'nowrap',
-    margin: '0',
-    color: 'gray6'
-  },
-
-  H1: {
-    color: 'white',
-    text: 'First was the light',
-    fontSize: 'H2',
-    fontWeight: '700',
-    margin: '0',
-    height: 'fit-content'
-  }
-}

package/src/components/IconsGroup.js

@@ -1,60 +0,0 @@
-'use strict'
-
-import { copyStringToClipboard } from '@symbo.ls/utils'
-import { ClickableItem, Link, IconText } from '@symbo.ls/components'
-
-const IconItem = {
-  extend: [ClickableItem, Link, IconText],
-
-  props: ({ state }) => ({
-    round: 'A',
-    size: 'C1',
-    scrollToTop: false,
-    aspectRatio: '1 / 1',
-    flexAlign: 'center center',
-    href: '/icons/edit-icon/' + state.value,
-    theme: 'tertiary',
-    icon: {
-      fontSize: 'C2',
-      name: state.value
-    }
-  }),
-
-  on: {
-    click: (event, element, state) => {
-      copyStringToClipboard(state.value)
-      Link.on.click(event, element, state)
-    }
-  }
-}
-
-export const IconsGroup = {
-  state: { toggleShow: true },
-  props: ({ state }) => ({
-    hide: !Object.keys(state.list).length
-  }),
-
-  SectionHeader: {
-    extend: true,
-    heading: {},
-    nav: {
-      add: {
-        props: {
-          icon: 'plus',
-          href: '/icons/add-icon'
-        }
-      }
-    }
-  },
-
-  Grid: {
-    props: ({ state }) => ({
-      hide: !state.toggleShow,
-      columns: 'repeat(12, 1fr)',
-      gap: 'Z',
-      margin: '- -Z2'
-    }),
-    childExtend: IconItem,
-    $setStateCollection: ({ state }) => state.list
-  }
-}

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.__system.COMPONENTS)
-  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: {}
-}