@symbo.ls/preview 0.0.9

package/src/pages/Icons/index.js

@@ -0,0 +1,72 @@
+'use strict'
+
+import { copyStringToClipboard } from '@symbo.ls/utils'
+
+import * as sprite from '@symbo.ls/icons'
+import { IconText, ClickableItem, SectionHeader, Grid } from '@symbo.ls/components'
+
+const IconItem = {
+  extend: [ClickableItem, IconText],
+  props: ({ state }) => ({
+    round: 'A',
+    size: 'D',
+    aspectRatio: '1 / 1',
+    flexAlign: 'center center',
+    icon: {
+      fontSize: 'C2',
+      name: state.name
+    }
+  }),
+  on: {
+    click: (event, element, state) => {
+      copyStringToClipboard(state.name)
+    }
+  }
+}
+
+const IconsGroup = {
+  state: {
+    toggleShow: true
+  },
+
+  header: {
+    extend: SectionHeader
+  },
+
+  iconSet: {
+    extend: Grid,
+
+    props: ({ state }) => ({
+      hide: !state.toggleShow,
+      columns: 'repeat(12, 1fr)',
+      gap: 'Z',
+      margin: '- -Z2',
+
+      $hide: {
+        display: 'none'
+      }
+    }),
+
+    childExtend: IconItem,
+    $setCollection: ({ state }) => state.list
+  }
+}
+
+const ICON_GROUPS = [{
+  title: 'Document Icons',
+  p: 'All ungrouped document icons',
+
+  nav: [{
+    icon: 'upload outline',
+    href: '/icons/upload-icon'
+  }],
+
+  list: Object.keys(sprite).map(name => ({ name }))
+}]
+
+export const Icons = {
+  tag: 'section',
+
+  childExtend: IconsGroup,
+  $setCollection: () => ICON_GROUPS
+}

package/src/pages/Icons/style.js

@@ -0,0 +1 @@
+'use strict'

package/src/pages/Library/index.js

@@ -0,0 +1,32 @@
+'use strict'
+
+import { grid } from './style'
+
+import { SectionHeader, ComponentTemplate, Grid } from '@symbo.ls/components'
+
+import { PageExtend } from '..'
+import { LIBRARY } from '../../../.symbols'
+
+export const Library = {
+  extend: PageExtend,
+
+  header: {
+    extend: [SectionHeader],
+    state: {
+      title: 'My Symbols',
+      p: 'This is the first collection of your components'
+    }
+  },
+
+  grid: {
+    extend: Grid,
+    props: {
+      flex: 1,
+      margin: '- -Z2',
+      style: grid
+    },
+
+    childExtend: ComponentTemplate,
+    $setCollection: () => LIBRARY
+  }
+}

package/src/pages/Library/style.js

@@ -0,0 +1,36 @@
+'use strict'
+
+export const 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'
+    }
+  }
+}

package/src/pages/PageExtend.js

@@ -0,0 +1,12 @@
+'use strict'
+
+import { PageTemplate } from '@symbo.ls/components'
+
+export const PageExtend = {
+  tag: 'main',
+  extend: PageTemplate,
+
+  props: {
+    maxWidth: 'K-default'
+  }
+}

package/src/pages/Shapes/index.js

@@ -0,0 +1,161 @@
+'use strict'
+
+import { styleShapeSet } from './style'
+
+import { Link, Flex, SectionHeader, ClickableItem } from '@symbo.ls/components'
+
+const ShapeItem = {
+  extend: [ClickableItem, Link, Flex],
+
+  props: el => ({
+    href: `/shapes/${el.parent.parent.key}-${el.key}`,
+    padding: 'B',
+    round: 'Z'
+  }),
+
+  _shape: {
+    props: {
+      theme: 'quaternary',
+      width: 'C',
+      height: 'C'
+    }
+  }
+}
+
+const ShapeSet = {
+  style: styleShapeSet,
+  label: {
+    props: {
+      display: 'block',
+      size: 'Y',
+      padding: '0 0 Z 0'
+    }
+  },
+  nav: {
+    extend: Flex,
+    props: { gap: 'Z1' },
+    childExtend: ShapeItem
+  }
+}
+
+const rectangle = {
+  extend: ShapeSet,
+  label: {
+    text: 'Rectangle ',
+    span: 'with rounds'
+  },
+  nav: [
+    {},
+    { _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 = {
+  extend: ShapeSet,
+  label: { text: 'Circle' },
+  nav: [{
+    _shape: { props: { shape: 'circle' } }
+  }]
+}
+
+const toolTip = {
+  extend: ShapeSet,
+  label: { text: 'Tooltip' },
+  nav: {
+    childExtend: {
+      childExtend: { props: { round: 'Y1' } }
+    },
+
+    ...[
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top left' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'top center' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'right' } } },
+      { _shape: { props: { shape: 'tooltip', shapeDirection: 'bottom' } } }
+    ]
+  }
+}
+
+const tagShape = {
+  extend: ShapeSet,
+  label: { text: 'Tag' },
+  nav: {
+    childExtend: {
+      childExtend: { 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' } } }
+    ]
+  }
+}
+
+const bubble = {
+  extend: ShapeSet,
+  label: { text: 'Bubble' },
+  nav: [
+    { _shape: { props: { round: 'X B B X' } } },
+    { _shape: { props: { round: 'B X X B' } } },
+    { _shape: { props: { round: 'X X B B' } } },
+    { _shape: { props: { round: 'B B X X' } } },
+    { _shape: { props: { round: 'B X X X' } } },
+    { _shape: { props: { round: 'X B X X' } } },
+    { _shape: { props: { round: 'X X B X' } } },
+    { _shape: { props: { round: 'X X X B' } } }
+  ]
+}
+
+export const Shapes = {
+  extend: Flex,
+  props: {
+    flow: 'column',
+    gap: 'F'
+  },
+
+  childExtend: {
+    extend: Flex,
+    props: {
+      gap: 'A',
+      flow: 'column',
+      section: {
+        flow: 'row wrap',
+        gap: 'A'
+      }
+    },
+    section: { extend: Flex }
+  },
+
+  htmlShapes: {
+    header: {
+      extend: SectionHeader,
+      heading: {
+        title: 'HTML Shapes',
+        p: 'All ungrouped document icons'
+      }
+    },
+
+    section: {
+      rectangle,
+      circle,
+      toolTip,
+      tagShape,
+      bubble
+    }
+  },
+
+  svgShapes: {
+    header: {
+      extend: SectionHeader,
+      heading: {
+        title: 'SVG Shapes',
+        p: 'TBA...'
+      }
+    }
+  }
+}

package/src/pages/Shapes/style.js

@@ -0,0 +1,28 @@
+'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',
+    alignItems: 'center'
+  },
+
+  input: { display: 'none' }
+}

package/src/pages/Spaces/boxModel.js

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

package/src/pages/Spaces/index.js

@@ -0,0 +1,58 @@
+'use strict'
+
+import { Link, TabHeader } from '@symbo.ls/components'
+import { PageExtend } from '..'
+
+import preview from './preview'
+import sequence from './sequence'
+import boxModel from './boxModel'
+
+export const Spaces = {
+  key: 'spaces',
+
+  extend: PageExtend,
+
+  state: {
+    activePage: 'spaces',
+    activeTab: 'preview'
+  },
+
+  define: { routes: param => param },
+
+  routes: {
+    preview,
+    sequence,
+    boxModel
+  },
+
+  on: {
+    init: (el, s) => {
+      var route = window.location.pathname
+      var routes = route.slice(1).split('/')
+      s.activeTab = routes[1] || s.activeTab
+    }
+  },
+
+  header: {
+    extend: TabHeader,
+    style: {
+      margin: `${42 / 16}em -2em 2em -2em`,
+      paddingLeft: '2em'
+    },
+    tabs: {
+      childExtend: {
+        extend: [Link]
+      },
+
+      preview: { props: { text: 'Spacing Preview' } }
+      // sequence: { props: { text: 'Sequence' } },
+      // boxModel: { props: { text: 'Box Model' } }
+    }
+  },
+
+  preview
+
+  // page: {
+  //   content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+  // }
+}

package/src/pages/Spaces/preview.js

@@ -0,0 +1,133 @@
+'use strict'
+
+import { stylePreview, styleScene } from './style'
+
+import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, SliderToolWithCaption, SelectToolWithCaption } from '@symbo.ls/components'
+
+const buttonDownload = {
+  extend: Button,
+  state: {},
+  style: {
+    svg: { marginRight: `${6 / 16}em` }
+  },
+  props: {
+    icon: 'arrowDown',
+    theme: 'primary',
+    text: 'Download',
+    padding: ['Z2', 'A2'],
+    round: 'C'
+  }
+}
+
+export default {
+  style: stylePreview,
+
+  cnt: {
+    aside: {
+      tag: 'aside',
+      extend: [ResponsiveToolBar, Flex]
+    },
+    nameSequence: {
+      style: { marginRight: '5.6em' },
+      childExtend: {
+        extend: CommonField
+      },
+      ...[
+        // {
+        //   caption: { text: 'Name the sequence' },
+        //   element: {
+        //     tag: 'input',
+        //     extend: Shape,
+        //     props: { theme: 'quaternary', round: 'Y1' },
+        //     attr: (el, s) => ({
+        //       autofocus: true
+        //       // value: s.tabs[s.activeTab].name
+        //     }),
+        //     on: {
+        //       render: el => {
+        //         el.node.select() // .focus(),
+        //       },
+        //       input: (ev, el, s) => {
+        //         s.tabs[s.activeTab].name = el.node.value
+        //         s.update()
+        //       }
+        //     }
+        //   }
+        // },
+
+        {
+          extend: SelectToolWithCaption,
+          style: { marginTop: `${26 / 16}em` },
+          caption: { props: { text: 'Used for' } },
+          element: {
+            title: {
+              props: {
+                icon: 'fontSize',
+                text: 'Font size'
+              },
+              style: { '> svg': { paddingTop: '2px' } }
+            }
+          }
+        }
+      ]
+    },
+
+    baseSize: {
+      childExtend: CommonField,
+      ...[
+        {
+          extend: SliderToolWithCaption,
+          caption: { text: 'Base size' },
+          element: {
+            button0: {},
+            value: { text: '16px' }
+          }
+        },
+        {
+          style: { marginTop: `${26 / 16}em` },
+          caption: { text: 'Sequence ratio' },
+          element: {
+            extend: StaticSpacing
+          }
+        }
+      ]
+    },
+    scene: {
+      extend: CommonField,
+      style: {
+        flex: 1,
+        marginLeft: `${110 / 16}em`
+      },
+      caption: { text: 'Preview' },
+      element: {
+        style: styleScene,
+        extend: [Scene, Block],
+        props: {
+          width: 'H2',
+          height: 'G'
+        },
+        scene: {
+          buttonDownload
+        }
+      }
+    }
+  },
+
+  footer: {
+    caption: {
+      extend: [Text, Block],
+      props: {
+        size: 'Y',
+        padding: '0 0 B 0'
+      },
+      text: 'Sizing generated by this setting'
+    },
+    Sequence: {
+      extend: [SequenceGraph, Block, Text],
+      style: { alignItems: 'center' },
+      props: {
+        size: 'X'
+      }
+    }
+  }
+}

package/src/pages/Spaces/sequence.js

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

package/src/pages/Spaces/state.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { SPACING } from '@symbo.ls/components'
+import { TYPOGRAPHY_SEQUENCE } from '../Export/const'
+
+export default {
+  tabs: [{
+    key: 0,
+    name: 'Default'
+  }, {
+    key: 1,
+    name: 'Font Size'
+  }],
+  activeTab: '0',
+  sequence: TYPOGRAPHY_SEQUENCE,
+  spacingRatio: SPACING.ratio,
+  currentFontSizeIndex: 3
+}

package/src/pages/Spaces/style.js

@@ -0,0 +1,30 @@
+'use strict'
+
+export const styleScene = {
+  padding: `${10 / 16}em`,
+  width: '100%',
+  '> div': {
+    height: '100%'
+  }
+}
+
+export const stylePreview = {
+  '> div': {
+    display: 'flex'
+  },
+
+  aside: {
+    flexDirection: 'column-reverse',
+    justifyContent: 'flex-end',
+    marginRight: '4.2em',
+    gap: '1em'
+  },
+
+  footer: {
+    marginTop: `${68 / 16}em`,
+    caption: {
+      whiteSpace: 'nowrap',
+      opacity: '.35'
+    }
+  }
+}