@symbo.ls/preview 0.0.98 → 2.0.7

package/src/pages/Theme/preview.js

@@ -1,153 +0,0 @@
-'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 defaultBezier',
-      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/Typography/collection.js

@@ -1,110 +0,0 @@
-'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

@@ -1,125 +0,0 @@
-'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/rangeButtons.js

@@ -1,58 +0,0 @@
-'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/stylesHelpers.js

@@ -1,30 +0,0 @@
-'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
-  }
-}