@symbo.ls/preview 0.0.89 → 0.0.90

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -27,7 +27,7 @@
     "@domql/tags": "latest",
     "@symbo.ls/cli": "^0.6.23",
     "@symbo.ls/components": "latest",
-    "@symbo.ls/config": "latest",
+    "@symbo.ls/config": "^1.0.60",
     "@symbo.ls/config-default": "^1.0.1",
     "@symbo.ls/icons": "latest",
     "@symbo.ls/init": "^1.1.3",

package/src/components/UploadImage.js

@@ -22,6 +22,34 @@ export const UploadImage = {
   element: {
     extend: [Upload, Flex, ClickableItem],
     icon: { style: { fontSize: '52px' } },
-    p: { span: null }
+    p: { span: null },
+    input: {
+      on: {
+        change: async (ev, el, s) => {
+          const { context } = el
+          const { client } = context
+          s.update({ icon: { pending: true } })
+
+          try {
+            let id
+            await client.file(ev.target.files[0]).then(async d => { id = d.id })
+
+            await client.observe({
+              $id: id,
+              src: true
+            }, async (data) => {
+              s.update({ icon: { pending: false, data } })
+
+              await client.set({
+                $id: s.projectId,
+                file: data.id
+              })
+            })
+          } catch (e) {
+            console.log(e)
+          }
+        }
+      }
+    }
   }
 }

package/src/pages/Init/ChooseEnvironment.js

@@ -46,6 +46,7 @@ const yourEnvironment = {
 
   title: {},
   element: { ...[
+    { props: { icon: 'html' } },
     { props: { icon: 'js outline' } },
     { props: { icon: 'ts outline' } },
     { props: { icon: 'pdf' } },
@@ -71,7 +72,6 @@ const yourFramework = {
   },
   title: {},
   element: { ...[
-    { props: { icon: 'html' } },
     { props: { icon: 'domql' } },
     { props: { icon: 'react' } },
     { props: { icon: 'vue' } },

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

@@ -0,0 +1,109 @@
+'use strict'
+
+import { CommonField, Input, Grid, SelectField } from '@symbo.ls/components'
+
+export default {
+  extend: Grid,
+  props: {
+    columns: 'repeat(2, 270px)',
+    columnGap: 'C',
+    rowGap: 'C2'
+  },
+
+  childExtend: {
+    extend: CommonField,
+    props: {
+      position: 'relative',
+      align: 'stretch flex-start',
+      element: {
+        margin: '- -Z',
+        width: 'auto',
+        padding: 'Z1 A2'
+      }
+    }
+  },
+
+  name: {
+    props: {
+      title: { text: 'Name the project' },
+      element: { placeholder: 'You name it' }
+    },
+
+    title: {},
+    element: {
+      extend: Input,
+      attr: { value: ({ state }) => state.projectName }
+    }
+  },
+
+  k: {
+    props: {
+      title: { text: 'Key' }
+    },
+    title: {},
+    element: {
+      extend: Input,
+      attr: { value: ({ state }) => state.appKey && state.appKey.split('.')[0] },
+      props: { placeholder: 'a-zA-Z0-9' }
+    },
+    Span: {
+      position: 'absolute',
+      opacity: '.65',
+      text: '.symbo.ls',
+      right: 'Z2',
+      bottom: 'Z',
+      pointerEvents: 'none'
+    }
+  },
+
+  visibility: {
+    props: { title: { text: 'URL Access' } },
+    title: {},
+    element: {
+      extend: [SelectField],
+      props: {
+        style: { padding: '0' },
+        round: 'C1'
+      },
+      title: null,
+      buttons: {
+        props: {
+          position: 'absolute',
+          right: 'Z',
+          pointerEvents: 'none'
+        }
+      },
+
+      Select: {
+        props: {
+          outline: 'none',
+          border: 'none',
+          background: 'transparent',
+          color: 'currentColor',
+          padding: 'Z1 A2',
+          round: 'C1',
+          width: '100%',
+
+          style: {
+            cursor: 'default',
+            appearance: 'none'
+          },
+
+          name: 'user',
+          id: 'user'
+        },
+
+        childExtend: { tag: 'option', text: ({ state }) => state.text },
+        $setCollection: () => [
+          { text: 'Private' },
+          { text: 'Public' }
+        ],
+        on: {
+          change: (ev, { parent }) => {
+            parent.user.update({ key: ev.target.value })
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+'use strict'
+
+import { User } from '@symbo.ls/components'
+import { UploadImage } from '../../../components'
+
+export default {
+  extend: UploadImage,
+  props: {
+    title: { text: 'Project icon' },
+    element: {
+      flow: 'column',
+      position: 'relative',
+      width: 'fit-content',
+      padding: 'A',
+      gap: '0',
+
+      p: {
+        text: 'Drag and drop or click',
+        maxWidth: 'E',
+        textAlign: 'center'
+      }
+    }
+  },
+  title: {},
+  element: {
+    User: {
+      extend: User,
+      props: ({ state }) => ({
+        position: 'absolute',
+        fontSize: 'H',
+        top: '50%',
+        left: '50%',
+        transform: 'translate3d(-50%, -50%, 1px)',
+        src: state.icon && state.icon.src,
+        key: state.projectName,
+        transition: 'C defaultBezier opacity',
+        opacity: (state.icon && state.icon.src) ? '1' : '0',
+        pointerEvents: 'none'
+      })
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+'use strict'
+
+import { InitPage } from '../../../components'
+
+import icon from './icon'
+import fields from './fields'
+
+export const Personalize = {
+  extend: InitPage,
+
+  back: null,
+
+  HeaderHeading: {
+    props: { margin: '- - D2 -' },
+    Caption: { text: `Let's personalize your Symbols` },
+    H1: { text: ({ state }) => `Hi ${state.userName}` }
+  },
+
+  ColumnParagraphs: {
+    extend: true,
+    ...[
+      { props: { text: `In this example we'll initialize a Symbols Design System for you.` } },
+      { props: { text: `You can connect Symbols to your app and style it online.` } }
+    ]
+  },
+
+  Flex: {
+    props: { gap: 'D1' },
+
+    icon,
+    fields
+  },
+
+  ContinueButton: {
+    href: '/init/theme'
+  }
+}

package/src/pages/State/index.js

@@ -1,9 +1,9 @@
 'use strict'
 
-import { Input, Img, Flex, ClickableItem, CommonField } from '@symbo.ls/components'
+import { Input, Flex, CommonField } from '@symbo.ls/components'
 
 const sideBar = {
-  tag: 'aside',
+  tag: 'aside'
 }
 
 export const State = {
@@ -26,7 +26,7 @@ export const State = {
         on: {
           input: (ev, el, s) => {
             const rootState = el.__root.state
-            const obj = { 
+            const obj = {
               STATE: { [el.parent.key]: el.node.value }
             }
             rootState.update({ SYSTEM: obj })
@@ -34,48 +34,48 @@ export const State = {
         }
       }
     },
-  
+
     websiteTitle: {
       title: 'Title',
       element: {
         extend: Input
       }
     },
-  
+
     websiteDesc: {
       title: 'Description',
       element: {
         extend: Input
       }
     },
-  
+
     websiteTags: {
       title: 'Tags',
       element: {
         extend: Input
       }
     },
-    
+
     headline: {
       title: 'Headline',
       element: {
         extend: Input
       }
     },
-  
+
     paragraph: {
       title: 'Paragraph',
       element: {
         extend: Input
       }
     },
-  
+
     bookNowUrl: {
       title: 'Book now URL:',
       element: {
         extend: Input
       }
-    },
+    }
   },
 
   on: {

package/src/state.js

@@ -2,7 +2,7 @@
 
 import SYSTEM from './config'
 import { LIBRARY, COMPONENTS } from '@symbo.ls/preview/.symbols'
-import USR_DATA from '@symbo.ls/temp-db'
+import USR_DATA from '@symbo.ls/temp-db' // eslint-disable-line
 
 export const state = {
   globalTheme: 'dark',
@@ -10,6 +10,7 @@ export const state = {
 }
 
 state.SYSTEM = USR_DATA[state.appKey]
+// state.SYSTEM = {}
 state.SYSTEM.COMPONENTS = {}
 
 export const context = {

package/src/pages/Init/Personalize.js

@@ -1,145 +0,0 @@
-'use strict'
-
-import { CommonField, Input, Grid, Flex, ClickableItem } from '@symbo.ls/components'
-
-import { InitPage, UploadImage } from '../../components'
-
-const fields = {
-  extend: Grid,
-  props: {
-    columns: 'repeat(2, 270px)',
-    columnGap: 'C',
-    rowGap: 'C2',
-    childProps: {
-      element: {
-        round: 'Y2'
-        // padding: '- A'
-        // height: 'C',
-
-        // style: { background: 'rgba(255, 255, 255, .1) !important' },
-        // align: 'center space-between',
-      }
-    }
-  },
-
-  childExtend: {
-    extend: CommonField,
-    title: {},
-    element: { extend: Flex }
-  },
-
-  ...[{
-    props: {
-      title: { text: 'Name the project' },
-      element: { placeholder: 'You name it' }
-    },
-
-    title: {},
-    element: { extend: Input, props: { } }
-  }, {
-    props: {
-      title: { text: 'Key' },
-      element: {
-        extend: Input,
-        props: {
-          placeholder: 'a-zA-Z0-9'
-        },
-        Span: {
-          position: 'absolute',
-          text: '.symbo.ls',
-          right: 'A',
-          pointerEvents: 'none'
-        }
-      }
-    },
-    title: {},
-    element: {
-      input: { extend: Input },
-      span: {}
-    }
-  }, {
-    props: { title: { text: 'URL Access' } },
-    title: {},
-    element: {
-      extend: [ClickableItem],
-      Select: {
-        props: {
-          outline: 'none',
-          pointerEvents: 'all',
-          appearance: 'none',
-          border: 'none',
-          width: '100%',
-          height: '100%',
-          background: 'none',
-          color: 'currentColor',
-          fontSize: 'A',
-          lineHeight: 1,
-          padding: 'Z A',
-
-          name: 'user',
-          id: 'user'
-        },
-        childExtend: { tag: 'option', text: ({ state }) => state.text },
-        $setCollection: () => [
-          { text: 'Private' },
-          { text: 'Public' }
-        ],
-        on: {
-          change: (ev, { parent }) => {
-            parent.user.update({ key: ev.target.value })
-          }
-        }
-      }
-    }
-  }]
-}
-
-const uploadImage = {
-  extend: UploadImage,
-  props: {
-    title: { text: 'Project icon' },
-    element: {
-      flow: 'column',
-      width: 'fit-content',
-      padding: 'A',
-      gap: '0',
-      p: {
-        text: 'Drag and drop or click',
-        maxWidth: 'E',
-        textAlign: 'center'
-      }
-    }
-  }
-
-}
-
-export const Personalize = {
-  extend: InitPage,
-
-  back: null,
-
-  HeaderHeading: {
-    props: { margin: '- - D2 -' },
-    Caption: { text: `Let's personalize your Symbols` },
-    H1: { text: 'Hi George' }
-  },
-
-  ColumnParagraphs: {
-    extend: true,
-    ...[
-      { props: { text: `In this example we'll initialize a Symbols Design System for you.` } },
-      { props: { text: `You can connect Symbols to your app and style it online.` } }
-    ]
-  },
-
-  content: {
-    extend: Flex,
-    props: { gap: 'D1' },
-    uploadImage,
-    fields
-  },
-
-  ContinueButton: {
-    href: '/init/theme'
-  }
-}