@symbo.ls/preview 2.7.17 → 2.7.19

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "symbo.ls",
-  "version": "2.7.17",
+  "version": "2.7.19",
   "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, HeaderInitial } from '@symbo.ls/components'
+import { HeaderSignup, HeaderOfMember } from '@symbo.ls/components'
 
 export const Header = {
   props: {
@@ -17,6 +17,9 @@ export const Header = {
   }
 }
 
+// '/': HeaderSignup, // HeaderInitial,
+// '/init': HeaderInitial, // HeaderInitial,
+
 let cacheToken
 export const HeaderOnRouter = {
   extend: Header,
@@ -24,9 +27,8 @@ export const HeaderOnRouter = {
 
   define: { routes: param => param },
   routes: {
-    '/': HeaderSignup, // HeaderInitial,
-    '/init': HeaderInitial, // HeaderInitial,
-    '/*': HeaderOfMember
+    '/*': HeaderOfMember,
+    '/': HeaderSignup
   },
 
   on: {
@@ -37,7 +39,7 @@ export const HeaderOnRouter = {
         router(element, '/', {}, { updateState: false, pushState: false })
       }
     },
-    update: (element, s, changes) => {
+    initUpdate: (element, s, changes) => {
       if (cacheToken !== s.userToken) {
         cacheToken = s.userToken
         if (s.userToken) {

package/src/pages/Account/Personal.js

@@ -0,0 +1,59 @@
+'use strict'
+
+import { Flex, Grid } from '@symbo.ls/components'
+
+import { fieldsGridProps } from './fieldsGridProps'
+
+const fields = {
+  extend: Grid,
+
+  InputField_email: {
+    gridColumn: 'span 2',
+    title: { text: 'Your Email' }
+  },
+
+  InputField_username: {
+    title: { text: 'Your Username' }
+  },
+
+  SelectField2_role: {
+    title: { text: 'Your role' }
+  },
+
+  PasswordField: {
+    title: { text: 'Change Password' }
+  },
+
+  PasswordField_repeat: {
+    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 = {
+  extend: Flex,
+  props,
+
+  title: {},
+  fields,
+
+  ContinueButton: {}
+}

package/src/pages/Account/{projectAccount.js → Project.js}

@@ -4,17 +4,13 @@ import { Flex } from '@symbo.ls/components'
 import icon from '../Init/Personalize/icon'
 import fields from '../Init/Personalize/fields'
 
-export const projectAccount = {
+export const ProjectAccount = {
   extend: Flex,
   props: {
     flow: 'column',
     height: '100%'
   },
 
-  class: {
-    show: (element, state) => state.activePersonalAccount
-  },
-
   SectionHeader: {
     title: ({ state }) => 'Settings for ' + state.projectName,
     p: 'Some settings will be stored only in this device.'
@@ -29,7 +25,7 @@ export const projectAccount = {
   },
 
   Flex: {
-    props: { gap: 'C1' },
+    props: { gap: 'C1', align: 'flex-start' },
 
     icon,
     fields

package/src/pages/Account/index.js

@@ -1,20 +1,23 @@
 'use strict'
 
+import { router } from '@domql/router'
 import { Flex, IconButton, Link, SquareButton } from '@symbo.ls/components'
 
-import { personalAccount } from './personalAccount'
-import { projectAccount } from './projectAccount'
+import { PersonalAccount } from './Personal'
+import { ProjectAccount } from './Project'
 
 const ProjectButton = {
-  extend: [SquareButton],
-  props: { theme: 'transparent' },
-  User: {
-    props: ({ state }) => ({
+  extend: [Link, SquareButton],
+  props: ({ state }) => ({
+    theme: 'transparent',
+    href: '/account/' + state.key.split('.')[0],
+    User: {
       round: '100%',
       src: state.icon && state.icon.src,
       title: state.projectName
-    })
-  },
+    }
+  }),
+  User: {},
   on: {
     click: (event, el, s) => {
       const { id, name } = s.parse()
@@ -23,7 +26,7 @@ const ProjectButton = {
         projectId: id,
         activeProject: el.key
       })
-      s.update({ activePersonalAccount: false })
+      Link.on.click(event, el, s)
     }
   }
 }
@@ -54,13 +57,8 @@ const sidebar = {
   Flex: {
     extend: Flex,
     profile: {
-      extend: [IconButton],
-      props: { icon: 'openSource' },
-      on: {
-        click: (event, element, state) => {
-          state.update({ activePersonalAccount: true })
-        }
-      }
+      extend: [Link, IconButton],
+      props: { icon: 'human', href: '/account' }
     },
 
     projects: {
@@ -102,8 +100,18 @@ export const Account = {
   props,
 
   sidebar,
-  content: {
-    personalAccount,
-    projectAccount
+
+  define: { routes: param => param },
+  routes: {
+    '/': PersonalAccount,
+    '/*': ProjectAccount
+  },
+
+  on: {
+    render: element => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      router(element, url, {})
+    }
   }
 }

package/src/pages/Color/index.js

@@ -6,6 +6,7 @@ import themes from './themes'
 
 export const Color = {
   key: 'colors',
+  state: 'PROJECT_SYSTEM',
 
   props: { gap: 'A' },
 

package/src/pages/Color/palette.js

@@ -4,6 +4,7 @@ import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
 
 const mapColors = (el, s) => {
   const COLOR = s.parse()
+  console.log(s)
   const colorKeys = Object.keys(COLOR)
   return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
 }

package/src/pages/Color/themes.js

@@ -4,11 +4,14 @@ import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
 
 const mapThemes = (el, s) => {
   const THEME = s.parse()
+  console.log(s)
   const themeKeys = Object.keys(THEME)
   return themeKeys.map(v => ({ ...THEME[v], key: v }))
 }
 
 export default {
+  state: 'THEME',
+
   header: {
     extend: SectionHeader,
     state: {

package/src/pages/DesignSystem/index.js

@@ -107,8 +107,6 @@ const NAV = [{
 export const DesignSystem = {
   extend: Flex,
 
-  state: 'PROJECT_SYSTEM',
-
   props: {
     margin: '-C2+X2 - -',
     padding: 'C2+X2 - -',

package/src/pages/Init/ChooseEnvironment.js

@@ -36,7 +36,7 @@ const ButtonOptions = {
     childExtend: {
       extend: [ClickableItem, WiderButton, TooltipParent],
       props: ({ key, state, parent }) => ({
-        active: state[parent.parent.key] === key,
+        active: state[parent.parent.key] === key.toLowerCase(),
 
         style: {
           '&:hover, &:focus-visible': {
@@ -78,7 +78,7 @@ const ButtonOptions = {
         click: (ev, el, s) => {
           const key = el.parent.parent.key
           const value = el.key.toLowerCase()
-          setCookie(key, value, 3)
+          setCookie(key, value)
           s.update({ [key]: value })
         }
       }

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

@@ -6,14 +6,18 @@ import { UploadImage } from '../../../components'
 
 export default {
   extend: UploadImage,
-  props: {
+  props: ({ state }) => ({
+    position: 'relative',
+
     title: { text: 'Project icon' },
+
     element: {
       flow: 'column',
       position: 'relative',
       width: 'fit-content',
       padding: 'A',
       gap: '0',
+      opacity: !!state.icon,
 
       p: {
         text: 'Drag and drop or click',
@@ -21,25 +25,10 @@ export default {
         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'
-      })
-    },
-
     input: {
       on: {
         change: (ev, el, s) => {
@@ -68,5 +57,20 @@ export default {
         }
       }
     }
+  },
+
+  User: {
+    extend: User,
+    props: ({ state }) => ({
+      position: 'absolute',
+      fontSize: 'H',
+      bottom: 'Y',
+      left: 'Y1',
+      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/Theme/buttonTitlesGrid.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { ButtonTitle, Flex } from '@symbo.ls/components'
+import { ButtonTitle, Grid } from '@symbo.ls/components'
 
 export const columnTitleButton = {
   extend: ButtonTitle,
@@ -20,10 +20,17 @@ export const columnTitleButton = {
 }
 
 export const buttonTitlesGrid = {
-  extend: Flex,
+  extend: Grid,
   props: {
-    justifyContent: 'space-between',
-    padding: 'B2 E1 - -'
+    justiyItems: 'start',
+    padding: 'B2 - - -',
+    columns: 'repeat(4, auto)',
+    gap: 'B2+W1',
+    width: 'fit-content',
+    justifyItems: 'start',
+    '@tabletL': { columns: 'repeat(3, auto)' },
+    '@tabletM': { columns: 'repeat(2, auto)' },
+    childProps: { width: 'F+Z1' }
   },
 
   childExtend: {

package/src/pages/Theme/index.js

@@ -25,7 +25,6 @@ const ThemeNameField = {
 
   props: ({ state }) => ({
     gap: '0',
-
     title: {
       text: 'Name the theme',
       fontSize: 'Z'
@@ -40,7 +39,7 @@ const ThemeNameField = {
       round: '0',
       textTransform: 'capitalize',
 
-      border: 'dashed, gray5',
+      border: 'dashed, gray3',
       borderWidth: '0 0 1px',
 
       text: state.themeName,
@@ -139,6 +138,17 @@ export const Theme = {
   extend: PageTemplate,
 
   style,
+  props: {
+    padding: '- D2 - -',
+    boxSizing: 'border-box',
+    '@screenL': { fontSize: '20px' },
+    '@screenM': { fontSize: '17px' },
+    '@screenS': { fontSize: 'A' },
+    style: {
+      paddingLeft: '0',
+      '@media only screen and (min-width: 1920px)': { fontSize: '22px' }
+    }
+  },
 
   state: {
     sceneTheme: 'dark',
@@ -168,8 +178,9 @@ export const Theme = {
   header: {
     extend: SectionHeader,
     props: {
-      margin: '0 0 B2',
+      margin: '0 - B2 0',
       justifyContent: 'space-between'
+      // border: '2px solid purple'
     },
     heading: null,
     ThemeNameField,
@@ -180,21 +191,24 @@ export const Theme = {
 
   cnt: {
     extend: Flex,
-    props: { gap: 'D' },
+    props: { gap: 'C2', padding: '0' },
 
     preview,
 
     colorEdit: {
       props: {
+        flex: '1',
         gap: '',
         flexFlow: 'column'
+        // border: '5px solid red'
       },
 
       colors: {
         props: {
           padding: '- - C1 -',
-          border: 'solid, gray3',
-          borderWidth: '0 0 0 1px'
+          border: 'solid, gray2',
+          borderWidth: '0 0 1px 0'
+          // style: { borderBottom: '.5px solid rgba(255, 255, 255, .1)' }
         },
         selectsGrid,
         buttonTitlesGrid
@@ -203,8 +217,8 @@ export const Theme = {
       onHover: {
         extend: CommonField,
         props: {
-          border: 'solid, gray3',
-          borderWidth: '0 0 0 1px',
+          border: 'solid, gray2',
+          borderWidth: '0 0 1px 0',
           gap: 'B2',
           padding: 'B - C1 -',
           title: {

package/src/pages/Theme/selectsGrid.js

@@ -5,20 +5,27 @@ import { CommonField, ColorSelect, Grid } from '@symbo.ls/components'
 export const selectsGrid = {
   extend: Grid,
   props: {
-    columns: 'repeat(4, 1fr)',
-    gap: 'C'
+    columns: 'repeat(4, auto)',
+    style: { width: 'fit-content' },
+    gap: 'B2+W1',
+    justifyItems: 'start',
+    '@tabletL': { columns: 'repeat(3, auto)' },
+    '@tabletM': { columns: 'repeat(2, auto)' }
   },
 
   childExtend: {
     extend: CommonField,
+    tag: 'div',
     props: (el, s) => ({
-      width: 'fit-content',
+      width: 'F+Z',
       title: {
         text: s.title,
         fontSize: 'Z'
       },
       element: {
-        width: 'F+Z1',
+        width: '100%',
+        height: 'B2+W',
+        padding: '0 W1 0 Z1',
         title: {
           box: {
             background: s.color,
@@ -28,6 +35,13 @@ export const selectsGrid = {
             text: s.name,
             fontSize: 'Z1'
           }
+        },
+        buttons: {
+          gap: 'W',
+          childProps: {
+            boxSize: 'fit-content',
+            padding: 'W1+W1'
+          }
         }
       }
     }),

package/src/pages/Typography/collection.js

@@ -52,13 +52,13 @@ const isTag = v => HTML_TAGS.root.indexOf(v) > -1 || HTML_TAGS.body.indexOf(v) >
 const isHelper = v => v.slice(0, 1) === '.'
 
 const getCollectionFromArray = (arr, s) => {
-  const { __projectSystem } = s
-  const { TYPOGRAPHY } = __projectSystem
-  if (!TYPOGRAPHY) return
+  const TYPOGRAPHY = s.parse()
   const styles = TYPOGRAPHY.styles || {}
 
+  if (!s.sequence) return {}
+
   return arr.map((v, k) => {
-    const result = getTypeStyle(v, __projectSystem)
+    const result = getTypeStyle(v, s.parent.parse())
     return {
       key: v,
       value: {
@@ -103,10 +103,8 @@ export const tagsCollection = (el, s) => {
 }
 
 export const helpersCollection = (el, s) => {
-  const { __projectSystem } = s
-  const { TYPOGRAPHY } = __projectSystem
-  if (!TYPOGRAPHY) return
-  const { styles } = TYPOGRAPHY
+  const TYPOGRAPHY = s.parse()
+  const styles = TYPOGRAPHY.styles || {}
 
   const HELPERS = Object.keys(styles)
     .filter(v => v.slice(0, 1) === '.')

package/src/pages/Typography/documentStyles.js

@@ -109,16 +109,5 @@ export default {
         props: { icon: 'arrowAngleMirroringVertical' }
       }]
     }
-  },
-
-  on: {
-    init: (el, s) => {
-      const { TYPOGRAPHY } = s.__projectSystem
-      if (!TYPOGRAPHY) return
-      const { styles } = TYPOGRAPHY
-      if (styles) {
-        s.update({ styles }, { preventUpdate: true })
-      } else TYPOGRAPHY.styles = {}
-    }
   }
 }

package/src/pages/Typography/index.js

@@ -1,14 +1,12 @@
 'use strict'
 
-import state from './state'
-
 import typeScale from './typeScale'
 import documentStyles from './documentStyles'
 import stylesHelpers from './stylesHelpers'
 import { mapSequence, sortSequence } from '@symbo.ls/components'
 
 export const Typography = {
-  state,
+  state: 'PROJECT_SYSTEM',
 
   SectionHeader: {
     margin: '0 0 C',
@@ -16,28 +14,56 @@ export const Typography = {
     p: 'A general configuration of type properties on the document.'
   },
 
-  SlidersWithResponsive: {},
+  cnt: {
+    state: 'TYPOGRAPHY',
+
+    SlidersWithResponsive: {},
+
+    line: { extend: 'Line' },
+
+    documentStyles,
+    line1: { extend: 'Line' },
 
-  line: { extend: 'Line' },
+    stylesHelpers,
+    line2: { extend: 'Line' },
 
-  documentStyles,
-  line1: { extend: 'Line' },
+    typeScale,
 
-  stylesHelpers,
-  line2: { extend: 'Line' },
+    on: {
+      stateCreated: (el, s) => {
+        s.update({
+          base: s.base || 16,
+          ratio: s.ratio || 1.125,
+          range: s.range || [-3, +8],
+          subsequence: s.subsequence || true,
+          styles: s.styles || {},
+          h1Matches: s.h1Matches || +6,
+          scales: {},
+          sequence: {},
+          vars: {},
+          type: 'demo-font-size',
+          sampleText: 'Today is a big day for our tribe. The year ends.'
+        }, {
+          preventUpdate: true,
+          preventUpdateListener: true
+        })
 
-  typeScale,
+        if (s.base && s.range) mapSequence(s, sortSequence)
+      },
+      stateUpdated: (el, s, changes) => {
+        const { base, ratio, range, subsequence, h1Matches } = changes
 
-  on: {
-    init: (el, s) => {
-      mapSequence(s, sortSequence)
-    },
-    stateUpdated: (el, s, changes) => {
-      s.projectSystemUpdate({
-        TYPOGRAPHY: changes
-      }, {
-        preventUpdate: true
-      })
+        s.update({
+          base,
+          ratio,
+          range,
+          subsequence,
+          h1Matches
+        }, {
+          preventUpdate: true,
+          preventUpdateListener: true
+        })
+      }
     }
   }
 }

package/src/pages/Typography/typeScale.js

@@ -74,9 +74,10 @@ export default {
       extend: TypeScaleSequence,
       $setStateCollection: (el) => {
         const { state } = el
-        state.sequence = {}
-        el.removeContent()
-        return mapSequence(state, sortSequence)
+        // return state.sequence
+        // state.sequence = {}
+        // el.removeContent()
+        if (state.base && state.range) { return mapSequence(state, sortSequence) }
       }
     },
 

package/src/pages/Account/personalAccount.js

@@ -1,73 +0,0 @@
-'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/Typography/state.js

@@ -1,18 +0,0 @@
-'use strict'
-
-export default ({ parent }) => {
-  const rootState = parent.state
-  const typography = rootState.__projectSystem.TYPOGRAPHY || {}
-  return {
-    base: typography.base || 16,
-    ratio: typography.ratio || 1.125,
-    range: typography.range || [-3, +8],
-    subsequence: typography.subsequence || true,
-    h1Matches: +6,
-    scales: {},
-    sequence: {},
-    vars: {},
-    type: 'demo-font-size',
-    sampleText: 'Today is a big day for our tribe. The year ends.'
-  }
-}