@symbo.ls/preview 2.7.16 → 2.7.17

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "symbo.ls",
-  "version": "2.7.16",
+  "version": "2.7.17",
   "main": "src/app.js",
   "scripts": {
     "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",

package/src/components/DesignComponent.js

@@ -53,6 +53,7 @@ const propertyNumber = {
 
 const componentProperties = {
   extend: Flex,
+  state: 'properties',
   props: {
     padding: 'Z2 A',
     flow: 'column',
@@ -60,7 +61,7 @@ const componentProperties = {
     background: 'gray1'
   },
   childExtend: propertyNumber,
-  $setStateCollection: ({ state }) => state.properties
+  $setStateCollection: ({ state }) => state.parse()
 }
 
 export const DesignComponent = {

package/src/components/IconsGroup.js

@@ -14,9 +14,13 @@ const IconItem = {
     flexAlign: 'center center',
     href: '/icons/edit-icon/' + state.value,
     theme: 'tertiary',
+    transitionProperty: 'transform, opacity, border-radius',
     icon: {
       fontSize: 'C2',
       name: state.value
+    },
+    ':hover': {
+      round: '0'
     }
   }),
 

package/src/pages/Color/globalThemes.js

@@ -3,6 +3,8 @@
 import { GlobalThemeTemplate, Flex, SectionHeader, Link, ClickableItem } from '@symbo.ls/components'
 
 export default {
+  state: 'THEME',
+
   header: {
     extend: SectionHeader,
     state: {

package/src/pages/Color/palette.js

@@ -3,13 +3,14 @@
 import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
-  const { COLOR } = s.__projectSystem
-  if (!COLOR) return
+  const COLOR = s.parse()
   const colorKeys = Object.keys(COLOR)
   return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
 }
 
 export default {
+  state: 'COLOR',
+
   header: {
     extend: SectionHeader,
     state: {
@@ -22,7 +23,7 @@ export default {
     }
   },
 
-  content: {
+  cnt: {
     extend: Flex,
     props: {
       flow: 'row wrap',

package/src/pages/Color/themes.js

@@ -3,8 +3,7 @@
 import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
 const mapThemes = (el, s) => {
-  const { THEME } = s.__projectSystem
-  if (!THEME) return
+  const THEME = s.parse()
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }
@@ -22,7 +21,7 @@ export default {
     }
   },
 
-  content: {
+  cnt: {
     extend: Grid,
     props: {
       columns: 'repeat(5, 1fr)',
@@ -31,6 +30,6 @@ export default {
     },
 
     childExtend: ThemeTemplate,
-    $setStateCollection: (el, s) => mapThemes(el, s)
+    $setStateCollection: mapThemes
   }
 }

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

@@ -13,7 +13,7 @@ export default {
 
   props: {
     align: 'stretch space-between',
-    margin: 'C1 -Z1',
+    margin: '-A -Z1 B',
     gap: 'B1'
   },
 

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

@@ -2,7 +2,7 @@
 
 import { Flex } from '@symbo.ls/components'
 
-import banners from './banners' // eslint-disable-line no-unused-vars
+import banners from './banners'
 import summary from './summary'
 import quickstart from './quickstart'
 
@@ -16,7 +16,7 @@ export const DesignSystemDashboard = {
     p: { text: 'Create your Design System guidelines' }
   },
 
-  // banners,
+  banners,
   summary,
   quickstart
 }

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

@@ -26,7 +26,6 @@ export default {
 
   Flex: {
     props: {
-      // display: 'inline-flex',
       gap: 'D1',
       align: 'flex-start space-between',
       childProps: {
@@ -43,7 +42,7 @@ export default {
       Terminal: {
         note: { text: 'Install Symbols to your project' },
         props: {
-          command: { text: 'npm i smbls -g' }
+          command: { text: 'npm i smbls --save' }
         }
       }
     },
@@ -63,12 +62,11 @@ export default {
       extend: 'QuickStartCode',
       QuickStartNumber: { text: '3' },
       Code: {
+        props: {},
         note: { text: 'Create .symbolsrc.js file in your project and insert your Symbols key' },
-        props: ({ state }) => ({
-          code: {
-            text: `{ "key": "${state.appKey}" }`
-          }
-        })
+        code: {
+          text: ({ state }) => `{ "key": "${state.appKey}" }`
+        }
       }
     },
 

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

@@ -1,10 +1,7 @@
 'use strict'
 
-export default ({ parent }) => {
-  const { state } = parent
-  const { __projectSystem } = state
-
-  if (!__projectSystem) return
+export const applySummaryCollection = (el, s) => {
+  if (!s) return
   const {
     COLOR,
     THEME,
@@ -16,130 +13,130 @@ export default ({ parent }) => {
     TIMING,
     MEDIA,
     DEVICES
-  } = __projectSystem
+  } = s
+
+  if (!COLOR) return
 
-  return {
-    data: [{
-      icon: 'colorOutline',
-      href: '/colors',
-      iconTheme: 'theme',
-      title: 'colors',
-      paragraph: 'Colorize styles manually',
-      iconBackground: 'red',
-      properties: [{
-        property: 'Colors',
-        value: COLOR && Object.keys(COLOR).length
-      }, {
-        property: 'Themes',
-        value: THEME && Object.keys(THEME).length
-      }]
+  return [{
+    icon: 'colorOutline',
+    href: '/colors',
+    iconTheme: 'theme',
+    title: 'colors',
+    paragraph: 'Colorize styles manually',
+    iconBackground: 'red',
+    properties: [{
+      property: 'Colors',
+      value: COLOR && Object.keys(COLOR).length
+    }, {
+      property: 'Themes',
+      value: THEME && Object.keys(THEME).length
+    }]
+  }, {
+    icon: 'typographyOutline',
+    href: '/typography',
+    iconTheme: 'typography',
+    title: 'typography',
+    paragraph: 'style a typed material',
+    properties: [{
+      property: 'Base size',
+      value: TYPOGRAPHY && TYPOGRAPHY.base + 'px'
+    }, {
+      property: 'Ratio',
+      value: TYPOGRAPHY && TYPOGRAPHY.ratio
+    }, {
+      property: 'Styles',
+      value: TYPOGRAPHY && TYPOGRAPHY.styles && Object.keys(TYPOGRAPHY.styles).length
+    }, {
+      property: 'Fonts',
+      value: FONT && Object.keys(FONT).length
+    }, {
+      property: 'Families',
+      value: FONT_FAMILY && Object.keys(FONT_FAMILY).length - 1
+    }]
+  }, {
+    icon: 'spaceOutline',
+    href: '/space',
+    iconTheme: 'space',
+    title: 'Spacing',
+    paragraph: 'Manage properties of a size',
+    properties: [{
+      property: 'Ratio',
+      value: SPACING && SPACING.ratio
+    }, {
+      property: 'Templates',
+      value: 'TBA'
+    }]
+  }, {
+    icon: 'shape',
+    href: '/shape',
+    iconTheme: 'shape',
+    title: 'shapes',
+    paragraph: 'Design an outline to a chosen component',
+    properties: [{
+      property: 'HTML',
+      value: '32'
+    }, {
+      property: 'SVG',
+      value: 'TBA'
+    }]
+  }, {
+    icon: 'iconsOutline',
+    href: '/icons',
+    iconTheme: 'color',
+    title: 'Icons',
+    paragraph: 'Label a role of subject with glyphs',
+    properties: [{
+      property: 'All',
+      value: ICONS && Object.keys(ICONS).length
     }, {
-      icon: 'typographyOutline',
-      href: '/typography',
-      iconTheme: 'typography',
-      title: 'typography',
-      paragraph: 'style a typed material',
-      properties: [{
-        property: 'Base size',
-        value: TYPOGRAPHY && TYPOGRAPHY.base + 'px'
-      }, {
-        property: 'Ratio',
-        value: TYPOGRAPHY && TYPOGRAPHY.ratio
-      }, {
-        property: 'Styles',
-        value: TYPOGRAPHY && TYPOGRAPHY.styles && Object.keys(TYPOGRAPHY.styles).length
-      }, {
-        property: 'Fonts',
-        value: FONT && Object.keys(FONT).length
-      }, {
-        property: 'Families',
-        value: FONT_FAMILY && Object.keys(FONT_FAMILY).length - 1
-      }]
+      property: 'Linear',
+      value: ICONS && Object.keys(ICONS).filter(v => v.includes('Outline')).length
     }, {
-      icon: 'spaceOutline',
-      href: '/space',
-      iconTheme: 'space',
-      title: 'Spacing',
-      paragraph: 'Manage properties of a size',
-      properties: [{
-        property: 'Ratio',
-        value: SPACING && SPACING.ratio
-      }, {
-        property: 'Templates',
-        value: 'TBA'
-      }]
+      property: 'Colored',
+      value: ICONS && Object.keys(ICONS).filter(v => v.includes('Colored')).length
+    }]
+  }, {
+    icon: 'clock',
+    href: '/timing',
+    iconTheme: 'icons',
+    title: 'Timing',
+    paragraph: 'Tokens for transitions and animations',
+    properties: [{
+      property: 'Timing base',
+      value: TIMING && TIMING.base + 'ms'
     }, {
-      icon: 'shape',
-      href: '/shape',
-      iconTheme: 'shape',
-      title: 'shapes',
-      paragraph: 'Design an outline to a chosen component',
-      properties: [{
-        property: 'HTML',
-        value: '32'
-      }, {
-        property: 'SVG',
-        value: 'TBA'
-      }]
+      property: 'Ratio',
+      value: TIMING && TIMING.ratio
     }, {
-      icon: 'iconsOutline',
-      href: '/icons',
-      iconTheme: 'color',
-      title: 'Icons',
-      paragraph: 'Label a role of subject with glyphs',
-      properties: [{
-        property: 'All',
-        value: ICONS && Object.keys(ICONS).length
-      }, {
-        property: 'Linear',
-        value: ICONS && Object.keys(ICONS).filter(v => v.includes('Outline')).length
-      }, {
-        property: 'Colored',
-        value: ICONS && Object.keys(ICONS).filter(v => v.includes('Colored')).length
-      }]
+      property: 'Transitions',
+      value: 'TBA'
     }, {
-      icon: 'clock',
-      href: '/timing',
-      iconTheme: 'icons',
-      title: 'Timing',
-      paragraph: 'Tokens for transitions and animations',
-      properties: [{
-        property: 'Timing base',
-        value: TIMING && TIMING.base + 'ms'
-      }, {
-        property: 'Ratio',
-        value: TIMING && TIMING.ratio
-      }, {
-        property: 'Transitions',
-        value: 'TBA'
-      }, {
-        property: 'Animations',
-        value: 'TBA'
-      }]
+      property: 'Animations',
+      value: 'TBA'
+    }]
+  }, {
+    icon: 'deviceMobileOutline',
+    href: '/media-query',
+    title: 'Breakpoints',
+    paragraph: 'Label a role of subject with glyphs',
+    properties: [{
+      property: 'Breakpoints',
+      value: MEDIA && Object.keys(MEDIA).length
     }, {
-      icon: 'deviceMobileOutline',
-      href: '/media-query',
-      title: 'Breakpoints',
-      paragraph: 'Label a role of subject with glyphs',
-      properties: [{
-        property: 'Breakpoints',
-        value: MEDIA && Object.keys(MEDIA).length
-      }, {
-        property: 'Screens',
-        value: DEVICES && Object.keys(DEVICES).length
-      }]
+      property: 'Screens',
+      value: DEVICES && Object.keys(DEVICES).length
+    }]
+  }, {
+    icon: 'threeDots',
+    href: '/sequence',
+    title: 'Sequence',
+    paragraph: 'The mapping system of generative sizing units',
+    properties: [{
+      property: 'Breakpoints',
+      value: '8'
     }, {
-      icon: 'threeDots',
-      href: '/sequence',
-      title: 'Sequence',
-      paragraph: 'The mapping system of generative sizing units',
-      properties: [{
-        property: 'Breakpoints',
-        value: '8'
-      }, {
-        property: 'Screens',
-        value: '3'
-      }]
+      property: 'Screens',
+      value: '3'
     }]
-  }
+  }]
 }

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

@@ -3,9 +3,11 @@
 import { ClickableItem, Link } from '@symbo.ls/components'
 import { DesignComponent } from '../../../components'
 
-import state from './state'
+import { applySummaryCollection } from './state'
+
+export const cnt = {
+  state: 'summary',
 
-export const content = {
   props: {
     margin: '- -Z',
     columns: '15rem',
@@ -14,7 +16,8 @@ export const content = {
 
   childExtend: {
     extend: [Link, ClickableItem, DesignComponent],
-    props: () => ({
+    state: true,
+    props: ({ state }) => ({
       maxWidth: 'none',
       width: '100%',
       margin: '- - B1',
@@ -23,7 +26,7 @@ export const content = {
     })
   },
 
-  $setStateCollection: ({ state }) => state.data
+  $setPropsCollection: (el, s) => s.parse()
 }
 
 export default {
@@ -31,12 +34,19 @@ export default {
     margin: '- - C1'
   },
 
-  state,
+  state: 'PROJECT_SYSTEM',
 
   SectionHeader: {
     title: 'Design System takeaways',
     p: 'Your tokens in the system at a glance'
   },
 
-  content
+  cnt,
+
+  on: {
+    initUpdate: (el, s) => {
+      if (s.summary) return
+      s.summary = applySummaryCollection(el, s)
+    }
+  }
 }

package/src/pages/DesignSystem/index.js

@@ -107,6 +107,8 @@ const NAV = [{
 export const DesignSystem = {
   extend: Flex,
 
+  state: 'PROJECT_SYSTEM',
+
   props: {
     margin: '-C2+X2 - -',
     padding: 'C2+X2 - -',

package/src/pages/Theme/index.js

@@ -6,7 +6,6 @@ import {
   Flex,
   SectionHeader,
   AccessibilityCheck,
-  SceneThemingBar,
   Pseudo,
   CommonField
 } from '@symbo.ls/components'
@@ -16,9 +15,6 @@ import preview from './preview'
 import { buttonsHeader } from './buttonsHeader'
 import { selectsGrid } from './selectsGrid'
 import { buttonTitlesGrid, columnTitleButton } from './buttonTitlesGrid'
-// import { themingTools } from './themingTools'
-// import { interactivity } from './interactivity'
-// import { friendTheme } from './friendTheme'
 
 import style from './style'
 
@@ -47,7 +43,7 @@ const ThemeNameField = {
       border: 'dashed, gray5',
       borderWidth: '0 0 1px',
 
-      text: (el, s) => s.themeName,
+      text: state.themeName,
 
       ':empty::before': {
         content: '"You name it"',
@@ -178,7 +174,8 @@ export const Theme = {
     heading: null,
     ThemeNameField,
     nav: null,
-    buttons: { extend: buttonsHeader }
+    buttons: { extend: buttonsHeader },
+    SceneThemingBar: {}
   },
 
   cnt: {
@@ -196,7 +193,8 @@ export const Theme = {
       colors: {
         props: {
           padding: '- - C1 -',
-          style: { borderBottom: '.5px solid rgba(255, 255, 255, .3)' }
+          border: 'solid, gray3',
+          borderWidth: '0 0 0 1px'
         },
         selectsGrid,
         buttonTitlesGrid
@@ -205,7 +203,8 @@ export const Theme = {
       onHover: {
         extend: CommonField,
         props: {
-          style: { borderBottom: '.5px solid rgba(255, 255, 255, .3)' },
+          border: 'solid, gray3',
+          borderWidth: '0 0 0 1px',
           gap: 'B2',
           padding: 'B - C1 -',
           title: {
@@ -248,10 +247,6 @@ export const Theme = {
         title: {},
         iconBox: {}
       }
-
-      // themingTools
-      // interactivity,
-      // friendTheme
     }
   },
 
@@ -261,6 +256,4 @@ export const Theme = {
       padding: 'E 0 F'
     }
   }
-
-  // footer
 }

package/src/pages/Theme/style.js

@@ -24,6 +24,7 @@ export const styleColorTones = {
 export default {
   display: 'flex',
   flexFlow: 'column',
+
   'header > nav a:hover': {
     background: 'rgba(255, 255, 255, .08)',
     opacity: 1,

package/src/pages/Typography/collection.js

@@ -56,6 +56,7 @@ const getCollectionFromArray = (arr, s) => {
   const { TYPOGRAPHY } = __projectSystem
   if (!TYPOGRAPHY) return
   const styles = TYPOGRAPHY.styles || {}
+
   return arr.map((v, k) => {
     const result = getTypeStyle(v, __projectSystem)
     return {

package/src/pages/Typography/documentStyles.js

@@ -66,14 +66,14 @@ export default {
             text: '<p>'
           }
         }
-      }, 
+      },
       code: {
         props: {
           title: {
             text: '<code>'
           }
         }
-      }, 
+      },
       pre: {
         props: {
           title: {