@symbo.ls/preview 0.0.71 → 0.0.73

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "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

@@ -54,16 +54,26 @@ export const DisabledPage = {
       }
     },
 
-    H3: {
-      margin: 'auto auto 0',
-      padding: 'C1',
-      color: 'black',
-      width: '100%',
-      maxWidth: 'J-default',
-      text: 'Custom library will come up',
-      animation: 'fadeInUpShort',
-      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' // eslint-disable-line
 
 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/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/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' }
 }