@symbo.ls/preview 0.0.60 → 0.0.62

package/package.json

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

package/src/components/Banner.js

@@ -8,7 +8,6 @@ export const TutorialBanner = {
   props: ({ state }) => ({
     flow: 'column',
     round: 'A',
-    flex: '1',
     height: 'F',
     padding: 'A2 B',
     background: 'gray2',
@@ -17,6 +16,7 @@ export const TutorialBanner = {
     overflow: 'hidden',
     position: 'relative',
     color: 'white',
+    flex: 1,
 
     title: { margin: 'auto 0 0', text: state.title },
     p: { text: state.p },

package/src/components/DesignComponent.js

@@ -0,0 +1,79 @@
+'use strict'
+
+import { DesignElement, Flex, Grid } from '@symbo.ls/components'
+
+const componentHeader = {
+  tag: 'header',
+  extend: [DesignElement, Flex],
+
+  props: ({ state }) => ({
+    minWidth: '100%',
+    padding: 'Z1 - Z1 Z2',
+    flow: 'row',
+    round: '0',
+    alignItems: 'flex-start',
+    pointerEvents: 'none',
+    background: 'gray2',
+
+    button: {
+      padding: 'Y2',
+      icon: state.icon,
+      theme: state.iconTheme
+    },
+    heading: {
+      gap: '0',
+      title: {
+        text: state.title,
+        textTransform: 'capitalize'
+      },
+      p: {
+        text: state.paragraph,
+        maxWidth: 'F1'
+      }
+    }
+  })
+}
+
+const propertyNumber = {
+  extend: Grid,
+  props: ({ state }) => ({
+    columns: 'repeat(2, 1fr)',
+    property: {
+      text: state.property,
+      color: 'gray6'
+    },
+    value: {
+      text: state.value,
+      fontWeight: '500'
+    }
+  }),
+  property: {},
+  value: {}
+}
+
+const componentProperties = {
+  extend: Flex,
+  props: {
+    padding: 'Z2 A',
+    flow: 'column',
+    gap: 'Z2',
+    background: 'gray1'
+  },
+  childExtend: propertyNumber,
+  $setStateCollection: ({ state }) => state.properties
+}
+
+export const DesignComponent = {
+  extend: Flex,
+  props: {
+    flow: 'column',
+    minWidth: 'F1',
+    maxWidth: 'F2',
+    round: 'A',
+    height: 'fit-content',
+    overflow: 'hidden'
+  },
+
+  componentHeader,
+  componentProperties
+}

package/src/components/FontText.js

@@ -23,7 +23,7 @@ const fontWeights = {
       top: '0',
       fontSize: '20px'
     },
-    childProps: { fontSize: 'F3' }
+    childProps: { fontSize: 'F2' }
   },
   childExtend: {
     extend: { text: 'A' }
@@ -39,20 +39,19 @@ const letterTransform = {
   extend: Flex,
   props: {
     alignItems: 'center',
-    // border: '2px solid red',
+    height: 'fit-content',
     gap: 'X2',
     childProps: {
       minHeight: 'fit-content'
-      // border: '2px solid black'
     }
   },
   childExtend: {},
   ...[
-    { props: { text: 'a', textTransform: 'uppercase', fontSize: 'F', fontWeight: '700' } },
-    { props: { text: 'b', fontWeight: '700', fontSize: 'E' } },
-    { props: { text: 'c', fontWeight: '500', fontSize: 'D1' } },
-    { props: { text: 'd', fontSize: 'C1' } },
-    { props: { text: 'e', fontWeight: '300', fontSize: 'B1' } },
+    { props: { text: 'a', textTransform: 'uppercase', fontSize: 'F2', fontWeight: '700' } },
+    { props: { text: 'b', fontWeight: '700', fontSize: 'F' } },
+    { props: { text: 'c', fontWeight: '500', fontSize: 'D2' } },
+    { props: { text: 'd', fontSize: 'C2' } },
+    { props: { text: 'e', fontSize: 'C' } },
     { props: { text: 'f', fontSize: 'B' } }
   ]
 }
@@ -64,7 +63,7 @@ const fontStyle = {
   },
   childExtend: {
     props: {
-      fontSize: 'F',
+      fontSize: 'F2',
       textTransform: 'uppercase',
       fontWeight: '300',
       margin: '0',
@@ -167,14 +166,17 @@ export const FontText = {
   props,
 
   fontName,
+
   content: {
     extend: Flex,
     fonts: {
       extend: Flex,
+
       fontWeights,
       letterTransform,
       fontStyle
     },
+
     paragraph
   },
 

package/src/components/index.js

@@ -20,3 +20,4 @@ export * from './SpacingPreview'
 export * from './ResponsivePreview'
 export * from './IconsGroup'
 export * from './FontText'
+export * from './DesignComponent'

package/src/pages/Color/FontText.js

@@ -1,11 +1,13 @@
 'use strict'
 
 export const fontText = {
+
   HeaderHeading: {
-    caption: { text: 'Let’s make sure' },
+    props: { margin: '- - D2 -' },
+    caption: { text: `Let's make sure` },
     h1: { text: 'Texts look good?' }
   },
 
   FontText: {},
-  ContinueButton: {}
+  ContinueButton: { props: { margin: 'F - - -' } }
 }

package/src/pages/Color/chooseEnvironment.js

@@ -0,0 +1,132 @@
+'use strict'
+
+import { Flex, CommonField, WiderButton, Button } from '@symbo.ls/components'
+
+import { HeaderHeading } from '../../components'
+
+const header = {
+  extend: HeaderHeading,
+  props: {
+    margin: '- - D -',
+    caption: { text: 'And finally' },
+    h1: {
+      text: 'Choose your environment',
+      flow: 'row-reverse',
+      align: 'center flex-end',
+      span: {
+        text: 'if any',
+        fontWeight: '300',
+        opacity: '.85',
+        padding: '- - - X'
+      },
+      span2: {
+        text: ',',
+        fontWeight: '300',
+        opacity: '.85'
+      }
+    }
+  },
+
+  caption: {},
+  h1: {
+    extend: Flex,
+    span: {},
+    span2: { }
+  }
+}
+
+const commonField = {
+  extend: CommonField,
+  props: {
+    gap: 'Z2',
+    element: {
+      gap: 'A',
+      maxWidth: 'I',
+      alignItems: 'center',
+      childProps: {
+        // boxSize: 'B2 C',
+        // padding: '0',
+        background: 'gray2',
+        color: 'white .8',
+        round: 'Z1'
+      }
+    }
+  },
+
+  title: {},
+  element: {
+    extend: Flex,
+    childExtend: {
+      extend: WiderButton
+    }
+  }
+}
+const yourEnvironment = {
+  extend: commonField,
+  props: {
+    margin: '- - C2 -',
+    title: { text: 'Your environment' },
+    element: {
+      childProps: {}
+    }
+  },
+
+  title: {},
+  element: {
+    ...[
+      { props: { icon: 'inputOutline' } },
+      { props: { icon: 'accessibilityOutline' } },
+      {
+        props: {
+          boxSizing: 'content-box',
+          padding: 'Z C3',
+          border: '2px solid red',
+          style: { borderRadius: '50px' },
+          span: {
+            text: `I'm just playing`,
+            fontSize: 'Z'
+          }
+        },
+        icon: null,
+        span: {}
+      },
+
+      {
+        props: {
+          icon: 'inputOutline',
+          margin: '- - - auto'
+        }
+      }
+    ]
+  }
+}
+
+const yourFramework = {
+  extend: commonField,
+  props: {
+    margin: '- - F -',
+    title: { text: 'Your framework' },
+    element: { childProps: { icon: 'info' } }
+  },
+  title: {},
+  element: { ...[{}, {}, {}, {}, {}, {}] }
+}
+
+const createSymbolsButton = {
+  extend: Button,
+  props: {
+    text: 'create symbols',
+    fontSize: 'Z2',
+    padding: 'Z1 C',
+    textTransform: 'capitalize',
+    round: 'C',
+    theme: 'primary'
+  }
+}
+
+export const chooseEnvironment = {
+  header,
+  yourEnvironment,
+  yourFramework,
+  createSymbolsButton
+}

package/src/pages/Color/index.js

@@ -6,10 +6,10 @@ import globalThemes from './globalThemes'
 import palette from './palette'
 import themes from './themes'
 
-// import { ThemeButtons } from '../../components'
-// import { themeLightDark } from './themeLightDark'
-// import { CreatePallete } from './CreatePalette'
-// import { fontText } from './FontText'
+import { themeLightDark } from './themeLightDark'
+import { CreatePallete } from './CreatePalette'
+import { fontText } from './FontText'
+import { chooseEnvironment } from './chooseEnvironment'
 
 export const Color = {
   key: 'colors',
@@ -21,7 +21,8 @@ export const Color = {
 
   // createPallete: CreatePallete,
   // themeLightDark,
-  // fontText
+  // fontText,
+  // chooseEnvironment,
 
   globalThemes,
   line: { extend: Line },

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

@@ -5,7 +5,8 @@ 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 {
   extend: Flex,
@@ -20,18 +21,18 @@ export default {
 
   $setStateCollection: ({ state }) => [{
     title: 'Setting up a dark theme',
-    p: '1 min tutorial',
+    p: '15 sec tutorial',
     background: DARK_PNG,
     href: ''
   }, {
-    title: 'Learn typography scaling',
-    p: '2 mins tutorial',
+    title: 'How to composite',
+    p: '3 mins tutorial',
     background: TYPE_PNG,
     href: ''
   }, {
-    title: 'How scaling of space works',
-    p: '5 mins tutorial',
-    background: SPACE_PNG,
+    title: 'Master Shapes',
+    p: '45 sec tutorial',
+    background: SHAPES_PNG,
     href: ''
   }]
 }

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

@@ -1,8 +1,8 @@
 'use strict'
 
-import summary from './summary'
-import quickstart from './quickstart'
 import banners from './banners'
+import quickstart from './quickstart'
+import summary from './summary'
 
 export const DesignSystemDashboard = {
   ArticleBig: {

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

@@ -1,5 +1,21 @@
 'use strict'
 
+const startElementProps = {
+  position: 'relative',
+  maxWidth: 'G',
+  width: '100%',
+  note: {
+    fontSize: 'Z1',
+    color: 'gray6',
+    position: 'absolute',
+    maxWidth: '100%',
+    whiteSpace: 'initial',
+    top: '115%',
+    left: 'Z',
+    fontFamily: 'smbls'
+  }
+}
+
 export default {
   props: {
     margin: 'C1 - E1'
@@ -17,8 +33,9 @@ export default {
       align: 'flex-start space-between',
       childProps: {
         flex: '1',
-        maxWidth: 'H'
-        // width: '100%'
+
+        Terminal: startElementProps,
+        Code: startElementProps
       }
     },
 
@@ -26,21 +43,20 @@ export default {
       extend: 'QuickStartTerminal',
       QuickStartNumber: { width: '.87ch', text: '1' },
       Terminal: {
-        command: { text: 'yarn add smbls' }
+        note: { text: 'Install Symbols to your project' },
+        props: {
+          command: { text: 'npm i smbls -g' }
+        }
       }
     },
 
     step2: {
-      extend: 'QuickStartCode',
+      extend: 'QuickStartTerminal',
       QuickStartNumber: { text: '2' },
-      Code: {
-        code: {
-          text: {
-            react: `import { SymbolsProvider } from 'smbls/react'
-<SymbolsProvider config={{ color… }} />`,
-            domql: `import { init } from 'smbls'
-init({ color, theme, typography… })`
-          }
+      Terminal: {
+        note: { text: 'Login to Symbols from command line' },
+        props: {
+          command: { text: 'smbls login' }
         }
       }
     },
@@ -49,14 +65,24 @@ init({ color, theme, typography… })`
       extend: 'QuickStartCode',
       QuickStartNumber: { text: '3' },
       Code: {
-        code: {
-          text: {
-            react: `import { Box } from 'smbls/react'
-<Box color='primary' />`,
-            domql: `{ props: { color: 'primary' } }`
+        note: { text: 'Create .symbolsrc.js file in your project and insert your Symbols key' },
+        props: {
+          code: {
+            text: '{ "key": "key.symbo.ls" }'
           }
         }
       }
+    },
+
+    step4: {
+      extend: 'QuickStartTerminal',
+      QuickStartNumber: { text: '4' },
+      Terminal: {
+        note: { text: 'Sync live changes' },
+        props: {
+          command: { text: 'smbls sync' }
+        }
+      }
     }
   }
 }

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

@@ -1,9 +1,160 @@
 'use strict'
+import { ClickableItem, Grid } 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'
+    }]
+  }]
+})
+
+export const designComponents = {
+  extend: Grid,
+  props: {
+    columns: `repeat(auto-fill, 15.235%)`,
+    rows: 'repeat(2, 1fr)',
+    autoFlow: 'dense',
+    justifyItems: 'flex-start',
+    autoColumns: 'auto',
+    autoRows: 'auto',
+
+    gap: 'B1'
+  },
+
+  childExtend: {
+    extend: [ClickableItem, DesignComponent],
+    props: {
+      maxWidth: 'none',
+      width: '100%'
+
+      // flex: '1 1 100%'
+      // widthRange: 'F2 G'
+    }
+  },
+
+  $setStateCollection: ({ state }) => state.data
+}
 
 export default {
+  state,
+
   SectionHeader: {
     margin: '- - C1',
     title: 'Design System takeaways',
     p: 'Your tokens in the system at a glance'
-  }
+  },
+
+  designComponents
 }

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/src/state.js

@@ -6,7 +6,8 @@ import BYLD from '../user_data/byld' // eslint-disable-line no-unused-vars
 
 export const state = {
   globalTheme: 'dark',
-  SYSTEM: {}
+  SYSTEM
+  // SYSTEM: {}
 }
 
 export const context = {

package/user_data/byld.js

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