@symbo.ls/preview 2.0.7 → 2.6.0

package/src/components/ColorsPalette.js

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

@@ -0,0 +1,23 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+const props = {
+  gap: 'E',
+  margin: '- - D1 -',
+  childProps: {
+    fontSize: 'Z1',
+    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

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

@@ -0,0 +1,80 @@
+'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,
+  props: {
+    padding: 'Z2 A',
+    flow: 'column',
+    gap: 'Z2',
+    background: 'gray1'
+  },
+  childExtend: propertyNumber,
+  $setStateCollection: ({ state }) => state.properties
+}
+
+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

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

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

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

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

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

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

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