@symbo.ls/preview 2.6.23 → 2.6.33

package/index.js

@@ -1,13 +1,16 @@
 'use strict'
 
-import '@symbo.ls/platform-init'
+import { init, system } from '@symbo.ls/platform-init'
+import { state } from '@symbo.ls/platform-state'
 
 import DOM from 'domql'
 import * as smbls from '@symbo.ls/components'
+import * as components from './src/components'
 
 import App from './src/app'
 import { router, lastLevel } from '@domql/router'
-import { platformOptions } from '@symbo.ls/platform-options'
+
+const designSystem = init(system)
 
 DOM.define({
   routes: param => param,
@@ -19,7 +22,8 @@ DOM.define({
 const app = DOM.create({
   extend: App,
 
-  HeaderOnRouter: {},
+  HeaderOfMember: { maxWidth: '100%' },
+  state,
 
   on: {
     render: (el, s) => {
@@ -29,10 +33,14 @@ const app = DOM.create({
     },
 
     update: (el, s, changes) => {
-      smbls.openModal(el.parent, s)
+      smbls.openModal(el, s)
     }
   }
-}, undefined, 'app', platformOptions)
+}, undefined, 'app', {
+  extend: [smbls.Box],
+  components: { ...smbls, ...components },
+  context: { system: designSystem }
+})
 
 window.onpopstate = e => {
   const { pathname, hash } = window.location

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/preview",
   "description": "",
-  "author": "",
-  "version": "2.6.23",
+  "author": "symbo.ls",
+  "version": "2.6.33",
   "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",
@@ -28,9 +28,10 @@
     "@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",
-    "colorthief": "^2.3.2"
+    "@symbo.ls/utils": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",

package/src/pages/Account/index.js

@@ -9,7 +9,7 @@ import { projectAccount } from './projectAccount'
 
 const ProjectButton = {
   extend: [SquareButton],
-  props: { theme: 'transparent' }, 
+  props: { theme: 'transparent' },
   User: {
     props: ({ state }) => ({
       round: '100%',
@@ -23,7 +23,7 @@ const ProjectButton = {
       const { projectId, username } = s.parse
       fetchProject(el, s, {
         username: s.name,
-        projectId: s.id 
+        projectId: s.id
       })
     }
   }
@@ -40,7 +40,7 @@ const sidebar = {
     borderRight: 'gray2, solid',
     borderWidth: '1px',
     minWidth: 'D1',
-    
+
     childProps: {
       flow: 'column',
       gap: 'A2'
@@ -52,7 +52,7 @@ const sidebar = {
     extend: Flex
   },
 
-  Flex:  {
+  Flex: {
     extend: Flex,
     profile: {
       extend: [IconButton],
@@ -74,17 +74,18 @@ const sidebar = {
       $setStateCollection: ({ state }) => state.projects
     },
 
-    add: { 
+    add: {
       extend: [IconButton, Link],
       props: { icon: 'plus', href: '/init/create' }
     }
-  }, 
-  
+  },
+
   meta: {
     extend: Flex,
+    childExtend: [Link, IconButton],
     props: { gap: 'A' },
-    info: { extend: IconButton, props: { icon: 'info' } },
-    logout: { extend: IconButton, props: { icon: 'logout' } }
+    info: { props: { icon: 'info' } },
+    logout: { props: { icon: 'logout', href: '/logout' } }
   }
 }
 

package/src/pages/Color/palette.js

@@ -3,8 +3,8 @@
 import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
-  if (!s.__projectSystem) return
   const { COLOR } = s.__projectSystem
+  if (!COLOR) return
   const colorKeys = Object.keys(COLOR)
   return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
 }

package/src/pages/Color/themes.js

@@ -3,8 +3,8 @@
 import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
 const mapThemes = (el, s) => {
-  if (!s.__projectSystem) return
   const { THEME } = s.__projectSystem
+  if (!THEME) return
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }

package/src/pages/Init/CreateDocumentTheme.js

@@ -93,7 +93,7 @@ const modes = {
       },
       stateUpdated: (el, s, changes) => {
         const { color, background } = s
-        s.systemUpdate({
+        s.projectSystemUpdate({
           THEME: {
             document: {
               ['@' + s.key]: { color, background }

package/src/pages/Init/index.js

@@ -20,7 +20,7 @@ export const Init = {
 
   define: { routes: param => param },
   routes: {
-    '/': ChooseProject,
+    '/*': ChooseProject,
     '/create': CreateProject,
     '/personalize': Personalize,
     '/theme': CreateDocumentTheme,

package/src/pages/Spaces/index.js

@@ -22,7 +22,7 @@ export const Spaces = {
   on: {
     init: (el, s) => {},
     stateUpdated: (el, s, changes) => {
-      s.systemUpdate({
+      s.projectSystemUpdate({
         SPACING: changes
       }, {
         preventUpdate: true

package/src/pages/State/index.js

@@ -81,7 +81,7 @@ export const State = {
 
   on: {
     stateUpdated: (el, s) => {
-      s.systemUpdate({ PROJECT_STATE: s.parse })
+      s.projectSystemUpdate({ PROJECT_STATE: s.parse })
     }
   }
 }

package/src/pages/Typography/collection.js

@@ -26,6 +26,7 @@ const iconMap = {
 
 const getTypeProp = (key, prop, library, defaultValue) => {
   const { TYPOGRAPHY } = library
+  if (!TYPOGRAPHY) return
   const { styles } = TYPOGRAPHY
   if (!styles[key]) styles[key] = {}
   return styles[key][prop] ||
@@ -52,6 +53,7 @@ const isHelper = v => v.slice(0, 1) === '.'
 const getCollectionFromArray = (arr, s) => {
   const { __projectSystem } = s
   const { TYPOGRAPHY } = __projectSystem
+  if (!TYPOGRAPHY) return
   const { styles } = TYPOGRAPHY
   return arr.map((v, k) => {
     const result = getTypeStyle(v, __projectSystem)
@@ -84,6 +86,7 @@ export const headingsCollection = (el, s) => {
 export const tagsCollection = (el, s) => {
   const { __projectSystem } = s
   const { TYPOGRAPHY } = __projectSystem
+  if (!TYPOGRAPHY) return
   const { styles } = TYPOGRAPHY
   if (!styles.body) styles.body = {}
   el.removeContent()
@@ -99,6 +102,7 @@ export const tagsCollection = (el, s) => {
 export const helpersCollection = (el, s) => {
   const { __projectSystem } = s
   const { TYPOGRAPHY } = __projectSystem
+  if (!TYPOGRAPHY) return
   const { styles } = TYPOGRAPHY
 
   const HELPERS = Object.keys(styles)

package/src/pages/Typography/documentStyles.js

@@ -113,9 +113,8 @@ export default {
 
   on: {
     init: (el, s) => {
-      if (!s.__projectSystem) return
-      const { __projectSystem } = s
-      const { TYPOGRAPHY } = __projectSystem
+      const { TYPOGRAPHY } = s.__projectSystem
+      if (!TYPOGRAPHY) return
       const { styles } = TYPOGRAPHY
       if (styles) {
         s.update({ styles }, { preventUpdate: true })

package/src/pages/Typography/index.js

@@ -33,7 +33,7 @@ export const Typography = {
       mapSequence(s, sortSequence)
     },
     stateUpdated: (el, s, changes) => {
-      s.systemUpdate({
+      s.projectSystemUpdate({
         TYPOGRAPHY: changes
       }, {
         preventUpdate: true

package/src/state.js

@@ -0,0 +1,20 @@
+'use strict'
+
+import SYSTEM from '@symbo.ls/platform-init'
+import USR_DATA from '@symbo.ls/temp-db'
+import { LIBRARY, COMPONENTS } from '@symbo.ls/temp-db/symbols'
+
+export const state = {
+  globalTheme: 'dark',
+  appKey: '4it.symbo.ls'
+}
+
+state.SYSTEM = USR_DATA[state.appKey]
+// state.SYSTEM = {}
+state.SYSTEM.COMPONENTS = {}
+
+export const context = {
+  LIBRARY,
+  SYSTEM,
+  COMPONENTS
+}