@symbo.ls/preview 0.0.98 → 2.0.7

package/src/components/SpacingButton/actionButtons.js

@@ -1,41 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/components'
-import { SpacingButton } from '..'
-import { SPACING_BUTTONS } from './props'
-
-export const setTableButtons = ({ state }) =>
-  Object.keys(SPACING_BUTTONS).filter(v => {
-    const rowState = state.sequence[state.selectedKey]
-    const { maxValue } = SPACING_BUTTONS[v]
-    return maxValue ? maxValue > (rowState && rowState.val) : true
-  })
-
-export const setRowButtons = ({ state }) =>
-  Object.keys(SPACING_BUTTONS).filter(v => {
-    const { maxValue } = SPACING_BUTTONS[v]
-    return maxValue ? maxValue > state.val : true
-  })
-
-export default {
-  extend: Flex,
-
-  props: {
-    position: 'absolute',
-    left: 'G3',
-    gap: 'X',
-    top: 'Y',
-    height: 'B2',
-    zIndex: 99,
-    boxSizing: 'content-box',
-    padding: '- - E',
-    transition: 'C ease-out',
-    transitionProperty: 'transform, opacity',
-    opacity: '0',
-
-    ':hover': { opacity: '1' }
-  },
-
-  childExtend: SpacingButton,
-  $setStateCollection: setTableButtons
-}

package/src/components/SpacingButton/dropdown.js

@@ -1,114 +0,0 @@
-'use strict'
-
-import {
-  Dropdown,
-  GridInDropdown
-} from '@symbo.ls/components'
-
-import {
-  ChoosableButton,
-  diffIconTypes,
-  diffPropPosition,
-  diffPropValue,
-  getStateTree,
-  keysOf
-} from '.'
-import { SPACING_BUTTONS } from './props'
-
-const ButtonInDropdown = {
-  extend: [ChoosableButton],
-  props: (element) => {
-    const { table, row, property: direction } = getStateTree(element)
-    const property = direction.parent
-
-    const propValue = property.value
-    const directionValue = direction.value
-
-    const activeProperty = SPACING_BUTTONS[property.value]
-    const keyLength = Object.keys(activeProperty).length
-    const iconKey = diffIconTypes(propValue, directionValue)
-
-    const active = table.props[propValue] === (row && row.key)
-
-    const gridArea = keyLength > 3 && diffPropPosition(propValue, directionValue)
-
-    return {
-      active,
-      gridArea,
-      lazyLoad: true,
-      icon: { name: iconKey },
-      theme: null,
-      '@dark': {
-        background: 'transparent 0',
-        color: 'gray7',
-        ':hover': {
-          theme: 'quinary',
-          color: 'gray8'
-        }
-      },
-      ':hover': null,
-      '.active': {
-        theme: null,
-        color: 'blue'
-      }
-    }
-  },
-  attr: { title: ({ state }) => state.value },
-  on: {
-    click: (ev, element) => {
-      const { table, row, property: direction } = getStateTree(element)
-      const property = direction.parent
-
-      const propKey = diffPropValue(property.value, direction.value)
-      const active = table.props[propKey] === row.key
-
-      if (active) {
-        delete table.props[propKey] && table.update()
-      } else {
-        table.update({ props: { [propKey]: row.key } })
-      }
-    }
-  }
-}
-
-export default {
-  extend: Dropdown,
-
-  props: {
-    lazyLoad: true,
-    minWidth: 'none',
-    left: 'auto',
-    grid: { gap: '0' }
-  },
-
-  header: { text: ({ state }) => state.value },
-
-  grid: {
-    extend: GridInDropdown,
-
-    props: ({ state }) => {
-      const keys = keysOf(state)
-      if (keys.length < 4) {
-        return {
-          lazyLoad: true,
-          columns: 'repeat(4, 1fr)'
-        }
-      }
-      return {
-        lazyLoad: true,
-        columns: 'auto 32px auto',
-        rows: 'auto 32px auto',
-        templateAreas: `"endStart blockStart startEnd"
-        "inlineStart content inlineEnd"
-        "startStart blockEnd endEnd"`
-      }
-    },
-
-    childExtend: ButtonInDropdown,
-
-    $setStateCollection: (element) => {
-      const { property } = getStateTree(element)
-      return keysOf(property)
-    }
-  }
-}

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
-        }
-      }
-    }
-  }
-}