@symbo.ls/preview 0.0.97 → 2.0.7

package/src/pages/Typography/docFonts.js

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

@@ -0,0 +1,97 @@
+'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/index.js

@@ -1,44 +1,52 @@
 'use strict'
 
+import PageProto from '../PageProto'
+
+import { Link, TabHeader } from '@symbo.ls/all'
+
+import style from './style'
 import state from './state'
 
+import documentFonts from './docFonts'
+import documentStyle from './docStyles'
 import typeScale from './typeScale'
-import documentStyles from './documentStyles'
-import stylesHelpers from './stylesHelpers'
-import { mapSequence, sortSequence } from '@symbo.ls/components'
 
-export const Typography = {
-  state,
+export default {
+  proto: PageProto,
 
-  SectionHeader: {
-    margin: '0 0 C',
-    title: 'Typography',
-    p: 'A general configuration of type properties on the document.'
+  on: {
+    init: (el, s) => {
+      const route = window.location.pathname
+      const routes = route.slice(1).split('/')
+      s.activeTab = routes[1] || state.activeTab
+    }
   },
 
-  SlidersWithResponsive: {},
-
-  line: { extend: 'Line' },
+  define: { routes: param => param },
 
-  documentStyles,
-  line1: { extend: 'Line' },
-
-  stylesHelpers,
-  line2: { extend: 'Line' },
+  style,
+  state,
 
-  typeScale,
+  routes: {
+    'document-fonts': documentFonts,
+    'type-scale': typeScale,
+    'document-styles': documentStyle
+  },
 
-  on: {
-    init: (el, s) => {
-      if (!s.__system.TYPOGRAPHY) {
-        s.systemUpdate({
-          TYPOGRAPHY: { base: s.base, ratio: s.ratio }
-        })
-      }
-      mapSequence(s, sortSequence)
+  header: {
+    proto: TabHeader,
+    style: {
+      paddingLeft: '2em'
     },
-    stateUpdated: (el, s, changes) => {
-      s.systemUpdate({ TYPOGRAPHY: changes })
+    tabs: {
+      childProto: { proto: [Link] },
+      'document-fonts': { props: { text: 'Document Fonts' } },
+      'type-scale': { props: { text: 'Type Scale' } },
+      'document-styles': { props: { text: 'Document Styles' } }
     }
+  },
+
+  page: {
+    content: (el, s) => ({ proto: el.parent.routes[s.activeTab] })
   }
 }

package/src/pages/Typography/shared.js

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

package/src/pages/Typography/state.js

@@ -1,16 +1,15 @@
 'use strict'
 
-export default ({ parent }) => ({
-  base: 16,
+export default {
+  base: 14,
   ratio: 1.125,
-  range: [-3, +8],
-  h1Matches: +6,
   scales: {},
+  range: [-3, +10],
+  h1Matches: +6,
   sequence: {},
-  vars: {},
-  // subSequence: true,
-  type: 'demo-font-size',
+  type: 'font-size',
 
   sampleText: 'Today is a big day for our tribe. The year ends.',
-  activeTab: ''
-})
+  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

@@ -1,85 +1,104 @@
 'use strict'
 
+import { styleTypeScale } from './style'
+
 import {
-  TypeScaleSequence,
-  TestText,
-  Flex,
-  Grid,
-  mapSequence,
-  sortSequence
-} from '@symbo.ls/components'
+  Flex, Block, Text, Grid,
+  SequenceGraph,
+  SliderToolWithCaption,
+  StaticSpacing,
+  PreviewSettings,
+  ScalesSequence,
+  CommonField
+} from '@symbo.ls/all'
 
-import { range0Buttons, range1Buttons } from './rangeButtons'
+import { TypeSection } from './shared'
 
-export default {
-  extend: Grid,
+const ScalingTools = {
+  proto: Flex,
 
   props: {
-    gap: 'D',
-    templateColumns: 'var(--spacing-F2) 1fr',
-
-    sidebar: {
-      padding: 'B 0 0',
-      widthRange: 'F2',
-      position: 'sticky',
-      top: 'E'
-    },
-
-    content: {
-      overflow: 'hidden',
-      flex: '1',
-      flow: 'column',
-      gap: 'C',
-
-      header: {
-        align: 'flex-end space-between',
-        padding: '0 0 0 C',
-        gap: 'C1'
-      },
+    flow: 'column',
+    gap: 'A2'
+  },
 
-      footer: {
-        padding: '0 0 0 C'
+  fontSize: {
+    proto: [SliderToolWithCaption],
+    caption: { text: 'Base size' },
+    element: {
+      style: {
+        maxWidth: `${232 / 16}em`
       }
     }
   },
 
-  sidebar: {
-    SectionHeader: {
-      title: 'TypeScale',
-      p: 'Generate text sequence by a base size and ratio'
-    },
+  sequence: {
+    proto: CommonField,
+    caption: { text: 'Sequence ratio' },
+    element: {
+      proto: StaticSpacing,
+      spacings: {
+        childProto: {
+          on: {
+            click: (ev, el, s) => s.update({ ratio: el.value.text })
+          }
+        }
+      }
+    }
+  }
+}
 
-    SequenceSliders: {
-      flow: 'column'
-    },
+export default {
+  style: styleTypeScale,
+  proto: TypeSection,
 
-    Paragraph: {
-      margin: '0',
-      fontSize: 'Z2',
-      padding: 'B2 0',
-      text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
+  header: {
+    heading: {
+      p: { props: { text: 'Generate text sequence by a base size and ratio' } }
+    },
+    nav: {
+      add: { props: { icon: 'plus' } }
     }
   },
 
-  content: {
-    extend: Flex,
+  wrapper: {
+    textTest: '',
+    fonts: '',
 
-    header: {
-      extend: Flex,
-      range0Buttons,
-      TestText
-    },
+    cnt: {
+      proto: [Block, Grid],
 
-    sequence: {
-      extend: TypeScaleSequence,
-      $setStateCollection: (el) => {
-        const { state } = el
-        state.sequence = {}
-        el.removeContent()
-        return mapSequence(state, sortSequence)
-      }
-    },
+      props: {
+        gap: 'D',
+        columns: '16em auto'
+      },
 
-    footer: { range1Buttons }
+      aside: ScalingTools,
+
+      wrapper: {
+        settings: {
+          proto: PreviewSettings,
+          props: { margin: '0 0 B' }
+        },
+
+        fonts: ScalesSequence
+      },
+
+      sequenceSet: {
+        proto: CommonField,
+        props: { margin: 'C2 0' },
+        caption: {
+          proto: [Block, Text],
+          props: {
+            text: 'Sizing generated by this setting',
+            padding: '0 0 A 0'
+          }
+        },
+        element: {
+          proto: [SequenceGraph, Block, Text],
+          style: { '> span': { display: 'none' } }
+        }
+      }
+    }
   }
 }

package/src/pages/index.js

@@ -1,17 +1,25 @@
 'use strict'
 
-export * from './Init'
-export * from './Components'
-export * from './Export'
-export * from './Fonts'
-export * from './Icons'
-export * from './Library'
-export * from './Color'
-export * from './Theme'
-export * from './Shapes'
-export * from './Spaces'
-export * from './Typography'
-export * from './State'
-export * from './MediaQuery'
-export * from './DesignSystem'
-export * from './Account'
+import PageProto from './PageProto'
+
+import Library from './Library'
+import Export from './Export'
+import Color from './Color'
+import ColorEditor from './ColorEditor'
+import Shapes from './Shapes'
+import Spaces from './Spaces'
+import Icons from './Icons'
+import Typography from './Typography'
+
+export {
+  PageProto,
+
+  Library,
+  Export,
+  Color,
+  ColorEditor,
+  Shapes,
+  Spaces,
+  Icons,
+  Typography
+}

package/src/protect.js

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

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