@symbo.ls/preview 0.0.70 → 0.0.72

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/app.js

@@ -1,9 +1,10 @@
 'use strict'
 
 import './config'
+import style from './style'
 
 import { router } from '@domql/router'
-import { openModal } from '@symbo.ls/components'
+import { Flex, openModal } from '@symbo.ls/components'
 
 import { state } from './state'
 import {
@@ -31,19 +32,10 @@ Object.keys(DesignSystem.routes).map(route => {
 
 const App = {
   key: 'app',
-  extend: [Sync],
+  extend: Flex,
 
   state,
-
-  props: {
-    theme: 'document',
-    boxSize: '100% 100%',
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    flexFlow: 'column',
-    flexAlign: 'center flex-start'
-  },
+  props: style,
 
   define: { routes: param => param },
   routes: {
@@ -55,9 +47,7 @@ const App = {
     ...SUB_ROUTES
   },
 
-  content: {
-    props: { position: 'relative' }
-  },
+  content: {},
 
   Modal: {},
 

package/src/components/Header.js

@@ -1,5 +1,8 @@
 'use strict'
 
+import { router } from '@domql/router'
+import { HeaderInitial, HeaderOfMember } from '@symbo.ls/components'
+
 export const Header = {
   props: {
     position: 'sticky',
@@ -12,6 +15,23 @@ export const Header = {
       width: '100%'
     }
   }
+}
+
+export const HeaderOnRouter = {
+  extend: Header,
+  props: { width: '100%' },
 
-  // define: { isFloating: param => param }
+  define: { routes: param => param },
+  routes: {
+    '/': HeaderInitial,
+    '/*': HeaderOfMember
+  },
+
+  on: {
+    render: element => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      router(element, url, {}, { updateState: false })
+    }
+  }
 }

package/src/components/Page.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { PageTemplate, Flex } from '@symbo.ls/components'
+import { PageTemplate, Overlay, Flex } from '@symbo.ls/components'
 
 import MASK1 from '../assets/mask1.png'
 import MASK2 from '../assets/mask2.png' // eslint-disable-line
@@ -34,7 +34,9 @@ export const DisabledPage = {
     overflow: 'hidden'
   },
 
-  Overlay: {
+  disablingOverlay: {
+    extend: [Overlay, Flex],
+
     props: {
       overflow: 'hidden',
       background: 'shadow-overlay',
@@ -43,28 +45,35 @@ export const DisabledPage = {
     },
 
     Overlay: {
-      props: {
-        background: 'gradient-colorful',
-        inset: '0 0 0 0',
-        opacity: '.9',
-        style: {
-          // filter: 'blur(110px)',
-          WebkitMaskImage: 'url(' + MASK1 + ')',
-          WebkitMaskSize: '100% 100%'
-        }
+      background: 'gradient-colorful',
+      inset: '0 0 0 0',
+      opacity: '.9',
+      style: {
+        WebkitMaskImage: 'url(' + MASK1 + ')',
+        WebkitMaskSize: '100% 100%'
       }
     },
 
-    H4: {
-      position: 'absolute',
-      margin: '0',
-      color: 'black',
-      left: 'C',
-      bottom: 'B',
-      text: 'Custom library will come up soon…',
-      animation: 'fadeInUpLong',
-      animationDuration: 'G',
-      animationDelay: 'G'
+    message: {
+      props: {
+        animation: 'fadeInUpShort',
+        animationDuration: 'G',
+        animationDelay: 'G',
+        margin: 'auto auto 0',
+        padding: 'C1 E C',
+        color: 'black',
+        width: '100%',
+        maxWidth: 'K-default'
+      },
+
+      H3: 'Custom library will come up soon',
+      P: {
+        text: 'Meanwhile, please check the components page',
+        margin: 'X 0 0',
+        animation: 'fadeInUpShort',
+        animationDuration: 'G',
+        animationDelay: 'G2'
+      }
     }
   }
 }

package/src/index.js

@@ -3,7 +3,6 @@
 import './config'
 import DOM from 'domql'
 import SYMBOLS_CONF from '@symbo.ls/config'
-import style from './style'
 
 import 'smbls'
 import * as smbls from '@symbo.ls/components'
@@ -14,6 +13,7 @@ import { DesignSystem, Library } from './pages' // eslint-disable-line
 import { router, lastLevel } from '@domql/router'
 
 import { context } from './state'
+import { Sync } from './sync'
 
 smbls.init({ verbose: false, ...SYMBOLS_CONF })
 
@@ -25,29 +25,12 @@ DOM.define({
 
 // export default DOM.create(App, DevFocus, 'app', { TODO: try this
 const app = DOM.create({
-  extend: App,
-  style,
+  // extend: [Sync, App],
+  extend: [App],
 
-  Header: {
-    props: {},
+  HeaderOnRouter: {},
 
-    define: { routes: param => param },
-    routes: {
-      '/': smbls.HeaderInitial,
-      '/*': smbls.HeaderOfMember
-    },
-
-    on: {
-      render: element => {
-        const { pathname, hash } = window.location
-        const url = pathname + hash
-        router(element, url, {}, { updateState: false })
-      }
-    }
-  },
-  routes: {
-    // '/': Library
-  }
+  routes: {}
 }, undefined, 'app', {
   extend: [smbls.Box],
   components: { ...smbls, ...components },

package/src/pages/Init/CreateDocumentTheme.js

@@ -66,13 +66,14 @@ const modes = {
 
     ThemeButtons: {
       position: 'absolute',
-      left: 'X2',
-      right: 'X2',
-      bottom: 'X2',
+      left: 'W',
+      right: 'W',
+      bottom: 'W',
       opacity: '0',
       transition: 'B default-bezier',
       transitionProperty: 'transform, opacity',
-      transform: 'translate3d(0, 100%, 0)'
+      transform: 'translate3d(0, 100%, 0)',
+      columnGap: 'W'
     },
 
     Span: {

package/src/pages/Init/index.js

@@ -13,7 +13,7 @@ export const Init = {
   props: {
     boxSize: '100% 100%',
     gap: 'A',
-    padding: '7.5% E1 D1 12.5%'
+    padding: '8.5% E1 E1 12.5%'
   },
 
   define: { routes: param => param },

package/src/pages/Spaces/index.js

@@ -26,7 +26,6 @@ export const Spaces = {
     }
   },
   stateUpdated: (el, s, changes) => {
-    console.log(s)
     s.systemUpdate({ SPACING: { base: s.base, ratio: s.ratio } }, { preventUpdate: true })
   }
 }

package/src/state.js

@@ -7,8 +7,9 @@ import FIT from '../user_data/4it' // eslint-disable-line no-unused-vars
 
 export const state = {
   globalTheme: 'dark',
-  // SYSTEM: {}
+  appKey: '4it.symbo.ls',
   SYSTEM: FIT
+  // SYSTEM: {}
   // SYSTEM
   // SYSTEM: BYLD
 }

package/src/style.js

@@ -1,11 +1,20 @@
 'use strict'
 
 export default {
+  theme: 'document',
+  boxSize: '100% 100%',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  flow: 'column',
+  align: 'center flex-start',
+  overflow: 'hidden auto',
   boxSizing: 'border-box',
-  overflow: 'hidden',
-  overflowY: 'auto',
   cursor: 'default',
-  'button, a': {
-    cursor: 'default'
-  }
+  style: {
+    'button, a': {
+      cursor: 'default'
+    }
+  },
+  content: { position: 'relative' }
 }

package/src/sync.js

@@ -3,7 +3,7 @@
 // import { init } from '@symbo.ls/init'
 import { connect, send } from '@symbo.ls/socket/client'
 
-const receive = (element, state) => {
+const onChange = (element, state) => {
   return (event, data) => {
     state.update({ SYSTEM: data })
   }
@@ -12,13 +12,12 @@ const receive = (element, state) => {
 export const Sync = {
   on: {
     init: (el, s) => {
-      connect('ws://localhost:1001', receive(el, s))
+      if (s.appKey) connect(s.appKey, onChange(el, s))
     },
     stateUpdated: (el, s, changes) => {
-      if (changes.SYSTEM) {
-        // init(changes.SYSTEM)
-        console.log(changes)
+      if (s.appKey && changes.SYSTEM) {
         send(changes.SYSTEM, s.SYSTEM)
+        // init(changes.SYSTEM)
       }
     }
   }