@symbo.ls/preview 0.0.9

package/src/pages/Typography/docFonts.js

@@ -0,0 +1,128 @@
+'use strict'
+
+import { Block, Grid, FontObject, Link, SectionHeader, FontFamilyObject } from '@symbo.ls/components'
+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 = {
+  extend: Block,
+  props: {
+    margin: 'D 0'
+  },
+  style: {
+    height: '.2px',
+    background: 'rgba(255, 255, 255, .1)',
+    marginLeft: '-100%',
+    marginRight: '-100%'
+  }
+}
+
+const fontFamilies = {
+  extend: Block,
+  props: { padding: '0 0 E 0' },
+  header: {
+    extend: SectionHeader,
+    heading: {
+      caption: { props: { text: 'Font Families' } },
+      p: { props: { text: 'Setup a set and fallback fonts as font FAMILIES' } }
+    }
+  },
+  content: {
+    extend: Grid,
+    props: {
+      flexAlign: 'center space-between',
+      columns: 'repeat(3, 1fr)',
+      gap: 'Z'
+    },
+    childExtend: {
+      extend: [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 {
+  extend: TypeSection,
+  header: {
+    extend: Block,
+    heading: {
+      p: { props: { text: 'Document @font-face, default and backup fonts' } }
+    },
+    nav: {
+      add: {
+        extend: Link,
+        props: {
+          icon: 'plus',
+          href: '/typography/document-fonts/upload-font'
+        }
+      }
+    }
+  },
+
+  wrapper: {
+    fonts: {
+      extend: Grid,
+      props: {
+        columns: 'repeat(2, 1fr)',
+        gap: 'A'
+      },
+
+      childExtend: FontObject,
+
+      content: (el, s) => {
+        return {
+          tag: 'fragment',
+          ...mapFonts(el, s)
+        }
+      }
+    },
+    line,
+    fontFamilies
+  }
+}

package/src/pages/Typography/docStyles.js

@@ -0,0 +1,97 @@
+'use strict'
+
+import {
+  Icon, Link,
+  TypeHelpers,
+  DocumentStylesSequence
+} from '@symbo.ls/components'
+import { TypeSection } from './shared'
+
+import { interactivityButton } from '../ColorEditor'
+
+export default {
+  extend: 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: {
+        extend: 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'
+          },
+          childExtend: {
+            extend: 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: {
+              extend: 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/index.js

@@ -0,0 +1,52 @@
+'use strict'
+
+import PageExtend from '../PageExtend'
+
+import { Link, TabHeader } from '@symbo.ls/components'
+
+import style from './style'
+import state from './state'
+
+import documentFonts from './docFonts'
+import documentStyle from './docStyles'
+import typeScale from './typeScale'
+
+export const Typography = {
+  extend: PageExtend,
+
+  on: {
+    init: (el, s) => {
+      const route = window.location.pathname
+      const routes = route.slice(1).split('/')
+      s.activeTab = routes[1] || state.activeTab
+    }
+  },
+
+  define: { routes: param => param },
+
+  style,
+  state,
+
+  routes: {
+    'document-fonts': documentFonts,
+    'type-scale': typeScale,
+    'document-styles': documentStyle
+  },
+
+  header: {
+    extend: TabHeader,
+    style: {
+      paddingLeft: '2em'
+    },
+    tabs: {
+      childExtend: { extend: [Link] },
+      'document-fonts': { props: { text: 'Document Fonts' } },
+      'type-scale': { props: { text: 'Type Scale' } },
+      'document-styles': { props: { text: 'Document Styles' } }
+    }
+  },
+
+  page: {
+    content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+  }
+}

package/src/pages/Typography/shared.js

@@ -0,0 +1,10 @@
+'use strict'
+
+import { SectionHeader } from '@symbo.ls/components'
+
+export const TypeSection = {
+  header: {
+    extend: SectionHeader,
+    heading: { caption: null }
+  }
+}

package/src/pages/Typography/state.js

@@ -0,0 +1,15 @@
+'use strict'
+
+export default {
+  base: 14,
+  ratio: 1.125,
+  scales: {},
+  range: [-3, +10],
+  h1Matches: +6,
+  sequence: {},
+  type: 'font-size',
+
+  sampleText: 'Today is a big day for our tribe. The year ends.',
+  activePage: 'typography',
+  activeTab: 'documentFonts'
+}

package/src/pages/Typography/style.js

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

package/src/pages/Typography/typeScale.js

@@ -0,0 +1,104 @@
+'use strict'
+
+import { styleTypeScale } from './style'
+
+import {
+  Flex, Block, Text, Grid,
+  SequenceGraph,
+  SliderToolWithCaption,
+  StaticSpacing,
+  PreviewSettings,
+  ScalesSequence,
+  CommonField
+} from '@symbo.ls/components'
+
+import { TypeSection } from './shared'
+
+const ScalingTools = {
+  extend: Flex,
+
+  props: {
+    flow: 'column',
+    gap: 'A2'
+  },
+
+  fontSize: {
+    extend: [SliderToolWithCaption],
+    caption: { text: 'Base size' },
+    element: {
+      style: {
+        maxWidth: `${232 / 16}em`
+      }
+    }
+  },
+
+  sequence: {
+    extend: CommonField,
+    caption: { text: 'Sequence ratio' },
+    element: {
+      extend: StaticSpacing,
+      spacings: {
+        childExtend: {
+          on: {
+            click: (ev, el, s) => s.update({ ratio: el.value.text })
+          }
+        }
+      }
+    }
+  }
+}
+
+export default {
+  style: styleTypeScale,
+  extend: TypeSection,
+
+  header: {
+    heading: {
+      p: { props: { text: 'Generate text sequence by a base size and ratio' } }
+    },
+    nav: {
+      add: { props: { icon: 'plus' } }
+    }
+  },
+
+  wrapper: {
+    textTest: '',
+    fonts: '',
+
+    cnt: {
+      extend: [Block, Grid],
+
+      props: {
+        gap: 'D',
+        columns: '16em auto'
+      },
+
+      aside: ScalingTools,
+
+      wrapper: {
+        settings: {
+          extend: PreviewSettings,
+          props: { margin: '0 0 B' }
+        },
+
+        fonts: ScalesSequence
+      },
+
+      sequenceSet: {
+        extend: CommonField,
+        props: { margin: 'C2 0' },
+        caption: {
+          extend: [Block, Text],
+          props: {
+            text: 'Sizing generated by this setting',
+            padding: '0 0 A 0'
+          }
+        },
+        element: {
+          extend: [SequenceGraph, Block, Text],
+          style: { '> span': { display: 'none' } }
+        }
+      }
+    }
+  }
+}

package/src/pages/index.js

@@ -0,0 +1,13 @@
+'use strict'
+
+export * from './PageExtend'
+export * from './Components'
+export * from './Export'
+export * from './Icons'
+export * from './Library'
+export * from './Color'
+export * from './ColorEditor'
+export * from './Shapes'
+export * from './Spaces'
+export * from './Typography'
+export * from './DesignSystem'

package/src/protect.js

@@ -0,0 +1,114 @@
+'use strict'
+
+import './config'
+import DOM from 'domql'
+
+import { auth, configureClient, login } from '@symbo.ls/auth'
+// import { fetchAuth, READ_WAITLIST_USER, READ_COMPANY } from '@symbo.ls/fetch'
+import { getCookie, setCookie } from 'domql/packages/cookie'
+
+import Loader from '@symbo.ls/loader'
+import App from './app'
+
+import { Box } from '@symbo.ls/components'
+import { animateOnLoad } from './animations'
+
+const protect = {
+  extend: [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

@@ -0,0 +1,7 @@
+'use strict'
+
+import { LIBRARY } from '../.symbols'
+
+export const state = {
+  LIBRARY
+}

package/src/style.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export default {
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  overflowY: 'auto'
+}

package/src/test.js

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

package/svgSprite.config.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+module.exports = {
+  getSymbolId: (filePath, fileContent, fileHash) => {
+    return path.basename(filePath, '.svg')
+  }
+}

package/test/index.test.js

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