@symbo.ls/preview 2.6.17 → 2.6.18

package/package.json

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

@@ -38,7 +38,6 @@ const App = {
     '/design-system': DesignSystem,
     '/components': Components,
     '/component': Export,
-    // '/state': State,
     ...SUB_ROUTES
   },
 

package/src/components/ThemeButtons.js

@@ -25,7 +25,6 @@ export const ThemeButtons = {
     on: {
       stateUpdated: (el, s) => {
         s.parent.update({ [s.key]: s.value })
-        return false
       }
     }
   },

package/src/pages/Export/description.js

@@ -68,7 +68,7 @@ export default {
 
       title: {},
       list: {
-        $setStateCollection: ({ state }) => state.props
+        // $setStateCollection: ({ state }) => state.props
       }
     },
 

package/src/pages/Export/index.js

@@ -52,6 +52,7 @@ export const Export = {
           ...content
         }, { preventUpdate: true })
       }
+
       if (componentKey.length === 32) { // this might be Gist
         fetchGist(componentKey, state)
       }
@@ -73,8 +74,8 @@ export const Export = {
       flex: '1'
     },
 
-    tools
-    // description
+    tools,
+    description
   }
 
   // footer: { extend: Footer }

package/src/pages/Export/scene.js

@@ -1,17 +1,7 @@
 'use strict'
 
-import DOM from 'domql'
-import { transformEmotionClass, transformEmotionStyle } from 'domql/packages/emotion'
-import { createEmotion } from '@symbo.ls/create-emotion'
-import { updateReset } from '@symbo.ls/init'
-import { isString } from '@domql/utils'
-
-import { getActiveConfig, activateConfig } from '@symbo.ls/scratch'
-import { init, Box, Scene } from '@symbo.ls/components'
-
-import * as components from '../../components'
-
-const emCache = {}
+import { getActiveConfig } from '@symbo.ls/scratch'
+import { Scene } from '@symbo.ls/components'
 
 export default {
   extend: Scene,
@@ -31,6 +21,7 @@ export default {
     props: {
       padding: 'B 0',
       maxHeight: '40em',
+      position: 'relative',
       minHeight: '65vh'
     },
 
@@ -42,86 +33,26 @@ export default {
       })
     },
 
-    content: {
-      props: {
-        transition: 'all, B, defaultBezier',
-        style: {
-          '*': { transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)' }
-        }
-      },
-
-      comp: (el, s) => {
-        if (s.live) {
-          const PROJECT_SYSTEM = s.__projectSystem
-          const styleNode = document.createElement('head')
-          const emotion = createEmotion('client', styleNode)
-          emCache['client'] = emotion
-
-          const emotionStyle = transformEmotionStyle(emotion, true)
-          const emotionClass = transformEmotionClass(emotion, true)
-
-          const newDom = DOM.create({
-            tag: 'shadow',
-            state: s.state
-          }, el.parent.node, 'comp', {
-            extend: [Box],
-            define: { style: emotionStyle, class: emotionClass },
-            components,
-            context: { system: PROJECT_SYSTEM }
-          })
-
-          newDom.node.appendChild(styleNode)
-
-          init(PROJECT_SYSTEM, null, { emotion, initDOMQLDefine: false, newConfig: 'client' })
-          activateConfig('client')
-
-          newDom.set({
-            tag: 'fragment',
-            [s.key]: {
-              extend: isString(s.component) ? document.eval(s.component) : s.component,
-              props: { inheritSpacingRatio: true }
-            },
-            on: {
-              render: (el) => {
-                // const appKey = el.__root.state.appKey && el.__root.state.appKey.split('.')[0]
-              }
-            }
-          })
-
-          activateConfig(0)
-          return newDom
-        }
-
-        return {
-          extend: {
-            extend: isString(s.component) ? document.eval(s.component) : s.component
-          },
-          props: { inheritSpacingRatio: true }
-        }
-      },
-
+    Iframe: {
+      props: (el, s) => ({
+        id: 'component',
+        src: `/scene/${s.key}`,
+        border: '0',
+        background: 'transparent',
+        position: 'absolute',
+        boxSize: '100% 100%',
+        inset: '0 0 0 0'
+      }),
       on: {
         initUpdate: (el, s) => {
-          if (s.live) {
-            activateConfig('client')
-            updateReset({ emotion: emCache['client'] })
-          } else {
-            el.comp.setProps({
-              base: s.base,
-              fontSize: s.base + 'px',
-              spacingRatio: s.ratio,
-              direction: s.direction
-            }, { preventUpdate: true })
-            updateReset()
-          }
-          activateConfig(0)
+          return false
         }
       }
     }
   },
 
   on: {
-    update: (el, s) => {
+    stateUpdated: (el, s) => {
       el.__root.node.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }

package/src/pages/Export/state.js

@@ -9,7 +9,9 @@ export default {
   theme: '',
   zoomLevel: 1,
   currentFontSizeIndex: 3,
+}
 
+export const toolsState = {
   base: TYPOGRAPHY.base,
   ratio: SPACING.ratio,
   range: [-1, +4],

package/src/pages/Export/tools.js

@@ -5,8 +5,10 @@ import {
   SequenceSliders,
   ClickableItem,
   SquareButton,
-  ThemeSwitcher
+  ThemeSwitcher // eslint-disable-line no-unused-vars
 } from '@symbo.ls/components'
+import { Link } from '@symbo.ls/components/src/Link'
+import { toolsState } from './state'
 
 export default {
   props: {
@@ -18,6 +20,54 @@ export default {
     extend: Flex,
     props: { gap: 'B1' },
     // theme: { extend: ThemeSwitcher },
+    state: toolsState,
+
+    on: {
+      stateUpdated: (el, s, changes) => {
+        // window.componentRoot.context.system = s.__projectSystem
+        window.componentState.update(changes)
+      }
+    },
+
+    editors: {
+      extend: Flex,
+      props: { gap: 'Z2' },
+
+      childExtend: {
+        extend: [ClickableItem, SquareButton],
+        props: {}
+      },
+
+      add: {
+        props: {
+          icon: 'plus'
+        }
+      },
+      remix: {
+        props: {
+          icon: 'magicstar outline'
+        },
+        on: {
+          click: (ev, el, s) => {
+            window.componentState.update({
+              system: s.__projectSystem
+            })
+          }
+        }
+      },
+      editor: {
+        extend: Link,
+        props: {
+          icon: 'edit',
+          href: '/editor/' + window.location.pathname.split('component/')[1]
+        }
+      }
+    },
+
+    VerticalLine: {
+      margin: 'auto 0',
+      height: 'A2'
+    },
 
     sliders: {
       extend: SequenceSliders,
@@ -31,13 +81,11 @@ export default {
 
     direction: {
       extend: [ClickableItem, SquareButton],
-      props: {
-        icon: 'languageDirection'
-      },
+      props: { icon: 'languageDirection' },
       on: {
         click: (ev, el, s) => {
-          s.update({
-            direction: s.direction === 'rtl' ? 'ltr' : 'rtl'
+          window.componentState.update({
+            direction: window.componentState.direction === 'rtl' ? 'ltr' : 'rtl'
           })
         }
       }

package/src/pages/Icons/index.js

@@ -8,7 +8,7 @@ import * as LOGOS from '@symbo.ls/icons/src/logos'
 import * as SIGNS from '@symbo.ls/icons/src/signs'
 import * as STYLE from '@symbo.ls/icons/src/style'
 import * as KEYBOARD from '@symbo.ls/icons/src/keyboard'
-import * as SVG from '@symbo.ls/icons/src/svg'
+import * as SVG from '@symbo.ls/icons/src/miscellaneous'
 import * as TECH from '@symbo.ls/icons/src/tech'
 import * as TEXT from '@symbo.ls/icons/src/text'