@symbo.ls/preview 2.0.7 → 2.6.0

package/src/pages/index.js

@@ -1,25 +1,17 @@
 'use strict'
 
-import PageProto from './PageProto'
-
-import Library from './Library'
-import Export from './Export'
-import Color from './Color'
-import ColorEditor from './ColorEditor'
-import Shapes from './Shapes'
-import Spaces from './Spaces'
-import Icons from './Icons'
-import Typography from './Typography'
-
-export {
-  PageProto,
-
-  Library,
-  Export,
-  Color,
-  ColorEditor,
-  Shapes,
-  Spaces,
-  Icons,
-  Typography
-}
+export * from './Init'
+export * from './Components'
+export * from './Export'
+export * from './Fonts'
+export * from './Icons'
+export * from './Library'
+export * from './Color'
+export * from './Theme'
+export * from './Shapes'
+export * from './Spaces'
+export * from './Typography'
+export * from './State'
+export * from './MediaQuery'
+export * from './DesignSystem'
+export * from './Account'

package/src/style.js

@@ -1,17 +1,20 @@
 'use strict'
 
 export default {
-  width: '100%',
-  height: '100%',
+  theme: 'document',
+  boxSize: '100% 100%',
   position: 'absolute',
-  top: 0,
-  left: 0,
-
-  overflow: 'hidden',
-  overflowY: 'auto',
-
-  display: 'grid',
-  gridTemplateRows: 'max-content',
-
-  caption: { whiteSpace: 'nowrap' }
+  top: '0',
+  left: '0',
+  flow: 'column',
+  align: 'center flex-start',
+  overflow: 'hidden auto',
+  boxSizing: 'border-box',
+  cursor: 'default',
+  style: {
+    'button, a': {
+      cursor: 'default'
+    }
+  }
+  // content: { position: 'relative' }
 }

package/svgSprite.config.js

@@ -3,5 +3,6 @@ const path = require('path')
 module.exports = {
   getSymbolId: (filePath, fileContent, fileHash) => {
     return path.basename(filePath, '.svg')
-  }
+  },
+  exclude: ['**/components/**', '**/Modals/**']
 }

package/README.md

@@ -1,19 +0,0 @@
-# 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

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

package/netlify.toml

@@ -1,19 +0,0 @@
-[[redirects]]
-  from = "*"
-  to = "/index.html"
-  status = 200
-  
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-
-[[redirects]]
-  from = "/*/*"
-  to = "/index.html"
-  status = 200
-
-[[redirects]]
-  from = "/*/*/*"
-  to = "/index.html"
-  status = 200

package/protect-pwd.js

@@ -1,65 +0,0 @@
-'use strict'
-
-import './src/config'
-
-import DOM from 'domql-preview'
-import App from './src/app'
-import { getCookie, setCookie } from 'domql-preview/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

@@ -1,71 +0,0 @@
-'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)