@symbo.ls/preview 2.0.7 → 2.6.0

package/{src/pages/Export → .legacy}/_tools_old.js

@@ -6,15 +6,15 @@ import {
   styleKangoroo
 } from './style'
 
-import { Button, Icon } from '@symbo.ls/all'
+import { Button, Icon } from '@symbo.ls/components'
 
 export const KangorooButton = {
   style: styleKangoroo,
   tag: 'button',
-  icon: { proto: Icon, name: 'sun' },
+  icon: { extend: Icon, name: 'sun' },
   text: 'light mode',
   button: {
-    icon: { proto: Icon, name: 'moon' },
+    icon: { extend: Icon, name: 'moon' },
     text: 'go dark'
   }
 }
@@ -22,13 +22,14 @@ export const KangorooButton = {
 export const ResponsiveToolBar = {
   tag: 'nav',
 
-  childProto: {
-    proto: Button,
+  childExtend: {
+    extend: Button,
     style: screenButton,
     define: { active: param => param },
     class: {
       active: (el, s) => el.key === s.previewSize
-        ? activeScreenButton : {}
+        ? activeScreenButton
+: {}
     },
     on: {
       click: (ev, el, s) => {

package/.legacy/index copy.js

@@ -0,0 +1,45 @@
+'use strict'
+
+import { SectionHeader } from '@symbo.ls/components'
+
+import preview from './preview'
+import sequence from './sequence'
+import boxModel from './boxModel'
+
+export const Spaces = {
+  key: 'spaces',
+
+  state: {
+    activePage: 'spaces',
+    activeTab: 'preview',
+
+    title: 'Spacing',
+    p: 'Unlike typography, component may has the properties of padding, gap, width and rest.'
+  },
+
+  define: { routes: param => param },
+
+  routes: {
+    preview,
+    sequence,
+    boxModel
+  },
+
+  on: {
+    init: (el, s) => {
+      var route = window.location.pathname
+      var routes = route.slice(1).split('/')
+      s.activeTab = routes[1] || s.activeTab
+    }
+  },
+
+  header: {
+    extend: SectionHeader
+  },
+
+  preview
+
+  // page: {
+  //   content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
+  // }
+}

package/{src/pages/Spaces → .legacy}/preview.js

@@ -2,10 +2,10 @@
 
 import { stylePreview, styleScene } from './style'
 
-import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, SliderToolWithCaption, SelectToolWithCaption } from '@symbo.ls/all'
+import { Block, Button, Flex, Text, ResponsiveToolBar, Scene, SequenceGraph, StaticSpacing, CommonField, RangeFieldWithCaption, SelectFieldWithCaption } from '@symbo.ls/components'
 
 const buttonDownload = {
-  proto: Button,
+  extend: Button,
   state: {},
   style: {
     svg: { marginRight: `${6 / 16}em` }
@@ -25,19 +25,19 @@ export default {
   cnt: {
     aside: {
       tag: 'aside',
-      proto: [ResponsiveToolBar, Flex]
+      extend: [ResponsiveToolBar, Flex]
     },
     nameSequence: {
       style: { marginRight: '5.6em' },
-      childProto: {
-        proto: CommonField
+      childExtend: {
+        extend: CommonField
       },
       ...[
         // {
         //   caption: { text: 'Name the sequence' },
         //   element: {
         //     tag: 'input',
-        //     proto: Shape,
+        //     extend: Shape,
         //     props: { theme: 'quaternary', round: 'Y1' },
         //     attr: (el, s) => ({
         //       autofocus: true
@@ -56,7 +56,7 @@ export default {
         // },
 
         {
-          proto: SelectToolWithCaption,
+          extend: SelectFieldWithCaption,
           style: { marginTop: `${26 / 16}em` },
           caption: { props: { text: 'Used for' } },
           element: {
@@ -73,10 +73,10 @@ export default {
     },
 
     baseSize: {
-      childProto: CommonField,
+      childExtend: CommonField,
       ...[
         {
-          proto: SliderToolWithCaption,
+          extend: RangeFieldWithCaption,
           caption: { text: 'Base size' },
           element: {
             button0: {},
@@ -87,13 +87,13 @@ export default {
           style: { marginTop: `${26 / 16}em` },
           caption: { text: 'Sequence ratio' },
           element: {
-            proto: StaticSpacing
+            extend: StaticSpacing
           }
         }
       ]
     },
     scene: {
-      proto: CommonField,
+      extend: CommonField,
       style: {
         flex: 1,
         marginLeft: `${110 / 16}em`
@@ -101,7 +101,7 @@ export default {
       caption: { text: 'Preview' },
       element: {
         style: styleScene,
-        proto: [Scene, Block],
+        extend: [Scene, Block],
         props: {
           width: 'H2',
           height: 'G'
@@ -115,7 +115,7 @@ export default {
 
   footer: {
     caption: {
-      proto: [Text, Block],
+      extend: [Text, Block],
       props: {
         size: 'Y',
         padding: '0 0 B 0'
@@ -123,7 +123,7 @@ export default {
       text: 'Sizing generated by this setting'
     },
     Sequence: {
-      proto: [SequenceGraph, Block, Text],
+      extend: [SequenceGraph, Block, Text],
       style: { alignItems: 'center' },
       props: {
         size: 'X'

package/{src/pages/Spaces → .legacy}/style.js

@@ -28,6 +28,3 @@ export const stylePreview = {
     }
   }
 }
-
-export default {
-}

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "GitHub.copilot"
+  ]
+}

package/index.html

@@ -1,22 +1,12 @@
 <html background="#000">
 <head>
-  <title>Symbols Editor</title>
+  <title>Symbols preview</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. ">
-
-  <meta name="apple-mobile-web-app-title" content="Symbols">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="default">
-
-  <link rel="manifest" href="./app.webmanifest" crossorigin="use-credentials">
 </head>
-<body>
-  <script src="./protect-pwd.js"></script>
+<body background="#000">
+  <script src="./index.js"></script>
 </body>
-</html>
+</html>

package/index.js

@@ -0,0 +1,44 @@
+'use strict'
+
+import '@symbo.ls/platform-init'
+
+import DOM from 'domql'
+import * as smbls from '@symbo.ls/components'
+
+import App from './src/app'
+import { router, lastLevel } from '@domql/router'
+import { platformOptions } from '@symbo.ls/platform-options'
+
+DOM.define({
+  routes: param => param,
+  __filepath: param => param,
+  $setCollection: smbls.Collection.define.$setCollection,
+  $setStateCollection: smbls.Collection.define.$setStateCollection
+})
+
+const app = DOM.create({
+  extend: App,
+
+  HeaderOnRouter: {},
+
+  on: {
+    render: (el, s) => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      router(el, url, {})
+    },
+
+    update: (el, s, changes) => {
+      smbls.openModal(el.parent, s)
+    }
+  }
+}, undefined, 'app', platformOptions)
+
+window.onpopstate = e => {
+  const { pathname, hash } = window.location
+  const url = pathname + hash
+  router(app, url, {}, {
+    level: lastLevel,
+    pushState: false
+  })
+}

package/package.json

@@ -2,45 +2,45 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "2.0.7",
-  "repository": "https://github.com/symbo-ls/preview",
-  "main": "src/index.js",
+  "version": "2.6.0",
+  "main": "src/app.js",
   "scripts": {
-    "prestart": "rm -rf .cache",
-    "start": "parcel src/index.html --no-cache",
-    "start:protected": "npm run prestart && yarn start",
-    "prebuild": "rm -rf dist",
-    "build": "parcel build index.html --no-cache",
-    "build:protected": "npm run prebuild && yarn build --no-source-maps --no-content-hash",
-    "reinstall": "rm yarn.lock && rm -rf node_modules/@rackai && yarn",
-    "test": "yarn standard && jest --coverage --coverageReporters=text-lcov | coveralls",
-    "test-watch": "jest --watch"
+    "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",
+    "clean": "rm -rf .cache dist",
+    "clean:modules": "rm -rf node_modules/**/node_modules/@symbo.ls node_modules/**/node_modules/@domql node_modules/**/node_modules/domql node_modules/**/node_modules/smbls",
+    "prestart": "yarn clean && yarn clean:modules",
+    "start": "parcel index.html --port 1200 --no-cache",
+    "prebuild": "rm -rf .cache dist",
+    "build": "parcel build index.html",
+    "reinstall": "rm -rf node_modules/@symbo.ls node_modules/@domql node_modules/domql node_modules/smbls dist yarn.lock .cache && yarn"
+  },
+  "targets": {
+    "main": {
+      "context": "browser",
+      "outputFormat": "commonjs",
+      "includeNodeModules": true
+    }
   },
   "dependencies": {
-    "@symbo.ls/all": "latest",
-    "@symbo.ls/auth": "latest",
-    "@symbo.ls/fetch": "latest",
-    "@symbo.ls/loader": "latest",
-    "domql-preview": "domql/domql"
+    "@domql/router": "latest",
+    "@domql/tags": "latest",
+    "@symbo.ls/components": "latest",
+    "@symbo.ls/icons": "latest",
+    "@symbo.ls/init": "latest",
+    "@symbo.ls/scratch": "latest",
+    "@symbo.ls/temp-db": "latest",
+    "@symbo.ls/utils": "latest"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@emotion/css": "^11.5.0",
-    "@babel/eslint-parser": "^7.5.4",
-    "coveralls": "^3.0.5",
-    "eslint": "^8.9.0",
-    "eslint-plugin-jest": "^22.14.1",
-    "jest": "^26.1.0",
-    "parcel-bundler": "^1.12.3",
+    "domql": "^1.5.35",
+    "@babel/core": "^7.11.5",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.1.0",
+    "parcel-bundler": "^1.12.4",
     "parcel-plugin-svg-sprite": "^1.4.1",
-    "standard": "^16.0.4"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.js"
-    ]
+    "standard": "^13.1.0"
   },
   "standard": {
-    "parser": "@babel/eslint-parser"
+    "parser": "babel-eslint"
   }
 }

package/src/app.js

@@ -2,89 +2,51 @@
 
 import './config'
 import style from './style'
-import state from './state'
 
-import 'domql-preview/packages/emotion'
-import router from 'domql-preview/packages/router'
-
-import { HeaderOfMember, Shape } from '@symbo.ls/all'
+import { Flex } from '@symbo.ls/components'
 
 import {
+  Init,
+  Components,
+  DesignSystem,
   Export,
   Library,
-  Color,
-  ColorEditor,
-  Shapes,
-  Spaces,
-  Icons,
-  Typography
+  State,
+  Account
 } from './pages'
 
-import { animateOnLoad, fadeIn } from './animations'
-
-const app = {
-  key: 'app',
-  style,
-
-  proto: Shape,
-
-  state,
-  props: {
-    theme: 'document'
-  },
-
-  class: {
-    animation: (el, s) => animateOnLoad(true, { name: fadeIn })
-  },
-
-  _header: {
-    style: {
-      position: 'sticky',
-      width: '100%',
-      top: 0,
-      zIndex: 1
-    },
-
-    define: { isFloating: param => param },
-
-    content: {
-      proto: HeaderOfMember,
-
-      nav: {
-        1: null
+const SUB_ROUTES = {}
+Object.keys(DesignSystem.routes).map(route => {
+  SUB_ROUTES[route] = {
+    extend: DesignSystem,
+    page: {
+      DesignSystemNavbar: {},
+      Page: {
+        extend: DesignSystem.routes[route]
       }
     }
-  },
+  }
+})
+
+const App = {
+  extend: Flex,
+  
+  props: style,
 
-  define: { routes: param => param },
   routes: {
+    '/init': Init,
+    '/account': Account,
     '/library': Library,
+    '/design-system': DesignSystem,
+    '/components': Components,
     '/component': Export,
-    '/colors': Color,
-    '/theme': ColorEditor,
-    '/shapes': Shapes,
-    '/spaces': Spaces,
-    '/icons': Icons,
-    '/typography': Typography
+    '/state': State,
+    ...SUB_ROUTES
   },
 
-  content: {
-    style: { position: 'relative' }
-  },
+  content: {},
 
-  on: {
-    render: (el, s) => router(el, window.location.pathname, {}),
-    scroll: (ev, el) => {
-      const { scrollTop } = el.node
-      const isFloating = scrollTop > 0
-      if (isFloating !== el.props.isFloating) {
-        el.props.isFloating = isFloating
-        // el._header.update()
-      }
-    }
-  }
+  Modal: {}
 }
 
-window.onpopstate = e => router(app, window.location.pathname, {}, 0, false)
-
-export default app
+export default App

package/src/components/Aside.js

@@ -0,0 +1,101 @@
+'use strict'
+
+import { Link, ClickableItem, TooltipParent } from '@symbo.ls/components'
+import { Flex, SquareButton } from 'smbls'
+
+const setTooltipPosition = (el, s, options = {}) => {
+  const key = parseInt(el.key)
+  const rowHeight = `(var(--spacing-C) + var(--spacing-B1) + ${key}%)`
+  const translateY = `calc(${rowHeight} * ${key} + var(--spacing-Y2))`
+  const transform = `translate3d(0%, ${translateY}, 1px)`
+  const Tooltip = el.lookup('Tooltip')
+  if (Tooltip.setProps) {
+    Tooltip.setProps({
+      opacity: options.visible && '1',
+      visibility: options.visible && 'visible',
+      text: s.title,
+      transform
+    })
+  }
+}
+
+export const NavbarButton = {
+  extend: [ClickableItem, Link, SquareButton, TooltipParent],
+
+  props: ({ state }) => ({
+    href: state.href,
+    active: window.location.pathname.includes(state.href),
+    isActive: window.location.pathname.includes(state.href),
+    theme: null,
+    position: 'relative'
+  }),
+
+  on: {
+    update: (el, s) => {
+      const active = window.location.pathname.includes(s.href)
+      if (active) setTooltipPosition(el, s)
+    },
+    mouseover: (ev, el, s) => {
+      if (!s.hover) {
+        s.hover = true
+        setTooltipPosition(el, s, { visible: true })
+      }
+    },
+    mouseleave: (ev, el, s) => {
+      if (s.hover) {
+        s.hover = false
+        el.lookup('Tooltip').setProps({
+          opacity: '0',
+          visibility: 'hidden'
+        })
+      }
+    }
+  }
+}
+
+export const DesignSystemNavbar = {
+  tag: 'aside',
+
+  props: {
+    position: 'sticky',
+    top: 'E',
+    zIndex: 1001,
+
+    nav: {
+      gap: 'B1',
+      flow: 'column',
+      background: 'transparent',
+      color: 'gray7',
+      fontSize: 'A2'
+    }
+  },
+
+  nav: {
+    extend: Flex,
+    childExtend: NavbarButton
+  },
+
+  Tooltip: {
+    props: {
+      background: 'gray0 .95',
+      position: 'absolute',
+      pointerEvents: 'none',
+      top: '0',
+      left: '100%',
+      shape: 'rectangle',
+      shapeDirection: null,
+      padding: 'X2 Z1',
+      transform: 'translate3d(5%, -50%, 0)',
+      opacity: '0',
+      visibility: 'hidden',
+      transition: 'C defaultBezier, C defaultBezier, B defaultBezier',
+      transitionProperty: 'opacity, visibility, transform',
+      textAlign: 'start',
+      zIndex: 99999,
+      lineHeight: 1,
+      title: { fontSize: 'Z' }
+    },
+    title: null,
+    p: null
+  }
+}

package/src/components/Banner.js

@@ -0,0 +1,58 @@
+'use strict'
+
+import { Flex, Link, Hoverable, Pseudo, ArticleMedium } from '@symbo.ls/components'
+
+export const TutorialBanner = {
+  extend: [Link, Flex, ArticleMedium, Pseudo, Hoverable],
+
+  props: ({ state }) => ({
+    flow: 'column',
+    round: 'A',
+    height: 'F',
+    padding: 'A2 B',
+    background: 'gray2',
+    href: state.href,
+    gap: '0',
+    overflow: 'hidden',
+    position: 'relative',
+    color: 'white',
+    flex: 1,
+    transitionProperty: 'transform, opacity, padding',
+
+    title: { margin: 'auto 0 0', text: state.title },
+    p: { text: state.p },
+
+    style: {
+      userSelect: 'none',
+      'h2, p': { zIndex: 2 }
+    },
+
+    ':after, &:before': {
+      content: '""',
+      position: 'absolute',
+      zIndex: 0,
+      inset: '-5px -5px -5px -5px'
+    },
+
+    ':before': {
+      transition: 'B defaultBezier',
+      transitionProperty: 'opacity',
+      backgroundImage: `url(${state.background})`,
+      backgroundSize: 'cover',
+      opacity: '0.5'
+    },
+
+    ':after': {
+      transition: 'B defaultBezier',
+      transitionProperty: 'opacity',
+      background: 'shadow-overlay',
+      opacity: '0.9'
+    },
+
+    ':hover': {
+      padding: '- C1 - -',
+      ':before': { opacity: '1' },
+      ':after': { opacity: '1' }
+    }
+  })
+}

package/src/components/ColorText.js

@@ -0,0 +1,29 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/components'
+
+const props = {
+  fontSize: 'Z',
+  alignItems: 'center',
+  gap: 'Y1',
+  whiteSpace: 'nowrap',
+
+  color: {
+    boxSize: 'B B',
+    background: 'red',
+    round: 'Y2'
+  },
+
+  value: {
+    text: 'Background',
+    color: 'white'
+  }
+}
+export const ColorText = {
+  extend: Flex,
+  props,
+
+  color: {},
+  value: {}
+  // text: 'efef'
+}