@symbo.ls/preview 0.0.35 → 0.0.36

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/app.js

@@ -18,9 +18,11 @@ const SUB_ROUTES = {}
 Object.keys(DesignSystem.routes).map(route => {
   SUB_ROUTES[route] = {
     extend: DesignSystem,
-    sidebar: {},
-    main: {
-      extend: DesignSystem.routes[route]
+    page: {
+      sidebar: {},
+      main: {
+        extend: DesignSystem.routes[route]
+      }
     },
     __filepath: 'pages/index.js'
   }

package/src/pages/DesignSystem/index.js

@@ -1,6 +1,7 @@
 'use strict'
 
-import { ClickableItem, Flex, Link, SquareButton } from '@symbo.ls/components'
+import { router } from '@domql/router'
+import { ClickableItem, Flex, Link, ResponsivePreview, SquareButton } from '@symbo.ls/components'
 import { PageExtend,
   Color,
   Theme,
@@ -8,7 +9,8 @@ import { PageExtend,
   Spaces,
   Icons,
   Typography,
-  Fonts
+  Fonts,
+  MediaQuery
 } from '..'
 
 const NAV = [{
@@ -49,7 +51,7 @@ const NAV = [{
 }, {
   props: {
     icon: 'device mobile half fill',
-    href: '/responsive',
+    href: '/media-query',
     opacity: '.7'
   }
 }, {
@@ -65,15 +67,12 @@ const NAV = [{
 }]
 
 export const DesignSystem = {
-  extend: PageExtend,
-
   props: {
     maxWidth: '100%',
     width: '100%',
-    flow: 'row',
-    align: 'flex-start flex-start',
-    gap: 'B1',
-    padding: 'D2 A B1'
+    flow: 'column',
+    padding: '- - C1',
+    gap: 'B1'
   },
 
   define: { routes: param => param },
@@ -85,43 +84,75 @@ export const DesignSystem = {
     '/fonts': Fonts,
     '/space': Spaces,
     '/shape': Shapes,
-    '/icons': Icons
+    '/icons': Icons,
+    '/media-query': MediaQuery
     // '/sequence': Sequence,
     // '/timing': Timing,
-    // '/media-query': MediaQuery
   },
 
-  sidebar: {
-    tag: 'nav',
-    extend: Flex,
-    childExtend: {
-      extend: [ClickableItem, Link, SquareButton],
-      props: ({ props }) => ({
-        active: props.href === window.location.pathname,
-        theme: null
-      })
-    },
+  page: {
+    extend: PageExtend,
 
     props: {
+      maxWidth: '100%',
+      width: '100%',
+      flow: 'row',
+      align: 'flex-start flex-start',
       gap: 'B1',
-      flow: 'column',
-      background: 'transparent',
-      color: 'gray7',
-      fontSize: 'A2',
-      position: 'sticky',
-      top: 'E'
+      padding: 'D2 A B1'
     },
 
-    ...NAV
-  },
+    sidebar: {
+      tag: 'nav',
+      extend: Flex,
+      childExtend: {
+        extend: [ClickableItem, Link, SquareButton],
+        props: ({ props }) => ({
+          active: props.href === window.location.pathname,
+          theme: null
+        })
+      },
 
-  main: {
-    tag: 'section',
-    extend: PageExtend,
+      props: {
+        gap: 'B1',
+        flow: 'column',
+        background: 'transparent',
+        color: 'gray7',
+        fontSize: 'A2',
+        position: 'sticky',
+        top: 'E'
+      },
+
+      ...NAV
+    },
+
+    main: {
+      tag: 'section',
+      extend: PageExtend,
 
+      props: {
+        flex: 1,
+        padding: '0 C1 B1'
+      }
+    }
+  },
+
+  widget: {
     props: {
-      flex: 1,
-      padding: '0 C1 B1'
+      padding: 'C B1 - B1'
+    },
+
+    define: { routes: param => param },
+    routes: {
+      '/media-query': ResponsivePreview
+    },
+
+    on: {
+      render: element => {
+        const { pathname, hash } = window.location
+        const url = pathname + hash
+        router(element, url, {})
+      }
     }
   }
 }

package/src/pages/Export/scene.js

@@ -56,5 +56,11 @@ export default {
         }
       }
     }
+  },
+
+  on: {
+    update: (el, s) => {
+      el.__root.node.scrollTo({ top: 0, behavior: 'smooth' })
+    }
   }
 }

package/src/pages/MediaQuery/index.js

@@ -0,0 +1,12 @@
+'use strict'
+
+import state from './state'
+
+export const MediaQuery = {
+  state,
+
+  SectionHeader: {
+    title: 'Responsive',
+    p: 'A Design System is the single source of truth that defines all design elements and allows the crews to assemble components and compose them into more complex apps.'
+  }
+}

package/src/pages/MediaQuery/state.js

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

package/src/pages/MediaQuery/typeScale.js

@@ -0,0 +1,69 @@
+'use strict'
+
+import {
+  TestText,
+  Flex
+} from '@symbo.ls/components'
+
+export default {
+  extend: Flex,
+
+  props: {
+    gap: 'D',
+    align: 'flex-start flex-start',
+
+    sidebar: {
+      padding: 'B 0 0',
+      widthRange: 'F2',
+      position: 'sticky',
+      top: 'E'
+    },
+
+    content: {
+      overflow: 'hidden',
+      flex: '1',
+      flow: 'column',
+      gap: 'C',
+
+      header: {
+        align: 'flex-end space-between',
+        padding: '0 0 0 C',
+        gap: 'C1'
+      },
+
+      footer: {
+        padding: '0 0 0 C'
+      }
+    }
+  },
+
+  sidebar: {
+    SectionHeader: {
+      title: 'TypeScale',
+      p: 'Generate text sequence by a base size and ratio'
+    },
+
+    SequenceSliders: {
+      flow: 'column'
+    },
+
+    Paragraph: {
+      margin: '0',
+      fontSize: 'Z2',
+      padding: 'B2 0',
+      text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
+    }
+  },
+
+  content: {
+    extend: Flex,
+
+    header: {
+      extend: Flex,
+      TestText
+    },
+
+    sequence: {
+    }
+  }
+}

package/src/pages/Spaces/Preview.js

@@ -11,7 +11,8 @@ export const Preview = {
   extend: Scene,
 
   props: {
-    margin: '0 -Z1'
+    margin: '0 -Z1',
+    maxHeight: '25vh'
   },
 
   scene: {

package/src/pages/Typography/index.js

@@ -2,7 +2,7 @@
 
 import state from './state'
 
-import typeScale from './typeScale' // eslint-disable-line no-unused-vars
+import typeScale from './typeScale'
 import documentStyles from './documentStyles'
 
 export const Typography = {

package/src/pages/index.js

@@ -11,4 +11,6 @@ export * from './Theme'
 export * from './Shapes'
 export * from './Spaces'
 export * from './Typography'
+export * from './MediaQuery'
+
 export * from './DesignSystem'