@symbo.ls/preview 0.0.25 → 0.0.26

package/.symbols/index.js

@@ -15,6 +15,8 @@ import field from './field'
 import tooltip from './tooltip'
 import pills from './pills'
 
+import * as smbls from '@symbo.ls/components/src/Fields'
+
 export const LIBRARY = [
   circleButton,
   buttonDownload,
@@ -31,3 +33,15 @@ export const LIBRARY = [
   tooltip,
   pills
 ]
+
+export const COMPONENTS = Object.keys(smbls).map(key => {
+  const component = smbls[key]
+  return {
+    key,
+    component: { extend: component },
+    code: JSON.stringify(component, null, 2),
+    settings: {
+      gridOptions: { colspan: 3, rowspan: 2 }
+    }
+  }
+})

package/package.json

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

package/src/index.js

@@ -19,7 +19,8 @@ smbls.init({ verbose: false, ...SYMBOLS_CONF })
 
 DOM.define({
   __filepath: param => param,
-  $setCollection: smbls.Collection.define.$setCollection
+  $setCollection: smbls.Collection.define.$setCollection,
+  $setStateCollection: smbls.Collection.define.$setStateCollection
 })
 
 // export default DOM.create(App, DevFocus, 'app', { TODO: try this

package/src/pages/Color/globalThemes.js

@@ -17,7 +17,7 @@ export default {
 
     childExtend: [GlobalThemeTemplate, Link],
 
-    $setCollection: () => [{
+    $setStateCollection: () => [{
       title: 'Light',
       key: 'light',
       icon: 'sun'

package/src/pages/Color/palette.js

@@ -36,7 +36,7 @@ export default {
       },
 
       childExtend: ColorTemplate,
-      $setCollection: mapColors
+      $setStateCollection: mapColors
     }
   }
 }

package/src/pages/Color/themes.js

@@ -31,6 +31,6 @@ export default {
     },
 
     childExtend: ThemeTemplate,
-    $setCollection: (el, s) => mapThemes(el, s)
+    $setStateCollection: (el, s) => mapThemes(el, s)
   }
 }

package/src/pages/Components/grid.js

@@ -5,7 +5,7 @@ import {
   Grid,
   SectionHeader
 } from '@symbo.ls/components'
-import { LIBRARY } from '../../../.symbols'
+import { COMPONENTS } from '../../../.symbols'
 import { gridStyle, rowStyle } from './style'
 
 export default {
@@ -86,7 +86,7 @@ export default {
     }),
 
     childExtend: ComponentTemplate,
-    $setCollection: ({ state }) => LIBRARY.filter(v => {
+    $setStateCollection: ({ state }) => COMPONENTS.filter(v => {
       if (!state.category) return true
       return state.category === v.category.key
     })

package/src/pages/Export/const.js

@@ -1,10 +1,11 @@
 'use strict'
 
 import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/scratch'
-import { LIBRARY } from '../../../.symbols'
+import { LIBRARY, COMPONENTS } from '../../../.symbols'
 
 const COMPONENT_ROUTES = {}
 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/description.js

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

package/src/pages/Export/index.js

@@ -12,10 +12,13 @@ import description from './description'
 
 import { COMPONENT_ROUTES } from './const'
 
-const componentState = (context) => context.LIBRARY.filter(v => {
-  const key = window.location.pathname.split('component/')[1]
-  return v.key === key
-})
+const componentState = (context) => {
+  const arr = [...context.LIBRARY, ...context.COMPONENTS]
+  return arr.filter(v => {
+    const key = window.location.pathname.split('component/')[1]
+    return v.key === key
+  })
+}
 
 export const Export = {
   key: 'export',

package/src/pages/Fonts/index.js

@@ -47,7 +47,7 @@ const FontFaces = {
       margin: '0 -Z'
     },
     childExtend: [FontObject, Hoverable],
-    $setCollection: mapFonts
+    $setStateCollection: mapFonts
   }
 }
 
@@ -89,7 +89,7 @@ const FontFamilies = {
     },
 
     childExtend: [FontFamilyObject, Hoverable],
-    $setCollection: mapFontFamilies
+    $setStateCollection: mapFontFamilies
   }
 }
 

package/src/pages/Icons/index.js

@@ -56,7 +56,7 @@ const IconsGroup = {
     }),
 
     childExtend: IconItem,
-    $setCollection: ({ state }) => state.list
+    $setStateCollection: ({ state }) => state.list
   }
 }
 
@@ -110,5 +110,5 @@ export const Icons = {
   },
 
   childExtend: IconsGroup,
-  $setCollection: () => ICON_GROUPS
+  $setStateCollection: () => ICON_GROUPS
 }

package/src/pages/Library/index.js

@@ -27,6 +27,6 @@ export const Library = {
     },
 
     childExtend: ComponentTemplate,
-    $setCollection: () => LIBRARY
+    $setStateCollection: () => LIBRARY
   }
 }

package/src/pages/Spaces/Table.js

@@ -205,6 +205,6 @@ export const Table = {
 
   cnt: {
     childExtend: Row,
-    $setCollection: (el) => mapSequence(el.state, sortSequence)
+    $setStateCollection: (el) => mapSequence(el.state, sortSequence)
   }
 }

package/src/pages/Typography/documentStyles.js

@@ -1,14 +1,14 @@
 'use strict'
 
+import { findHeadingLetter, getFontFamily } from '@symbo.ls/scratch'
 import {
   DocumentStylesSequence,
   Flex,
   SectionHeader,
   SelectField,
   SequenceSliders,
-  TestText
+  DeviceButtonSet
 } from '@symbo.ls/components'
-// import { mapSequence, sortSequence } from '@symbo.ls/utils'
 import stylesHelpers from './stylesHelpers'
 
 export default {
@@ -36,28 +36,116 @@ export default {
     header: {
       extend: Flex,
       SequenceSliders,
-      TestText
+      DeviceButtonSet
     },
 
-    sequence: {
+    headings: {
       extend: DocumentStylesSequence,
-      $setCollection: (el) => {
+      $setStateCollection: (el) => {
         const { state, context } = el // eslint-disable-line no-unused-vars
-        const { TYPOGRAPHY } = context.SYSTEM
+        const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM
         const { styles } = TYPOGRAPHY
-        console.log(styles)
-        // state.sequence = {}
-        return styles
+        el.removeContent()
+
+        const family = FONT_FAMILY[FONT_FAMILY.default]
+        const familyValue = getFontFamily()
+        const lineHeight = TYPOGRAPHY.lineHeight
+        const font = family.arr[0]
+
+        const HEADINGS = new Array(6).fill(null).map((_, i) => 'h' + (i + 1))
+
+        return HEADINGS.map((v, k) => ({
+          key: v,
+          value: {
+            font,
+            fontFamily: familyValue,
+            fontWeight: 900 - (k * 100),
+            lineHeight,
+            ...styles[v]
+          },
+          labels: [
+            { icon: 'fontFace', text: font },
+            { icon: 'fontVariable', text: 900 - (k * 100) },
+            { icon: 'textLineHeight', text: lineHeight }
+          ],
+          sequenceValue: state.sequence[
+            findHeadingLetter(state.h1Matches, k)
+          ]
+        }))
       }
     },
 
-    footer: { }
+    doc: {
+      extend: DocumentStylesSequence,
+      $setStateCollection: (el) => {
+        const { state, context } = el // eslint-disable-line no-unused-vars
+        const { DOCUMENT, FONT_FAMILY } = context.SYSTEM
+        el.removeContent()
+
+        const family = FONT_FAMILY[FONT_FAMILY.default]
+        const familyValue = getFontFamily()
+        const font = family.arr[0]
+        const { fontWeight, lineHeight } = DOCUMENT
+
+        return [{
+          key: 'body',
+          value: {
+            font,
+            fontFamily: familyValue,
+            fontWeight: fontWeight || 400,
+            lineHeight
+          },
+          labels: [
+            { icon: 'fontFace', text: font },
+            { icon: 'fontVariable', text: fontWeight || 400 },
+            { icon: 'textLineHeight', text: lineHeight }
+          ],
+          sequenceValue: state.sequence['A']
+        }]
+      }
+    },
+
+    helpers: {
+      $setStateCollection: (el) => {
+        const { state, context } = el // eslint-disable-line no-unused-vars
+        const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM
+        const { styles } = TYPOGRAPHY
+        el.removeContent()
+
+        const family = FONT_FAMILY[FONT_FAMILY.default]
+        const familyValue = getFontFamily()
+        const lineHeight = TYPOGRAPHY.lineHeight
+        const font = family.arr[0]
+
+        return Object.keys(styles).filter(v => v.slice(0, 1) === '.').map((v, k) => ({
+          key: v,
+          value: {
+            font,
+            fontFamily: familyValue,
+            fontWeight: 900 - (k * 100),
+            lineHeight,
+            ...styles[v]
+          },
+          labels: [
+            { icon: 'fontFace', text: font },
+            { icon: 'fontVariable', text: 900 - (k * 100) },
+            { icon: 'textLineHeight', text: lineHeight }
+          ],
+          sequenceValue: state.sequence[
+            findHeadingLetter(state.h1Matches, k)
+          ]
+        }))
+      }
+    },
+
+    footer: {}
   },
 
   fields: {
     extend: Flex,
     props: {
       gap: 'A',
+      margin: '0 0 0 E2+B',
       align: 'center flex-start'
     },
 
@@ -129,5 +217,19 @@ export default {
 
   Line: {},
 
-  stylesHelpers
+  stylesHelpers,
+
+  on: {
+    init: (el, s) => {
+      if (!el.context.SYSTEM) return
+      const { context } = el // eslint-disable-line no-unused-vars
+      const { TYPOGRAPHY } = context.SYSTEM
+      const { styles } = TYPOGRAPHY
+      if (styles) {
+        s.update({
+          styles
+        }, { preventUpdate: true })
+      }
+    }
+  }
 }

package/src/pages/Typography/index.js

@@ -2,8 +2,8 @@
 
 import state from './state'
 
+import typeScale from './typeScale' // eslint-disable-line no-unused-vars
 import documentStyles from './documentStyles'
-import typeScale from './typeScale'
 
 export const Typography = {
   state,
@@ -13,7 +13,7 @@ export const Typography = {
     p: 'A general configuration of type properties on the document.'
   },
 
-  // typeScale,
+  typeScale,
   Line: {},
   documentStyles
 }

package/src/pages/Typography/stylesHelpers.js

@@ -25,7 +25,7 @@ export default {
 
     childProto: TypeHelperObject,
 
-    $setCollection: () => [{
+    $setStateCollection: () => [{
       p: {
         text: 'Headline',
         style: { fontSize: `${48 / 16}em` }

package/src/pages/Typography/typeScale.js

@@ -70,9 +70,10 @@ export default {
 
     sequence: {
       extend: TypeScaleSequence,
-      $setCollection: (el) => {
+      $setStateCollection: (el) => {
         const { state } = el
         state.sequence = {}
+        el.removeContent()
         return mapSequence(state, sortSequence)
       }
     },

package/src/state.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import SYSTEM from './config'
-import { LIBRARY } from '../.symbols'
+import { LIBRARY, COMPONENTS } from '../.symbols'
 
 export const state = {
   globalTheme: 'dark'
@@ -9,5 +9,6 @@ export const state = {
 
 export const context = {
   LIBRARY,
-  SYSTEM
+  SYSTEM,
+  COMPONENTS
 }