@symbo.ls/preview 0.0.97 → 2.0.7

package/src/pages/Editor/layers.js

@@ -1,16 +1,16 @@
 ' use strict'
 
-import { Shape, Block, Flex, Text, Icon } from '@symbo.ls/components'
+import { Shape, Block, Flex, Text, Icon } from '@symbo.ls/all'
 
 const objectLayer = {
-  extend: [Block, Text, Shape],
+  proto: [Block, Text, Shape],
   props: {
     round: 'A',
     padding: '0 Y Y Y'
   },
 
   h4: {
-    extend: [Block, Text],
+    proto: [Block, Text],
     props: {
       text: 'Button',
       padding: 'A 0 A1 A1'
@@ -19,7 +19,7 @@ const objectLayer = {
   },
 
   caption: {
-    extend: [Block, Text],
+    proto: [Block, Text],
     props: {
       text: 'IconText',
       padding: '0 0 A B1'
@@ -27,10 +27,10 @@ const objectLayer = {
   },
 
   objectComponent: {
-    extend: [Block, Flex],
+    proto: [Block, Flex],
     style: { flexDirection: 'column' },
-    childExtend: {
-      extend: [Block, Flex, Text, Shape],
+    childProto: {
+      proto: [Block, Flex, Text, Shape],
       props: {
         padding: 'Z2 0 Z2 B1',
         round: 'A'
@@ -38,13 +38,13 @@ const objectLayer = {
       style: {
         alignItems: 'center'
       },
-      icon: { extend: Icon },
+      icon: { proto: Icon },
       caption: {
-        extend: [Block, Text],
+        proto: [Block, Text],
         props: { padding: '0 X2 0 Y' }
       },
       span: {
-        extend: Text,
+        proto: Text,
         style: { opacity: '.35' }
       }
     },
@@ -72,11 +72,11 @@ const objectLayer = {
 
 export default {
   tag: 'aside',
-  extend: [Block, Text],
+  proto: [Block, Text],
   props: { size: 'Y' },
 
   caption: {
-    extend: [Block, Text],
+    proto: [Block, Text],
     props: {
       text: 'Layer'
     },
@@ -92,7 +92,7 @@ export default {
   },
 
   layer: {
-    extend: objectLayer,
+    proto: objectLayer,
     props: {
       theme: 'buttonPrimary'
     },
@@ -102,7 +102,7 @@ export default {
     objectComponent: {},
 
     layer2: {
-      extend: objectLayer,
+      proto: objectLayer,
       style: {
         margin: '0 auto',
         background: 'rgba(255, 255, 255, .04)',

package/src/pages/Editor/scene.js

@@ -1,16 +1,16 @@
 'use strict'
 
-import { Block, Flex, Text, KangorooButton, Breadcrumb, SceneToolBar, Scene } from '@symbo.ls/components'
+import { Block, Flex, Text, KangorooButton, Breadcrumb, SceneToolBar, Scene } from '@symbo.ls/all'
 
 const header = {
-  extend: [Flex, Block],
+  proto: [Flex, Block],
   style: {
     justifyContent: 'space-between',
     marginTop: '12px',
     marginBottom: '4px'
   },
   nav: {
-    extend: [Breadcrumb, Text],
+    proto: [Breadcrumb, Text],
     props: { size: 'A' },
     all: {
       props: {
@@ -29,10 +29,11 @@ const header = {
 }
 
 const buttonThemeSwitcher = {
-  extend: KangorooButton,
+  proto: KangorooButton,
 
   props: {
     round: 'C',
+    theme: 'lightDark',
     size: 'A',
     padding: 'X1 Y X1 A1',
     gap: 'Z1',
@@ -44,6 +45,7 @@ const buttonThemeSwitcher = {
     },
 
     dark: {
+      theme: ['lightDark', 'inverse'],
       round: 'C',
       icon: 'moon',
       padding: 'Z Z1',
@@ -76,14 +78,14 @@ const buttonThemeSwitcher = {
 
 }
 export default {
-  extend: Flex,
+  proto: Flex,
   style: {
     flex: 1,
     flexDirection: 'column'
   },
-  header: { extend: header },
+  header: { proto: header },
   scene: {
-    extend: Scene,
+    proto: Scene,
     style: {
       flex: 1,
       '> div': { height: '100%' }

package/src/pages/Editor/tools.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { Shape, Block, Flex, Text, SquareButton, ButtonSet, ClickableItem, ThemeSwitcher, ToolItem } from '@symbo.ls/components'
+import { Shape, Block, Flex, Text, SquareButton, ButtonSet, ClickableItem, ThemeSwitcher, ToolItem } from '@symbo.ls/all'
 
 const commonComponent = {
-  extend: Block,
+  proto: Block,
   caption: {
-    extend: [Block, Text],
+    proto: [Block, Text],
     props: {
       padding: 'A X'
     },
@@ -15,7 +15,7 @@ const commonComponent = {
     }
   },
   toolsContainer: {
-    extend: [Block, Shape, Flex],
+    proto: [Block, Shape, Flex],
     props: {
       gap: 'A',
       padding: 'A 0',
@@ -27,13 +27,13 @@ const commonComponent = {
       background: 'rgba(255, 255, 255, .06)'
     },
     tools: {
-      extend: [Block, Flex],
+      proto: [Block, Flex],
       props: { gap: 'A' },
       style: {
         flexDirection: 'column'
       },
-      childExtend: {
-        extend: ToolItem,
+      childProto: {
+        proto: ToolItem,
         icon: { },
         tool: {
           props: { padding: 'X2' },
@@ -45,7 +45,7 @@ const commonComponent = {
           range: {},
           button1: { props: { size: 'B' } },
           button2: {
-            extend: [SquareButton, ClickableItem],
+            proto: [SquareButton, ClickableItem],
             props: {
               icon: 'arrowAngleMirroringVertical',
               size: 'B',
@@ -60,7 +60,7 @@ const commonComponent = {
 }
 
 const themeSwitcher = {
-  extend: ThemeSwitcher,
+  proto: ThemeSwitcher,
   props: {
     padding: 'Y2 X2 Y2 Z'
   },
@@ -83,7 +83,7 @@ const themeSwitcher = {
   },
 
   title: {
-    extend: [Flex, Block],
+    proto: [Flex, Block],
     props: { gap: 'W' },
     style: { flexDirection: 'column' },
     text: 'Revolver',
@@ -105,7 +105,7 @@ const themeSwitcher = {
 }
 
 const style = {
-  extend: commonComponent,
+  proto: commonComponent,
   caption: {
     props: { text: 'style' }
   },
@@ -142,7 +142,7 @@ const style = {
 }
 
 const spaces = {
-  extend: commonComponent,
+  proto: commonComponent,
   caption: { props: { text: 'spaces' } },
   toolsContainer: {
     tools: {
@@ -185,7 +185,7 @@ const spaces = {
 }
 
 const border = {
-  extend: commonComponent,
+  proto: commonComponent,
   caption: { props: { text: 'border' } },
   toolsContainer: {
     tools: {
@@ -219,7 +219,7 @@ const border = {
 }
 
 const form = {
-  extend: commonComponent,
+  proto: commonComponent,
   caption: { props: { text: 'form' } },
   toolsContainer: {
     tools: {
@@ -230,7 +230,7 @@ const form = {
           tool: {
             button0: null,
             box: {
-              extend: [Block, Shape],
+              proto: [Block, Shape],
               props: {
                 round: 'X2'
               },
@@ -278,14 +278,14 @@ const form = {
 }
 
 export const accessibilityButoons = {
-  extend: ButtonSet,
+  proto: ButtonSet,
   props: {
     gap: 'A1',
     padding: '0 0 Z 0'
   },
 
-  childExtend: {
-    extend: SquareButton,
+  childProto: {
+    proto: SquareButton,
     props: {
       theme: 'transparent',
       size: 'C'
@@ -301,7 +301,7 @@ export const accessibilityButoons = {
 }
 
 const accessibility = {
-  extend: commonComponent,
+  proto: commonComponent,
   caption: { props: { text: 'accessibility' } },
   toolsContainer: {
     accessibilityButoons,
@@ -313,7 +313,7 @@ const accessibility = {
           tool: {
             button0: null,
             box: {
-              extend: [Block, Shape],
+              proto: [Block, Shape],
               props: {
                 round: 'X2'
               },
@@ -344,12 +344,12 @@ const accessibility = {
 
 export default {
   tag: 'aside',
-  extend: [Block, Text],
+  proto: [Block, Text],
   props: { size: 'Y' },
   style: {
     paddingTop: '10px'
   },
-  childExtend: commonComponent,
+  childProto: commonComponent,
   ...[
     style,
     spaces,

package/{.legacy → src/pages/Export}/_tools_old.js

@@ -6,15 +6,15 @@ import {
   styleKangoroo
 } from './style'
 
-import { Button, Icon } from '@symbo.ls/components'
+import { Button, Icon } from '@symbo.ls/all'
 
 export const KangorooButton = {
   style: styleKangoroo,
   tag: 'button',
-  icon: { extend: Icon, name: 'sun' },
+  icon: { proto: Icon, name: 'sun' },
   text: 'light mode',
   button: {
-    icon: { extend: Icon, name: 'moon' },
+    icon: { proto: Icon, name: 'moon' },
     text: 'go dark'
   }
 }
@@ -22,14 +22,13 @@ export const KangorooButton = {
 export const ResponsiveToolBar = {
   tag: 'nav',
 
-  childExtend: {
-    extend: Button,
+  childProto: {
+    proto: Button,
     style: screenButton,
     define: { active: param => param },
     class: {
       active: (el, s) => el.key === s.previewSize
-        ? activeScreenButton
-: {}
+        ? activeScreenButton : {}
     },
     on: {
       click: (ev, el, s) => {

package/src/pages/Export/const.js

@@ -1,11 +1,12 @@
 'use strict'
 
-import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/scratch'
-import { LIBRARY, COMPONENTS } from '@symbo.ls/temp-db/symbols' // eslint-disable-line
+import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/all'
+import COMPONENTS from '../../data/components'
+import LIBRARIES from '../../data/library'
 
 const COMPONENT_ROUTES = {}
-// LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 COMPONENTS.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
+LIBRARIES.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]
 

package/src/pages/Export/description.js

@@ -1,87 +1,116 @@
 'use strict'
 
-// 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: {
+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',
       size: 'Z',
-      padding: '0 0 Y2 0',
-      opacity: 0.5
-    },
-    p: {
-      margin: '0'
+      padding: '0 0 Y2 0'
     }
   },
-  caption: {
-    text: 'Description'
-  },
   p: {
-    text: ({ state }) => state.description
+    proto: Text,
+    props: {
+      text: 'Kangoroo buttons are button compositions where the original button contain one or more child buttons.'
+    },
+    style: { margin: 0 }
   }
 }
 
-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 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'
 }
 
 export default {
   tag: 'article',
+  style: styleArticle,
+  proto: Block,
   props: { padding: 'B2 0' },
 
   description,
 
-  readme,
-
   usage: {
-    extend: [Flex],
+    proto: [Block, Flex],
     props: { gap: 'C1' },
 
     table: {
-      props: { flex: 1 },
-      extend: PropertyList,
-      if: ({ state }) => state.props,
+      proto: APITable,
+      style: { flex: 1 },
 
-      title: {},
-      list: {
-        $setStateCollection: ({ 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
+        }
       }
     },
 
     code: {
-      extend: 'Code',
-      props: {
-        flex: '0 0 320px',
-        margin: '0'
-      },
-      if: ({ state }) => state.code,
-      title: {},
-      code: {
-        text: ({ state }) => state.code
+      proto: CodePreview,
+      h4: {},
+      pre: {
+        style: {
+          width: `${270 / 16}em`
+        },
+        text: el => {
+          const props = el.lookup('content').props
+          return props.code
+        }
       }
     }
   }

package/src/pages/Export/header.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { Flex, Block, Breadcrumb, SceneToolBar } from '@symbo.ls/all'
+import { styleHeader } from './style'
+
+export default {
+  tag: 'header',
+  proto: [Flex, Block],
+  props: { padding: 'Z 0 Z Y' },
+  style: styleHeader,
+
+  nav: {
+    proto: Breadcrumb,
+
+    all: {
+      props: {
+        href: '/components',
+        text: 'Components'
+      }
+    },
+    category: {
+      if: el => el.lookup('content').props.category.text,
+      props: (el) => {
+        const props = el.lookup('content').props
+        return {
+          href: `/components/${props.category.key}`,
+          text: props.category.text
+        }
+      }
+    },
+    title: {
+      text: el => el.lookup('content').props.title
+    }
+  },
+
+  sceneTools: { proto: SceneToolBar }
+}

package/src/pages/Export/index.js

@@ -1,81 +1,72 @@
 'use strict'
 
-import { router, lastLevel } from '@domql/router' // eslint-disable-line no-unused-vars
+import style from './style'
 
-import { Flex } from '@symbo.ls/components'
-import { Page } from '../../components'
+import router from 'domql-preview/packages/router'
+import { Block, Footer, ResponsiveToolBar } from '@symbo.ls/all'
+import PageProto from '../PageProto'
 
 import state from './state'
+import header from './header'
 import scene from './scene'
 import tools from './tools'
 import description from './description'
 
-import { fetchGist } from './gist'
-
-import { COMPONENT_ROUTES } from './const'
-
-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
-  })
-}
-
-export const Export = {
+export default {
   key: 'export',
-  extend: Flex,
+  proto: Block,
 
-  props: {
-    width: '100%',
-    flow: 'column',
-    padding: '0 Y2'
-  },
+  style,
+
+  props: { padding: '0 A 0 A' },
 
   state,
 
   on: {
-    stateCreated: (element, state) => {
+    init: (el, s) => {
+      const { LIBRARY } = el.parent.state
+
       const route = window.location.pathname
       const routes = route.slice(1).split('/')
-      const componentKey = routes[1]
-      const { COMPONENTS } = state.__system
 
-      const libComponent = COMPONENT_ROUTES[`/${componentKey}`]
-      const liveComponent = COMPONENTS[componentKey]
+      const ROUTES = {}
+      const keys = Object.keys(LIBRARY)
+      keys.map(v => (ROUTES[`/${LIBRARY[v].key}`] = LIBRARY[v]))
 
-      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')
+      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
     }
   },
 
   main: {
+    proto: PageProto,
     style: { maxWidth: 'none' },
+
+    header,
     scene
   },
 
-  cnt: {
-    extend: [Page],
+  div: {
+    proto: [PageProto],
+
+    style: { flex: '1' },
 
-    props: {
-      padding: 'Z2 C1 A',
-      flex: '1'
+    tools: {
+      proto: Block,
+      props: {
+        padding: 'Z2 0 0 0',
+        flexAlign: 'center space-between'
+      },
+
+      tools,
+
+      responsive: { proto: ResponsiveToolBar }
     },
 
-    tools,
     description
-  }
+  },
 
-  // footer: { extend: Footer }
+  footer: { proto: Footer }
 }