@symbo.ls/preview 0.0.24 → 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.24",
+  "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/Account/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectToolWithCaption, Grid, CheckButton } from '@symbo.ls/components'
+import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCaption, Grid, CheckButton } from '@symbo.ls/components'
 // import { account } from '../SignUp'
 
 import setUpProject from './setUpProject'
@@ -128,7 +128,7 @@ const fillFields = {
     rowGap: 'C2'
   },
   childExtend: {
-    extend: SelectToolWithCaption,
+    extend: SelectFieldWithCaption,
     style: {
       '> input': { width: '270x', minWidth: '270px', height: '42px' }
     },

package/src/pages/Account/setUpProject.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Text, Block, Img, SquareButton, SelectTool } from '@symbo.ls/components'
+import { Text, Block, Img, SquareButton, SelectField } from '@symbo.ls/components'
 import { SetUp } from '..'
 
 export default {
@@ -126,7 +126,7 @@ export default {
           {
             caption: { props: { text: 'UI Framework' } },
             element: {
-              extend: SelectTool,
+              extend: SelectField,
               title: {
                 props: { text: 'React' },
                 style: { color: 'white' }

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/ColorEditor/friendTheme.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { CommonField, SelectTool } from '@symbo.ls/components'
+import { CommonField, SelectField } from '@symbo.ls/components'
 
 export const friendTheme = {
   extend: CommonField,
@@ -11,7 +11,7 @@ export const friendTheme = {
     style: { opacity: 1, fontWeight: 'normal', margin: 0 }
   },
   element: {
-    extend: SelectTool,
+    extend: SelectField,
     style: {
       background: 'transparent',
       paddingLeft: 0,

package/src/pages/ColorEditor/interactivity.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Block, Grid, Text, SelectTool, CommonField } from '@symbo.ls/components'
+import { Block, Grid, Text, SelectField, CommonField } from '@symbo.ls/components'
 
 export const interactivity = {
   h6: {
@@ -21,7 +21,7 @@ export const interactivity = {
       extend: CommonField,
       props: { padding: 0 },
       element: {
-        extend: SelectTool,
+        extend: SelectField,
         buttons: { ...[{ props: { icon: 'plus' } }] }
       }
     },

package/src/pages/ColorEditor/themingTools.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, ColorSwitcher, CommonField, SelectTool, ButtonSet, ClickableItem } from '@symbo.ls/components'
+import { Grid, ColorSwitcher, CommonField, SelectField, ButtonSet, ClickableItem } from '@symbo.ls/components'
 
 
 ColorSwitcher.props = (el, s) => {
@@ -72,7 +72,7 @@ export const themingTools = {
     props: { caption: 'Use as' },
     caption: {},
     element: {
-      extend: SelectTool,
+      extend: SelectField,
       title: { props: { text: 'Background color' } },
       buttons: { ...[{ props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }] }
     }

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/Spaces/__/preview.js

@@ -2,7 +2,7 @@
 
 import { stylePreview, styleScene } from './style'
 
-import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, SliderToolWithCaption, SelectToolWithCaption } from '@symbo.ls/components'
+import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, RangeFieldWithCaption, SelectFieldWithCaption } from '@symbo.ls/components'
 
 const buttonDownload = {
   extend: Button,
@@ -56,7 +56,7 @@ export default {
         // },
 
         {
-          extend: SelectToolWithCaption,
+          extend: SelectFieldWithCaption,
           style: { marginTop: `${26 / 16}em` },
           caption: { props: { text: 'Used for' } },
           element: {
@@ -76,7 +76,7 @@ export default {
       childExtend: CommonField,
       ...[
         {
-          extend: SliderToolWithCaption,
+          extend: RangeFieldWithCaption,
           caption: { text: 'Base size' },
           element: {
             button0: {},

package/src/pages/Theme/friendTheme.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { CommonField, SelectTool } from '@symbo.ls/components'
+import { CommonField, SelectField } from '@symbo.ls/components'
 
 export const friendTheme = {
   extend: CommonField,
@@ -11,7 +11,7 @@ export const friendTheme = {
     style: { opacity: 1, fontWeight: 'normal', margin: 0 }
   },
   element: {
-    extend: SelectTool,
+    extend: SelectField,
     style: {
       background: 'transparent',
       paddingLeft: 0,

package/src/pages/Theme/themingTools.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, ColorSwitcher, CommonField, SelectTool, ButtonSet, ClickableItem } from '@symbo.ls/components'
+import { Grid, ColorSwitcher, CommonField, SelectField, ButtonSet, ClickableItem } from '@symbo.ls/components'
 
 
 ColorSwitcher.props = (el, s) => {
@@ -72,7 +72,7 @@ export const themingTools = {
     props: { caption: 'Use as' },
     caption: {},
     element: {
-      extend: SelectTool,
+      extend: SelectField,
       title: { props: { text: 'Background color' } },
       buttons: { ...[{ props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }] }
     }

package/src/pages/Typography/documentStyles.js

@@ -1,6 +1,14 @@
 'use strict'
 
-import { Flex, SectionHeader, SelectField, IconButton } from '@symbo.ls/components'
+import { findHeadingLetter, getFontFamily } from '@symbo.ls/scratch'
+import {
+  DocumentStylesSequence,
+  Flex,
+  SectionHeader,
+  SelectField,
+  SequenceSliders,
+  DeviceButtonSet
+} from '@symbo.ls/components'
 import stylesHelpers from './stylesHelpers'
 
 export default {
@@ -12,15 +20,138 @@ export default {
     }
   },
 
+  styles: {
+    extend: Flex,
+
+    props: {
+      flow: 'column',
+      gap: 'C',
+      align: 'flex-start flex-start',
+      header: {
+        width: '100%',
+        align: 'center space-between'
+      }
+    },
+
+    header: {
+      extend: Flex,
+      SequenceSliders,
+      DeviceButtonSet
+    },
+
+    headings: {
+      extend: DocumentStylesSequence,
+      $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]
+
+        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)
+          ]
+        }))
+      }
+    },
+
+    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' },
+    props: {
+      gap: 'A',
+      margin: '0 0 0 E2+B',
+      align: 'center flex-start'
+    },
 
     interactivities: {
       extend: Flex,
-      props: {
-        gap: 'A'
-      },
+      props: { gap: 'A' },
       childExtend: {
         extend: SelectField,
         props: {
@@ -56,13 +187,15 @@ export default {
       }]
     },
 
-    plus: {
-      extend: IconButton,
-      props: {
-        theme: 'quaternary',
-        position: 'relative',
-        icon: 'plus'
-      }
+    VerticalLine: {
+      height: 'B',
+      margin: '0 Z1'
+    },
+
+    IconButton: {
+      theme: 'quinary',
+      position: 'relative',
+      icon: 'plus'
     },
 
     addsomething: {
@@ -74,17 +207,29 @@ export default {
         }
       },
       title: {},
-      buttons: {
-        ...[{
-          props: { icon: 'plus' }
-        }, {
-          props: { icon: 'arrowAngleDown' }
-        }]
-      }
+      buttons: [{
+        props: { icon: 'plus' }
+      }, {
+        props: { icon: 'arrowAngleMirroringVertical' }
+      }]
     }
   },
 
   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
 }