@symbo.ls/preview 0.0.62 → 0.0.64

package/package.json

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

package/src/components/Banner.js

@@ -44,7 +44,7 @@ export const TutorialBanner = {
     ':after': {
       transition: 'B default-bezier',
       transitionProperty: 'opacity',
-      background: 'imageOverlay',
+      background: 'shadow-overlay',
       opacity: '0.9'
     },
 

package/src/components/DesignComponent.js

@@ -71,7 +71,8 @@ export const DesignComponent = {
     maxWidth: 'F2',
     round: 'A',
     height: 'fit-content',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    userSelect: 'none'
   },
 
   componentHeader,

package/src/components/Page.js

@@ -2,6 +2,9 @@
 
 import { PageTemplate } from '@symbo.ls/components'
 
+import MASK1 from '../assets/mask1.png'
+import MASK2 from '../assets/mask2.png' // eslint-disable-line
+
 export const Page = {
   tag: 'main',
   extend: PageTemplate,
@@ -10,3 +13,44 @@ export const Page = {
     maxWidth: 'K-default'
   }
 }
+
+export const DisabledPage = {
+  props: {
+    maxHeight: 'calc(100vh - 7em)',
+    overflow: 'hidden'
+  },
+
+  Overlay: {
+    props: {
+      overflow: 'hidden',
+      background: 'shadow-overlay',
+      animation: 'fadeInUp',
+      animationDuration: 'G'
+    },
+
+    Overlay: {
+      props: {
+        background: 'gradient-colorful',
+        inset: '0 0 0 0',
+        opacity: '.9',
+        style: {
+          // filter: 'blur(110px)',
+          WebkitMaskImage: 'url(' + MASK1 + ')',
+          WebkitMaskSize: '100% 100%'
+        }
+      }
+    },
+
+    H4: {
+      position: 'absolute',
+      margin: '0',
+      color: 'black',
+      left: 'C',
+      bottom: 'B',
+      text: 'Custom library will come up soon…',
+      animation: 'fadeInUpLong',
+      animationDuration: 'G',
+      animationDelay: 'G'
+    }
+  }
+}

package/src/components/SlidersWithResponsive.js

@@ -9,8 +9,8 @@ export const SlidersWithResponsive = {
     align: 'flex-end space-between',
     position: 'sticky',
     top: 'C2',
-    background: 'black .5',
-    zIndex: '9',
+    theme: 'header',
+    zIndex: '1000',
     margin: '-B2 -B -B',
     padding: 'B2 B B',
     style: {

package/src/index.js

@@ -10,7 +10,7 @@ import * as smbls from '@symbo.ls/components'
 import * as components from './components'
 
 import App from './app'
-import { Library } from './pages'
+import { DesignSystem, Library } from './pages' // eslint-disable-line
 import { router, lastLevel } from '@domql/router'
 
 import { context } from './state'
@@ -30,7 +30,7 @@ const app = DOM.create({
 
   header: components.Header,
   routes: {
-    '/': Library
+    // '/': DesignSystem
   }
 }, undefined, 'app', {
   extend: [smbls.Box],

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

@@ -2,7 +2,8 @@
 
 const startElementProps = {
   position: 'relative',
-  maxWidth: 'G',
+  minWidth: 'G',
+  maxWidth: 'G2',
   width: '100%',
   note: {
     fontSize: 'Z1',
@@ -29,7 +30,8 @@ export default {
 
   Flex: {
     props: {
-      gap: 'C1',
+      // display: 'inline-flex',
+      gap: 'D1',
       align: 'flex-start space-between',
       childProps: {
         flex: '1',

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,135 +1,19 @@
 'use strict'
-import { ClickableItem, Grid } from '@symbo.ls/components'
 
+import { ClickableItem } from '@symbo.ls/components'
 import { DesignComponent } from '../../../components'
 
-const state = ({ 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'
-    }]
-  }]
-})
+import state from './state'
 
-export const designComponents = {
-  extend: Grid,
+export const content = {
   props: {
-    columns: `repeat(auto-fill, 15.235%)`,
-    rows: 'repeat(2, 1fr)',
-    autoFlow: 'dense',
-    justifyItems: 'flex-start',
-    autoColumns: 'auto',
-    autoRows: 'auto',
-
+    // columns: `repeat(6, 1fr)`,
+    // rows: 'repeat(2, 1fr)',
+    // autoFlow: 'dense',
+    // justifyItems: 'flex-start',
+    // autoColumns: 'auto',
+    // autoRows: 'auto',
+    columns: '15rem',
     gap: 'B1'
   },
 
@@ -137,10 +21,8 @@ export const designComponents = {
     extend: [ClickableItem, DesignComponent],
     props: {
       maxWidth: 'none',
-      width: '100%'
-
-      // flex: '1 1 100%'
-      // widthRange: 'F2 G'
+      width: '100%',
+      margin: '- - B1'
     }
   },
 
@@ -156,5 +38,5 @@ export default {
     p: 'Your tokens in the system at a glance'
   },
 
-  designComponents
+  content
 }

package/src/pages/DesignSystem/index.js

@@ -152,6 +152,7 @@ export const DesignSystem = {
 
   define: { routes: param => param },
   routes: {
+    '/': DesignSystemDashboard,
     '/design-system': DesignSystemDashboard,
     '/colors': Color,
     '/theme': Theme,
@@ -169,7 +170,6 @@ export const DesignSystem = {
     extend: Flex,
 
     DesignSystemNavbar: { extend: true, ...NAV },
-
     Page: { extend: Page }
   },
 
@@ -192,3 +192,5 @@ export const DesignSystem = {
     }
   }
 }
+
+export * from './Dashboard'

package/src/pages/Library/index.js

@@ -1,12 +1,12 @@
 'use strict'
 
 import { ComponentTemplate } from '@symbo.ls/components'
-import { Page } from '../../components'
+import { Page, DisabledPage } from '../../components'
 
-import { COMPONENTS } from '../../../.symbols'
+import { COMPONENTS } from '../../../.symbols' // eslint-disable-line
 
 export const Library = {
-  extend: Page,
+  extend: [Page, DisabledPage],
 
   SectionHeader: {
     title: 'My Symbols',
@@ -27,17 +27,9 @@ export const Library = {
     },
 
     childExtend: ComponentTemplate,
-    $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: {
-
+    $setStateCollection: () => {
+      return new Array(14)
+      // COMPONENTS
     }
   }
 }