@symbo.ls/preview 2.6.6 → 2.6.8

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "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

@@ -1,8 +1,6 @@
 'use strict'
 
-import './config'
 import style from './style'
-
 import { Flex } from '@symbo.ls/components'
 
 import {
@@ -30,7 +28,7 @@ Object.keys(DesignSystem.routes).map(route => {
 
 const App = {
   extend: Flex,
-  
+
   props: style,
 
   routes: {

package/src/components/Page.js

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

package/src/components/UploadImage.js

@@ -25,36 +25,7 @@ export const UploadImage = {
     p: { span: null },
     input: {
       on: {
-        change: async (ev, el, s) => {
-          const { context } = el
-          const { client } = context
-          s.update({ icon: { pending: true } })
-
-          try {
-            let id
-            await client.file(ev.target.files[0]).then(async d => { id = d.id })
-
-            await client.observe({
-              $id: id,
-              $all: true
-            }, async (data) => {
-              console.log(data)
-              s.update({ icon: { pending: false, ...data } })
-
-              // await client.set({
-              //   $id: s.projectId,
-              //   icon: data
-              // }, d => console.log('d', d))
-
-              await client.set({
-                $id: s.projectId,
-                icon: data.id
-              }, d => console.log('d2', d))
-            })
-          } catch (e) {
-            console.log(e)
-          }
-        }
+        change: async (ev, el, s) => {}
       }
     }
   }

package/src/pages/Color/palette.js

@@ -3,8 +3,8 @@
 import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
-  if (!s.__client_system) return
-  const { COLOR } = s.__client_system
+  if (!s.__projectSystem) return
+  const { COLOR } = s.__projectSystem
   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.__client_system) return
-  const { THEME } = s.__client_system
+  if (!s.__projectSystem) return
+  const { THEME } = s.__projectSystem
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }

package/src/pages/Components/grid.js

@@ -24,7 +24,7 @@ export default {
         p: {
           opacity: '0',
           text: 'All Categories'
-        },
+        }
       }
     },
 

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

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

package/src/pages/Export/scene.js

@@ -52,7 +52,7 @@ export default {
 
       comp: (el, s) => {
         if (s.live) {
-          const CLIENT_SYSTEM = s.__client_system
+          const PROJECT_SYSTEM = s.__projectSystem
           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: CLIENT_SYSTEM }
+            context: { system: PROJECT_SYSTEM }
           })
 
           newDom.node.appendChild(styleNode)
 
-          init(CLIENT_SYSTEM, null, { emotion, initDOMQLDefine: false, newConfig: 'client' })
+          init(PROJECT_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.__client_system) return
-  const { FONT } = s.__client_system
+  if (!s.__projectSystem) return
+  const { FONT } = s.__projectSystem
   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.__client_system) return
-  const { FONT_FAMILY } = s.__client_system
+  if (!s.__projectSystem) return
+  const { FONT_FAMILY } = s.__projectSystem
   const fontFamilyKeys = Object.keys(FONT_FAMILY)
 
   return fontFamilyKeys.map(v => {

package/src/pages/Init/ChooseEnvironment.js

@@ -1,14 +1,21 @@
 'use strict'
 
-import { Flex, CommonField, WiderButton, ClickableItem } from '@symbo.ls/components'
-
 import { InitPage } from '../../components'
+import {
+  Flex,
+  CommonField,
+  WiderButton,
+  ClickableItem,
+  TooltipParent
+} from '@symbo.ls/components'
+import { setCookie } from 'domql/packages/cookie'
 
 const ButtonOptions = {
   tag: 'section',
   extend: CommonField,
 
   props: {
+    margin: '- - C2 -',
     gap: 'Z2',
     element: {
       gap: 'A',
@@ -27,30 +34,68 @@ const ButtonOptions = {
   element: {
     extend: Flex,
     childExtend: {
-      extend: [WiderButton, ClickableItem],
+      extend: [ClickableItem, WiderButton, TooltipParent],
+      props: ({ key, state, parent }) => ({
+        active: state[parent.parent.key] === key,
+
+        style: {
+          '&:hover, &:focus-visible': {
+            zIndex: 1000,
+            '& [tooltip]': {
+              transform: 'translate3d(-50%,0,0)',
+              opacity: 1,
+              visibility: 'visible'
+            }
+          }
+        }
+      }),
+
+      Tooltip: {
+        props: {
+          background: 'gray2 .95',
+          position: 'absolute',
+          pointerEvents: 'none',
+          top: '115%',
+          left: '50%',
+          shape: 'tooltip',
+          shapeDirection: 'top',
+          fontSize: 'Z1',
+          padding: 'Y Z1',
+          transform: 'translate3d(-50%, 10%, 0)',
+          transition: 'C defaultBezier, C defaultBezier, B defaultBezier',
+          transitionProperty: 'opacity, visibility, transform',
+          textAlign: 'center',
+          opacity: '0',
+          visibility: 'hidden',
+          zIndex: 9,
+          lineHeight: 1
+        },
+        title: ({ parent }) => parent.key,
+        p: null
+      },
+
       on: {
         click: (ev, el, s) => {
-          s.parent.update({ })
+          const key = el.parent.parent.key
+          const value = el.key
+          setCookie(key, value, 3)
+          s.update({ [key]: value })
         }
       }
     }
   }
 }
 
-const yourEnvironment = {
+const language = {
   extend: ButtonOptions,
-  props: {
-    margin: '- - C2 -',
-    title: { text: 'Your environment' }
-  },
+  title: { text: 'Your environment' },
 
-  title: {},
-  element: { ...[
-    { props: { icon: 'html' } },
-    { props: { icon: 'js outline' } },
-    { props: { icon: 'ts outline' } },
-    { props: { icon: 'pdf' } },
-    {
+  element: {
+    HTML: { props: { icon: 'html' } },
+    JavaScript: { props: { icon: 'js outline' } },
+    TypeScript: { props: { icon: 'ts outline' } },
+    PDF: { props: { icon: 'pdf' } },
+    none: {
       props: {
         boxSizing: 'content-box',
         padding: 'Z B',
@@ -61,24 +106,21 @@ const yourEnvironment = {
       },
       icon: null
     }
-  ] }
+  }
 }
 
-const yourFramework = {
+const framework = {
   extend: ButtonOptions,
-  props: {
-    margin: '- - F -',
-    title: { text: 'Your framework' }
-  },
-  title: {},
-  element: { ...[
-    { props: { icon: 'domql' } },
-    { props: { icon: 'react' } },
-    { props: { icon: 'vue' } },
-    { props: { icon: 'angular' } },
-    { props: { icon: 'svelte' } },
-    { props: { icon: 'webComponents' } }
-  ] }
+  title: { text: 'Your framework' },
+
+  element: {
+    DOMQL: { props: { icon: 'domql' } },
+    React: { props: { icon: 'react' } },
+    Vue: { props: { icon: 'vue' } },
+    Angular: { props: { icon: 'angular' } },
+    Svelte: { props: { icon: 'svelte' } },
+    WebComponents: { props: { icon: 'webComponents' } }
+  }
 }
 
 export const ChooseEnvironment = {
@@ -93,8 +135,8 @@ export const ChooseEnvironment = {
     H1: { text: 'Your environment' }
   },
 
-  yourEnvironment,
-  yourFramework,
+  language,
+  framework,
 
   ContinueButton: {
     text: 'Create Symbols',

package/src/pages/Init/CreateDocumentTheme.js

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

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

@@ -1,5 +1,6 @@
 'use strict'
 
+import { set } from '@symbo.ls/based'
 import { User } from '@symbo.ls/components'
 import { UploadImage } from '../../../components'
 
@@ -37,6 +38,26 @@ export default {
         opacity: (state.icon && state.icon.src) ? '1' : '0',
         pointerEvents: 'none'
       })
+    },
+
+    input: {
+      on: {
+        change: async (ev, el, s) => {
+          s.update({ icon: { pending: true } })
+
+          try {
+            set({
+              $id: s.projectId,
+              icon: ev.target.files[0]
+            }, d => {
+              console.log('udpateIcon', d)
+              s.update({ icon: { pending: false } })
+            })
+          } catch (e) {
+            console.log(e)
+          }
+        }
+      }
     }
   }
 }

package/src/pages/Spaces/index.js

@@ -1,7 +1,8 @@
 'use strict'
 
+import { mapSequence, sortSequence } from '@symbo.ls/components'
 import sequence from './sequence'
-import { state } from './state'
+import state from './state'
 
 export const Spaces = {
   state,
@@ -19,16 +20,10 @@ export const Spaces = {
   sequence,
 
   on: {
-    init: (el, s) => {
-      if (!s.__client_system.SPACING) {
-        s.systemUpdate({
-          SPACING: { base: s.base, ratio: s.ratio }
-        }, { preventUpdate: true })
-      }
-    },
+    init: (el, s) => {},
     stateUpdated: (el, s, changes) => {
       s.systemUpdate({
-        SPACING: { base: s.base, ratio: s.ratio }
+        SPACING: changes
       }, {
         preventUpdate: true
       })

package/src/pages/Spaces/state.js

@@ -2,15 +2,20 @@
 
 import { SPACING } from '@symbo.ls/scratch'
 
-export const state = {
-  base: SPACING.base,
-  ratio: SPACING.ratio,
-  subSequence: true,
-  range: [-5, +12],
-  scales: {},
-  sequence: {},
-  vars: {},
-  type: 'spacing-scale',
+export default ({ parent }) => {
+  const rootState = parent.state
+  const spacing = rootState.__projectSystem.SPACING || {}
+  console.log(spacing)
 
-  props: {}
+  return {
+    base: spacing.base || SPACING.base,
+    ratio: spacing.ratio || SPACING.ratio,
+    subSequence: spacing.subSequence || SPACING.subSequence || true,
+    range: spacing.range || SPACING.range || [-5, +12],
+    scales: {},
+    sequence: {},
+    vars: {},
+    type: 'spacing-scale',
+    props: {}
+  }
 }

package/src/pages/State/index.js

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

package/src/pages/Theme/index.js

@@ -145,11 +145,11 @@ export const Theme = {
 
   on: {
     init: (el, s) => {
-      if (!s.__client_system) return
+      if (!s.__projectSystem) return
       const path = window.location.pathname
       const pathArray = path.split('theme/')
-      if (!s.__client_system) return
-      const { THEME } = s.__client_system
+      if (!s.__projectSystem) return
+      const { THEME } = s.__projectSystem
       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 { __client_system } = s
-  const { TYPOGRAPHY } = __client_system
+  const { __projectSystem } = s
+  const { TYPOGRAPHY } = __projectSystem
   const { styles } = TYPOGRAPHY
   return arr.map((v, k) => {
-    const result = getTypeStyle(v, __client_system)
+    const result = getTypeStyle(v, __projectSystem)
     return {
       key: v,
       value: {
@@ -82,8 +82,8 @@ export const headingsCollection = (el, s) => {
 }
 
 export const tagsCollection = (el, s) => {
-  const { __client_system } = s
-  const { TYPOGRAPHY } = __client_system
+  const { __projectSystem } = s
+  const { TYPOGRAPHY } = __projectSystem
   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 { __client_system } = s
-  const { TYPOGRAPHY } = __client_system
+  const { __projectSystem } = s
+  const { TYPOGRAPHY } = __projectSystem
   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.__client_system) return
-      const { __client_system } = s
-      const { TYPOGRAPHY } = __client_system
+      if (!s.__projectSystem) return
+      const { __projectSystem } = s
+      const { TYPOGRAPHY } = __projectSystem
       const { styles } = TYPOGRAPHY
       if (styles) {
         s.update({ styles }, { preventUpdate: true })

package/src/pages/Typography/index.js

@@ -30,15 +30,14 @@ export const Typography = {
 
   on: {
     init: (el, s) => {
-      if (!s.__client_system.TYPOGRAPHY) {
-        s.systemUpdate({
-          TYPOGRAPHY: { base: s.base, ratio: s.ratio }
-        })
-      }
       mapSequence(s, sortSequence)
     },
     stateUpdated: (el, s, changes) => {
-      s.systemUpdate({ TYPOGRAPHY: changes })
+      s.systemUpdate({
+        TYPOGRAPHY: changes
+      }, {
+        preventUpdate: true
+      })
     }
   }
 }

package/src/pages/Typography/state.js

@@ -1,16 +1,18 @@
 'use strict'
 
-export default ({ parent }) => ({
-  base: 16,
-  ratio: 1.125,
-  range: [-3, +8],
-  h1Matches: +6,
-  scales: {},
-  sequence: {},
-  vars: {},
-  // subSequence: true,
-  type: 'demo-font-size',
-
-  sampleText: 'Today is a big day for our tribe. The year ends.',
-  activeTab: ''
-})
+export default ({ parent }) => {
+  const rootState = parent.state
+  const typography = rootState.__projectSystem.TYPOGRAPHY || {}
+  return {
+    base: typography.base || 16,
+    ratio: typography.ratio || 1.125,
+    range: typography.range || [-3, +8],
+    subsequence: typography.subsequence || true,
+    h1Matches: +6,
+    scales: {},
+    sequence: {},
+    vars: {},
+    type: 'demo-font-size',
+    sampleText: 'Today is a big day for our tribe. The year ends.'
+  }
+}

package/src/config/color.js

@@ -1,8 +0,0 @@
-'use strict'
-
-export const EDITOR_COLORS = {
-  modalBackground: '#141414',
-  modalFade: '#0E0E0E',
-  shapeColor: '#343434',
-  darkPurple: '#1c172a'
-}

package/src/config/index.js

@@ -1,19 +0,0 @@
-'use strict'
-
-import { init } from '@symbo.ls/components'
-
-import { EDITOR_COLORS } from './color'
-import { COMPONENT_THEMES, EDITOR_THEMES } from './theme'
-
-const PREVIEW_CONF = {
-  color: {
-    blue2: '#4676EC',
-    ...EDITOR_COLORS
-  },
-  theme: {
-    ...EDITOR_THEMES,
-    ...COMPONENT_THEMES
-  }
-}
-
-export default init(PREVIEW_CONF)

package/src/config/theme.js

@@ -1,15 +0,0 @@
-'use strict'
-
-export const EDITOR_THEMES = {
-  shape: {
-    background: 'shapeColor',
-    border: 'none'
-  }
-}
-
-export const COMPONENT_THEMES = {
-  label: {
-    background: 'brown',
-    color: 'white'
-  }
-}