@symbo.ls/preview 2.7.6 → 2.7.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "symbo.ls",
-  "version": "2.7.6",
+  "version": "2.7.10",
   "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",

package/src/components/Header.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { router } from '@domql/router'
-import { HeaderSignup, HeaderOfMember } from '@symbo.ls/components'
+import { HeaderSignup, HeaderOfMember, HeaderInitial } from '@symbo.ls/components'
 
 export const Header = {
   props: {
@@ -25,6 +25,7 @@ export const HeaderOnRouter = {
   define: { routes: param => param },
   routes: {
     '/': HeaderSignup, // HeaderInitial,
+    '/init': HeaderInitial, // HeaderInitial,
     '/*': HeaderOfMember
   },
 

package/src/pages/Account/index.js

@@ -2,7 +2,6 @@
 
 import { Flex, IconButton, Link, SquareButton } from '@symbo.ls/components'
 import { fetchProject } from '@symbo.ls/fetch'
-import { setCookie } from 'domql/packages/cookie'
 
 import { personalAccount } from './personalAccount'
 import { projectAccount } from './projectAccount'
@@ -19,13 +18,12 @@ const ProjectButton = {
   },
   on: {
     click: (event, el, s) => {
-      setCookie('activeProject', el.key + '', 3)
       const { id, name } = s.parse()
       fetchProject(el, s.parent, {
         username: name,
-        projectId: id
+        projectId: id,
+        activeProject: el.key
       })
-      console.log(s.parse())
       s.update({ activePersonalAccount: false })
     }
   }

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

@@ -21,6 +21,7 @@ export default ({ parent }) => {
   return {
     data: [{
       icon: 'colorOutline',
+      href: '/colors',
       iconTheme: 'theme',
       title: 'colors',
       paragraph: 'Colorize styles manually',
@@ -34,6 +35,7 @@ export default ({ parent }) => {
       }]
     }, {
       icon: 'typographyOutline',
+      href: '/typography',
       iconTheme: 'typography',
       title: 'typography',
       paragraph: 'style a typed material',
@@ -55,6 +57,7 @@ export default ({ parent }) => {
       }]
     }, {
       icon: 'spaceOutline',
+      href: '/space',
       iconTheme: 'space',
       title: 'Spacing',
       paragraph: 'Manage properties of a size',
@@ -67,6 +70,7 @@ export default ({ parent }) => {
       }]
     }, {
       icon: 'shape',
+      href: '/shape',
       iconTheme: 'shape',
       title: 'shapes',
       paragraph: 'Design an outline to a chosen component',
@@ -79,6 +83,7 @@ export default ({ parent }) => {
       }]
     }, {
       icon: 'iconsOutline',
+      href: '/icons',
       iconTheme: 'color',
       title: 'Icons',
       paragraph: 'Label a role of subject with glyphs',
@@ -94,6 +99,7 @@ export default ({ parent }) => {
       }]
     }, {
       icon: 'clock',
+      href: '/timing',
       iconTheme: 'icons',
       title: 'Timing',
       paragraph: 'Tokens for transitions and animations',
@@ -112,6 +118,7 @@ export default ({ parent }) => {
       }]
     }, {
       icon: 'deviceMobileOutline',
+      href: '/media-query',
       title: 'Breakpoints',
       paragraph: 'Label a role of subject with glyphs',
       properties: [{
@@ -123,6 +130,7 @@ export default ({ parent }) => {
       }]
     }, {
       icon: 'threeDots',
+      href: '/sequence',
       title: 'Sequence',
       paragraph: 'The mapping system of generative sizing units',
       properties: [{

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

@@ -14,11 +14,13 @@ export const content = {
 
   childExtend: {
     extend: [Link, ClickableItem, DesignComponent],
-    props: {
+    props: () => ({
       maxWidth: 'none',
       width: '100%',
-      margin: '- - B1'
-    }
+      margin: '- - B1',
+      fontWeight: '400',
+      href: state.href
+    })
   },
 
   $setStateCollection: ({ state }) => state.data

package/src/pages/Init/ChooseProject.js

@@ -1,8 +1,7 @@
 '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 { Flex, ProjectTab, Grid } from '@symbo.ls/components'
+
 import { InitPage } from '../../components'
 
 const props = {
@@ -39,21 +38,21 @@ export const ChooseProject = {
       gap: 'D1',
       margin: '10% -Z auto'
     },
-    
+
     childExtend: ProjectTab,
     $setStateCollection: ({ state }) => state.projects
   },
 
   footer: {
     extend: Flex,
-    props: { 
+    props: {
       align: 'flex-start flex-start',
       gap: 'C',
-      margin: 'auto - -',
+      margin: 'auto - -'
     },
     ContinueButton: {
       text: 'Create',
-      href: '/init/personalize'
+      href: '/init/create'
     },
     p: {
       text: `In this example we'll initialize a Symbols Design System for you.`

package/src/pages/Init/CreateDocumentTheme.js

@@ -137,6 +137,8 @@ export const CreateDocumentTheme = {
   on: {
     init: ({ state }) => {
       const { THEME, COLOR } = state.__projectSystem
+      console.log(state.__projectSystem)
+      if (!THEME || !THEME.document) return
       const { document } = THEME
       const dark = document['@dark']
       const light = document['@light']