@symbo.ls/preview 0.0.53 → 0.0.55

package/package.json

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

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/components/ResponsivePreview.js

@@ -1,26 +1,22 @@
 'use strict'
 
-import { Flex, ResponsiveToolBar, ResponsiveSreensPreview } from '@symbo.ls/components'
+import { Flex, 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'
-    }
+    align: 'center space-between'
   },
 
-  title: {
-    extend: 'Paragraph',
-    props: { margin: '0' }
+  Paragraph: {
+    text: 'For the best experience, check it out from screens larger than 1980px',
+    color: 'gray6',
+    margin: '0'
   },
 
-  screenButtons: {
-    extend: ResponsiveToolBar,
+  ResponsiveToolBar: {
+    extend: true,
     devices: {
       childExtend: {
         on: {
@@ -41,7 +37,7 @@ export const ResponsivePreview = {
     position: 'absolute',
     left: 'B',
     right: 'B',
-    padding: '0 0 B'
+    padding: '0 0 Z2'
   },
 
   footer

package/src/components/index.js

@@ -11,3 +11,4 @@ export * from './ShapeSet'
 export * from './ShapePreview'
 export * from './SpacingPreview'
 export * from './ResponsivePreview'
+export * from './IconsGroup'

package/src/pages/DesignSystem/index.js

@@ -5,10 +5,10 @@ import { router } from '@domql/router'
 import { Flex } from '@symbo.ls/components'
 
 import {
-  Page,
   ShapePreview,
   ResponsivePreview,
-  SpacingPreview
+  SpacingPreview,
+  Page
 } from '../../components'
 
 import { DesignSystemDashboard } from './Dashboard'
@@ -117,7 +117,6 @@ export const DesignSystem = {
     gap: 'B1',
 
     page: {
-      maxWidth: '100%',
       width: '100%',
       flow: 'row',
       flex: 1,
@@ -136,17 +135,18 @@ export const DesignSystem = {
       },
 
       Page: {
+        transform: 'translate3d(-3.5%, 0, 0)',
         padding: 'X2 C1 B1',
         flex: 1
-      },
-
-      widget: {
-        padding: 'A',
-        position: 'sticky',
-        width: '100%',
-        zIndex: 9999,
-        bottom: '0'
       }
+    },
+
+    widget: {
+      padding: 'A',
+      position: 'sticky',
+      width: '100%',
+      zIndex: 9999,
+      bottom: '0'
     }
   },
 
@@ -166,14 +166,14 @@ export const DesignSystem = {
   },
 
   page: {
-    extend: Page,
+    extend: Flex,
 
     DesignSystemNavbar: {
-      props: {},
+      extend: true,
       ...NAV
     },
 
-    Page: {}
+    Page: { extend: Page }
   },
 
   widget: {

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/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 } })
           }
         }