@symbo.ls/preview 0.0.46 → 0.0.48

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@domql/router": "latest",
-    "@domql/tags": "^2.2.1",
+    "@domql/tags": "latest",
     "@symbo.ls/components": "latest",
     "@symbo.ls/config": "latest",
     "@symbo.ls/icons": "latest",

package/src/components/ResponsivePreview.js

@@ -0,0 +1,48 @@
+'use strict'
+
+import { Flex, ResponsiveToolBar, ResponsiveSreensPreview } from '@symbo.ls/components'
+
+const footer = {
+  extend: Flex,
+  props: {
+    gap: 'A1',
+    align: 'center space-between',
+
+    title: {
+      text: 'For the best experience, check it out from screens larger than 1980px',
+      color: 'gray6'
+    }
+  },
+
+  title: {
+    extend: 'Paragraph',
+    props: { margin: '0' }
+  },
+
+  screenButtons: {
+    extend: ResponsiveToolBar,
+    devices: {
+      childExtend: {
+        on: {
+          click: (ev, el, s) => {
+            const previewSize = s.parent.previewSize !== s.key ? s.key : 'mobileS'
+            s.parent.update({ previewSize })
+          }
+        }
+      }
+    }
+  }
+}
+
+export const ResponsivePreview = {
+  extend: ResponsiveSreensPreview,
+
+  props: {
+    position: 'absolute',
+    left: 'B',
+    right: 'B',
+    padding: '0 0 B'
+  },
+
+  footer
+}

package/src/components/ShapePreview.js

@@ -0,0 +1,63 @@
+'use strict'
+
+import { Scene, Flex, Code } from '@symbo.ls/components'
+
+const scene = {
+  extend: Scene,
+
+  scene: {
+    props: {
+      content: {
+        background: 'shape 1',
+        color: 'gray11',
+        padding: 'Z A1',
+        text: 'Shape Preview'
+      }
+    },
+
+    on: {
+      update: (el, s) => {
+        el.set({
+          props: s.props
+        })
+      }
+    }
+  }
+}
+
+export const ShapePreview = {
+  extend: Flex,
+  props: {
+    height: 'E3',
+    zIndex: '9999',
+    gap: 'A',
+    alignItems: 'stretch ',
+
+    scene: { flex: 1 },
+
+    style: {
+      backdropFilter: 'blur(15px)'
+    }
+  },
+
+  scene,
+  code: {
+    extend: Code,
+    props: ({ state }) => ({
+      hide: Object.keys(state.props).length === 0,
+      flex: '0 0 360px',
+      margin: '0',
+      code: {
+        height: '100%',
+        margin: '0'
+      },
+      buttons: { marginInline: 'X2' }
+    }),
+    title: null,
+    code: {
+      props: {
+        text: ({ state }) => 'const props = ' + JSON.stringify(state.props, null, 2)
+      }
+    }
+  }
+}

package/src/components/ShapeSet.js

@@ -1,46 +1,85 @@
 'use strict'
 
-import { Link, Flex, ClickableItem } from '@symbo.ls/components'
+import { ClickableItem, Flex } from '@symbo.ls/components'
+
+const isActive = (el, s) => s.parent.active === `${el.parent.parent.parent.key}-${el.key}`
 
 const ShapeItem = {
-  extend: [ClickableItem, Link, Flex],
+  extend: [ClickableItem, Flex],
 
-  props: el => ({
-    href: `/shapes/${el.parent.parent.key}-${el.key}`,
+  props: (el, s) => ({
     padding: 'B',
     round: 'Z',
-    background: 'white .05',
     alignItems: 'center',
     justifyContent: 'center',
-    theme: 'tertiary',
+    outline: '0, shape, solid',
+    background: 'gray1',
+    theme: null,
+    cursor: 'pointer',
+
+    active: isActive(el, s),
+
+    '.active': {
+      outline: 'X, shape, solid',
+      opacity: '1',
+      background: 'gray2'
+    },
 
     _shape: {
-      theme: 'quinary',
-      width: 'C',
-      height: 'C'
+      transition: 'A default-bezier',
+      transitionProperty: 'background',
+      width: 'C1',
+      height: 'C1',
+      background: 'gray5'
     }
   }),
 
-  _shape: {}
+  _shape: {},
+
+  on: {
+    click: (ev, el, s) => {
+      const active = `${el.parent.parent.parent.key}-${el.key}`
+      s.parent.props = s.parse()
+      s.parent.update({ active })
+    },
+    mouseover: (ev, el, s) => {
+      el._shape.setProps({ background: 'gray5' })
+    },
+    mouseleave: (ev, el, s) => {
+      const active = isActive(el, s)
+      if (!active) el._shape.setProps({ background: 'gray3' })
+    },
+    update: (el, s) => {
+      const active = isActive(el, s)
+      el._shape.setProps({ background: active ? 'gray5' : 'gray3' })
+    }
+  }
 }
 
 export const ShapeSet = {
   props: {
     label: {
       display: 'block',
-      size: 'Y',
       opacity: '.65',
-      padding: '0 0 Z 0'
-    },
-    nav: {
-      gap: 'A',
-      flexWrap: 'wrap'
+      padding: '0 0 Z 0',
+      span: {
+        opacity: '.65'
+      }
     }
   },
 
   label: {},
-  nav: {
+  list: {
     extend: Flex,
-    childExtend: ShapeItem
+    props: {
+      gap: 'A2',
+      wrap: 'wrap'
+    },
+    childExtend: {
+      extend: ShapeItem,
+      _shape: {
+        props: ({ state }) => state
+      }
+    }
   }
 }

package/src/{pages/Spaces/Preview.js → components/SpacingPreview.js}

@@ -1,19 +1,19 @@
 'use strict'
 
-import { Grid, Scene, Flex } from '@symbo.ls/components'
+import { Grid, Scene, Flex, Code } from '@symbo.ls/components'
 
 const returnScale = (state, key, fallback) => {
   const { scales } = state
   return (scales[state.props[key] || state.props[fallback]] || 0) + 'em'
 }
 
-export const Preview = {
+const scene = {
   extend: Scene,
 
   scene: {
     boxModel: {
       extend: Grid,
-      props: {
+      props: ({ state }) => ({
         color: 'gray5',
         fontSize: 'Z',
         columns: '30px auto 30px',
@@ -23,7 +23,7 @@ export const Preview = {
           "x3 b x4"`,
         alignItems: 'center',
         textAlign: 'center'
-      },
+      }),
 
       ...[
         ...['', { text: (el, s) => s.props.paddingTop || '', style: { gridArea: 't' } }, ''],
@@ -112,3 +112,39 @@ export const Preview = {
     }
   }
 }
+
+export const SpacingPreview = {
+  extend: Flex,
+
+  props: {
+    maxHeight: '25vh',
+    zIndex: '9999',
+    gap: 'A',
+
+    scene: { flex: 1 },
+
+    style: {
+      backdropFilter: 'blur(15px)'
+    }
+  },
+
+  scene,
+  code: {
+    extend: Code,
+    props: ({ state }) => ({
+      hide: Object.keys(state.props).length === 0,
+      flex: '0 0 360px',
+      margin: '0',
+      code: {
+        margin: '0'
+      },
+      buttons: { marginInline: 'X2' }
+    }),
+    title: null,
+    code: {
+      props: {
+        text: ({ state }) => 'const props = ' + JSON.stringify(state.props, null, 2)
+      }
+    }
+  }
+}

package/src/components/index.js

@@ -2,3 +2,6 @@
 
 export * from './Header'
 export * from './ShapeSet'
+export * from './ShapePreview'
+export * from './SpacingPreview'
+export * from './ResponsivePreview'

package/src/pages/DesignSystem/Main.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex, Link, ArticleMedium } from '@symbo.ls/components'
+import { Flex, Link, ArticleMedium, QuickStart } from '@symbo.ls/components'
 
 const Banner = {
   extend: [Link, Flex, ArticleMedium],
@@ -43,27 +43,59 @@ const banners = {
   }]
 }
 
-const summary = {
-  extend: Flex,
+const header = {
+  extend: ArticleMedium,
   props: {
-    align: 'stretch space-between',
-    margin: 'C1 -Z2',
-    gap: 'B1'
+    '@mobileS': { padding: '- - - A' },
+    title: {
+      fontWeight: '600',
+      text: 'Design System takeaways'
+    },
+
+    p: { text: `Your tokens in the system`
+    },
+
+    p2: {
+      display: 'none',
+      color: 'gray6',
+      margin: '0'
+    }
   },
 
-  childExtend: Banner,
+  title: {},
+  p: {},
+  p2: {
+    tag: 'p',
+    ...[
+      'Welcome to the Symbols documentation page.',
+      { text: `Here you'll learn everything…` }
+    ]
+  }
+}
 
-  $setStateCollection: ({ state }) => [{
-    title: 'Setting up a dark theme',
-    p: '5 mins tutorial',
-    background: 'https://p194.p3.n0.cdn.getcloudapp.com/items/eDu7le4P/ef9249a0-c522-49a7-8a0e-d7152b2e73a1.png?v=c4c8cd49408f26a6046b11f35d7b0656',
-    href: ''
-  }, {
-    title: 'Learn typography scaling',
-    p: '5 mins tutorial',
-    background: '',
-    href: ''
-  }]
+const summary = {
+  header,
+
+  grid: {
+    extend: Flex,
+    props: {
+      align: 'stretch space-between',
+      margin: 'C1 -Z2',
+      gap: 'B1'
+    },
+
+    $setStateCollection: ({ state }) => [{
+      title: 'Setting up a dark theme',
+      p: '5 mins tutorial',
+      background: 'https://p194.p3.n0.cdn.getcloudapp.com/items/eDu7le4P/ef9249a0-c522-49a7-8a0e-d7152b2e73a1.png?v=c4c8cd49408f26a6046b11f35d7b0656',
+      href: ''
+    }, {
+      title: 'Learn typography scaling',
+      p: '5 mins tutorial',
+      background: '',
+      href: ''
+    }]
+  }
 }
 
 export const Main = {
@@ -73,5 +105,6 @@ export const Main = {
   },
 
   banners,
+  quickStart: { extend: QuickStart },
   summary
 }

package/src/pages/DesignSystem/index.js

@@ -1,16 +1,31 @@
 'use strict'
 
 import { router } from '@domql/router'
-import { ClickableItem, Flex, Link, ResponsivePreview, SquareButton, TooltipParent } from '@symbo.ls/components'
+
 import { Main } from './Main'
-import { PageExtend,
+import {
+  ClickableItem,
+  Flex,
+  Link,
+  SquareButton,
+  TooltipParent
+} from '@symbo.ls/components'
+
+import {
+  ShapePreview,
+  ResponsivePreview,
+  SpacingPreview
+} from '../../components'
+
+import {
+  PageExtend,
   Color,
   Theme,
   Shapes,
   Spaces,
   Icons,
   Typography,
-  Fonts, // eslint-disable-line
+  Fonts,
   MediaQuery
 } from '..'
 
@@ -70,28 +85,41 @@ const NAV = [{
   }
 }, {
   state: {
-    href: '/timing',
-    tooltip: 'Timing'
+    href: '/fonts',
+    tooltip: 'Fonts'
   },
   props: {
-    icon: { name: 'clock colored' }
-  }
-}, {
-  state: {
-    href: '/sequence',
-    tooltip: 'Sequence'
-  },
-  props: {
-    icon: { name: 'sequence colored' }
+    icon: { name: 'fontFace colored' },
+    opacity: '.7'
   }
+// }, {
+//   state: {
+//     href: '/timing',
+//     tooltip: 'Timing'
+//   },
+//   props: {
+//     icon: { name: 'clock colored' }
+//   }
+// }, {
+//   state: {
+//     href: '/sequence',
+//     tooltip: 'Sequence'
+//   },
+//   props: {
+//     icon: { name: 'sequence colored' }
+//   }
 }]
 
 export const DesignSystem = {
+  extend: Flex,
+
   props: {
+    margin: '-C2+X2 - -',
+    padding: 'C2+X2 - -',
+    minHeight: '100%',
     maxWidth: '100%',
     width: '100%',
     flow: 'column',
-    padding: '- - C1',
     gap: 'B1'
   },
 
@@ -103,6 +131,7 @@ export const DesignSystem = {
     '/typography': Typography,
     '/space': Spaces,
     '/shape': Shapes,
+    '/fonts': Fonts,
     '/icons': Icons,
     '/media-query': MediaQuery
     // '/sequence': Sequence,
@@ -116,16 +145,12 @@ export const DesignSystem = {
       maxWidth: '100%',
       width: '100%',
       flow: 'row',
+      flex: 1,
       align: 'flex-start flex-start',
       gap: 'B1',
-      padding: 'D2 A B1'
-    },
-
-    sidebar: {
-      tag: 'nav',
-      extend: Flex,
+      padding: 'D2 A C1',
 
-      props: {
+      sidebar: {
         gap: 'B1',
         flow: 'column',
         background: 'transparent',
@@ -135,6 +160,15 @@ export const DesignSystem = {
         top: 'E'
       },
 
+      main: {
+        flex: 1
+      }
+    },
+
+    sidebar: {
+      tag: 'nav',
+      extend: Flex,
+
       childExtend: {
         extend: [ClickableItem, Link, SquareButton, TooltipParent],
         props: ({ state }) => ({
@@ -181,22 +215,28 @@ export const DesignSystem = {
     main: {
       tag: 'section',
       extend: PageExtend,
-
       props: {
-        flex: 1,
-        padding: '0 C1 B1'
+        padding: 'X2 C1 B1'
       }
     }
   },
 
   widget: {
     props: {
-      padding: 'C B1 - B1'
+      padding: 'A',
+      position: 'sticky',
+      width: '100%',
+      zIndex: 9999,
+      bottom: '0'
     },
 
+    state: ({ parent }) => ({ __ref: parent.page.main.state }),
+
     define: { routes: param => param },
     routes: {
-      '/media-query': ResponsivePreview
+      '/media-query': ResponsivePreview,
+      '/space': SpacingPreview,
+      '/shape': ShapePreview
     },
 
     on: {

package/src/pages/{Typography → Fonts}/fontFaces.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { Grid, Hoverable, FontObject } from '@symbo.ls/components'
-import { TypeSection } from './shared'
+import { TypeSection } from '../Typography/shared'
 
 const mapFonts = (el, s) => {
   if (!el.context.SYSTEM) return
@@ -16,8 +16,7 @@ const mapFonts = (el, s) => {
 
     return {
       title: v,
-      href: `/typography/font-settings/${v}`,
-      scrollToTop: false,
+      href: `/fonts/font-settings/${v}`,
       labels: [
         { icon: 'fontVariable', text: fontWeightCaption }
       ]
@@ -33,7 +32,7 @@ export default {
       p: 'Document @font-face, default and backup fonts',
       nav: [{
         icon: 'plus',
-        href: '/typography/upload-font'
+        href: '/fonts/upload-font'
       }]
     }
   },

package/src/pages/{Typography → Fonts}/fontFamilies.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { Grid, Hoverable, FontFamilyObject } from '@symbo.ls/components'
-import { TypeSection } from './shared'
+import { TypeSection } from '../Typography/shared'
 
 const mapFontFamilies = (el, s) => {
   if (!el.context.SYSTEM) return
@@ -13,8 +13,7 @@ const mapFontFamilies = (el, s) => {
     if (v === 'default') return
     return {
       title: v,
-      href: `/typography/font-family/${v}`,
-      scrollToTop: false,
+      href: `/fonts/font-family/${v}`,
       val
     }
   }).filter(v => v)
@@ -28,11 +27,12 @@ export default {
       p: 'Setup a set and fallback fonts as font families',
       nav: [{
         icon: 'plus',
-        href: '/typography/add-font-family',
+        href: '/fonts/add-font-family',
         scrollToTop: false
       }]
     }
   },
+
   content: {
     extend: Grid,
     props: {