@symbo.ls/preview 0.0.39 → 0.0.41

package/.symbols/library.js

@@ -58,7 +58,7 @@ const define = {
   },
   SearchHeader: {
     settings: {
-      gridOptions: { colspan: 6, rowspan: 2 }
+      gridOptions: { colspan: 8, rowspan: 2 }
     }
   },
   Search: {

package/package.json

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

package/src/pages/DesignSystem/index.js

@@ -43,11 +43,6 @@ const NAV = [{
       icon: 'icons colored'
     }
   }
-}, {
-  props: {
-    icon: 'fontFace colored',
-    href: '/fonts'
-  }
 }, {
   props: {
     icon: 'device mobile half fill',
@@ -81,7 +76,6 @@ export const DesignSystem = {
     '/colors': Color,
     '/theme': Theme,
     '/typography': Typography,
-    '/fonts': Fonts,
     '/space': Spaces,
     '/shape': Shapes,
     '/icons': Icons,

package/src/pages/Export/index.js

@@ -68,17 +68,7 @@ export const Export = {
       flex: '1'
     },
 
-    tools: {
-      props: {
-        padding: 'Z2 0 0 0',
-        flexAlign: 'center space-between'
-      },
-
-      tools,
-
-      ResponsiveToolBar: {}
-    },
-
+    tools,
     description
   }
 

package/src/pages/Export/scene.js

@@ -50,7 +50,8 @@ export default {
           el.comp.setProps({
             base: s.base,
             fontSize: s.base + 'px',
-            spacingRatio: s.ratio
+            spacingRatio: s.ratio,
+            direction: s.direction
           }, { preventUpdate: true })
           updateReset()
         }

package/src/pages/Export/tools.js

@@ -1,14 +1,53 @@
 'use strict'
 
-import { Flex, SequenceSliders } from '@symbo.ls/components'
+import {
+  Flex,
+  SequenceSliders,
+  ClickableItem,
+  SquareButton
+} from '@symbo.ls/components'
 
 export default {
-  extend: [Flex],
-  props: { gap: 'B1' },
-  // theme: { extend: ThemeSwitcher },
+  props: {
+    padding: 'Z2 0 0',
+    flexAlign: 'center space-between'
+  },
 
-  sliders: {
-    extend: SequenceSliders,
-    childExtend: { title: null }
+  tools: {
+    extend: Flex,
+    props: { gap: 'B1' },
+    // theme: { extend: ThemeSwitcher },
+
+    sliders: {
+      extend: SequenceSliders,
+      childExtend: { title: null }
+    }
+  },
+
+  responsive: {
+    extend: Flex,
+    props: { gap: 'A2' },
+
+    direction: {
+      extend: [ClickableItem, SquareButton],
+      props: {
+        icon: 'languageDirection'
+      },
+      on: {
+        click: (ev, el, s) => {
+          console.log(s.direction)
+          s.update({
+            direction: s.direction === 'rtl' ? 'ltr' : 'rtl'
+          })
+        }
+      }
+    },
+
+    VerticalLine: {
+      margin: 'auto 0',
+      height: 'A2'
+    },
+
+    ResponsiveToolBar: {}
   }
 }

package/src/pages/Theme/index.js

@@ -6,34 +6,53 @@ import {
   Flex,
   SectionHeader,
   AccessibilityCheck,
-  SceneThemingBar
+  SceneThemingBar,
+  Pseudo,
+  CommonField
 } from '@symbo.ls/components'
 
-import { colorTones } from './colorTone'
-import { themingTools } from './themingTools'
-import { interactivity } from './interactivity'
-import { friendTheme } from './friendTheme'
+import preview from './preview'
+// import { themingTools } from './themingTools'
+// import { interactivity } from './interactivity'
+// import { friendTheme } from './friendTheme'
 
-import style, { styleLabel } from './style'
+import style from './style'
 
-const nameTheTheme = {
+const ThemeNameField = {
   tag: 'label',
-  style: styleLabel,
   attr: { for: 'name-it' },
-  caption: {
-    props: {
-      text: 'Name the theme',
-      padding: '0 0 Y1 0',
-      size: 'Z'
-    }
-  },
-  span: {
-    tag: 'span',
-    props: {
-      text: (el, s) => s.value,
-      size: 'E'
+  extend: CommonField,
+
+  props: ({ state }) => ({
+    gap: '0',
+
+    caption: {
+      text: 'Name the theme'
     },
-    attr: { contentEditable: true, placeholder: 'you name it', id: 'name-it' }
+
+    element: {
+      whiteSpace: 'nowrap',
+      minWidth: 'C1',
+      maxWidth: 'fit-content',
+      outline: 'none',
+      fontSize: 'E',
+
+      border: 'dashed, gray5',
+      borderWidth: '0 0 1px',
+
+      text: (el, s) => s.themeName,
+
+      ':empty::before': {
+        content: '"You name it"',
+        color: 'gray5'
+      }
+    }
+  }),
+
+  caption: {},
+  element: {
+    extend: Pseudo,
+    attr: { contentEditable: true, id: 'name-it' }
   }
 }
 
@@ -128,16 +147,16 @@ export const Theme = {
     init: (el, s) => {
       if (!el.context.SYSTEM) return
       const path = window.location.pathname
-      const pathArray = path.split('edit-icon/')
+      const pathArray = path.split('theme/')
       if (!el.context.SYSTEM) return
       const { THEME } = el.context.SYSTEM
       const themeName = pathArray[1]
-      var theme = THEME[themeName]
+      var value = THEME[themeName]
 
-      if (themeName && theme) {
+      if (themeName && value) {
         s.update({
-          themeName: themeName,
-          value: theme
+          themeName,
+          value
         }, { preventUpdate: true })
       }
     }
@@ -146,26 +165,24 @@ export const Theme = {
   header: {
     extend: SectionHeader,
     props: {
-      padding: 'C 0 B2 0',
-      margin: '0'
+      margin: '0 0 B2'
     },
-    heading: '',
-    label: nameTheTheme,
+    heading: null,
+    ThemeNameField,
     nav: { extend: SceneThemingBar }
   },
 
   cnt: {
-    extend: [Flex],
-    props: {
-      gap: 'D'
-    },
+    extend: Flex,
+    props: { gap: 'D' },
+
+    preview,
 
-    aside: colorTones,
     colorEdit: {
-      props: { gap: 'C2', flexFlow: 'column' },
-      themingTools,
-      interactivity,
-      friendTheme
+      props: { gap: 'C2', flexFlow: 'column' }
+      // themingTools,
+      // interactivity,
+      // friendTheme
     }
   },
 

package/src/pages/Theme/preview.js

@@ -0,0 +1,153 @@
+'use strict'
+
+import { opacify } from '@symbo.ls/scratch'
+import { Flex, Grid } from '@symbo.ls/components'
+
+const classOpacify = (value, opacity) => {
+  const { background, backgroundColor, color } = value
+  const bg = background || backgroundColor || color
+  if (!bg) return
+  return { background: opacify(bg, opacity) }
+}
+
+const TONES_AMOUNT = 13
+const TONES_ARR = new Array(TONES_AMOUNT).fill(0).map((_, i) => i)
+
+const getThemeProperty = (property, value, mod) => {
+  const modifier = `@${mod}`
+  return value[modifier] && value[modifier][property] ? value[modifier][property] : value[property]
+}
+
+export const Tones = {
+  extend: Grid,
+  props: {
+    columns: `repeat(${TONES_AMOUNT}, 1fr)`,
+    height: 'B',
+    round: 'Z',
+    overflow: 'hidden'
+  },
+  childExtend: {
+    tag: 'span',
+    text: null,
+    props: ({ key, state }) => ({
+      round: '0',
+      transition: 'B default-bezier',
+      transitionProperty: 'color, background',
+      background: getThemeProperty('background', state.value, state.sceneTheme),
+      opacity: '' + (100 / TONES_AMOUNT * parseInt(key)) / 100
+    })
+  },
+  $setCollection: () => TONES_ARR
+}
+
+export default {
+  tag: 'aside',
+  extend: Flex,
+  props: {
+    flow: 'column'
+  },
+
+  preview: {
+    props: (el, s) => ({
+      padding: 'X1',
+      round: 'Z2',
+      theme: `scene @${s.sceneTheme}`,
+      style: {
+        '&, & *': {
+          transition: '165ms cubic-bezier(.29,.67,.51,.97)',
+          transitionProperty: 'color, background'
+        }
+      }
+    }),
+    scene: {
+      props: {
+        padding: 'A',
+        backgroundPosition: `center`,
+        backgroundRepeat: `repeat`,
+        backgroundSize: '100px 100px'
+      },
+      circle: {
+        props: (el, s) => ({
+          theme: `${s.themeName} @${s.sceneTheme}`,
+          flexFlow: 'column',
+          flexAlign: 'center center',
+          width: 'G',
+          aspectRatio: '1 / 1',
+          round: '100%',
+          position: 'relative',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor: 'transparent',
+
+          h6: {
+            fontSize: 'D',
+            fontWeight: 'bold',
+            gap: 'X'
+          }
+        }),
+        h6: {
+          extend: Flex,
+          Span: {
+            text: 'The',
+            fontWeight: 'normal',
+            marginRight: '6px'
+          },
+          text: 'Text Color'
+        },
+        Span: {
+          text: (el, s) => s.themeName,
+          position: 'absolute',
+          top: '86%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          fontWeight: '600'
+        }
+      }
+    }
+  },
+
+  opacity: {
+    props: {
+      padding: 'B1 0 0 0'
+    },
+    caption: {
+      props: {
+        text: 'Opacity',
+        size: 'Z',
+        padding: '0 0 Z1 0',
+        opacity: '.65'
+      }
+    },
+    tones: { extend: Tones }
+  },
+
+  shades: {
+    if: () => false,
+    props: { padding: 'B 0 0 0' },
+    caption: {
+      props: {
+        text: 'Shades',
+        size: 'Z',
+        padding: '0 0 Z1 0'
+      },
+      style: { opacity: '.65' }
+    },
+
+    generate: {
+      props: { flexFlow: 'column', round: 'Z', gap: '2px' },
+
+      childExtend: {
+        extend: [Tones],
+        props: { round: 'X' },
+        ...TONES_ARR.map(v => ({
+          class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
+        }))
+      },
+
+      dark: {},
+      light: {
+        props: { theme: 'lightScene' }
+      }
+    }
+  }
+}

package/src/pages/Theme/style.js

@@ -1,22 +1,11 @@
 'use strict'
 
-export const styleLabel = {
-  caption: { whiteSpace: 'nowrap', opacity: 0.65 },
-  span: {
-    display: 'block',
-    whiteSpace: 'nowrap',
-    minWidth: `1.618em`,
-    maxWidth: 'fit-content',
-    borderBottom: '1px dashed rgba(255, 255, 255, .35)',
-    outline: 'none'
-  }
-}
-
 export const styleTool = {
   caption: { opacity: '.65' },
   '> div span': { opacity: '.5' },
   '> div > div': { gap: '1px' }
 }
+
 export const styleColorTones = {
   width: '22em',
   display: 'flex',

package/src/pages/Typography/documentStyles.js

@@ -9,7 +9,6 @@ import {
   SequenceSliders,
   DeviceButtonSet
 } from '@symbo.ls/components'
-import stylesHelpers from './stylesHelpers'
 
 import { HTML_TAGS } from '@domql/tags' // eslint-disable-line no-unused-vars
 
@@ -224,10 +223,6 @@ export default {
     }
   },
 
-  Line: {},
-
-  stylesHelpers,
-
   on: {
     init: (el, s) => {
       if (!el.context.SYSTEM) return

package/src/pages/Typography/fontFaces.js

@@ -0,0 +1,50 @@
+'use strict'
+
+import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
+import { TypeSection } from './shared'
+
+const mapFonts = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { FONT } = el.context.SYSTEM
+  const fontKeys = Object.keys(FONT)
+
+  return fontKeys.map(v => {
+    const font = FONT[v]
+    const weights = Object.keys(font)
+    const weightsLength = weights.length
+    const fontWeightCaption = weights[0] === 'variable' ? 'variable' : `${weightsLength} style${weightsLength > 1 ? 's' : ''}`
+
+    return {
+      title: v,
+      href: `/fonts/font-settings/${v}`,
+      labels: [
+        { icon: 'fontVariable', text: fontWeightCaption }
+      ]
+    }
+  })
+}
+
+export default {
+  extend: TypeSection,
+  header: {
+    state: {
+      title: 'Document Fonts',
+      p: 'Document @font-face, default and backup fonts',
+      nav: [{
+        icon: 'plus',
+        href: '/fonts/upload-font'
+      }]
+    }
+  },
+
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(2, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
+    childExtend: [FontObject, Hoverable],
+    $setStateCollection: mapFonts
+  }
+}

package/src/pages/Typography/fontFamilies.js

@@ -0,0 +1,45 @@
+'use strict'
+
+import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
+import { TypeSection } from './shared'
+
+const mapFontFamilies = (el, s) => {
+  if (!el.context.SYSTEM) return
+  const { FONT_FAMILY } = el.context.SYSTEM
+  const fontFamilyKeys = Object.keys(FONT_FAMILY)
+
+  return fontFamilyKeys.map(v => {
+    const val = FONT_FAMILY[v]
+    if (v === 'default') return
+    return {
+      title: v,
+      href: `/fonts/font-family/${v}`,
+      val
+    }
+  }).filter(v => v)
+}
+
+export default {
+  extend: TypeSection,
+  header: {
+    state: {
+      title: 'Font Families',
+      p: 'Setup a set and fallback fonts as font families',
+      nav: [{
+        icon: 'plus',
+        href: '/fonts/add-font-family'
+      }]
+    }
+  },
+  content: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(4, 1fr)',
+      gap: 'A',
+      margin: '0 -Z'
+    },
+
+    childExtend: [FontFamilyObject, Hoverable],
+    $setStateCollection: mapFontFamilies
+  }
+}

package/src/pages/Typography/index.js

@@ -2,8 +2,12 @@
 
 import state from './state'
 
+import fontFaces from './fontFaces'
 import typeScale from './typeScale'
+import fontFamilies from './fontFamilies'
 import documentStyles from './documentStyles'
+import stylesHelpers from './stylesHelpers'
+import { mapSequence, sortSequence } from '@symbo.ls/components'
 
 export const Typography = {
   state,
@@ -13,7 +17,25 @@ export const Typography = {
     p: 'A general configuration of type properties on the document.'
   },
 
+  line: { extend: 'Line' },
+
+  documentStyles,
+  line1: { extend: 'Line' },
+
+  stylesHelpers,
+  line2: { extend: 'Line' },
+
+  fontFaces,
+  line3: { extend: 'Line' },
+
+  fontFamilies,
+  line4: { extend: 'Line' },
+
   typeScale,
-  Line: {},
-  documentStyles
+
+  on: {
+    init: (el, s) => {
+      mapSequence(s, sortSequence)
+    }
+  }
 }

package/src/pages/Typography/stylesHelpers.js

@@ -5,6 +5,7 @@ import {
   SectionHeader,
   TypeHelperObject
 } from '@symbo.ls/components'
+import { findHeadingLetter, getFontFamily } from '@symbo.ls/scratch'
 
 export default {
   header: {
@@ -23,32 +24,39 @@ export default {
     extend: Grid,
     props: { columns: 'repeat(3, 1fr)' },
 
-    childProto: TypeHelperObject,
+    childExtend: TypeHelperObject,
 
-    $setStateCollection: () => [{
-      p: {
-        text: 'Headline',
-        style: { fontSize: `${48 / 16}em` }
-      }
-    }, {
-      p: {
-        text: 'Headline 2',
-        style: { fontSize: `${40 / 16}em` }
+    $setStateCollection: (el) => {
+      const { state, context } = el // eslint-disable-line no-unused-vars
+      const { TYPOGRAPHY, FONT_FAMILY } = context.SYSTEM
+      const { styles } = TYPOGRAPHY
+      el.removeContent()
 
-      }
-    }, {
-      p: '',
-      span: {
-        props: {
-          fontSize: 'Y',
-          padding: 'B 0 0 0'
+      const family = FONT_FAMILY[FONT_FAMILY.default]
+      const familyValue = getFontFamily()
+      const lineHeight = TYPOGRAPHY.lineHeight
+      const font = family.arr[0]
+
+      const HELPERS = Object.keys(styles).filter(v => v.slice(0, 1) === '.')
+      console.log(HELPERS)
+      return HELPERS.map((v, k) => ({
+        key: v,
+        value: {
+          font,
+          fontFamily: familyValue,
+          fontWeight: 900 - (k * 100),
+          lineHeight,
+          ...styles[v]
         },
-        text: 'Fontnote'
-      }
-      // p: {
-      //   text: 'Footnote',
-      //   style: { fontSize: `${12 / 16}em` }
-      // }
-    }]
+        labels: [
+          { icon: 'fontFace', text: font },
+          { icon: 'fontVariable', text: 900 - (k * 100) },
+          { icon: 'textLineHeight', text: lineHeight }
+        ],
+        sequenceValue: state.sequence[
+          findHeadingLetter(state.h1Matches, k)
+        ]
+      }))
+    }
   }
 }

package/src/state.js

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