@symbo.ls/preview 0.0.47 → 0.0.49

package/src/pages/Spaces/SpacingScale.js

@@ -1,7 +1,6 @@
 'use strict'
 
-import { Code, Flex } from '@symbo.ls/components'
-import { Preview } from './Preview'
+import { Flex } from '@symbo.ls/components'
 import { Table } from './Table'
 
 export const SpacingScale = {
@@ -20,7 +19,7 @@ export const SpacingScale = {
 
   SequenceSliders: {
     position: 'sticky',
-    top: 'D',
+    top: 'C2',
     background: 'black .5',
     zIndex: '9999',
     margin: '-B2 -B -B',
@@ -33,6 +32,7 @@ export const SpacingScale = {
   scale: {
     extend: Flex,
     props: {
+      lazyLoad: true,
       flow: 'column',
       gap: 'B1',
       margin: '0 0 C2',
@@ -41,44 +41,6 @@ export const SpacingScale = {
       preview: { flex: 1 }
     },
 
-    table: { extend: Table },
-
-    preview: {
-      extend: Flex,
-      props: {
-        position: 'sticky',
-        margin: '0 -Z1',
-        maxHeight: '25vh',
-        bottom: 'Z',
-        zIndex: '9999',
-        gap: 'A',
-
-        scene: { flex: 1 },
-
-        style: {
-          backdropFilter: 'blur(15px)'
-        }
-      },
-
-      scene: { extend: Preview },
-      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 props = ' + JSON.stringify(state.props, null, 2)
-          }
-        }
-      }
-    }
+    table: { extend: Table }
   }
 }

package/src/pages/Spaces/Table.js

@@ -72,7 +72,7 @@ const Row = {
       display: 'flex',
       gap: '.2em',
       opacity: '1',
-      ':empty': { padding: '0' }
+      boxSizing: 'content-box'
     },
     graph: {
       margin: '0 0 0 -B2',
@@ -123,6 +123,7 @@ export const Table = {
   tag: 'section',
 
   props: {
+    lazyLoad: true,
     overflow: 'hidden',
     position: 'relative',
     header: {

package/src/pages/Spaces/buttons.js

@@ -55,6 +55,7 @@ const diffIconTypes = (parentKey, key) => {
 
 const BUTTONS = {
   margin: {
+    maxValue: 3000,
     blockStart: {},
     inlineEnd: {},
     blockEnd: {},
@@ -69,22 +70,26 @@ const BUTTONS = {
     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: {},
@@ -92,13 +97,27 @@ const BUTTONS = {
   }
 }
 
+let keys
+const cachedKeys = state => {
+  if (!keys) keys = Object.keys(BUTTONS[state.value]).filter(v => v !== 'maxValue')
+  return keys
+}
+
 export default {
+  props: {
+    lazyLoad: true,
+    height: 'B2',
+    boxSizing: 'content-box'
+  },
+
   childExtend: {
     extend: [ChoosableButton, DropdownParent, WiderButton],
 
     props: ({ key, state, parent }) => ({
       active: state.parent.parent.props[state.value] === state.parent.key,
       icon: { name: state.value },
+      lazyLoad: true,
+
       '.active': {
         color: 'blue',
         ':hover': {
@@ -111,6 +130,7 @@ export default {
       extend: Dropdown,
 
       props: {
+        lazyLoad: true,
         minWidth: 'none',
         grid: { gap: '0' }
       },
@@ -120,9 +140,10 @@ export default {
       grid: {
         extend: GridInDropdown,
         props: ({ state }) => {
-          const keys = Object.keys(BUTTONS[state.value])
+          const keys = cachedKeys(state)
           if (keys.length < 4) {
             return {
+              lazyLoad: true,
               columns: 'repeat(4, 1fr)'
             }
           }
@@ -146,6 +167,7 @@ export default {
             const iconKey = diffIconTypes(propState.value, state.value)
             const active = tableState.props[propKey] === rowState.key
             return {
+              lazyLoad: true,
               active,
               icon: {
                 name: iconKey
@@ -179,7 +201,7 @@ export default {
           }
         },
 
-        $setStateCollection: ({ state }) => Object.keys(BUTTONS[state.value])
+        $setStateCollection: ({ state, props }) => cachedKeys(state)
       }
     },
 
@@ -196,20 +218,20 @@ export default {
           const tableState = rowState.parent
           const propKey = state.value
           const active = tableState.props[propKey] === rowState.key
-          const t = setTimeout(() => {
-            if (active) {
-              delete tableState.props[propKey] && tableState.update()
-            } else {
-              const allKeys = Object.keys(tableState.props)
-              allKeys.filter(v => {
-                const splitInWords = propKey.split(/(?=[A-Z])/)
-                return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
-              })
-                .forEach(v => delete tableState.props[v])
-              tableState.update({ props: { [propKey]: rowState.key } })
-            }
-            clearTimeout(t)
-          })
+          if (active) {
+            console.log('clicked')
+            delete tableState.props[propKey] && tableState.update()
+          } else {
+            const allKeys = Object.keys(tableState.props)
+            allKeys.filter(v => {
+              const splitInWords = propKey.split(/(?=[A-Z])/)
+              return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
+            })
+              .forEach(v => delete tableState.props[v])
+            console.log('clicked2')
+
+            tableState.update({ props: { [propKey]: rowState.key } })
+          }
         }
       },
 
@@ -227,6 +249,7 @@ export default {
             round: '100%',
             background: 'blue',
             boxSize: 'W2',
+            lazyLoad: true,
 
             hide: !active,
 
@@ -238,9 +261,15 @@ export default {
         }
       },
 
-      $setStateCollection: ({ state }) => Object.keys(BUTTONS[state.value])
+      $setStateCollection: ({ state }) => {
+        const buttonsByProperty = cachedKeys(state)
+        return buttonsByProperty
+      }
     }
   },
 
-  $setStateCollection: ({ state }) => Object.keys(BUTTONS)
+  $setStateCollection: ({ state }) => Object.keys(BUTTONS).filter(v => {
+    const { maxValue } = BUTTONS[v]
+    return maxValue ? maxValue > state.val : true
+  })
 }

package/src/pages/Typography/index.js

@@ -2,9 +2,7 @@
 
 import state from './state'
 
-import fontFaces from './fontFaces'
 import typeScale from './typeScale'
-import fontFamilies from './fontFamilies'
 import documentStyles from './documentStyles'
 import stylesHelpers from './stylesHelpers'
 import { mapSequence, sortSequence } from '@symbo.ls/components'
@@ -25,12 +23,6 @@ export const Typography = {
   stylesHelpers,
   line2: { extend: 'Line' },
 
-  fontFaces,
-  line3: { extend: 'Line' },
-
-  fontFamilies,
-  line4: { extend: 'Line' },
-
   typeScale,
 
   on: {

package/src/pages/Typography/stylesHelpers.js

@@ -38,7 +38,6 @@ export default {
       const font = family.arr[0]
 
       const HELPERS = Object.keys(styles).filter(v => v.slice(0, 1) === '.')
-      console.log(HELPERS)
       return HELPERS.map((v, k) => ({
         key: v,
         value: {