@symbo.ls/preview 0.0.92 → 0.0.94
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.
- package/index.html +12 -0
- package/{src/index.js → index.js} +1 -1
- package/package.json +5 -10
- package/src/app.js +1 -2
- package/src/pages/Export/description.js +3 -3
- package/app.webmanifest +0 -4
- package/src/animations.js +0 -71
- package/src/dev.html +0 -19
- package/src/protect.js +0 -114
- package/src/sync.js +0 -37
- package/src/test.js +0 -30
- package/test/index.test.js +0 -5
package/index.html
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<html background="#000">
|
|
2
|
+
<head>
|
|
3
|
+
<title>Symbols preview</title>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
|
5
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
6
|
+
|
|
7
|
+
<meta charset="UTF-8">
|
|
8
|
+
</head>
|
|
9
|
+
<body background="#000">
|
|
10
|
+
<script src="./index.js"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -5,7 +5,7 @@ import '@symbo.ls/platform-init'
|
|
|
5
5
|
import DOM from 'domql'
|
|
6
6
|
import * as smbls from '@symbo.ls/components'
|
|
7
7
|
|
|
8
|
-
import App from './app'
|
|
8
|
+
import App from './src/app'
|
|
9
9
|
import { router, lastLevel } from '@domql/router'
|
|
10
10
|
import { platformOptions } from '@symbo.ls/platform-options'
|
|
11
11
|
|
package/package.json
CHANGED
|
@@ -2,17 +2,16 @@
|
|
|
2
2
|
"name": "@symbo.ls/preview",
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "",
|
|
5
|
-
"version": "0.0.
|
|
6
|
-
"repository": "https://github.com/rackai/editor",
|
|
5
|
+
"version": "0.0.94",
|
|
7
6
|
"main": "src/index.js",
|
|
8
7
|
"scripts": {
|
|
9
8
|
"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",
|
|
10
9
|
"clean": "rm -rf .cache dist",
|
|
11
10
|
"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",
|
|
12
11
|
"prestart": "yarn clean && yarn clean:modules",
|
|
13
|
-
"start": "parcel
|
|
12
|
+
"start": "parcel index.html --port 1200 --no-cache",
|
|
14
13
|
"prebuild": "rm -rf .cache dist",
|
|
15
|
-
"build": "parcel build
|
|
14
|
+
"build": "parcel build index.html",
|
|
16
15
|
"reinstall": "rm -rf node_modules/@symbo.ls node_modules/@domql node_modules/domql node_modules/smbls dist yarn.lock .cache && yarn"
|
|
17
16
|
},
|
|
18
17
|
"targets": {
|
|
@@ -25,19 +24,15 @@
|
|
|
25
24
|
"dependencies": {
|
|
26
25
|
"@domql/router": "latest",
|
|
27
26
|
"@domql/tags": "latest",
|
|
28
|
-
"@symbo.ls/cli": "latest",
|
|
29
27
|
"@symbo.ls/components": "latest",
|
|
30
|
-
"@symbo.ls/config": "latest",
|
|
31
|
-
"@symbo.ls/config-default": "latest",
|
|
32
28
|
"@symbo.ls/icons": "latest",
|
|
33
29
|
"@symbo.ls/init": "latest",
|
|
34
30
|
"@symbo.ls/scratch": "latest",
|
|
35
31
|
"@symbo.ls/temp-db": "latest",
|
|
36
|
-
"@symbo.ls/utils": "latest"
|
|
37
|
-
"domql": "^1.5.35",
|
|
38
|
-
"showdown": "^2.1.0"
|
|
32
|
+
"@symbo.ls/utils": "latest"
|
|
39
33
|
},
|
|
40
34
|
"devDependencies": {
|
|
35
|
+
"domql": "^1.5.35",
|
|
41
36
|
"@babel/core": "^7.11.5",
|
|
42
37
|
"@emotion/css": "^11.5.0",
|
|
43
38
|
"babel-eslint": "^10.0.3",
|
package/src/app.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
-
import showdown from 'showdown'
|
|
3
|
+
// import showdown from 'showdown'
|
|
4
4
|
import { CommonField, Flex, PropertyList } from '@symbo.ls/components'
|
|
5
5
|
|
|
6
6
|
const description = {
|
|
@@ -43,8 +43,8 @@ const readme = {
|
|
|
43
43
|
caption: {},
|
|
44
44
|
cnt: {
|
|
45
45
|
html: ({ state }) => {
|
|
46
|
-
const converter = new showdown.Converter()
|
|
47
|
-
return converter.makeHtml(state.readme)
|
|
46
|
+
// const converter = new showdown.Converter()
|
|
47
|
+
// return converter.makeHtml(state.readme)
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
}
|
package/app.webmanifest
DELETED
package/src/animations.js
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import { keyframes } from '@emotion/css'
|
|
4
|
-
|
|
5
|
-
export const isVisible = q => (q ? {
|
|
6
|
-
visibility: 'visible',
|
|
7
|
-
opacity: 1
|
|
8
|
-
} : {
|
|
9
|
-
visibility: 'hidden',
|
|
10
|
-
opacity: 0
|
|
11
|
-
})
|
|
12
|
-
|
|
13
|
-
export const transition = (t = 350) => ({
|
|
14
|
-
transition: `${t}ms`,
|
|
15
|
-
transitionProperties: 'opacity, visibility'
|
|
16
|
-
})
|
|
17
|
-
|
|
18
|
-
export const fadeIn = keyframes`
|
|
19
|
-
from {
|
|
20
|
-
opacity: 0;
|
|
21
|
-
}
|
|
22
|
-
to {
|
|
23
|
-
opacity: 1;
|
|
24
|
-
}
|
|
25
|
-
`
|
|
26
|
-
|
|
27
|
-
export const fadeInUp = keyframes`
|
|
28
|
-
from {
|
|
29
|
-
transform: translate3d(0,20px,0);
|
|
30
|
-
opacity: 0;
|
|
31
|
-
}
|
|
32
|
-
to {
|
|
33
|
-
transform: translate3d(0,0,0);
|
|
34
|
-
opacity: 1;
|
|
35
|
-
}
|
|
36
|
-
`
|
|
37
|
-
|
|
38
|
-
export const fadeInUpLong = keyframes`
|
|
39
|
-
from {
|
|
40
|
-
transform: translate3d(0,40px,0);
|
|
41
|
-
opacity: 0;
|
|
42
|
-
}
|
|
43
|
-
to {
|
|
44
|
-
transform: translate3d(0,0,0);
|
|
45
|
-
opacity: 1;
|
|
46
|
-
}
|
|
47
|
-
`
|
|
48
|
-
|
|
49
|
-
export const circleDown = keyframes`
|
|
50
|
-
from {
|
|
51
|
-
transform: translate3d(-50%, -60%, 0);
|
|
52
|
-
opacity: 0;
|
|
53
|
-
}
|
|
54
|
-
to {
|
|
55
|
-
transform: translate3d(-50%, -50%, 0);
|
|
56
|
-
opacity: 1;
|
|
57
|
-
}
|
|
58
|
-
`
|
|
59
|
-
|
|
60
|
-
export const animationSettings = {
|
|
61
|
-
name: fadeInUp,
|
|
62
|
-
duration: '950ms'
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export const animateOnLoad = (condition, { name, duration, delay } = animationSettings) => (condition ? {
|
|
66
|
-
animationName: name || animationSettings.name,
|
|
67
|
-
animationDuration: duration || animationSettings.duration,
|
|
68
|
-
animationDelay: delay || animationSettings.delay,
|
|
69
|
-
animationTimingFunction: 'ease',
|
|
70
|
-
animationFillMode: 'both'
|
|
71
|
-
} : null)
|
package/src/dev.html
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<html background="#000">
|
|
2
|
-
<head>
|
|
3
|
-
<title>Symbols Editor</title>
|
|
4
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
|
5
|
-
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
6
|
-
|
|
7
|
-
<meta charset="UTF-8">
|
|
8
|
-
|
|
9
|
-
<meta name="author" content="SymbolsApp">
|
|
10
|
-
<meta name="keywords" content="UIkit, Design System, Platform, Javascript, CSS, Less, Sass, Component, React, Angular, Vue, Svelte, HTML, Haml, Jade, Bootstrap, Semantic UI, Material, ">
|
|
11
|
-
<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. ">
|
|
12
|
-
|
|
13
|
-
<link rel="manifest" href="../app.webmanifest" crossorigin="use-credentials">
|
|
14
|
-
</head>
|
|
15
|
-
<body background="#000">
|
|
16
|
-
<style type="text/css">body {background: #000;}</style>
|
|
17
|
-
<script src="./index.js"></script>
|
|
18
|
-
</body>
|
|
19
|
-
</html>
|
package/src/protect.js
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import './config'
|
|
4
|
-
import DOM from 'domql'
|
|
5
|
-
|
|
6
|
-
import { auth, configureClient, login } from '@symbo.ls/auth'
|
|
7
|
-
// import { fetchAuth, READ_WAITLIST_USER, READ_COMPANY } from '@symbo.ls/fetch'
|
|
8
|
-
import { getCookie, setCookie } from 'domql/packages/cookie'
|
|
9
|
-
|
|
10
|
-
import Loader from '@symbo.ls/loader'
|
|
11
|
-
import App from './app'
|
|
12
|
-
|
|
13
|
-
import { Box } from '@symbo.ls/components'
|
|
14
|
-
import { animateOnLoad } from './animations'
|
|
15
|
-
|
|
16
|
-
const protect = {
|
|
17
|
-
extend: [Box, Loader],
|
|
18
|
-
class: {
|
|
19
|
-
animation: (el, s) => animateOnLoad(true)
|
|
20
|
-
},
|
|
21
|
-
props: {
|
|
22
|
-
position: 'fixed !important',
|
|
23
|
-
left: '0',
|
|
24
|
-
top: '0',
|
|
25
|
-
boxSize: '100% 100%'
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
DOM.create(protect)
|
|
30
|
-
|
|
31
|
-
// const callApi = async (state, err, callback) => {
|
|
32
|
-
// try {
|
|
33
|
-
// // const queryCompany = READ_COMPANY()
|
|
34
|
-
// // const waitlistQuery = READ_WAITLIST_USER(state.userData.email)
|
|
35
|
-
// // fetchAuth(state.token, queryCompany, (rdata) => {
|
|
36
|
-
// // const { data } = rdata
|
|
37
|
-
// // if (data.companies) {
|
|
38
|
-
// // state.companyData = data && data.companies
|
|
39
|
-
// // } else {
|
|
40
|
-
// // fetchAuth(state.token, waitlistQuery, (rdata) => {
|
|
41
|
-
// // state.waitlistData = rdata.data
|
|
42
|
-
// // })
|
|
43
|
-
// // }
|
|
44
|
-
// // setCookie('hash', '1', 3)
|
|
45
|
-
// // })
|
|
46
|
-
// setCookie('hash', '1', 3)
|
|
47
|
-
// callback(state)
|
|
48
|
-
// } catch (e) {
|
|
49
|
-
// // Display errors in the console
|
|
50
|
-
// err(e)
|
|
51
|
-
// }
|
|
52
|
-
// }
|
|
53
|
-
|
|
54
|
-
const updateState = async (isAuthenticated) => {
|
|
55
|
-
App.state = {
|
|
56
|
-
token: await auth.auth0.getTokenSilently(),
|
|
57
|
-
userData: await auth.auth0.getUser(),
|
|
58
|
-
isAuthenticated
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
setCookie('hash', '1', 3)
|
|
62
|
-
|
|
63
|
-
// const STATE_JSON = state.companyData.state_json
|
|
64
|
-
// const RECEIVED_CONFIG = STATE_JSON ? JSON.parse(STATE_JSON) : {}
|
|
65
|
-
// state.companyState = RECEIVED_CONFIG
|
|
66
|
-
|
|
67
|
-
protect.remove()
|
|
68
|
-
DOM.create(App)
|
|
69
|
-
|
|
70
|
-
// callApi(App.state,
|
|
71
|
-
// e => {
|
|
72
|
-
// window.alert('Something went wrong, please contact support at: support@symbols.app')
|
|
73
|
-
// console.log(e)
|
|
74
|
-
// },
|
|
75
|
-
// state => {
|
|
76
|
-
// const STATE_JSON = state.companyData.state_json
|
|
77
|
-
// const RECEIVED_CONFIG = STATE_JSON ? JSON.parse(STATE_JSON) : {}
|
|
78
|
-
// state.companyState = RECEIVED_CONFIG
|
|
79
|
-
|
|
80
|
-
// protect.remove()
|
|
81
|
-
// DOM.create(App)
|
|
82
|
-
// }
|
|
83
|
-
// )
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
window.onload = async () => {
|
|
87
|
-
const hash = getCookie('hash')
|
|
88
|
-
if (hash) {
|
|
89
|
-
protect.remove()
|
|
90
|
-
DOM.create(App)
|
|
91
|
-
return
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
await configureClient()
|
|
95
|
-
|
|
96
|
-
const isAuthenticated = await auth.auth0.isAuthenticated()
|
|
97
|
-
console.log('isAuthenticated', isAuthenticated)
|
|
98
|
-
if (!isAuthenticated) {
|
|
99
|
-
login()
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
updateState(true)
|
|
103
|
-
|
|
104
|
-
if (isAuthenticated) return
|
|
105
|
-
|
|
106
|
-
const query = window.location.search
|
|
107
|
-
if (query.includes('code=') && query.includes('state=')) {
|
|
108
|
-
await auth.auth0.handleRedirectCallback()
|
|
109
|
-
|
|
110
|
-
updateState(isAuthenticated)
|
|
111
|
-
|
|
112
|
-
window.history.replaceState({}, document.title, '/')
|
|
113
|
-
}
|
|
114
|
-
}
|
package/src/sync.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import { init, connect, send } from 'smbls' // eslint-disable-line no-unused-vars
|
|
4
|
-
import { router } from '@domql/router'
|
|
5
|
-
|
|
6
|
-
const onChange = (element, state) => {
|
|
7
|
-
return (event, data) => {
|
|
8
|
-
if (event === 'change') {
|
|
9
|
-
// const obj = JSON.parse(data)
|
|
10
|
-
state.update({ SYSTEM: data })
|
|
11
|
-
}
|
|
12
|
-
if (event === 'route') {
|
|
13
|
-
router(element, data, {})
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export const Sync = {
|
|
19
|
-
on: {
|
|
20
|
-
init: (el, s) => {
|
|
21
|
-
if (s.appKey) {
|
|
22
|
-
connect(s.appKey, {
|
|
23
|
-
source: 'symbols',
|
|
24
|
-
// socketUrl: 'ws://socket.symbols.app',
|
|
25
|
-
location: window.location.host,
|
|
26
|
-
onChange: onChange(el, s)
|
|
27
|
-
})
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
stateUpdated: (el, s, changes) => {
|
|
31
|
-
if (s.appKey && changes.SYSTEM) {
|
|
32
|
-
const { SYSTEM } = changes
|
|
33
|
-
send('change', SYSTEM)
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
package/src/test.js
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import DOM from 'domql'
|
|
4
|
-
import { Button } from '@symbo.ls/components'
|
|
5
|
-
|
|
6
|
-
import './config'
|
|
7
|
-
import './define'
|
|
8
|
-
|
|
9
|
-
document.body.style.padding = '25%'
|
|
10
|
-
document.body.style.color = 'white'
|
|
11
|
-
document.body.style.backgroundColor = 'black'
|
|
12
|
-
|
|
13
|
-
let button = {
|
|
14
|
-
extend: Button,
|
|
15
|
-
theme: 'six',
|
|
16
|
-
text: 'move'
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
let app = {
|
|
20
|
-
childExtend: {
|
|
21
|
-
childExtend: { extend: button },
|
|
22
|
-
// a: {},
|
|
23
|
-
b: {
|
|
24
|
-
icon: 'right'
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
a: {}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
DOM.create(app)
|