@symbo.ls/preview 0.0.88 → 0.0.90

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.88",
+  "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/{pages/Spaces/buttons.js → components/SpacingButton/actionButtons.js}

@@ -1,7 +1,8 @@
 'use strict'
 
 import { Flex } from '@symbo.ls/components'
-import { SpacingPropButton, SPACING_BUTTONS } from '../../components'
+import { SpacingButton } from '..'
+import { SPACING_BUTTONS } from './props'
 
 export const setTableButtons = ({ state }) =>
   Object.keys(SPACING_BUTTONS).filter(v => {
@@ -35,7 +36,6 @@ export default {
     ':hover': { opacity: '1' }
   },
 
-  childExtend: SpacingPropButton,
-
+  childExtend: SpacingButton,
   $setStateCollection: setTableButtons
 }

package/src/components/{SpacingPropButton → SpacingButton}/dropdown.js

@@ -11,9 +11,9 @@ import {
   diffPropPosition,
   diffPropValue,
   getStateTree,
-  keysOf,
-  SPACING_BUTTONS
+  keysOf
 } from '.'
+import { SPACING_BUTTONS } from './props'
 
 const ButtonInDropdown = {
   extend: [ChoosableButton],

package/src/components/{SpacingPropButton → SpacingButton}/index.js

@@ -1,53 +1,10 @@
 'use strict'
 
-import { WiderButton, DropdownParent } from '@symbo.ls/components'
+import { WiderButton, DropdownParent, Icon } from '@symbo.ls/components'
 
+import { SPACING_BUTTONS } from './props'
 import dropdown from './dropdown'
 
-export const SPACING_BUTTONS = {
-  margin: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  height: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  width: {
-    minWidth: {},
-    maxWidth: {}
-  },
-  borderWidth: {
-    maxValue: 1280,
-    blockStartWidth: {},
-    inlineEndWidth: {},
-    blockEndWidth: {},
-    inlineStartWidth: {}
-  },
-  padding: {
-    maxValue: 3000,
-    blockStart: {},
-    inlineEnd: {},
-    blockEnd: {},
-    inlineStart: {}
-  },
-  gap: {
-    maxValue: 3000,
-    Horizontal: {},
-    Vertical: {}
-  },
-  borderRadius: {
-    maxValue: 1280,
-    endStart: {},
-    startEnd: {},
-    endEnd: {},
-    startStart: {}
-  }
-}
-
 export const ChoosableButton = {
   props: ({ key }) => ({
     padding: 'Z',
@@ -128,7 +85,7 @@ export const DotForRowButton = {
   }
 }
 
-export const SpacingPropButton = {
+export const SpacingButton = {
   extend: [ChoosableButton, DropdownParent, WiderButton],
 
   props: (element) => {
@@ -192,6 +149,72 @@ export const SpacingPropButton = {
   dropdown
 }
 
+const DotsInButton = SpacingButton.dots
+
+export const SpacingRowButton = {
+  props: ({ state }) => {
+    const property = state
+    const row = property.parent
+    const table = row.parent
+
+    const propKey = property.value
+
+    const active = Object.keys(table.props).filter(prop => {
+      const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+      const keyMathes = table.props[prop] === row.key
+      return hasProp && keyMathes
+    }).length
+
+    return {
+      active: !!active,
+      position: 'relative',
+      round: 'Z',
+      display: 'flex',
+
+      icon: {
+        name: propKey,
+        opacity: '0',
+        color: 'gray5',
+        margin: 'auto'
+      },
+
+      '.active': {
+        boxShadow: '0, 0, 0, 3px, gray1, inset'
+      }
+    }
+  },
+
+  icon: {
+    extend: Icon,
+    props: ({ state }) => {
+      const property = state
+      const row = property.parent
+      const table = row.parent
+
+      const propKey = property.value
+      const middleActive = table.props[propKey] === row.key
+
+      const active = Object.keys(table.props).filter(prop => {
+        const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
+        const keyMathes = table.props[prop] === row.key
+        return hasProp && keyMathes
+      }).length
+
+      return {
+        active,
+        middleActive,
+        '.active': { opacity: '1' },
+        '.middleActive': { color: 'blue' }
+      }
+    }
+  },
+
+  dots: {
+    childExtend: DotForRowButton,
+    $setStateCollection: DotsInButton.$setStateCollection
+  }
+}
+
 export const getStateTree = element => {
   const table = element.lookup('Page').state
   const row = table.sequence[table.selectedKey]

package/src/components/SpacingButton/props.js

@@ -0,0 +1,45 @@
+'use strict'
+
+export const SPACING_BUTTONS = {
+  margin: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  height: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  width: {
+    minWidth: {},
+    maxWidth: {}
+  },
+  borderWidth: {
+    maxValue: 1280,
+    blockStartWidth: {},
+    inlineEndWidth: {},
+    blockEndWidth: {},
+    inlineStartWidth: {}
+  },
+  padding: {
+    maxValue: 3000,
+    blockStart: {},
+    inlineEnd: {},
+    blockEnd: {},
+    inlineStart: {}
+  },
+  gap: {
+    maxValue: 3000,
+    Horizontal: {},
+    Vertical: {}
+  },
+  borderRadius: {
+    maxValue: 1280,
+    endStart: {},
+    startEnd: {},
+    endEnd: {},
+    startStart: {}
+  }
+}

package/src/components/SpacingTable.js

@@ -1,17 +1,14 @@
 'use strict'
 
 import {
-  Icon,
   Grid,
   Pseudo,
   mapSequence,
   sortSequence
 } from '@symbo.ls/components'
 
-import buttons, { setRowButtons } from '../pages/Spaces/buttons'
-import { DotForRowButton, SpacingPropButton } from './SpacingPropButton'
-
-const DotsInButton = SpacingPropButton.dots
+import { SpacingRowButton } from '.'
+import actionButtons, { setRowButtons } from './SpacingButton/actionButtons'
 
 const Cell = {
   tag: 'div',
@@ -107,71 +104,7 @@ const Row = {
   px: {},
   buttons: {
     extend: Grid,
-
-    childExtend: {
-      props: ({ state }) => {
-        const property = state
-        const row = property.parent
-        const table = row.parent
-
-        const propKey = property.value
-
-        const active = Object.keys(table.props).filter(prop => {
-          const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
-          const keyMathes = table.props[prop] === row.key
-          return hasProp && keyMathes
-        }).length
-
-        return {
-          active: !!active,
-          position: 'relative',
-          round: 'Z',
-          display: 'flex',
-
-          icon: {
-            name: propKey,
-            opacity: '0',
-            color: 'gray5',
-            margin: 'auto'
-          },
-
-          '.active': {
-            boxShadow: '0, 0, 0, 3px, gray1, inset'
-          }
-        }
-      },
-
-      icon: {
-        extend: Icon,
-        props: ({ state }) => {
-          const property = state
-          const row = property.parent
-          const table = row.parent
-
-          const propKey = property.value
-          const middleActive = table.props[propKey] === row.key
-
-          const active = Object.keys(table.props).filter(prop => {
-            const hasProp = prop.toLowerCase().includes(propKey.toLowerCase())
-            const keyMathes = table.props[prop] === row.key
-            return hasProp && keyMathes
-          }).length
-
-          return {
-            active,
-            middleActive,
-            '.active': { opacity: '1' },
-            '.middleActive': { color: 'blue' }
-          }
-        }
-      },
-
-      dots: {
-        childExtend: DotForRowButton,
-        $setStateCollection: DotsInButton.$setStateCollection
-      }
-    },
-
+    childExtend: SpacingRowButton,
     $setStateCollection: setRowButtons
   },
   graph: { line: {} },
@@ -273,5 +206,5 @@ export const SpacingTable = {
     $setStateCollection: ({ state }) => mapSequence(state, sortSequence)
   },
 
-  actionButtons: buttons
+  actionButtons
 }

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

@@ -20,6 +20,6 @@ export * from './IconsGroup'
 export * from './FontText'
 export * from './DesignComponent'
 export * from './ColumnParagrphs'
-export * from './SpacingPropButton'
+export * from './SpacingButton'
 export * from './UploadImage'
 export * from './SpacingTable'

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/MediaQuery/lists.js

@@ -55,7 +55,6 @@ const BreakpointItem = {
   select: {
     extend: Select,
     props: ({ state }) => ({
-      background: 'transparent',
       color: 'white'
     }),
 

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'
-  }
-}