@symbo.ls/preview 0.0.89 → 0.0.91

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.89",
+  "version": "0.0.91",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {
@@ -25,15 +25,14 @@
   "dependencies": {
     "@domql/router": "latest",
     "@domql/tags": "latest",
-    "@symbo.ls/cli": "^0.6.23",
+    "@symbo.ls/cli": "latest",
     "@symbo.ls/components": "latest",
     "@symbo.ls/config": "latest",
-    "@symbo.ls/config-default": "^1.0.1",
+    "@symbo.ls/config-default": "latest",
     "@symbo.ls/icons": "latest",
-    "@symbo.ls/init": "^1.1.3",
-    "@symbo.ls/preview": "^0.0.73",
+    "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
-    "@symbo.ls/temp-db": "^0.0.2",
+    "@symbo.ls/temp-db": "latest",
     "@symbo.ls/utils": "latest",
     "domql": "^1.5.35",
     "showdown": "^2.1.0"

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/Components/index.js

@@ -5,7 +5,7 @@ import { splitRoute } from 'domql/packages/router'
 import sidebar from './sidebar'
 import grid from './grid'
 
-import { CATEGORIES } from '../../../.symbols/categories'
+import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
 // import FAVORITES from '../../data/favorites'
 // import COMPONENTS from '../../data/components'
 

package/src/pages/Components/sidebar.js

@@ -1,11 +1,11 @@
 'use strict'
 
-import { 
+import {
   FilterCategories,
   FilterInteractivity,
   FilterDataTypes
 } from '@symbo.ls/components'
-import { CATEGORIES } from '../../../.symbols/categories'
+import { CATEGORIES } from '@symbo.ls/temp-db/symbols/categories'
 
 export default {
   sticky: {

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/.symbols/button/index.js

@@ -1,47 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { Button } from 'smbls'
-
-const key = 'button'
-const title = 'Call to Action Button'
-const description = ''
-const category = CATEGORIES[1]
-const extend = 'Button'
-const state = {}
-const props = {
-  icon: 'arrow angle up',
-  gap: 'X2',
-  theme: 'primary',
-  text: 'Call to Action',
-  padding: 'Z2 B2',
-  round: 'C'
-}
-
-const component = {
-  extend: Button,
-  props
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 4, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  extend,
-  category,
-  component,
-  code,
-  state,
-
-  props,
-  settings,
-  interactivity: ['click'],
-  dataTypes: ['object']
-}

package/.symbols/button-all-star/index.js

@@ -1,50 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { Button } from 'smbls'
-
-const key = 'all-star'
-const title = 'All Star'
-const description = ''
-const category = CATEGORIES[1]
-const extend = 'Button'
-
-const state = {}
-const props = {
-  icon: 'star',
-  text: 'All Star',
-  theme: 'label',
-  padding: 'X1 Z2',
-  gap: 'X',
-  round: 'A',
-  fontWeight: 'bold'
-}
-
-const component = {
-  extend: Button,
-  props
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 3, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  extend,
-
-  component,
-  code,
-  state,
-  props,
-
-  settings,
-  interactivity: [],
-  dataTypes: []
-}

package/.symbols/button-circle/index.js

@@ -1,47 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { CircleButton } from 'smbls'
-
-const key = 'button-circle'
-const title = 'Circle Button'
-const extend = 'CircleButton'
-const description = ''
-const category = CATEGORIES[1]
-
-const state = {}
-const props = {
-  theme: 'secondary',
-  background: 'blue .2',
-  fontSize: 'A2',
-  color: 'white',
-  padding: 'Y2',
-  text: '3'
-}
-
-const component = {
-  extend: CircleButton,
-  props
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 2, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  extend,
-  code,
-  state,
-  props,
-  settings,
-  interactivity: ['click'],
-  dataTypes: ['object']
-}

package/.symbols/button-pro/index.js

@@ -1,75 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { KangorooButton } from 'smbls'
-
-const key = 'ButtonPro'
-const title = 'Pro Button'
-const description = ''
-const category = CATEGORIES[1]
-const extend = 'KangorooButton'
-
-const state = {}
-const props = {
-  theme: 'quinary',
-  round: 'Z2',
-  padding: 'X1 X1 X1 A2',
-  size: 'A',
-  gap: 'A',
-  transition: 'A defaultBezier',
-  transitionProperty: 'background, color, opacity',
-  color: 'white',
-
-  label: {
-    gap: 'X1',
-    text: 'Become PRO',
-    alignItems: 'center',
-    color: 'white',
-    fontWeight: '500',
-    icon: {
-      name: 'star',
-      color: 'yellow'
-    }
-  },
-  child: {
-    background: 'black .65',
-    round: 'Z',
-    size: 'Z',
-    padding: 'Z A2',
-    text: '1 month free',
-    opacity: '.85'
-  }
-}
-
-const component = {
-  extend: KangorooButton,
-
-  props,
-
-  label: {},
-  child: {}
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 5, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  extend,
-
-  component,
-  code,
-  state,
-  props,
-
-  settings,
-  interactivity: ['click'],
-  dataTypes: ['object']
-}

package/.symbols/button-theme-switcher/index.js

@@ -1,74 +0,0 @@
-'use strict'
-
-import { CATEGORIES } from '../categories'
-
-import { KangorooButton } from 'smbls'
-
-const key = 'button-theme-switcher'
-const title = 'Theme Switcher'
-const description = ''
-const category = CATEGORIES[1]
-const extend = 'KangorooButton'
-
-const state = {}
-const props = {
-  round: 'C',
-  padding: 'V2 V2 V2 A1',
-  gap: 'Z1',
-  depth: 16,
-  fontWeight: '500',
-
-  label: {
-    gap: 'X1',
-    text: 'Light Mode',
-    padding: 'Z2 X',
-    icon: {
-      color: 'yellow',
-      name: 'sun'
-    }
-  },
-
-  child: {
-    gap: 'X1',
-    round: 'C',
-    text: 'Dark Mode',
-    background: 'black .95',
-    color: 'white',
-    padding: 'Z2 A2',
-    icon: {
-      color: 'yellow',
-      name: 'moon'
-    }
-  }
-}
-
-const component = {
-  extend: KangorooButton,
-
-  props,
-
-  label: {},
-  child: {}
-}
-
-const code = ``
-
-const settings = {
-  gridOptions: { colspan: 5, rowspan: 2 }
-}
-
-export default {
-  key,
-  title,
-  description,
-  category,
-  component,
-  extend,
-
-  code,
-  state,
-  props,
-  settings,
-  interactivity: [],
-  dataTypes: []
-}