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/pages/Color/documentThemes.js ADDED Viewed

@@ -0,0 +1,101 @@
+'use strict'
+import { Notification, Flex, ClickableItem, SectionHeader, Shape, Block, IconText, Link } from '@symbo.ls/components'
+// import { SectionHeader } from 'components/Header'
+export default {
+  tag: 'section',
+  header: {
+    extend: SectionHeader,
+    props: { padding: 'C 0 0 0' },
+    heading: {
+      caption: 'Document',
+      p: { text: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling' }
+    }
+  },
+  mode: {
+    extend: Flex,
+    tag: 'nav',
+    style: {
+      gap: 16
+    },
+    childExtend: {
+      extend: [Notification, ClickableItem, Link],
+      style: {
+        opacity: '.5',
+        textDecoration: 'none'
+      },
+      props: {
+        gap: 'Z',
+        round: 'Z',
+        padding: 'Z1 D2 A A1',
+        href: '/colors/documentThemes/addit-theme'
+      },
+      icon: {
+        extend: [Shape, Block, IconText],
+        props: {
+          size: 'Z',
+          padding: 'Z',
+          round: 'Z'
+        }
+      },
+      article: {
+        props: { gap: 'X' },
+        caption: {
+          style: { fontWeight: 'bold' },
+          props: { size: 'B' }
+        },
+        p: {
+          props: { size: 'Y' },
+          style: { '> span': { fontWeight: 'bold' } }
+        }
+      }
+    },
+    ...[
+      {
+        props: el => {
+          if (!el.__root.state.CONFIG) return
+          const { THEME } = el.__root.state.CONFIG
+          return { theme: THEME.document.value }
+        },
+        icon: {
+          props: { theme: 'lightMode', icon: 'sun' }
+        },
+        article: {
+          caption: { text: 'Light' },
+          p: {
+            text: 'prefers-color-scheme:',
+            span: ' Light'
+          }
+        }
+      }, {
+        if: el => {
+          if (!el.__root.state.CONFIG) return
+          const { THEME } = el.__root.state.CONFIG
+          return THEME.document.variants && THEME.document.variants.dark
+        },
+        props: el => {
+          if (!el.__root.state.CONFIG) return
+          const { THEME } = el.__root.state.CONFIG
+          return { theme: THEME.document.value }
+        },
+        style: { color: 'white' },
+        icon: {
+          props: { theme: 'darkMode', icon: 'moon' }
+        },
+        article: {
+          caption: { text: 'Dark' },
+          p: {
+            text: 'prefers-color-scheme:',
+            span: ' Dark'
+          }
+        }
+      }
+    ]
+  }
+}

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

@@ -0,0 +1,20 @@
+'use strict'
+import style from './style'
+import { PageExtend } from '..'
+import palette from './colors'
+import documentThemes from './documentThemes'
+import themes from './themes'
+export const Color = {
+  style,
+  key: 'colors',
+  extend: [PageExtend],
+  documentThemes,
+  palette,
+  themes
+}

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

@@ -0,0 +1,7 @@
+'use strict'
+export default {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '68px',
+}

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

@@ -0,0 +1,131 @@
+'use strict'
+import { COLOR, opacify } from '@symbo.ls/scratch'
+import { Block, IconText, Link, Shape, Text, Flex, SectionHeader } from '@symbo.ls/components'
+const style = {
+  width: '100%',
+  maxWidth: '25%',
+  flex: '.25 .3333 25%',
+  cursor: 'pointer',
+  color: 'white',
+  textDecoration: 'none',
+  boxSizing: 'border-box',
+  caption: {
+    marginTop: `${12 / 13}em`
+  },
+  '> *': {
+    transition: '350ms',
+    transitionProperty: 'opacity, transform',
+    opacity: 0.35
+  },
+  '&:hover > *': {
+    opacity: 1,
+    transform: 'scale(1.015)'
+  }
+}
+export const ThemeTemplate = {
+  extend: [Link, Block],
+  style,
+  props: (el) => ({
+    href: `/theme/${el.key}`,
+    padding: 'A Z1'
+  }),
+  theme: {
+    colors: {
+      extend: [Block, Text, Shape, Flex],
+      props: {
+        round: 'Z1'
+      },
+      style: {
+        boxShadow: `${COLOR.blue && opacify(COLOR.blue.value, 0.2)} 0 2px 35px`,
+        overflow: 'hidden',
+        div: {
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center'
+        }
+      },
+      _icon: '',
+      sun: {
+        extend: [Shape, Block, IconText, Flex],
+        props: {
+          icon: 'sun',
+          size: 'Z',
+          padding: 'Z1 0 Z1 A',
+          round: 'Z1 0 0 Z1'
+        },
+        style: (element, state) => ({
+          background: state.background,
+          color: state.color,
+          borderBottomLeftRadius: '12px',
+          '&:only-child': {
+            borderRadius: 12
+          }
+        })
+      },
+      moon: {
+        if: (el, state) => state.themes,
+        extend: [Shape, Block, IconText, Flex],
+        props: {
+          theme: 'secondary',
+          padding: 'Z1 0 Z1 A',
+          icon: 'moon',
+          round: '0 Z1 Z1 0'
+        },
+        style: (element, state) => ({
+          background: '', // state.themes.dark.backgroundColor,
+          color: '' // state.themes.dark.color
+        })
+      }
+    }
+  },
+  caption: {
+    extend: [Block, Text],
+    props: {
+      size: 'Y',
+      padding: 'Z 0 0 0'
+    },
+    text: (el, state) => el.parent.key
+  }
+}
+export default {
+  tag: 'section',
+  header: {
+    extend: SectionHeader,
+    props: { padding: 'C 0 0 0' },
+    heading: {
+      caption: 'Theme',
+      p: { text: 'Themes are used to prepare color setting abstractly and apply it to any component' }
+    }
+  },
+  colors: {
+    style: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      margin: '0 -16px'
+    },
+    content: (el, s) => {
+      if (!el.__root.state.CONFIG) return
+      const { THEME } = el.__root.state.CONFIG
+      const Themes = {}
+      Object.keys(THEME).map(v => (Themes[v] = { state: THEME[v].value }))
+      return {
+        childExtend: ThemeTemplate,
+        tag: 'fragment',
+        ...Themes
+      }
+    }
+  }
+}

package/src/pages/ColorEditor/colorTone.js ADDED Viewed

@@ -0,0 +1,163 @@
+'use strict'
+import { Block, Text, opacify, Shape, Grid, Overflow } from '@symbo.ls/components'
+const classOpacify = (el, opacity) => {
+  if (!el.state.value) return
+  const { background, backgroundColor, color } = el.state.value
+  const bg = background || backgroundColor || color
+  if (!bg) return
+  return { background: opacify(bg, opacity) }
+}
+const TONES_AMOUNT = 13
+const TONES_ARR = new Array(TONES_AMOUNT).fill(0).map((_, i) => i)
+export const Tones = {
+  extend: [Shape, Block, Grid, Overflow],
+  props: {
+    columns: `repeat(${TONES_AMOUNT}, 1fr)`,
+    height: 'B',
+    round: 'Z'
+  },
+  childExtend: {
+    tag: 'span',
+    extend: Shape,
+    props: { round: 0 },
+    class: {
+      transition: {
+        transition: '165ms cubic-bezier(.29,.67,.51,.97)',
+        transitionProperty: 'color, background'
+      }
+    }
+  },
+  ...TONES_ARR.map(v => ({
+    class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
+  }))
+}
+export const colorTones = {
+  tag: 'aside',
+  // extend: Block,
+  // style: styleColorTones,
+  props: { flexFlow: 'column' },
+  span: {
+    extend: [Text, Block],
+    props: {
+      text: 'Preview',
+      size: 'Z'
+    },
+    style: {
+      display: 'block',
+      marginBottom: '8px',
+      opacity: '.65'
+    }
+  },
+  preview: {
+    extend: [Shape, Block],
+    style: {
+      background: 'rgba(255, 255, 255, .06)',
+      '&, & *': { transition: '165ms cubic-bezier(.29,.67,.51,.97)', transitionProperty: 'color, background' }
+    },
+    props: (el, s) => ({
+      padding: 'X1',
+      round: 'Z2',
+      theme: `${s.sceneTheme || 'dark'}Scene`
+    }),
+    scene: {
+      extend: [Block],
+      props: { padding: 'A' },
+      style: {
+        boxSizing: 'border-box',
+        backgroundPosition: `center`,
+        backgroundRepeat: `repeat`,
+        backgroundSize: '100px 100px'
+      },
+      circle: {
+        extend: [Block, Shape],
+        props: (el, s) => ({
+          theme: s.value,
+          flexFlow: 'column',
+          flexAlign: 'center center',
+          width: 'G',
+          aspectRatio: '1 / 1',
+          round: '100%'
+        }),
+        style: { position: 'relative', borderWidth: '1px', borderStyle: 'solid' },
+        h6: {
+          extend: Text,
+          style: { fontSize: `${26 / 16}em`, fontWeight: 'Bold' },
+          span: {
+            text: 'The',
+            style: {
+              fontWeight: 'normal',
+              marginRight: '6px'
+            }
+          },
+          text: 'Text Color'
+        },
+        span: {
+          extend: Text,
+          props: { text: (el, s) => s.value },
+          style: {
+            position: 'absolute',
+            top: '86%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            fontWeight: '600'
+          }
+        }
+      }
+    }
+  },
+  opacity: {
+    extend: Block,
+    props: {
+      padding: 'B1 0 0 0'
+    },
+    caption: {
+      extend: [Text, Block],
+      props: {
+        text: 'Opacity',
+        size: 'Z',
+        padding: '0 0 Z1 0'
+      },
+      style: { opacity: '.65' }
+    },
+    tones: { extend: Tones }
+  },
+  shades: {
+    extend: [Block],
+    props: { padding: 'B 0 0 0' },
+    caption: {
+      extend: [Text, Block],
+      props: {
+        text: 'Shades',
+        size: 'Z',
+        padding: '0 0 Z1 0'
+      },
+      style: { opacity: '.65' }
+    },
+    generate: {
+      extend: [Block, Shape, Overflow],
+      props: { flexFlow: 'column', round: 'Z', gap: '2px' },
+      childExtend: {
+        extend: [Tones],
+        props: { round: 'X' },
+        ...TONES_ARR.map(v => ({
+          class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
+        }))
+      },
+      dark: {},
+      light: {
+        props: { theme: 'lightScene' }
+      }
+    }
+  }
+}

package/src/pages/ColorEditor/friendTheme.js ADDED Viewed

@@ -0,0 +1,30 @@
+'use strict'
+import { CommonField, SelectTool } from '@symbo.ls/components'
+export const friendTheme = {
+  extend: CommonField,
+  style: { paddingBlock: 0 },
+  caption: {
+    tag: 'h6',
+    props: { text: 'Friend themes', size: 'B' },
+    style: { opacity: 1, fontWeight: 'normal', margin: 0 }
+  },
+  element: {
+    extend: SelectTool,
+    style: {
+      background: 'transparent',
+      paddingLeft: 0,
+      '&:hover': { background: 'transparent' }
+    },
+    title: null,
+    buttons: {
+      ...[
+        {
+          props: { icon: 'plus' },
+          style: { padding: `${10 / 16}em` }
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,178 @@
+'use strict'
+import { Block, Text, Button, Flex, SectionHeader, AccessibilityCheck, SceneThemingBar } from '@symbo.ls/components'
+import { PageExtend } from '..'
+import { colorTones } from './colorTone'
+import { themingTools } from './themingTools'
+import { interactivity } from './interactivity'
+import { friendTheme } from './friendTheme'
+import style, { styleLabel } from './style'
+// import ntc from './ntc'
+// const returnColor = element => element.lookup('ColorEditor').state.color
+// const setBackground = (element, opacity = 1) => `background: ${opacify(returnColor(element), opacity)}`
+const nameTheTheme = {
+  tag: 'label',
+  style: styleLabel,
+  attr: { for: 'name-it' },
+  caption: {
+    extend: [Block, Text],
+    props: {
+      text: 'Name the theme',
+      padding: '0 0 Y1 0',
+      size: 'Z'
+    }
+  },
+  span: {
+    tag: 'span',
+    extend: Text,
+    props: {
+      text: (el, s) => s.value,
+      size: 'E'
+    },
+    attr: { contentEditable: true, placeholder: 'you name it', id: 'name-it' }
+  }
+}
+const footer = { //eslint-disable-line
+  extend: [Flex, Block],
+  props: {
+    height: 'C2',
+    padding: '0 A'
+  },
+  style: {
+    margin: 'auto -80px 0',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  nav: {
+    extend: [Flex, Block],
+    props: { gap: 'A' },
+    childExtend: {
+      extend: [Button, Text],
+      props: {
+        size: 'Z',
+        width: 'B2',
+        height: 'B2',
+        theme: 'transparent'
+      }
+    },
+    ...[
+      { props: { icon: 'starOutline' } },
+      { props: { icon: 'copyOutline' } },
+      { props: { icon: 'share' } }
+    ]
+  },
+  span: {
+    extend: Text,
+    props: {
+      text: 'Autosaved 1 second ago',
+      size: 'Y'
+    },
+    style: { opacity: '.35' }
+  },
+  export: {
+    extend: Flex,
+    style: {
+      alignItems: 'center'
+    },
+    span: {
+      extend: [Text, Block],
+      props: {
+        text: 'Export:',
+        size: 'Y',
+        padding: '0 B1 0 0'
+      },
+      style: { opacity: '.35' }
+    },
+    nav: {
+      extend: [Flex, Block],
+      props: { gap: 'Y2' },
+      childExtend: {
+        extend: [Button, Text],
+        props: {
+          size: 'Z',
+          width: 'B2',
+          height: 'B2',
+          theme: 'transparent'
+        },
+        style: {
+          color: 'white'
+        }
+      },
+      ...[
+        { props: { icon: 'themeOutline' } },
+        { props: { icon: 'sketch' } },
+        { props: { icon: 'arrowAngleMirroringHorizontal' } }
+      ]
+    }
+  }
+}
+export const ColorEditor = {
+  key: 'ColorEditor',
+  extend: PageExtend,
+  style,
+  state: {
+    sceneTheme: 'dark'
+  },
+  on: {
+    init: (el, s) => {
+      if (!el.__root || !el.__root.state.CONFIG) return
+      var route = window.location.pathname
+      var routes = route.slice(1).split('/')
+      var param = routes[1]
+      const { THEME } = el.__root.state.CONFIG
+      var content = THEME[`${param}`].value
+      content.title = param
+      el.state.value = content
+    }
+  },
+  header: {
+    extend: SectionHeader,
+    props: {
+      padding: 'C 0 B2 0',
+      margin: '0'
+    },
+    heading: '',
+    label: nameTheTheme,
+    nav: { extend: SceneThemingBar }
+  },
+  cnt: {
+    extend: [Flex],
+    props: {
+      gap: 'D'
+    },
+    aside: colorTones,
+    colorEdit: {
+      extend: Block,
+      props: { gap: 'C2', flexFlow: 'column' },
+      themingTools,
+      interactivity,
+      friendTheme
+    }
+  },
+  check: {
+    extend: AccessibilityCheck,
+    props: {
+      padding: 'E 0 F'
+    }
+  }
+  // footer
+}