@symbo.ls/preview 0.0.9

package/src/pages/Editor/style.js

@@ -0,0 +1,13 @@
+'use strict'
+
+export default {
+  // border: '1px solid red',
+  flexDirection: 'column',
+  '> div': {
+    // border: '5px solid green',
+    flex: 1
+  },
+  aside: {
+    width: '223px'
+  }
+}

package/src/pages/Editor/tools.js

@@ -0,0 +1,360 @@
+'use strict'
+
+import { Shape, Block, Flex, Text, SquareButton, ButtonSet, ClickableItem, ThemeSwitcher, ToolItem } from '@symbo.ls/components'
+
+const commonComponent = {
+  extend: Block,
+  caption: {
+    extend: [Block, Text],
+    props: {
+      padding: 'A X'
+    },
+    style: {
+      opacity: '.35',
+      textTransform: 'capitalize'
+    }
+  },
+  toolsContainer: {
+    extend: [Block, Shape, Flex],
+    props: {
+      gap: 'A',
+      padding: 'A 0',
+      round: 'A'
+    },
+    style: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      background: 'rgba(255, 255, 255, .06)'
+    },
+    tools: {
+      extend: [Block, Flex],
+      props: { gap: 'A' },
+      style: {
+        flexDirection: 'column'
+      },
+      childExtend: {
+        extend: ToolItem,
+        icon: { },
+        tool: {
+          props: { padding: 'X2' },
+          button0: { props: { size: 'B' } },
+          value: {
+            props: { size: 'A' },
+            style: { color: 'white', opacity: 1 }
+          },
+          range: {},
+          button1: { props: { size: 'B' } },
+          button2: {
+            extend: [SquareButton, ClickableItem],
+            props: {
+              icon: 'arrowAngleMirroringVertical',
+              size: 'B',
+              padding: 'X'
+            }
+          }
+        }
+      },
+      ...[{}]
+    }
+  }
+}
+
+const themeSwitcher = {
+  extend: ThemeSwitcher,
+  props: {
+    padding: 'Y2 X2 Y2 Z'
+  },
+  themePreview: {
+    props: {
+      round: 'Y',
+      text: 'A'
+    },
+    style: {
+      background: 'rgba(53, 31, 89, .35)',
+      width: '24px',
+      height: '24px'
+    },
+    dot: {
+      style: {
+        top: '6px',
+        right: '6px'
+      }
+    }
+  },
+
+  title: {
+    extend: [Flex, Block],
+    props: { gap: 'W' },
+    style: { flexDirection: 'column' },
+    text: 'Revolver',
+    span: {
+      text: 'Call to action',
+      style: {
+        display: 'block',
+        opacity: '.4'
+      }
+    }
+  },
+  button0: { props: { size: 'B' } },
+  button1: {
+    props: {
+      icon: 'arrowAngleMirroringVertical',
+      size: 'B'
+    }
+  }
+}
+
+const style = {
+  extend: commonComponent,
+  caption: {
+    props: { text: 'style' }
+  },
+  toolsContainer: {
+    themeSwitcher,
+    tools: {
+      ...[
+        {
+          icon: { name: 'colorOpacity' },
+
+          tool: {
+            button0: {},
+            value: { text: '100%' },
+            range: {},
+            button1: {},
+            button2: 0
+          }
+        },
+
+        {
+          icon: { name: 'textCaseTitle' },
+
+          tool: {
+            button0: {},
+            value: { text: '100%' },
+            range: {},
+            button1: {},
+            button2: null
+          }
+        }
+      ]
+    }
+  }
+}
+
+const spaces = {
+  extend: commonComponent,
+  caption: { props: { text: 'spaces' } },
+  toolsContainer: {
+    tools: {
+      ...[
+        {
+          icon: { name: 'fontSize' },
+          tool: {
+            button0: {},
+            value: { text: '16px' },
+            range: {},
+            button1: {},
+            button2: null
+          }
+        },
+
+        {
+          icon: { name: 'spacesOutline' },
+
+          tool: {
+            button0: {},
+            value: {
+              text: '1.618',
+              style: {
+                flex: 1,
+                textAlign: 'center'
+              }
+            },
+            range: null,
+            button1: {
+              style: {
+                marginRight: '6px'
+              }
+            },
+            button2: {}
+          }
+        }
+      ]
+    }
+  }
+}
+
+const border = {
+  extend: commonComponent,
+  caption: { props: { text: 'border' } },
+  toolsContainer: {
+    tools: {
+      ...[
+        {
+          icon: { name: 'borderWeight' },
+
+          tool: {
+            button0: {},
+            value: { text: '16px' },
+            range: {},
+            button1: {},
+            button2: 0
+          }
+        },
+
+        {
+          icon: { name: 'borderOpacity' },
+
+          tool: {
+            button0: {},
+            value: { text: '1.618' },
+            range: {},
+            button1: {},
+            button2: null
+          }
+        }
+      ]
+    }
+  }
+}
+
+const form = {
+  extend: commonComponent,
+  caption: { props: { text: 'form' } },
+  toolsContainer: {
+    tools: {
+      ...[
+        {
+          icon: { name: 'shapes' },
+
+          tool: {
+            button0: null,
+            box: {
+              extend: [Block, Shape],
+              props: {
+                round: 'X2'
+              },
+              style: {
+                width: '13px',
+                height: '13px',
+                background: 'rgba(255, 255, 255, .1)',
+                border: '1px solid rgba(255, 255, 255, .1)',
+                marginLeft: '2px',
+                marginRight: '5px'
+              }
+            },
+            value: {
+              text: 'Rounded',
+              style: {
+                flex: '1'
+              }
+            },
+            range: null,
+            button1: null,
+            button2: {}
+          }
+        },
+
+        {
+          icon: { name: 'borderRadius' },
+
+          tool: {
+            button0: {},
+            value: {
+              text: '1.618',
+              style: {
+                flex: 1,
+                textAlign: 'center'
+              }
+            },
+            range: null,
+            button1: { style: { marginRight: '6px' } },
+            button2: {}
+          }
+        }
+      ]
+    }
+  }
+}
+
+export const accessibilityButoons = {
+  extend: ButtonSet,
+  props: {
+    gap: 'A1',
+    padding: '0 0 Z 0'
+  },
+
+  childExtend: {
+    extend: SquareButton,
+    props: {
+      theme: 'transparent',
+      size: 'C'
+    }
+  },
+  ...[
+    { props: { icon: 'crossmark' } },
+    { props: { icon: 'url' } },
+    { props: { icon: 'keyboard' } },
+    { props: { icon: 'arrayOutline' } },
+    { props: { icon: 'mouse' } }
+  ]
+}
+
+const accessibility = {
+  extend: commonComponent,
+  caption: { props: { text: 'accessibility' } },
+  toolsContainer: {
+    accessibilityButoons,
+    tools: {
+      ...[
+        {
+          icon: { name: 'eyeOpen' },
+
+          tool: {
+            button0: null,
+            box: {
+              extend: [Block, Shape],
+              props: {
+                round: 'X2'
+              },
+              style: {
+                width: '13px',
+                height: '13px',
+                background: 'rgba(255, 255, 255, .1)',
+                border: '1px solid rgba(255, 255, 255, .1)',
+                marginLeft: '2px',
+                marginRight: '5px'
+              }
+            },
+            value: {
+              text: 'Rounded',
+              style: {
+                flex: '1'
+              }
+            },
+            range: null,
+            button1: null,
+            button2: {}
+          }
+        }
+      ]
+    }
+  }
+}
+
+export default {
+  tag: 'aside',
+  extend: [Block, Text],
+  props: { size: 'Y' },
+  style: {
+    paddingTop: '10px'
+  },
+  childExtend: commonComponent,
+  ...[
+    style,
+    spaces,
+    border,
+    form,
+    accessibility
+  ]
+}

package/src/pages/Export/_tools_old.js

@@ -0,0 +1,49 @@
+'use strict'
+
+import {
+  screenButton,
+  activeScreenButton,
+  styleKangoroo
+} from './style'
+
+import { Button, Icon } from '@symbo.ls/components'
+
+export const KangorooButton = {
+  style: styleKangoroo,
+  tag: 'button',
+  icon: { extend: Icon, name: 'sun' },
+  text: 'light mode',
+  button: {
+    icon: { extend: Icon, name: 'moon' },
+    text: 'go dark'
+  }
+}
+
+export const ResponsiveToolBar = {
+  tag: 'nav',
+
+  childExtend: {
+    extend: Button,
+    style: screenButton,
+    define: { active: param => param },
+    class: {
+      active: (el, s) => el.key === s.previewSize
+        ? activeScreenButton
+: {}
+    },
+    on: {
+      click: (ev, el, s) => {
+        s.update({
+          previewSize: el.key !== s.previewSize ? el.key : 'unset'
+        })
+      }
+    }
+  },
+  ...[
+    { key: 'mobile', icon: 'deviceMobile' },
+    { key: 'tabletPortrait', icon: 'deviceTabletPortrait' },
+    { key: 'tabletLangdscape', icon: 'deviceTabletLandscape' },
+    { key: 'small', icon: 'deviceSmall' },
+    { key: 'big', icon: 'deviceBig' }
+  ]
+}

package/src/pages/Export/const.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/scratch'
+import { LIBRARY } from '../../../.symbols'
+
+const COMPONENT_ROUTES = {}
+LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
+
+// const SEQUENCE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 32, 36, 42, 48, 56, 62, 68, 76, 84, 92, 100, 110]
+
+const TYPOGRAPHY_SEQUENCE = Object.keys(TYPOGRAPHY.sequence).reverse().map(v => {
+  const val = TYPOGRAPHY.sequence[v].val
+  return val
+})
+
+const SPACING_RATIO = Object.values(SEQUENCE).reverse().map(v => v)
+
+export { COMPONENT_ROUTES, TYPOGRAPHY_SEQUENCE, SPACING_RATIO }

package/src/pages/Export/description.js

@@ -0,0 +1,56 @@
+'use strict'
+
+import { Flex, PropertyList } from '@symbo.ls/components'
+
+import { styleArticle } from './style'
+
+export const description = {
+  props: { padding: '0 0 B 0' },
+  caption: {
+    props: {
+      text: 'Description',
+      size: 'Z',
+      padding: '0 0 Y2 0'
+    }
+  },
+  p: {
+    props: {
+      text: 'Kangoroo buttons are button compositions where the original button contain one or more child buttons.'
+    },
+    style: { margin: 0 }
+  }
+}
+
+export default {
+  tag: 'article',
+  style: styleArticle,
+  props: { padding: 'B2 0' },
+
+  description,
+
+  usage: {
+    extend: [Flex],
+    props: { gap: 'C1' },
+
+    table: {
+      props: { flex: 1 },
+      extend: PropertyList,
+      if: ({ state }) => state.props,
+
+      title: {},
+      list: {
+        $setCollection: ({ state }) => state.props
+      }
+    },
+
+    code: {
+      extend: 'Code',
+      props: { margin: '0', flex: '0 0 320px' },
+      if: ({ state }) => state.code,
+      title: {},
+      code: {
+        text: ({ state }) => state.code
+      }
+    }
+  }
+}

package/src/pages/Export/index.js

@@ -0,0 +1,74 @@
+'use strict'
+
+import { router, lastLevel } from '@domql/router' // eslint-disable-line no-unused-vars
+
+import { ResponsiveToolBar, Flex } from '@symbo.ls/components'
+import { PageExtend } from '../PageExtend'
+
+import state from './state'
+import scene from './scene'
+import tools from './tools'
+import description from './description'
+
+import { LIBRARY } from '../../../.symbols'
+import { COMPONENT_ROUTES } from './const'
+
+const componentState = () => LIBRARY.filter(v => {
+  const key = window.location.pathname.split('component/')[1]
+  return v.key === key
+})
+
+export const Export = {
+  key: 'export',
+  extend: Flex,
+
+  props: {
+    width: '100%',
+    flow: 'column',
+    padding: '0 Y2'
+  },
+
+  state: () => ({
+    ...componentState()[0],
+    ...state
+  }),
+
+  on: {
+    init: (el, s) => {
+      const route = window.location.pathname
+      const routes = route.slice(1).split('/')
+
+      const content = COMPONENT_ROUTES[`/${routes[1]}`]
+      if (!content) return router(el.__root, '/components')
+    }
+  },
+
+  main: {
+    style: { maxWidth: 'none' },
+    scene
+  },
+
+  cnt: {
+    extend: [PageExtend],
+
+    props: {
+      padding: 'Z2 C1 A',
+      flex: '1'
+    },
+
+    tools: {
+      props: {
+        padding: 'Z2 0 0 0',
+        flexAlign: 'center space-between'
+      },
+
+      tools,
+
+      responsive: { extend: ResponsiveToolBar }
+    },
+
+    description
+  }
+
+  // footer: { extend: Footer }
+}

package/src/pages/Export/scene.js

@@ -0,0 +1,62 @@
+'use strict'
+
+import { BREAKPOINTS } from '@symbo.ls/scratch'
+import { Scene } from '@symbo.ls/components'
+
+export default {
+  extend: Scene,
+
+  props: (el, s) => {
+    const previewSize = BREAKPOINTS[s.previewSize]
+    return {
+      width: '100%',
+      maxWidth: previewSize ? previewSize + 'px' : '100%',
+      margin: '- auto'
+    }
+  },
+
+  scene: {
+    props: {
+      padding: 'B 0',
+      maxHeight: '40em',
+      minHeight: '65vh'
+    },
+
+    class: {
+      z: (el, s) => ({
+        '> *': {
+          transform: `scale(${parseFloat(s.zoomLevel, 2)})`
+        }
+      })
+    },
+
+    content: {
+      props: {
+        transition: 'all, B, cubic-bezier(.29,.67,.51,.97)',
+        style: {
+          '*': {
+            transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)'
+          }
+        }
+      },
+      comp: (el, s) => {
+        console.warn(s)
+        return {
+          extend: [s.component],
+          props: {
+          }
+        }
+      },
+
+      on: {
+        initUpdate: (el, s) => {
+          el.comp.setProps({
+            base: s.base,
+            fontSize: s.base + 'px',
+            spacingRatio: s.ratio
+          }, { preventUpdate: true })
+        }
+      }
+    }
+  }
+}

package/src/pages/Export/state.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { TYPOGRAPHY } from '@symbo.ls/scratch'
+
+export default {
+  descriptionTheme: 'dark',
+  previewSize: 'unset',
+  sceneTheme: 'dark',
+  theme: '',
+  zoomLevel: 1,
+  currentFontSizeIndex: 3,
+
+  base: TYPOGRAPHY.base,
+  ratio: TYPOGRAPHY.ratio,
+  range: [-1, +4],
+  scales: {},
+  sequence: {},
+  vars: {},
+  type: 'type-scale',
+  sampleText: 'Today is a big day for our tribe. The year ends.'
+}

package/src/pages/Export/style.js

@@ -0,0 +1,21 @@
+'use strict'
+
+export const styleArticle = {
+  caption: {
+    // textTransform: 'capitalize',
+    opacity: '.35'
+  },
+
+  p: {
+    maxWidth: `${470 / 14}em`,
+    opacity: '.75',
+    lineHeight: '20px'
+  },
+
+  code: {
+    overflow: 'hidden'
+  }
+}
+
+export const styleHeader = {
+}

package/src/pages/Export/tools.js

@@ -0,0 +1,14 @@
+'use strict'
+
+import { Flex, SequenceSliders } from '@symbo.ls/components'
+
+export default {
+  extend: [Flex],
+  props: { gap: 'B1' },
+  // theme: { extend: ThemeSwitcher },
+
+  sliders: {
+    extend: SequenceSliders,
+    childExtend: { title: null }
+  }
+}