@symbo.ls/preview 0.0.61 → 0.0.63

package/package.json

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

package/src/components/DesignComponent.js

@@ -67,6 +67,7 @@ export const DesignComponent = {
   extend: Flex,
   props: {
     flow: 'column',
+    minWidth: 'F1',
     maxWidth: 'F2',
     round: 'A',
     height: 'fit-content',

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

@@ -5,7 +5,7 @@ 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'
+import SPACE_PNG from '../../../assets/space.png' // eslint-disable-line
 import SHAPES_PNG from '../../../assets/shapes.png'
 
 export default {

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

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

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

@@ -1,136 +1,40 @@
 'use strict'
-import { Grid } from '@symbo.ls/components'
 
+import { ClickableItem, Grid } from '@symbo.ls/components'
 import { DesignComponent } from '../../../components'
 
-const DESIGN_SYSTEM_ITEMS = [{
-  icon: 'colorOutline',
-  iconTheme: 'theme',
-  title: 'colors',
-  paragraph: 'Colorize styles manually',
-  iconBackground: 'red',
-  properties: [{
-    property: 'Colors',
-    value: '35'
-  }, {
-    property: 'Themes',
-    value: '15'
-  }]
-}, {
-  icon: 'typographyOutline',
-  iconTheme: 'typography',
-  title: 'typography',
-  paragraph: 'style a typed material',
-  properties: [{
-    property: 'Base size',
-    value: '16px'
-  }, {
-    property: 'Ratio',
-    value: '1.2'
-  }, {
-    property: 'Style',
-    value: '8'
-  }, {
-    property: 'Fonts',
-    value: '2'
-  }, {
-    property: 'Breakpoints',
-    value: '3'
-  }]
-}, {
-  icon: 'spaceOutline',
-  iconTheme: 'space',
-  title: 'Spacing',
-  paragraph: 'Manage properties of a size',
-  properties: [{
-    property: 'Ratio',
-    value: '1.618'
-  }, {
-    property: 'Style',
-    value: '8'
-  }, {
-    property: 'Breakpoints',
-    value: '3'
-  }]
-}, {
-  icon: 'shape',
-  iconTheme: 'shape',
-  title: 'shapes',
-  paragraph: 'Design an outline to a chosen component',
-  properties: [{
-    property: 'HTML',
-    value: '32'
-  }, {
-    property: 'SVG',
-    value: '1'
-  }]
-}, {
-  icon: 'iconsOutline',
-  iconTheme: 'color',
-  title: 'Icons',
-  paragraph: 'Label a role of subject with glyphs',
-  properties: [{
-    property: 'Linear',
-    value: '788'
-  }, {
-    property: 'Colored',
-    value: '64'
-  }]
-}, {
-  icon: 'clock',
-  iconTheme: 'icons',
-  title: 'Timing',
-  paragraph: 'Tokens for transitions and animations',
-  properties: [{
-    property: 'Timing base',
-    value: '150ms'
-  }, {
-    property: 'Ratio',
-    value: '1.618'
-  }, {
-    property: 'Transitions',
-    value: '15'
-  }, {
-    property: 'Animations',
-    value: '11'
-  }]
-}, {
-  icon: 'deviceMobileOutline',
-  title: 'Breakpoints',
-  paragraph: 'Label a role of subject with glyphs',
-  properties: [{
-    property: 'Breakpoints',
-    value: '8'
-  }, {
-    property: 'Screens',
-    value: '3'
-  }]
-}, {
-  icon: 'threeDots',
-  title: 'Sequence',
-  paragraph: 'The mapping system of generative sizing units',
-  properties: [{
-    property: 'Breakpoints',
-    value: '8'
-  }, {
-    property: 'Screens',
-    value: '3'
-  }]
-}]
+import state from './state'
 
 export const designComponents = {
   extend: Grid,
   props: {
-    columns: 'repeat(5, 1fr)',
-    rows: 'repeat(3, 1fr)'
+    columns: `repeat(auto-fill, 15.235%)`,
+    rows: 'repeat(2, 1fr)',
+    autoFlow: 'dense',
+    justifyItems: 'flex-start',
+    autoColumns: 'auto',
+    autoRows: 'auto',
+
+    gap: 'B1'
   },
 
-  childExtend: { extend: DesignComponent },
+  childExtend: {
+    extend: [ClickableItem, DesignComponent],
+    props: {
+      maxWidth: 'none',
+      width: '100%'
+
+      // flex: '1 1 100%'
+      // widthRange: 'F2 G'
+    }
+  },
 
-  $setStateCollection: () => DESIGN_SYSTEM_ITEMS
+  $setStateCollection: ({ state }) => state.data
 }
 
 export default {
+  state,
+
   SectionHeader: {
     margin: '- - C1',
     title: 'Design System takeaways',

package/src/pages/Library/index.js

@@ -3,7 +3,7 @@
 import { ComponentTemplate } from '@symbo.ls/components'
 import { Page } from '../../components'
 
-import { LIBRARY } from '../../../.symbols'
+import { COMPONENTS } from '../../../.symbols'
 
 export const Library = {
   extend: Page,
@@ -27,6 +27,17 @@ export const Library = {
     },
 
     childExtend: ComponentTemplate,
-    $setStateCollection: () => LIBRARY
+    $setStateCollection: () => COMPONENTS
+  },
+
+  Overlay: {
+    inset: '50% 0 0',
+    style: {
+      WebkitMaskImage: '-webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))'
+    },
+
+    H1: {
+
+    }
   }
 }

package/user_data/byld.js

@@ -77,6 +77,8 @@ const TYPOGRAPHY = {
   ratio: 1.125,
   subSequence: true,
 
+  styles: {},
+
   '@mobileL': {
     base: 15,
     ratio: 1.125