@symbo.ls/preview 0.0.45 → 0.0.47

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@domql/router": "latest",
-    "@domql/tags": "^2.2.1",
+    "@domql/tags": "latest",
     "@symbo.ls/components": "latest",
     "@symbo.ls/config": "latest",
     "@symbo.ls/icons": "latest",

package/src/pages/MediaQuery/index.js

@@ -1,12 +1,45 @@
 'use strict'
 
-import state from './state'
+import { Flex } from '@symbo.ls/components'
 
-export const MediaQuery = {
-  state,
+import { mediaValuesList, screenSizingList } from './lists'
+
+const content = {
+  extend: Flex,
+  childExtend: {
+    props: {
+      heading: {
+        color: 'white',
+        padding: '0 0 A1 Z1',
+        fontWeight: '700'
+      }
+    }
+  },
 
+  ...[{
+    heading: { props: { text: 'Media Value' } },
+    mediaValuesList
+  }, {
+    heading: { props: { text: 'Screen Sizing Sheet' } },
+    screenSizingList
+  }]
+}
+
+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'
   }
 }
+
+export const MediaQuery = {
+  props,
+
+  SectionHeader: {},
+  content
+}

package/src/pages/MediaQuery/lists.js

@@ -0,0 +1,312 @@
+'use strict'
+
+import { IconText, Flex, SquareButton, Grid, Select, Input } from '@symbo.ls/components'
+import style from '@symbo.ls/components/src/UserAccount/style'
+import { state } from '@symbo.ls/icons'
+import { BREAKPOINTS_DATA, DEVICE_SIZE_DATA } from './state'
+
+const stateCom = {
+  activeScreen: false
+}
+
+const listProps = {
+  background: 'gray1',
+  round: 'A',
+  fontSize: 'Z1',
+  style: { overflow: 'hidden' }
+  // padding: '- - - A'
+  // border: '2px solid red'
+}
+
+const valueItemProps = {
+  height: 'B',
+  theme: 'quaternary',
+  round: 'Y',
+  align: 'center center',
+  minWidth: 'C2'
+}
+
+const MEDIA_TYPES = [{
+  text: 'min-width',
+  value: 'minWidth'
+}, {
+  text: 'max-width',
+  value: 'maxWidth'
+}, {
+  text: 'min-height',
+  value: 'minHeight'
+}, {
+  text: 'max-height',
+  value: 'maxHeight'
+}, {
+  text: 'exact',
+  value: 'exact'
+}]
+
+const BreakpointItem = {
+  extend: Flex,
+  state: stateCom,
+  props: {
+    gap: 'X',
+    alignItems: 'center'
+  },
+
+  childExtend: {
+    extend: Flex,
+    props: valueItemProps
+  },
+
+  container: {
+    props: {
+      padding: '0 X2',
+      background: 'gray1'
+    },
+    property: {
+      extend: Select,
+      props: ({ state }) => ({
+        background: 'transparent',
+        color: 'white'
+      }),
+
+      // on: {
+      //   click: (event, element, state) => {
+      //     state.offers
+      //       ? state.update({ offers: false })
+      //       : state.update({ offers: true })
+      //   }
+      // }
+
+      on: {
+        change: (ev, el, s) => {
+          s.update({ value: el.node.value })
+        }
+      },
+      $setCollection: () => MEDIA_TYPES.map(props => ({ props }))
+    }
+  },
+
+  value: {
+    extend: Input,
+    props: ({ state }) => ({
+      placeholder: state.placeholder,
+      round: 'Y',
+      maxWidth: 'C2',
+      padding: '0',
+      style: { textAlign: 'center' }
+    })
+  },
+  value2: {
+    extend: Input,
+    props: ({ state }) => ({
+      hide: state.value !== 'exact',
+      // value: state.value,
+      placeholder: '728px',
+      round: 'Y',
+      maxWidth: 'C1',
+      padding: '0',
+      textAlign: 'center'
+    })
+  }
+}
+
+const screenIconText = {
+  extend: [IconText, Flex],
+  props: ({ state }) => ({
+    text: state.name,
+    gap: 'Z1',
+    align: 'center flex-start',
+    whiteSpace: 'nowrap',
+    icon: {
+      name: state.icon,
+      opacity: '.5'
+    }
+  })
+}
+
+const MediaValuesRow = {
+  extend: Flex,
+  props: {
+    gap: 'D',
+    align: 'center',
+    minHeight: 'C2',
+    padding: '- - - A',
+    childProps: { minWidth: 'E' },
+    ':not(:last-child)': {
+      border: 'dashed, white 0.05',
+      borderWidth: '0 0 1.5px'
+    },
+    ':hover': {
+      background: 'gray2',
+      cursor: 'pointer'
+    },
+    ':hover > div > button': { opacity: 1 }
+  },
+
+  screen: { extend: screenIconText },
+
+  columnBreakPoints: {
+    extend: Flex,
+    props: { gap: 'A2' },
+    childExtend: BreakpointItem,
+    $setStateCollection: ({ state }) => state.breakpoints
+  },
+
+  plusButtonContainer: {
+    // props: { style: { border: '2px solid red' } },
+    button: {
+      extend: SquareButton,
+      props: {
+        style: {
+          border: '1px solid rgba(255, 255, 255, .1)'
+        },
+
+        icon: { name: 'plus' },
+        padding: 'X2',
+        round: '100%',
+        border: 'solid, gray4',
+        borderWidth: '1px',
+        color: 'gray6',
+        background: 'transparent'
+      },
+
+      on: {
+        click: (ev, el, s) => {
+          const length = Object.keys(s.breakpoints).length
+          if (!s.breakpoints || length > 2) return
+          s.update({
+            breakpoints: { [length]: {} }
+          })
+        }
+      }
+    }
+  },
+
+  hoverButtons: {
+    extend: Flex,
+    props: {
+      margin: '- - - auto'
+    },
+    childExtend: {
+      extend: SquareButton,
+      props: {
+        background: 'transparent',
+        color: 'gray5',
+        style: { opacity: '0' }
+      }
+    },
+    ...[
+      { props: { icon: 'eyeOpen' } },
+      { props: { icon: 'arrowAngleMirroringHorizontal' } },
+      {
+        props: { icon: 'trashAlt' },
+        on: {
+          click: (event, element, state) => {
+            const { key } = element.parent.parent
+            state.parent.update({
+              data: {
+                [key]: { name: 'asd' }
+              }
+            })
+          }
+        }
+      }
+    ]
+  }
+}
+
+export const mediaValuesList = {
+  state: BREAKPOINTS_DATA,
+  props: {
+    ...listProps,
+    minWidth: 'I2'
+  },
+
+  childExtend: MediaValuesRow,
+  $setStateCollection: ({ state }) => state.data
+}
+
+const DefaultScreensRow = {
+  extend: Flex,
+  state: stateCom,
+  // state: MEDIA_TYPES,
+  class: {
+    show: (element, state) => state.activeScreen
+      ? { opacity: 1 } : { opacity: 0.45 }
+  },
+  props: ({ el, state }) => ({
+    // if () {},
+    // hide: state.value !== 'exact' ? el.update({ style: { opacity: '.3' } }) : 'center',
+    // hide: state.value !== 'exact',
+    // text.
+
+    minHeight: 'C2',
+    padding: '- A - A',
+    gap: 'C',
+    ':not(:last-child)': {
+      border: 'solid, white .05',
+      borderWidth: '0 0 1px'
+    }
+  }),
+  // class: {
+  //   show: (element, state) => MEDIA_TYPES.value === 'match'
+  //     ? { opacity: 0 } : { opacity: 1 }
+  // },
+  // props: {
+
+  //   // on: {
+  //   //   click: (event, element, state) => {
+  //   //     state.offers
+  //   //       ? state.update({ offers: false })
+  //   //       : state.update({ offers: true })
+  //   //   }
+  //   // }
+  // },
+  // on: {
+  //   change: (ev, el, s) => {
+  //     s.update({ value: el.node.value })
+  //     s.stateCom.update({ activeScreen: true })
+  //   }
+  //   // click: (ev, el, s) => {
+  //   //   s.update({ activeScreen: true })
+  //   // }
+  // },
+
+  screen: { extend: screenIconText, style: { minWidth: '150px' } },
+  values: {
+    extend: Flex,
+    props: {
+      // minWidth: '100px',
+      alignItems: 'center',
+      gap: 'X1'
+      // maxWidth: 'fit-content',
+      // border: '2px solid green'
+    },
+
+    valueX: {
+      extend: Flex,
+      props: valueItemProps,
+      text: ({ state }) => state.xValue
+    },
+    x: { props: { text: 'x' } },
+    valueY: {
+      extend: Flex,
+      props: valueItemProps,
+      text: ({ state }) => state.yValue
+    }
+  }
+}
+
+export const screenSizingList = {
+  state: DEVICE_SIZE_DATA,
+  props: {
+    ...listProps,
+    minWidth: '300px'
+
+    // padding: 'A 0 A A'
+    // border: '2px solid yellow'
+  },
+
+  childExtend: DefaultScreensRow,
+
+  $setStateCollection: ({ state }) => state.data
+}

package/src/pages/MediaQuery/state.js

@@ -1,5 +1,150 @@
 'use strict'
 
-export default {
-  //
+export const BREAKPOINTS_DATA = {
+  data: [{
+    icon: 'deviceBigScreenOutline',
+    name: 'iMac',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '2780',
+      placeholder: '2780'
+    }]
+  }, {
+    icon: 'deviceSmallScreenOutline',
+    name: 'screenLg',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '1920',
+      placeholder: '1920'
+    }]
+  }, {
+    icon: 'deviceSmallScreenOutline',
+    name: 'screebMd',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '1680',
+      placeholder: '1680'
+    }]
+  }, {
+    icon: 'deviceSmallScreenOutline',
+    name: 'screebSm',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '1440',
+      placeholder: '1440'
+    }]
+  }, {
+    icon: 'deviceTabletLandscapeOutline',
+    name: 'tabletLg',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '1366',
+      placeholder: '1440'
+    }]
+  }, {
+    icon: 'deviceTabletLandscapeOutline',
+    name: 'tabletMd',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '280',
+      placeholder: '1440'
+    }]
+  }, {
+    icon: 'deviceTabletLandscapeOutline',
+    name: 'tabletSm',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '1024',
+      placeholder: '1440'
+    }]
+  }, {
+    icon: 'deviceMobileOutline',
+    name: 'mobileLg',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '768',
+      value2: '657',
+      placeholder: '768'
+    }]
+  }, {
+    icon: 'deviceMobileOutline',
+    name: 'mobileMd',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '560',
+      placeholder: '560'
+    }]
+  }, {
+    icon: 'deviceMobileOutline',
+    name: 'mobileSm',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '480',
+      placeholder: '480'
+    }]
+
+  }, {
+    icon: 'deviceMobileOutline',
+    name: 'mobileXs',
+    breakpoints: [{
+      type: 'minWidth',
+      value: '375',
+      placeholder: '375'
+    }]
+
+  }]
+}
+
+export const DEVICE_SIZE_DATA = {
+  data: [{
+    icon: 'deviceBigScreenOutline',
+    name: 'Apple XDR',
+    xValue: '3008',
+    yValue: '1692'
+  }, {
+    icon: 'deviceBigScreenOutline',
+    name: `iMac 27''`,
+    xValue: '2560',
+    yValue: '1440'
+  }, {
+    icon: 'deviceBigScreenOutline',
+    name: `iMac 24''`,
+    xValue: '2240',
+    yValue: '1260'
+  }, {
+    icon: 'deviceBigScreenOutline',
+    name: 'Full HD',
+    xValue: '1920',
+    yValue: '1080'
+  }, {
+    icon: 'deviceSmallScreenOutline',
+    name: `MacBook Pro 16''`,
+    xValue: '1728',
+    yValue: '1117'
+  }, {
+    icon: 'deviceSmallScreenOutline',
+    name: `MacBook Pro 14''`,
+    xValue: '1512',
+    yValue: '982'
+  }, {
+    icon: 'deviceSmallScreenOutline',
+    name: `MacBook Pro 13''`,
+    xValue: '1470',
+    yValue: '956'
+  }, {
+    icon: 'deviceTabletLandscapeOutline',
+    name: `iPad Pro 12.9''`,
+    xValue: '1024',
+    yValue: '1366'
+  }, {
+    icon: 'deviceTabletLandscapeOutline',
+    name: `iPad Air 10.9''`,
+    xValue: '820',
+    yValue: '1180'
+  }, {
+    icon: 'deviceTabletLandscapeOutline',
+    name: `iPad Mini 8.3''`,
+    xValue: '744',
+    yValue: '1133'
+  }]
 }

package/src/pages/Spaces/SpacingScale.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/components'
+import { Code, Flex } from '@symbo.ls/components'
 import { Preview } from './Preview'
 import { Table } from './Table'
 
@@ -59,21 +59,24 @@ export const SpacingScale = {
           backdropFilter: 'blur(15px)'
         }
       },
-      scene: {
-        extend: Preview
-      },
+
+      scene: { extend: Preview },
       code: {
-        extend: 'Code',
+        extend: Code,
         props: ({ state }) => ({
           hide: Object.keys(state.props).length === 0,
           flex: '0 0 360px',
           margin: '0',
-          code: { margin: '0' },
+          code: {
+            margin: '0'
+          },
           buttons: { marginInline: 'X2' }
         }),
         title: null,
         code: {
-          text: ({ state }) => JSON.stringify(state.props, null, 2)
+          props: {
+            text: ({ state }) => 'const props = ' + JSON.stringify(state.props, null, 2)
+          }
         }
       }
     }

package/src/pages/Spaces/Table.js

@@ -21,7 +21,7 @@ const Row = {
   key: state => state.key,
 
   props: ({ state }) => ({
-    columns: '10ch 14ch 13ch 10ch 21em 1fr',
+    columns: '7ch 20em 14ch 12ch 12ch 1fr',
     alignItems: 'center',
     isBase: state.index === 0,
     active: (state.key && state.key.length) === 1,
@@ -92,10 +92,10 @@ const Row = {
   childExtend: Cell,
 
   i: {},
+  buttons,
   em: {},
   decimal: {},
   px: {},
-  buttons,
 
   graph: { line: {} }
 }
@@ -111,10 +111,10 @@ const HeaderRow = {
   },
 
   i: '#',
+  buttons: ' ',
   em: 'em',
   decimal: 'decimal',
   px: 'px',
-  buttons: null,
   graph: null
 }
 
@@ -158,6 +158,7 @@ export const Table = {
 
   cnt: {
     childExtend: Row,
+    props: { lazyLoad: true },
     $setStateCollection: (el) => mapSequence(el.state, sortSequence)
   }
 }

package/src/pages/Spaces/buttons.js

@@ -127,6 +127,7 @@ export default {
             }
           }
           return {
+            lazyLoad: true,
             columns: 'auto 32px auto',
             rows: 'auto 32px auto',
             templateAreas: `"endStart blockStart startEnd"
@@ -184,6 +185,7 @@ export default {
 
     click: {
       props: {
+        lazyLoad: true,
         position: 'absolute',
         inset: '0 0 0 0'
       },
@@ -194,17 +196,20 @@ export default {
           const tableState = rowState.parent
           const propKey = state.value
           const active = tableState.props[propKey] === rowState.key
-          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 } })
-          }
+          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)
+          })
         }
       },
 

package/src/pages/Typography/fontFaces.js

@@ -17,7 +17,6 @@ const mapFonts = (el, s) => {
     return {
       title: v,
       href: `/typography/font-settings/${v}`,
-      scrollToTop: false,
       labels: [
         { icon: 'fontVariable', text: fontWeightCaption }
       ]

package/src/pages/Typography/fontFamilies.js

@@ -14,7 +14,6 @@ const mapFontFamilies = (el, s) => {
     return {
       title: v,
       href: `/typography/font-family/${v}`,
-      scrollToTop: false,
       val
     }
   }).filter(v => v)