@symbo.ls/preview 0.0.65 → 0.0.67

package/package.json

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

package/src/app.js

@@ -8,6 +8,7 @@ import { openModal } from '@symbo.ls/components'
 
 import { state } from './state'
 import {
+  Init,
   Components,
   DesignSystem,
   Export,
@@ -47,6 +48,7 @@ const App = {
 
   define: { routes: param => param },
   routes: {
+    '/init': Init,
     '/library': Library,
     '/design-system': DesignSystem,
     '/components': Components,
@@ -61,12 +63,16 @@ const App = {
   Modal: {},
 
   on: {
-    render: element => {
+    render: (el, s) => {
       const { pathname, hash } = window.location
       const url = pathname + hash
-      router(element, url, {})
+      router(el, url, {})
+    },
+    update: (el, s) => {
+      const { pathname } = window.location
+      if (pathname === '/' && !state.initialized) return router(el, '/init/', {})
+      openModal(el, s)
     },
-    update: (el, s) => { openModal(el, s) },
     scroll: (ev, el) => {
       const { scrollTop } = el.node
       const isFloating = scrollTop > 0

package/src/components/ColorsPalette.js

@@ -1,64 +1,69 @@
 'use strict'
 
-import { Flex, Grid } from '@symbo.ls/components'
-
-const props = {
-  flow: 'column',
-  gap: 'A',
-  opacity: '.35'
-}
+import { ClickableItem, CommonField, Flex, Grid } from '@symbo.ls/components'
 
 export const ColorsPalette = {
-  props,
+  extend: CommonField,
+
+  props: {
+    gap: 'Z',
+    element: {
+      margin: '0 -X',
+      flow: 'column',
+      gap: 'Z2'
+    }
+  },
 
-  extend: Flex,
-  childExtend: {
-    extend: Grid,
-    // text: 'B',
+  title: { text: 'Suggestions' },
+  element: {
+    extend: Flex,
+    childExtend: {
+      extend: [ClickableItem, Grid],
 
-    props: ({ state }) => ({
-      minWidth: '190px',
-      round: 'A',
-      // round: 'D',
-      columns: 'repeat(3, 1fr)',
-      childProps: {
-        height: 'B2'
-        // style: { border: '4px solid red' }
-      },
-      color1: {
-        background: state.color1,
-        style: { borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px' }
-      },
-      color2: { background: state.color2 },
-      color3: {
-        background: state.color3,
-        style: { borderTopRightRadius: '10px', borderBottomRightRadius: '10px' }
+      props: ({ state }) => ({
+        minWidth: '190px',
+        round: 'Z2',
+        columns: 'repeat(3, 1fr)',
+        overflow: 'hidden',
+        opacity: '.35',
+        childProps: { height: 'B2' },
+
+        color1: { background: state[0] },
+        color2: { background: state[1] },
+        color3: { background: state[2] }
+      }),
+
+      color1: {},
+      color2: {},
+      color3: {},
+
+      on: {
+        click: (event, element, state) => {
+          state.parent.update(state.parse())
+        }
       }
-    }),
+    },
 
-    color1: {},
-    color2: {},
-    color3: {}
-  },
-  $setStateCollection: () => [{
-    color1: '#5F6C37',
-    color2: '#F1E0BC',
-    color3: '#FFFFFF'
-  }, {
-    color1: '#CCD5AE',
-    color2: '#FEF9E1',
-    color3: '#D3A374'
-  }, {
-    color1: '#CDB4DB',
-    color2: '#FEAFCC',
-    color3: '#A2D2FF'
-  }, {
-    color1: '#274553',
-    color2: '#E9C46A',
-    color3: '#E76F51'
-  }, {
-    color1: '#8EC9E6',
-    color2: '#013047',
-    color3: '#FFB703'
-  }]
+    $setStateCollection: () => [[
+      '#5F6C37',
+      '#F1E0BC',
+      '#FFFFFF'
+    ], [
+      '#CCD5AE',
+      '#FEF9E1',
+      '#D3A374'
+    ], [
+      '#CDB4DB',
+      '#FEAFCC',
+      '#A2D2FF'
+    ], [
+      '#274553',
+      '#E9C46A',
+      '#E76F51'
+    ], [
+      '#8EC9E6',
+      '#013047',
+      '#FFB703'
+    ]]
+  }
 }

package/src/components/ContinueButton.js

@@ -1,13 +1,15 @@
 'use strict'
-import { Button } from '@symbo.ls/components'
+
+import { Button, ClickableItem, Link } from '@symbo.ls/components'
+
 export const ContinueButton = {
-  extend: Button,
+  extend: [ClickableItem, Button, Link],
   props: {
     text: 'Continue',
-    fontSize: 'Z2',
-    padding: 'Z1 C',
-    background: 'linear-gradient(to top, rgba(50, 114, 184, .2), rgba(0, 121, 253, .27), rgba(0, 121, 253, .27))',
-    color: 'white',
+    fontSize: 'A2',
+    padding: 'Z1 C2',
+    theme: 'secondary',
+    margin: 'auto - - -Z',
     fontWeight: '500'
   }
 }

package/src/components/Header.js

@@ -1,21 +1,17 @@
 'use strict'
 
-import { HeaderOfMember } from '@symbo.ls/components'
-
 export const Header = {
-  style: {
+  props: {
     position: 'sticky',
     width: '100%',
-    top: 0,
-    zIndex: 99999
-  },
-
-  define: { isFloating: param => param },
+    top: '0',
+    zIndex: 99999,
 
-  content: {
-    extend: HeaderOfMember,
-    props: {
-      maxWidth: '100%'
+    content: {
+      maxWidth: '100%',
+      width: '100%'
     }
   }
+
+  // define: { isFloating: param => param }
 }

package/src/components/HeaderHeading.js

@@ -1,13 +1,18 @@
 'use strict'
 
-const props = {
-  caption: {
+export const HeaderHeading = {
+  tag: 'header',
+
+  props: { margin: '- - C2 -' },
+
+  Caption: {
     text: `Let's get started`,
     whiteSpace: 'nowrap',
     margin: '0',
     color: 'gray6'
   },
-  h1: {
+
+  H1: {
     color: 'white',
     text: 'First was the light',
     fontSize: 'H2',
@@ -16,11 +21,3 @@ const props = {
     height: 'fit-content'
   }
 }
-
-export const HeaderHeading = {
-  tag: 'header',
-  props,
-
-  caption: {},
-  h1: {}
-}

package/src/components/Page.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { PageTemplate } from '@symbo.ls/components'
+import { PageTemplate, Flex } from '@symbo.ls/components'
 
 import MASK1 from '../assets/mask1.png'
 import MASK2 from '../assets/mask2.png' // eslint-disable-line
@@ -14,6 +14,20 @@ export const Page = {
   }
 }
 
+export const InitPage = {
+  tag: 'main',
+  extend: Flex,
+
+  props: {
+    width: '100%',
+    maxWidth: 'J',
+    flow: 'column',
+    align: 'flex-start',
+
+    content: { width: '100%' }
+  }
+}
+
 export const DisabledPage = {
   props: {
     maxHeight: 'calc(100vh - 7em)',

package/src/components/UploadImage.js

@@ -3,14 +3,14 @@
 import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
 
 export const UploadImage = {
-  extend: [CommonField],
-  Flex,
+  extend: [CommonField, Flex],
+
   props: {
     title: { text: 'Pick from the picture' },
     element: {
       border: 'none',
       background: 'gray1',
-      padding: 'Z A Z Z',
+      padding: 'Z2 A2 Z2 Z2',
       gap: 'Z',
       flow: 'row',
       icon: { style: { fontSize: '52px' } },

package/src/index.js

@@ -28,9 +28,25 @@ const app = DOM.create({
   extend: App,
   style,
 
-  header: components.Header,
+  Header: {
+    props: {},
+
+    define: { routes: param => param },
+    routes: {
+      '/': smbls.HeaderInitial,
+      '/*': smbls.HeaderOfMember
+    },
+
+    on: {
+      render: element => {
+        const { pathname, hash } = window.location
+        const url = pathname + hash
+        router(element, url, {}, { updateState: false })
+      }
+    }
+  },
   routes: {
-    // '/': DesignSystem
+    // '/': Library
   }
 }, undefined, 'app', {
   extend: [smbls.Box],

package/src/pages/Color/index.js

@@ -1,16 +1,9 @@
 'use strict'
 
-import { Line } from '@symbo.ls/components'
-
 import globalThemes from './globalThemes'
 import palette from './palette'
 import themes from './themes'
 
-import { themeLightDark } from './themeLightDark'
-import { CreatePallete } from './CreatePalette'
-import { fontText } from './FontText'
-import { chooseEnvironment } from './chooseEnvironment'
-
 export const Color = {
   key: 'colors',
 
@@ -19,14 +12,9 @@ export const Color = {
     // style: { border: '4px solid red' }
   },
 
-  // createPallete: CreatePallete,
-  // themeLightDark,
-  // fontText,
-  // chooseEnvironment,
-
   globalThemes,
-  line: { extend: Line },
+  Line: {},
   palette,
-  line2: { extend: Line },
+  Line_2: {},
   themes
 }

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

@@ -66,7 +66,7 @@ export default ({ parent: { state: { __system } } }) => ({
     paragraph: 'Label a role of subject with glyphs',
     properties: [{
       property: 'All',
-      value: console.log(__system) || Object.keys(__system.ICONS).length
+      value: Object.keys(__system.ICONS).length
     }, {
       property: 'Linear',
       value: Object.keys(__system.ICONS).filter(v => v.includes('Outline')).length

package/src/pages/Init/ChooseEnvironment.js

@@ -0,0 +1,108 @@
+'use strict'
+
+import { Flex, CommonField, WiderButton } from '@symbo.ls/components'
+
+import { InitPage } from '../../components'
+
+const header = {
+  props: {
+    margin: '- - D -',
+    Caption: { text: 'And finally' },
+    H1: {
+      text: 'Choose your environment',
+      flow: 'row-reverse',
+      align: 'center flex-end',
+      ':after': {
+        content: '", if any"',
+        fontWeight: '200',
+        color: 'gray9'
+      }
+    }
+  },
+
+  Caption: {},
+  H1: {
+    span: {},
+    span2: {}
+  }
+}
+
+const commonField = {
+  extend: CommonField,
+  props: {
+    gap: 'Z2',
+    element: {
+      gap: 'A',
+      maxWidth: 'I',
+      alignItems: 'center',
+      childProps: {
+        background: 'gray2',
+        color: 'white .8',
+        round: 'Z1',
+        fontSize: 'A2'
+      }
+    }
+  },
+
+  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 B',
+        width: 'auto',
+        borderRadius: 'B',
+        text: `I'm just playing`,
+        aspectRatio: 'auto'
+      },
+      icon: null
+    }
+  ]
+}
+
+const yourFramework = {
+  extend: commonField,
+  props: {
+    margin: '- - F -',
+    title: { text: 'Your framework' },
+    element: { childProps: { icon: 'info' } }
+  },
+  title: {},
+  element: { ...[{}, {}, {}, {}, {}, {}] }
+}
+
+export const ChooseEnvironment = {
+  extend: InitPage,
+
+  HeaderHeading: header,
+
+  yourEnvironment,
+  yourFramework,
+
+  ContinueButton: {
+    text: 'Create Symbols',
+    theme: 'primary',
+    href: '/design-system'
+  }
+}

package/src/pages/{Color/themeLightDark.js → Init/CreateDocumentTheme.js}

@@ -1,25 +1,20 @@
 'use strict'
 
 import { Flex, GlobalThemeTemplate, Hoverable } from '@symbo.ls/components'
-
-import { ContinueButton, HeaderHeading } from '../../components'
-
-const header = {
-  extend: HeaderHeading
-}
+import { InitPage } from '../../components'
 
 const paragraphs = {
   extend: Flex,
   childExtend: { tag: 'p' },
-  ...[{ text: 'To personalize your Symbols experience, we need to get started with themes' },
-    { text: 'Please fill in the document dark and light themes' }]
+  ...['To personalize your Symbols experience, we need to get started with themes',
+    'Please fill in the document dark and light themes']
 }
 
 const modes = {
   extend: Flex,
   props: {
     gap: 'C',
-    margin: '- - E2 -'
+    margin: '- -Z E2'
   },
   childExtend: {
     extend: [Hoverable, GlobalThemeTemplate],
@@ -27,7 +22,7 @@ const modes = {
       minWidth: 'G3',
       maxWidth: '406px',
       position: 'relative',
-      maxHeight: 'F',
+      maxHeight: 'E2',
       boxSizing: 'content-box',
       align: 'flex-start flex-start',
       padding: 'A2 A X X1',
@@ -35,23 +30,23 @@ const modes = {
       round: 'A1',
       background: state.background,
       wrap: 'wrap',
+
       icon: {
-        padding: '0',
         boxSize: 'C C',
         margin: '- - - Z2',
         background: 'yellow .3',
-        style: {
-          pointerEvents: 'none',
-          '> svg': { fontSize: `${22 / 16}em` }
-        }
+        pointerEvents: 'none',
+        fontSize: `B`
       },
+
       article: {
         padding: 'X2 - - -',
-        title: { fontSize: 'D2' }
+        title: { fontSize: 'D2', fontWeight: 'bold' }
       },
-      span: { text: 'hover to change' },
 
       ':hover': {
+        opacity: '1',
+
         style: {
           '[buttons]': {
             opacity: '1',
@@ -69,53 +64,55 @@ const modes = {
       transition: 'B default-bezier',
       transitionProperty: 'transform, opacity',
       opacity: '0',
-      margin: 'C1 0 0 0',
+      margin: 'B2 0 0 0',
       alignSelf: 'flex-end'
     },
 
-    span: {
-      props: {
-        position: 'absolute',
-        bottom: 'A2',
-        left: 'B',
-        fontSize: 'Z',
-        color: 'gray7',
-        style: { fontStyle: 'italic' }
-      }
+    Span: {
+      position: 'absolute',
+      bottom: 'A2',
+      left: 'B',
+      fontSize: 'Z',
+      color: 'gray7',
+      fontStyle: 'italic',
+      text: 'hover to change'
     }
   },
 
   $setStateCollection: () => [{
+    title: 'Day',
+    key: 'light',
+    icon: 'sun',
+    background: 'white'
+  }, {
     title: 'Night',
     key: 'dark',
     icon: 'moon',
     background: 'gray3'
-  }, {
-    title: 'Dark',
-    key: 'light',
-    icon: 'sun',
-    background: 'white'
   }]
 }
 
-const props = {
-  header: { margin: '- - C2 -' },
-  paragraphs: {
-    gap: 'E',
-    margin: '- - D1 -',
-    childProps: {
-      fontSize: 'Z1',
-      color: 'gray6',
-      maxWidth: `${272 / 14}em`
-    }
-  }
-}
+export const CreateDocumentTheme = {
+  extend: InitPage,
 
-export const themeLightDark = {
-  props,
+  props: {
+    flow: 'column',
+    align: 'flex-start',
+    paragraphs: {
+      gap: 'E',
+      margin: '- - D1 -',
+      childProps: {
+        color: 'gray6',
+        maxWidth: `G1`
+      }
+    }
+  },
 
-  header,
+  HeaderHeading: {},
   paragraphs,
   modes,
-  ContinueButton
+
+  ContinueButton: {
+    href: '/init/pallete'
+  }
 }

package/src/pages/{Color → Init}/CreatePalette.js

@@ -1,9 +1,7 @@
 'use strict'
 
-import { Flex, ColorSelectWithTitle } from '@symbo.ls/components'
-import { Input } from 'smbls'
-
-import { ContinueButton, UploadImage, ColorsPalette } from '../../components'
+import { Flex, ColorSelectWithTitle, Input } from '@symbo.ls/components'
+import { InitPage } from '../../components'
 
 const colors = {
   extend: Flex,
@@ -19,10 +17,10 @@ const colors = {
       width: '100%',
       title: { text: state.title },
       element: {
-        padding: 'Y Y Y Z1',
+        padding: 'Z',
         title: {
           box: {
-            boxSize: 'A2 A2',
+            boxSize: 'B B',
             position: 'relative',
             zIndex: 2,
             background: 'white .05',
@@ -38,7 +36,7 @@ const colors = {
             round: 'Z',
             position: 'absolute',
             inset: '0 0 0 0',
-            padding: '- - - B2+W',
+            padding: '- - - B2+W1',
             textAlign: 'start',
             lineHeight: '100%',
             placeholder: 'Color value',
@@ -57,7 +55,7 @@ const colors = {
           tag: 'input',
           attr: {
             type: 'color',
-            value: ({ state }) => 'rgba(255,255,255,0.05)'
+            value: ({ state }) => state.value
           },
           props: {
             border: '0',
@@ -91,12 +89,15 @@ const colors = {
     }
   },
 
-  $setStateCollection: () => [{
-    title: 'Accent color'
+  $setStateCollection: ({ state }) => [{
+    title: 'Accent color',
+    value: state[0]
   }, {
-    title: 'Secondary Color'
+    title: 'Secondary Color',
+    value: state[1]
   }, {
-    title: 'Inactive Color'
+    title: 'Inactive Color',
+    value: state[2]
   }]
 }
 
@@ -112,23 +113,25 @@ const content = {
   },
 
   colors,
-  UploadImage,
-  ColorsPalette
-}
 
-const props = {
-  // style: { border: '5px solid red' }
+  UploadImage: {},
+  ColorsPalette: {
+    margin: '- - auto'
+  }
 }
 
 export const CreatePallete = {
-  props,
+  extend: InitPage,
 
   HeaderHeading: {
     margin: '- - D -',
-    title: { text: `Let's get started` },
-    h1: { text: 'Create your palette' }
+    Caption: { text: `Let's get started` },
+    H1: { text: 'Create your palette' }
   },
 
   content,
-  ContinueButton
+
+  ContinueButton: {
+    href: '/init/font'
+  }
 }

package/src/pages/Init/FontText.js

@@ -0,0 +1,21 @@
+'use strict'
+
+import { InitPage } from '../../components'
+
+export const FontText = {
+  extend: InitPage,
+
+  HeaderHeading: {
+    props: { margin: '- - D2 -' },
+    Caption: { text: `Let's make sure` },
+    H1: { text: 'Texts look good?' }
+  },
+
+  FontText: {
+    margin: '- -Z'
+  },
+
+  ContinueButton: {
+    href: '/init/env'
+  }
+}

package/src/pages/Init/index.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+import { CreateDocumentTheme } from './CreateDocumentTheme'
+import { CreatePallete } from './CreatePalette'
+import { FontText } from './FontText'
+import { ChooseEnvironment } from './ChooseEnvironment'
+import { router } from '@domql/router'
+
+export const Init = {
+  extend: Flex,
+
+  props: {
+    boxSize: '100% 100%',
+    gap: 'A',
+    padding: '7.5% E1 D1 12.5%'
+  },
+
+  define: { routes: param => param },
+  routes: {
+    '/': CreateDocumentTheme,
+    '/theme': CreateDocumentTheme,
+    '/pallete': CreatePallete,
+    '/font': FontText,
+    '/env': ChooseEnvironment
+  },
+
+  on: {
+    render: element => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      router(element, url, {}, { level: 1 })
+    }
+  }
+}

package/src/pages/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+export * from './Init'
 export * from './Components'
 export * from './Export'
 export * from './Fonts'

package/src/style.js

@@ -3,5 +3,9 @@
 export default {
   boxSizing: 'border-box',
   overflow: 'hidden',
-  overflowY: 'auto'
+  overflowY: 'auto',
+  cursor: 'default',
+  'button, a': {
+    cursor: 'default'
+  }
 }

package/src/pages/Color/FontText.js

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

package/src/pages/Color/chooseEnvironment.js

@@ -1,132 +0,0 @@
-'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
-}