@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/Export/description.js

@@ -1,116 +1,87 @@
 'use strict'
 
-import { Block, Text, Flex, APITable, CodePreview } from '@symbo.ls/all'
-
-import { styleArticle } from './style'
-
-export const description = {
-  proto: Block,
-  props: { padding: '0 0 B 0' },
-  caption: {
-    proto: [Text, Block],
-    props: {
-      text: 'Description',
+// import showdown from 'showdown'
+import { CommonField, Flex, PropertyList } from '@symbo.ls/components'
+
+const description = {
+  extend: CommonField,
+  if: ({ state }) => state.description,
+  props: {
+    padding: '0 0 B 0',
+    caption: {
       size: 'Z',
-      padding: '0 0 Y2 0'
+      padding: '0 0 Y2 0',
+      opacity: 0.5
+    },
+    p: {
+      margin: '0'
     }
   },
+  caption: {
+    text: 'Description'
+  },
   p: {
-    proto: Text,
-    props: {
-      text: 'Kangoroo buttons are button compositions where the original button contain one or more child buttons.'
-    },
-    style: { margin: 0 }
+    text: ({ state }) => state.description
   }
 }
 
-export const readme = {}
-
-const ALL_PROPS = {
-  // Shape
-  shape: 'Name of the shape from the Shapes page',
-  shapeDirection: 'if the shape is either `tooltip` or `tag`, this field sets the direction of pointing the shape',
-  depth: 'The level of the shadow that adds depth to the element',
-  round: 'Rounding the shape - also so called border-radius',
-  theme: 'Name of the theme which is configured in the Color Themes page',
-  color: 'Setting the specific text color matching with one from the Color Palette page',
-  background: 'Setting the specific background color matching with one from the Color Palette page',
-
-  // Block
-  spacingRatio: 'Ratio of the spacing sequence',
-  width: 'Width of the element',
-  height: 'Height of the element',
-  padding: 'Inner space of the element',
-  margin: 'Outer space of the element',
-  gap: 'Space between children inside the element',
-
-  // Flex
-  flexDirection: '',
-  alignItems: '',
-  justifyContent: '',
-
-  // Text
-  text: 'Text value in the element',
-  size: 'Text size of the element',
-
-  // Img
-  src: 'Source path (eg Link) of the image',
-  alt: 'Alternative text in case image does not load',
-  title: 'Title when hovering the image',
-
-  // Icon
-  icon: 'Name of the icon from the Icons page',
-
-  // TextDirection
-  direction: 'Language direction of the component'
+const readme = {
+  extend: CommonField,
+  if: ({ state }) => state.readme,
+  props: ({ state }) => ({
+    padding: '0 0 B 0',
+    caption: {
+      text: 'README.md',
+      size: 'Z',
+      opacity: 0.5,
+      padding: '0 0 Y2 0'
+    },
+    p: {
+      margin: '0'
+    }
+  }),
+  caption: {},
+  cnt: {
+    html: ({ state }) => {
+      // const converter = new showdown.Converter()
+      // return converter.makeHtml(state.readme)
+    }
+  }
 }
 
 export default {
   tag: 'article',
-  style: styleArticle,
-  proto: Block,
   props: { padding: 'B2 0' },
 
   description,
 
+  readme,
+
   usage: {
-    proto: [Block, Flex],
+    extend: [Flex],
     props: { gap: 'C1' },
 
     table: {
-      proto: APITable,
-      style: { flex: 1 },
+      props: { flex: 1 },
+      extend: PropertyList,
+      if: ({ state }) => state.props,
 
-      header: {},
-      properties: {
-        content: el => {
-          const props = el.lookup('content').props.defaultProps
-          const obj = {}
-          Object.keys(props).map(prop => {
-            const value = props[prop]
-            const type = typeof value
-            const formattedValue = `${JSON.stringify(value)}`
-            const description = ALL_PROPS[prop]
-            obj[`_${prop}`] = {
-              props: { prop, type, formattedValue, description }
-            }
-          })
-          return obj
-        }
+      title: {},
+      list: {
+        $setStateCollection: ({ state }) => state.props
       }
     },
 
     code: {
-      proto: CodePreview,
-      h4: {},
-      pre: {
-        style: {
-          width: `${270 / 16}em`
-        },
-        text: el => {
-          const props = el.lookup('content').props
-          return props.code
-        }
+      extend: 'Code',
+      props: {
+        flex: '0 0 320px',
+        margin: '0'
+      },
+      if: ({ state }) => state.code,
+      title: {},
+      code: {
+        text: ({ state }) => state.code
       }
     }
   }

package/src/pages/Export/gist.js

@@ -0,0 +1,23 @@
+'use strict'
+
+export const fetchGist = (key, state) => {
+  window.fetch(`https://api.github.com/gists/${key}`, {
+    headers: {
+      Authorization: `token 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`
+    }
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      const { description, files } = data
+      const component = files['component.js'].content
+      const readme = files['README.md'].content
+      const props = files['props.js'] // .content
+
+      state.update({
+        readme,
+        component,
+        description,
+        props
+      })
+    })
+}

package/src/pages/Export/index.js

@@ -1,72 +1,81 @@
 'use strict'
 
-import style from './style'
+import { router, lastLevel } from '@domql/router' // eslint-disable-line no-unused-vars
 
-import router from 'domql-preview/packages/router'
-import { Block, Footer, ResponsiveToolBar } from '@symbo.ls/all'
-import PageProto from '../PageProto'
+import { Flex } from '@symbo.ls/components'
+import { Page } from '../../components'
 
 import state from './state'
-import header from './header'
 import scene from './scene'
 import tools from './tools'
 import description from './description'
 
-export default {
-  key: 'export',
-  proto: Block,
+import { fetchGist } from './gist'
+
+import { COMPONENT_ROUTES } from './const'
 
-  style,
+const componentState = (context) => { // eslint-disable-line no-unused-vars
+  const arr = [...context.LIBRARY, ...context.COMPONENTS]
+  return arr.filter(v => {
+    const key = window.location.pathname.split('component/')[1]
+    return v.key === key
+  })
+}
 
-  props: { padding: '0 A 0 A' },
+export const Export = {
+  key: 'export',
+  extend: Flex,
+
+  props: {
+    width: '100%',
+    flow: 'column',
+    padding: '0 Y2'
+  },
 
   state,
 
   on: {
-    init: (el, s) => {
-      const { LIBRARY } = el.parent.state
-
+    stateCreated: (element, state) => {
       const route = window.location.pathname
       const routes = route.slice(1).split('/')
+      const componentKey = routes[1]
+      const { COMPONENTS } = state.__system
 
-      const ROUTES = {}
-      const keys = Object.keys(LIBRARY)
-      keys.map(v => (ROUTES[`/${LIBRARY[v].key}`] = LIBRARY[v]))
+      const libComponent = COMPONENT_ROUTES[`/${componentKey}`]
+      const liveComponent = COMPONENTS[componentKey]
 
-      const content = ROUTES[`/${routes[1]}`]
-      if (!content) return router(el.lookup('app'), '/components')
-      el.props = content || {}
-      if (content.defaultProps.theme) s.theme = content.defaultProps.theme
+      const content = libComponent || liveComponent
+
+      if (content) {
+        state.update({
+          live: !!liveComponent,
+          ...content
+        }, { preventUpdate: true })
+      }
+      if (componentKey.length === 32) { // this might be Gist
+        fetchGist(componentKey, state)
+      }
+
+      // if (!content) return router(el.__root, '/components')
     }
   },
 
   main: {
-    proto: PageProto,
     style: { maxWidth: 'none' },
-
-    header,
     scene
   },
 
-  div: {
-    proto: [PageProto],
-
-    style: { flex: '1' },
+  cnt: {
+    extend: [Page],
 
-    tools: {
-      proto: Block,
-      props: {
-        padding: 'Z2 0 0 0',
-        flexAlign: 'center space-between'
-      },
-
-      tools,
-
-      responsive: { proto: ResponsiveToolBar }
+    props: {
+      padding: 'Z2 C1 A',
+      flex: '1'
     },
 
+    tools,
     description
-  },
+  }
 
-  footer: { proto: Footer }
+  // footer: { extend: Footer }
 }

package/src/pages/Export/scene.js

@@ -1,55 +1,40 @@
 'use strict'
 
-import { Text, TYPOGRAPHY, returnSubThemeOrDefault, Scene } from '@symbo.ls/all'
+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 { COMPONENT_ROUTES } from './const'
+import { getActiveConfig, activateConfig } from '@symbo.ls/scratch'
+import { init, Box, Scene } from '@symbo.ls/components'
 
-const BREAKPOINTS = {
-  mobile: '375px',
-  tabletPortrait: '728px',
-  tabletLandscape: '1024px',
-  small: '1440px',
-  big: '1920px',
-  unset: '100%'
-}
+import * as components from '../../components'
+
+const emCache = {}
 
 export default {
-  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'
-  },
+  extend: Scene,
 
-  class: {
-    s: (el, s) => ({
-      maxWidth: BREAKPOINTS[s.previewSize]
-    })
+  props: (el, s) => {
+    const CONFIG = getActiveConfig()
+    const { BREAKPOINTS } = CONFIG
+    const previewSize = BREAKPOINTS[s.previewSize]
+    return {
+      width: '100%',
+      maxWidth: previewSize ? previewSize + 'px' : '100%',
+      margin: '- auto'
+    }
   },
 
   scene: {
-    style: {
-      padding: '3em 0',
+    props: {
+      padding: 'B 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)})`
@@ -57,35 +42,87 @@ export default {
       })
     },
 
-    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)'
+    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]
+              }
             }
+          })
+
+          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: {
-      render: (el, s) => {
-        // el.__root.state.update({ activePage: el.props.title })
-      }
+  on: {
+    update: (el, s) => {
+      el.__root.node.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }
 }

package/src/pages/Export/state.js

@@ -1,7 +1,6 @@
 'use strict'
 
-import { SPACING } from '@symbo.ls/all'
-import { TYPOGRAPHY_SEQUENCE } from './const'
+import { SPACING, TYPOGRAPHY } from '@symbo.ls/scratch'
 
 export default {
   descriptionTheme: 'dark',
@@ -9,7 +8,14 @@ export default {
   sceneTheme: 'dark',
   theme: '',
   zoomLevel: 1,
-  sequence: TYPOGRAPHY_SEQUENCE,
-  spacingRatio: SPACING.ratio,
-  currentFontSizeIndex: 3
+  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.'
 }

package/src/pages/Export/tools.js

@@ -1,97 +1,52 @@
 'use strict'
 
-import { isArray } from 'domql-preview/src/utils'
-import { Flex, Block, SEQUENCE, ThemeSwitcher, SliderToolItem } from '@symbo.ls/all'
+import {
+  Flex,
+  SequenceSliders,
+  ClickableItem,
+  SquareButton
+} from '@symbo.ls/components'
 
-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)
-  })
-}
-
-export const FontSizeTool = {
-  proto: SliderToolItem,
-  props: (el, s) => ({
-    type: 'fontSize',
-    icon: 'fontSize',
+export default {
+  props: {
+    padding: 'Z2 0 0',
+    flexAlign: 'center space-between'
+  },
 
-    value: s.sequence[s.currentFontSizeIndex],
-    min: s.sequence[0],
-    max: s.sequence[Object.keys(s.sequence).length - 1],
+  tools: {
+    extend: Flex,
+    props: { gap: 'B1' },
+    // theme: { extend: ThemeSwitcher },
 
-    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 })
+    sliders: {
+      extend: SequenceSliders,
+      childExtend: { title: null }
     }
-  })
-}
-
-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] })
+  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'
+          })
+        }
+      }
     },
-    input: (ev, el, s) => {
-      const value = el.node.value
-      const sequenceValues = Object.values(SEQUENCE)
-      const findMatch = closestNumber(value, sequenceValues)
-      s.update({ spacingRatio: findMatch })
+
+    VerticalLine: {
+      margin: 'auto 0',
+      height: 'A2'
     },
-    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] })
-    }
-  })
-}
 
-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 }
+    ResponsiveToolBar: {}
+  }
 }