@symbo.ls/preview 2.6.18 → 2.6.23

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "2.6.18",
+  "version": "2.6.23",
   "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",
@@ -29,12 +29,13 @@
     "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
     "@symbo.ls/temp-db": "latest",
-    "@symbo.ls/utils": "latest"
+    "@symbo.ls/utils": "latest",
+    "colorthief": "^2.3.2"
   },
   "devDependencies": {
-    "domql": "^1.5.35",
     "@babel/core": "^7.11.5",
     "babel-eslint": "^10.0.3",
+    "domql": "^1.5.35",
     "eslint": "^6.1.0",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-svg-sprite": "^1.4.1",

package/src/pages/Account/fieldsGridProps.js

@@ -0,0 +1,15 @@
+'use strict'
+
+export const fieldsGridProps = {
+  width: 'fit-content',
+  columns: 'repeat(2, 1fr)',
+  columnGap: 'C',
+  rowGap: 'C2',
+  childProps: {
+    width: 'F3',
+    element: {
+      placeholder: null,
+      height: 'C'
+    }
+  }
+}

package/src/pages/Account/index.js

@@ -1,111 +1,111 @@
 'use strict'
 
-import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
+import { Flex, IconButton, Link, SquareButton, User } from '@symbo.ls/components'
+import { fetchProject } from '@symbo.ls/fetch'
+import { setCookie } from 'domql/packages/cookie'
 
-const sideBar = {
-  tag: 'aside',
-  style: {
-  },
-  props: {
-    flexFlow: 'column',
-    flexAlign: 'flex-start space-between',
-    padding: '0 C 0 0',
-    height: '100%',
-    style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
-  },
-  nav: {
-    props: {
-      flexFlow: 'column',
-      gap: 'A1'
-    },
-    childExtend: {
-      tag: 'a',
-
-      extend: [SquareButton, Link, ClickableItem],
-      props: {
-        theme: 'quaternary',
-        padding: 0,
-        boxSize: 'B1 B1'
-      }
-    },
+import { personalAccount } from './personalAccount'
+import { projectAccount } from './projectAccount'
 
-    personal: {
-      props: { icon: 'githubOutline' },
-      style: { svg: { color: 'white' } },
+const ProjectButton = {
+  extend: [SquareButton],
+  props: { theme: 'transparent' }, 
+  User: {
+    props: ({ state }) => ({
+      round: '100%',
+      src: state.icon && state.icon.src,
+      title: state.projectName
+    })
+  },
+  on: {
+    click: (event, el, s) => {
+      setCookie('activeProject', el.key + '', 3)
+      const { projectId, username } = s.parse
+      fetchProject(el, s, {
+        username: s.name,
+        projectId: s.id 
+      })
+    }
+  }
+}
 
-      on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
-        }
-      }
-    },
-    project: {
-      style: {
-        borderRadius: '100%',
-        display: 'block'
-      },
-      image: {
-        extend: Img,
-        props: {
-          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
-          width: '100%',
-          height: '100%',
-          borderRadius: '100%'
-        }
-      },
+const sidebar = {
+  extend: Flex,
 
-      on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
-        }
-      }
-    },
+  props: {
+    flow: 'column',
+    boxSize: '100% fit-content',
+    justifyContent: 'space-between',
+    padding: '- C - -',
+    borderRight: 'gray2, solid',
+    borderWidth: '1px',
+    minWidth: 'D1',
+    
+    childProps: {
+      flow: 'column',
+      gap: 'A2'
+    }
+  },
 
-    add: {
-      props: { icon: 'plus' },
-      style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
+  childExtend: {
+    tag: 'nav',
+    extend: Flex
+  },
 
+  Flex:  {
+    extend: Flex,
+    profile: {
+      extend: [IconButton],
+      props: { icon: 'openSource' },
       on: {
-        click: (ev, el, s) => {
-          s.update({ activeTab: el.key })
-          Link.on.click(ev, el, s)
+        click: (event, element, state) => {
+          state.update({ activePersonalAccount: true })
         }
       }
-    }
-  },
-
-  nav2: {
-    tag: 'nav',
-    props: {
-      flexFlow: 'column',
-      gap: 'A1'
     },
 
-    style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
-    childExtend: {
-      extend: [SquareButton, Link],
+    projects: {
+      extend: Flex,
       props: {
-        theme: 'quaternary',
-        padding: 0,
-        boxSize: 'B1 B1'
+        flow: 'column',
+        gap: 'A'
       },
-      style: { padding: 0 }
+      childExtend: ProjectButton,
+      $setStateCollection: ({ state }) => state.projects
     },
 
-    info: { props: { icon: 'info' } },
-    logout: {
-      props: { icon: 'logout', href: '/logout' }
+    add: { 
+      extend: [IconButton, Link],
+      props: { icon: 'plus', href: '/init/create' }
     }
+  }, 
+  
+  meta: {
+    extend: Flex,
+    props: { gap: 'A' },
+    info: { extend: IconButton, props: { icon: 'info' } },
+    logout: { extend: IconButton, props: { icon: 'logout' } }
+  }
+}
+
+const props = {
+  boxSize: '100% 100%',
+  padding: 'D - D D1',
+  gap: 'E',
+  overflow: 'hidden',
+
+  content: {
+    flex: '1'
   }
 }
 
 export const Account = {
-  sideBar,
-  on: {
-    render: element => {
+  extend: Flex,
+  props,
 
-    }
+  sidebar,
+  content: {
+    personalAccount,
+    projectAccount
   }
 }

package/src/pages/Account/personalAccount.js

@@ -0,0 +1,73 @@
+'use strict'
+
+import { Flex, InputField, Grid, ContinueButton, PasswordField, SelectField2 } from '@symbo.ls/components'
+
+import { fieldsGridProps } from './fieldsGridProps'
+
+const fields = {
+  extend: Grid,
+  ...[
+    {
+      extend: InputField,
+      props: {
+        gridColumn: 'span 2',
+        title: { text: 'Your Email' }
+      }
+    },
+
+    {
+      extend: InputField,
+      props: { title: { text: 'Your Username' } }
+    },
+
+    {
+      extend: SelectField2,
+      props: { title: { text: 'Your role' } }
+    },
+
+    {
+      extend: PasswordField,
+      props: { title: { text: 'Change Password' } }
+    },
+
+    {
+      extend: PasswordField,
+      props: { title: { opacity: '0' } }
+    }
+  ]
+
+}
+
+const props = {
+  boxSize: '100% 100%',
+  flow: 'column',
+  title: {
+    text: 'Your personal account',
+    padding: '- - C2 -'
+  },
+  fields: {
+    ...fieldsGridProps
+  },
+  button: {
+    text: 'Update',
+    padding: 'Z1 C1',
+    fontSize: 'Z2',
+    margin: 'auto - - -',
+    width: 'fit-content'
+  }
+}
+
+export const personalAccount = {
+  props,
+  extend: Flex,
+
+  class: {
+    show: (element, state) => state.activePersonalAccount
+      ? { display: 'flex' }
+      : { display: 'none' }
+  },
+
+  title: {},
+  fields,
+  button: { extend: ContinueButton }
+}

package/src/pages/Account/projectAccount.js

@@ -0,0 +1,153 @@
+'use strict'
+
+import {
+  Flex,
+  CommonField,
+  Upload,
+  InputField,
+  Grid,
+  ContinueButton,
+  ColumnParagraphs,
+  PasswordField,
+  SelectField2,
+  DragNdropUser
+} from '@symbo.ls/components'
+
+import { fieldsGridProps } from './fieldsGridProps'
+
+const fields = {
+  extend: Grid,
+  props: fieldsGridProps,
+  ...[
+    {
+      extend: InputField,
+      props: { title: { text: 'Name the project' } }
+    },
+
+    {
+      extend: InputField,
+      props: { title: { text: 'Key' } }
+    },
+
+    {
+      extend: SelectField2,
+      props: {
+        title: { text: 'URL Access' },
+        element: { title: { text: 'Password Protected' } }
+      }
+    },
+
+    {
+      extend: PasswordField,
+      props: {
+        opacity: '.3',
+        title: { text: 'Password' }
+      }
+    },
+    {
+      extend: SelectField2,
+      props: {
+        title: { text: 'Environment' },
+        element: { title: { text: 'JavaScript' } }
+      }
+    },
+
+    {
+      extend: SelectField2,
+      props: {
+        title: { text: 'Framework' },
+        element: { title: { text: 'DOMQL' } }
+      }
+    }
+  ]
+}
+const props = {
+  style: { overFlowY: 'auto' },
+  header: {
+    title: {
+      text: 'Settings for Rockstar',
+      padding: '- - A1 -'
+    },
+    paragraphs: { padding: '- - D2 -' }
+  },
+
+  content: {
+    sideUpload: {
+      title: {
+        text: 'Project icon',
+        fontSize: 'Z'
+      },
+      element: {
+        flow: 'column',
+        gap: 'Z1',
+        childProps: {
+          width: 'fit-content',
+          padding: '0',
+          boxSize: 'E E',
+          background: 'gray1',
+          border: 'none'
+        },
+
+        uploadIcon: {
+          icon: {
+            fontSize: 'E2'
+          },
+          p: {
+            text: 'Drag and drop or click',
+            fontSize: 'Z',
+            textAlign: 'center',
+            maxWidth: 'E'
+          }
+        }
+      }
+    }
+  },
+
+  button: {
+    text: 'Update',
+    padding: 'Z1 C1',
+    fontSize: 'Z2',
+    margin: 'F3 - - -',
+    width: 'fit-content'
+  }
+}
+
+export const projectAccount = {
+  props,
+  class: {
+    show: (element, state) => state.activePersonalAccount
+      ? { display: 'none' }
+      : { display: 'block' }
+  },
+
+  header: {
+    title: {},
+    paragraphs: {
+      extend: ColumnParagraphs,
+      ...[
+        { props: { text: `In this example we'll initialize a Symbols Design System for you.` } },
+        { props: { text: `But we already initialized your system, let's just make sure it's all good.` } }
+      ]
+    }
+  },
+
+  content: {
+    extend: Flex,
+    sideUpload: {
+      extend: CommonField,
+      title: {},
+      element: {
+        extend: Flex,
+        uploadIcon: {
+          extend: Upload,
+          icon: {},
+          p: { span: null }
+        },
+        projectImg: { extend: DragNdropUser }
+      }
+    },
+
+    fields
+  },
+  button: { extend: ContinueButton }
+}

package/src/pages/Init/ChooseProject.js

@@ -0,0 +1,62 @@
+'use strict'
+
+import { fetch } from '@symbo.ls/based'
+import { Flex, CommonField, ProjectTab, ContinueButton } from '@symbo.ls/components'
+import { Grid } from '@symbo.ls/components/src'
+import { InitPage } from '../../components'
+
+const props = {
+  align: 'flex-start flex-start',
+  width: '100%',
+
+  footer: {
+    p: {
+      color: 'gray6',
+      maxWidth: `${272 / 14}em`,
+      margin: '0'
+    }
+  }
+}
+
+export const ChooseProject = {
+  extend: InitPage,
+
+  props,
+
+  back: null,
+
+  HeaderHeading: {
+    margin: '- - D -',
+
+    Caption: { text: 'Sign in to one of your projects' },
+    H1: { text: null }
+  },
+
+  cnt: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(6, 1fr)',
+      gap: 'D1',
+      margin: '10% -Z auto'
+    },
+    
+    childExtend: ProjectTab,
+    $setStateCollection: ({ state }) => state.projects
+  },
+
+  footer: {
+    extend: Flex,
+    props: { 
+      align: 'flex-start flex-start',
+      gap: 'C',
+      margin: 'auto - -',
+    },
+    ContinueButton: {
+      text: 'Create',
+      href: '/init/personalize'
+    },
+    p: {
+      text: `In this example we'll initialize a Symbols Design System for you.`
+    }
+  }
+}

package/src/pages/Init/CreateDocumentTheme.js

@@ -124,7 +124,7 @@ export const CreateDocumentTheme = {
     }
   },
 
-  back: { props: { href: '/init/' } },
+  back: { props: { href: '/init/personalize' } },
 
   HeaderHeading: {},
   paragraphs,

package/src/pages/Init/CreatePalette.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { observe, upload } from '@symbo.ls/based'
 import { Flex, ColorPickerWithTitle } from '@symbo.ls/components'
 import { InitPage } from '../../components'
 
@@ -44,7 +45,28 @@ const content = {
 
   colors,
 
-  ImageColorPicker: {},
+  ImageColorPicker: {
+    props: {},
+    title: {},
+    element: {
+      upload: {
+        input: {
+          on: {
+            change: (ev, el, s) => {
+              upload(ev.target.files[0], d => {
+                observe({
+                  $id: d.id,
+                  $all: true
+                }, pic => {
+                  if (pic.progress) s.update({ imageUrl: pic.src })
+                })
+              })
+            }
+          }
+        }
+      }
+    }
+  },
   ColorsPalette: {
     props: ({ state }) => ({
       hide: state.imageUrl,

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

@@ -32,28 +32,25 @@ export default {
   },
 
   projectName: {
-    props: {
-      title: { text: 'Name the project' },
-      element: { placeholder: 'You name it' }
-    },
-
-    title: {},
+    title: { text: 'Name the project' },
     element: {
       extend: Input,
-      props: ({ state }) => ({ value: state.projectName })
+      props: ({ state }) => ({ 
+        placeholder: 'You name it',
+        value: state.projectName,
+        required: true
+      })
     }
   },
 
   appKey: {
-    props: {
-      title: { text: 'Key' }
-    },
-    title: {},
+    title: { text: 'Key' },
     element: {
       extend: Input,
       props: ({ state }) => ({
         placeholder: 'a-zA-Z0-9',
-        value: state.appKey && state.appKey.split('.')[0]
+        value: state.appKey && state.appKey.split('.')[0],
+        required: true
       }),
       on: {
         change: (ev, el, s) => {
@@ -72,7 +69,7 @@ export default {
   },
 
   urlVisibility: {
-    props: { title: { text: 'URL Access' } },
+    title: { text: 'URL Access' },
     title: {},
     element: {
       extend: [SelectField],

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

@@ -1,6 +1,6 @@
 'use strict'
 
-import { set } from '@symbo.ls/based'
+import { fetch, observe, set, upload } from '@symbo.ls/based'
 import { User } from '@symbo.ls/components'
 import { UploadImage } from '../../../components'
 
@@ -42,16 +42,24 @@ export default {
 
     input: {
       on: {
-        change: async (ev, el, s) => {
+        change: (ev, el, s) => {
           s.update({ icon: { pending: true } })
 
           try {
-            set({
-              $id: s.projectId,
-              icon: ev.target.files[0]
-            }, d => {
-              console.log('udpateIcon', d)
-              s.update({ icon: { pending: false } })
+            upload(ev.target.files[0], d => {
+              observe({
+                $id: d.id,
+                $all: true
+              }, icon => {
+                if (icon.progress) {
+                  set({
+                    $id: s.projectId,
+                    type: 'project',
+                    icon
+                  })
+                  s.update({ icon })
+                }
+              })
             })
           } catch (e) {
             console.log(e)

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

@@ -14,7 +14,7 @@ export const Personalize = {
     height: '100%'
   },
 
-  back: null,
+  back: { props: { href: '/init/' } },
 
   HeaderHeading: {
     props: { margin: '- - D1 -' },
@@ -39,15 +39,14 @@ export const Personalize = {
     },
 
     Flex: {
-      props: ({ state }) => ({
-        gap: 'D1'
-      }),
+      props: { gap: 'D1' },
 
       icon,
       fields
     },
 
     ContinueButton: {
+      href: null,
       type: 'submit'
     },
 
@@ -60,3 +59,41 @@ export const Personalize = {
     }
   }
 }
+
+export const CreateProject = {
+  extend: Personalize,
+
+  back: null,
+  
+  HeaderHeading: {
+    props: { margin: '- - D1 -' },
+    Caption: { text: ({ state }) => `Hi ${state.userName}, let's start` },
+    H1: { text: `Creating a Project` }
+  },
+
+  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.` } }
+    ]
+  },
+  
+  Form: {
+    state: {},
+    Flex: {},
+
+    ContinueButton: {
+      href: null,
+      type: 'submit'
+    },
+
+    on: {
+      submit: (ev, el, s) => {
+        ev.preventDefault()
+        console.log(s.parse())
+        // router(el.__root, '/init/theme', {})
+      }
+    }
+  }
+}

package/src/pages/Init/index.js

@@ -1,7 +1,8 @@
 'use strict'
 
 import { Flex } from '@symbo.ls/components'
-import { Personalize } from './Personalize'
+import { CreateProject, Personalize } from './Personalize'
+import { ChooseProject } from './ChooseProject'
 import { CreateDocumentTheme } from './CreateDocumentTheme'
 import { CreatePallete } from './CreatePalette'
 import { FontText } from './FontText'
@@ -19,7 +20,9 @@ export const Init = {
 
   define: { routes: param => param },
   routes: {
-    '/': Personalize,
+    '/': ChooseProject,
+    '/create': CreateProject,
+    '/personalize': Personalize,
     '/theme': CreateDocumentTheme,
     '/pallete': CreatePallete,
     '/font': FontText,

package/src/pages/__Account/index.js

@@ -0,0 +1,111 @@
+'use strict'
+
+import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
+
+const sideBar = {
+  tag: 'aside',
+  style: {
+  },
+  props: {
+    flexFlow: 'column',
+    flexAlign: 'flex-start space-between',
+    padding: '0 C 0 0',
+    height: '100%',
+    style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
+  },
+  nav: {
+    props: {
+      flexFlow: 'column',
+      gap: 'A1'
+    },
+    childExtend: {
+      tag: 'a',
+
+      extend: [SquareButton, Link, ClickableItem],
+      props: {
+        theme: 'quaternary',
+        padding: 0,
+        boxSize: 'B1 B1'
+      }
+    },
+
+    personal: {
+      props: { icon: 'githubOutline' },
+      style: { svg: { color: 'white' } },
+
+      on: {
+        click: (ev, el, s) => {
+          s.update({ activeTab: el.key })
+          Link.on.click(ev, el, s)
+        }
+      }
+    },
+    project: {
+      style: {
+        borderRadius: '100%',
+        display: 'block'
+      },
+      image: {
+        extend: Img,
+        props: {
+          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
+          width: '100%',
+          height: '100%',
+          borderRadius: '100%'
+        }
+      },
+
+      on: {
+        click: (ev, el, s) => {
+          s.update({ activeTab: el.key })
+          Link.on.click(ev, el, s)
+        }
+      }
+    },
+
+    add: {
+      props: { icon: 'plus' },
+      style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
+
+      on: {
+        click: (ev, el, s) => {
+          s.update({ activeTab: el.key })
+          Link.on.click(ev, el, s)
+        }
+      }
+    }
+  },
+
+  nav2: {
+    tag: 'nav',
+    props: {
+      flexFlow: 'column',
+      gap: 'A1'
+    },
+
+    style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
+    childExtend: {
+      extend: [SquareButton, Link],
+      props: {
+        theme: 'quaternary',
+        padding: 0,
+        boxSize: 'B1 B1'
+      },
+      style: { padding: 0 }
+    },
+
+    info: { props: { icon: 'info' } },
+    logout: {
+      props: { icon: 'logout', href: '/logout' }
+    }
+  }
+}
+
+export const Account = {
+  sideBar,
+  on: {
+    render: element => {
+
+    }
+  }
+}