@symbo.ls/preview 2.6.11 → 2.6.17

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "2.6.11",
+  "version": "2.6.17",
   "main": "src/app.js",
   "scripts": {
     "link:all": "yarn link smbls domql css-in-props @symbo.ls/icons @symbo.ls/config @symbo.ls/components @symbo.ls/scratch @symbo.ls/playground @symbo.ls/utils @symbo.ls/init @symbo.ls/config-default @domql/router @domql/utils @domql/router",

package/src/components/HeaderHeading.js

@@ -14,7 +14,7 @@ export const HeaderHeading = {
 
   H1: {
     color: 'white',
-    text: 'First was the light',
+    text: 'First is the light',
     fontSize: 'H2',
     fontWeight: '700',
     margin: '0',

package/src/pages/Export/index.js

@@ -8,7 +8,7 @@ import { Page } from '../../components'
 import state from './state'
 import scene from './scene'
 import tools from './tools'
-import description from './description'
+import description from './description' // eslint-disable-line no-unused-vars
 
 import { fetchGist } from './gist'
 

package/src/pages/Export/tools.js

@@ -4,7 +4,8 @@ import {
   Flex,
   SequenceSliders,
   ClickableItem,
-  SquareButton
+  SquareButton,
+  ThemeSwitcher
 } from '@symbo.ls/components'
 
 export default {

package/src/pages/Init/CreateDocumentTheme.js

@@ -141,15 +141,20 @@ export const CreateDocumentTheme = {
       const dark = document['@dark']
       const light = document['@light']
 
-      const colorRef = {
-        light: {
+      const colorRef = {}
+
+      if (light) {
+        colorRef.light = {
           key: 'light',
           title: 'Day',
           icon: 'sun',
           color: COLOR[light.color] || light.color || '#000000',
           background: COLOR[light.background] || light.background || '#FFFFFF'
-        },
-        dark: {
+        }
+      }
+
+      if (dark) {
+        colorRef.dark = {
           key: 'dark',
           title: 'Night',
           icon: 'moon',

package/src/pages/Init/FontText.js

@@ -2,19 +2,29 @@
 
 import { InitPage } from '../../components'
 
+import tools from '../Export/tools'
+
 export const FontText = {
   extend: InitPage,
 
   back: { props: { href: '/init/pallete' } },
 
+  state: {
+    base: 16,
+    ratio: 1.618
+  },
+
   HeaderHeading: {
     props: { margin: '- - D2 -' },
-    Caption: { text: `Let's make sure` },
-    H1: { text: 'Texts look good?' }
+    Caption: { text: `Let's customize` },
+    H1: { text: 'Typography' }
   },
 
   FontText: {
-    margin: '- -Z'
+    margin: '- -Z A'
+  },
+  tools: {
+    extend: tools.tools
   },
 
   ContinueButton: {

package/src/pages/Init/Personalize/fields.js

@@ -20,10 +20,18 @@ export default {
         width: 'auto',
         padding: 'Z1 A2'
       }
+    },
+    title: {},
+    element: {
+      on: {
+        change: (ev, el, s) => {
+          s.update({ [el.parent.key]: ev.target.value })
+        }
+      }
     }
   },
 
-  name: {
+  projectName: {
     props: {
       title: { text: 'Name the project' },
       element: { placeholder: 'You name it' }
@@ -32,19 +40,26 @@ export default {
     title: {},
     element: {
       extend: Input,
-      attr: { value: ({ state }) => state.projectName }
+      props: ({ state }) => ({ value: state.projectName })
     }
   },
 
-  k: {
+  appKey: {
     props: {
       title: { text: 'Key' }
     },
     title: {},
     element: {
       extend: Input,
-      attr: { value: ({ state }) => state.appKey && state.appKey.split('.')[0] },
-      props: { placeholder: 'a-zA-Z0-9' }
+      props: ({ state }) => ({
+        placeholder: 'a-zA-Z0-9',
+        value: state.appKey && state.appKey.split('.')[0]
+      }),
+      on: {
+        change: (ev, el, s) => {
+          s.update({ [el.parent.key]: ev.target.value + '.symbo.ls' })
+        }
+      }
     },
     Span: {
       position: 'absolute',
@@ -56,7 +71,7 @@ export default {
     }
   },
 
-  visibility: {
+  urlVisibility: {
     props: { title: { text: 'URL Access' } },
     title: {},
     element: {
@@ -100,7 +115,7 @@ export default {
         ],
         on: {
           change: (ev, { parent }) => {
-            parent.user.update({ key: ev.target.value })
+            // parent.user.update({ key: ev.target.value })
           }
         }
       }

package/src/pages/Init/Personalize/index.js

@@ -2,18 +2,24 @@
 
 import { InitPage } from '../../../components'
 
+import { Flex, Form } from '@symbo.ls/components'
+import { router } from '@domql/router'
+
 import icon from './icon'
 import fields from './fields'
 
 export const Personalize = {
   extend: InitPage,
+  props: {
+    height: '100%'
+  },
 
   back: null,
 
   HeaderHeading: {
     props: { margin: '- - D1 -' },
     Caption: { text: `Let's personalize your Symbols` },
-    H1: { text: ({ state }) => `Hi ${state.userName}` }
+    H1: { text: ({ state }) => `Hi ${state.userName || ''}` }
   },
 
   ColumnParagraphs: {
@@ -24,16 +30,33 @@ export const Personalize = {
     ]
   },
 
-  Flex: {
-    props: ({ state }) => ({
-      gap: 'D1'
-    }),
-
-    icon,
-    fields
-  },
-
-  ContinueButton: {
-    href: '/init/theme'
+  Form: {
+    extend: [Form, Flex],
+    props: {
+      flex: 1,
+      flow: 'column',
+      align: 'flex-start space-between'
+    },
+
+    Flex: {
+      props: ({ state }) => ({
+        gap: 'D1'
+      }),
+
+      icon,
+      fields
+    },
+
+    ContinueButton: {
+      type: 'submit'
+    },
+
+    on: {
+      submit: (ev, el, s) => {
+        ev.preventDefault()
+        console.log(s.parse())
+        router(el.__root, '/init/theme', {})
+      }
+    }
   }
 }