@symbo.ls/preview 0.0.58 → 0.0.60

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -25,8 +25,10 @@
   "dependencies": {
     "@domql/router": "latest",
     "@domql/tags": "latest",
+    "@symbo.ls/cli": "^0.6.23",
     "@symbo.ls/components": "latest",
     "@symbo.ls/config": "latest",
+    "@symbo.ls/config-default": "^1.0.1",
     "@symbo.ls/icons": "latest",
     "@symbo.ls/init": "^1.1.3",
     "@symbo.ls/scratch": "latest",

package/src/app.js

@@ -4,11 +4,8 @@ import './config'
 
 import 'domql/packages/emotion'
 import { router } from '@domql/router'
-import { init } from '@symbo.ls/init'
 import { openModal } from '@symbo.ls/components'
 
-// import { send } from '@symbo.ls/socket/client'
-
 import { state } from './state'
 import {
   Components,
@@ -17,6 +14,8 @@ import {
   Library
 } from './pages'
 
+import { Sync } from './sync'
+
 const SUB_ROUTES = {}
 Object.keys(DesignSystem.routes).map(route => {
   SUB_ROUTES[route] = {
@@ -32,6 +31,7 @@ Object.keys(DesignSystem.routes).map(route => {
 
 const App = {
   key: 'app',
+  extend: [Sync],
 
   state,
 
@@ -67,12 +67,6 @@ const App = {
       router(element, url, {})
     },
     update: (el, s) => { openModal(el, s) },
-    stateUpdated: (el, s, changes) => {
-      if (changes.SYSTEM) {
-        init(changes.SYSTEM)
-        // send(changes.SYSTEM, s.SYSTEM)
-      }
-    },
     scroll: (ev, el) => {
       const { scrollTop } = el.node
       const isFloating = scrollTop > 0

package/src/components/Banner.js

@@ -49,7 +49,7 @@ export const TutorialBanner = {
     },
 
     ':hover': {
-      padding: 'B B1',
+      padding: '- C1 - -',
       ':before': { opacity: '1' },
       ':after': { opacity: '1' }
     }

package/src/components/SlidersWithResponsive.js

@@ -4,18 +4,20 @@ import { Flex } from '@symbo.ls/components'
 
 export const SlidersWithResponsive = {
   extend: Flex,
+
   props: {
     align: 'flex-end space-between',
     position: 'sticky',
     top: 'C2',
     background: 'black .5',
-    zIndex: '9999',
+    zIndex: '9',
     margin: '-B2 -B -B',
     padding: 'B2 B B',
     style: {
       backdropFilter: 'blur(15px)'
     }
   },
+
   SequenceSliders: {},
   DeviceButtonSet: {}
 }

package/src/pages/DesignSystem/Dashboard/banners.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+import { TutorialBanner } from '../../../components'
+
+import DARK_PNG from '../../../assets/dark.png'
+import TYPE_PNG from '../../../assets/type.png'
+import SPACE_PNG from '../../../assets/space.png'
+
+export default {
+  extend: Flex,
+
+  props: {
+    align: 'stretch space-between',
+    margin: 'C1 -Z1',
+    gap: 'B1'
+  },
+
+  childExtend: TutorialBanner,
+
+  $setStateCollection: ({ state }) => [{
+    title: 'Setting up a dark theme',
+    p: '1 min tutorial',
+    background: DARK_PNG,
+    href: ''
+  }, {
+    title: 'Learn typography scaling',
+    p: '2 mins tutorial',
+    background: TYPE_PNG,
+    href: ''
+  }, {
+    title: 'How scaling of space works',
+    p: '5 mins tutorial',
+    background: SPACE_PNG,
+    href: ''
+  }]
+}

package/src/pages/DesignSystem/Dashboard/index.js

@@ -1,42 +1,8 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/components'
-import { TutorialBanner } from '../../../components'
-
 import summary from './summary'
 import quickstart from './quickstart'
-
-import DARK_PNG from '../../../assets/dark.png'
-import TYPE_PNG from '../../../assets/type.png'
-import SPACE_PNG from '../../../assets/space.png'
-
-const banners = {
-  extend: Flex,
-  props: {
-    align: 'stretch space-between',
-    margin: 'C1 -Z1',
-    gap: 'B1'
-  },
-
-  childExtend: TutorialBanner,
-
-  $setStateCollection: ({ state }) => [{
-    title: 'Setting up a dark theme',
-    p: '1 min tutorial',
-    background: DARK_PNG,
-    href: ''
-  }, {
-    title: 'Learn typography scaling',
-    p: '2 mins tutorial',
-    background: TYPE_PNG,
-    href: ''
-  }, {
-    title: 'How scaling of space works',
-    p: '5 mins tutorial',
-    background: SPACE_PNG,
-    href: ''
-  }]
-}
+import banners from './banners'
 
 export const DesignSystemDashboard = {
   ArticleBig: {

package/src/pages/DesignSystem/Dashboard/quickstart.js

@@ -17,7 +17,8 @@ export default {
       align: 'flex-start space-between',
       childProps: {
         flex: '1',
-        maxWidth: 'H2'
+        maxWidth: 'H'
+        // width: '100%'
       }
     },
 
@@ -25,7 +26,7 @@ export default {
       extend: 'QuickStartTerminal',
       QuickStartNumber: { width: '.87ch', text: '1' },
       Terminal: {
-        command: { text: 'yarn add smbls@^1.1.1' }
+        command: { text: 'yarn add smbls' }
       }
     },
 

package/src/pages/Spaces/index.js

@@ -16,5 +16,16 @@ export const Spaces = {
 
   Line: {},
 
-  sequence
+  sequence,
+
+  init: (el, s) => {
+    if (!s.__system.SPACING) {
+      s.systemUpdate({
+        SPACING: { base: s.base, ratio: s.ratio }
+      }, { preventUpdate: true })
+    }
+  },
+  stateUpdated: (el, s, changes) => {
+    s.systemUpdate({ SPACING: changes }, { preventUpdate: true })
+  }
 }

package/src/pages/Typography/index.js

@@ -30,10 +30,14 @@ export const Typography = {
 
   on: {
     init: (el, s) => {
+      if (!s.__system.TYPOGRAPHY) {
+        s.systemUpdate({
+          TYPOGRAPHY: { base: s.base, ratio: s.ratio }
+        })
+      }
       mapSequence(s, sortSequence)
     },
     stateUpdated: (el, s, changes) => {
-      console.log(changes)
       s.systemUpdate({ TYPOGRAPHY: changes })
     }
   }

package/src/pages/Typography/state.js

@@ -1,8 +1,8 @@
 'use strict'
 
 export default ({ parent }) => ({
-  base: parent.state.__system.TYPOGRAPHY.base,
-  ratio: parent.state.__system.TYPOGRAPHY.ratio,
+  base: 16,
+  ratio: 1.125,
   range: [-3, +8],
   h1Matches: +6,
   scales: {},

package/src/state.js

@@ -2,15 +2,15 @@
 
 import SYSTEM from './config'
 import { LIBRARY, COMPONENTS } from '../.symbols'
-import BYLD from '../user_data/byld'
+import BYLD from '../user_data/byld' // eslint-disable-line no-unused-vars
 
 export const state = {
   globalTheme: 'dark',
-  SYSTEM: BYLD
+  SYSTEM: {}
 }
 
 export const context = {
-  CONFIG: BYLD,
+  CONFIG: SYSTEM,
   LIBRARY,
   SYSTEM,
   COMPONENTS

package/src/sync.js

@@ -0,0 +1,31 @@
+'use strict'
+
+// import { init } from '@symbo.ls/init'
+import { connect, send } from '@symbo.ls/socket/client'
+
+import CONFIG_DEFAULT from '@symbo.ls/config-default'
+
+const receive = (element, state) => {
+  return (event, data) => {
+    state.update({ SYSTEM: data })
+    if (!state.SYSTEM.TYPOGRAPHY) {
+      state.update({
+        SYSTEM: CONFIG_DEFAULT
+      }, { preventUpdate: true })
+    }
+  }
+}
+
+export const Sync = {
+  on: {
+    init: (el, s) => {
+      connect('ws://localhost:1001', receive(el, s))
+    },
+    stateUpdated: (el, s, changes) => {
+      if (changes.SYSTEM) {
+        // init(changes.SYSTEM)
+        send(changes.SYSTEM, s.SYSTEM)
+      }
+    }
+  }
+}

package/README.md

@@ -1,19 +0,0 @@
-# Fucking editor!
-Example dev setup (boilerplate) to use [DOMQL](https://github.com/rackai/domql). You can also check live editor [Playground](https://github.com/rackai/playground).
-
-### Setup
-
-1. Clone the repo
-```
-git clone git@github.com:symbo-ls/preview.git
-```
-
-2. Install scripts
-```
-yarn
-```
-
-3. Run the project
-```
-yarn start
-```