@symbo.ls/preview 0.0.52 → 0.0.54

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "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/components/IconsGroup.js

@@ -0,0 +1,60 @@
+'use strict'
+
+import { copyStringToClipboard } from '@symbo.ls/utils'
+import { ClickableItem, Link, IconText } from '@symbo.ls/components'
+
+const IconItem = {
+  extend: [ClickableItem, Link, IconText],
+
+  props: ({ state }) => ({
+    round: 'A',
+    size: 'C1',
+    scrollToTop: false,
+    aspectRatio: '1 / 1',
+    flexAlign: 'center center',
+    href: '/icons/edit-icon/' + state.value,
+    theme: 'tertiary',
+    icon: {
+      fontSize: 'C2',
+      name: state.value
+    }
+  }),
+
+  on: {
+    click: (event, element, state) => {
+      copyStringToClipboard(state.value)
+      Link.on.click(event, element, state)
+    }
+  }
+}
+
+export const IconsGroup = {
+  state: { toggleShow: true },
+  props: ({ state }) => ({
+    hide: !Object.keys(state.list).length
+  }),
+
+  SectionHeader: {
+    extend: true,
+    heading: {},
+    nav: {
+      add: {
+        props: {
+          icon: 'plus',
+          href: '/icons/add-icon'
+        }
+      }
+    }
+  },
+
+  Grid: {
+    props: ({ state }) => ({
+      hide: !state.toggleShow,
+      columns: 'repeat(12, 1fr)',
+      gap: 'Z',
+      margin: '- -Z2'
+    }),
+    childExtend: IconItem,
+    $setStateCollection: ({ state }) => state.list
+  }
+}

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,8 +1,14 @@
 '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'
 export * from './SpacingPreview'
 export * from './ResponsivePreview'
+export * from './IconsGroup'

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'
-  },
-
-  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,
+    gap: 'B1',
 
-    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
       }
     },
 
-    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 }
-        })
-      },
-
-      ...NAV
-    },
-
-    main: {
-      tag: 'section',
-      extend: PageExtend,
-      props: {
-        padding: 'X2 C1 B1'
-      }
-    }
-  },
-
-  widget: {
-    props: {
+    widget: {
       padding: 'A',
       position: 'sticky',
       width: '100%',
       zIndex: 9999,
       bottom: '0'
+    }
+  },
+
+  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
     },
 
-    state: ({ parent }) => ({ __ref: parent.page.main.state }),
+    Page: {}
+  },
+
+  widget: {
+    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/Export/tools.js

@@ -35,7 +35,6 @@ export default {
       },
       on: {
         click: (ev, el, s) => {
-          console.log(s.direction)
           s.update({
             direction: s.direction === 'rtl' ? 'ltr' : 'rtl'
           })

package/src/pages/Icons/index.js

@@ -1,9 +1,5 @@
 'use strict'
 
-import { copyStringToClipboard } from '@symbo.ls/utils'
-
-import { IconText, Flex, Link, ClickableItem, SectionHeader, Grid } from '@symbo.ls/components'
-
 import * as ACCESSIBILITY from '@symbo.ls/icons/src/accessibility'
 import * as BOXMODEL from '@symbo.ls/icons/src/boxModel'
 import * as DISPLAY from '@symbo.ls/icons/src/display'
@@ -16,64 +12,17 @@ import * as SVG from '@symbo.ls/icons/src/svg'
 import * as TECH from '@symbo.ls/icons/src/tech'
 import * as TEXT from '@symbo.ls/icons/src/text'
 
-const IconItem = {
-  extend: [ClickableItem, Link, IconText],
-  props: ({ state }) => ({
-    round: 'A',
-    size: 'C1',
-    scrollToTop: false,
-    aspectRatio: '1 / 1',
-    flexAlign: 'center center',
-    href: '/icons/edit-icon/' + state.value,
-    theme: 'tertiary',
-    icon: {
-      fontSize: 'C2',
-      name: state.value
-    }
-  }),
-  on: {
-    click: (event, element, state) => {
-      copyStringToClipboard(state.value)
-      Link.on.click(event, element, state)
-    }
-  }
-}
-
-const IconsGroup = {
-  state: { toggleShow: true },
-  props: ({ state }) => ({ hide: !Object.keys(state.list).length }),
-
-  header: { extend: SectionHeader },
-
-  iconSet: {
-    extend: Grid,
-    props: ({ state }) => ({
-      hide: !state.toggleShow,
-      columns: 'repeat(12, 1fr)',
-      gap: 'Z',
-      margin: '- -Z2'
-    }),
-
-    childExtend: IconItem,
-    $setStateCollection: ({ state }) => state.list
-  }
-}
+import { IconsGroup } from '../../components'
 
 const ArraizeIconsCategory = (library, state) => {
   const list = Object.keys(library)
-  if (state.searched) return list.filter(value => console.log(value, state.searched, value.includes(state.searched)) || value.includes(state.searched))
+  if (state.searched) return list.filter(value => value.includes(state.searched))
   return list
 }
 
 const ICON_GROUPS = state => [{
   title: 'Document Icons',
   p: 'All ungrouped document icons',
-
-  nav: [{
-    icon: 'plus',
-    href: '/icons/add-icon'
-  }],
-
   list: ArraizeIconsCategory(SVG, state)
 }, {
   title: 'Accessibility',
@@ -110,8 +59,9 @@ const ICON_GROUPS = state => [{
 export const Icons = {
   state: {},
 
-  header: {
-    extend: SectionHeader,
+  SectionHeader: {
+    extend: true,
+
     heading: {
       title: 'Icons',
       p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
@@ -127,8 +77,7 @@ export const Icons = {
 
   Line: {},
 
-  cnt: {
-    extend: Flex,
+  Flex: {
     props: {
       flow: 'column',
       gap: 'D1'

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/MediaQuery/lists.js

@@ -64,7 +64,6 @@ const BreakpointItem = {
         const { value } = el.node
         const exact = value === 'exact'
         s.update({ type: value }, { preventUpdate: true })
-        console.log(s.parent.parent)
         s.parent.update({
           exact,
           breakpoints: {

package/src/pages/Spaces/buttons.js

@@ -221,7 +221,6 @@ export default {
           const propKey = state.value
           const active = tableState.props[propKey] === rowState.key
           if (active) {
-            console.log('clicked')
             delete tableState.props[propKey] && tableState.update()
           } else {
             const allKeys = Object.keys(tableState.props)
@@ -230,8 +229,6 @@ export default {
               return v.includes(splitInWords[0]) && v.includes(splitInWords[1])
             })
               .forEach(v => delete tableState.props[v])
-            console.log('clicked2')
-
             tableState.update({ props: { [propKey]: rowState.key } })
           }
         }

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'
-    }
-  }
-}