@symbo.ls/preview 0.0.78 → 0.0.80

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "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/index.js

@@ -18,7 +18,6 @@ import { Sync } from './sync' // eslint-disable-line
 smbls.init({ verbose: false, ...SYMBOLS_CONF })
 
 DOM.define({
-  __filepath: param => param,
   $setCollection: smbls.Collection.define.$setCollection,
   $setStateCollection: smbls.Collection.define.$setStateCollection
 })

package/src/pages/Export/const.js

@@ -1,10 +1,10 @@
 'use strict'
 
 import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/scratch'
-import { LIBRARY, COMPONENTS } from '../../../.symbols'
+import { LIBRARY, COMPONENTS } from '../../../.symbols' // eslint-disable-line
 
 const COMPONENT_ROUTES = {}
-LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
+// LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 COMPONENTS.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 
 // const SEQUENCE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 32, 36, 42, 48, 56, 62, 68, 76, 84, 92, 100, 110]

package/src/pages/Export/index.js

@@ -39,8 +39,12 @@ export const Export = {
       const route = window.location.pathname
       const routes = route.slice(1).split('/')
       const componentKey = routes[1]
+      const { COMPONENTS } = state.__system
 
-      const content = COMPONENT_ROUTES[`/${componentKey}`]
+      const content = COMPONENT_ROUTES[`/${componentKey}`] || COMPONENTS[componentKey]
+      console.warn('===content')
+      console.warn(content)
+      console.warn(componentKey, COMPONENTS)
 
       if (content) {
         state.update({

package/src/pages/Library/disabled.js

@@ -0,0 +1,38 @@
+'use strict'
+
+import { ComponentTemplate } from '@symbo.ls/components'
+import { Page, DisabledPage } from '../../components'
+
+import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
+
+export const Library = {
+  extend: [Page, DisabledPage],
+
+  SectionHeader: {
+    title: 'My Symbols',
+    p: 'This is the first collection of your components'
+  },
+
+  Grid: {
+    props: {
+      flex: 1,
+      templateColumns: 'repeat(12, 1fr)',
+      autoFlow: 'dense',
+      autoColumns: 'auto',
+      autoRows: 'auto',
+      justifyItems: 'stretch',
+
+      margin: '- -Z2 B1',
+      gap: 'A'
+    },
+
+    childExtend: ComponentTemplate,
+    $setStateCollection: () => {
+      return new Array(15).fill(void 0).map(v => ({
+        settings: {
+          gridOptions: { colspan: 3, rowspan: 1 }
+        }
+      }))
+    }
+  }
+}

package/src/pages/Library/index.js

@@ -1,12 +1,12 @@
 'use strict'
 
 import { ComponentTemplate } from '@symbo.ls/components'
-import { Page, DisabledPage } from '../../components'
+import { Page } from '../../components'
 
 import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
 
 export const Library = {
-  extend: [Page, DisabledPage],
+  extend: [Page],
 
   SectionHeader: {
     title: 'My Symbols',
@@ -27,12 +27,9 @@ export const Library = {
     },
 
     childExtend: ComponentTemplate,
-    $setStateCollection: () => {
-      return new Array(15).fill(void 0).map(v => ({
-        settings: {
-          gridOptions: { colspan: 3, rowspan: 1 }
-        }
-      }))
+    $setStateCollection: ({ state }) => {
+      const { COMPONENTS } = state.__system
+      return COMPONENTS
     }
   }
 }

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/state.js

@@ -10,6 +10,7 @@ export const state = {
 }
 
 state.SYSTEM = USR_DATA[state.appKey]
+state.SYSTEM.COMPONENTS = {}
 
 export const context = {
   LIBRARY,

package/src/sync.js

@@ -1,26 +1,48 @@
 'use strict'
 
-// import { init } from '@symbo.ls/init'
-import { connect, send } from '@symbo.ls/socket/client'
+import { init, connect, send } from 'smbls' // eslint-disable-line no-unused-vars
+import { router } from '@domql/router'
 
 const onChange = (element, state) => {
   return (event, data) => {
-    if (event !== 'live-change') {
-      const obj = JSON.parse(data)
+    // if (event === 'change') {
+    //   const obj = JSON.parse(data)
+    //   state.update({ SYSTEM: obj })
+    // }
+    if (event === 'change') {
+      console.log(data)
+      // const obj = JSON.parse(data)
       state.update({ SYSTEM: data })
     }
+    if (event === 'route') {
+      console.log(data)
+      // const obj = JSON.parse(data)
+      router(element, data, {})
+    }
   }
 }
 
 export const Sync = {
   on: {
     init: (el, s) => {
-      if (s.appKey) connect(s.appKey, onChange(el, s))
+      if (s.appKey) {
+        connect(s.appKey, {
+          source: 'symbols',
+          onChange: onChange(el, s)
+        })
+      }
     },
     stateUpdated: (el, s, changes) => {
       if (s.appKey && changes.SYSTEM) {
-        send(changes.SYSTEM, s.SYSTEM)
-        // init(changes.SYSTEM)
+        const { SYSTEM } = changes
+        send('liveChange', SYSTEM)
+
+        // if (SYSTEM.COLOR && SYSTEM.THEME) {
+        //   init({
+        //     color: SYSTEM.COLOR,
+        //     theme: SYSTEM.THEME
+        //   })
+        // }
       }
     }
   }