@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/ColorEditor/index.js

@@ -1,178 +0,0 @@
-'use strict'
-
-import { Block, Text, Button, Flex, SectionHeader, AccessibilityCheck, SceneThemingBar } from '@symbo.ls/all'
-
-import { PageProto } from '..'
-import { colorTones } from './colorTone'
-import { themingTools } from './themingTools'
-import { interactivity } from './interactivity'
-import { friendTheme } from './friendTheme'
-
-import style, { styleLabel } from './style'
-
-// import ntc from './ntc'
-
-// const returnColor = element => element.lookup('ColorEditor').state.color
-// const setBackground = (element, opacity = 1) => `background: ${opacify(returnColor(element), opacity)}`
-
-const nameTheTheme = {
-  tag: 'label',
-  style: styleLabel,
-  attr: { for: 'name-it' },
-  caption: {
-    proto: [Block, Text],
-    props: {
-      text: 'Name the theme',
-      padding: '0 0 Y1 0',
-      size: 'Z'
-    }
-  },
-  span: {
-    tag: 'span',
-    proto: Text,
-    props: {
-      text: (el, s) => s.value,
-      size: 'E'
-    },
-    attr: { contentEditable: true, placeholder: 'you name it', id: 'name-it' }
-  }
-}
-
-const footer = { //eslint-disable-line
-  proto: [Flex, Block],
-  props: {
-    height: 'C2',
-    padding: '0 A'
-  },
-  style: {
-    margin: 'auto -80px 0',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  nav: {
-    proto: [Flex, Block],
-    props: { gap: 'A' },
-    childProto: {
-      proto: [Button, Text],
-      props: {
-        size: 'Z',
-        width: 'B2',
-        height: 'B2',
-        theme: 'transparent'
-      }
-    },
-    ...[
-      { props: { icon: 'starOutline' } },
-      { props: { icon: 'copyOutline' } },
-      { props: { icon: 'share' } }
-    ]
-  },
-  span: {
-    proto: Text,
-    props: {
-      text: 'Autosaved 1 second ago',
-      size: 'Y'
-    },
-    style: { opacity: '.35' }
-  },
-
-  export: {
-    proto: Flex,
-    style: {
-      alignItems: 'center'
-    },
-    span: {
-      proto: [Text, Block],
-      props: {
-        text: 'Export:',
-        size: 'Y',
-        padding: '0 B1 0 0'
-      },
-      style: { opacity: '.35' }
-    },
-    nav: {
-      proto: [Flex, Block],
-      props: { gap: 'Y2' },
-      childProto: {
-        proto: [Button, Text],
-        props: {
-          size: 'Z',
-          width: 'B2',
-          height: 'B2',
-          theme: 'transparent'
-        },
-        style: {
-          color: 'white'
-        }
-      },
-      ...[
-        { props: { icon: 'themeOutline' } },
-        { props: { icon: 'sketch' } },
-        { props: { icon: 'arrowAngleMirroringHorizontal' } }
-      ]
-    }
-  }
-}
-
-export default {
-  key: 'ColorEditor',
-
-  proto: PageProto,
-
-  style,
-
-  state: {
-    sceneTheme: 'dark'
-  },
-
-  on: {
-    init: (el, s) => {
-      if (!el.__root || !el.__root.state.CONFIG) return
-
-      var route = window.location.pathname
-      var routes = route.slice(1).split('/')
-      var param = routes[1]
-
-      const { THEME } = el.__root.state.CONFIG
-      var content = THEME[`${param}`].value
-      content.title = param
-      el.state.value = content
-    }
-  },
-
-  header: {
-    proto: SectionHeader,
-    props: {
-      padding: 'C 0 B2 0',
-      margin: '0'
-    },
-    heading: '',
-    label: nameTheTheme,
-    nav: { proto: SceneThemingBar }
-  },
-
-  cnt: {
-    proto: [Flex],
-    props: {
-      gap: 'D'
-    },
-
-    aside: colorTones,
-    colorEdit: {
-      proto: Block,
-      props: { gap: 'C2', flexFlow: 'column' },
-      themingTools,
-      interactivity,
-      friendTheme
-    }
-  },
-
-  check: {
-    proto: AccessibilityCheck,
-    props: {
-      padding: 'E 0 F'
-    }
-  }
-
-  // footer
-}

package/src/pages/Export/header.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { Flex, Block, Breadcrumb, SceneToolBar } from '@symbo.ls/all'
-import { styleHeader } from './style'
-
-export default {
-  tag: 'header',
-  proto: [Flex, Block],
-  props: { padding: 'Z 0 Z Y' },
-  style: styleHeader,
-
-  nav: {
-    proto: Breadcrumb,
-
-    all: {
-      props: {
-        href: '/components',
-        text: 'Components'
-      }
-    },
-    category: {
-      if: el => el.lookup('content').props.category.text,
-      props: (el) => {
-        const props = el.lookup('content').props
-        return {
-          href: `/components/${props.category.key}`,
-          text: props.category.text
-        }
-      }
-    },
-    title: {
-      text: el => el.lookup('content').props.title
-    }
-  },
-
-  sceneTools: { proto: SceneToolBar }
-}

package/src/pages/Export/style.js

@@ -1,28 +0,0 @@
-'use strict'
-
-export const styleArticle = {
-  caption: {
-    // textTransform: 'capitalize',
-    opacity: '.35'
-  },
-
-  p: {
-    maxWidth: `${470 / 14}em`,
-    opacity: '.75',
-    lineHeight: '20px'
-  },
-
-  code: {
-    overflow: 'hidden'
-  }
-}
-
-export const styleHeader = {
-  justifyContent: 'space-between',
-  alignItems: 'center'
-}
-
-export default {
-  display: 'flex',
-  flexDirection: 'column'
-}

package/src/pages/Library/style.js

@@ -1,43 +0,0 @@
-'use strict'
-
-export const grid = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(12, 1fr)',
-  gridAutoFlow: 'dense',
-  justifyItems: 'stretch',
-  boxSizing: 'border-box',
-  marginBottom: '2em',
-  gap: '1em',
-  gridAutoColumns: 'auto',
-  gridAutoRows: 'auto',
-
-  '@media only screen and (min-width: 1680px)': {
-    gridTemplateColumns: 'repeat(12, 1fr)'
-  }
-}
-
-export const styleFamilyBundle = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '50em',
-  '> div': {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  img: {
-    width: '32px',
-    height: '32px'
-  },
-  button: {
-    '&:first-child': {
-      marginRight: '8px'
-    }
-  }
-}
-
-export default {
-  '> header': {
-    marginBottom: '1em'
-  }
-}

package/src/pages/PageProto.js

@@ -1,26 +0,0 @@
-'use strict'
-
-import { Block } from '@symbo.ls/all'
-
-export default {
-  tag: 'main',
-  proto: Block,
-
-  // props: el => el.parent.props,
-
-  class: {
-    page: {
-      width: '100%',
-      margin: '0 auto',
-      boxSizing: 'border-box',
-      maxWidth: `${1280 / 16}em`,
-      '@media only screen and (min-width: 1680px)': {
-        maxWidth: '102em'
-      },
-
-      '@media only screen and (min-width: 1920px)': {
-        fontSize: `${17 / 16}em`
-      }
-    }
-  }
-}

package/src/pages/Typography/docFonts.js

@@ -1,128 +0,0 @@
-'use strict'
-
-import { Block, Grid, FontObject, Link, SectionHeader, FontFamilyObject } from '@symbo.ls/all'
-import { TypeSection } from './shared'
-
-const mapFonts = (el, s) => {
-  if (!el.__root.state.CONFIG) return
-  const { FONT } = el.__root.state.CONFIG
-
-  const fontKeys = Object.keys(FONT)
-
-  return fontKeys.map(v => {
-    const font = FONT[v]
-    const weights = Object.keys(font)
-    const weightsLength = weights.length
-    const fontWeightCaption = weights[0] === 'variable' ? 'variable' : `${weightsLength} style${weightsLength > 1 ? 's' : ''}`
-
-    return {
-      props: {
-        href: `/typography/document-fonts/font-settings/${v}`,
-        fontTitle: v
-      },
-
-      caption: {},
-      p: {},
-      description: [
-        { props: { icon: 'variableFont', text: fontWeightCaption } }
-      ]
-    }
-  })
-}
-
-const line = {
-  proto: Block,
-  props: {
-    margin: 'D 0'
-  },
-  style: {
-    height: '.2px',
-    background: 'rgba(255, 255, 255, .1)',
-    marginLeft: '-100%',
-    marginRight: '-100%'
-  }
-}
-
-const fontFamilies = {
-  proto: Block,
-  props: { padding: '0 0 E 0' },
-  header: {
-    proto: SectionHeader,
-    heading: {
-      caption: { props: { text: 'Font Families' } },
-      p: { props: { text: 'Setup a set and fallback fonts as font FAMILIES' } }
-    }
-  },
-  content: {
-    proto: Grid,
-    props: {
-      flexAlign: 'center space-between',
-      columns: 'repeat(3, 1fr)',
-      gap: 'Z'
-    },
-    childProto: {
-      proto: [FontFamilyObject, Link],
-      props: { href: '/typography/document-fonts/font-family' },
-      style: { textDecoration: 'none' }
-    },
-
-    content: el => {
-      if (!el.__root.state.CONFIG) return
-      const { FONT_FAMILY } = el.__root.state.CONFIG
-
-      const FAMILIES = Object.keys(FONT_FAMILY).map(v => {
-        const val = FONT_FAMILY[v]
-        if (v === 'default') return null
-        return {
-          caption: { props: { text: v } },
-          p: { props: { text: val.value } }
-        }
-      })
-
-      return {
-        tag: 'fragment',
-        ...FAMILIES
-      }
-    }
-  }
-}
-
-export default {
-  proto: TypeSection,
-  header: {
-    proto: Block,
-    heading: {
-      p: { props: { text: 'Document @font-face, default and backup fonts' } }
-    },
-    nav: {
-      add: {
-        proto: Link,
-        props: {
-          icon: 'plus',
-          href: '/typography/document-fonts/upload-font'
-        }
-      }
-    }
-  },
-
-  wrapper: {
-    fonts: {
-      proto: Grid,
-      props: {
-        columns: 'repeat(2, 1fr)',
-        gap: 'A'
-      },
-
-      childProto: FontObject,
-
-      content: (el, s) => {
-        return {
-          tag: 'fragment',
-          ...mapFonts(el, s)
-        }
-      }
-    },
-    line,
-    fontFamilies
-  }
-}

package/src/pages/Typography/docStyles.js

@@ -1,97 +0,0 @@
-'use strict'
-
-import {
-  Icon, Link,
-  TypeHelpers,
-  DocumentStylesSequence
-} from '@symbo.ls/all'
-import { TypeSection } from './shared'
-
-import { interactivityButton } from '../ColorEditor'
-
-export default {
-  proto: TypeSection,
-
-  header: {
-    heading: {
-      p: { props: { text: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling' } }
-    },
-    nav: {
-      add: {
-        proto: Link,
-        props: {
-          href: '/typography/document-styles/html-tags',
-          icon: 'plus'
-        }
-      }
-    }
-  },
-
-  wrapper: {
-    bodyTags: {
-
-      cnt: {
-        style: { flex: 1 },
-
-        fonts: DocumentStylesSequence,
-
-        interactivities: {
-          style: {
-            paddingLeft: '8em',
-            display: 'flex',
-            gap: '1em',
-            marginTop: '1em'
-          },
-          childProto: {
-            proto: interactivityButton,
-            style: {
-              display: 'flex',
-              justifyContent: 'space-Between',
-              svg: { color: 'rgba(255, 255, 255, .35)' }
-            },
-            props: {
-              icon: 'plus'
-            }
-          },
-          ...[{
-            style: { width: '145px' },
-            props: { text: '<p>' }
-          }, {
-            style: { width: '145px' },
-            props: { text: '<code>' }
-          }, {
-            style: { width: '145px' },
-            props: { text: '<pre>' }
-          }, {
-            props: {
-              padding: 'Z',
-              text: ''
-            }
-          }, {
-            style: {
-              position: 'relative',
-              width: '207px'
-            },
-            props: {
-              text: 'Choose element'
-            },
-            icon2: {
-              proto: Icon,
-              props: { icon: 'arrowAngleDown' },
-              style: {
-                paddingRight: `${12.5 / 16}em`,
-                marginRight: `${12.5 / 16}em`,
-                borderRight: '1px solid rgba(255, 255, 255, .1)',
-                position: 'absolute',
-                right: `${25 / 16}em`,
-                height: '80%'
-              }
-            }
-          }]
-        }
-      }
-    },
-
-    TypeHelpers
-  }
-}

package/src/pages/Typography/style.js

@@ -1,11 +0,0 @@
-'use strict'
-
-export const styleTypeScale = {
-}
-
-export default {
-  '> div header': {
-    lineHeight: '2em'
-  },
-  p: { margin: 0 }
-}

package/src/protect.js

@@ -1,114 +0,0 @@
-'use strict'
-
-import './config'
-import DOM from 'domql-preview'
-
-import { auth, configureClient, login } from '@symbo.ls/auth'
-// import { fetchAuth, READ_WAITLIST_USER, READ_COMPANY } from '@symbo.ls/fetch'
-import { getCookie, setCookie } from 'domql-preview/packages/cookie'
-
-import Loader from '@symbo.ls/loader'
-import App from './app'
-
-import { Box } from '@symbo.ls/all'
-import { animateOnLoad } from './animations'
-
-const protect = {
-  proto: [Box, Loader],
-  class: {
-    animation: (el, s) => animateOnLoad(true)
-  },
-  props: {
-    position: 'fixed !important',
-    left: '0',
-    top: '0',
-    boxSize: '100% 100%'
-  }
-}
-
-DOM.create(protect)
-
-// const callApi = async (state, err, callback) => {
-//   try {
-//     // const queryCompany = READ_COMPANY()
-//     // const waitlistQuery = READ_WAITLIST_USER(state.userData.email)
-//     // fetchAuth(state.token, queryCompany, (rdata) => {
-//     //   const { data } = rdata
-//     //   if (data.companies) {
-//     //     state.companyData = data && data.companies
-//     //   } else {
-//     //     fetchAuth(state.token, waitlistQuery, (rdata) => {
-//     //       state.waitlistData = rdata.data
-//     //     })
-//     //   }
-//     //   setCookie('hash', '1', 3)
-//     // })
-//     setCookie('hash', '1', 3)
-//     callback(state)
-//   } catch (e) {
-//     // Display errors in the console
-//     err(e)
-//   }
-// }
-
-const updateState = async (isAuthenticated) => {
-  App.state = {
-    token: await auth.auth0.getTokenSilently(),
-    userData: await auth.auth0.getUser(),
-    isAuthenticated
-  }
-
-  setCookie('hash', '1', 3)
-
-  // const STATE_JSON = state.companyData.state_json
-  // const RECEIVED_CONFIG = STATE_JSON ? JSON.parse(STATE_JSON) : {}
-  // state.companyState = RECEIVED_CONFIG
-
-  protect.remove()
-  DOM.create(App)
-
-  // callApi(App.state,
-  //   e => {
-  //     window.alert('Something went wrong, please contact support at: support@symbols.app')
-  //     console.log(e)
-  //   },
-  //   state => {
-  //     const STATE_JSON = state.companyData.state_json
-  //     const RECEIVED_CONFIG = STATE_JSON ? JSON.parse(STATE_JSON) : {}
-  //     state.companyState = RECEIVED_CONFIG
-
-  //     protect.remove()
-  //     DOM.create(App)
-  //   }
-  // )
-}
-
-window.onload = async () => {
-  const hash = getCookie('hash')
-  if (hash) {
-    protect.remove()
-    DOM.create(App)
-    return
-  }
-
-  await configureClient()
-
-  const isAuthenticated = await auth.auth0.isAuthenticated()
-  console.log('isAuthenticated', isAuthenticated)
-  if (!isAuthenticated) {
-    login()
-  }
-
-  updateState(true)
-
-  if (isAuthenticated) return
-
-  const query = window.location.search
-  if (query.includes('code=') && query.includes('state=')) {
-    await auth.auth0.handleRedirectCallback()
-
-    updateState(isAuthenticated)
-
-    window.history.replaceState({}, document.title, '/')
-  }
-}

package/src/state.js

@@ -1,3 +0,0 @@
-'use strict'
-
-export default {}

package/src/test.js

@@ -1,30 +0,0 @@
-'use strict'
-
-import DOM from 'domql-preview'
-import { Button } from '@symbo.ls/all'
-
-import './config'
-import './define'
-
-document.body.style.padding = '25%'
-document.body.style.color = 'white'
-document.body.style.backgroundColor = 'black'
-
-var button = {
-  proto: Button,
-  theme: 'six',
-  text: 'move'
-}
-
-var app = {
-  childProto: {
-    childProto: { proto: button },
-    // a: {},
-    b: {
-      icon: 'right'
-    }
-  },
-  a: {}
-}
-
-DOM.create(app)

package/test/index.test.js

@@ -1,5 +0,0 @@
-'use strict'
-
-test('test', () => {
-  expect(true).toBe(true)
-})