@symbo.ls/preview 0.0.40 → 0.0.42

package/package.json

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

package/src/pages/DesignSystem/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { router } from '@domql/router'
-import { ClickableItem, Flex, Link, ResponsivePreview, SquareButton } from '@symbo.ls/components'
+import { ClickableItem, Flex, Link, ResponsivePreview, SquareButton, TooltipParent } from '@symbo.ls/components'
 import { PageExtend,
   Color,
   Theme,
@@ -14,55 +14,74 @@ import { PageExtend,
 } from '..'
 
 const NAV = [{
+  state: {
+    href: '/colors',
+    tooltip: 'Colors'
+  },
   props: {
-    icon: 'color outline colored',
-    href: '/colors'
+    icon: { name: 'color outline colored' }
   }
 }, {
-  props: {
-    icon: 'typography outline',
+  state: {
     href: '/typography',
+    tooltip: 'Typography'
+  },
+  props: {
+    icon: { name: 'typography outline' },
     opacity: '.7'
   }
 }, {
-  props: {
-    icon: 'space outline',
+  state: {
     href: '/space',
+    tooltip: 'Spacing'
+  },
+  props: {
+    icon: { name: 'space outline' },
     opacity: '.7'
   }
 }, {
+  state: {
+    href: '/shape',
+    tooltip: 'Shapes'
+  },
   props: {
-    icon: 'shape outline colored',
-    href: '/shape'
+    icon: { name: 'shape outline colored' }
   }
 }, {
-  props: {
-    icon: 'icons outline colored',
+  state: {
     href: '/icons',
-    $active: {
-      icon: 'icons colored'
-    }
-  }
-}, {
+    tooltip: 'Icons'
+  },
   props: {
-    icon: 'fontFace colored',
-    href: '/fonts'
+    icon: { name: 'icons outline colored' },
+    '.active': {
+      icon: { name: 'icons colored' }
+    }
   }
 }, {
-  props: {
-    icon: 'device mobile half fill',
+  state: {
     href: '/media-query',
+    tooltip: 'Responsive'
+  },
+  props: {
+    icon: { name: 'device mobile half fill' },
     opacity: '.7'
   }
 }, {
+  state: {
+    href: '/timing',
+    tooltip: 'Timing'
+  },
   props: {
-    icon: 'clock colored',
-    href: '/timing'
+    icon: { name: 'clock colored' }
   }
 }, {
+  state: {
+    href: '/sequence',
+    tooltip: 'Sequence'
+  },
   props: {
-    icon: 'sequence colored',
-    href: '/sequence'
+    icon: { name: 'sequence colored' }
   }
 }]
 
@@ -81,7 +100,6 @@ export const DesignSystem = {
     '/colors': Color,
     '/theme': Theme,
     '/typography': Typography,
-    '/fonts': Fonts,
     '/space': Spaces,
     '/shape': Shapes,
     '/icons': Icons,
@@ -105,13 +123,6 @@ export const DesignSystem = {
     sidebar: {
       tag: 'nav',
       extend: Flex,
-      childExtend: {
-        extend: [ClickableItem, Link, SquareButton],
-        props: ({ props }) => ({
-          active: props.href === window.location.pathname,
-          theme: null
-        })
-      },
 
       props: {
         gap: 'B1',
@@ -123,6 +134,45 @@ export const DesignSystem = {
         top: 'E'
       },
 
+      childExtend: {
+        extend: [ClickableItem, Link, SquareButton, TooltipParent],
+        props: ({ state }) => ({
+          href: state.href,
+          active: window.location.pathname.includes(state.href),
+          theme: null,
+          position: 'relative',
+          style: {
+            '&:hover, &:focus-visible': {
+              '& [tooltip]': {
+                transform: 'translate3d(0%,-50%,0)'
+              }
+            }
+          }
+        }),
+        Tooltip: ({ state }) => ({
+          background: 'black .95',
+          position: 'absolute',
+          pointerEvents: 'none',
+          top: '50%',
+          left: '90%',
+          shape: 'rectangle',
+          shapeDirection: null,
+          padding: 'X2 Z1',
+          transform: 'translate3d(10%, -50%, 0)',
+          opacity: '0',
+          visibility: 'hidden',
+          transition: 'B default-bezier',
+          transitionProperty: 'opacity, transform',
+          zIndex: 1000,
+          lineHeight: 1,
+          title: {
+            fontSize: 'Z',
+            text: state.tooltip
+          },
+          p: { text: null }
+        })
+      },
+
       ...NAV
     },
 

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