@symbo.ls/preview 2.6.34 → 2.6.36

package/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import '@symbo.ls/platform-define'
 import { init, system } from '@symbo.ls/platform-init'
 import { state } from '@symbo.ls/platform-state'
 
@@ -9,22 +10,21 @@ import * as components from './src/components'
 
 import App from './src/app'
 import { router, lastLevel } from '@domql/router'
+import { Main } from './src/pages'
 
 const designSystem = init(system)
 
-DOM.define({
-  routes: param => param,
-  __filepath: param => param,
-  $setCollection: smbls.Collection.define.$setCollection,
-  $setStateCollection: smbls.Collection.define.$setStateCollection
-})
-
 const app = DOM.create({
   extend: App,
 
   HeaderOfMember: { maxWidth: '100%' },
   state,
 
+  define: { routes: param => param },
+  routes: {
+    '/': Main
+  },
+
   on: {
     render: (el, s) => {
       const { pathname, hash } = window.location

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "symbo.ls",
-  "version": "2.6.34",
+  "version": "2.6.36",
   "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",
@@ -26,17 +26,17 @@
     "@domql/tags": "latest",
     "@symbo.ls/components": "latest",
     "@symbo.ls/icons": "latest",
-    "@symbo.ls/init": "latest",
     "@symbo.ls/scratch": "latest",
-    "@symbo.ls/platform-init": "latest",
-    "@symbo.ls/platform-state": "latest",
     "@symbo.ls/temp-db": "latest",
     "@symbo.ls/utils": "latest"
   },
   "devDependencies": {
+    "@symbo.ls/platform-init": "latest",
+    "@symbo.ls/platform-define": "latest",
+    "@symbo.ls/platform-state": "latest",
+    "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/components/UploadImage.js

@@ -5,23 +5,22 @@ import { Flex, CommonField, Upload, ClickableItem } from '@symbo.ls/components'
 export const UploadImage = {
   extend: [CommonField],
   props: {
-    title: { text: 'Pick from the picture' },
     element: {
       border: 'none',
       background: 'gray1',
       padding: 'Z A Z Z',
       gap: 'Z',
       flow: 'row',
-      icon: { style: { fontSize: '52px' } },
+      icon: { fontSize: '52px' },
       p: {
         text: 'Upload or drop the image'
       }
     }
   },
-  title: {},
+  title: { text: 'Pick from the picture' },
   element: {
     extend: [Upload, Flex, ClickableItem],
-    icon: { style: { fontSize: '52px' } },
+    icon: {},
     p: { span: null },
     input: {
       on: {

package/src/pages/Account/fields.js

@@ -0,0 +1,74 @@
+'use strict'
+
+import {
+  InputField,
+  Grid,
+  PasswordField,
+  SelectField2
+} from '@symbo.ls/components'
+
+import { fieldsGridProps } from './fieldsGridProps'
+
+export default {
+  extend: Grid,
+  props: fieldsGridProps,
+  childExtend: {
+    title: {},
+    element: {
+      props: ({ state, parent }) => ({ value: state[parent.key] }),
+      on: {
+        change: (event, el, s) => {
+          s.update({ [el.parent.key]: event.target.value })
+        }
+      }
+    }
+  },
+  ...[
+    {
+      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' } }
+      }
+    }
+  ]
+}
+
+// uploadIcon: {
+//   extend: Upload,
+//   icon: {},
+//   p: { span: null }
+// },

package/src/pages/Account/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex, IconButton, Link, SquareButton, User } from '@symbo.ls/components'
+import { Flex, IconButton, Link, SquareButton } from '@symbo.ls/components'
 import { fetchProject } from '@symbo.ls/fetch'
 import { setCookie } from 'domql/packages/cookie'
 
@@ -20,11 +20,13 @@ const ProjectButton = {
   on: {
     click: (event, el, s) => {
       setCookie('activeProject', el.key + '', 3)
-      const { projectId, username } = s.parse
-      fetchProject(el, s, {
-        username: s.name,
-        projectId: s.id
+      const { id, name } = s.parse()
+      fetchProject(el, s.parent, {
+        username: name,
+        projectId: id
       })
+      console.log(s.parse())
+      s.update({ activePersonalAccount: false })
     }
   }
 }
@@ -95,9 +97,7 @@ const props = {
   gap: 'E',
   overflow: 'hidden',
 
-  content: {
-    flex: '1'
-  }
+  content: { flex: '1' }
 }
 
 export const Account = {

package/src/pages/Account/projectAccount.js

@@ -1,153 +1,44 @@
 'use strict'
 
-import {
-  Flex,
-  CommonField,
-  Upload,
-  InputField,
-  Grid,
-  ContinueButton,
-  ColumnParagraphs,
-  PasswordField,
-  SelectField2,
-  DragNdropUser
-} from '@symbo.ls/components'
+import { Flex } from '@symbo.ls/components'
+import icon from '../Init/Personalize/icon'
+import fields from '../Init/Personalize/fields'
 
-import { fieldsGridProps } from './fieldsGridProps'
-
-const fields = {
-  extend: Grid,
-  props: fieldsGridProps,
-  ...[
-    {
-      extend: InputField,
-      props: { title: { text: 'Name the project' } }
-    },
-
-    {
-      extend: InputField,
-      props: { title: { text: 'Key' } }
-    },
+export const projectAccount = {
+  extend: Flex,
+  props: {
+    flow: 'column',
+    height: '100%'
+  },
 
-    {
-      extend: SelectField2,
-      props: {
-        title: { text: 'URL Access' },
-        element: { title: { text: 'Password Protected' } }
-      }
-    },
+  class: {
+    show: (element, state) => state.activePersonalAccount
+  },
 
-    {
-      extend: PasswordField,
-      props: {
-        opacity: '.3',
-        title: { text: 'Password' }
-      }
-    },
-    {
-      extend: SelectField2,
-      props: {
-        title: { text: 'Environment' },
-        element: { title: { text: 'JavaScript' } }
-      }
-    },
+  SectionHeader: {
+    title: ({ state }) => 'Settings for ' + state.projectName,
+    p: 'Some settings will be stored only in this device.'
+  },
 
-    {
-      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 -' }
+  ColumnParagraphs: {
+    props: { margin: '- - D1' },
+    ...[
+      { 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: {
-    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'
-        },
+  Flex: {
+    props: { gap: 'C1' },
 
-        uploadIcon: {
-          icon: {
-            fontSize: 'E2'
-          },
-          p: {
-            text: 'Drag and drop or click',
-            fontSize: 'Z',
-            textAlign: 'center',
-            maxWidth: 'E'
-          }
-        }
-      }
-    }
+    icon,
+    fields
   },
 
-  button: {
+  ContinueButton: {
     text: 'Update',
     padding: 'Z1 C1',
-    fontSize: 'Z2',
-    margin: 'F3 - - -',
+    margin: 'auto - - -',
     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/DesignSystem/Dashboard/state.js

@@ -1,118 +1,137 @@
 'use strict'
 
-export default ({ parent: { state: { __projectSystem } } }) => __projectSystem && ({
-  data: [{
-    icon: 'colorOutline',
-    iconTheme: 'theme',
-    title: 'colors',
-    paragraph: 'Colorize styles manually',
-    iconBackground: 'red',
-    properties: [{
-      property: 'Colors',
-      value: __projectSystem.COLOR && Object.keys(__projectSystem.COLOR).length
-    }, {
-      property: 'Themes',
-      value: __projectSystem.THEME && Object.keys(__projectSystem.THEME).length
-    }]
-  }, {
-    icon: 'typographyOutline',
-    iconTheme: 'typography',
-    title: 'typography',
-    paragraph: 'style a typed material',
-    properties: [{
-      property: 'Base size',
-      value: __projectSystem.TYPOGRAPHY && __projectSystem.TYPOGRAPHY.base + 'px'
-    }, {
-      property: 'Ratio',
-      value: __projectSystem.TYPOGRAPHY && __projectSystem.TYPOGRAPHY.ratio
-    }, {
-      property: 'Styles',
-      value: __projectSystem.TYPOGRAPHY && __projectSystem.TYPOGRAPHY.styles && Object.keys(__projectSystem.TYPOGRAPHY.styles).length
-    }, {
-      property: 'Fonts',
-      value: __projectSystem.FONT && Object.keys(__projectSystem.FONT).length
-    }, {
-      property: 'Families',
-      value: __projectSystem.FONT_FAMILY && Object.keys(__projectSystem.FONT_FAMILY).length - 1
-    }]
-  }, {
-    icon: 'spaceOutline',
-    iconTheme: 'space',
-    title: 'Spacing',
-    paragraph: 'Manage properties of a size',
-    properties: [{
-      property: 'Ratio',
-      value: __projectSystem.SPACING && __projectSystem.SPACING.ratio
-    }, {
-      property: 'Templates',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'shape',
-    iconTheme: 'shape',
-    title: 'shapes',
-    paragraph: 'Design an outline to a chosen component',
-    properties: [{
-      property: 'HTML',
-      value: '32'
-    }, {
-      property: 'SVG',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'iconsOutline',
-    iconTheme: 'color',
-    title: 'Icons',
-    paragraph: 'Label a role of subject with glyphs',
-    properties: [{
-      property: 'All',
-      value: __projectSystem.ICONS && Object.keys(__projectSystem.ICONS).length
+export default ({ parent }) => {
+  const { state } = parent
+  const { __projectSystem } = state
+
+  if (!__projectSystem) return
+  const {
+    COLOR,
+    THEME,
+    TYPOGRAPHY,
+    FONT,
+    FONT_FAMILY,
+    SPACING,
+    ICONS,
+    TIMING,
+    MEDIA,
+    DEVICES
+  } = __projectSystem
+
+  return {
+    data: [{
+      icon: 'colorOutline',
+      iconTheme: 'theme',
+      title: 'colors',
+      paragraph: 'Colorize styles manually',
+      iconBackground: 'red',
+      properties: [{
+        property: 'Colors',
+        value: COLOR && Object.keys(COLOR).length
+      }, {
+        property: 'Themes',
+        value: THEME && Object.keys(THEME).length
+      }]
     }, {
-      property: 'Linear',
-      value: __projectSystem.ICONS && Object.keys(__projectSystem.ICONS).filter(v => v.includes('Outline')).length
+      icon: 'typographyOutline',
+      iconTheme: 'typography',
+      title: 'typography',
+      paragraph: 'style a typed material',
+      properties: [{
+        property: 'Base size',
+        value: TYPOGRAPHY && TYPOGRAPHY.base + 'px'
+      }, {
+        property: 'Ratio',
+        value: TYPOGRAPHY && TYPOGRAPHY.ratio
+      }, {
+        property: 'Styles',
+        value: TYPOGRAPHY && TYPOGRAPHY.styles && Object.keys(TYPOGRAPHY.styles).length
+      }, {
+        property: 'Fonts',
+        value: FONT && Object.keys(FONT).length
+      }, {
+        property: 'Families',
+        value: FONT_FAMILY && Object.keys(FONT_FAMILY).length - 1
+      }]
     }, {
-      property: 'Colored',
-      value: __projectSystem.ICONS && Object.keys(__projectSystem.ICONS).filter(v => v.includes('Colored')).length
-    }]
-  }, {
-    icon: 'clock',
-    iconTheme: 'icons',
-    title: 'Timing',
-    paragraph: 'Tokens for transitions and animations',
-    properties: [{
-      property: 'Timing base',
-      value: __projectSystem.TIMING && __projectSystem.TIMING.base + 'ms'
+      icon: 'spaceOutline',
+      iconTheme: 'space',
+      title: 'Spacing',
+      paragraph: 'Manage properties of a size',
+      properties: [{
+        property: 'Ratio',
+        value: SPACING && SPACING.ratio
+      }, {
+        property: 'Templates',
+        value: 'TBA'
+      }]
     }, {
-      property: 'Ratio',
-      value: __projectSystem.TIMING && __projectSystem.TIMING.ratio
+      icon: 'shape',
+      iconTheme: 'shape',
+      title: 'shapes',
+      paragraph: 'Design an outline to a chosen component',
+      properties: [{
+        property: 'HTML',
+        value: '32'
+      }, {
+        property: 'SVG',
+        value: 'TBA'
+      }]
     }, {
-      property: 'Transitions',
-      value: 'TBA'
+      icon: 'iconsOutline',
+      iconTheme: 'color',
+      title: 'Icons',
+      paragraph: 'Label a role of subject with glyphs',
+      properties: [{
+        property: 'All',
+        value: ICONS && Object.keys(ICONS).length
+      }, {
+        property: 'Linear',
+        value: ICONS && Object.keys(ICONS).filter(v => v.includes('Outline')).length
+      }, {
+        property: 'Colored',
+        value: ICONS && Object.keys(ICONS).filter(v => v.includes('Colored')).length
+      }]
     }, {
-      property: 'Animations',
-      value: 'TBA'
-    }]
-  }, {
-    icon: 'deviceMobileOutline',
-    title: 'Breakpoints',
-    paragraph: 'Label a role of subject with glyphs',
-    properties: [{
-      property: 'Breakpoints',
-      value: __projectSystem.MEDIA && Object.keys(__projectSystem.MEDIA).length
+      icon: 'clock',
+      iconTheme: 'icons',
+      title: 'Timing',
+      paragraph: 'Tokens for transitions and animations',
+      properties: [{
+        property: 'Timing base',
+        value: TIMING && TIMING.base + 'ms'
+      }, {
+        property: 'Ratio',
+        value: TIMING && TIMING.ratio
+      }, {
+        property: 'Transitions',
+        value: 'TBA'
+      }, {
+        property: 'Animations',
+        value: 'TBA'
+      }]
     }, {
-      property: 'Screens',
-      value: __projectSystem.DEVICES && Object.keys(__projectSystem.DEVICES).length
-    }]
-  }, {
-    icon: 'threeDots',
-    title: 'Sequence',
-    paragraph: 'The mapping system of generative sizing units',
-    properties: [{
-      property: 'Breakpoints',
-      value: '8'
+      icon: 'deviceMobileOutline',
+      title: 'Breakpoints',
+      paragraph: 'Label a role of subject with glyphs',
+      properties: [{
+        property: 'Breakpoints',
+        value: MEDIA && Object.keys(MEDIA).length
+      }, {
+        property: 'Screens',
+        value: DEVICES && Object.keys(DEVICES).length
+      }]
     }, {
-      property: 'Screens',
-      value: '3'
+      icon: 'threeDots',
+      title: 'Sequence',
+      paragraph: 'The mapping system of generative sizing units',
+      properties: [{
+        property: 'Breakpoints',
+        value: '8'
+      }, {
+        property: 'Screens',
+        value: '3'
+      }]
     }]
-  }]
-})
+  }
+}

package/src/pages/DesignSystem/Dashboard/summary.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { ClickableItem } from '@symbo.ls/components'
+import { ClickableItem, Link } from '@symbo.ls/components'
 import { DesignComponent } from '../../../components'
 
 import state from './state'
@@ -13,7 +13,7 @@ export const content = {
   },
 
   childExtend: {
-    extend: [ClickableItem, DesignComponent],
+    extend: [Link, ClickableItem, DesignComponent],
     props: {
       maxWidth: 'none',
       width: '100%',

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

@@ -35,7 +35,7 @@ export default {
     title: { text: 'Name the project' },
     element: {
       extend: Input,
-      props: ({ state }) => ({ 
+      props: ({ state }) => ({
         placeholder: 'You name it',
         value: state.projectName,
         required: true
@@ -70,7 +70,6 @@ export default {
 
   urlVisibility: {
     title: { text: 'URL Access' },
-    title: {},
     element: {
       extend: [SelectField],
       props: {

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

@@ -1,6 +1,6 @@
 'use strict'
 
-import { fetch, observe, set, upload } from '@symbo.ls/based'
+import { observe, set, upload } from '@symbo.ls/based'
 import { User } from '@symbo.ls/components'
 import { UploadImage } from '../../../components'
 

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

@@ -64,7 +64,7 @@ export const CreateProject = {
   extend: Personalize,
 
   back: null,
-  
+
   HeaderHeading: {
     props: { margin: '- - D1 -' },
     Caption: { text: ({ state }) => `Hi ${state.userName}, let's start` },
@@ -78,7 +78,7 @@ export const CreateProject = {
       { props: { text: `You can connect Symbols to your app and style it online.` } }
     ]
   },
-  
+
   Form: {
     state: {},
     Flex: {},