@symbo.ls/preview 2.7.20 → 2.7.23

package/src/components/SpacingButton/index.js

@@ -1,248 +0,0 @@
-'use strict'
-
-import { WiderButton, DropdownParent, Icon } from '@symbo.ls/components'
-
-import { SPACING_BUTTONS } from './props'
-import dropdown from './dropdown'
-
-export const ChoosableButton = {
-  props: ({ key }) => ({
-    padding: 'Z',
-    icon: key,
-    theme: null,
-    transition: 'B defaultBezier',
-    transitionProperty: 'opacity, background, color',
-    '@dark': {
-      background: 'gray1',
-      color: 'gray5'
-    },
-    '@light': {
-      background: 'white .5',
-      color: 'gray7'
-    },
-    ':hover': {
-      theme: 'quaternary',
-      '.active': { color: 'blue' }
-    },
-    '.active': {
-      theme: null
-    }
-  })
-}
-
-export const DotForPropButton = {
-  props: (el) => {
-    const { table, row, property: direction } = getStateTree(el)
-    const property = direction.parent
-
-    const propKey = diffPropValue(property.value, direction.value)
-    const active = table.props[propKey] === (row && row.key)
-
-    const isRadius = property.value === 'borderRadius'
-
-    return {
-      position: 'absolute',
-      round: '100%',
-      background: 'blue',
-      boxSize: 'W2',
-      lazyLoad: true,
-
-      hide: !active,
-      isRadius,
-
-      '!isRadius': {
-        ':nth-child(1)': { left: '45%', top: 'W' },
-        ':nth-child(2)': { right: 'W', top: '45%' },
-        ':nth-child(3)': { left: '45%', bottom: 'W' },
-        ':nth-child(4)': { left: 'W', top: '45%' }
-      },
-
-      '.isRadius': {
-        ':nth-child(1)': { left: 'X2', top: 'X2' },
-        ':nth-child(2)': { right: 'X2', top: 'X2' },
-        ':nth-child(3)': { right: 'X2', bottom: 'X2' },
-        ':nth-child(4)': { left: 'X2', bottom: 'X2' }
-      }
-    }
-  }
-}
-
-export const DotForRowButton = {
-  extend: DotForPropButton,
-  props: ({ state }) => {
-    const direction = state
-    const property = direction.parent
-    const row = property.parent
-    const table = row.parent
-
-    const propKey = diffPropValue(property.value, direction.value)
-    const active = table.props[propKey] === row.key
-
-    return {
-      hide: !active,
-      background: 'blue .65'
-    }
-  }
-}
-
-export const SpacingButton = {
-  extend: [ChoosableButton, DropdownParent, WiderButton],
-
-  props: (element) => {
-    const { table, row, property } = getStateTree(element)
-    const propValue = property.value
-    const active = table.props[propValue] === (row && row.key)
-    return {
-      active,
-      icon: { name: property.value },
-
-      '.active': {
-        color: 'blue',
-        ':hover': { color: 'blue' }
-      },
-
-      style: {
-        '&:hover, &:focus-visible': {
-          '& [tooltip]': {
-            transform: 'translate3d(-50%,0,0)'
-          }
-        }
-      }
-    }
-  },
-
-  dots: {
-    props: {
-      lazyLoad: true,
-      position: 'absolute',
-      inset: '0 0 0 0'
-    },
-
-    on: {
-      click: (ev, el) => {
-        const { table, row, property } = getStateTree(el)
-        const active = table.props[property.value] === row.key
-        if (active) {
-          delete table.props[property.value] && table.update()
-        } else {
-          const allKeys = Object.keys(table.props)
-          allKeys.filter(v => {
-            const splitInWords = property.value.split(/(?=[A-Z])/)
-            return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
-          })
-            .forEach(v => delete table.props[v])
-          table.update({ props: { [property.value]: row.key } })
-        }
-      }
-    },
-
-    attr: { title: ({ state }) => state.value },
-
-    childExtend: DotForPropButton,
-
-    $setStateCollection: ({ state }) => {
-      const buttonsByProperty = keysOf(state)
-      return buttonsByProperty
-    }
-  },
-
-  dropdown
-}
-
-const DotsInButton = SpacingButton.dots
-
-export const SpacingRowButton = {
-  props: ({ state }) => {
-    const property = state
-    const row = property.parent
-    const table = row.parent
-
-    const propKey = property.value
-
-    const active = Object.keys(table.props).filter(prop => {
-      const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
-      const keyMathes = table.props[prop] === row.key
-      return hasProp && keyMathes
-    }).length
-
-    return {
-      active: !!active,
-      position: 'relative',
-      round: 'Z',
-      display: 'flex',
-
-      icon: {
-        name: propKey,
-        opacity: '0',
-        color: 'gray5',
-        margin: 'auto'
-      },
-
-      '.active': {
-        boxShadow: '0, 0, 0, 3px, gray1, inset'
-      }
-    }
-  },
-
-  icon: {
-    extend: Icon,
-    props: ({ state }) => {
-      const property = state
-      const row = property.parent
-      const table = row.parent
-
-      const propKey = property.value
-      const middleActive = table.props[propKey] === row.key
-
-      const active = Object.keys(table.props).filter(prop => {
-        const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
-        const keyMathes = table.props[prop] === row.key
-        return hasProp && keyMathes
-      }).length
-
-      return {
-        active,
-        middleActive,
-        '.active': { opacity: '1' },
-        '.middleActive': { color: 'blue' }
-      }
-    }
-  },
-
-  dots: {
-    childExtend: DotForRowButton,
-    $setStateCollection: DotsInButton.$setStateCollection
-  }
-}
-
-export const getStateTree = element => {
-  const table = element.lookup('Page').state
-  const row = table.sequence[table.selectedKey]
-  const property = element.state
-
-  return { table, row, property }
-}
-
-export const jointPropDirection = (parentKey, key) => {
-  return parentKey + key.slice(0, 1).toUpperCase() + key.slice(1)
-}
-
-export const diffPropValue = (parentKey, key) => {
-  if (parentKey.includes('borderWidth')) parentKey = 'border'
-  return jointPropDirection(parentKey, key)
-}
-
-export const diffPropPosition = (parentKey, key) => {
-  if (parentKey.includes('borderWidth')) return key.split('Width')[0]
-  return key
-}
-
-export const diffIconTypes = (parentKey, key) => {
-  if (parentKey.includes('borderWidth')) key = key.split('Width')[0]
-  if (parentKey.includes('margin') || parentKey === 'borderWidth') parentKey = 'padding'
-  return jointPropDirection(parentKey, key)
-}
-
-export const keysOf = state => {
-  return Object.keys(SPACING_BUTTONS[state.value]).filter(v => v !== 'maxValue')
-}

package/src/components/SpacingButton/props.js

@@ -1,45 +0,0 @@
-'use strict'
-
-export const SPACING_BUTTONS = {
-  margin: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  height: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  width: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  borderWidth: {
-    maxValue: 1280,
-    blockStartWidth: {},
-    inlineEndWidth: {},
-    blockEndWidth: {},
-    inlineStartWidth: {}
-  },
-  padding: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  gap: {
-    maxValue: 3000,
-    Horizontal: {},
-    Vertical: {}
-  },
-  borderRadius: {
-    maxValue: 1280,
-    endStart: {},
-    startEnd: {},
-    endEnd: {},
-    startStart: {}
-  }
-}

package/src/components/SpacingPreview.js

@@ -1,154 +0,0 @@
-'use strict'
-
-import { Grid, Scene, Flex, Code } from '@symbo.ls/components'
-
-const returnScale = (state, key, fallback) => {
-  const { scales } = state
-  return (scales[state.props[key] || state.props[fallback]] || 0) + 'em'
-}
-
-const scene = {
-  extend: Scene,
-
-  scene: {
-    boxModel: {
-      extend: Grid,
-      props: ({ state }) => ({
-        color: 'gray5',
-        fontSize: 'Z',
-        columns: '30px auto 30px',
-        rows: '30px auto 30px',
-        templateAreas: `"x1 t x2"
-          "l content r"
-          "x3 b x4"`,
-        alignItems: 'center',
-        textAlign: 'center'
-      }),
-
-      ...[
-        ...['', { text: (el, s) => s.props.paddingTop || '', style: { gridArea: 't' } }, ''],
-        ...[
-          { text: (el, s) => s.props.paddingLeft || '', style: { gridArea: 'l' } },
-          {
-            props: ({ state }) => ({
-              gridArea: 'content',
-              borderStyle: 'solid',
-              borderColor: 'margin 0.15',
-
-              borderWidth: [
-                returnScale(state, 'marginBlockStart', 'margin'),
-                returnScale(state, 'marginInlineEnd', 'margin'),
-                returnScale(state, 'marginBlockEnd', 'margin'),
-                returnScale(state, 'marginInlineStart', 'margin')
-              ]
-            }),
-            border: {
-              props: ({ state }) => ({
-                gridArea: 'content',
-                borderStyle: 'solid',
-                borderColor: 'border 0.65',
-                overflow: 'hidden',
-
-                round: [
-                  returnScale(state, 'borderRadiusEndStart', 'borderRadius'),
-                  returnScale(state, 'borderRadiusStartEnd', 'borderRadius'),
-                  returnScale(state, 'borderRadiusEndEnd', 'borderRadius'),
-                  returnScale(state, 'borderRadiusStartStart', 'borderRadius')
-                ].join(' '),
-
-                borderWidth: [
-                  returnScale(state, 'borderBlockStartWidth', 'borderWidth'),
-                  returnScale(state, 'borderInlineEndWidth', 'borderWidth'),
-                  returnScale(state, 'borderBlockEndWidth', 'borderWidth'),
-                  returnScale(state, 'borderInlineStartWidth', 'borderWidth')
-                ]
-              }),
-              padding: {
-                extend: Flex,
-                props: ({ state }) => ({
-                  fontSize: `${state.base}px`,
-                  lineHeight: 1,
-                  borderStyle: 'solid',
-                  theme: 'quaternary',
-                  padding: 'X2',
-                  borderColor: 'grassgreen 0.25',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-
-                  width: state.props['width'],
-                  height: state.props['height'],
-
-                  minWidth: state.props['minWidth'],
-                  maxWidth: state.props['maxWidth'],
-
-                  minHeight: state.props['minHeight'],
-                  maxHeight: state.props['maxHeight'],
-
-                  borderWidth: [
-                    returnScale(state, 'paddingBlockStart', 'padding'),
-                    returnScale(state, 'paddingInlineEnd', 'padding'),
-                    returnScale(state, 'paddingBlockEnd', 'padding'),
-                    returnScale(state, 'paddingInlineStart', 'padding')
-                  ],
-                  style: { whiteSpace: 'nowrap' }
-                }),
-                span: (el, s) => `Base `,
-                gap: {
-                  props: ({ state }) => ({
-                    background: 'gap .15',
-                    margin: '0 .1em',
-                    height: '1em',
-                    minWidth: state.props['gap']
-                  })
-                },
-                base: { text: (el, s) => s.base }
-              }
-            }
-          }, {
-            text: (el, s) => s.paddingRight || '', style: { gridArea: 'r' }
-          }],
-        ...['', { text: (el, s) => s.paddingBottom || '', style: { gridArea: 'b' } }, '']
-      ]
-    }
-  }
-}
-
-export const SpacingPreview = {
-  extend: Flex,
-
-  props: {
-    maxHeight: '25vh',
-    zIndex: '9999',
-    gap: 'A',
-    lazyLoad: true,
-
-    scene: { flex: 1 },
-
-    style: {
-      backdropFilter: 'blur(15px)'
-    }
-  },
-
-  scene,
-  code: {
-    extend: Code,
-    props: ({ state }) => ({
-      hide: Object.keys(state.props).length === 0,
-      flex: '0 0 360px',
-      margin: '0',
-      code: {
-        margin: '0'
-      },
-      buttons: { marginInline: 'X2' }
-    }),
-    title: null,
-    code: {
-      props: {
-        text: ({ state }) => {
-          const code = 'const props = ' + JSON.stringify(state.props, null, 2)
-          return code
-        }
-      }
-    }
-  }
-}

package/src/components/SpacingTable.js

@@ -1,210 +0,0 @@
-'use strict'
-
-import {
-  Grid,
-  Pseudo,
-  mapSequence,
-  sortSequence
-} from '@symbo.ls/components'
-
-import { SpacingRowButton } from '.'
-import actionButtons, { setRowButtons } from './SpacingButton/actionButtons'
-
-const Cell = {
-  tag: 'div',
-  props: {
-    padding: 'X2 C2 X2 0'
-  }
-}
-
-const Row = {
-  extend: Grid,
-  key: state => state.key,
-
-  props: ({ state }) => ({
-    columns: '7ch 14ch 12ch 12ch 20em 1fr',
-    alignItems: 'center',
-    isBase: state.index === 0,
-    active: (state.key && state.key.length) === 1,
-
-    margin: '0 -A',
-    padding: '0 B',
-    position: 'relative',
-    height: 'C+Z',
-    transition: 'A defaultBezier background',
-
-    '.isBase': {
-      opacity: 1,
-      background: 'gray1 .5'
-    },
-
-    ':hover': {
-      background: 'gray1 .65'
-    },
-
-    i: {
-      text: state.key,
-      active: (state.key && state.key.length) === 1,
-
-      '.active': {
-        fontWeight: '600',
-        '@dark': { color: 'gray9' },
-        '@light': { color: 'gray3' }
-      },
-      '!active': {
-        fontWeight: '400',
-        '@dark': { color: 'gray6' },
-        '@light': { color: 'gray7' }
-      }
-    },
-    decimal: {
-      text: state.decimal,
-      color: 'gray6',
-      fontWeight: '300'
-    },
-    px: {
-      text: state.val,
-      '@dark': { color: 'gray9' },
-      '@light': { color: 'gray3' }
-    },
-    em: {
-      color: 'gray6',
-      text: state.scaling + 'em'
-    },
-    graph: {
-      margin: '0 0 0 -B2',
-      maxWidth: '1px',
-      line: {
-        isBase: state.index === 0,
-        widthRange: `${state.val}px` || 0,
-        height: '2px',
-        background: 'blue',
-        borderRadius: 'A',
-        '.isBase': {
-          height: '5px'
-        }
-      }
-    },
-    buttons: {
-      columns: 'repeat(7, var(--spacing-B2))',
-      rows: 'var(--spacing-B2)',
-      position: 'relative',
-      gap: '.2em',
-      opacity: '1',
-      boxSizing: 'content-box',
-      margin: '0 0 0 -1.9em'
-    }
-  }),
-
-  childExtend: Cell,
-
-  i: {},
-  em: {},
-  decimal: {},
-  px: {},
-  buttons: {
-    extend: Grid,
-    childExtend: SpacingRowButton,
-    $setStateCollection: setRowButtons
-  },
-  graph: { line: {} },
-
-  overlay: {
-    props: {
-      position: 'absolute',
-      right: '0',
-      top: '0',
-      bottom: '0',
-      width: 'calc(100% - var(--spacing-G3))',
-      height: '100%'
-    },
-
-    on: {
-      mouseover: (ev, el, s) => {
-        if (!s.parent.hovered !== s.key) {
-          const key = parseInt(el.parent.key)
-          const rowHeight = '(var(--spacing-C) + var(--spacing-Z))'
-          const translateY = `calc(${rowHeight} * ${key + 1})`
-          const transform = `translate3d(0px, ${translateY}, 1px)`
-          s.parent.hovered = s.key
-          s.parent.selectedKey = s.key
-          el.lookup('actionButtons').setProps({ opacity: '1', transform })
-        }
-      },
-
-      mouseleave: (ev, el, s) => {
-        if (s.parent.hovered && s.parent.hovered === s.key) {
-          s.parent.hovered = false
-          el.lookup('actionButtons').setProps({ opacity: '0' })
-        }
-      }
-    }
-  }
-}
-
-const HeaderRow = {
-  extend: Row,
-
-  childExtend: {
-    props: {
-      color: 'gray7',
-      style: { paddingBlock: '0 .618em' }
-    }
-  },
-
-  i: '#',
-  em: 'em',
-  decimal: 'decimal',
-  px: 'px',
-  buttons: '',
-  graph: null,
-  overlay: null
-}
-
-export const SpacingTable = {
-  extend: Pseudo,
-  tag: 'section',
-
-  props: {
-    lazyLoad: true,
-    overflow: 'hidden',
-    position: 'relative',
-    header: {
-      '@dark': { color: 'gray6' },
-      '@light': { color: 'gray7' }
-    },
-
-    '::after': {
-      content: '""',
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: '0',
-      left: '100%'
-    },
-    '@dark': {
-      color: 'gray8',
-      '::after': {
-        background: 'gray0',
-        boxShadow: 'gray0, 0 0px 50px 50px'
-      }
-    },
-    '@light': {
-      color: 'gray3',
-      '::after': {
-        background: 'gray12',
-        boxShadow: 'gray12, 0 0px 50px 50px'
-      }
-    }
-  },
-
-  header: HeaderRow,
-
-  cnt: {
-    childExtend: Row,
-    props: { lazyLoad: true },
-    $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
-  },
-
-  actionButtons
-}

package/src/components/ThemeButtons.js

@@ -1,41 +0,0 @@
-'use strict'
-
-import { ColorPicker } from '@symbo.ls/components'
-
-export const ThemeButtons = {
-  props: {
-    position: 'relative',
-    zIndex: '2',
-    round: 'X2',
-    style: {
-      columnCount: 2,
-      columnGap: '0'
-    }
-  },
-
-  attr: { buttons: true },
-
-  childExtend: {
-    extend: ColorPicker,
-    props: {
-      width: '100%',
-      theme: null,
-      background: 'black 0'
-    },
-    on: {
-      stateUpdated: (el, s) => {
-        s.parent.update({ [s.key]: s.value })
-      }
-    }
-  },
-
-  $setStateCollection: (el, s) => {
-    return [{
-      key: 'color',
-      value: s.color
-    }, {
-      key: 'background',
-      value: s.background
-    }]
-  }
-}