@symbo.ls/preview 2.0.7 → 2.6.0

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: __system.TYPOGRAPHY.styles && 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: 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

@@ -0,0 +1,40 @@
+'use strict'
+
+import { ClickableItem } from '@symbo.ls/components'
+import { DesignComponent } from '../../../components'
+
+import state from './state'
+
+export const content = {
+  props: {
+    margin: '- -Z',
+    columns: '15rem',
+    gap: 'B1'
+  },
+
+  childExtend: {
+    extend: [ClickableItem, DesignComponent],
+    props: {
+      maxWidth: 'none',
+      width: '100%',
+      margin: '- - B1'
+    }
+  },
+
+  $setStateCollection: ({ state }) => state.data
+}
+
+export default {
+  props: {
+    margin: '- - C1'
+  },
+
+  state,
+
+  SectionHeader: {
+    title: 'Design System takeaways',
+    p: 'Your tokens in the system at a glance'
+  },
+
+  content
+}

package/src/pages/DesignSystem/index.js

@@ -0,0 +1,187 @@
+'use strict'
+
+import { router } from '@domql/router'
+
+import { Flex } from '@symbo.ls/components'
+
+import {
+  ShapePreview,
+  ResponsivePreview,
+  SpacingPreview,
+  Page
+} from '../../components'
+
+import { DesignSystemDashboard } from './Dashboard'
+import {
+  Color,
+  Theme,
+  Shapes,
+  Spaces,
+  Icons,
+  Typography,
+  Fonts,
+  MediaQuery
+} from '..'
+
+const NAV = [{
+  state: {
+    title: 'Colors',
+    href: '/colors'
+  },
+  props: {
+    icon: { name: 'color outline colored' }
+  }
+}, {
+  state: {
+    title: 'Typography',
+    href: '/typography'
+  },
+  props: {
+    icon: { name: 'typography outline' },
+    opacity: '.7'
+  }
+}, {
+  state: {
+    title: 'Spacing',
+    href: '/space'
+  },
+  props: {
+    icon: { name: 'space outline' },
+    opacity: '.7'
+  }
+}, {
+  state: {
+    title: 'Shapes',
+    href: '/shape'
+  },
+  props: {
+    icon: { name: 'shape outline colored' }
+  }
+}, {
+  state: {
+    title: 'Icons',
+    href: '/icons'
+  },
+  props: {
+    icon: { name: 'icons outline colored' },
+    '.isActive': {
+      icon: { name: 'icons colored' }
+    }
+  }
+}, {
+  state: {
+    title: 'Responsive',
+    href: '/media-query'
+  },
+  props: {
+    icon: { name: 'device mobile half fill' },
+    opacity: '.7'
+  }
+}, {
+  state: {
+    title: 'Fonts',
+    href: '/fonts'
+  },
+  props: {
+    icon: { name: 'fontFace colored' },
+    opacity: '.7'
+  }
+}, {
+  state: {
+    title: 'Timing',
+    href: '/timing'
+  },
+  props: {
+    icon: { name: 'clock colored' }
+  }
+}, {
+  state: {
+    title: 'Sequence',
+    href: '/sequence'
+  },
+  props: {
+    icon: { name: 'sequence colored' }
+  }
+}]
+
+export const DesignSystem = {
+  extend: Flex,
+
+  props: {
+    margin: '-C2+X2 - -',
+    padding: 'C2+X2 - -',
+    minHeight: '100%',
+    maxWidth: '100%',
+    width: '100%',
+    flow: 'column',
+    gap: 'B1',
+
+    page: {
+      width: '100%',
+      flow: 'row',
+      flex: 1,
+      align: 'flex-start flex-start',
+      gap: 'B1',
+      padding: 'D2 A C1',
+
+      Page: {
+        padding: 'X2 C1 B1',
+        flex: 1
+      }
+    },
+
+    widget: {
+      padding: 'A',
+      position: 'sticky',
+      width: '100%',
+      zIndex: 9999,
+      bottom: '0'
+    }
+  },
+
+  define: { routes: param => param },
+  routes: {
+    '/design-system': DesignSystemDashboard,
+    '/colors': Color,
+    '/theme': Theme,
+    '/typography': Typography,
+    '/space': Spaces,
+    '/shape': Shapes,
+    '/fonts': Fonts,
+    '/icons': Icons,
+    '/media-query': MediaQuery
+    // '/sequence': Sequence,
+    // '/timing': Timing,
+  },
+
+  page: {
+    extend: Flex,
+
+    DesignSystemNavbar: {
+      extend: true,
+      nav: { ...NAV }
+    },
+    Page: { extend: Page }
+  },
+
+  widget: {
+    state: ({ parent }) => ({ __ref: parent.page.Page.state }),
+
+    define: { routes: param => param },
+    routes: {
+      '/media-query': ResponsivePreview,
+      '/space': SpacingPreview,
+      '/shape': ShapePreview
+    },
+
+    on: {
+      render: element => {
+        const { pathname, hash } = window.location
+        const url = pathname + hash
+        router(element, url, {})
+      }
+    }
+  }
+}
+
+export * from './Dashboard'

package/src/pages/Editor/index.js

@@ -1,9 +1,8 @@
 'use strict'
 
-import { Block, Flex, Footer, ResponsiveToolBar } from '@symbo.ls/all'
+import { Block, Flex, Footer, ResponsiveToolBar } from '@symbo.ls/components'
 
-import COMPONENTS from '../../data/components'
-import LIBRARIES from '../../data/library'
+import { LIBRARY } from '../../../.symbols'
 
 import LayerSidebar from './layers'
 import ToolSidebar from './tools'
@@ -11,14 +10,13 @@ import scene from './scene'
 
 import style from './style'
 const COMPONENT_ROUTES = {}
-COMPONENTS.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v.component))
-LIBRARIES.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v.component))
+LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 
 export default {
   style,
-  proto: Flex,
+  extend: Flex,
   mainContainer: {
-    proto: [Block, Flex],
+    extend: [Block, Flex],
     props: {
       padding: '0 A2',
       gap: 'B'
@@ -30,11 +28,11 @@ export default {
   },
 
   footer: {
-    proto: Footer,
+    extend: Footer,
     FooterBar: {},
     // span: 'Autosaved 1 secsond ago',
     screenChanger: {
-      proto: ResponsiveToolBar,
+      extend: ResponsiveToolBar,
       style: {
         marginLeft: 'auto'
       }

package/src/pages/Editor/layers.js

@@ -1,16 +1,16 @@
 ' use strict'
 
-import { Shape, Block, Flex, Text, Icon } from '@symbo.ls/all'
+import { Shape, Block, Flex, Text, Icon } from '@symbo.ls/components'
 
 const objectLayer = {
-  proto: [Block, Text, Shape],
+  extend: [Block, Text, Shape],
   props: {
     round: 'A',
     padding: '0 Y Y Y'
   },
 
   h4: {
-    proto: [Block, Text],
+    extend: [Block, Text],
     props: {
       text: 'Button',
       padding: 'A 0 A1 A1'
@@ -19,7 +19,7 @@ const objectLayer = {
   },
 
   caption: {
-    proto: [Block, Text],
+    extend: [Block, Text],
     props: {
       text: 'IconText',
       padding: '0 0 A B1'
@@ -27,10 +27,10 @@ const objectLayer = {
   },
 
   objectComponent: {
-    proto: [Block, Flex],
+    extend: [Block, Flex],
     style: { flexDirection: 'column' },
-    childProto: {
-      proto: [Block, Flex, Text, Shape],
+    childExtend: {
+      extend: [Block, Flex, Text, Shape],
       props: {
         padding: 'Z2 0 Z2 B1',
         round: 'A'
@@ -38,13 +38,13 @@ const objectLayer = {
       style: {
         alignItems: 'center'
       },
-      icon: { proto: Icon },
+      icon: { extend: Icon },
       caption: {
-        proto: [Block, Text],
+        extend: [Block, Text],
         props: { padding: '0 X2 0 Y' }
       },
       span: {
-        proto: Text,
+        extend: Text,
         style: { opacity: '.35' }
       }
     },
@@ -72,11 +72,11 @@ const objectLayer = {
 
 export default {
   tag: 'aside',
-  proto: [Block, Text],
+  extend: [Block, Text],
   props: { size: 'Y' },
 
   caption: {
-    proto: [Block, Text],
+    extend: [Block, Text],
     props: {
       text: 'Layer'
     },
@@ -92,7 +92,7 @@ export default {
   },
 
   layer: {
-    proto: objectLayer,
+    extend: objectLayer,
     props: {
       theme: 'buttonPrimary'
     },
@@ -102,7 +102,7 @@ export default {
     objectComponent: {},
 
     layer2: {
-      proto: objectLayer,
+      extend: objectLayer,
       style: {
         margin: '0 auto',
         background: 'rgba(255, 255, 255, .04)',

package/src/pages/Editor/scene.js

@@ -1,16 +1,16 @@
 'use strict'
 
-import { Block, Flex, Text, KangorooButton, Breadcrumb, SceneToolBar, Scene } from '@symbo.ls/all'
+import { Block, Flex, Text, KangorooButton, Breadcrumb, SceneToolBar, Scene } from '@symbo.ls/components'
 
 const header = {
-  proto: [Flex, Block],
+  extend: [Flex, Block],
   style: {
     justifyContent: 'space-between',
     marginTop: '12px',
     marginBottom: '4px'
   },
   nav: {
-    proto: [Breadcrumb, Text],
+    extend: [Breadcrumb, Text],
     props: { size: 'A' },
     all: {
       props: {
@@ -29,11 +29,10 @@ const header = {
 }
 
 const buttonThemeSwitcher = {
-  proto: KangorooButton,
+  extend: KangorooButton,
 
   props: {
     round: 'C',
-    theme: 'lightDark',
     size: 'A',
     padding: 'X1 Y X1 A1',
     gap: 'Z1',
@@ -45,7 +44,6 @@ const buttonThemeSwitcher = {
     },
 
     dark: {
-      theme: ['lightDark', 'inverse'],
       round: 'C',
       icon: 'moon',
       padding: 'Z Z1',
@@ -78,14 +76,14 @@ const buttonThemeSwitcher = {
 
 }
 export default {
-  proto: Flex,
+  extend: Flex,
   style: {
     flex: 1,
     flexDirection: 'column'
   },
-  header: { proto: header },
+  header: { extend: header },
   scene: {
-    proto: Scene,
+    extend: Scene,
     style: {
       flex: 1,
       '> div': { height: '100%' }

package/src/pages/Editor/tools.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { Shape, Block, Flex, Text, SquareButton, ButtonSet, ClickableItem, ThemeSwitcher, ToolItem } from '@symbo.ls/all'
+import { Shape, Block, Flex, Text, SquareButton, ButtonSet, ClickableItem, ThemeSwitcher, ToolItem } from '@symbo.ls/components'
 
 const commonComponent = {
-  proto: Block,
+  extend: Block,
   caption: {
-    proto: [Block, Text],
+    extend: [Block, Text],
     props: {
       padding: 'A X'
     },
@@ -15,7 +15,7 @@ const commonComponent = {
     }
   },
   toolsContainer: {
-    proto: [Block, Shape, Flex],
+    extend: [Block, Shape, Flex],
     props: {
       gap: 'A',
       padding: 'A 0',
@@ -27,13 +27,13 @@ const commonComponent = {
       background: 'rgba(255, 255, 255, .06)'
     },
     tools: {
-      proto: [Block, Flex],
+      extend: [Block, Flex],
       props: { gap: 'A' },
       style: {
         flexDirection: 'column'
       },
-      childProto: {
-        proto: ToolItem,
+      childExtend: {
+        extend: ToolItem,
         icon: { },
         tool: {
           props: { padding: 'X2' },
@@ -45,7 +45,7 @@ const commonComponent = {
           range: {},
           button1: { props: { size: 'B' } },
           button2: {
-            proto: [SquareButton, ClickableItem],
+            extend: [SquareButton, ClickableItem],
             props: {
               icon: 'arrowAngleMirroringVertical',
               size: 'B',
@@ -60,7 +60,7 @@ const commonComponent = {
 }
 
 const themeSwitcher = {
-  proto: ThemeSwitcher,
+  extend: ThemeSwitcher,
   props: {
     padding: 'Y2 X2 Y2 Z'
   },
@@ -83,7 +83,7 @@ const themeSwitcher = {
   },
 
   title: {
-    proto: [Flex, Block],
+    extend: [Flex, Block],
     props: { gap: 'W' },
     style: { flexDirection: 'column' },
     text: 'Revolver',
@@ -105,7 +105,7 @@ const themeSwitcher = {
 }
 
 const style = {
-  proto: commonComponent,
+  extend: commonComponent,
   caption: {
     props: { text: 'style' }
   },
@@ -142,7 +142,7 @@ const style = {
 }
 
 const spaces = {
-  proto: commonComponent,
+  extend: commonComponent,
   caption: { props: { text: 'spaces' } },
   toolsContainer: {
     tools: {
@@ -185,7 +185,7 @@ const spaces = {
 }
 
 const border = {
-  proto: commonComponent,
+  extend: commonComponent,
   caption: { props: { text: 'border' } },
   toolsContainer: {
     tools: {
@@ -219,7 +219,7 @@ const border = {
 }
 
 const form = {
-  proto: commonComponent,
+  extend: commonComponent,
   caption: { props: { text: 'form' } },
   toolsContainer: {
     tools: {
@@ -230,7 +230,7 @@ const form = {
           tool: {
             button0: null,
             box: {
-              proto: [Block, Shape],
+              extend: [Block, Shape],
               props: {
                 round: 'X2'
               },
@@ -278,14 +278,14 @@ const form = {
 }
 
 export const accessibilityButoons = {
-  proto: ButtonSet,
+  extend: ButtonSet,
   props: {
     gap: 'A1',
     padding: '0 0 Z 0'
   },
 
-  childProto: {
-    proto: SquareButton,
+  childExtend: {
+    extend: SquareButton,
     props: {
       theme: 'transparent',
       size: 'C'
@@ -301,7 +301,7 @@ export const accessibilityButoons = {
 }
 
 const accessibility = {
-  proto: commonComponent,
+  extend: commonComponent,
   caption: { props: { text: 'accessibility' } },
   toolsContainer: {
     accessibilityButoons,
@@ -313,7 +313,7 @@ const accessibility = {
           tool: {
             button0: null,
             box: {
-              proto: [Block, Shape],
+              extend: [Block, Shape],
               props: {
                 round: 'X2'
               },
@@ -344,12 +344,12 @@ const accessibility = {
 
 export default {
   tag: 'aside',
-  proto: [Block, Text],
+  extend: [Block, Text],
   props: { size: 'Y' },
   style: {
     paddingTop: '10px'
   },
-  childProto: commonComponent,
+  childExtend: commonComponent,
   ...[
     style,
     spaces,

package/src/pages/Export/const.js

@@ -1,12 +1,11 @@
 'use strict'
 
-import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/all'
-import COMPONENTS from '../../data/components'
-import LIBRARIES from '../../data/library'
+import { SEQUENCE, TYPOGRAPHY } from '@symbo.ls/scratch'
+import { LIBRARY, COMPONENTS } from '@symbo.ls/temp-db/symbols' // eslint-disable-line
 
 const COMPONENT_ROUTES = {}
+// LIBRARY.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 COMPONENTS.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
-LIBRARIES.map(v => (COMPONENT_ROUTES[`/${v.key}`] = v))
 
 // const SEQUENCE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 32, 36, 42, 48, 56, 62, 68, 76, 84, 92, 100, 110]