npm - @symbo.ls/preview - Versions diffs - 0.0.9 - Mend

@symbo.ls/preview 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/.babelrc.js +5 -0
package/.coveralls.yml +1 -0
package/.eslintignore +1 -0
package/.eslintrc.js +15 -0
package/.prettierrc +4 -0
package/.symbols/button-archived/index.js +63 -0
package/.symbols/button-archived/style.js +5 -0
package/.symbols/button-circle/index.js +62 -0
package/.symbols/button-contacts/index.js +48 -0
package/.symbols/button-contacts/style.js +13 -0
package/.symbols/button-download/index.js +59 -0
package/.symbols/button-pro/index.js +98 -0
package/.symbols/button-pro/style.js +19 -0
package/.symbols/button-theme-switcher/index.js +104 -0
package/.symbols/button-theme-switcher/style.js +16 -0
package/.symbols/button-user/index.js +82 -0
package/.symbols/button-user/style.js +25 -0
package/.symbols/categories.js +44 -0
package/.symbols/datepicker/index.js +40 -0
package/.symbols/datepicker/style.js +4 -0
package/.symbols/dropdown-list/index.js +56 -0
package/.symbols/field/index.js +40 -0
package/.symbols/index.js +33 -0
package/.symbols/label/index.js +40 -0
package/.symbols/notification/index.js +49 -0
package/.symbols/notification/style.js +5 -0
package/.symbols/pills/index.js +37 -0
package/.symbols/tooltip/index.js +38 -0
package/.vscode/settings.json +3 -0
package/README.md +19 -0
package/app.webmanifest +4 -0
package/index.html +22 -0
package/package.json +48 -0
package/protect-pwd.js +65 -0
package/src/animations.js +71 -0
package/src/app.js +79 -0
package/src/assets/dots.png +0 -0
package/src/assets/dotsDark.png +0 -0
package/src/assets/fonts/FiraGO/FiraGO-Bold.woff2 +0 -0
package/src/assets/fonts/FiraGO/FiraGO-Light.woff2 +0 -0
package/src/assets/fonts/FiraGO/FiraGO-Medium.woff2 +0 -0
package/src/assets/fonts/FiraGO/FiraGO-Regular.woff2 +0 -0
package/src/assets/fonts/europa-bold-webfont.woff2 +0 -0
package/src/assets/fonts/europa-bolditalic-webfont.woff2 +0 -0
package/src/assets/fonts/europa-light-webfont.woff2 +0 -0
package/src/assets/fonts/europa-lightitalic-webfont.woff2 +0 -0
package/src/assets/fonts/europa-regular-webfont.woff2 +0 -0
package/src/assets/fonts/europa-regularitalic-webfont.woff2 +0 -0
package/src/assets/ovalCircle.svg +9 -0
package/src/components/Header.js +21 -0
package/src/components/index.js +3 -0
package/src/config/color.js +8 -0
package/src/config/font.js +0 -0
package/src/config/index.js +19 -0
package/src/config/theme.js +85 -0
package/src/dev.html +19 -0
package/src/index.js +33 -0
package/src/pages/Account/index.js +241 -0
package/src/pages/Account/setUpProject.js +142 -0
package/src/pages/Color/colors.js +58 -0
package/src/pages/Color/documentThemes.js +101 -0
package/src/pages/Color/index.js +20 -0
package/src/pages/Color/style.js +7 -0
package/src/pages/Color/themes.js +131 -0
package/src/pages/ColorEditor/colorTone.js +163 -0
package/src/pages/ColorEditor/friendTheme.js +30 -0
package/src/pages/ColorEditor/index.js +178 -0
package/src/pages/ColorEditor/interactivity.js +116 -0
package/src/pages/ColorEditor/ntc.js +1689 -0
package/src/pages/ColorEditor/style.js +49 -0
package/src/pages/ColorEditor/themingTools.js +107 -0
package/src/pages/Components/grid.js +94 -0
package/src/pages/Components/index.js +40 -0
package/src/pages/Components/sidebar.js +23 -0
package/src/pages/Components/style.js +16 -0
package/src/pages/DesignSystem/index.js +106 -0
package/src/pages/DesignSystem/style.js +1 -0
package/src/pages/Editor/index.js +46 -0
package/src/pages/Editor/layers.js +126 -0
package/src/pages/Editor/scene.js +97 -0
package/src/pages/Editor/style.js +13 -0
package/src/pages/Editor/tools.js +360 -0
package/src/pages/Export/_tools_old.js +49 -0
package/src/pages/Export/const.js +18 -0
package/src/pages/Export/description.js +56 -0
package/src/pages/Export/index.js +74 -0
package/src/pages/Export/scene.js +62 -0
package/src/pages/Export/state.js +21 -0
package/src/pages/Export/style.js +21 -0
package/src/pages/Export/tools.js +14 -0
package/src/pages/Icons/index.js +72 -0
package/src/pages/Icons/style.js +1 -0
package/src/pages/Library/index.js +32 -0
package/src/pages/Library/style.js +36 -0
package/src/pages/PageExtend.js +12 -0
package/src/pages/Shapes/index.js +161 -0
package/src/pages/Shapes/style.js +28 -0
package/src/pages/Spaces/boxModel.js +3 -0
package/src/pages/Spaces/index.js +58 -0
package/src/pages/Spaces/preview.js +133 -0
package/src/pages/Spaces/sequence.js +3 -0
package/src/pages/Spaces/state.js +18 -0
package/src/pages/Spaces/style.js +30 -0
package/src/pages/Typography/docFonts.js +128 -0
package/src/pages/Typography/docStyles.js +97 -0
package/src/pages/Typography/index.js +52 -0
package/src/pages/Typography/shared.js +10 -0
package/src/pages/Typography/state.js +15 -0
package/src/pages/Typography/style.js +11 -0
package/src/pages/Typography/typeScale.js +104 -0
package/src/pages/index.js +13 -0
package/src/protect.js +114 -0
package/src/state.js +7 -0
package/src/style.js +7 -0
package/src/test.js +30 -0
package/svgSprite.config.js +7 -0
package/test/index.test.js +5 -0

package/src/assets/fonts/europa-regular-webfont.woff2 ADDED Viewed

Binary file

package/src/assets/fonts/europa-regularitalic-webfont.woff2 ADDED Viewed

Binary file

package/src/assets/ovalCircle.svg ADDED Viewed

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>background</title>
+    <g id="Shapes" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Layout-/-search-Copy-2" transform="translate(-108.000000, -692.000000)" fill="#343434">
+            <path d="M128.953339,692 C136.09022,692 142.88754,693.896232 146.769521,699.700559 C149.021728,702.985154 150,708.965227 150,713.663937 C150,719.129426 146.368619,723.297044 143.147153,727.241113 C139.362853,731.875632 135.358188,734 128.953339,734 C122.595297,734 118.147575,732.011998 114.203089,727.241113 C111.092387,723.479398 108,719.177968 108,713.663937 C108,708.660879 111.44532,702.199107 114.203089,698.395557 C117.970817,693.19769 122.107179,692 128.953339,692 Z" id="background"></path>
+        </g>
+    </g>
+</svg>

package/src/components/Header.js ADDED Viewed

@@ -0,0 +1,21 @@
+'use strict'
+import { HeaderOfMember } from '@symbo.ls/components'
+export const Header = {
+  style: {
+    position: 'sticky',
+    width: '100%',
+    top: 0,
+    zIndex: 1
+  },
+  define: { isFloating: param => param },
+  content: {
+    extend: HeaderOfMember,
+    props: {
+      maxWidth: '100%'
+    }
+  }
+}

package/src/components/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+'use strict'
+export * from './Header'

package/src/config/color.js ADDED Viewed

@@ -0,0 +1,8 @@
+'use strict'
+export const EDITOR_COLORS = {
+  modalBackground: '#141414',
+  modalFade: '#0E0E0E',
+  shapeColor: '#343434',
+  darkPurple: '#1c172a'
+}

package/src/config/font.js ADDED Viewed

File without changes

package/src/config/index.js ADDED Viewed

@@ -0,0 +1,19 @@
+'use strict'
+import { init } from '@symbo.ls/components'
+import { EDITOR_COLORS } from './color'
+import { COMPONENT_THEMES, EDITOR_THEMES } from './theme'
+const PREVIEW_CONF = {
+  color: {
+    blue2: '#4676EC',
+    ...EDITOR_COLORS
+  },
+  theme: {
+    ...EDITOR_THEMES,
+    ...COMPONENT_THEMES
+  }
+}
+init({ verbose: false, ...PREVIEW_CONF })

package/src/config/theme.js ADDED Viewed

@@ -0,0 +1,85 @@
+'use strict'
+import dots from '../assets/dots.png'
+import dotsDark from '../assets/dotsDark.png'
+const MODAL = {
+  modalFade: {
+    color: 'white',
+    backdropFilter: 'blur(3px)',
+    backgroundColor: 'modalFade 0.75'
+  },
+  modalBackground: {
+    color: 'white',
+    backgroundColor: 'modalBackground'
+  }
+}
+const SCENE = {
+  darkScene: {
+    backgroundColor: 'white 0.02',
+    '> div': { backgroundImage: `url(${dots})` }
+  },
+  lightScene: {
+    backgroundColor: 'white',
+    '> div': { backgroundImage: `url(${dotsDark})` }
+  }
+}
+const DROPDOWN = {
+  dropdownItem: {
+    color: 'white 0.65',
+    state: {
+      hover: {
+        color: 'white',
+        background: 'gradient-light-active'
+      },
+      active: {
+        color: 'white',
+        background: 'gradient-light-active'
+      }
+    }
+  },
+  dropdownItemActive: {
+    color: 'white',
+    background: 'gradient-light-active'
+  }
+}
+export const EDITOR_THEMES = {
+  header: {
+    color: 'white',
+    backgroundColor: 'black 0.85',
+    borderColor: 'white 0.09',
+    backdropFilter: 'blur(3px)'
+  },
+  shape: {
+    background: 'shapeColor',
+    border: 'none'
+  },
+  ...MODAL,
+  ...SCENE,
+  ...DROPDOWN
+}
+export const COMPONENT_THEMES = {
+  lightDark: {
+    background: 'white',
+    color: 'darkPurple',
+    variants: {
+      inverse: true
+    }
+  },
+  alert: {
+    background: 'yellow',
+    color: 'black'
+  },
+  label: {
+    background: 'brown',
+    color: 'white'
+  }
+}

package/src/dev.html ADDED Viewed

@@ -0,0 +1,19 @@
+<html background="#000">
+<head>
+  <title>Symbols Editor</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta charset="UTF-8">
+  <meta name="author" content="SymbolsApp">
+  <meta name="keywords" content="UIkit, Design System, Platform, Javascript, CSS, Less, Sass, Component, React, Angular, Vue, Svelte, HTML, Haml, Jade, Bootstrap, Semantic UI, Material, ">
+  <meta name="description" content="Introducing a highly customizable UI kit to decorate your app from scratch. Our space shares all the tools and supplies to design desired components. ">
+  <link rel="manifest" href="../app.webmanifest" crossorigin="use-credentials">
+</head>
+<body background="#000">
+  <style type="text/css">body {background: #000;}</style>
+  <script src="./index.js"></script>
+</body>
+</html>

package/src/index.js ADDED Viewed

@@ -0,0 +1,33 @@
+'use strict'
+import './config'
+import DOM from 'domql'
+import SYMBOLS_CONF from '@symbo.ls/config'
+import style from './style'
+import * as smbls from '@symbo.ls/components'
+import App from './app'
+import { Header } from './components'
+import { Library } from './pages'
+smbls.init({ verbose: false, ...SYMBOLS_CONF })
+DOM.define({
+  __filepath: param => param,
+  $setCollection: smbls.Collection.define.$setCollection
+})
+// export default DOM.create(App, DevFocus, 'app', { TODO: try this
+export default DOM.create({
+  extend: App,
+  style,
+  Header,
+  routes: {
+    '/': Library
+  }
+}, undefined, 'app', {
+  extend: [smbls.Box],
+  components: { ...smbls }
+})

package/src/pages/Account/index.js ADDED Viewed

@@ -0,0 +1,241 @@
+'use strict'
+import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectToolWithCaption, Grid, CheckButton } from '@symbo.ls/components'
+// import { account } from '../SignUp'
+import setUpProject from './setUpProject'
+import PageExtend from '../PageExtend'
+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: 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 = {
+  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 default {
+  extend: PageExtend,
+  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 ADDED Viewed

@@ -0,0 +1,142 @@
+'use strict'
+import { Text, Block, Img, SquareButton, SelectTool } from '@symbo.ls/components'
+import { SetUp } from '..'
+export default {
+  caption: {
+    extend: [Block, Text],
+    props: {
+      text: 'Settings for Rockstar',
+      padding: '0 0 C2 0'
+    }
+  },
+  content: {
+    extend: SetUp,
+    style: { padding: 0 },
+    upload: {
+      caption: {},
+      content: {
+        extend: Block,
+        props: {
+          flexFlow: 'column',
+          gap: 'A'
+        },
+        style: { padding: `${17 / 16}em ${28 / 16}em ${10 / 16}em ${28 / 16}em` },
+        input: {},
+        icon: {
+          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: '42px',
+            height: '42px',
+            borderRadius: '100%',
+            opacity: 1
+          }
+        },
+        p: null,
+        buttons: {
+          extend: Block,
+          props: {
+            flexAlign: 'center space-between',
+            gap: 'Y'
+          },
+          childExtend: {
+            extend: SquareButton,
+            props: { theme: 'quaternary', round: 'Y' },
+            style: {
+              padding: 0,
+              width: `${24 / 16}em`,
+              height: `${24 / 16}em`
+            }
+          },
+          ...[
+            { props: { icon: 'info' } },
+            { props: { icon: 'trash' } }
+          ]
+        }
+      }
+    },
+    proj: {
+      fields: {
+        ...[
+          {
+            caption: {},
+            element: {
+              props: {
+                placeholder: null,
+                value: 'Rockstar, Inc'
+              }
+            }
+          },
+          {
+            caption: { props: { text: 'Project ID' } },
+            element: {
+              props: {
+                placeholder: null,
+                value: 'rockstarq'
+              }
+            }
+          },
+          {
+            style: { gridColumnEnd: 'span 1' },
+            caption: {},
+            element: {
+              title: { props: { text: 'Password protected' } }
+            }
+          },
+          {
+            caption: { style: { opacity: 0, color: 'black' } },
+            element: {
+              title: {
+                tag: 'input',
+                style: {
+                  border: 'none',
+                  outline: 'none',
+                  background: 'transparent',
+                  color: 'white'
+                },
+                attr: {
+                  type: 'password'
+                }
+              },
+              buttons: {
+                ...[{ props: { icon: 'colorblindAltOutline', theme: 'quaternary' } }]
+              }
+            }
+          },
+          {
+            caption: { props: { text: 'Design tool' } },
+            element: {
+              title: {
+                props: { text: 'Figma' },
+                style: { color: 'white' }
+              }
+            }
+          },
+          {
+            caption: { props: { text: 'UI Framework' } },
+            element: {
+              extend: SelectTool,
+              title: {
+                props: { text: 'React' },
+                style: { color: 'white' }
+              },
+              buttons: { ...[{ props: { theme: 'transparent' } }] }
+            }
+          }
+        ]
+      }
+    }
+  }
+}

package/src/pages/Color/colors.js ADDED Viewed

@@ -0,0 +1,58 @@
+'use strict'
+import { Button, SectionHeader, ColorTemplate } from '@symbo.ls/components'
+export default {
+  tag: 'section',
+  header: {
+    extend: SectionHeader,
+    props: { padding: 'C 0 0 0' },
+    heading: {
+      caption: 'Color Palette',
+      p: { text: 'Document styling and theming' }
+    }
+  },
+  nav: {
+    style: {
+      display: 'flex',
+      gap: '1.2em',
+      alignItems: 'center'
+    },
+    colors: {
+      style: {
+        display: 'flex',
+        gap: '12px'
+      },
+      content: (el, s) => {
+        if (!el.__root.state.CONFIG) return
+        const { COLOR } = el.__root.state.CONFIG
+        const Colors = {}
+        Object.keys(COLOR).map(v => {
+          Colors[v] = { state: COLOR[v] }
+        })
+        return {
+          childExtend: ColorTemplate,
+          tag: 'fragment',
+          ...Colors
+        }
+      }
+    },
+    plus: {
+      extend: Button,
+      props: {
+        round: 8,
+        icon: 'plus'
+      },
+      style: {
+        height: `26px`,
+        width: `26px`,
+        background: 'rgba(255, 255, 255, .06)',
+        color: 'white'
+      }
+    }
+  }
+}