@symbo.ls/preview 0.0.86 → 0.0.88

package/package.json

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

package/src/components/Aside.js

@@ -3,6 +3,22 @@
 import { Link, ClickableItem, TooltipParent } from '@symbo.ls/components'
 import { Flex, SquareButton } from 'smbls'
 
+const setTooltipPosition = (el, s, options = {}) => {
+  const key = parseInt(el.key)
+  const rowHeight = `(var(--spacing-C) + var(--spacing-B1) + ${key}%)`
+  const translateY = `calc(${rowHeight} * ${key} + var(--spacing-Y2))`
+  const transform = `translate3d(0%, ${translateY}, 1px)`
+  const Tooltip = el.lookup('Tooltip')
+  if (Tooltip.setProps) {
+    Tooltip.setProps({
+      opacity: options.visible && '1',
+      visibility: options.visible && 'visible',
+      text: s.title,
+      transform
+    })
+  }
+}
+
 export const NavbarButton = {
   extend: [ClickableItem, Link, SquareButton, TooltipParent],
 
@@ -11,16 +27,30 @@ export const NavbarButton = {
     active: window.location.pathname.includes(state.href),
     isActive: window.location.pathname.includes(state.href),
     theme: null,
-    position: 'relative',
-    style: {
-      '&:hover, &:focus-visible': {
-        '& [tooltip]': {
-          transform: 'translate3d(0%,-50%,0)'
-        }
+    position: 'relative'
+  }),
+
+  on: {
+    update: (el, s) => {
+      const active = window.location.pathname.includes(s.href)
+      if (active) setTooltipPosition(el, s)
+    },
+    mouseover: (ev, el, s) => {
+      if (!s.hover) {
+        s.hover = true
+        setTooltipPosition(el, s, { visible: true })
+      }
+    },
+    mouseleave: (ev, el, s) => {
+      if (s.hover) {
+        s.hover = false
+        el.lookup('Tooltip').setProps({
+          opacity: '0',
+          visibility: 'hidden'
+        })
       }
     }
-  })
-
+  }
 }
 
 export const DesignSystemNavbar = {
@@ -29,6 +59,7 @@ export const DesignSystemNavbar = {
   props: {
     position: 'sticky',
     top: 'E',
+    zIndex: 1001,
 
     nav: {
       gap: 'B1',
@@ -44,27 +75,27 @@ export const DesignSystemNavbar = {
     childExtend: NavbarButton
   },
 
-  Tooltip: ({ state }) => ({
-    background: 'gray0 .95',
-    position: 'absolute',
-    pointerEvents: 'none',
-    top: '50%',
-    left: '100%',
-    shape: 'rectangle',
-    shapeDirection: null,
-    padding: 'X2 Z1',
-    transform: 'translate3d(5%, -50%, 0)',
-    opacity: '0',
-    visibility: 'hidden',
-    transition: 'B defaultBezier',
-    transitionProperty: 'opacity, transform',
-    textAlign: 'start',
-    zIndex: 9999,
-    lineHeight: 1,
-    title: {
-      fontSize: 'Z',
-      text: state.tooltip
+  Tooltip: {
+    props: {
+      background: 'gray0 .95',
+      position: 'absolute',
+      pointerEvents: 'none',
+      top: '0',
+      left: '100%',
+      shape: 'rectangle',
+      shapeDirection: null,
+      padding: 'X2 Z1',
+      transform: 'translate3d(5%, -50%, 0)',
+      opacity: '0',
+      visibility: 'hidden',
+      transition: 'C defaultBezier, C defaultBezier, B defaultBezier',
+      transitionProperty: 'opacity, visibility, transform',
+      textAlign: 'start',
+      zIndex: 99999,
+      lineHeight: 1,
+      title: { fontSize: 'Z' }
     },
-    p: { text: null }
-  })
+    title: null,
+    p: null
+  }
 }

package/src/components/SpacingPropButton/index.js

@@ -73,7 +73,7 @@ export const ChoosableButton = {
   })
 }
 
-const DotForPropButton = {
+export const DotForPropButton = {
   props: (el) => {
     const { table, row, property: direction } = getStateTree(el)
     const property = direction.parent
@@ -94,10 +94,10 @@ const DotForPropButton = {
       isRadius,
 
       '!isRadius': {
-        ':nth-child(1)': { left: '50%', top: 'W' },
-        ':nth-child(2)': { right: 'W', top: '50%' },
-        ':nth-child(3)': { left: '50%', bottom: 'W' },
-        ':nth-child(4)': { left: 'W', top: '50%' }
+        ':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': {
@@ -110,6 +110,24 @@ const DotForPropButton = {
   }
 }
 
+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 SpacingPropButton = {
   extend: [ChoosableButton, DropdownParent, WiderButton],
 
@@ -119,7 +137,6 @@ export const SpacingPropButton = {
     const active = table.props[propValue] === (row && row.key)
     return {
       active,
-      lazyLoad: true,
       icon: { name: property.value },
 
       '.active': {

package/src/components/SpacingTable.js

@@ -1,13 +1,17 @@
 'use strict'
 
 import {
+  Icon,
   Grid,
   Pseudo,
   mapSequence,
   sortSequence
 } from '@symbo.ls/components'
 
-import buttons from '../pages/Spaces/buttons'
+import buttons, { setRowButtons } from '../pages/Spaces/buttons'
+import { DotForRowButton, SpacingPropButton } from './SpacingPropButton'
+
+const DotsInButton = SpacingPropButton.dots
 
 const Cell = {
   tag: 'div',
@@ -85,10 +89,13 @@ const Row = {
       }
     },
     buttons: {
-      display: 'flex',
+      columns: 'repeat(7, var(--spacing-B2))',
+      rows: 'var(--spacing-B2)',
+      position: 'relative',
       gap: '.2em',
       opacity: '1',
-      boxSizing: 'content-box'
+      boxSizing: 'content-box',
+      margin: '0 0 0 -1.9em'
     }
   }),
 
@@ -98,7 +105,75 @@ const Row = {
   em: {},
   decimal: {},
   px: {},
-  buttons: {},
+  buttons: {
+    extend: Grid,
+
+    childExtend: {
+      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
+      }
+    },
+
+    $setStateCollection: setRowButtons
+  },
   graph: { line: {} },
 
   overlay: {

package/src/pages/DesignSystem/index.js

@@ -25,16 +25,16 @@ import {
 
 const NAV = [{
   state: {
-    href: '/colors',
-    tooltip: 'Colors'
+    title: 'Colors',
+    href: '/colors'
   },
   props: {
     icon: { name: 'color outline colored' }
   }
 }, {
   state: {
-    href: '/typography',
-    tooltip: 'Typography'
+    title: 'Typography',
+    href: '/typography'
   },
   props: {
     icon: { name: 'typography outline' },
@@ -42,8 +42,8 @@ const NAV = [{
   }
 }, {
   state: {
-    href: '/space',
-    tooltip: 'Spacing'
+    title: 'Spacing',
+    href: '/space'
   },
   props: {
     icon: { name: 'space outline' },
@@ -51,16 +51,16 @@ const NAV = [{
   }
 }, {
   state: {
-    href: '/shape',
-    tooltip: 'Shapes'
+    title: 'Shapes',
+    href: '/shape'
   },
   props: {
     icon: { name: 'shape outline colored' }
   }
 }, {
   state: {
-    href: '/icons',
-    tooltip: 'Icons'
+    title: 'Icons',
+    href: '/icons'
   },
   props: {
     icon: { name: 'icons outline colored' },
@@ -70,8 +70,8 @@ const NAV = [{
   }
 }, {
   state: {
-    href: '/media-query',
-    tooltip: 'Responsive'
+    title: 'Responsive',
+    href: '/media-query'
   },
   props: {
     icon: { name: 'device mobile half fill' },
@@ -79,8 +79,8 @@ const NAV = [{
   }
 }, {
   state: {
-    href: '/fonts',
-    tooltip: 'Fonts'
+    title: 'Fonts',
+    href: '/fonts'
   },
   props: {
     icon: { name: 'fontFace colored' },
@@ -88,16 +88,16 @@ const NAV = [{
   }
 }, {
   state: {
-    href: '/timing',
-    tooltip: 'Timing'
+    title: 'Timing',
+    href: '/timing'
   },
   props: {
     icon: { name: 'clock colored' }
   }
 }, {
   state: {
-    href: '/sequence',
-    tooltip: 'Sequence'
+    title: 'Sequence',
+    href: '/sequence'
   },
   props: {
     icon: { name: 'sequence colored' }

package/src/pages/Spaces/buttons.js

@@ -3,6 +3,19 @@
 import { Flex } from '@symbo.ls/components'
 import { SpacingPropButton, SPACING_BUTTONS } from '../../components'
 
+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,
 
@@ -11,11 +24,10 @@ export default {
     left: 'G3',
     gap: 'X',
     top: 'Y',
-    lazyLoad: true,
     height: 'B2',
     zIndex: 99,
     boxSizing: 'content-box',
-    padding: '- - C2',
+    padding: '- - E',
     transition: 'C ease-out',
     transitionProperty: 'transform, opacity',
     opacity: '0',
@@ -25,11 +37,5 @@ export default {
 
   childExtend: SpacingPropButton,
 
-  $setStateCollection: ({ props, 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
-    }
-    )
+  $setStateCollection: setTableButtons
 }