@symbo.ls/preview 0.0.97 → 2.0.7

package/src/pages/Library/style.js

@@ -0,0 +1,43 @@
+'use strict'
+
+export const grid = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(12, 1fr)',
+  gridAutoFlow: 'dense',
+  justifyItems: 'stretch',
+  boxSizing: 'border-box',
+  marginBottom: '2em',
+  gap: '1em',
+  gridAutoColumns: 'auto',
+  gridAutoRows: 'auto',
+
+  '@media only screen and (min-width: 1680px)': {
+    gridTemplateColumns: 'repeat(12, 1fr)'
+  }
+}
+
+export const styleFamilyBundle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '50em',
+  '> div': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  img: {
+    width: '32px',
+    height: '32px'
+  },
+  button: {
+    '&:first-child': {
+      marginRight: '8px'
+    }
+  }
+}
+
+export default {
+  '> header': {
+    marginBottom: '1em'
+  }
+}

package/src/pages/PageProto.js

@@ -0,0 +1,26 @@
+'use strict'
+
+import { Block } from '@symbo.ls/all'
+
+export default {
+  tag: 'main',
+  proto: Block,
+
+  // props: el => el.parent.props,
+
+  class: {
+    page: {
+      width: '100%',
+      margin: '0 auto',
+      boxSizing: 'border-box',
+      maxWidth: `${1280 / 16}em`,
+      '@media only screen and (min-width: 1680px)': {
+        maxWidth: '102em'
+      },
+
+      '@media only screen and (min-width: 1920px)': {
+        fontSize: `${17 / 16}em`
+      }
+    }
+  }
+}

package/src/pages/Shapes/index.js

@@ -1,75 +1,225 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/components'
+import style, { styleShapeSet } from './style'
 
-import {
-  rectangle,
-  circle,
-  toolTip,
-  tagShape,
-  bubble,
-  chevron,
-  tv,
-  hexagon
-} from './shapeSet'
+import { Shape, Link, Block, Text, Flex, SectionHeader, ClickableItem } from '@symbo.ls/all'
+import { PageProto } from '..'
 
-export const Shapes = {
-  extend: Flex,
-  props: {
-    flow: 'column'
+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' } }
   },
+  nav: {
+    // ...[{ icon: { name: 'arrowAngleDown' } }]
+  }
+}
 
-  state: {
-    props: {}
+const shapeSet = {
+  style: styleShapeSet,
+  label: {
+    proto: [Block, Text],
+    props: {
+      size: 'Y',
+      padding: '0 0 A 0'
+    }
   },
+  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'
+      },
 
-  content: {
-    extend: Flex,
-    props: {
-      flow: 'column'
+      _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' }
+      }
     },
+    ...[
+      {},
+      { _shape: { props: { round: 4 } } },
+      { _shape: { props: { round: 6 } } },
+      { _shape: { props: { round: 10 } } },
+      { _shape: { props: { round: 12 } } },
+      { _shape: { props: { round: 16 } } },
+      { _shape: { props: { round: 26 } } }
+    ]
+  }
+}
 
-    childExtend: {
-      extend: Flex,
-      props: {
-        gap: 'A2',
-        flow: 'column',
-        SectionHeader: {
-          margin: '- - A2'
-        },
-        section: {
-          flow: 'row wrap',
-          gap: 'A2'
+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' }
         }
-      },
-      section: { extend: Flex }
+      }
     },
+    childProto: {
+      childProto: {
+        proto: Shape,
+        props: {
+          round: 'Y1'
+        }
+      }
+    },
+    ...[
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'left' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'right' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'bottom' } } }
+    ]
+  }
+}
 
-    htmlShapes: {
-      SectionHeader: {
-        title: 'HTML Shapes',
-        p: 'All ungrouped document icons'
-      },
+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' } } }
+    ]
+  }
+}
 
-      section: {
-        rectangle,
-        circle,
-        toolTip,
-        tagShape,
-        bubble,
-        tv,
-        chevron,
-        hexagon
+const bubble = {
+  proto: shapeSet,
+  label: { text: 'Bubble' },
+  nav: {
+    style: {
+      '> div': { background: 'white' }
+    },
+    childProto: {
+      childProto: {
+        proto: Shape
       }
     },
+    ...[
+      {
+        _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' } } } }
+    ]
+  }
+}
 
-    Line: {},
+export default {
+  style,
 
-    svgShapes: {
-      SectionHeader: {
-        title: 'SVG Shapes',
-        p: 'TBA'
-      }
+  proto: PageProto,
+
+  htmlShapes: {
+
+    header,
+
+    section: {
+      rectangle,
+      circle,
+      toolTip,
+      tagShape,
+      bubble
     }
   }
 }

package/src/pages/Shapes/style.js

@@ -1,6 +1,24 @@
 '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',
@@ -9,3 +27,13 @@ export const styleUploadSVG = {
 
   input: { display: 'none' }
 }
+
+export default {
+  flex: 1,
+
+  section: {
+    display: 'flex',
+    gap: '1em',
+    flexWrap: 'wrap'
+  }
+}

package/src/pages/Spaces/boxModel.js

@@ -0,0 +1,3 @@
+'use strict'
+
+export default {}

package/src/pages/Spaces/index.js

@@ -1,37 +1,61 @@
 'use strict'
 
+import style from './style'
+
+import { Link, TabHeader } from '@symbo.ls/all'
+import { PageProto } from '..'
+
+import preview from './preview'
 import sequence from './sequence'
-import { state } from './state'
+import boxModel from './boxModel'
 
-export const Spaces = {
-  state,
+export default {
+  style,
+  key: 'spaces',
 
-  SectionHeader: {
-    margin: '0 0 C',
-    title: 'Spacing',
-    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
-  },
+  proto: PageProto,
 
-  SlidersWithResponsive: {},
+  state: {
+    activePage: 'spaces',
+    activeTab: 'preview'
+  },
 
-  Line: {},
+  define: { routes: param => param },
 
-  sequence,
+  routes: {
+    preview,
+    sequence,
+    boxModel
+  },
 
   on: {
     init: (el, s) => {
-      if (!s.__system.SPACING) {
-        s.systemUpdate({
-          SPACING: { base: s.base, ratio: s.ratio }
-        }, { preventUpdate: true })
-      }
+      var route = window.location.pathname
+      var routes = route.slice(1).split('/')
+      s.activeTab = routes[1] || s.activeTab
+    }
+  },
+
+  header: {
+    proto: TabHeader,
+    style: {
+      margin: `${42 / 16}em -2em 2em -2em`,
+      paddingLeft: '2em'
     },
-    stateUpdated: (el, s, changes) => {
-      s.systemUpdate({
-        SPACING: { base: s.base, ratio: s.ratio }
-      }, {
-        preventUpdate: true
-      })
+    tabs: {
+      childProto: {
+        proto: [Link]
+      },
+
+      preview: { props: { text: 'Spacing Preview' } }
+      // sequence: { props: { text: 'Sequence' } },
+      // boxModel: { props: { text: 'Box Model' } }
     }
-  }
+  },
+
+  preview
+
+  // page: {
+  //   content: (el, s) => ({ proto: el.parent.routes[s.activeTab] })
+  // }
 }

package/{.legacy → src/pages/Spaces}/preview.js

@@ -2,10 +2,10 @@
 
 import { stylePreview, styleScene } from './style'
 
-import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, RangeFieldWithCaption, SelectFieldWithCaption } from '@symbo.ls/components'
+import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, SliderToolWithCaption, SelectToolWithCaption } from '@symbo.ls/all'
 
 const buttonDownload = {
-  extend: Button,
+  proto: Button,
   state: {},
   style: {
     svg: { marginRight: `${6 / 16}em` }
@@ -25,19 +25,19 @@ export default {
   cnt: {
     aside: {
       tag: 'aside',
-      extend: [ResponsiveToolBar, Flex]
+      proto: [ResponsiveToolBar, Flex]
     },
     nameSequence: {
       style: { marginRight: '5.6em' },
-      childExtend: {
-        extend: CommonField
+      childProto: {
+        proto: CommonField
       },
       ...[
         // {
         //   caption: { text: 'Name the sequence' },
         //   element: {
         //     tag: 'input',
-        //     extend: Shape,
+        //     proto: Shape,
         //     props: { theme: 'quaternary', round: 'Y1' },
         //     attr: (el, s) => ({
         //       autofocus: true
@@ -56,7 +56,7 @@ export default {
         // },
 
         {
-          extend: SelectFieldWithCaption,
+          proto: SelectToolWithCaption,
           style: { marginTop: `${26 / 16}em` },
           caption: { props: { text: 'Used for' } },
           element: {
@@ -73,10 +73,10 @@ export default {
     },
 
     baseSize: {
-      childExtend: CommonField,
+      childProto: CommonField,
       ...[
         {
-          extend: RangeFieldWithCaption,
+          proto: SliderToolWithCaption,
           caption: { text: 'Base size' },
           element: {
             button0: {},
@@ -87,13 +87,13 @@ export default {
           style: { marginTop: `${26 / 16}em` },
           caption: { text: 'Sequence ratio' },
           element: {
-            extend: StaticSpacing
+            proto: StaticSpacing
           }
         }
       ]
     },
     scene: {
-      extend: CommonField,
+      proto: CommonField,
       style: {
         flex: 1,
         marginLeft: `${110 / 16}em`
@@ -101,7 +101,7 @@ export default {
       caption: { text: 'Preview' },
       element: {
         style: styleScene,
-        extend: [Scene, Block],
+        proto: [Scene, Block],
         props: {
           width: 'H2',
           height: 'G'
@@ -115,7 +115,7 @@ export default {
 
   footer: {
     caption: {
-      extend: [Text, Block],
+      proto: [Text, Block],
       props: {
         size: 'Y',
         padding: '0 0 B 0'
@@ -123,7 +123,7 @@ export default {
       text: 'Sizing generated by this setting'
     },
     Sequence: {
-      extend: [SequenceGraph, Block, Text],
+      proto: [SequenceGraph, Block, Text],
       style: { alignItems: 'center' },
       props: {
         size: 'X'

package/src/pages/Spaces/sequence.js

@@ -1,32 +1,3 @@
 'use strict'
 
-import { Flex } from '@symbo.ls/components'
-
-export default {
-  extend: [Flex],
-
-  props: {
-    lazyLoad: true,
-    flow: 'column',
-    gap: 'C1'
-  },
-
-  SectionHeader: {
-    title: 'Sequence',
-    p: 'Spacing scale is a set of values that are used to define the padding, margin, gap and width of components.',
-    margin: '0'
-  },
-
-  Flex: {
-    props: {
-      lazyLoad: true,
-      flow: 'column',
-      gap: 'B1',
-
-      table: { flex: 1 },
-      preview: { flex: 1 }
-    },
-
-    SpacingTable: {}
-  }
-}
+export default {}

package/src/pages/Spaces/state.js

@@ -1,16 +1,18 @@
 'use strict'
 
-import { SPACING } from '@symbo.ls/scratch'
+import { SPACING } from '@symbo.ls/all'
+import { TYPOGRAPHY_SEQUENCE } from '../Export/const'
 
-export const state = {
-  base: SPACING.base,
-  ratio: SPACING.ratio,
-  subSequence: true,
-  range: [-5, +12],
-  scales: {},
-  sequence: {},
-  vars: {},
-  type: 'spacing-scale',
-
-  props: {}
+export default {
+  tabs: [{
+    key: 0,
+    name: 'Default'
+  }, {
+    key: 1,
+    name: 'Font Size'
+  }],
+  activeTab: '0',
+  sequence: TYPOGRAPHY_SEQUENCE,
+  spacingRatio: SPACING.ratio,
+  currentFontSizeIndex: 3
 }

package/{.legacy → src/pages/Spaces}/style.js

@@ -28,3 +28,6 @@ export const stylePreview = {
     }
   }
 }
+
+export default {
+}