@symbo.ls/preview 2.0.7 → 2.5.5

package/src/pages/Account/__/index.js

@@ -0,0 +1,241 @@
+'use strict'
+
+import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCaption, Grid, CheckButton } from '@symbo.ls/components'
+// import { account } from '../SignUp'
+
+import setUpProject from './setUpProject'
+
+import Page from '../Page'
+import { logout } from '@symbo.ls/auth'
+
+const sideBar = {
+  tag: 'aside',
+  extend: Block,
+  style: {
+    height: '100%',
+    borderRight: '1px solid rgba(255, 255, 255, .06)'
+  },
+  props: {
+    flexFlow: 'column',
+    flexAlign: 'flex-start space-between',
+    padding: '0 C 0 0'
+  },
+  nav: {
+    extend: Block,
+    props: {
+      flexFlow: 'column',
+      gap: 'A1'
+    },
+    childExtend: {
+      tag: 'a',
+
+      extend: [SquareButton, Link, ClickableItem],
+      props: {
+        theme: 'quaternary',
+        padding: 0,
+        boxSize: 'B1 B1'
+      },
+      style: { padding: 0 }
+    },
+
+    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,
+        attr: {
+          // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
+          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
+        },
+        style: {
+          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',
+    extend: Block,
+    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: 'upload' },
+
+      on: {
+        click: (ev, el, s) => {
+          logout()
+        }
+      }
+    }
+  }
+}
+
+const fillFields = {
+  extend: [Block, Grid],
+  props: {
+    columns: 'repeat(2, 1fr)',
+    columnGap: 'C',
+    rowGap: 'C2'
+  },
+  childExtend: {
+    extend: SelectFieldWithCaption,
+    style: {
+      '> input': { width: '270x', minWidth: '270px', height: '42px' }
+    },
+    caption: {},
+    element: {
+      style: {
+        minWidth: `${270 / 16}em`,
+        height: `${42 / 16}em`
+      },
+      buttons: { ...[{ props: { theme: 'transparent' } }] }
+    }
+  },
+  ...[
+    {
+      caption: { props: { text: 'Your Username' } },
+      element: {
+        tag: 'input',
+        attr: {
+          value: 'nikoloza'
+        }
+      }
+    },
+    {
+      caption: { props: { text: 'Your role' } },
+      element: {
+        title: { props: { text: 'Design' } }
+      }
+    },
+    {
+      caption: { props: { text: 'Country and region' } },
+      element: {
+        props: { gap: 'W' },
+        title: {
+          props: { text: 'Georgia' },
+
+          style: {
+            '&::before': {
+              content: '"🇬🇪"'
+            }
+          }
+        }
+      }
+    },
+
+    {
+      caption: { props: { text: 'Time-zone' } },
+      element: {
+        props: { gap: 'W' },
+        title: {
+          props: { text: 'Tbilisi(GMT+4)' }
+        }
+      }
+    }
+  ]
+}
+
+const personalAccount = {
+  extend: Block,
+  props: {
+    // padding: '0 0 0 E',
+    flexFlow: 'column',
+    flexAlign: 'flex-start flex-start',
+    gap: 'C2'
+  },
+  caption: {
+    extend: [Text, Block],
+    props: {
+      text: 'Your personal account'
+    }
+  },
+
+  fields: {
+    extend: { fillFields }
+  },
+  button: {
+    extend: CheckButton,
+    props: {
+      text: 'Save Updates'
+    },
+    style: {
+      background: '#0079FD',
+      '> svg': { color: 'white' },
+      '&:hover': { background: '#0079FD' }
+    }
+  }
+}
+
+export const Account = {
+  extend: Page,
+  props: {
+    flexAlign: 'flex-start flex-start',
+    padding: 'C1 0 D1 0',
+    gap: 'E'
+  },
+  define: { routes: param => param },
+  state: {
+    activeTab: 'personal'
+  },
+
+  sideBar,
+
+  routes: {
+    personal: personalAccount,
+    project: setUpProject
+  },
+
+  page: {
+    content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+  }
+}

package/src/pages/Account/{setUpProject.js → __/setUpProject.js}

@@ -1,23 +1,23 @@
 'use strict'
 
-import { Text, Block, Img, SquareButton, SelectTool } from '@symbo.ls/all'
-import { SetUp } from '..'
+import { Text, Block, Img, SquareButton, SelectField } from '@symbo.ls/components'
+import { SetUp } from '../..'
 
 export default {
   caption: {
-    proto: [Block, Text],
+    extend: [Block, Text],
     props: {
       text: 'Settings for Rockstar',
       padding: '0 0 C2 0'
     }
   },
   content: {
-    proto: SetUp,
+    extend: SetUp,
     style: { padding: 0 },
     upload: {
       caption: {},
       content: {
-        proto: Block,
+        extend: Block,
         props: {
           flexFlow: 'column',
           gap: 'A'
@@ -25,7 +25,7 @@ export default {
         style: { padding: `${17 / 16}em ${28 / 16}em ${10 / 16}em ${28 / 16}em` },
         input: {},
         icon: {
-          proto: Img,
+          extend: Img,
           attr: {
             // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
             src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
@@ -39,13 +39,13 @@ export default {
         },
         p: null,
         buttons: {
-          proto: Block,
+          extend: Block,
           props: {
             flexAlign: 'center space-between',
             gap: 'Y'
           },
-          childProto: {
-            proto: SquareButton,
+          childExtend: {
+            extend: SquareButton,
             props: { theme: 'quaternary', round: 'Y' },
             style: {
               padding: 0,
@@ -126,7 +126,7 @@ export default {
           {
             caption: { props: { text: 'UI Framework' } },
             element: {
-              proto: SelectTool,
+              extend: SelectField,
               title: {
                 props: { text: 'React' },
                 style: { color: 'white' }

package/src/pages/Account/index.js

@@ -1,41 +1,32 @@
 'use strict'
 
-import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectToolWithCaption, Grid, CheckButton } from '@symbo.ls/all'
-// import { account } from '../SignUp'
-
-import setUpProject from './setUpProject'
-
-import PageProto from '../PageProto'
-import { logout } from '@symbo.ls/auth'
+import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
 
 const sideBar = {
   tag: 'aside',
-  proto: Block,
   style: {
-    height: '100%',
-    borderRight: '1px solid rgba(255, 255, 255, .06)'
   },
   props: {
     flexFlow: 'column',
     flexAlign: 'flex-start space-between',
-    padding: '0 C 0 0'
+    padding: '0 C 0 0',
+    height: '100%',
+    style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
   },
   nav: {
-    proto: Block,
     props: {
       flexFlow: 'column',
       gap: 'A1'
     },
-    childProto: {
+    childExtend: {
       tag: 'a',
 
-      proto: [SquareButton, Link, ClickableItem],
+      extend: [SquareButton, Link, ClickableItem],
       props: {
         theme: 'quaternary',
         padding: 0,
         boxSize: 'B1 B1'
-      },
-      style: { padding: 0 }
+      }
     },
 
     personal: {
@@ -55,12 +46,9 @@ const sideBar = {
         display: 'block'
       },
       image: {
-        proto: Img,
-        attr: {
-          // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
-          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
-        },
-        style: {
+        extend: Img,
+        props: {
+          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
           width: '100%',
           height: '100%',
           borderRadius: '100%'
@@ -90,15 +78,14 @@ const sideBar = {
 
   nav2: {
     tag: 'nav',
-    proto: Block,
     props: {
       flexFlow: 'column',
       gap: 'A1'
     },
 
     style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
-    childProto: {
-      proto: [SquareButton, Link],
+    childExtend: {
+      extend: [SquareButton, Link],
       props: {
         theme: 'quaternary',
         padding: 0,
@@ -109,133 +96,16 @@ const sideBar = {
 
     info: { props: { icon: 'info' } },
     logout: {
-      props: { icon: 'upload' },
-
-      on: {
-        click: (ev, el, s) => {
-          logout()
-        }
-      }
+      props: { icon: 'logout', href: '/logout' }
     }
   }
 }
 
-const fillFields = {
-  proto: [Block, Grid],
-  props: {
-    columns: 'repeat(2, 1fr)',
-    columnGap: 'C',
-    rowGap: 'C2'
-  },
-  childProto: {
-    proto: SelectToolWithCaption,
-    style: {
-      '> input': { width: '270x', minWidth: '270px', height: '42px' }
-    },
-    caption: {},
-    element: {
-      style: {
-        minWidth: `${270 / 16}em`,
-        height: `${42 / 16}em`
-      },
-      buttons: { ...[{ props: { theme: 'transparent' } }] }
-    }
-  },
-  ...[
-    {
-      caption: { props: { text: 'Your Username' } },
-      element: {
-        tag: 'input',
-        attr: {
-          value: 'nikoloza'
-        }
-      }
-    },
-    {
-      caption: { props: { text: 'Your role' } },
-      element: {
-        title: { props: { text: 'Design' } }
-      }
-    },
-    {
-      caption: { props: { text: 'Country and region' } },
-      element: {
-        props: { gap: 'W' },
-        title: {
-          props: { text: 'Georgia' },
-
-          style: {
-            '&::before': {
-              content: '"🇬🇪"'
-            }
-          }
-        }
-      }
-    },
-
-    {
-      caption: { props: { text: 'Time-zone' } },
-      element: {
-        props: { gap: 'W' },
-        title: {
-          props: { text: 'Tbilisi(GMT+4)' }
-        }
-      }
-    }
-  ]
-}
-
-const personalAccount = {
-  proto: Block,
-  props: {
-    // padding: '0 0 0 E',
-    flexFlow: 'column',
-    flexAlign: 'flex-start flex-start',
-    gap: 'C2'
-  },
-  caption: {
-    proto: [Text, Block],
-    props: {
-      text: 'Your personal account'
-    }
-  },
-
-  fields: {
-    proto: { fillFields }
-  },
-  button: {
-    proto: CheckButton,
-    props: {
-      text: 'Save Updates'
-    },
-    style: {
-      background: '#0079FD',
-      '> svg': { color: 'white' },
-      '&:hover': { background: '#0079FD' }
-    }
-  }
-}
-
-export default {
-  proto: PageProto,
-  props: {
-    flexAlign: 'flex-start flex-start',
-    padding: 'C1 0 D1 0',
-    gap: 'E'
-  },
-  define: { routes: param => param },
-  state: {
-    activeTab: 'personal'
-  },
-
+export const Account = {
   sideBar,
+  on: {
+    render: element => {
 
-  routes: {
-    personal: personalAccount,
-    project: setUpProject
-  },
-
-  page: {
-    content: (el, s) => ({ proto: el.parent.routes[s.activeTab] })
+    }
   }
 }

package/src/pages/Color/globalThemes.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import { GlobalThemeTemplate, Flex, SectionHeader, Link, ClickableItem } from '@symbo.ls/components'
+
+export default {
+  header: {
+    extend: SectionHeader,
+    state: {
+      title: 'Global Themes',
+      p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
+    }
+  },
+
+  modes: {
+    extend: Flex,
+    props: { gap: 'A' },
+
+    childExtend: [GlobalThemeTemplate, ClickableItem, Link],
+
+    $setStateCollection: () => [{
+      title: 'Light',
+      key: 'light',
+      icon: 'sun'
+    }, {
+      title: 'Dark',
+      key: 'dark',
+      icon: 'moon'
+    }]
+  }
+}

package/src/pages/Color/index.js

@@ -1,20 +1,17 @@
 'use strict'
 
-import style from './style'
-
-import { PageProto } from '..'
-
-import palette from './colors'
-import documentThemes from './documentThemes'
+import globalThemes from './globalThemes'
+import palette from './palette'
 import themes from './themes'
 
-export default {
-  style,
+export const Color = {
   key: 'colors',
 
-  proto: [PageProto],
+  props: { gap: 'A' },
 
-  documentThemes,
+  globalThemes,
+  Line: {},
   palette,
+  Line_2: {},
   themes
 }

package/src/pages/Color/palette.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import { SectionHeader, ColorTemplate, Flex } from '@symbo.ls/components'
+
+const mapColors = (el, s) => {
+  if (!s.__system) return
+  const { COLOR } = s.__system
+  const colorKeys = Object.keys(COLOR)
+  return colorKeys.map(v => ({ key: v, value: COLOR[v] }))
+}
+
+export default {
+  header: {
+    extend: SectionHeader,
+    state: {
+      title: 'Color Palette',
+      p: 'Document styling and theming',
+      nav: [{
+        icon: 'plus',
+        href: '/colors/add-color'
+      }]
+    }
+  },
+
+  content: {
+    extend: Flex,
+    props: {
+      flow: 'row wrap',
+      gap: 'Z2'
+    },
+
+    childExtend: ColorTemplate,
+    $setStateCollection: mapColors
+  }
+}