@symbo.ls/preview 0.0.49 → 0.0.51

package/.symbols/label/index.js

@@ -2,7 +2,7 @@
 
 import { CATEGORIES } from '../categories'
 
-import { Label, HoverEffect } from '@symbo.ls/components'
+import { Label } from '@symbo.ls/components'
 
 const key = 'label'
 const title = 'Label'

package/package.json

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

package/src/components/Banner.js

@@ -0,0 +1,62 @@
+'use strict'
+
+import { Flex, Link, Hoverable, Pseudo, ArticleMedium } from '@symbo.ls/components'
+
+export const TutorialBanner = {
+  extend: [Link, Flex, ArticleMedium, Pseudo, Hoverable],
+
+  props: ({ state }) => ({
+    flow: 'column',
+    round: 'A',
+    flex: '1',
+    height: 'F',
+    padding: 'A2 B',
+    background: 'gray2',
+    href: state.href,
+    gap: '0',
+    overflow: 'hidden',
+    position: 'relative',
+    color: 'white',
+
+    title: { margin: 'auto 0 0', text: state.title },
+    p: { text: state.p },
+
+    style: {
+      'h2, p': {
+        zIndex: 2
+      }
+    },
+
+    ':after, &:before': {
+      content: '""',
+      position: 'absolute',
+      zIndex: 0,
+      inset: '-5px -5px -5px -5px'
+    },
+
+    ':before': {
+      transition: 'B default-bezier',
+      transitionProperty: 'opacity',
+      backgroundImage: `url(${state.background})`,
+      backgroundSize: 'cover',
+      opacity: '0.5'
+    },
+
+    ':after': {
+      transition: 'B default-bezier',
+      transitionProperty: 'opacity',
+      background: 'imageOverlay',
+      opacity: '0.9'
+    },
+
+    ':hover': {
+      padding: 'B B1',
+      ':before': {
+        opacity: '0.9'
+      },
+      ':after': {
+        opacity: '1'
+      }
+    }
+  })
+}

package/src/components/SpacingPreview.js

@@ -101,7 +101,7 @@ const scene = {
                     minWidth: state.props['gap']
                   })
                 },
-                base: (el, s) => s.base
+                base: { text: (el, s) => s.base }
               }
             }
           }, {
@@ -144,7 +144,10 @@ export const SpacingPreview = {
     title: null,
     code: {
       props: {
-        text: ({ state }) => 'const props = ' + JSON.stringify(state.props, null, 2)
+        text: ({ state }) => {
+          const code = 'const props = ' + JSON.stringify(state.props, null, 2)
+          return code
+        }
       }
     }
   }

package/src/components/index.js

@@ -1,6 +1,7 @@
 'use strict'
 
 export * from './Header'
+export * from './Banner'
 export * from './ShapeSet'
 export * from './ShapePreview'
 export * from './SpacingPreview'

package/src/pages/DesignSystem/Dashboard/index.js

@@ -0,0 +1,82 @@
+'use strict'
+
+import { Flex, ArticleMedium, QuickStart } from '@symbo.ls/components'
+import { TutorialBanner } from '../../../components'
+
+import DARK_PNG from '../../../assets/dark.png'
+import TYPE_PNG from '../../../assets/type.png'
+import SPACE_PNG from '../../../assets/space.png'
+
+const banners = {
+  extend: Flex,
+  props: {
+    align: 'stretch space-between',
+    margin: 'C1 -Z1',
+    gap: 'B1'
+  },
+
+  childExtend: TutorialBanner,
+
+  $setStateCollection: ({ state }) => [{
+    title: 'Setting up a dark theme',
+    p: '1 min tutorial',
+    background: DARK_PNG,
+    href: ''
+  }, {
+    title: 'Learn typography scaling',
+    p: '2 mins tutorial',
+    background: TYPE_PNG,
+    href: ''
+  }, {
+    title: 'How scaling of space works',
+    p: '5 mins tutorial',
+    background: SPACE_PNG,
+    href: ''
+  }]
+}
+
+const header = {
+  extend: ArticleMedium,
+  props: {
+    '@mobileS': { padding: '- - - A' },
+    title: {
+      fontWeight: '600',
+      text: 'Design System takeaways'
+    },
+
+    p: { text: `Your tokens in the system`
+    },
+
+    p2: {
+      display: 'none',
+      color: 'gray6',
+      margin: '0'
+    }
+  },
+
+  title: {},
+  p: {},
+  p2: {
+    tag: 'p',
+    ...[
+      'Welcome to the Symbols documentation page.',
+      { text: `Here you'll learn everything…` }
+    ]
+  }
+}
+
+const summary = {
+  header
+
+}
+
+export const DesignSystemDashboard = {
+  ArticleBig: {
+    title: { text: 'Design System' },
+    p: { text: 'Create your Design System guidelines' }
+  },
+
+  banners,
+  quickStart: { extend: QuickStart },
+  summary
+}

package/src/pages/DesignSystem/index.js

@@ -2,7 +2,7 @@
 
 import { router } from '@domql/router'
 
-import { Main } from './Main'
+import { DesignSystemDashboard } from './Dashboard'
 import {
   ClickableItem,
   Flex,
@@ -125,7 +125,7 @@ export const DesignSystem = {
 
   define: { routes: param => param },
   routes: {
-    '/design-system': Main,
+    '/design-system': DesignSystemDashboard,
     '/colors': Color,
     '/theme': Theme,
     '/typography': Typography,

package/src/pages/Icons/index.js

@@ -24,16 +24,16 @@ const IconItem = {
     scrollToTop: false,
     aspectRatio: '1 / 1',
     flexAlign: 'center center',
-    href: '/icons/edit-icon/' + state.name,
+    href: '/icons/edit-icon/' + state.value,
     theme: 'tertiary',
     icon: {
       fontSize: 'C2',
-      name: state.name
+      name: state.value
     }
   }),
   on: {
     click: (event, element, state) => {
-      copyStringToClipboard(state.name)
+      copyStringToClipboard(state.value)
       Link.on.click(event, element, state)
     }
   }
@@ -41,6 +41,7 @@ const IconItem = {
 
 const IconsGroup = {
   state: { toggleShow: true },
+  props: ({ state }) => ({ hide: !Object.keys(state.list).length }),
 
   header: { extend: SectionHeader },
 
@@ -50,11 +51,7 @@ const IconsGroup = {
       hide: !state.toggleShow,
       columns: 'repeat(12, 1fr)',
       gap: 'Z',
-      margin: '- -Z2',
-
-      $hide: {
-        display: 'none'
-      }
+      margin: '- -Z2'
     }),
 
     childExtend: IconItem,
@@ -62,7 +59,13 @@ const IconsGroup = {
   }
 }
 
-const ICON_GROUPS = [{
+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))
+  return list
+}
+
+const ICON_GROUPS = state => [{
   title: 'Document Icons',
   p: 'All ungrouped document icons',
 
@@ -71,49 +74,70 @@ const ICON_GROUPS = [{
     href: '/icons/add-icon'
   }],
 
-  list: Object.keys(SVG).map(name => ({ name }))
+  list: ArraizeIconsCategory(SVG, state)
 }, {
   title: 'Accessibility',
-  list: Object.keys(ACCESSIBILITY).map(name => ({ name })),
-  p: ''
+  list: ArraizeIconsCategory(ACCESSIBILITY, state)
 }, {
   title: 'Box Model',
-  list: Object.keys(BOXMODEL).map(name => ({ name }))
+  list: ArraizeIconsCategory(BOXMODEL, state)
 }, {
   title: 'Display',
-  list: Object.keys(DISPLAY).map(name => ({ name }))
+  list: ArraizeIconsCategory(DISPLAY, state)
 }, {
   title: 'Interactive',
-  list: Object.keys(INTERACTIVE).map(name => ({ name }))
+  list: ArraizeIconsCategory(INTERACTIVE, state)
 }, {
   title: 'Logos',
-  list: Object.keys(LOGOS).map(name => ({ name }))
+  list: ArraizeIconsCategory(LOGOS, state)
 }, {
   title: 'Signs',
-  list: Object.keys(SIGNS).map(name => ({ name }))
+  list: ArraizeIconsCategory(SIGNS, state)
 }, {
   title: 'Style',
-  list: Object.keys(STYLE).map(name => ({ name }))
+  list: ArraizeIconsCategory(STYLE, state)
 }, {
   title: 'Keys',
-  list: Object.keys(KEYBOARD).map(name => ({ name }))
+  list: ArraizeIconsCategory(KEYBOARD, state)
 }, {
   title: 'Tech',
-  list: Object.keys(TECH).map(name => ({ name }))
+  list: ArraizeIconsCategory(TECH, state)
 }, {
   title: 'Text',
-  list: Object.keys(TEXT).map(name => ({ name }))
+  list: ArraizeIconsCategory(TEXT, state)
 }]
 
 export const Icons = {
-  tag: 'section',
-  extend: Flex,
+  state: {},
+
+  header: {
+    extend: SectionHeader,
+    heading: {
+      title: 'Icons',
+      p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
+    },
+
+    Search: {
+      margin: '- -Z2 - -',
+      placeholder: 'Search Icons'
+    },
 
-  props: {
-    flow: 'column',
-    gap: 'D1'
+    nav: null
   },
 
-  childExtend: IconsGroup,
-  $setStateCollection: () => ICON_GROUPS
+  Line: {},
+
+  cnt: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      gap: 'D1'
+    },
+
+    childExtend: IconsGroup,
+    $setStateCollection: (el, state) => {
+      el.removeContent()
+      return ICON_GROUPS(state)
+    }
+  }
 }

package/src/pages/Spaces/SpacingScale.js

@@ -7,6 +7,7 @@ export const SpacingScale = {
   extend: [Flex],
 
   props: {
+    lazyLoad: true,
     flow: 'column',
     gap: 'C1'
   },
@@ -18,15 +19,15 @@ export const SpacingScale = {
   },
 
   SequenceSliders: {
-    position: 'sticky',
-    top: 'C2',
-    background: 'black .5',
-    zIndex: '9999',
-    margin: '-B2 -B -B',
-    padding: 'B2 B B',
-    style: {
-      backdropFilter: 'blur(15px)'
-    }
+    // position: 'sticky',
+    // top: 'C2',
+    // background: 'black .5',
+    // zIndex: '9999',
+    // margin: '-B2 -B -B',
+    // padding: 'B2 B B',
+    // style: {
+    //   backdropFilter: 'blur(15px)'
+    // }
   },
 
   scale: {

package/src/pages/Spaces/buttons.js

@@ -24,7 +24,8 @@ const ChoosableButton = {
       color: 'gray7'
     },
     ':hover': {
-      theme: 'quaternary'
+      theme: 'quaternary',
+      '.active': { color: 'blue' }
     },
     '.active': {
       theme: null
@@ -97,10 +98,8 @@ const BUTTONS = {
   }
 }
 
-let keys
 const cachedKeys = state => {
-  if (!keys) keys = Object.keys(BUTTONS[state.value]).filter(v => v !== 'maxValue')
-  return keys
+  return Object.keys(BUTTONS[state.value]).filter(v => v !== 'maxValue')
 }
 
 export default {
@@ -114,9 +113,9 @@ export default {
     extend: [ChoosableButton, DropdownParent, WiderButton],
 
     props: ({ key, state, parent }) => ({
+      lazyLoad: true,
       active: state.parent.parent.props[state.value] === state.parent.key,
       icon: { name: state.value },
-      lazyLoad: true,
 
       '.active': {
         color: 'blue',
@@ -169,18 +168,21 @@ export default {
             return {
               lazyLoad: true,
               active,
-              icon: {
-                name: iconKey
-              },
+              icon: { name: iconKey },
               gridArea: keys.length > 3 && diffPropPosition(propState.value, state.value),
               theme: null,
-              background: 'transparent 0',
-              '.active': {
-                theme: null,
-                color: 'blue',
+              '@dark': {
+                background: 'transparent 0',
+                color: 'gray7',
                 ':hover': {
-                  color: 'blue'
+                  theme: 'quinary',
+                  color: 'gray8'
                 }
+              },
+              ':hover': null,
+              '.active': {
+                theme: null,
+                color: 'blue'
               }
             }
           },
@@ -244,6 +246,9 @@ export default {
           const tableState = rowState.parent
           const propKey = diffPropValue(propState.value, state.value)
           const active = tableState.props[propKey] === rowState.key
+
+          const isRadius = propState.value === 'borderRadius'
+
           return {
             position: 'absolute',
             round: '100%',
@@ -252,11 +257,21 @@ export default {
             lazyLoad: true,
 
             hide: !active,
+            isRadius,
+
+            '!isRadius': {
+              ':nth-child(1)': { left: '50%', top: 'W' },
+              ':nth-child(2)': { right: 'W', top: '50%' },
+              ':nth-child(3)': { left: '50%', bottom: 'W' },
+              ':nth-child(4)': { left: 'W', top: '50%' }
+            },
 
-            ':nth-child(1)': { left: '50%', top: 'W' },
-            ':nth-child(2)': { right: 'W', top: '50%' },
-            ':nth-child(3)': { left: '50%', bottom: 'W' },
-            ':nth-child(4)': { left: 'W', top: '50%' }
+            '.isRadius': {
+              ':nth-child(1)': { left: 'X2', top: 'X2' },
+              ':nth-child(2)': { right: 'X2', top: 'X2' },
+              ':nth-child(3)': { right: 'X2', bottom: 'X2' },
+              ':nth-child(4)': { left: 'X2', bottom: 'X2' }
+            }
           }
         }
       },

package/src/pages/Spaces/index.js

@@ -19,7 +19,3 @@ export const Spaces = {
 
   scale: SpacingScale
 }
-
-// preview,
-// sequence,
-// boxModel

package/src/pages/DesignSystem/Main.js

@@ -1,110 +0,0 @@
-'use strict'
-
-import { Flex, Link, ArticleMedium, QuickStart } from '@symbo.ls/components'
-
-const Banner = {
-  extend: [Link, Flex, ArticleMedium],
-  props: ({ state }) => ({
-    flow: 'column',
-    round: 'A',
-    flex: '1',
-    height: 'F',
-    padding: 'A2 B',
-    backgroundImage: `url(${state.background})`,
-    backgroundSize: 'cover',
-    href: state.href,
-    gap: '0',
-
-    title: { margin: 'auto 0 0', text: state.title },
-    p: { text: state.p }
-  })
-}
-
-const banners = {
-  extend: Flex,
-  props: {
-    align: 'stretch space-between',
-    margin: 'C1 -Z2',
-    gap: 'B1'
-  },
-
-  childExtend: Banner,
-
-  $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 header = {
-  extend: ArticleMedium,
-  props: {
-    '@mobileS': { padding: '- - - A' },
-    title: {
-      fontWeight: '600',
-      text: 'Design System takeaways'
-    },
-
-    p: { text: `Your tokens in the system`
-    },
-
-    p2: {
-      display: 'none',
-      color: 'gray6',
-      margin: '0'
-    }
-  },
-
-  title: {},
-  p: {},
-  p2: {
-    tag: 'p',
-    ...[
-      'Welcome to the Symbols documentation page.',
-      { text: `Here you'll learn everything…` }
-    ]
-  }
-}
-
-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 = {
-  ArticleBig: {
-    title: { text: 'Design System' },
-    p: { text: 'Create your Design System guidelines' }
-  },
-
-  banners,
-  quickStart: { extend: QuickStart },
-  summary
-}

package/src/pages/DesignSystem/style.js

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