@symbo.ls/preview 0.0.52 → 0.0.53

package/package.json

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

package/src/app.js

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

package/src/components/Aside.js

@@ -0,0 +1,53 @@
+'use strict'
+
+import { Link, ClickableItem, TooltipParent } from '@symbo.ls/components'
+import { Flex, SquareButton } from 'smbls'
+
+export const NavbarButton = {
+  extend: [ClickableItem, Link, SquareButton, TooltipParent],
+
+  props: ({ state }) => ({
+    href: state.href,
+    active: window.location.pathname.includes(state.href),
+    theme: null,
+    position: 'relative',
+    style: {
+      '&:hover, &:focus-visible': {
+        '& [tooltip]': {
+          transform: 'translate3d(0%,-50%,0)'
+        }
+      }
+    }
+  }),
+
+  Tooltip: ({ state }) => ({
+    background: 'black .95',
+    position: 'absolute',
+    pointerEvents: 'none',
+    top: '50%',
+    left: '100%',
+    shape: 'rectangle',
+    shapeDirection: null,
+    padding: 'X2 Z1',
+    transform: 'translate3d(5%, -50%, 0)',
+    opacity: '0',
+    visibility: 'hidden',
+    transition: 'B default-bezier',
+    transitionProperty: 'opacity, transform',
+    textAlign: 'start',
+    zIndex: 9999,
+    lineHeight: 1,
+    title: {
+      fontSize: 'Z',
+      text: state.tooltip
+    },
+    p: { text: null }
+  })
+}
+
+export const DesignSystemNavbar = {
+  tag: 'nav',
+  extend: Flex,
+
+  childExtend: NavbarButton
+}

package/src/{pages/PageExtend.js → components/Page.js}

@@ -2,7 +2,7 @@
 
 import { PageTemplate } from '@symbo.ls/components'
 
-export const PageExtend = {
+export const Page = {
   tag: 'main',
   extend: PageTemplate,
 

package/src/components/Route.js

@@ -0,0 +1 @@
+'use strict'

package/src/components/Widget.js

@@ -0,0 +1 @@
+'use strict'

package/src/components/index.js

@@ -1,6 +1,11 @@
 'use strict'
 
+export * from './Widget'
+export * from './Route'
+export * from './Page'
 export * from './Header'
+export * from './Aside'
+
 export * from './Banner'
 export * from './ShapeSet'
 export * from './ShapePreview'

package/src/index.js

@@ -7,9 +7,9 @@ import style from './style'
 
 import 'smbls'
 import * as smbls from '@symbo.ls/components'
+import * as components from './components'
 
 import App from './app'
-import { Header } from './components'
 import { Library } from './pages'
 import { router, lastLevel } from '@domql/router'
 
@@ -28,13 +28,13 @@ const app = DOM.create({
   extend: App,
   style,
 
-  header: Header,
+  header: components.Header,
   routes: {
     '/': Library
   }
 }, undefined, 'app', {
   extend: [smbls.Box],
-  components: { ...smbls },
+  components: { ...smbls, ...components },
   context
 })
 

package/src/pages/Account/index.js

@@ -5,7 +5,7 @@ import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCap
 
 import setUpProject from './setUpProject'
 
-import PageExtend from '../PageExtend'
+import Page from '../Page'
 import { logout } from '@symbo.ls/auth'
 
 const sideBar = {
@@ -217,7 +217,7 @@ const personalAccount = {
 }
 
 export default {
-  extend: PageExtend,
+  extend: Page,
   props: {
     flexAlign: 'flex-start flex-start',
     padding: 'C1 0 D1 0',

package/src/pages/DesignSystem/index.js

@@ -2,23 +2,17 @@
 
 import { router } from '@domql/router'
 
-import { DesignSystemDashboard } from './Dashboard'
-import {
-  ClickableItem,
-  Flex,
-  Link,
-  SquareButton,
-  TooltipParent
-} from '@symbo.ls/components'
+import { Flex } from '@symbo.ls/components'
 
 import {
+  Page,
   ShapePreview,
   ResponsivePreview,
   SpacingPreview
 } from '../../components'
 
+import { DesignSystemDashboard } from './Dashboard'
 import {
-  PageExtend,
   Color,
   Theme,
   Shapes,
@@ -120,28 +114,9 @@ export const DesignSystem = {
     maxWidth: '100%',
     width: '100%',
     flow: 'column',
-    gap: 'B1'
-  },
+    gap: 'B1',
 
-  define: { routes: param => param },
-  routes: {
-    '/design-system': DesignSystemDashboard,
-    '/colors': Color,
-    '/theme': Theme,
-    '/typography': Typography,
-    '/space': Spaces,
-    '/shape': Shapes,
-    '/fonts': Fonts,
-    '/icons': Icons,
-    '/media-query': MediaQuery
-    // '/sequence': Sequence,
-    // '/timing': Timing,
-  },
-
-  page: {
-    extend: PageExtend,
-
-    props: {
+    page: {
       maxWidth: '100%',
       width: '100%',
       flow: 'row',
@@ -150,7 +125,7 @@ export const DesignSystem = {
       gap: 'B1',
       padding: 'D2 A C1',
 
-      sidebar: {
+      DesignSystemNavbar: {
         gap: 'B1',
         flow: 'column',
         background: 'transparent',
@@ -160,77 +135,49 @@ export const DesignSystem = {
         top: 'E'
       },
 
-      main: {
+      Page: {
+        padding: 'X2 C1 B1',
         flex: 1
+      },
+
+      widget: {
+        padding: 'A',
+        position: 'sticky',
+        width: '100%',
+        zIndex: 9999,
+        bottom: '0'
       }
-    },
+    }
+  },
 
-    sidebar: {
-      tag: 'nav',
-      extend: Flex,
-
-      childExtend: {
-        extend: [ClickableItem, Link, SquareButton, TooltipParent],
-        props: ({ state }) => ({
-          href: state.href,
-          active: window.location.pathname.includes(state.href),
-          theme: null,
-          position: 'relative',
-          style: {
-            '&:hover, &:focus-visible': {
-              '& [tooltip]': {
-                transform: 'translate3d(0%,-50%,0)'
-              }
-            }
-          }
-        }),
-        Tooltip: ({ state }) => ({
-          background: 'black .95',
-          position: 'absolute',
-          pointerEvents: 'none',
-          top: '50%',
-          left: '100%',
-          shape: 'rectangle',
-          shapeDirection: null,
-          padding: 'X2 Z1',
-          transform: 'translate3d(10%, -50%, 0)',
-          opacity: '0',
-          visibility: 'hidden',
-          transition: 'B default-bezier',
-          transitionProperty: 'opacity, transform',
-          textAlign: 'start',
-          zIndex: 9999,
-          lineHeight: 1,
-          title: {
-            fontSize: 'Z',
-            text: state.tooltip
-          },
-          p: { text: null }
-        })
-      },
+  define: { routes: param => param },
+  routes: {
+    '/design-system': DesignSystemDashboard,
+    '/colors': Color,
+    '/theme': Theme,
+    '/typography': Typography,
+    '/space': Spaces,
+    '/shape': Shapes,
+    '/fonts': Fonts,
+    '/icons': Icons,
+    '/media-query': MediaQuery
+    // '/sequence': Sequence,
+    // '/timing': Timing,
+  },
+
+  page: {
+    extend: Page,
 
+    DesignSystemNavbar: {
+      props: {},
       ...NAV
     },
 
-    main: {
-      tag: 'section',
-      extend: PageExtend,
-      props: {
-        padding: 'X2 C1 B1'
-      }
-    }
+    Page: {}
   },
 
   widget: {
-    props: {
-      padding: 'A',
-      position: 'sticky',
-      width: '100%',
-      zIndex: 9999,
-      bottom: '0'
-    },
-
-    state: ({ parent }) => ({ __ref: parent.page.main.state }),
+    state: ({ parent }) => ({ __ref: parent.page.Page.state }),
 
     define: { routes: param => param },
     routes: {

package/src/pages/Export/index.js

@@ -3,7 +3,7 @@
 import { router, lastLevel } from '@domql/router' // eslint-disable-line no-unused-vars
 
 import { Flex } from '@symbo.ls/components'
-import { PageExtend } from '../PageExtend'
+import { Page } from '../../components'
 
 import state from './state'
 import scene from './scene'
@@ -61,7 +61,7 @@ export const Export = {
   },
 
   cnt: {
-    extend: [PageExtend],
+    extend: [Page],
 
     props: {
       padding: 'Z2 C1 A',

package/src/pages/Library/index.js

@@ -1,29 +1,29 @@
 'use strict'
 
-import { grid } from './style'
+import { ComponentTemplate } from '@symbo.ls/components'
+import { Page } from '../../components'
 
-import { SectionHeader, ComponentTemplate, Grid } from '@symbo.ls/components'
-
-import { PageExtend } from '..'
 import { LIBRARY } from '../../../.symbols'
 
 export const Library = {
-  extend: PageExtend,
+  extend: Page,
 
-  header: {
-    extend: [SectionHeader],
-    state: {
-      title: 'My Symbols',
-      p: 'This is the first collection of your components'
-    }
+  SectionHeader: {
+    title: 'My Symbols',
+    p: 'This is the first collection of your components'
   },
 
-  grid: {
-    extend: Grid,
+  Grid: {
     props: {
       flex: 1,
-      margin: '- -Z2',
-      style: grid
+      templateColumns: 'repeat(12, 1fr)',
+      autoFlow: 'dense',
+      autoColumns: 'auto',
+      autoRows: 'auto',
+      justifyItems: 'stretch',
+
+      margin: '- -Z2 B1',
+      gap: 'A'
     },
 
     childExtend: ComponentTemplate,

package/src/pages/index.js

@@ -1,6 +1,5 @@
 'use strict'
 
-export * from './PageExtend'
 export * from './Components'
 export * from './Export'
 export * from './Fonts'
@@ -12,5 +11,4 @@ export * from './Shapes'
 export * from './Spaces'
 export * from './Typography'
 export * from './MediaQuery'
-
 export * from './DesignSystem'

package/src/pages/Library/style.js

@@ -1,36 +0,0 @@
-'use strict'
-
-export const grid = {
-  gridTemplateColumns: 'repeat(12, 1fr)',
-  gridAutoFlow: 'dense',
-  justifyItems: 'stretch',
-  boxSizing: 'border-box',
-  marginBottom: '2em',
-  gap: '1em',
-  gridAutoColumns: 'auto',
-  gridAutoRows: 'auto',
-
-  '@media only screen and (min-width: 1680px)': {
-    gridTemplateColumns: 'repeat(12, 1fr)'
-  }
-}
-
-export const styleFamilyBundle = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '50em',
-  '> div': {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  img: {
-    width: '32px',
-    height: '32px'
-  },
-  button: {
-    '&:first-child': {
-      marginRight: '8px'
-    }
-  }
-}