@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/MediaQuery/state.js

@@ -0,0 +1,150 @@
+'use strict'
+
+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/MediaQuery/typeScale.js

@@ -0,0 +1,69 @@
+'use strict'
+
+import {
+  TestText,
+  Flex
+} from '@symbo.ls/components'
+
+export default {
+  extend: Flex,
+
+  props: {
+    gap: 'D',
+    align: 'flex-start flex-start',
+
+    sidebar: {
+      padding: 'B 0 0',
+      widthRange: 'F2',
+      position: 'sticky',
+      top: 'E'
+    },
+
+    content: {
+      overflow: 'hidden',
+      flex: '1',
+      flow: 'column',
+      gap: 'C',
+
+      header: {
+        align: 'flex-end space-between',
+        padding: '0 0 0 C',
+        gap: 'C1'
+      },
+
+      footer: {
+        padding: '0 0 0 C'
+      }
+    }
+  },
+
+  sidebar: {
+    SectionHeader: {
+      title: 'TypeScale',
+      p: 'Generate text sequence by a base size and ratio'
+    },
+
+    SequenceSliders: {
+      flow: 'column'
+    },
+
+    Paragraph: {
+      margin: '0',
+      fontSize: 'Z2',
+      padding: 'B2 0',
+      text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
+    }
+  },
+
+  content: {
+    extend: Flex,
+
+    header: {
+      extend: Flex,
+      TestText
+    },
+
+    sequence: {
+    }
+  }
+}

package/src/pages/Shapes/index.js

@@ -1,225 +1,75 @@
 'use strict'
 
-import style, { styleShapeSet } from './style'
+import { Flex } from '@symbo.ls/components'
 
-import { Shape, Link, Block, Text, Flex, SectionHeader, ClickableItem } from '@symbo.ls/all'
-import { PageProto } from '..'
+import {
+  rectangle,
+  circle,
+  toolTip,
+  tagShape,
+  bubble,
+  chevron,
+  tv,
+  hexagon
+} from './shapeSet'
 
-const header = {
-  proto: SectionHeader,
-  props: { padding: 'C 0 B1 0' },
-  heading: {
-    caption: { props: { text: 'HTML Shapes' } },
-    p: { props: { text: 'This is a very basic component that helps you to build up other more complex elements' } }
+export const Shapes = {
+  extend: Flex,
+  props: {
+    flow: 'column'
   },
-  nav: {
-    // ...[{ icon: { name: 'arrowAngleDown' } }]
-  }
-}
 
-const shapeSet = {
-  style: styleShapeSet,
-  label: {
-    proto: [Block, Text],
-    props: {
-      size: 'Y',
-      padding: '0 0 A 0'
-    }
+  state: {
+    props: {}
   },
-  nav: {
-    proto: [Flex, Block],
-    props: { gap: 'Z1' },
-    childProto: {
-      proto: [ClickableItem, Link, Block, Flex, Shape],
-      // props: el => ({ href: `/shapes/${el.key}` }),
-      props: {
-        padding: 'B',
-        round: 'Z'
-      },
-      style: {
-        padding: '1.499em'
-      },
 
-      _shape: {
-        proto: [Shape, Block],
-        props: {
-          theme: 'shape',
-          width: 'C',
-          height: 'C'
-        }
-      }
-    }
-  }
-}
-
-const rectangle = {
-  proto: shapeSet,
-  label: {
-    text: 'Rectangle ',
-    span: 'with rounds'
-  },
-  nav: {
-    style: {
-      '&:hover': {
-        '> div': { background: 'orangered' }
-      }
+  content: {
+    extend: Flex,
+    props: {
+      flow: 'column'
     },
-    ...[
-      {},
-      { _shape: { props: { round: 4 } } },
-      { _shape: { props: { round: 6 } } },
-      { _shape: { props: { round: 10 } } },
-      { _shape: { props: { round: 12 } } },
-      { _shape: { props: { round: 16 } } },
-      { _shape: { props: { round: 26 } } }
-    ]
-  }
-}
 
-const circle = {
-  proto: shapeSet,
-  label: { text: 'Circle' },
-  nav: {
-    style: {
-      '&:hover': {
-        '> div': { background: '#1ad3e8' }
-      }
-    },
-    ...[
-      {
-        _shape: { props: { shape: 'circle' } }
-      }
-    ]
-  }
-}
-
-const toolTip = {
-  proto: shapeSet,
-  label: { text: 'Tooltip' },
-  nav: {
-    style: {
-      '&:hover': {
-        '> div': {
-          background: '#8f1ae8',
-          '&::before': { borderColor: '#8f1ae8' }
-        }
-      }
-    },
-    childProto: {
-      childProto: {
-        proto: Shape,
-        props: {
-          round: 'Y1'
+    childExtend: {
+      extend: Flex,
+      props: {
+        gap: 'A2',
+        flow: 'column',
+        SectionHeader: {
+          margin: '- - A2'
+        },
+        section: {
+          flow: 'row wrap',
+          gap: 'A2'
         }
-      }
+      },
+      section: { extend: Flex }
     },
-    ...[
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'left' } } },
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top' } } },
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'right' } } },
-      { _shape: { props: { shape: 'tooltip', shapeDirection: 'bottom' } } }
-    ]
-  }
-}
 
-const tagShape = {
-  proto: shapeSet,
-  label: { text: 'Tag' },
-  nav: {
-    style: {
-      'a > div:hover': {
-        '> div': {
-          background: '#59AC56',
-          '&::before': { borderColor: '#59AC56' }
-        }
-      }
-    },
-    childProto: {
-      childProto: {
-        proto: Shape,
-        props: { round: 6 }
-      }
-    },
-    ...[
-      { _shape: { props: { shape: 'tag', shapeDirection: 'left' } } },
-      { _shape: { props: { shape: 'tag', shapeDirection: 'top' } } },
-      { _shape: { props: { shape: 'tag', shapeDirection: 'right' } } },
-      { _shape: { props: { shape: 'tag', shapeDirection: 'bottom' } } }
-    ]
-  }
-}
+    htmlShapes: {
+      SectionHeader: {
+        title: 'HTML Shapes',
+        p: 'All ungrouped document icons'
+      },
 
-const bubble = {
-  proto: shapeSet,
-  label: { text: 'Bubble' },
-  nav: {
-    style: {
-      '> div': { background: 'white' }
-    },
-    childProto: {
-      childProto: {
-        proto: Shape
+      section: {
+        rectangle,
+        circle,
+        toolTip,
+        tagShape,
+        bubble,
+        tv,
+        chevron,
+        hexagon
       }
     },
-    ...[
-      {
-        _shape: {
-          class: {
-            radius: {
-              borderRadius: '8px 1.618em 1.618em 8px'
-            }
-          }
-        }
-      }, {
-        _shape: {
-          class: {
-            radius: {
-              borderRadius: '1.618em 8px 8px 1.618em'
-            }
-          }
-        }
-      },
-      {
-        _shape: {
-          class: {
-            radius: {
-              borderRadius: '8px 8px 1.618em 1.618em'
-            }
-          }
-        }
-      },
-      {
-        _shape: {
-          class: {
-            radius: {
-              borderRadius: '1.618em 1.618em 8px 8px'
-            }
-          }
-        }
-      },
-      { _shape: { class: { radius: { borderRadius: '1.618em 8px 8px 8px' } } } },
-      { _shape: { class: { radius: { borderRadius: '8px 1.618em 8px 8px' } } } },
-      { _shape: { class: { radius: { borderRadius: '8px 8px 1.618em 8px' } } } },
-      { _shape: { class: { radius: { borderRadius: '8px 8px 8px 1.618em' } } } }
-    ]
-  }
-}
-
-export default {
-  style,
 
-  proto: PageProto,
+    Line: {},
 
-  htmlShapes: {
-
-    header,
-
-    section: {
-      rectangle,
-      circle,
-      toolTip,
-      tagShape,
-      bubble
+    svgShapes: {
+      SectionHeader: {
+        title: 'SVG Shapes',
+        p: 'TBA'
+      }
     }
   }
 }

package/src/pages/Shapes/shapeSet.js

@@ -0,0 +1,133 @@
+'use strict'
+
+import { ShapeSet } from '../../components'
+
+export const rectangle = {
+  extend: ShapeSet,
+  label: {
+    text: 'Rectangle ',
+    span: 'with rounds'
+  },
+  list: {
+    $setStateCollection: () => [
+      { borderRadius: '0' },
+      { borderRadius: 'X' },
+      { borderRadius: 'Y' },
+      { borderRadius: 'Z' },
+      { borderRadius: 'A' },
+      { borderRadius: 'B' },
+      { borderRadius: 'C' }
+    ]
+  }
+}
+
+export const circle = {
+  extend: ShapeSet,
+  label: { text: 'Circle' },
+  list: {
+    $setStateCollection: () => [
+      { shape: 'circle' }
+    ]
+  }
+}
+
+export const toolTip = {
+  extend: ShapeSet,
+  label: { text: 'Tooltip' },
+  list: {
+    childExtend: {
+      props: {
+        childProps: { borderRadius: 'Y1' }
+      }
+    },
+
+    $setStateCollection: () => [
+      { shape: 'tooltip', shapeDirection: 'top' },
+      { shape: 'tooltip', shapeDirection: 'right' },
+      { shape: 'tooltip', shapeDirection: 'bottom' },
+      { shape: 'tooltip', shapeDirection: 'left' }
+    ]
+  }
+}
+
+export const tagShape = {
+  extend: ShapeSet,
+  label: { text: 'Tag' },
+  list: {
+    childExtend: {
+      props: {
+        padding: 'B C2+W',
+        childProps: { borderRadius: 6 }
+      }
+    },
+    $setStateCollection: () => [
+      { shape: 'tag', shapeDirection: 'left' },
+      { shape: 'tag', shapeDirection: 'right' }
+    ]
+  }
+}
+
+export const bubble = {
+  extend: ShapeSet,
+  label: { text: 'Bubble' },
+
+  list: {
+    $setStateCollection: () => [
+      { borderRadius: 'X B B X' },
+      { borderRadius: 'B X X B' },
+      { borderRadius: 'X X B B' },
+      { borderRadius: 'B B X X' },
+      { borderRadius: 'B X X X' },
+      { borderRadius: 'X B X X' },
+      { borderRadius: 'X X B X' },
+      { borderRadius: 'X X X B' }
+    ]
+  }
+}
+
+export const chevron = {
+  extend: ShapeSet,
+  label: { text: 'Chevron' },
+  list: {
+    childExtend: {
+      props: {
+        padding: 'B C2+W'
+      }
+    },
+    $setStateCollection: () => [
+      { shape: 'chevron', shapeDirection: 'left' },
+      { shape: 'chevron', shapeDirection: 'right' }
+    ]
+  }
+}
+
+export const tv = {
+  extend: ShapeSet,
+  label: { text: 'TV' },
+  list: {
+    childExtend: {
+      props: {
+        padding: 'B B2',
+        childProps: { minWidth: 'D' }
+      }
+    },
+    $setStateCollection: () => [
+      { shape: 'tv' }
+    ]
+  }
+}
+
+export const hexagon = {
+  extend: ShapeSet,
+  label: { text: 'Hexagon' },
+  list: {
+    childExtend: {
+      props: {
+        padding: 'B C2+W'
+      }
+    },
+    $setStateCollection: () => [
+      { shape: 'hexagon' }
+    ]
+  }
+}

package/src/pages/Shapes/style.js

@@ -1,24 +1,6 @@
 'use strict'
 
-export const styleShapeSet = {
-  label: {
-    display: 'block',
-    opacity: '.65',
-    span: { opacity: '.2' }
-  },
-  nav: {
-    flexWrap: 'wrap',
-    a: {
-      cursor: 'pointer',
-      background: 'rgba(255, 255, 255, .05)',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }
-}
-
 export const styleUploadSVG = {
-
   div: {
     background: 'rgba(255, 255, 255, .05)',
     display: 'flex',
@@ -27,13 +9,3 @@ export const styleUploadSVG = {
 
   input: { display: 'none' }
 }
-
-export default {
-  flex: 1,
-
-  section: {
-    display: 'flex',
-    gap: '1em',
-    flexWrap: 'wrap'
-  }
-}