@symbo.ls/preview 0.0.80 → 0.0.81

package/package.json

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

package/src/components/Aside.js

@@ -32,7 +32,7 @@ export const NavbarButton = {
     transform: 'translate3d(5%, -50%, 0)',
     opacity: '0',
     visibility: 'hidden',
-    transition: 'B default-bezier',
+    transition: 'B defaultBezier',
     transitionProperty: 'opacity, transform',
     textAlign: 'start',
     zIndex: 9999,

package/src/components/Banner.js

@@ -35,7 +35,7 @@ export const TutorialBanner = {
     },
 
     ':before': {
-      transition: 'B default-bezier',
+      transition: 'B defaultBezier',
       transitionProperty: 'opacity',
       backgroundImage: `url(${state.background})`,
       backgroundSize: 'cover',
@@ -43,7 +43,7 @@ export const TutorialBanner = {
     },
 
     ':after': {
-      transition: 'B default-bezier',
+      transition: 'B defaultBezier',
       transitionProperty: 'opacity',
       background: 'shadow-overlay',
       opacity: '0.9'

package/src/components/Page.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { PageTemplate, Overlay, Flex } from '@symbo.ls/components'
+import { PageTemplate, Overlay, Flex, IconButton } from '@symbo.ls/components'
+import { Link } from '@symbo.ls/components/src/Link'
 
 import MASK1 from '../assets/mask1.png'
 import MASK2 from '../assets/mask2.png' // eslint-disable-line
@@ -22,55 +23,107 @@ export const InitPage = {
     width: '100%',
     maxWidth: 'J',
     flow: 'column',
+    position: 'relative',
     align: 'flex-start',
 
     content: { width: '100%' }
+  },
+
+  back: {
+    extend: [Link, IconButton],
+    props: {
+      position: 'absolute',
+      fontSize: 'A1',
+      top: '0',
+      right: '102%',
+      icon: 'arrow angle left'
+    }
   }
 }
 
+const ifWeHaveComponents = (state) => {
+  const keys = Object.keys(state.__system.COMPONENTS)
+  return !!keys.length
+}
+
 export const DisabledPage = {
-  props: {
-    maxHeight: 'calc(100vh - 7em)',
-    overflow: 'hidden'
+  props: ({ state }) => ({
+    active: ifWeHaveComponents(state),
+    maxHeight: 'none',
+    overflow: 'visible',
+
+    '!active': {
+      maxHeight: 'calc(100vh - 7em)',
+      overflow: 'hidden'
+    },
+
+    '.active': {
+      maxHeight: 'none',
+      overflow: 'visible'
+    }
+  }),
+
+  on: {
+    initUpdate: (element, state) => {
+      element.setProps({ active: ifWeHaveComponents(state) }, { preventUpdate: true, ignoreInitUpdate: true })
+    }
   },
 
   disablingOverlay: {
     extend: [Overlay, Flex],
 
-    props: {
+    props: ({ state }) => ({
+      active: ifWeHaveComponents(state),
       overflow: 'hidden',
       background: 'shadow-overlay',
-      animation: 'fadeInUp',
-      animationDuration: 'G'
-    },
+      '.active': {
+        animation: 'fadeOutDown',
+        animationDuration: 'G',
+        transition: 'G defaultBezier',
+        transitionProperty: 'opacity, transform, visibility',
+        opacity: '0',
+        visibility: 'hidden',
+        transform: 'translate3d(0, 12.5%, 1px)',
+        pointerEvents: 'none'
+      },
+      '!active': {
+        animation: 'fadeInUp',
+        animationDuration: 'G'
+      }
+    }),
 
-    // Overlay: {
-    //   background: 'gradient-colorful',
-    //   inset: '0 0 0 0',
-    //   opacity: '.9',
-    //   style: {
-    //     WebkitMaskImage: 'url(' + MASK1 + ')',
-    //     WebkitMaskSize: '100% 100%'
-    //   }
-    // },
+    Overlay: {
+      background: 'gradient-colorful',
+      inset: '0 0 0 0',
+      opacity: '.9',
+      style: {
+        WebkitMaskImage: 'url(' + MASK1 + ')',
+        WebkitMaskSize: '100% 100%'
+      }
+    },
 
     message: {
-      props: {
+      props: ({ state }) => ({
         animation: 'fadeInUpShort',
         animationDuration: 'G',
         animationDelay: 'G',
         margin: 'auto auto 0',
         padding: 'C1 E C',
         width: '100%',
-        maxWidth: 'K-default'
-      },
+        maxWidth: 'K-default',
+        ArticleBig: {
+          p: {
+            text: 'Open up ' + state.appKey + ' in a new window to start working with components'
+          }
+        }
+      }),
 
       ArticleBig: {
         title: {
-          text: 'Custom library will come up soon'
+          text: 'Connect to your website'
         },
         p: {
-          text: 'Meanwhile, please check the components page',
+          color: 'white .8',
           margin: 'X 0 0',
           animation: 'fadeInUpShort',
           animationDuration: 'G',

package/src/components/ShapeSet.js

@@ -26,7 +26,7 @@ const ShapeItem = {
     },
 
     _shape: {
-      transition: 'A default-bezier',
+      transition: 'A defaultBezier',
       transitionProperty: 'background',
       width: 'C1',
       height: 'C1',

package/src/pages/Account/index.js

@@ -96,7 +96,7 @@ const sideBar = {
 
     info: { props: { icon: 'info' } },
     logout: {
-      props: { icon: 'logout', href: '/logout' },
+      props: { icon: 'logout', href: '/logout' }
     }
   }
 }
@@ -105,7 +105,7 @@ export const Account = {
   sideBar,
   on: {
     render: element => {
-      
+
     }
   }
 }

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

@@ -68,11 +68,11 @@ export default {
       QuickStartNumber: { text: '3' },
       Code: {
         note: { text: 'Create .symbolsrc.js file in your project and insert your Symbols key' },
-        props: {
+        props: ({ state }) => ({
           code: {
-            text: '{ "key": "key.symbo.ls" }'
+            text: `{ "key": "${state.appKey}" }`
           }
-        }
+        })
       }
     },
 

package/src/pages/Export/index.js

@@ -41,13 +41,14 @@ export const Export = {
       const componentKey = routes[1]
       const { COMPONENTS } = state.__system
 
-      const content = COMPONENT_ROUTES[`/${componentKey}`] || COMPONENTS[componentKey]
-      console.warn('===content')
-      console.warn(content)
-      console.warn(componentKey, COMPONENTS)
+      const libComponent = COMPONENT_ROUTES[`/${componentKey}`]
+      const liveComponent = COMPONENTS[componentKey]
+
+      const content = libComponent || liveComponent
 
       if (content) {
         state.update({
+          live: !!liveComponent,
           ...content
         }, { preventUpdate: true })
       }

package/src/pages/Export/scene.js

@@ -1,14 +1,24 @@
 'use strict'
 
-import { isString } from '@domql/utils'
-import { BREAKPOINTS } from '@symbo.ls/scratch'
-import { Scene } from '@symbo.ls/components'
+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 = {}
 
 export default {
   extend: Scene,
 
   props: (el, s) => {
+    const CONFIG = getActiveConfig()
+    const { BREAKPOINTS } = CONFIG
     const previewSize = BREAKPOINTS[s.previewSize]
     return {
       width: '100%',
@@ -40,27 +50,71 @@ export default {
         }
       },
 
-      comp: (el, s) => ({
-        extend: isString(s.component) ? document.eval(s.component) : s.component,
-        props: { inheritSpacingRatio: true }
-      }),
+      comp: (el, s) => {
+        if (s.live) {
+          const SYSTEM = s.__system
+          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 }
+          })
+
+          newDom.node.appendChild(styleNode)
+
+          init(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 }
+        }
+      },
 
       on: {
         initUpdate: (el, s) => {
-          el.comp.setProps({
-            base: s.base,
-            fontSize: s.base + 'px',
-            spacingRatio: s.ratio,
-            direction: s.direction
-          }, { preventUpdate: true })
-
-          // const componentNode = el.comp.node
-          // const SVG = elementToSVG(componentNode)
-          // const svgString = new window.XMLSerializer().serializeToString(SVG)
-          // console.log(SVG)
-          // console.log(svgString)
-
-          updateReset()
+          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)
         }
       }
     }

package/src/pages/Init/ChooseEnvironment.js

@@ -4,18 +4,7 @@ import { Flex, CommonField, WiderButton, ClickableItem } from '@symbo.ls/compone
 
 import { InitPage } from '../../components'
 
-const header = {
-  props: {
-    margin: '- - D -'
-  },
-
-  Caption: { text: 'And finally,' },
-  H1: {
-    text: 'Your environment'
-  }
-}
-
-const commonField = {
+const ButtonOptions = {
   tag: 'section',
   extend: CommonField,
 
@@ -49,16 +38,17 @@ const commonField = {
 }
 
 const yourEnvironment = {
-  extend: commonField,
+  extend: ButtonOptions,
   props: {
     margin: '- - C2 -',
     title: { text: 'Your environment' }
   },
 
   title: {},
-  element: [
-    { props: { icon: 'inputOutline' } },
-    { props: { icon: 'accessibilityOutline' } },
+  element: { ...[
+    { props: { icon: 'js outline' } },
+    { props: { icon: 'ts outline' } },
+    { props: { icon: 'pdf' } },
     {
       props: {
         boxSizing: 'content-box',
@@ -70,24 +60,38 @@ const yourEnvironment = {
       },
       icon: null
     }
-  ]
+  ] }
 }
 
 const yourFramework = {
-  extend: commonField,
+  extend: ButtonOptions,
   props: {
     margin: '- - F -',
-    title: { text: 'Your framework' },
-    element: { childProps: { icon: 'info' } }
+    title: { text: 'Your framework' }
   },
   title: {},
-  element: { ...[{}, {}, {}, {}, {}, {}] }
+  element: { ...[
+    { props: { icon: 'html' } },
+    { props: { icon: 'domql' } },
+    { props: { icon: 'react' } },
+    { props: { icon: 'vue' } },
+    { props: { icon: 'angular' } },
+    { props: { icon: 'svelte' } },
+    { props: { icon: 'webComponents' } }
+  ] }
 }
 
 export const ChooseEnvironment = {
   extend: InitPage,
 
-  HeaderHeading: header,
+  back: { props: { href: '/init/font' } },
+
+  HeaderHeading: {
+    margin: '- - D -',
+
+    Caption: { text: 'And finally,' },
+    H1: { text: 'Your environment' }
+  },
 
   yourEnvironment,
   yourFramework,

package/src/pages/Init/CreateDocumentTheme.js

@@ -70,7 +70,7 @@ const modes = {
       right: 'W',
       bottom: 'W',
       opacity: '0',
-      transition: 'B default-bezier',
+      transition: 'B defaultBezier',
       transitionProperty: 'transform, opacity',
       transform: 'translate3d(0, 100%, 0)',
       columnGap: 'W'
@@ -113,6 +113,7 @@ export const CreateDocumentTheme = {
   props: {
     flow: 'column',
     align: 'flex-start',
+
     paragraphs: {
       gap: 'E',
       margin: '- - D1 -',
@@ -123,6 +124,8 @@ export const CreateDocumentTheme = {
     }
   },
 
+  back: { props: { href: '/init/font' } },
+
   HeaderHeading: {},
   paragraphs,
   modes,

package/src/pages/Init/CreatePalette.js

@@ -56,6 +56,8 @@ const content = {
 export const CreatePallete = {
   extend: InitPage,
 
+  back: { props: { href: '/init/theme' } },
+
   HeaderHeading: {
     margin: '- - D -',
     Caption: { text: `Let's get started` },

package/src/pages/Init/FontText.js

@@ -5,6 +5,8 @@ import { InitPage } from '../../components'
 export const FontText = {
   extend: InitPage,
 
+  back: { props: { href: '/init/pallete' } },
+
   HeaderHeading: {
     props: { margin: '- - D2 -' },
     Caption: { text: `Let's make sure` },

package/src/pages/Library/index.js

@@ -1,12 +1,10 @@
 'use strict'
 
 import { ComponentTemplate } from '@symbo.ls/components'
-import { Page } from '../../components'
-
-import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
+import { DisabledPage, Page } from '../../components'
 
 export const Library = {
-  extend: [Page],
+  extend: [DisabledPage, Page],
 
   SectionHeader: {
     title: 'My Symbols',
@@ -29,7 +27,7 @@ export const Library = {
     childExtend: ComponentTemplate,
     $setStateCollection: ({ state }) => {
       const { COMPONENTS } = state.__system
-      return COMPONENTS
+      return Object.values(COMPONENTS)
     }
   }
 }

package/src/pages/Theme/preview.js

@@ -31,7 +31,7 @@ export const Tones = {
     text: null,
     props: ({ key, state }) => ({
       round: '0',
-      transition: 'B default-bezier',
+      transition: 'B defaultBezier',
       transitionProperty: 'color, background',
       background: getThemeProperty('background', state.value, state.sceneTheme),
       opacity: '' + (100 / TONES_AMOUNT * parseInt(key)) / 100

package/src/sync.js

@@ -35,7 +35,7 @@ export const Sync = {
     stateUpdated: (el, s, changes) => {
       if (s.appKey && changes.SYSTEM) {
         const { SYSTEM } = changes
-        send('liveChange', SYSTEM)
+        send('change', SYSTEM)
 
         // if (SYSTEM.COLOR && SYSTEM.THEME) {
         //   init({