@symbo.ls/preview 0.0.65 → 0.0.66

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "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/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/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: {
+      update: 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 { HeaderHeading, 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/Init/CreateDocumentTheme.js

@@ -0,0 +1,116 @@
+'use strict'
+
+import { Flex, GlobalThemeTemplate, Hoverable } from '@symbo.ls/components'
+import { InitPage } from '../../components'
+
+const paragraphs = {
+  extend: Flex,
+  childExtend: { tag: 'p' },
+  ...['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: '- -Z E2'
+  },
+  childExtend: {
+    extend: [Hoverable, GlobalThemeTemplate],
+    props: ({ state }) => ({
+      minWidth: 'G3',
+      maxWidth: '406px',
+      position: 'relative',
+      maxHeight: 'F',
+      boxSizing: 'content-box',
+      align: 'flex-start flex-start',
+      padding: 'A2 A X X1',
+      overflow: 'hidden',
+      round: 'A1',
+      background: state.background,
+      wrap: 'wrap',
+
+      icon: {
+        boxSize: 'C C',
+        margin: '- - - Z2',
+        background: 'yellow .3',
+        pointerEvents: 'none',
+        fontSize: `B`
+      },
+
+      article: {
+        padding: 'X2 - - -',
+        title: { fontSize: 'D2' }
+      },
+
+      ':hover': {
+        style: {
+          '[buttons]': {
+            opacity: '1',
+            transform: 'translate3d(0, 0, 0)'
+          }
+        }
+      }
+    }),
+
+    icon: {},
+    article: {},
+
+    ThemeButtons: {
+      transform: 'translate3d(0, 150%, 0)',
+      transition: 'B default-bezier',
+      transitionProperty: 'transform, opacity',
+      opacity: '0',
+      margin: 'C1 0 0 0',
+      alignSelf: 'flex-end'
+    },
+
+    Span: {
+      position: 'absolute',
+      bottom: 'A2',
+      left: 'B',
+      fontSize: 'Z',
+      color: 'gray7',
+      fontStyle: 'italic',
+      text: 'hover to change'
+    }
+  },
+
+  $setStateCollection: () => [{
+    title: 'Dark',
+    key: 'light',
+    icon: 'sun',
+    background: 'white'
+  }, {
+    title: 'Night',
+    key: 'dark',
+    icon: 'moon',
+    background: 'gray3'
+  }]
+}
+
+export const CreateDocumentTheme = {
+  extend: InitPage,
+
+  props: {
+    flow: 'column',
+    align: 'flex-start',
+    paragraphs: {
+      gap: 'E',
+      margin: '- - D1 -',
+      childProps: {
+        color: 'gray6',
+        maxWidth: `G1`
+      }
+    }
+  },
+
+  HeaderHeading: {},
+  paragraphs,
+  modes,
+
+  ContinueButton: {
+    href: '/init/pallete'
+  }
+}

package/src/pages/Init/CreatePalette.js

@@ -0,0 +1,134 @@
+'use strict'
+
+import { Flex, ColorSelectWithTitle, Input } from '@symbo.ls/components'
+import { InitPage } from '../../components'
+
+const colors = {
+  extend: Flex,
+  props: {
+    width: 'F3',
+    flow: 'column',
+    gap: 'B1',
+    opacity: '.75'
+  },
+  childExtend: {
+    extend: ColorSelectWithTitle,
+    props: ({ state }) => ({
+      width: '100%',
+      title: { text: state.title },
+      element: {
+        padding: 'Y Y Y Z1',
+        title: {
+          box: {
+            boxSize: 'A2 A2',
+            position: 'relative',
+            zIndex: 2,
+            background: 'white .05',
+            '::-webkit-color-swatch-wrapper': {
+              padding: '0'
+            },
+            '::-webkit-color-swatch': {
+              border: 'none',
+              round: 'Y'
+            }
+          },
+          value: {
+            round: 'Z',
+            position: 'absolute',
+            inset: '0 0 0 0',
+            padding: '- - - B2+W',
+            textAlign: 'start',
+            lineHeight: '100%',
+            placeholder: 'Color value',
+            ':focus': {
+              outline: 'solid, X, blue .3'
+            }
+          }
+        }
+      }
+    }),
+    title: {},
+    element: {
+      title: {
+        box: {
+          extend: 'Focusable',
+          tag: 'input',
+          attr: {
+            type: 'color',
+            value: ({ state }) => 'rgba(255,255,255,0.05)'
+          },
+          props: {
+            border: '0',
+            padding: '0',
+            style: {
+              appearance: 'none'
+            }
+          },
+          on: {
+            update: (el, s) => {
+              el.node.value = s.value || ''
+            },
+            input: (ev, el, s) => {
+              s.update({ value: el.node.value || '' })
+            }
+          }
+        },
+        value: {
+          extend: Input,
+          on: {
+            update: (el, s) => {
+              el.node.value = s.value || ''
+            },
+            input: (ev, el, s) => {
+              s.update({ value: el.node.value || '' })
+            }
+          }
+        }
+      },
+      buttons: null
+    }
+  },
+
+  $setStateCollection: () => [{
+    title: 'Accent color'
+  }, {
+    title: 'Secondary Color'
+  }, {
+    title: 'Inactive Color'
+  }]
+}
+
+const content = {
+  extend: Flex,
+  props: {
+    margin: '- - F -',
+    align: 'flex-start',
+    gap: 'E2',
+    ColorsPalette: {
+      margin: '- - - auto'
+    }
+  },
+
+  colors,
+
+  UploadImage: {},
+  ColorsPalette: {
+    margin: '- - auto'
+  }
+}
+
+export const CreatePallete = {
+  extend: InitPage,
+
+  HeaderHeading: {
+    margin: '- - D -',
+    Caption: { text: `Let's get started` },
+    H1: { text: 'Create your palette' }
+  },
+
+  content,
+
+  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: '10% E1 D1 15%'
+  },
+
+  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'