@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/{ColorEditor → Theme}/themingTools.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Grid, ColorSwitcher, CommonField, SelectTool, ButtonSet, ClickableItem } from '@symbo.ls/all'
+import { Grid, ColorSwitcher, CommonField, SelectField, ButtonSet, ClickableItem } from '@symbo.ls/components'
 
 
 ColorSwitcher.props = (el, s) => {
@@ -14,7 +14,7 @@ ColorSwitcher.props = (el, s) => {
 }
 
 export const themingTools = {
-  proto: Grid,
+  extend: Grid,
   style: {
     width: 'fit-content'
   },
@@ -23,8 +23,8 @@ export const themingTools = {
     columnGap: 'C',
     rowGap: 'C'
   },
-  childProto: {
-    proto: CommonField,
+  childExtend: {
+    extend: CommonField,
     props: { padding: 0 },
     caption: { text: el => el.parent.props.caption },
     element: {}
@@ -33,7 +33,7 @@ export const themingTools = {
     props: { caption: 'Background color' },
     caption: {},
     element: {
-      proto: ColorSwitcher,
+      extend: ColorSwitcher,
       props: { type: 'background' },
 
       title: {},
@@ -46,7 +46,7 @@ export const themingTools = {
     props: { caption: 'Text color' },
     caption: {},
     element: {
-      proto: ColorSwitcher,
+      extend: ColorSwitcher,
       props: { type: 'color' },
 
       title: {},
@@ -59,7 +59,7 @@ export const themingTools = {
     props: { caption: 'Border color' },
     caption: {},
     element: {
-      proto: ColorSwitcher,
+      extend: ColorSwitcher,
       props: { type: 'border' },
 
       title: {},
@@ -72,7 +72,7 @@ export const themingTools = {
     props: { caption: 'Use as' },
     caption: {},
     element: {
-      proto: SelectTool,
+      extend: SelectField,
       title: { props: { text: 'Background color' } },
       buttons: { ...[{ props: { icon: 'arrowAngleMirroringVertical', theme: 'transparent' } }] }
     }
@@ -82,8 +82,8 @@ export const themingTools = {
     props: { caption: 'Border' },
     caption: {},
     element: {
-      proto: ButtonSet,
-      childProto: { proto: [ClickableItem] },
+      extend: ButtonSet,
+      childExtend: { extend: [ClickableItem] },
       props: { gap: 'Z' },
       ...[
         { props: { icon: 'colorsColored' } },
@@ -98,8 +98,8 @@ export const themingTools = {
     props: { caption: 'Shadow' },
     caption: {},
     element: {
-      proto: ButtonSet,
-      childProto: { proto: [ClickableItem] },
+      extend: ButtonSet,
+      childExtend: { extend: [ClickableItem] },
       ...[{ props: { icon: 'plus' } }]
     }
   }

package/src/pages/Typography/collection.js

@@ -0,0 +1,110 @@
+'use strict'
+
+import {
+  findHeadingLetter,
+  getFontFamily
+} from '@symbo.ls/scratch'
+import { HTML_TAGS } from '@domql/tags'
+
+const propertyDefaults = {
+  fontSize: 'A',
+  fontWeight: '400',
+  lineHeight: '1.4',
+  letterSpacing: '0',
+  italic: '0',
+  letterWidth: '0'
+}
+
+const iconMap = {
+  font: 'fontFace',
+  fontWeight: 'fontVariable',
+  lineHeight: 'textLineHeight',
+  letterSpacing: 'textLetterSpacing',
+  italic: 'fontStyleItalic',
+  letterWidth: 'textLetterWidth'
+}
+
+const getTypeProp = (key, prop, library, defaultValue) => {
+  const { TYPOGRAPHY } = library
+  const { styles } = TYPOGRAPHY
+  if (!styles[key]) styles[key] = {}
+  return styles[key][prop] ||
+    styles[prop] ||
+    TYPOGRAPHY[prop] ||
+    defaultValue ||
+    propertyDefaults[prop]
+}
+
+const getTypeStyle = (key, library) => ({
+  font: getFontFamily(key, library.FONT_FAMILY)[0],
+  fontSize: getTypeProp(key, 'fontSize', library),
+  fontWeight: getTypeProp(key, 'fontWeight', library),
+  lineHeight: getTypeProp(key, 'lineHeight', library),
+  letterSpacing: getTypeProp(key, 'letterSpacing', library),
+  italic: getTypeProp(key, 'italic', library),
+  letterWidth: getTypeProp(key, 'letterWidth', library)
+})
+
+const isHeading = v => v.length === 2 && v[0] === 'h'
+const isTag = v => HTML_TAGS.root.indexOf(v) > -1 || HTML_TAGS.body.indexOf(v) > -1
+const isHelper = v => v.slice(0, 1) === '.'
+
+const getCollectionFromArray = (arr, s) => {
+  const { __system } = s
+  const { TYPOGRAPHY } = __system
+  const { styles } = TYPOGRAPHY
+  return arr.map((v, k) => {
+    const result = getTypeStyle(v, __system)
+    return {
+      key: v,
+      value: {
+        ...result,
+        ...styles[v]
+      },
+      labels: Object.keys(result)
+        .filter(key => key !== 'fontSize' && result[key] && result[key] !== '0')
+        .map(key => ({
+          icon: iconMap[key],
+          text: result[key]
+        })
+        ),
+      sequenceValue: s.sequence[
+        isHeading(v) ? findHeadingLetter(s.h1Matches, k) : result.fontSize
+      ]
+    }
+  })
+}
+
+export const headingsCollection = (el, s) => {
+  el.removeContent()
+  const HEADINGS = new Array(6).fill(null).map((_, i) => 'h' + (i + 1))
+  return getCollectionFromArray(HEADINGS, s)
+}
+
+export const tagsCollection = (el, s) => {
+  const { __system } = s
+  const { TYPOGRAPHY } = __system
+  const { styles } = TYPOGRAPHY
+  if (!styles.body) styles.body = {}
+  el.removeContent()
+
+  const TAGS = Object.keys(styles)
+    .filter(v => {
+      return isTag(v) && !isHeading(v) && !isHelper(v)
+    })
+
+  return getCollectionFromArray(TAGS, s)
+}
+
+export const helpersCollection = (el, s) => {
+  const { __system } = s
+  const { TYPOGRAPHY } = __system
+  const { styles } = TYPOGRAPHY
+
+  const HELPERS = Object.keys(styles)
+    .filter(v => v.slice(0, 1) === '.')
+
+  el.removeContent()
+
+  return getCollectionFromArray(HELPERS, s)
+}

package/src/pages/Typography/documentStyles.js

@@ -0,0 +1,125 @@
+'use strict'
+
+import {
+  DocumentStylesSequence,
+  Flex,
+  SelectField,
+  HTMLTagTypeObject
+} from '@symbo.ls/components'
+
+import { headingsCollection, tagsCollection } from './collection'
+
+export default {
+  SectionHeader: {
+    title: 'Document Styles',
+    p: 'Document styling and theming provides global themes of the entire app, imagine it as a :root styling'
+  },
+
+  styles: {
+    extend: Flex,
+
+    props: {
+      flow: 'column',
+      gap: 'C',
+      align: 'flex-start flex-start',
+      header: {
+        width: '100%',
+        align: 'center space-between'
+      },
+      headings: {
+        width: '100%'
+      },
+      doc: {
+        width: '100%'
+      }
+    },
+
+    headings: {
+      extend: DocumentStylesSequence,
+      $setStateCollection: headingsCollection
+    },
+
+    doc: {
+      extend: DocumentStylesSequence,
+      $setStateCollection: tagsCollection
+    },
+
+    footer: {}
+  },
+
+  fields: {
+    extend: Flex,
+    props: {
+      gap: 'A',
+      margin: '0 0 0 E2+B',
+      align: 'center flex-start'
+    },
+
+    tags: {
+      extend: Flex,
+      props: { gap: 'A' },
+      childExtend: HTMLTagTypeObject,
+
+      p: {
+        props: {
+          title: {
+            text: '<p>'
+          }
+        }
+      }, 
+      code: {
+        props: {
+          title: {
+            text: '<code>'
+          }
+        }
+      }, 
+      pre: {
+        props: {
+          title: {
+            text: '<pre>'
+          }
+        }
+      }
+    },
+
+    VerticalLine: {
+      height: 'B',
+      margin: '0 Z1'
+    },
+
+    IconButton: {
+      theme: 'quinary',
+      position: 'relative',
+      icon: 'plus'
+    },
+
+    addsomething: {
+      extend: SelectField,
+      props: {
+        position: 'relative',
+        title: {
+          text: 'Choose element'
+        }
+      },
+      title: {},
+      buttons: [{
+        props: { icon: 'plus' }
+      }, {
+        props: { icon: 'arrowAngleMirroringVertical' }
+      }]
+    }
+  },
+
+  on: {
+    init: (el, s) => {
+      if (!s.__system) return
+      const { __system } = s
+      const { TYPOGRAPHY } = __system
+      const { styles } = TYPOGRAPHY
+      if (styles) {
+        s.update({ styles }, { preventUpdate: true })
+      } else TYPOGRAPHY.styles = {}
+    }
+  }
+}

package/src/pages/Typography/index.js

@@ -1,52 +1,44 @@
 'use strict'
 
-import PageProto from '../PageProto'
-
-import { Link, TabHeader } from '@symbo.ls/all'
-
-import style from './style'
 import state from './state'
 
-import documentFonts from './docFonts'
-import documentStyle from './docStyles'
 import typeScale from './typeScale'
+import documentStyles from './documentStyles'
+import stylesHelpers from './stylesHelpers'
+import { mapSequence, sortSequence } from '@symbo.ls/components'
 
-export default {
-  proto: PageProto,
+export const Typography = {
+  state,
 
-  on: {
-    init: (el, s) => {
-      const route = window.location.pathname
-      const routes = route.slice(1).split('/')
-      s.activeTab = routes[1] || state.activeTab
-    }
+  SectionHeader: {
+    margin: '0 0 C',
+    title: 'Typography',
+    p: 'A general configuration of type properties on the document.'
   },
 
-  define: { routes: param => param },
+  SlidersWithResponsive: {},
 
-  style,
-  state,
+  line: { extend: 'Line' },
 
-  routes: {
-    'document-fonts': documentFonts,
-    'type-scale': typeScale,
-    'document-styles': documentStyle
-  },
+  documentStyles,
+  line1: { extend: 'Line' },
+
+  stylesHelpers,
+  line2: { extend: 'Line' },
 
-  header: {
-    proto: TabHeader,
-    style: {
-      paddingLeft: '2em'
+  typeScale,
+
+  on: {
+    init: (el, s) => {
+      if (!s.__system.TYPOGRAPHY) {
+        s.systemUpdate({
+          TYPOGRAPHY: { base: s.base, ratio: s.ratio }
+        })
+      }
+      mapSequence(s, sortSequence)
     },
-    tabs: {
-      childProto: { proto: [Link] },
-      'document-fonts': { props: { text: 'Document Fonts' } },
-      'type-scale': { props: { text: 'Type Scale' } },
-      'document-styles': { props: { text: 'Document Styles' } }
+    stateUpdated: (el, s, changes) => {
+      s.systemUpdate({ TYPOGRAPHY: changes })
     }
-  },
-
-  page: {
-    content: (el, s) => ({ proto: el.parent.routes[s.activeTab] })
   }
 }

package/src/pages/Typography/rangeButtons.js

@@ -0,0 +1,58 @@
+'use strict'
+
+import { IncDecButtons } from '@symbo.ls/components'
+
+export const range0Buttons = {
+  extend: IncDecButtons,
+
+  ...[{
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[0] < 0) {
+          ++range[0]
+          state.update()
+        }
+      }
+    }
+  }, {
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[0] - 1 > -6) {
+          --range[0]
+          state.update()
+        }
+      }
+    }
+  }]
+}
+
+export const range1Buttons = {
+  extend: IncDecButtons,
+  ...[{
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[1] - 1 > 5) {
+          --range[1]
+          state.update()
+        }
+      }
+    }
+  }, {
+    on: {
+      click: (ev, el) => {
+        const { state } = el
+        const { range } = state
+        if (range[1] + 1 < 21) {
+          ++range[1]
+          state.update()
+        }
+      }
+    }
+  }]
+}

package/src/pages/Typography/shared.js

@@ -1,10 +1,9 @@
 'use strict'
 
-import { SectionHeader } from '@symbo.ls/all'
+import { SectionHeader } from '@symbo.ls/components'
 
 export const TypeSection = {
   header: {
-    proto: SectionHeader,
-    heading: { caption: null }
+    extend: SectionHeader
   }
 }

package/src/pages/Typography/state.js

@@ -1,15 +1,16 @@
 'use strict'
 
-export default {
-  base: 14,
+export default ({ parent }) => ({
+  base: 16,
   ratio: 1.125,
-  scales: {},
-  range: [-3, +10],
+  range: [-3, +8],
   h1Matches: +6,
+  scales: {},
   sequence: {},
-  type: 'font-size',
+  vars: {},
+  // subSequence: true,
+  type: 'demo-font-size',
 
   sampleText: 'Today is a big day for our tribe. The year ends.',
-  activePage: 'typography',
-  activeTab: 'documentFonts'
-}
+  activeTab: ''
+})

package/src/pages/Typography/stylesHelpers.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import {
+  Grid,
+  SectionHeader,
+  TypeHelperObject
+} from '@symbo.ls/components'
+import { helpersCollection } from './collection'
+
+export default {
+  header: {
+    extend: SectionHeader,
+    state: {
+      title: 'Helpers',
+      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling',
+      nav: [{
+        href: '/typography/add-style',
+        icon: 'plus'
+      }]
+    }
+  },
+
+  content: {
+    extend: Grid,
+    props: { columns: 'repeat(3, 1fr)' },
+
+    childExtend: TypeHelperObject,
+    $setStateCollection: helpersCollection
+  }
+}

package/src/pages/Typography/typeScale.js

@@ -1,104 +1,85 @@
 'use strict'
 
-import { styleTypeScale } from './style'
-
 import {
-  Flex, Block, Text, Grid,
-  SequenceGraph,
-  SliderToolWithCaption,
-  StaticSpacing,
-  PreviewSettings,
-  ScalesSequence,
-  CommonField
-} from '@symbo.ls/all'
+  TypeScaleSequence,
+  TestText,
+  Flex,
+  Grid,
+  mapSequence,
+  sortSequence
+} from '@symbo.ls/components'
 
-import { TypeSection } from './shared'
+import { range0Buttons, range1Buttons } from './rangeButtons'
 
-const ScalingTools = {
-  proto: Flex,
+export default {
+  extend: Grid,
 
   props: {
-    flow: 'column',
-    gap: 'A2'
-  },
+    gap: 'D',
+    templateColumns: 'var(--spacing-F2) 1fr',
+
+    sidebar: {
+      padding: 'B 0 0',
+      widthRange: 'F2',
+      position: 'sticky',
+      top: 'E'
+    },
 
-  fontSize: {
-    proto: [SliderToolWithCaption],
-    caption: { text: 'Base size' },
-    element: {
-      style: {
-        maxWidth: `${232 / 16}em`
-      }
-    }
-  },
+    content: {
+      overflow: 'hidden',
+      flex: '1',
+      flow: 'column',
+      gap: 'C',
 
-  sequence: {
-    proto: CommonField,
-    caption: { text: 'Sequence ratio' },
-    element: {
-      proto: StaticSpacing,
-      spacings: {
-        childProto: {
-          on: {
-            click: (ev, el, s) => s.update({ ratio: el.value.text })
-          }
-        }
+      header: {
+        align: 'flex-end space-between',
+        padding: '0 0 0 C',
+        gap: 'C1'
+      },
+
+      footer: {
+        padding: '0 0 0 C'
       }
     }
-  }
-}
+  },
 
-export default {
-  style: styleTypeScale,
-  proto: TypeSection,
+  sidebar: {
+    SectionHeader: {
+      title: 'TypeScale',
+      p: 'Generate text sequence by a base size and ratio'
+    },
 
-  header: {
-    heading: {
-      p: { props: { text: 'Generate text sequence by a base size and ratio' } }
+    SequenceSliders: {
+      flow: 'column'
     },
-    nav: {
-      add: { props: { icon: 'plus' } }
+
+    Paragraph: {
+      margin: '0',
+      fontSize: 'Z2',
+      padding: 'B2 0',
+      text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
     }
   },
 
-  wrapper: {
-    textTest: '',
-    fonts: '',
-
-    cnt: {
-      proto: [Block, Grid],
-
-      props: {
-        gap: 'D',
-        columns: '16em auto'
-      },
-
-      aside: ScalingTools,
+  content: {
+    extend: Flex,
 
-      wrapper: {
-        settings: {
-          proto: PreviewSettings,
-          props: { margin: '0 0 B' }
-        },
-
-        fonts: ScalesSequence
-      },
+    header: {
+      extend: Flex,
+      range0Buttons,
+      TestText
+    },
 
-      sequenceSet: {
-        proto: CommonField,
-        props: { margin: 'C2 0' },
-        caption: {
-          proto: [Block, Text],
-          props: {
-            text: 'Sizing generated by this setting',
-            padding: '0 0 A 0'
-          }
-        },
-        element: {
-          proto: [SequenceGraph, Block, Text],
-          style: { '> span': { display: 'none' } }
-        }
+    sequence: {
+      extend: TypeScaleSequence,
+      $setStateCollection: (el) => {
+        const { state } = el
+        state.sequence = {}
+        el.removeContent()
+        return mapSequence(state, sortSequence)
       }
-    }
+    },
+
+    footer: { range1Buttons }
   }
 }