@symbo.ls/preview 2.6.0 → 2.6.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "2.6.0",
+  "version": "2.6.6",
   "main": "src/app.js",
   "scripts": {
     "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",

package/src/components/ColumnParagrphs.js

@@ -4,9 +4,8 @@ import { Flex } from '@symbo.ls/components'
 
 const props = {
   gap: 'E',
-  margin: '- - D1 -',
+  margin: '- - D2 -',
   childProps: {
-    fontSize: 'Z1',
     color: 'gray6',
     maxWidth: `${272 / 14}em`
   }

package/src/components/Page.js

@@ -42,7 +42,7 @@ export const InitPage = {
 }
 
 const ifWeHaveComponents = (state) => {
-  const keys = Object.keys(state.__system.COMPONENTS)
+  const keys = Object.keys(state.__client_system.COMPONENTS)
   return !!keys.length
 }
 

package/src/pages/Color/palette.js

@@ -3,8 +3,8 @@
 import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
-  if (!s.__system) return
-  const { COLOR } = s.__system
+  if (!s.__client_system) return
+  const { COLOR } = s.__client_system
   const colorKeys = Object.keys(COLOR)
   return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
 }

package/src/pages/Color/themes.js

@@ -3,8 +3,8 @@
 import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
 const mapThemes = (el, s) => {
-  if (!s.__system) return
-  const { THEME } = s.__system
+  if (!s.__client_system) return
+  const { THEME } = s.__client_system
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }

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

@@ -1,6 +1,6 @@
 'use strict'
 
-export default ({ parent: { state: { __system } } }) => ({
+export default ({ parent: { state: { __client_system } } }) => __client_system && ({
   data: [{
     icon: 'colorOutline',
     iconTheme: 'theme',
@@ -9,10 +9,10 @@ export default ({ parent: { state: { __system } } }) => ({
     iconBackground: 'red',
     properties: [{
       property: 'Colors',
-      value: Object.keys(__system.COLOR).length
+      value: __client_system.COLOR && Object.keys(__client_system.COLOR).length
     }, {
       property: 'Themes',
-      value: Object.keys(__system.THEME).length
+      value: __client_system.THEME && Object.keys(__client_system.THEME).length
     }]
   }, {
     icon: 'typographyOutline',
@@ -21,19 +21,19 @@ export default ({ parent: { state: { __system } } }) => ({
     paragraph: 'style a typed material',
     properties: [{
       property: 'Base size',
-      value: __system.TYPOGRAPHY.base + 'px'
+      value: __client_system.TYPOGRAPHY && __client_system.TYPOGRAPHY.base + 'px'
     }, {
       property: 'Ratio',
-      value: __system.TYPOGRAPHY.ratio
+      value: __client_system.TYPOGRAPHY && __client_system.TYPOGRAPHY.ratio
     }, {
       property: 'Styles',
-      value: __system.TYPOGRAPHY.styles && Object.keys(__system.TYPOGRAPHY.styles).length
+      value: __client_system.TYPOGRAPHY && __client_system.TYPOGRAPHY.styles && Object.keys(__client_system.TYPOGRAPHY.styles).length
     }, {
       property: 'Fonts',
-      value: Object.keys(__system.FONT).length
+      value: __client_system.FONT && Object.keys(__client_system.FONT).length
     }, {
       property: 'Families',
-      value: Object.keys(__system.FONT_FAMILY).length - 1
+      value: __client_system.FONT_FAMILY && Object.keys(__client_system.FONT_FAMILY).length - 1
     }]
   }, {
     icon: 'spaceOutline',
@@ -42,7 +42,7 @@ export default ({ parent: { state: { __system } } }) => ({
     paragraph: 'Manage properties of a size',
     properties: [{
       property: 'Ratio',
-      value: __system.SPACING.ratio
+      value: __client_system.SPACING && __client_system.SPACING.ratio
     }, {
       property: 'Templates',
       value: 'TBA'
@@ -66,13 +66,13 @@ export default ({ parent: { state: { __system } } }) => ({
     paragraph: 'Label a role of subject with glyphs',
     properties: [{
       property: 'All',
-      value: Object.keys(__system.ICONS).length
+      value: __client_system.ICONS && Object.keys(__client_system.ICONS).length
     }, {
       property: 'Linear',
-      value: Object.keys(__system.ICONS).filter(v => v.includes('Outline')).length
+      value: __client_system.ICONS && Object.keys(__client_system.ICONS).filter(v => v.includes('Outline')).length
     }, {
       property: 'Colored',
-      value: Object.keys(__system.ICONS).filter(v => v.includes('Colored')).length
+      value: __client_system.ICONS && Object.keys(__client_system.ICONS).filter(v => v.includes('Colored')).length
     }]
   }, {
     icon: 'clock',
@@ -81,10 +81,10 @@ export default ({ parent: { state: { __system } } }) => ({
     paragraph: 'Tokens for transitions and animations',
     properties: [{
       property: 'Timing base',
-      value: __system.TIMING.base + 'ms'
+      value: __client_system.TIMING && __client_system.TIMING.base + 'ms'
     }, {
       property: 'Ratio',
-      value: __system.TIMING.ratio
+      value: __client_system.TIMING && __client_system.TIMING.ratio
     }, {
       property: 'Transitions',
       value: 'TBA'
@@ -98,10 +98,10 @@ export default ({ parent: { state: { __system } } }) => ({
     paragraph: 'Label a role of subject with glyphs',
     properties: [{
       property: 'Breakpoints',
-      value: Object.keys(__system.MEDIA).length
+      value: __client_system.MEDIA && Object.keys(__client_system.MEDIA).length
     }, {
       property: 'Screens',
-      value: Object.keys(__system.DEVICES).length
+      value: __client_system.DEVICES && Object.keys(__client_system.DEVICES).length
     }]
   }, {
     icon: 'threeDots',

package/src/pages/Export/index.js

@@ -39,7 +39,7 @@ export const Export = {
       const route = window.location.pathname
       const routes = route.slice(1).split('/')
       const componentKey = routes[1]
-      const { COMPONENTS } = state.__system
+      const COMPONENTS = state.__components
 
       const libComponent = COMPONENT_ROUTES[`/${componentKey}`]
       const liveComponent = COMPONENTS[componentKey]

package/src/pages/Export/scene.js

@@ -52,7 +52,7 @@ export default {
 
       comp: (el, s) => {
         if (s.live) {
-          const SYSTEM = s.__system
+          const CLIENT_SYSTEM = s.__client_system
           const styleNode = document.createElement('head')
           const emotion = createEmotion('client', styleNode)
           emCache['client'] = emotion
@@ -67,12 +67,12 @@ export default {
             extend: [Box],
             define: { style: emotionStyle, class: emotionClass },
             components,
-            context: { SYSTEM }
+            context: { SYSTEM: CLIENT_SYSTEM }
           })
 
           newDom.node.appendChild(styleNode)
 
-          init(SYSTEM, null, { emotion, initDOMQLDefine: false, newConfig: 'client' })
+          init(CLIENT_SYSTEM, null, { emotion, initDOMQLDefine: false, newConfig: 'client' })
           activateConfig('client')
 
           newDom.set({

package/src/pages/Fonts/fontFaces.js

@@ -4,8 +4,8 @@ import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 const mapFonts = (el, s) => {
-  if (!s.__system) return
-  const { FONT } = s.__system
+  if (!s.__client_system) return
+  const { FONT } = s.__client_system
   const fontKeys = Object.keys(FONT)
 
   return fontKeys.map(v => {

package/src/pages/Fonts/fontFamilies.js

@@ -4,8 +4,8 @@ import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
 import { TypeSection } from '../Typography/shared'
 
 const mapFontFamilies = (el, s) => {
-  if (!s.__system) return
-  const { FONT_FAMILY } = s.__system
+  if (!s.__client_system) return
+  const { FONT_FAMILY } = s.__client_system
   const fontFamilyKeys = Object.keys(FONT_FAMILY)
 
   return fontFamilyKeys.map(v => {

package/src/pages/Init/CreateDocumentTheme.js

@@ -136,7 +136,7 @@ export const CreateDocumentTheme = {
 
   on: {
     init: ({ state }) => {
-      const { THEME, COLOR } = state.__system
+      const { THEME, COLOR } = state.__client_system
       const { document } = THEME
       const dark = document['@dark']
       const light = document['@light']

package/src/pages/Init/Personalize/index.js

@@ -11,7 +11,7 @@ export const Personalize = {
   back: null,
 
   HeaderHeading: {
-    props: { margin: '- - D2 -' },
+    props: { margin: '- - D1 -' },
     Caption: { text: `Let's personalize your Symbols` },
     H1: { text: ({ state }) => `Hi ${state.userName}` }
   },
@@ -25,7 +25,9 @@ export const Personalize = {
   },
 
   Flex: {
-    props: { gap: 'D1' },
+    props: ({ state }) => ({
+      gap: 'D1'
+    }),
 
     icon,
     fields

package/src/pages/Library/index.js

@@ -26,7 +26,7 @@ export const Library = {
 
     childExtend: ComponentTemplate,
     $setStateCollection: ({ state }) => {
-      const { COMPONENTS } = state.__system
+      const COMPONENTS = state.__components
       return Object.values(COMPONENTS)
     }
   }

package/src/pages/Spaces/index.js

@@ -20,7 +20,7 @@ export const Spaces = {
 
   on: {
     init: (el, s) => {
-      if (!s.__system.SPACING) {
+      if (!s.__client_system.SPACING) {
         s.systemUpdate({
           SPACING: { base: s.base, ratio: s.ratio }
         }, { preventUpdate: true })

package/src/pages/State/index.js

@@ -27,9 +27,9 @@ export const State = {
           input: (ev, el, s) => {
             const rootState = el.__root.state
             const obj = {
-              STATE: { [el.parent.key]: el.node.value }
+              CLIENT_STATE: { [el.parent.key]: el.node.value }
             }
-            rootState.update({ SYSTEM: obj })
+            rootState.update(obj)
           }
         }
       }
@@ -80,7 +80,7 @@ export const State = {
 
   on: {
     stateUpdated: (el, s) => {
-      s.systemUpdate({ STATE: s.parse })
+      s.systemUpdate({ CLIENT_STATE: s.parse })
     }
   }
 }

package/src/pages/Theme/index.js

@@ -145,11 +145,11 @@ export const Theme = {
 
   on: {
     init: (el, s) => {
-      if (!s.__system) return
+      if (!s.__client_system) return
       const path = window.location.pathname
       const pathArray = path.split('theme/')
-      if (!s.__system) return
-      const { THEME } = s.__system
+      if (!s.__client_system) return
+      const { THEME } = s.__client_system
       const themeName = pathArray[1]
       var value = THEME[themeName]
 

package/src/pages/Typography/collection.js

@@ -50,11 +50,11 @@ const isTag = v => HTML_TAGS.root.indexOf(v) > -1 || HTML_TAGS.body.indexOf(v) >
 const isHelper = v => v.slice(0, 1) === '.'
 
 const getCollectionFromArray = (arr, s) => {
-  const { __system } = s
-  const { TYPOGRAPHY } = __system
+  const { __client_system } = s
+  const { TYPOGRAPHY } = __client_system
   const { styles } = TYPOGRAPHY
   return arr.map((v, k) => {
-    const result = getTypeStyle(v, __system)
+    const result = getTypeStyle(v, __client_system)
     return {
       key: v,
       value: {
@@ -82,8 +82,8 @@ export const headingsCollection = (el, s) => {
 }
 
 export const tagsCollection = (el, s) => {
-  const { __system } = s
-  const { TYPOGRAPHY } = __system
+  const { __client_system } = s
+  const { TYPOGRAPHY } = __client_system
   const { styles } = TYPOGRAPHY
   if (!styles.body) styles.body = {}
   el.removeContent()
@@ -97,8 +97,8 @@ export const tagsCollection = (el, s) => {
 }
 
 export const helpersCollection = (el, s) => {
-  const { __system } = s
-  const { TYPOGRAPHY } = __system
+  const { __client_system } = s
+  const { TYPOGRAPHY } = __client_system
   const { styles } = TYPOGRAPHY
 
   const HELPERS = Object.keys(styles)

package/src/pages/Typography/documentStyles.js

@@ -113,9 +113,9 @@ export default {
 
   on: {
     init: (el, s) => {
-      if (!s.__system) return
-      const { __system } = s
-      const { TYPOGRAPHY } = __system
+      if (!s.__client_system) return
+      const { __client_system } = s
+      const { TYPOGRAPHY } = __client_system
       const { styles } = TYPOGRAPHY
       if (styles) {
         s.update({ styles }, { preventUpdate: true })

package/src/pages/Typography/index.js

@@ -30,7 +30,7 @@ export const Typography = {
 
   on: {
     init: (el, s) => {
-      if (!s.__system.TYPOGRAPHY) {
+      if (!s.__client_system.TYPOGRAPHY) {
         s.systemUpdate({
           TYPOGRAPHY: { base: s.base, ratio: s.ratio }
         })