@symbo.ls/preview 0.0.98 → 2.0.7

package/src/components/SpacingTable.js

@@ -1,210 +0,0 @@
-'use strict'
-
-import {
-  Grid,
-  Pseudo,
-  mapSequence,
-  sortSequence
-} from '@symbo.ls/components'
-
-import { SpacingRowButton } from '.'
-import actionButtons, { setRowButtons } from './SpacingButton/actionButtons'
-
-const Cell = {
-  tag: 'div',
-  props: {
-    padding: 'X2 C2 X2 0'
-  }
-}
-
-const Row = {
-  extend: Grid,
-  key: state => state.key,
-
-  props: ({ state }) => ({
-    columns: '7ch 14ch 12ch 12ch 20em 1fr',
-    alignItems: 'center',
-    isBase: state.index === 0,
-    active: (state.key && state.key.length) === 1,
-
-    margin: '0 -A',
-    padding: '0 B',
-    position: 'relative',
-    height: 'C+Z',
-    transition: 'A defaultBezier background',
-
-    '.isBase': {
-      opacity: 1,
-      background: 'gray1 .5'
-    },
-
-    ':hover': {
-      background: 'gray1 .65'
-    },
-
-    i: {
-      text: state.key,
-      active: (state.key && state.key.length) === 1,
-
-      '.active': {
-        fontWeight: '600',
-        '@dark': { color: 'gray9' },
-        '@light': { color: 'gray3' }
-      },
-      '!active': {
-        fontWeight: '400',
-        '@dark': { color: 'gray6' },
-        '@light': { color: 'gray7' }
-      }
-    },
-    decimal: {
-      text: state.decimal,
-      color: 'gray6',
-      fontWeight: '300'
-    },
-    px: {
-      text: state.val,
-      '@dark': { color: 'gray9' },
-      '@light': { color: 'gray3' }
-    },
-    em: {
-      color: 'gray6',
-      text: state.scaling + 'em'
-    },
-    graph: {
-      margin: '0 0 0 -B2',
-      maxWidth: '1px',
-      line: {
-        isBase: state.index === 0,
-        widthRange: `${state.val}px` || 0,
-        height: '2px',
-        background: 'blue',
-        borderRadius: 'A',
-        '.isBase': {
-          height: '5px'
-        }
-      }
-    },
-    buttons: {
-      columns: 'repeat(7, var(--spacing-B2))',
-      rows: 'var(--spacing-B2)',
-      position: 'relative',
-      gap: '.2em',
-      opacity: '1',
-      boxSizing: 'content-box',
-      margin: '0 0 0 -1.9em'
-    }
-  }),
-
-  childExtend: Cell,
-
-  i: {},
-  em: {},
-  decimal: {},
-  px: {},
-  buttons: {
-    extend: Grid,
-    childExtend: SpacingRowButton,
-    $setStateCollection: setRowButtons
-  },
-  graph: { line: {} },
-
-  overlay: {
-    props: {
-      position: 'absolute',
-      right: '0',
-      top: '0',
-      bottom: '0',
-      width: 'calc(100% - var(--spacing-G3))',
-      height: '100%'
-    },
-
-    on: {
-      mouseover: (ev, el, s) => {
-        if (!s.parent.hovered !== s.key) {
-          const key = parseInt(el.parent.key)
-          const rowHeight = '(var(--spacing-C) + var(--spacing-Z))'
-          const translateY = `calc(${rowHeight} * ${key + 1})`
-          const transform = `translate3d(0px, ${translateY}, 1px)`
-          s.parent.hovered = s.key
-          s.parent.selectedKey = s.key
-          el.lookup('actionButtons').setProps({ opacity: '1', transform })
-        }
-      },
-
-      mouseleave: (ev, el, s) => {
-        if (s.parent.hovered && s.parent.hovered === s.key) {
-          s.parent.hovered = false
-          el.lookup('actionButtons').setProps({ opacity: '0' })
-        }
-      }
-    }
-  }
-}
-
-const HeaderRow = {
-  extend: Row,
-
-  childExtend: {
-    props: {
-      color: 'gray7',
-      style: { paddingBlock: '0 .618em' }
-    }
-  },
-
-  i: '#',
-  em: 'em',
-  decimal: 'decimal',
-  px: 'px',
-  buttons: '',
-  graph: null,
-  overlay: null
-}
-
-export const SpacingTable = {
-  extend: Pseudo,
-  tag: 'section',
-
-  props: {
-    lazyLoad: true,
-    overflow: 'hidden',
-    position: 'relative',
-    header: {
-      '@dark': { color: 'gray6' },
-      '@light': { color: 'gray7' }
-    },
-
-    '::after': {
-      content: '""',
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: '0',
-      left: '100%'
-    },
-    '@dark': {
-      color: 'gray8',
-      '::after': {
-        background: 'gray0',
-        boxShadow: 'gray0, 0 0px 50px 50px'
-      }
-    },
-    '@light': {
-      color: 'gray3',
-      '::after': {
-        background: 'gray12',
-        boxShadow: 'gray12, 0 0px 50px 50px'
-      }
-    }
-  },
-
-  header: HeaderRow,
-
-  cnt: {
-    childExtend: Row,
-    props: { lazyLoad: true },
-    $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
-  },
-
-  actionButtons
-}

package/src/components/ThemeButtons.js

@@ -1,42 +0,0 @@
-'use strict'
-
-import { ColorPicker } from '@symbo.ls/components'
-
-export const ThemeButtons = {
-  props: {
-    position: 'relative',
-    zIndex: '2',
-    round: 'X2',
-    style: {
-      columnCount: 2,
-      columnGap: '0'
-    }
-  },
-
-  attr: { buttons: true },
-
-  childExtend: {
-    extend: ColorPicker,
-    props: {
-      width: '100%',
-      theme: null,
-      background: 'black 0'
-    },
-    on: {
-      stateUpdated: (el, s) => {
-        s.parent.update({ [s.key]: s.value })
-        return false
-      }
-    }
-  },
-
-  $setStateCollection: (el, s) => {
-    return [{
-      key: 'color',
-      value: s.color
-    }, {
-      key: 'background',
-      value: s.background
-    }]
-  }
-}

package/src/components/UploadImage.js

@@ -1,61 +0,0 @@
-'use strict'
-
-import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
-
-export const UploadImage = {
-  extend: [CommonField],
-  props: {
-    title: { text: 'Pick from the picture' },
-    element: {
-      border: 'none',
-      background: 'gray1',
-      padding: 'Z A Z Z',
-      gap: 'Z',
-      flow: 'row',
-      icon: { style: { fontSize: '52px' } },
-      p: {
-        text: 'Upload or drop the image'
-      }
-    }
-  },
-  title: {},
-  element: {
-    extend: [Upload, Flex, ClickableItem],
-    icon: { style: { fontSize: '52px' } },
-    p: { span: null },
-    input: {
-      on: {
-        change: async (ev, el, s) => {
-          const { context } = el
-          const { client } = context
-          s.update({ icon: { pending: true } })
-
-          try {
-            let id
-            await client.file(ev.target.files[0]).then(async d => { id = d.id })
-
-            await client.observe({
-              $id: id,
-              $all: true
-            }, async (data) => {
-              console.log(data)
-              s.update({ icon: { pending: false, ...data } })
-
-              // await client.set({
-              //   $id: s.projectId,
-              //   icon: data
-              // }, d => console.log('d', d))
-
-              await client.set({
-                $id: s.projectId,
-                icon: data.id
-              }, d => console.log('d2', d))
-            })
-          } catch (e) {
-            console.log(e)
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/Widget.js

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

package/src/components/index.js

@@ -1,25 +0,0 @@
-'use strict'
-
-export * from './Widget'
-export * from './Route'
-export * from './Page'
-export * from './Header'
-export * from './Aside'
-
-export * from './Banner'
-export * from './ShapeSet'
-export * from './ColorText'
-export * from './ThemeButtons'
-export * from './SlidersWithResponsive'
-export * from './HeaderHeading'
-export * from './ColorsPalette'
-export * from './ShapePreview'
-export * from './SpacingPreview'
-export * from './ResponsivePreview'
-export * from './IconsGroup'
-export * from './FontText'
-export * from './DesignComponent'
-export * from './ColumnParagrphs'
-export * from './SpacingButton'
-export * from './UploadImage'
-export * from './SpacingTable'

package/src/pages/Account/__/index.js

@@ -1,241 +0,0 @@
-'use strict'
-
-import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCaption, Grid, CheckButton } from '@symbo.ls/components'
-// import { account } from '../SignUp'
-
-import setUpProject from './setUpProject'
-
-import Page from '../Page'
-import { logout } from '@symbo.ls/auth'
-
-const sideBar = {
-  tag: 'aside',
-  extend: Block,
-  style: {
-    height: '100%',
-    borderRight: '1px solid rgba(255, 255, 255, .06)'
-  },
-  props: {
-    flexFlow: 'column',
-    flexAlign: 'flex-start space-between',
-    padding: '0 C 0 0'
-  },
-  nav: {
-    extend: Block,
-    props: {
-      flexFlow: 'column',
-      gap: 'A1'
-    },
-    childExtend: {
-      tag: 'a',
-
-      extend: [SquareButton, Link, ClickableItem],
-      props: {
-        theme: 'quaternary',
-        padding: 0,
-        boxSize: 'B1 B1'
-      },
-      style: { padding: 0 }
-    },
-
-    personal: {
-      props: { icon: 'githubOutline' },
-      style: { svg: { color: 'white' } },
-
-      on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
-        }
-      }
-    },
-    project: {
-      style: {
-        borderRadius: '100%',
-        display: 'block'
-      },
-      image: {
-        extend: Img,
-        attr: {
-          // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
-          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
-        },
-        style: {
-          width: '100%',
-          height: '100%',
-          borderRadius: '100%'
-        }
-      },
-
-      on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
-        }
-      }
-    },
-
-    add: {
-      props: { icon: 'plus' },
-      style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
-
-      on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
-        }
-      }
-    }
-  },
-
-  nav2: {
-    tag: 'nav',
-    extend: Block,
-    props: {
-      flexFlow: 'column',
-      gap: 'A1'
-    },
-
-    style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
-    childExtend: {
-      extend: [SquareButton, Link],
-      props: {
-        theme: 'quaternary',
-        padding: 0,
-        boxSize: 'B1 B1'
-      },
-      style: { padding: 0 }
-    },
-
-    info: { props: { icon: 'info' } },
-    logout: {
-      props: { icon: 'upload' },
-
-      on: {
-        click: (ev, el, s) => {
-          logout()
-        }
-      }
-    }
-  }
-}
-
-const fillFields = {
-  extend: [Block, Grid],
-  props: {
-    columns: 'repeat(2, 1fr)',
-    columnGap: 'C',
-    rowGap: 'C2'
-  },
-  childExtend: {
-    extend: SelectFieldWithCaption,
-    style: {
-      '> input': { width: '270x', minWidth: '270px', height: '42px' }
-    },
-    caption: {},
-    element: {
-      style: {
-        minWidth: `${270 / 16}em`,
-        height: `${42 / 16}em`
-      },
-      buttons: { ...[{ props: { theme: 'transparent' } }] }
-    }
-  },
-  ...[
-    {
-      caption: { props: { text: 'Your Username' } },
-      element: {
-        tag: 'input',
-        attr: {
-          value: 'nikoloza'
-        }
-      }
-    },
-    {
-      caption: { props: { text: 'Your role' } },
-      element: {
-        title: { props: { text: 'Design' } }
-      }
-    },
-    {
-      caption: { props: { text: 'Country and region' } },
-      element: {
-        props: { gap: 'W' },
-        title: {
-          props: { text: 'Georgia' },
-
-          style: {
-            '&::before': {
-              content: '"🇬🇪"'
-            }
-          }
-        }
-      }
-    },
-
-    {
-      caption: { props: { text: 'Time-zone' } },
-      element: {
-        props: { gap: 'W' },
-        title: {
-          props: { text: 'Tbilisi(GMT+4)' }
-        }
-      }
-    }
-  ]
-}
-
-const personalAccount = {
-  extend: Block,
-  props: {
-    // padding: '0 0 0 E',
-    flexFlow: 'column',
-    flexAlign: 'flex-start flex-start',
-    gap: 'C2'
-  },
-  caption: {
-    extend: [Text, Block],
-    props: {
-      text: 'Your personal account'
-    }
-  },
-
-  fields: {
-    extend: { fillFields }
-  },
-  button: {
-    extend: CheckButton,
-    props: {
-      text: 'Save Updates'
-    },
-    style: {
-      background: '#0079FD',
-      '> svg': { color: 'white' },
-      '&:hover': { background: '#0079FD' }
-    }
-  }
-}
-
-export const Account = {
-  extend: Page,
-  props: {
-    flexAlign: 'flex-start flex-start',
-    padding: 'C1 0 D1 0',
-    gap: 'E'
-  },
-  define: { routes: param => param },
-  state: {
-    activeTab: 'personal'
-  },
-
-  sideBar,
-
-  routes: {
-    personal: personalAccount,
-    project: setUpProject
-  },
-
-  page: {
-    content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
-  }
-}

package/src/pages/Color/globalThemes.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import { GlobalThemeTemplate, Flex, SectionHeader, Link, ClickableItem } from '@symbo.ls/components'
-
-export default {
-  header: {
-    extend: SectionHeader,
-    state: {
-      title: 'Global Themes',
-      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
-    }
-  },
-
-  modes: {
-    extend: Flex,
-    props: { gap: 'A' },
-
-    childExtend: [GlobalThemeTemplate, ClickableItem, Link],
-
-    $setStateCollection: () => [{
-      title: 'Light',
-      key: 'light',
-      icon: 'sun'
-    }, {
-      title: 'Dark',
-      key: 'dark',
-      icon: 'moon'
-    }]
-  }
-}

package/src/pages/Color/palette.js

@@ -1,35 +0,0 @@
-'use strict'
-
-import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
-
-const mapColors = (el, s) => {
-  if (!s.__system) return
-  const { COLOR } = s.__system
-  const colorKeys = Object.keys(COLOR)
-  return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
-}
-
-export default {
-  header: {
-    extend: SectionHeader,
-    state: {
-      title: 'Color Palette',
-      p: 'Document styling and theming',
-      nav: [{
-        icon: 'plus',
-        href: '/colors/add-color'
-      }]
-    }
-  },
-
-  content: {
-    extend: Flex,
-    props: {
-      flow: 'row wrap',
-      gap: 'Z2'
-    },
-
-    childExtend: ColorTemplate,
-    $setStateCollection: mapColors
-  }
-}