@symbo.ls/preview 0.0.77 → 0.0.79

package/package.json

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

package/src/app.js

@@ -3,8 +3,7 @@
 import './config'
 import style from './style'
 
-import { router } from '@domql/router'
-import { Flex, openModal } from '@symbo.ls/components'
+import { Flex } from '@symbo.ls/components'
 
 import { state } from './state'
 import {

package/src/components/Banner.js

@@ -17,6 +17,7 @@ export const TutorialBanner = {
     position: 'relative',
     color: 'white',
     flex: 1,
+    transitionProperty: 'transform, opacity, padding',
 
     title: { margin: 'auto 0 0', text: state.title },
     p: { text: state.p },

package/src/pages/Typography/collection.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { 
+import {
   findHeadingLetter,
   getFontFamily
 } from '@symbo.ls/scratch'
@@ -28,7 +28,7 @@ const getTypeProp = (key, prop, library, defaultValue) => {
   const { TYPOGRAPHY } = library
   const { styles } = TYPOGRAPHY
   if (!styles[key]) styles[key] = {}
-  return styles[key][prop] || 
+  return styles[key][prop] ||
     styles[prop] ||
     TYPOGRAPHY[prop] ||
     defaultValue ||
@@ -45,10 +45,8 @@ const getTypeStyle = (key, library) => ({
   letterWidth: getTypeProp(key, 'letterWidth', library)
 })
 
-
 const isHeading = v => v.length === 2 && v[0] === 'h'
-const isTag = v => HTML_TAGS.root.indexOf(v) > -1  ||
-  HTML_TAGS.body.indexOf(v) > -1
+const isTag = v => HTML_TAGS.root.indexOf(v) > -1 || HTML_TAGS.body.indexOf(v) > -1
 const isHelper = v => v.slice(0, 1) === '.'
 
 const getCollectionFromArray = (arr, s) => {
@@ -65,11 +63,11 @@ const getCollectionFromArray = (arr, s) => {
       },
       labels: Object.keys(result)
         .filter(key => key !== 'fontSize' && result[key] && result[key] !== '0')
-        .map(key => ({ 
+        .map(key => ({
           icon: iconMap[key],
           text: result[key]
         })
-      ),
+        ),
       sequenceValue: s.sequence[
         isHeading(v) ? findHeadingLetter(s.h1Matches, k) : result.fontSize
       ]
@@ -85,7 +83,7 @@ export const headingsCollection = (el, s) => {
 
 export const tagsCollection = (el, s) => {
   const { __system } = s
-  const { FONT_FAMILY, TYPOGRAPHY } = __system
+  const { TYPOGRAPHY } = __system
   const { styles } = TYPOGRAPHY
   if (!styles.body) styles.body = {}
   el.removeContent()
@@ -100,17 +98,13 @@ export const tagsCollection = (el, s) => {
 
 export const helpersCollection = (el, s) => {
   const { __system } = s
-  const { TYPOGRAPHY, FONT_FAMILY } = __system
-  let { styles } = TYPOGRAPHY
-  if (!styles) styles = TYPOGRAPHY.styles = {}
-  el.removeContent()
-  
-  const { lineHeight, fontWeight } = TYPOGRAPHY
-  const familyValue = getFontFamily('def', FONT_FAMILY)
-  const font = familyValue[0]
+  const { TYPOGRAPHY } = __system
+  const { styles } = TYPOGRAPHY
 
   const HELPERS = Object.keys(styles)
     .filter(v => v.slice(0, 1) === '.')
 
+  el.removeContent()
+
   return getCollectionFromArray(HELPERS, s)
 }

package/src/sync.js

@@ -5,7 +5,10 @@ import { connect, send } from '@symbo.ls/socket/client'
 
 const onChange = (element, state) => {
   return (event, data) => {
-    state.update({ SYSTEM: data })
+    if (event !== 'live-change') {
+      const obj = JSON.parse(data)
+      state.update({ SYSTEM: data })
+    }
   }
 }