@symbo.ls/preview 0.0.9

package/.symbols/datepicker/index.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { DatePicker } from '@symbo.ls/components'
+
+import style from './style'
+
+const key = 'datepicker'
+const title = 'DatePicker'
+const description = ''
+const category = CATEGORIES[7]
+
+const component = {
+  style,
+  extend: DatePicker
+}
+
+const code = `{}`
+
+const defaultState = {}
+const props = {}
+
+const settings = {
+  gridOptions: { colspan: 7, rowspan: 5 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: ['click', 'choose'],
+  dataTypes: ['date']
+}

package/.symbols/datepicker/style.js

@@ -0,0 +1,4 @@
+'use strict'
+
+export default {
+}

package/.symbols/dropdown-list/index.js

@@ -0,0 +1,56 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { DropdownList } from '@symbo.ls/components'
+
+const key = 'dropdown-list'
+const title = 'Dropdown List'
+const description = ''
+const category = CATEGORIES[5]
+
+const component = {
+  extend: DropdownList,
+  props: {
+    theme: 'quaternary', round: 'A'
+  },
+  // props: (el, s) => {
+  //   return {
+  //     round: 'Z',
+  //     depth: '16',
+  //     theme: s.sceneTheme === 'light' ? 'lightDark' : 'dark',
+  //     rowTheme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
+  //   }
+  // },
+
+  ...[
+    { span: { props: { text: 'Today' } } },
+    { span: { props: { text: 'Yesterday' } } },
+    { span: { props: { text: 'A week age' } } },
+    { span: { props: { text: 'A month ago' } } }
+  ]
+}
+
+const code = `{}`
+
+const defaultState = {}
+const props = {
+  theme: 'quaternary'
+}
+const settings = {
+  gridOptions: { colspan: 5, rowspan: 5 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/.symbols/field/index.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { Field } from '@symbo.ls/components'
+
+const key = 'field'
+const title = 'Field'
+const description = ''
+const category = CATEGORIES[2]
+
+const component = {
+  extend: Field,
+  props: (el, s) => ({
+    theme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
+  })
+}
+
+const code = `{}`
+
+const defaultState = {}
+const props = {}
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: ['input'],
+  dataTypes: ['string']
+}

package/.symbols/index.js

@@ -0,0 +1,33 @@
+'use strict'
+
+import circleButton from './button-circle'
+import buttonContacts from './button-contacts'
+import buttonDownload from './button-download'
+import buttonPro from './button-pro'
+import buttonArchived from './button-archived'
+import buttonUser from './button-user'
+import buttonThemeSwitcher from './button-theme-switcher'
+import notification from './notification'
+import dropdownList from './dropdown-list'
+import label from './label'
+import datepicker from './datepicker'
+import field from './field'
+import tooltip from './tooltip'
+import pills from './pills'
+
+export const LIBRARY = [
+  circleButton,
+  buttonDownload,
+  buttonPro,
+  buttonArchived,
+  buttonContacts,
+  buttonUser,
+  label,
+  buttonThemeSwitcher,
+  notification,
+  dropdownList,
+  datepicker,
+  field,
+  tooltip,
+  pills
+]

package/.symbols/label/index.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { Label } from '@symbo.ls/components'
+
+const key = 'label'
+const title = 'Label'
+const description = ''
+const category = CATEGORIES[0]
+
+const component = {
+  extend: Label,
+  props: {
+    theme: 'lightDark'
+  }
+}
+
+const code = `{}`
+
+const defaultState = {}
+const props = {}
+
+const settings = {
+  gridOptions: { colspan: 3, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/.symbols/notification/index.js

@@ -0,0 +1,49 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import style from './style'
+import { Notification } from '@symbo.ls/components'
+
+const key = 'notification'
+const title = 'Notification'
+const description = ''
+const category = CATEGORIES[4]
+
+const component = {
+  style,
+  extend: Notification,
+  props: {
+    theme: 'alert'
+  }
+}
+
+const code = `{
+  extend: Notification,
+  props: {
+    theme: 'alert'
+  }
+}`
+
+const defaultState = {}
+const props = {
+  theme: 'alert'
+}
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/.symbols/notification/style.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export default {
+  borderBottomLeftRadius: '.4em',
+}

package/.symbols/pills/index.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { Pills } from '@symbo.ls/components'
+
+const key = 'pills'
+const title = 'Pills'
+const description = ''
+const category = CATEGORIES[CATEGORIES.length - 1]
+
+const component = {
+  extend: Pills
+}
+
+const code = `{}`
+
+const defaultState = {}
+const props = {}
+
+const settings = {
+  gridOptions: { colspan: 3, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/.symbols/tooltip/index.js

@@ -0,0 +1,38 @@
+'use strict'
+
+import { CATEGORIES } from '../categories'
+
+import { Tooltip } from '@symbo.ls/components'
+
+const key = 'tooltip'
+const title = 'Tooltip'
+const description = ''
+const category = CATEGORIES[8]
+
+const component = {
+  extend: Tooltip
+}
+
+const code = `{}`
+
+const defaultState = {}
+const props = {}
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+
+ props,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "standard.enable": true
+}

package/README.md

@@ -0,0 +1,19 @@
+# Fucking editor!
+Example dev setup (boilerplate) to use [DOMQL](https://github.com/rackai/domql). You can also check live editor [Playground](https://github.com/rackai/playground).
+
+### Setup
+
+1. Clone the repo
+```
+git clone git@github.com:rackai/editor.git
+```
+
+2. Install scripts
+```
+yarn
+```
+
+3. Run the project
+```
+yarn start
+```

package/app.webmanifest

@@ -0,0 +1,4 @@
+{
+  "display": "standalone",
+  "scope": "https://editor.symbols.app/"
+}

package/index.html

@@ -0,0 +1,22 @@
+<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. ">
+
+  <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>
+</html>

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@symbo.ls/preview",
+  "description": "",
+  "author": "",
+  "version": "0.0.9",
+  "repository": "https://github.com/rackai/editor",
+  "main": "src/index.js",
+  "scripts": {
+    "map:copy": "mkdir dist && find dist/ \\( -name \"*.map\" \\) -exec cp {} ./map.json \\;",
+    "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",
+    "prestart": "rm -rf .cache dist",
+    "start": "parcel src/dev.html --port 1200 --no-cache",
+    "start:protected": "npm run prestart && parcel index.html",
+    "prebuild": "rm -rf dist",
+    "build": "parcel build index.html",
+    "build:protected": "parcel build index.html --no-source-maps --no-content-hash",
+    "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": {
+    "@domql/router": "^2.3.1",
+    "@symbo.ls/components": "^0.2.5",
+    "@symbo.ls/config": "^1.0.33",
+    "@symbo.ls/icons": "^0.2.32",
+    "@symbo.ls/init": "^1.1.2",
+    "@symbo.ls/scratch": "^0.6.3",
+    "@symbo.ls/utils": "^0.0.3",
+    "domql": "^1.5.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.5",
+    "@emotion/css": "^11.5.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.1.0",
+    "parcel-bundler": "^1.12.4",
+    "parcel-plugin-svg-sprite": "^1.4.1",
+    "standard": "^13.1.0"
+  },
+  "standard": {
+    "parser": "babel-eslint"
+  }
+}

package/protect-pwd.js

@@ -0,0 +1,65 @@
+'use strict'
+
+import './src/config'
+
+import DOM from 'domql'
+import App from './src/app'
+import { getCookie, setCookie } from 'domql/packages/cookie'
+
+const KEY = '9EC6CB2A5122F61B0A5E4211B6C1F8E5F3708E0276DA2F23159AE7987EE74298'
+const KEY2 = 'F6CC5B085B61387AC2C125BD1289137D02BC58A07AF9A766FA0DE45E0E5066F8'
+
+async function sha256 (message) {
+  const msgBuffer = new TextEncoder('utf-8').encode(message)
+  const hashBuffer = await window.crypto.subtle.digest('SHA-256', msgBuffer)
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join('')
+  return hashHex
+}
+
+const protect = {
+  style: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    width: '45%',
+    minWidth: 300,
+    transform: 'translate3d(-50%, -50%, 1px)',
+    fontSize: 18,
+    color: 'black',
+    background: 'white',
+    padding: 26
+  },
+
+  label: {
+    tag: 'label',
+    div: 'Password Protected',
+    input: {
+      tag: 'input',
+      attr: { type: 'password', autofocus: true },
+      style: {
+        padding: 10,
+        marginTop: 10,
+        width: '100%'
+      },
+      on: {
+        keyup: (event, element) => {
+          var { node } = element
+          var { value } = node
+          sha256(value).then(hash => {
+            var passph = hash.toUpperCase()
+            if (passph === KEY || passph === KEY2) {
+              setCookie('hash', passph, 3)
+              protect.remove()
+              DOM.create(App)
+            }
+          })
+        }
+      }
+    }
+  }
+}
+
+const hash = getCookie('hash')
+if (hash === KEY || hash === KEY2) DOM.create(App)
+else DOM.create(protect)

package/src/animations.js

@@ -0,0 +1,71 @@
+'use strict'
+
+import { keyframes } from '@emotion/css'
+
+export const isVisible = q => (q ? {
+  visibility: 'visible',
+  opacity: 1
+} : {
+  visibility: 'hidden',
+  opacity: 0
+})
+
+export const transition = (t = 350) => ({
+  transition: `${t}ms`,
+  transitionProperties: 'opacity, visibility'
+})
+
+export const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+export const fadeInUp = keyframes`
+  from {
+    transform: translate3d(0,20px,0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0,0,0);
+    opacity: 1;
+  }
+`
+
+export const fadeInUpLong = keyframes`
+  from {
+    transform: translate3d(0,40px,0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0,0,0);
+    opacity: 1;
+  }
+`
+
+export const circleDown = keyframes`
+  from {
+    transform: translate3d(-50%, -60%, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(-50%, -50%, 0);
+    opacity: 1;
+  }
+`
+
+export const animationSettings = {
+  name: fadeInUp,
+  duration: '950ms'
+}
+
+export const animateOnLoad = (condition, { name, duration, delay } = animationSettings) => (condition ? {
+  animationName: name || animationSettings.name,
+  animationDuration: duration || animationSettings.duration,
+  animationDelay: delay || animationSettings.delay,
+  animationTimingFunction: 'ease',
+  animationFillMode: 'both'
+} : null)

package/src/app.js

@@ -0,0 +1,79 @@
+'use strict'
+
+import './config'
+
+import 'domql/packages/emotion'
+import { router, lastLevel } from '@domql/router'
+
+import { state } from './state'
+import {
+  PageExtend,
+  Components,
+  DesignSystem,
+  Export,
+  Library
+} from './pages'
+
+const SUB_ROUTES = {}
+Object.keys(DesignSystem.routes).map(route => {
+  SUB_ROUTES[route] = {
+    extend: DesignSystem,
+    sidebar: {},
+    main: {
+      extend: [DesignSystem.routes[route], PageExtend]
+    },
+    __filepath: 'pages/index.js'
+  }
+})
+
+const App = {
+  key: 'app',
+
+  state,
+  props: {
+    theme: 'document',
+    boxSize: '100% 100%',
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    flexFlow: 'column',
+    flexAlign: 'center flex-start'
+  },
+
+  define: { routes: param => param },
+  routes: {
+    '/library': Library,
+    '/design-system': DesignSystem,
+    '/components': Components,
+    '/component': Export,
+    ...SUB_ROUTES
+  },
+
+  content: {
+    style: { position: 'relative' }
+  },
+
+  on: {
+    render: element => {
+      const { pathname, hash } = window.location
+      const url = pathname + hash
+      router(element, url, {})
+    },
+    scroll: (ev, el) => {
+      const { scrollTop } = el.node
+      const isFloating = scrollTop > 0
+      if (isFloating !== el.props.isFloating) {
+        el.props.isFloating = isFloating
+        // el._header.update()
+      }
+    }
+  }
+}
+
+window.onpopstate = e => {
+  const { pathname, hash } = window.location
+  const url = pathname + hash
+  router(App, url, {}, lastLevel, true)
+}
+
+export default App