@symbo.ls/preview 0.0.53 → 0.0.54

package/package.json

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

@@ -138,15 +138,15 @@ export const DesignSystem = {
       Page: {
         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'
     }
   },
 

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