@symbo.ls/preview 0.0.98 → 2.0.7

package/src/pages/Export/scene.js

@@ -1,40 +1,55 @@
 'use strict'
 
-import DOM from 'domql'
-import { transformEmotionClass, transformEmotionStyle } from 'domql/packages/emotion'
-import { createEmotion } from '@symbo.ls/create-emotion'
-import { updateReset } from '@symbo.ls/init'
-import { isString } from '@domql/utils'
+import { Text, TYPOGRAPHY, returnSubThemeOrDefault, Scene } from '@symbo.ls/all'
 
-import { getActiveConfig, activateConfig } from '@symbo.ls/scratch'
-import { init, Box, Scene } from '@symbo.ls/components'
+import { COMPONENT_ROUTES } from './const'
 
-import * as components from '../../components'
-
-const emCache = {}
+const BREAKPOINTS = {
+  mobile: '375px',
+  tabletPortrait: '728px',
+  tabletLandscape: '1024px',
+  small: '1440px',
+  big: '1920px',
+  unset: '100%'
+}
 
 export default {
-  extend: Scene,
+  proto: Scene,
+
+  style: {
+    background: 'rgba(255, 255, 255, .06)',
+    maxWidth: '100%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    transitionDuration: '225ms',
+    transitionEasing: 'cubic-bezier(.29,.67,.51,.97)',
+    transitionProperty: 'max-width, background'
+  },
 
-  props: (el, s) => {
-    const CONFIG = getActiveConfig()
-    const { BREAKPOINTS } = CONFIG
-    const previewSize = BREAKPOINTS[s.previewSize]
-    return {
-      width: '100%',
-      maxWidth: previewSize ? previewSize + 'px' : '100%',
-      margin: '- auto'
-    }
+  class: {
+    s: (el, s) => ({
+      maxWidth: BREAKPOINTS[s.previewSize]
+    })
   },
 
   scene: {
-    props: {
-      padding: 'B 0',
+    style: {
+      padding: '3em 0',
       maxHeight: '40em',
       minHeight: '65vh'
     },
 
+    define: { routes: param => param },
+    routes: COMPONENT_ROUTES,
+
     class: {
+      a: {
+        '> *': {
+          transitionDuration: '225ms',
+          transitionTimingFunction: 'cubic-bezier(.29,.67,.51,.97)',
+          transitionProperty: 'transform'
+        }
+      },
       z: (el, s) => ({
         '> *': {
           transform: `scale(${parseFloat(s.zoomLevel, 2)})`
@@ -42,87 +57,35 @@ export default {
       })
     },
 
-    content: {
-      props: {
-        transition: 'all, B, defaultBezier',
-        style: {
-          '*': { transition: 'all 255ms cubic-bezier(.29,.67,.51,.97)' }
-        }
-      },
-
-      comp: (el, s) => {
-        if (s.live) {
-          const SYSTEM = s.__system
-          const styleNode = document.createElement('head')
-          const emotion = createEmotion('client', styleNode)
-          emCache['client'] = emotion
-
-          const emotionStyle = transformEmotionStyle(emotion, true)
-          const emotionClass = transformEmotionClass(emotion, true)
-
-          const newDom = DOM.create({
-            tag: 'shadow',
-            state: s.state
-          }, el.parent.node, 'comp', {
-            extend: [Box],
-            define: { style: emotionStyle, class: emotionClass },
-            components,
-            context: { SYSTEM }
-          })
-
-          newDom.node.appendChild(styleNode)
-
-          init(SYSTEM, null, { emotion, initDOMQLDefine: false, newConfig: 'client' })
-          activateConfig('client')
-
-          newDom.set({
-            tag: 'fragment',
-            [s.key]: {
-              extend: isString(s.component) ? document.eval(s.component) : s.component,
-              props: { inheritSpacingRatio: true }
-            },
-            on: {
-              render: (el) => {
-                // const appKey = el.__root.state.appKey && el.__root.state.appKey.split('.')[0]
-              }
+    content: (el, s) => {
+      const props = el.lookup('content').props
+      return {
+        proto: [props.component, Text],
+        props: (el, s) => {
+          const { sequence } = TYPOGRAPHY
+          const activeSet = Object.keys(sequence).reverse()[s.currentFontSizeIndex]
+          const theme = returnSubThemeOrDefault(s.theme, s.sceneTheme)
+
+          return {
+            size: sequence[activeSet].key,
+            spacingRatio: s.spacingRatio,
+            theme
+          }
+        },
+        class: {
+          sceneTransition: {
+            '&, & *': {
+              transition: 'all 225ms cubic-bezier(.29,.67,.51,.97)'
             }
-          })
-
-          activateConfig(0)
-          return newDom
-        }
-
-        return {
-          extend: {
-            extend: isString(s.component) ? document.eval(s.component) : s.component
-          },
-          props: { inheritSpacingRatio: true }
-        }
-      },
-
-      on: {
-        initUpdate: (el, s) => {
-          if (s.live) {
-            activateConfig('client')
-            updateReset({ emotion: emCache['client'] })
-          } else {
-            el.comp.setProps({
-              base: s.base,
-              fontSize: s.base + 'px',
-              spacingRatio: s.ratio,
-              direction: s.direction
-            }, { preventUpdate: true })
-            updateReset()
           }
-          activateConfig(0)
         }
       }
-    }
-  },
+    },
 
-  on: {
-    update: (el, s) => {
-      el.__root.node.scrollTo({ top: 0, behavior: 'smooth' })
+    on: {
+      render: (el, s) => {
+        // el.__root.state.update({ activePage: el.props.title })
+      }
     }
   }
 }

package/src/pages/Export/state.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { SPACING, TYPOGRAPHY } from '@symbo.ls/scratch'
+import { SPACING } from '@symbo.ls/all'
+import { TYPOGRAPHY_SEQUENCE } from './const'
 
 export default {
   descriptionTheme: 'dark',
@@ -8,14 +9,7 @@ export default {
   sceneTheme: 'dark',
   theme: '',
   zoomLevel: 1,
-  currentFontSizeIndex: 3,
-
-  base: TYPOGRAPHY.base,
-  ratio: SPACING.ratio,
-  range: [-1, +4],
-  scales: {},
-  sequence: {},
-  vars: {},
-  type: 'type-scale',
-  sampleText: 'Today is a big day for our tribe. The year ends.'
+  sequence: TYPOGRAPHY_SEQUENCE,
+  spacingRatio: SPACING.ratio,
+  currentFontSizeIndex: 3
 }

package/src/pages/Export/style.js

@@ -0,0 +1,28 @@
+'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 = {
+  justifyContent: 'space-between',
+  alignItems: 'center'
+}
+
+export default {
+  display: 'flex',
+  flexDirection: 'column'
+}

package/src/pages/Export/tools.js

@@ -1,52 +1,97 @@
 'use strict'
 
-import {
-  Flex,
-  SequenceSliders,
-  ClickableItem,
-  SquareButton
-} from '@symbo.ls/components'
+import { isArray } from 'domql-preview/src/utils'
+import { Flex, Block, SEQUENCE, ThemeSwitcher, SliderToolItem } from '@symbo.ls/all'
 
-export default {
-  props: {
-    padding: 'Z2 0 0',
-    flexAlign: 'center space-between'
-  },
+export const closestNumber = (number, arr) => {
+  return (isArray(arr) ? arr : Object.values(arr)).reduce((prev, curr) => {
+    return (Math.abs(curr - number) < Math.abs(prev - number) ? curr : prev)
+  })
+}
 
-  tools: {
-    extend: Flex,
-    props: { gap: 'B1' },
-    // theme: { extend: ThemeSwitcher },
+export const FontSizeTool = {
+  proto: SliderToolItem,
+  props: (el, s) => ({
+    type: 'fontSize',
+    icon: 'fontSize',
 
-    sliders: {
-      extend: SequenceSliders,
-      childExtend: { title: null }
-    }
-  },
+    value: s.sequence[s.currentFontSizeIndex],
+    min: s.sequence[0],
+    max: s.sequence[Object.keys(s.sequence).length - 1],
 
-  responsive: {
-    extend: Flex,
-    props: { gap: 'A2' },
-
-    direction: {
-      extend: [ClickableItem, SquareButton],
-      props: {
-        icon: 'languageDirection'
-      },
-      on: {
-        click: (ev, el, s) => {
-          s.update({
-            direction: s.direction === 'rtl' ? 'ltr' : 'rtl'
-          })
-        }
-      }
+    minusClick: (ev, el, s) => {
+      const { currentFontSizeIndex } = s
+      const val = currentFontSizeIndex - 1
+      if (val < 0) return
+      // el.parent.range.node.value = val
+      s.update({ currentFontSizeIndex: val })
+    },
+    input: (ev, el, s) => {
+      const { sequence } = s
+      const value = el.node.value
+      const findMatch = closestNumber(value, s.sequence)
+      const seq = isArray(sequence) ? sequence : Object.values(sequence)
+      s.update({ currentFontSizeIndex: seq.indexOf(findMatch) })
     },
+    plusClick: (ev, el, s) => {
+      const { currentFontSizeIndex } = s
+      const val = currentFontSizeIndex + 1
+      if (val + 1 > Object.keys(s.sequence).length) return
+      // el.parent.range.node.value = val
+      s.update({ currentFontSizeIndex: currentFontSizeIndex + 1 })
+    }
+  })
+}
 
-    VerticalLine: {
-      margin: 'auto 0',
-      height: 'A2'
+export const SpacingTool = {
+  proto: SliderToolItem,
+  if: (el) => el.lookup('content').props.defaultProps && el.lookup('content').props.defaultProps.spacingRatio,
+  props: (el, s) => ({
+    type: 'spacing',
+    icon: 'spaces',
+    step: '0.001',
+
+    value: s.spacingRatio,
+    min: SEQUENCE['minor-second'],
+    max: SEQUENCE['double-octave'],
+
+    minusClick: (ev, el, s) => {
+      const { spacingRatio } = s
+      const values = Object.values(SEQUENCE)
+      const activeKey = values.indexOf(spacingRatio) // keys.find(key => SEQUENCE[key] === spacingRatio)
+      s.update({ spacingRatio: values[activeKey - 1] })
+    },
+    input: (ev, el, s) => {
+      const value = el.node.value
+      const sequenceValues = Object.values(SEQUENCE)
+      const findMatch = closestNumber(value, sequenceValues)
+      s.update({ spacingRatio: findMatch })
     },
+    plusClick: (ev, el, s) => {
+      const { spacingRatio } = s
+      const values = Object.values(SEQUENCE)
+      const activeKey = values.indexOf(spacingRatio) // keys.find(key => SEQUENCE[key] === spacingRatio)
+      s.update({ spacingRatio: values[activeKey + 1] })
+    }
+  })
+}
 
-    ResponsiveToolBar: {}
-  }
+export default {
+  proto: [Flex, Block],
+  props: { gap: 'B1' },
+  childProto: {
+    if: ({ props }) => props.value,
+    style: {
+      position: 'relative',
+      zIndex: 999,
+      '&:hover > section': {
+        transform: 'translate3d(-50%,0,0)',
+        opacity: 1,
+        visibility: 'visible'
+      }
+    }
+  },
+  theme: { proto: ThemeSwitcher },
+  fontSize: { proto: FontSizeTool },
+  spacing: { proto: SpacingTool }
 }

package/src/pages/Icons/index.js

@@ -1,92 +1,88 @@
 'use strict'
 
-import * as ACCESSIBILITY from '@symbo.ls/icons/src/accessibility'
-import * as BOXMODEL from '@symbo.ls/icons/src/boxModel'
-import * as DISPLAY from '@symbo.ls/icons/src/display'
-import * as INTERACTIVE from '@symbo.ls/icons/src/interactive'
-import * as LOGOS from '@symbo.ls/icons/src/logos'
-import * as SIGNS from '@symbo.ls/icons/src/signs'
-import * as STYLE from '@symbo.ls/icons/src/style'
-import * as KEYBOARD from '@symbo.ls/icons/src/keyboard'
-import * as SVG from '@symbo.ls/icons/src/svg'
-import * as TECH from '@symbo.ls/icons/src/tech'
-import * as TEXT from '@symbo.ls/icons/src/text'
+import style, { styleIconsOption } from './style'
 
-import { IconsGroup } from '../../components'
+import { IconText, Direction, ClickableItem, SectionHeader, sprite, Grid, Block } from '@symbo.ls/all'
+import { PageProto } from '..'
 
-const ArraizeIconsCategory = (library, state) => {
-  const list = Object.keys(library)
-  if (state.searched) return list.filter(value => value.includes(state.searched))
-  return list
+const IconsOption = {
+  style: styleIconsOption,
+  header: { proto: SectionHeader },
+
+  iconSet: {
+    proto: Grid,
+    props: {
+      columns: 'repeat(12, 1fr)',
+      gap: 'Z'
+    }
+  }
 }
 
-const ICON_GROUPS = state => [{
-  title: 'Document Icons',
-  p: 'All ungrouped document icons',
-  list: ArraizeIconsCategory(SVG, state)
-}, {
-  title: 'Accessibility',
-  list: ArraizeIconsCategory(ACCESSIBILITY, state)
-}, {
-  title: 'Box Model',
-  list: ArraizeIconsCategory(BOXMODEL, state)
-}, {
-  title: 'Display',
-  list: ArraizeIconsCategory(DISPLAY, state)
-}, {
-  title: 'Interactive',
-  list: ArraizeIconsCategory(INTERACTIVE, state)
-}, {
-  title: 'Logos',
-  list: ArraizeIconsCategory(LOGOS, state)
-}, {
-  title: 'Signs',
-  list: ArraizeIconsCategory(SIGNS, state)
-}, {
-  title: 'Style',
-  list: ArraizeIconsCategory(STYLE, state)
-}, {
-  title: 'Keys',
-  list: ArraizeIconsCategory(KEYBOARD, state)
-}, {
-  title: 'Tech',
-  list: ArraizeIconsCategory(TECH, state)
-}, {
-  title: 'Text',
-  list: ArraizeIconsCategory(TEXT, state)
-}]
+const ICONS = Object.keys(sprite).map(key => ({ key: '_' + key }))
 
-export const Icons = {
-  state: {},
+const copyStringToClipboard = str => {
+  var el = document.createElement('textarea')
+  el.value = str
+  el.setAttribute('readonly', '')
+  el.style = { position: 'absolute', left: '-9999px' }
+  document.body.appendChild(el)
+  el.select()
+  document.execCommand('copy')
+  document.body.removeChild(el)
+}
 
-  SectionHeader: {
-    extend: true,
+const documentIcons = {
+  proto: IconsOption,
 
+  header: {
+    props: { padding: 'C 0 B1 0' },
     heading: {
-      title: 'Icons',
-      p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
+      caption: { props: { text: 'Document Icons' } },
+      p: { props: { text: 'All ungrouped document icons' } }
     },
+    nav: {
+      ...[
+        {
+          props: {
+            icon: 'upload',
+            href: '/icons/upload-icon'
+          }
+        },
+        { props: { icon: 'arrowAngleUp' } }
+      ]
+    }
+  },
 
-    Search: {
-      margin: '- -Z2 - -',
-      placeholder: 'Search Icons'
+  iconSet: {
+    childProto: {
+      proto: [ClickableItem, IconText, Direction, Block],
+      props: el => ({
+        round: 'Z',
+        size: 'D',
+        aspectRatio: '1 / 1',
+        flexAlign: 'center center',
+        icon: el.key.slice(1)
+      }),
+      on: {
+        click: (event, element, state) => {
+          copyStringToClipboard(element.key.slice(1))
+        }
+      }
     },
 
-    nav: null
-  },
+    ...ICONS
+  }
+}
 
-  Line: {},
+export default {
+  style,
 
-  Flex: {
-    props: {
-      flow: 'column',
-      gap: 'D1'
-    },
+  proto: PageProto,
 
-    childExtend: IconsGroup,
-    $setStateCollection: (el, state) => {
-      el.removeContent()
-      return ICON_GROUPS(state)
-    }
+  content: {
+    tag: 'section',
+
+    documentIcons
+    // navigationIcons
   }
 }

package/src/pages/Icons/style.js

@@ -1 +1,19 @@
 'use strict'
+
+export const styleIconsOption = {
+  '> div': {
+    '> div': {
+      '&:hover': {
+        background: 'rgba(255, 255, 255, .06)'
+      },
+      '&:hover > svg': {
+        color: 'white'
+      }
+    }
+  }
+}
+
+export default {
+  section: {
+  }
+}

package/src/pages/Library/index.js

@@ -1,33 +1,56 @@
 'use strict'
 
-import { ComponentTemplate } from '@symbo.ls/components'
-import { DisabledPage, Page } from '../../components'
+import style, { grid } from './style'
 
-export const Library = {
-  extend: [DisabledPage, Page],
+import { Block, SectionHeader, ComponentTemplate } from '@symbo.ls/all'
 
-  SectionHeader: {
-    title: 'My Symbols',
-    p: 'This is the first collection of your components'
+import { PageProto } from '..'
+
+export default {
+  style,
+
+  proto: PageProto,
+
+  header: {
+    proto: [SectionHeader, Block],
+    props: { padding: 'C 0 0 0' },
+    heading: {},
+    nav: {
+      ...[
+        // { props: { icon: 'arrowAngleDown' } }
+      ]
+    }
   },
 
-  Grid: {
-    props: {
-      flex: 1,
-      templateColumns: 'repeat(12, 1fr)',
-      autoFlow: 'dense',
-      autoColumns: 'auto',
-      autoRows: 'auto',
-      justifyItems: 'stretch',
-
-      margin: '- -Z2 B1',
-      gap: 'A'
-    },
-
-    childExtend: ComponentTemplate,
-    $setStateCollection: ({ state }) => {
-      const { COMPONENTS } = state.__system
-      return Object.values(COMPONENTS)
+  grid: {
+    class: { grid },
+    style: { flex: 1 },
+
+    content: (el, s) => {
+      if (!el.__root.state.LIBRARY) return
+      const { LIBRARY } = el.__root.state
+      const keys = Object.keys(LIBRARY)
+      const Symbols = keys.map(val => {
+        const v = LIBRARY[val]
+        return {
+          key: v.key,
+          title: v.title,
+          description: v.description,
+          category: v.category,
+          component: v.component,
+          interactivity: v.interactivity,
+          dataTypes: v.dataTypes,
+          code: v.code,
+          params: v.params,
+          settings: v.settings
+        }
+      })
+      return {
+        tag: 'fragment',
+        childProto: ComponentTemplate,
+
+        ...Symbols
+      }
     }
   }
 }