@symbo.ls/preview 0.0.48 → 0.0.49

package/.symbols/library.js

@@ -78,7 +78,9 @@ const define = {
   }
 }
 
-export const LIBRARY = Object.keys(lib).map(key => {
+export const LIBRARY = []
+
+export const SYMBOLS_LIBRARY = Object.keys(lib).map(key => {
   const component = lib[key]
   const base = define[key] || define.default
   return deepMerge({

package/package.json

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

package/src/components/ShapeSet.js

@@ -30,7 +30,7 @@ const ShapeItem = {
       transitionProperty: 'background',
       width: 'C1',
       height: 'C1',
-      background: 'gray5'
+      background: 'gray3'
     }
   }),
 

package/src/components/SpacingPreview.js

@@ -120,6 +120,7 @@ export const SpacingPreview = {
     maxHeight: '25vh',
     zIndex: '9999',
     gap: 'A',
+    lazyLoad: true,
 
     scene: { flex: 1 },
 

package/src/pages/MediaQuery/index.js

@@ -2,24 +2,16 @@
 
 import { Flex } from '@symbo.ls/components'
 
-import { mediaValuesList, screenSizingList } from './lists'
-
-const props = {
-  SectionHeader: {
-    title: 'Responsive',
-    p: 'A Design System is the single source of truth that defines all design elements and allows the crews to assemble components and compose them into more complex apps.'
-  },
-
-  content: {
-    justifyContent: 'space-between',
-    gap: 'A2'
-  }
-}
+import { mediaQueryList, screenSizingList } from './lists'
 
 const content = {
   extend: Flex,
 
   props: {
+    justifyContent: 'space-between',
+    margin: '0 -Z',
+    gap: 'C1',
+
     childProps: {
       heading: {
         color: 'white',
@@ -28,25 +20,27 @@ const content = {
       }
     },
 
-    values: {
+    mediaQueries: {
       flex: 1
     }
   },
 
-  values: {
-    heading: { text: 'Media Value' },
-    mediaValuesList
+  mediaQueries: {
+    heading: { text: 'Media Queries' },
+    mediaQueryList
   },
 
-  screens: {
+  screensSheet: {
     heading: { text: 'Screen Sizing Sheet' },
     screenSizingList
   }
 }
 
 export const MediaQuery = {
-  props,
+  SectionHeader: {
+    title: 'Responsive',
+    p: 'A Design System is the single source of truth that defines all design elements and allows the crews to assemble components and compose them into more complex apps.'
+  },
 
-  SectionHeader: {},
   content
 }

package/src/pages/MediaQuery/lists.js

@@ -116,7 +116,7 @@ const screenIconText = {
   })
 }
 
-const MediaValuesRow = {
+const MediaQueryRow = {
   extend: Flex,
   props: {
     gap: 'D',
@@ -198,11 +198,11 @@ const MediaValuesRow = {
   }
 }
 
-export const mediaValuesList = {
+export const mediaQueryList = {
   state: BREAKPOINTS_DATA,
   props: listProps,
 
-  childExtend: MediaValuesRow,
+  childExtend: MediaQueryRow,
   $setStateCollection: ({ state }) => state.data
 }
 

package/src/pages/Spaces/SpacingScale.js

@@ -32,6 +32,7 @@ export const SpacingScale = {
   scale: {
     extend: Flex,
     props: {
+      lazyLoad: true,
       flow: 'column',
       gap: 'B1',
       margin: '0 0 C2',

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,6 +97,12 @@ 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,
@@ -105,6 +116,8 @@ export default {
     props: ({ key, state, parent }) => ({
       active: state.parent.parent.props[state.value] === state.parent.key,
       icon: { name: state.value },
+      lazyLoad: true,
+
       '.active': {
         color: 'blue',
         ':hover': {
@@ -117,6 +130,7 @@ export default {
       extend: Dropdown,
 
       props: {
+        lazyLoad: true,
         minWidth: 'none',
         grid: { gap: '0' }
       },
@@ -126,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)'
             }
           }
@@ -152,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
@@ -185,7 +201,7 @@ export default {
           }
         },
 
-        $setStateCollection: ({ state }) => Object.keys(BUTTONS[state.value])
+        $setStateCollection: ({ state, props }) => cachedKeys(state)
       }
     },
 
@@ -202,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 } })
+          }
         }
       },
 
@@ -245,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
+  })
 }