@symbo.ls/preview 0.0.48 → 0.0.50

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.50",
   "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

@@ -24,7 +24,8 @@ const ChoosableButton = {
       color: 'gray7'
     },
     ':hover': {
-      theme: 'quaternary'
+      theme: 'quaternary',
+      '.active': { color: 'blue' }
     },
     '.active': {
       theme: null
@@ -55,6 +56,7 @@ const diffIconTypes = (parentKey, key) => {
 
 const BUTTONS = {
   margin: {
+    maxValue: 3000,
     blockStart: {},
     inlineEnd: {},
     blockEnd: {},
@@ -69,22 +71,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 +98,10 @@ const BUTTONS = {
   }
 }
 
+const cachedKeys = state => {
+  return Object.keys(BUTTONS[state.value]).filter(v => v !== 'maxValue')
+}
+
 export default {
   props: {
     lazyLoad: true,
@@ -103,8 +113,10 @@ export default {
     extend: [ChoosableButton, DropdownParent, WiderButton],
 
     props: ({ key, state, parent }) => ({
+      lazyLoad: true,
       active: state.parent.parent.props[state.value] === state.parent.key,
       icon: { name: state.value },
+
       '.active': {
         color: 'blue',
         ':hover': {
@@ -117,6 +129,7 @@ export default {
       extend: Dropdown,
 
       props: {
+        lazyLoad: true,
         minWidth: 'none',
         grid: { gap: '0' }
       },
@@ -126,9 +139,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,19 +166,23 @@ export default {
             const iconKey = diffIconTypes(propState.value, state.value)
             const active = tableState.props[propKey] === rowState.key
             return {
+              lazyLoad: true,
               active,
-              icon: {
-                name: iconKey
-              },
+              icon: { name: iconKey },
               gridArea: keys.length > 3 && diffPropPosition(propState.value, state.value),
               theme: null,
-              background: 'transparent 0',
-              '.active': {
-                theme: null,
-                color: 'blue',
+              '@dark': {
+                background: 'transparent 0',
+                color: 'gray7',
                 ':hover': {
-                  color: 'blue'
+                  theme: 'quinary',
+                  color: 'gray8'
                 }
+              },
+              ':hover': null,
+              '.active': {
+                theme: null,
+                color: 'blue'
               }
             }
           },
@@ -185,7 +203,7 @@ export default {
           }
         },
 
-        $setStateCollection: ({ state }) => Object.keys(BUTTONS[state.value])
+        $setStateCollection: ({ state, props }) => cachedKeys(state)
       }
     },
 
@@ -202,20 +220,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 } })
+          }
         }
       },
 
@@ -228,6 +246,9 @@ export default {
           const tableState = rowState.parent
           const propKey = diffPropValue(propState.value, state.value)
           const active = tableState.props[propKey] === rowState.key
+
+          const isRadius = propState.value === 'borderRadius'
+
           return {
             position: 'absolute',
             round: '100%',
@@ -236,18 +257,34 @@ export default {
             lazyLoad: true,
 
             hide: !active,
+            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%' }
+            '!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%' }
+            },
+
+            '.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' }
+            }
           }
         }
       },
 
-      $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/Spaces/index.js

@@ -19,7 +19,3 @@ export const Spaces = {
 
   scale: SpacingScale
 }
-
-// preview,
-// sequence,
-// boxModel