@symbo.ls/preview 2.7.21 → 2.7.23

package/src/components/Aside.js

@@ -1,101 +0,0 @@
-'use strict'
-
-import { Link, ClickableItem, TooltipParent } from '@symbo.ls/components'
-import { Flex, SquareButton } from 'smbls'
-
-const setTooltipPosition = (el, s, options = {}) => {
-  const key = parseInt(el.key)
-  const rowHeight = `(var(--spacing-C) + var(--spacing-B1) + ${key}%)`
-  const translateY = `calc(${rowHeight} * ${key} + var(--spacing-Y2))`
-  const transform = `translate3d(0%, ${translateY}, 1px)`
-  const Tooltip = el.lookup('Tooltip')
-  if (Tooltip.setProps) {
-    Tooltip.setProps({
-      opacity: options.visible && '1',
-      visibility: options.visible && 'visible',
-      text: s.title,
-      transform
-    })
-  }
-}
-
-export const NavbarButton = {
-  extend: [ClickableItem, Link, SquareButton, TooltipParent],
-
-  props: ({ state }) => ({
-    href: state.href,
-    active: window.location.pathname.includes(state.href),
-    isActive: window.location.pathname.includes(state.href),
-    theme: null,
-    position: 'relative'
-  }),
-
-  on: {
-    update: (el, s) => {
-      const active = window.location.pathname.includes(s.href)
-      if (active) setTooltipPosition(el, s)
-    },
-    mouseover: (ev, el, s) => {
-      if (!s.hover) {
-        s.hover = true
-        setTooltipPosition(el, s, { visible: true })
-      }
-    },
-    mouseleave: (ev, el, s) => {
-      if (s.hover) {
-        s.hover = false
-        el.lookup('Tooltip').setProps({
-          opacity: '0',
-          visibility: 'hidden'
-        })
-      }
-    }
-  }
-}
-
-export const DesignSystemNavbar = {
-  tag: 'aside',
-
-  props: {
-    position: 'sticky',
-    top: 'E',
-    zIndex: 1001,
-
-    nav: {
-      gap: 'B1',
-      flow: 'column',
-      background: 'transparent',
-      color: 'gray7',
-      fontSize: 'A2'
-    }
-  },
-
-  nav: {
-    extend: Flex,
-    childExtend: NavbarButton
-  },
-
-  Tooltip: {
-    props: {
-      background: 'gray0 .95',
-      position: 'absolute',
-      pointerEvents: 'none',
-      top: '0',
-      left: '100%',
-      shape: 'rectangle',
-      shapeDirection: null,
-      padding: 'X2 Z1',
-      transform: 'translate3d(5%, -50%, 0)',
-      opacity: '0',
-      visibility: 'hidden',
-      transition: 'C defaultBezier, C defaultBezier, B defaultBezier',
-      transitionProperty: 'opacity, visibility, transform',
-      textAlign: 'start',
-      zIndex: 99999,
-      lineHeight: 1,
-      title: { fontSize: 'Z' }
-    },
-    title: null,
-    p: null
-  }
-}

package/src/components/Banner.js

@@ -1,58 +0,0 @@
-'use strict'
-
-import { Flex, Link, Hoverable, Pseudo, ArticleMedium } from '@symbo.ls/components'
-
-export const TutorialBanner = {
-  extend: [Link, Flex, ArticleMedium, Pseudo, Hoverable],
-
-  props: ({ state }) => ({
-    flow: 'column',
-    round: 'A',
-    height: 'F',
-    padding: 'A2 B',
-    background: 'gray2',
-    href: state.href,
-    gap: '0',
-    overflow: 'hidden',
-    position: 'relative',
-    color: 'white',
-    flex: 1,
-    transitionProperty: 'transform, opacity, padding',
-
-    title: { margin: 'auto 0 0', text: state.title },
-    p: { text: state.p },
-
-    style: {
-      userSelect: 'none',
-      'h2, p': { zIndex: 2 }
-    },
-
-    ':after, &:before': {
-      content: '""',
-      position: 'absolute',
-      zIndex: 0,
-      inset: '-5px -5px -5px -5px'
-    },
-
-    ':before': {
-      transition: 'B defaultBezier',
-      transitionProperty: 'opacity',
-      backgroundImage: `url(${state.background})`,
-      backgroundSize: 'cover',
-      opacity: '0.5'
-    },
-
-    ':after': {
-      transition: 'B defaultBezier',
-      transitionProperty: 'opacity',
-      background: 'shadow-overlay',
-      opacity: '0.9'
-    },
-
-    ':hover': {
-      padding: '- C1 - -',
-      ':before': { opacity: '1' },
-      ':after': { opacity: '1' }
-    }
-  })
-}

package/src/components/ColorText.js

@@ -1,29 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-const props = {
-  fontSize: 'Z',
-  alignItems: 'center',
-  gap: 'Y1',
-  whiteSpace: 'nowrap',
-
-  color: {
-    boxSize: 'B B',
-    background: 'red',
-    round: 'Y2'
-  },
-
-  value: {
-    text: 'Background',
-    color: 'white'
-  }
-}
-export const ColorText = {
-  extend: Flex,
-  props,
-
-  color: {},
-  value: {}
-  // text: 'efef'
-}

package/src/components/ColorsPalette.js

@@ -1,69 +0,0 @@
-'use strict'
-
-import { ClickableItem, CommonField, Flex, Grid } from '@symbo.ls/components'
-
-export const ColorsPalette = {
-  extend: CommonField,
-
-  props: {
-    gap: 'Z',
-    element: {
-      margin: '0 -X',
-      flow: 'column',
-      gap: 'Z2'
-    }
-  },
-
-  title: { text: 'Suggestions' },
-  element: {
-    extend: Flex,
-    childExtend: {
-      extend: [ClickableItem, Grid],
-
-      props: ({ state }) => ({
-        minWidth: '190px',
-        round: 'Z2',
-        columns: 'repeat(3, 1fr)',
-        overflow: 'hidden',
-        opacity: '.35',
-        childProps: { height: 'B2' },
-
-        color1: { background: state[0] },
-        color2: { background: state[1] },
-        color3: { background: state[2] }
-      }),
-
-      color1: {},
-      color2: {},
-      color3: {},
-
-      on: {
-        click: (event, element, state) => {
-          state.parent.update(state.parse())
-        }
-      }
-    },
-
-    $setStateCollection: () => [[
-      '#5F6C37',
-      '#F1E0BC',
-      '#FFFFFF'
-    ], [
-      '#CCD5AE',
-      '#FEF9E1',
-      '#D3A374'
-    ], [
-      '#CDB4DB',
-      '#FEAFCC',
-      '#A2D2FF'
-    ], [
-      '#274553',
-      '#E9C46A',
-      '#E76F51'
-    ], [
-      '#8EC9E6',
-      '#013047',
-      '#FFB703'
-    ]]
-  }
-}

package/src/components/ColumnParagrphs.js

@@ -1,22 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-
-const props = {
-  gap: 'E',
-  margin: '- - D2 -',
-  childProps: {
-    color: 'gray6',
-    maxWidth: `${272 / 14}em`
-  }
-}
-
-export const ColumnParagraphs = {
-  props,
-  extend: Flex,
-
-  childExtend: { tag: 'p' },
-  ...[{ props: { text: 'To personalize your Symbols experience, we need to get started with themes' } },
-    { props: { text: 'Please fill in the document dark and light themes' } }]
-
-}

package/src/components/ContinueButton.js

@@ -1,14 +0,0 @@
-'use strict'
-import { Button } from '@symbo.ls/components'
-
-export const ContinueButton = {
-  extend: Button,
-  props: {
-    text: 'Continue',
-    fontSize: 'Z2',
-    padding: 'Z1 C',
-    background: 'linear-gradient(to top, rgba(50, 114, 184, .2), rgba(0, 121, 253, .27), rgba(0, 121, 253, .27))',
-    color: 'white',
-    fontWeight: '500'
-  }
-}

package/src/components/DesignComponent.js

@@ -1,81 +0,0 @@
-'use strict'
-
-import { DesignElement, Flex, Grid } from '@symbo.ls/components'
-
-const componentHeader = {
-  tag: 'header',
-  extend: [DesignElement, Flex],
-
-  props: ({ state }) => ({
-    minWidth: '100%',
-    padding: 'Z1 - Z1 Z2',
-    flow: 'row',
-    round: '0',
-    alignItems: 'flex-start',
-    pointerEvents: 'none',
-    background: 'gray2',
-
-    button: {
-      padding: 'Y2',
-      icon: state.icon,
-      theme: state.iconTheme
-    },
-    heading: {
-      gap: '0',
-      title: {
-        text: state.title,
-        textTransform: 'capitalize'
-      },
-      p: {
-        text: state.paragraph,
-        maxWidth: 'F1'
-      }
-    }
-  })
-}
-
-const propertyNumber = {
-  extend: Grid,
-  props: ({ state }) => ({
-    columns: 'repeat(2, 1fr)',
-    property: {
-      text: state.property,
-      color: 'gray6'
-    },
-    value: {
-      text: state.value,
-      fontWeight: '500'
-    }
-  }),
-  property: {},
-  value: {}
-}
-
-const componentProperties = {
-  extend: Flex,
-  state: 'properties',
-  props: {
-    padding: 'Z2 A',
-    flow: 'column',
-    gap: 'Z2',
-    background: 'gray1'
-  },
-  childExtend: propertyNumber,
-  $setStateCollection: ({ state }) => state.parse()
-}
-
-export const DesignComponent = {
-  extend: Flex,
-  props: {
-    flow: 'column',
-    minWidth: 'F1',
-    maxWidth: 'F2',
-    round: 'A',
-    height: 'fit-content',
-    overflow: 'hidden',
-    userSelect: 'none'
-  },
-
-  componentHeader,
-  componentProperties
-}

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,53 +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%'
-    }
-  }
-}
-
-// '/': HeaderSignup, // HeaderInitial,
-// '/init': HeaderInitial, // HeaderInitial,
-
-let cacheToken
-export const HeaderOnRouter = {
-  extend: Header,
-  props: { width: '100%' },
-
-  define: { routes: param => param },
-  routes: {
-    '/*': HeaderOfMember,
-    '/': HeaderSignup
-  },
-
-  on: {
-    render: (element, s) => {
-      if (s.userToken) {
-        router(element, '/*', {}, { updateState: false, pushState: false })
-      } else {
-        router(element, '/', {}, { updateState: false, pushState: false })
-      }
-    },
-    initUpdate: (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 dark',
-    fontSize: 'H2',
-    fontWeight: '700',
-    margin: '0',
-    height: 'fit-content'
-  }
-}

package/src/components/IconsGroup.js

@@ -1,64 +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',
-    transitionProperty: 'transform, opacity, border-radius',
-    icon: {
-      fontSize: 'C2',
-      name: state.value
-    },
-    ':hover': {
-      round: '0'
-    }
-  }),
-
-  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
-  }
-}