@symbo.ls/preview 2.7.20 → 2.7.23
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/.eslintrc.js +2 -8
- package/.vscode/settings.json +4 -1
- package/README.md +1 -0
- package/config.js +6 -0
- package/define.js +10 -0
- package/index.html +5 -5
- package/index.js +6 -9
- package/package.json +9 -28
- package/src/app.js +26 -40
- package/state.js +14 -0
- package/svgSprite.config.js +2 -2
- package/.babelrc.js +0 -5
- package/.coveralls.yml +0 -1
- package/.eslintignore +0 -1
- package/.legacy/_tools_old.js +0 -49
- package/.legacy/boxModel.js +0 -3
- package/.legacy/index copy.js +0 -45
- package/.legacy/preview.js +0 -133
- package/.legacy/sequence.js +0 -3
- package/.legacy/style.js +0 -30
- package/.prettierrc +0 -4
- package/.vscode/extensions.json +0 -5
- package/src/assets/dark.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/mask1.png +0 -0
- package/src/assets/mask2.png +0 -0
- package/src/assets/ovalCircle.svg +0 -9
- package/src/assets/shapes.png +0 -0
- package/src/assets/space.png +0 -0
- package/src/assets/type.png +0 -0
- package/src/components/Aside.js +0 -101
- package/src/components/Banner.js +0 -58
- package/src/components/ColorText.js +0 -29
- package/src/components/ColorsPalette.js +0 -69
- package/src/components/ColumnParagrphs.js +0 -22
- package/src/components/ContinueButton.js +0 -14
- package/src/components/DesignComponent.js +0 -81
- package/src/components/FontText.js +0 -193
- package/src/components/Header.js +0 -53
- package/src/components/HeaderHeading.js +0 -23
- package/src/components/IconsGroup.js +0 -64
- package/src/components/Page.js +0 -135
- package/src/components/ResponsivePreview.js +0 -44
- package/src/components/Route.js +0 -1
- package/src/components/ShapePreview.js +0 -63
- package/src/components/ShapeSet.js +0 -85
- package/src/components/SlidersWithResponsive.js +0 -23
- package/src/components/SpacingButton/actionButtons.js +0 -41
- package/src/components/SpacingButton/dropdown.js +0 -114
- package/src/components/SpacingButton/index.js +0 -248
- package/src/components/SpacingButton/props.js +0 -45
- package/src/components/SpacingPreview.js +0 -154
- package/src/components/SpacingTable.js +0 -210
- package/src/components/ThemeButtons.js +0 -41
- package/src/components/UploadImage.js +0 -31
- package/src/components/Widget.js +0 -1
- package/src/components/index.js +0 -25
- package/src/pages/Account/Personal.js +0 -59
- package/src/pages/Account/Project.js +0 -40
- package/src/pages/Account/fields.js +0 -74
- package/src/pages/Account/fieldsGridProps.js +0 -15
- package/src/pages/Account/index.js +0 -117
- package/src/pages/Color/globalThemes.js +0 -32
- package/src/pages/Color/index.js +0 -18
- package/src/pages/Color/palette.js +0 -37
- package/src/pages/Color/themes.js +0 -38
- package/src/pages/Components/grid.js +0 -99
- package/src/pages/Components/index.js +0 -37
- package/src/pages/Components/sidebar.js +0 -28
- package/src/pages/Components/style.js +0 -16
- package/src/pages/DesignSystem/Dashboard/banners.js +0 -38
- package/src/pages/DesignSystem/Dashboard/designElements.js +0 -124
- package/src/pages/DesignSystem/Dashboard/index.js +0 -22
- package/src/pages/DesignSystem/Dashboard/quickstart.js +0 -84
- package/src/pages/DesignSystem/Dashboard/state.js +0 -142
- package/src/pages/DesignSystem/Dashboard/summary.js +0 -52
- package/src/pages/DesignSystem/index.js +0 -187
- package/src/pages/Editor/index.js +0 -46
- package/src/pages/Editor/layers.js +0 -126
- package/src/pages/Editor/scene.js +0 -95
- package/src/pages/Editor/style.js +0 -13
- package/src/pages/Editor/tools.js +0 -360
- package/src/pages/Export/const.js +0 -19
- package/src/pages/Export/description.js +0 -88
- package/src/pages/Export/gist.js +0 -23
- package/src/pages/Export/index.js +0 -82
- package/src/pages/Export/scene.js +0 -59
- package/src/pages/Export/state.js +0 -23
- package/src/pages/Export/tools.js +0 -101
- package/src/pages/Fonts/fontFaces.js +0 -50
- package/src/pages/Fonts/fontFamilies.js +0 -47
- package/src/pages/Fonts/index.js +0 -15
- package/src/pages/Fonts/state.js +0 -5
- package/src/pages/Icons/index.js +0 -92
- package/src/pages/Icons/style.js +0 -1
- package/src/pages/Init/ChooseEnvironment.js +0 -146
- package/src/pages/Init/ChooseProject.js +0 -61
- package/src/pages/Init/CreateDocumentTheme.js +0 -173
- package/src/pages/Init/CreatePalette.js +0 -94
- package/src/pages/Init/FontText.js +0 -33
- package/src/pages/Init/Personalize/fields.js +0 -120
- package/src/pages/Init/Personalize/icon.js +0 -76
- package/src/pages/Init/Personalize/index.js +0 -120
- package/src/pages/Init/index.js +0 -39
- package/src/pages/Library/disabled.js +0 -38
- package/src/pages/Library/index.js +0 -33
- package/src/pages/MediaQuery/index.js +0 -46
- package/src/pages/MediaQuery/lists.js +0 -299
- package/src/pages/MediaQuery/state.js +0 -149
- package/src/pages/MediaQuery/typeScale.js +0 -69
- package/src/pages/Shapes/index.js +0 -75
- package/src/pages/Shapes/shapeSet.js +0 -133
- package/src/pages/Shapes/style.js +0 -11
- package/src/pages/Spaces/index.js +0 -32
- package/src/pages/Spaces/sequence.js +0 -32
- package/src/pages/Spaces/state.js +0 -20
- package/src/pages/State/index.js +0 -87
- package/src/pages/Theme/buttonTitlesGrid.js +0 -47
- package/src/pages/Theme/buttonsHeader.js +0 -33
- package/src/pages/Theme/friendTheme.js +0 -30
- package/src/pages/Theme/index.js +0 -273
- package/src/pages/Theme/interactivity.js +0 -115
- package/src/pages/Theme/ntc.js +0 -1689
- package/src/pages/Theme/preview.js +0 -153
- package/src/pages/Theme/selectsGrid.js +0 -73
- package/src/pages/Theme/style.js +0 -38
- package/src/pages/Theme/themingTools.js +0 -106
- package/src/pages/Typography/collection.js +0 -115
- package/src/pages/Typography/documentStyles.js +0 -113
- package/src/pages/Typography/index.js +0 -69
- package/src/pages/Typography/rangeButtons.js +0 -58
- package/src/pages/Typography/shared.js +0 -9
- package/src/pages/Typography/stylesHelpers.js +0 -30
- package/src/pages/Typography/typeScale.js +0 -86
- package/src/pages/__Account/__/index.js +0 -241
- package/src/pages/__Account/__/setUpProject.js +0 -142
- package/src/pages/__Account/index.js +0 -111
- package/src/pages/index.js +0 -17
- package/src/state.js +0 -20
- package/src/style.js +0 -20
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import { IncDecButtons } from '@symbo.ls/components'
|
|
4
|
-
|
|
5
|
-
export const range0Buttons = {
|
|
6
|
-
extend: IncDecButtons,
|
|
7
|
-
|
|
8
|
-
...[{
|
|
9
|
-
on: {
|
|
10
|
-
click: (ev, el) => {
|
|
11
|
-
const { state } = el
|
|
12
|
-
const { range } = state
|
|
13
|
-
if (range[0] < 0) {
|
|
14
|
-
++range[0]
|
|
15
|
-
state.update()
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}, {
|
|
20
|
-
on: {
|
|
21
|
-
click: (ev, el) => {
|
|
22
|
-
const { state } = el
|
|
23
|
-
const { range } = state
|
|
24
|
-
if (range[0] - 1 > -6) {
|
|
25
|
-
--range[0]
|
|
26
|
-
state.update()
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}]
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export const range1Buttons = {
|
|
34
|
-
extend: IncDecButtons,
|
|
35
|
-
...[{
|
|
36
|
-
on: {
|
|
37
|
-
click: (ev, el) => {
|
|
38
|
-
const { state } = el
|
|
39
|
-
const { range } = state
|
|
40
|
-
if (range[1] - 1 > 5) {
|
|
41
|
-
--range[1]
|
|
42
|
-
state.update()
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}, {
|
|
47
|
-
on: {
|
|
48
|
-
click: (ev, el) => {
|
|
49
|
-
const { state } = el
|
|
50
|
-
const { range } = state
|
|
51
|
-
if (range[1] + 1 < 21) {
|
|
52
|
-
++range[1]
|
|
53
|
-
state.update()
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}]
|
|
58
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
Grid,
|
|
5
|
-
SectionHeader,
|
|
6
|
-
TypeHelperObject
|
|
7
|
-
} from '@symbo.ls/components'
|
|
8
|
-
import { helpersCollection } from './collection'
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
header: {
|
|
12
|
-
extend: SectionHeader,
|
|
13
|
-
state: {
|
|
14
|
-
title: 'Helpers',
|
|
15
|
-
p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling',
|
|
16
|
-
nav: [{
|
|
17
|
-
href: '/typography/add-style',
|
|
18
|
-
icon: 'plus'
|
|
19
|
-
}]
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
content: {
|
|
24
|
-
extend: Grid,
|
|
25
|
-
props: { columns: 'repeat(3, 1fr)' },
|
|
26
|
-
|
|
27
|
-
childExtend: TypeHelperObject,
|
|
28
|
-
$setStateCollection: helpersCollection
|
|
29
|
-
}
|
|
30
|
-
}
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
TypeScaleSequence,
|
|
5
|
-
TestText,
|
|
6
|
-
Flex,
|
|
7
|
-
Grid,
|
|
8
|
-
mapSequence,
|
|
9
|
-
sortSequence
|
|
10
|
-
} from '@symbo.ls/components'
|
|
11
|
-
|
|
12
|
-
import { range0Buttons, range1Buttons } from './rangeButtons'
|
|
13
|
-
|
|
14
|
-
export default {
|
|
15
|
-
extend: Grid,
|
|
16
|
-
|
|
17
|
-
props: {
|
|
18
|
-
gap: 'D',
|
|
19
|
-
templateColumns: 'var(--spacing-F2) 1fr',
|
|
20
|
-
|
|
21
|
-
sidebar: {
|
|
22
|
-
padding: 'B 0 0',
|
|
23
|
-
widthRange: 'F2',
|
|
24
|
-
position: 'sticky',
|
|
25
|
-
top: 'E'
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
content: {
|
|
29
|
-
overflow: 'hidden',
|
|
30
|
-
flex: '1',
|
|
31
|
-
flow: 'column',
|
|
32
|
-
gap: 'C',
|
|
33
|
-
|
|
34
|
-
header: {
|
|
35
|
-
align: 'flex-end space-between',
|
|
36
|
-
padding: '0 0 0 C',
|
|
37
|
-
gap: 'C1'
|
|
38
|
-
},
|
|
39
|
-
|
|
40
|
-
footer: {
|
|
41
|
-
padding: '0 0 0 C'
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
sidebar: {
|
|
47
|
-
SectionHeader: {
|
|
48
|
-
title: 'TypeScale',
|
|
49
|
-
p: 'Generate text sequence by a base size and ratio'
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
SequenceSliders: {
|
|
53
|
-
flow: 'column'
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
Paragraph: {
|
|
57
|
-
margin: '0',
|
|
58
|
-
fontSize: 'Z2',
|
|
59
|
-
padding: 'B2 0',
|
|
60
|
-
text: `Base size and ratio sequentially generate set by multiplying each next calculated unit by the ratio.`
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
content: {
|
|
65
|
-
extend: Flex,
|
|
66
|
-
|
|
67
|
-
header: {
|
|
68
|
-
extend: Flex,
|
|
69
|
-
range0Buttons,
|
|
70
|
-
TestText
|
|
71
|
-
},
|
|
72
|
-
|
|
73
|
-
sequence: {
|
|
74
|
-
extend: TypeScaleSequence,
|
|
75
|
-
$setStateCollection: (el) => {
|
|
76
|
-
const { state } = el
|
|
77
|
-
// return state.sequence
|
|
78
|
-
// state.sequence = {}
|
|
79
|
-
// el.removeContent()
|
|
80
|
-
if (state.base && state.range) { return mapSequence(state, sortSequence) }
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
|
|
84
|
-
footer: { range1Buttons }
|
|
85
|
-
}
|
|
86
|
-
}
|
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectFieldWithCaption, Grid, CheckButton } from '@symbo.ls/components'
|
|
4
|
-
// import { account } from '../SignUp'
|
|
5
|
-
|
|
6
|
-
import setUpProject from './setUpProject'
|
|
7
|
-
|
|
8
|
-
import Page from '../Page'
|
|
9
|
-
import { logout } from '@symbo.ls/auth'
|
|
10
|
-
|
|
11
|
-
const sideBar = {
|
|
12
|
-
tag: 'aside',
|
|
13
|
-
extend: Block,
|
|
14
|
-
style: {
|
|
15
|
-
height: '100%',
|
|
16
|
-
borderRight: '1px solid rgba(255, 255, 255, .06)'
|
|
17
|
-
},
|
|
18
|
-
props: {
|
|
19
|
-
flexFlow: 'column',
|
|
20
|
-
flexAlign: 'flex-start space-between',
|
|
21
|
-
padding: '0 C 0 0'
|
|
22
|
-
},
|
|
23
|
-
nav: {
|
|
24
|
-
extend: Block,
|
|
25
|
-
props: {
|
|
26
|
-
flexFlow: 'column',
|
|
27
|
-
gap: 'A1'
|
|
28
|
-
},
|
|
29
|
-
childExtend: {
|
|
30
|
-
tag: 'a',
|
|
31
|
-
|
|
32
|
-
extend: [SquareButton, Link, ClickableItem],
|
|
33
|
-
props: {
|
|
34
|
-
theme: 'quaternary',
|
|
35
|
-
padding: 0,
|
|
36
|
-
boxSize: 'B1 B1'
|
|
37
|
-
},
|
|
38
|
-
style: { padding: 0 }
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
personal: {
|
|
42
|
-
props: { icon: 'githubOutline' },
|
|
43
|
-
style: { svg: { color: 'white' } },
|
|
44
|
-
|
|
45
|
-
on: {
|
|
46
|
-
click: (ev, el, s) => {
|
|
47
|
-
s.update({ activeTab: el.key })
|
|
48
|
-
Link.on.click(ev, el, s)
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
project: {
|
|
53
|
-
style: {
|
|
54
|
-
borderRadius: '100%',
|
|
55
|
-
display: 'block'
|
|
56
|
-
},
|
|
57
|
-
image: {
|
|
58
|
-
extend: Img,
|
|
59
|
-
attr: {
|
|
60
|
-
// src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
|
|
61
|
-
src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
|
|
62
|
-
},
|
|
63
|
-
style: {
|
|
64
|
-
width: '100%',
|
|
65
|
-
height: '100%',
|
|
66
|
-
borderRadius: '100%'
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
|
|
70
|
-
on: {
|
|
71
|
-
click: (ev, el, s) => {
|
|
72
|
-
s.update({ activeTab: el.key })
|
|
73
|
-
Link.on.click(ev, el, s)
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
add: {
|
|
79
|
-
props: { icon: 'plus' },
|
|
80
|
-
style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
|
|
81
|
-
|
|
82
|
-
on: {
|
|
83
|
-
click: (ev, el, s) => {
|
|
84
|
-
s.update({ activeTab: el.key })
|
|
85
|
-
Link.on.click(ev, el, s)
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
|
|
91
|
-
nav2: {
|
|
92
|
-
tag: 'nav',
|
|
93
|
-
extend: Block,
|
|
94
|
-
props: {
|
|
95
|
-
flexFlow: 'column',
|
|
96
|
-
gap: 'A1'
|
|
97
|
-
},
|
|
98
|
-
|
|
99
|
-
style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
|
|
100
|
-
childExtend: {
|
|
101
|
-
extend: [SquareButton, Link],
|
|
102
|
-
props: {
|
|
103
|
-
theme: 'quaternary',
|
|
104
|
-
padding: 0,
|
|
105
|
-
boxSize: 'B1 B1'
|
|
106
|
-
},
|
|
107
|
-
style: { padding: 0 }
|
|
108
|
-
},
|
|
109
|
-
|
|
110
|
-
info: { props: { icon: 'info' } },
|
|
111
|
-
logout: {
|
|
112
|
-
props: { icon: 'upload' },
|
|
113
|
-
|
|
114
|
-
on: {
|
|
115
|
-
click: (ev, el, s) => {
|
|
116
|
-
logout()
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
const fillFields = {
|
|
124
|
-
extend: [Block, Grid],
|
|
125
|
-
props: {
|
|
126
|
-
columns: 'repeat(2, 1fr)',
|
|
127
|
-
columnGap: 'C',
|
|
128
|
-
rowGap: 'C2'
|
|
129
|
-
},
|
|
130
|
-
childExtend: {
|
|
131
|
-
extend: SelectFieldWithCaption,
|
|
132
|
-
style: {
|
|
133
|
-
'> input': { width: '270x', minWidth: '270px', height: '42px' }
|
|
134
|
-
},
|
|
135
|
-
caption: {},
|
|
136
|
-
element: {
|
|
137
|
-
style: {
|
|
138
|
-
minWidth: `${270 / 16}em`,
|
|
139
|
-
height: `${42 / 16}em`
|
|
140
|
-
},
|
|
141
|
-
buttons: { ...[{ props: { theme: 'transparent' } }] }
|
|
142
|
-
}
|
|
143
|
-
},
|
|
144
|
-
...[
|
|
145
|
-
{
|
|
146
|
-
caption: { props: { text: 'Your Username' } },
|
|
147
|
-
element: {
|
|
148
|
-
tag: 'input',
|
|
149
|
-
attr: {
|
|
150
|
-
value: 'nikoloza'
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
caption: { props: { text: 'Your role' } },
|
|
156
|
-
element: {
|
|
157
|
-
title: { props: { text: 'Design' } }
|
|
158
|
-
}
|
|
159
|
-
},
|
|
160
|
-
{
|
|
161
|
-
caption: { props: { text: 'Country and region' } },
|
|
162
|
-
element: {
|
|
163
|
-
props: { gap: 'W' },
|
|
164
|
-
title: {
|
|
165
|
-
props: { text: 'Georgia' },
|
|
166
|
-
|
|
167
|
-
style: {
|
|
168
|
-
'&::before': {
|
|
169
|
-
content: '"🇬🇪"'
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
},
|
|
175
|
-
|
|
176
|
-
{
|
|
177
|
-
caption: { props: { text: 'Time-zone' } },
|
|
178
|
-
element: {
|
|
179
|
-
props: { gap: 'W' },
|
|
180
|
-
title: {
|
|
181
|
-
props: { text: 'Tbilisi(GMT+4)' }
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
]
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
const personalAccount = {
|
|
189
|
-
extend: Block,
|
|
190
|
-
props: {
|
|
191
|
-
// padding: '0 0 0 E',
|
|
192
|
-
flexFlow: 'column',
|
|
193
|
-
flexAlign: 'flex-start flex-start',
|
|
194
|
-
gap: 'C2'
|
|
195
|
-
},
|
|
196
|
-
caption: {
|
|
197
|
-
extend: [Text, Block],
|
|
198
|
-
props: {
|
|
199
|
-
text: 'Your personal account'
|
|
200
|
-
}
|
|
201
|
-
},
|
|
202
|
-
|
|
203
|
-
fields: {
|
|
204
|
-
extend: { fillFields }
|
|
205
|
-
},
|
|
206
|
-
button: {
|
|
207
|
-
extend: CheckButton,
|
|
208
|
-
props: {
|
|
209
|
-
text: 'Save Updates'
|
|
210
|
-
},
|
|
211
|
-
style: {
|
|
212
|
-
background: '#0079FD',
|
|
213
|
-
'> svg': { color: 'white' },
|
|
214
|
-
'&:hover': { background: '#0079FD' }
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
export const Account = {
|
|
220
|
-
extend: Page,
|
|
221
|
-
props: {
|
|
222
|
-
flexAlign: 'flex-start flex-start',
|
|
223
|
-
padding: 'C1 0 D1 0',
|
|
224
|
-
gap: 'E'
|
|
225
|
-
},
|
|
226
|
-
define: { routes: param => param },
|
|
227
|
-
state: {
|
|
228
|
-
activeTab: 'personal'
|
|
229
|
-
},
|
|
230
|
-
|
|
231
|
-
sideBar,
|
|
232
|
-
|
|
233
|
-
routes: {
|
|
234
|
-
personal: personalAccount,
|
|
235
|
-
project: setUpProject
|
|
236
|
-
},
|
|
237
|
-
|
|
238
|
-
page: {
|
|
239
|
-
content: (el, s) => ({ extend: el.parent.routes[s.activeTab] })
|
|
240
|
-
}
|
|
241
|
-
}
|
|
@@ -1,142 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import { Text, Block, Img, SquareButton, SelectField } from '@symbo.ls/components'
|
|
4
|
-
import { SetUp } from '../..'
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
caption: {
|
|
8
|
-
extend: [Block, Text],
|
|
9
|
-
props: {
|
|
10
|
-
text: 'Settings for Rockstar',
|
|
11
|
-
padding: '0 0 C2 0'
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
content: {
|
|
15
|
-
extend: SetUp,
|
|
16
|
-
style: { padding: 0 },
|
|
17
|
-
upload: {
|
|
18
|
-
caption: {},
|
|
19
|
-
content: {
|
|
20
|
-
extend: Block,
|
|
21
|
-
props: {
|
|
22
|
-
flexFlow: 'column',
|
|
23
|
-
gap: 'A'
|
|
24
|
-
},
|
|
25
|
-
style: { padding: `${17 / 16}em ${28 / 16}em ${10 / 16}em ${28 / 16}em` },
|
|
26
|
-
input: {},
|
|
27
|
-
icon: {
|
|
28
|
-
extend: Img,
|
|
29
|
-
attr: {
|
|
30
|
-
// src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
|
|
31
|
-
src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
|
|
32
|
-
},
|
|
33
|
-
style: {
|
|
34
|
-
width: '42px',
|
|
35
|
-
height: '42px',
|
|
36
|
-
borderRadius: '100%',
|
|
37
|
-
opacity: 1
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
p: null,
|
|
41
|
-
buttons: {
|
|
42
|
-
extend: Block,
|
|
43
|
-
props: {
|
|
44
|
-
flexAlign: 'center space-between',
|
|
45
|
-
gap: 'Y'
|
|
46
|
-
},
|
|
47
|
-
childExtend: {
|
|
48
|
-
extend: SquareButton,
|
|
49
|
-
props: { theme: 'quaternary', round: 'Y' },
|
|
50
|
-
style: {
|
|
51
|
-
padding: 0,
|
|
52
|
-
width: `${24 / 16}em`,
|
|
53
|
-
height: `${24 / 16}em`
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
...[
|
|
57
|
-
{ props: { icon: 'info' } },
|
|
58
|
-
{ props: { icon: 'trash' } }
|
|
59
|
-
]
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
proj: {
|
|
65
|
-
fields: {
|
|
66
|
-
...[
|
|
67
|
-
{
|
|
68
|
-
caption: {},
|
|
69
|
-
element: {
|
|
70
|
-
props: {
|
|
71
|
-
placeholder: null,
|
|
72
|
-
value: 'Rockstar, Inc'
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
{
|
|
78
|
-
caption: { props: { text: 'Project ID' } },
|
|
79
|
-
element: {
|
|
80
|
-
props: {
|
|
81
|
-
placeholder: null,
|
|
82
|
-
value: 'rockstarq'
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
{
|
|
88
|
-
style: { gridColumnEnd: 'span 1' },
|
|
89
|
-
caption: {},
|
|
90
|
-
element: {
|
|
91
|
-
title: { props: { text: 'Password protected' } }
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
|
|
95
|
-
{
|
|
96
|
-
caption: { style: { opacity: 0, color: 'black' } },
|
|
97
|
-
element: {
|
|
98
|
-
title: {
|
|
99
|
-
tag: 'input',
|
|
100
|
-
style: {
|
|
101
|
-
border: 'none',
|
|
102
|
-
outline: 'none',
|
|
103
|
-
background: 'transparent',
|
|
104
|
-
color: 'white'
|
|
105
|
-
},
|
|
106
|
-
attr: {
|
|
107
|
-
type: 'password'
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
buttons: {
|
|
111
|
-
...[{ props: { icon: 'colorblindAltOutline', theme: 'quaternary' } }]
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
|
|
116
|
-
{
|
|
117
|
-
caption: { props: { text: 'Design tool' } },
|
|
118
|
-
element: {
|
|
119
|
-
title: {
|
|
120
|
-
props: { text: 'Figma' },
|
|
121
|
-
style: { color: 'white' }
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
},
|
|
125
|
-
|
|
126
|
-
{
|
|
127
|
-
caption: { props: { text: 'UI Framework' } },
|
|
128
|
-
element: {
|
|
129
|
-
extend: SelectField,
|
|
130
|
-
title: {
|
|
131
|
-
props: { text: 'React' },
|
|
132
|
-
style: { color: 'white' }
|
|
133
|
-
},
|
|
134
|
-
buttons: { ...[{ props: { theme: 'transparent' } }] }
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
]
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
|
|
4
|
-
|
|
5
|
-
const sideBar = {
|
|
6
|
-
tag: 'aside',
|
|
7
|
-
style: {
|
|
8
|
-
},
|
|
9
|
-
props: {
|
|
10
|
-
flexFlow: 'column',
|
|
11
|
-
flexAlign: 'flex-start space-between',
|
|
12
|
-
padding: '0 C 0 0',
|
|
13
|
-
height: '100%',
|
|
14
|
-
style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
|
|
15
|
-
},
|
|
16
|
-
nav: {
|
|
17
|
-
props: {
|
|
18
|
-
flexFlow: 'column',
|
|
19
|
-
gap: 'A1'
|
|
20
|
-
},
|
|
21
|
-
childExtend: {
|
|
22
|
-
tag: 'a',
|
|
23
|
-
|
|
24
|
-
extend: [SquareButton, Link, ClickableItem],
|
|
25
|
-
props: {
|
|
26
|
-
theme: 'quaternary',
|
|
27
|
-
padding: 0,
|
|
28
|
-
boxSize: 'B1 B1'
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
personal: {
|
|
33
|
-
props: { icon: 'githubOutline' },
|
|
34
|
-
style: { svg: { color: 'white' } },
|
|
35
|
-
|
|
36
|
-
on: {
|
|
37
|
-
click: (ev, el, s) => {
|
|
38
|
-
s.update({ activeTab: el.key })
|
|
39
|
-
Link.on.click(ev, el, s)
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
project: {
|
|
44
|
-
style: {
|
|
45
|
-
borderRadius: '100%',
|
|
46
|
-
display: 'block'
|
|
47
|
-
},
|
|
48
|
-
image: {
|
|
49
|
-
extend: Img,
|
|
50
|
-
props: {
|
|
51
|
-
src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
|
|
52
|
-
width: '100%',
|
|
53
|
-
height: '100%',
|
|
54
|
-
borderRadius: '100%'
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
|
|
58
|
-
on: {
|
|
59
|
-
click: (ev, el, s) => {
|
|
60
|
-
s.update({ activeTab: el.key })
|
|
61
|
-
Link.on.click(ev, el, s)
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
add: {
|
|
67
|
-
props: { icon: 'plus' },
|
|
68
|
-
style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
|
|
69
|
-
|
|
70
|
-
on: {
|
|
71
|
-
click: (ev, el, s) => {
|
|
72
|
-
s.update({ activeTab: el.key })
|
|
73
|
-
Link.on.click(ev, el, s)
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
|
|
79
|
-
nav2: {
|
|
80
|
-
tag: 'nav',
|
|
81
|
-
props: {
|
|
82
|
-
flexFlow: 'column',
|
|
83
|
-
gap: 'A1'
|
|
84
|
-
},
|
|
85
|
-
|
|
86
|
-
style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
|
|
87
|
-
childExtend: {
|
|
88
|
-
extend: [SquareButton, Link],
|
|
89
|
-
props: {
|
|
90
|
-
theme: 'quaternary',
|
|
91
|
-
padding: 0,
|
|
92
|
-
boxSize: 'B1 B1'
|
|
93
|
-
},
|
|
94
|
-
style: { padding: 0 }
|
|
95
|
-
},
|
|
96
|
-
|
|
97
|
-
info: { props: { icon: 'info' } },
|
|
98
|
-
logout: {
|
|
99
|
-
props: { icon: 'logout', href: '/logout' }
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
export const Account = {
|
|
105
|
-
sideBar,
|
|
106
|
-
on: {
|
|
107
|
-
render: element => {
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}
|
package/src/pages/index.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
export * from './Init'
|
|
4
|
-
export * from './Components'
|
|
5
|
-
export * from './Export'
|
|
6
|
-
export * from './Fonts'
|
|
7
|
-
export * from './Icons'
|
|
8
|
-
export * from './Library'
|
|
9
|
-
export * from './Color'
|
|
10
|
-
export * from './Theme'
|
|
11
|
-
export * from './Shapes'
|
|
12
|
-
export * from './Spaces'
|
|
13
|
-
export * from './Typography'
|
|
14
|
-
export * from './State'
|
|
15
|
-
export * from './MediaQuery'
|
|
16
|
-
export * from './DesignSystem'
|
|
17
|
-
export * from './Account'
|
package/src/state.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
'use strict'
|
|
2
|
-
|
|
3
|
-
import SYSTEM from '@symbo.ls/platform-init'
|
|
4
|
-
import USR_DATA from '@symbo.ls/temp-db'
|
|
5
|
-
import { LIBRARY, COMPONENTS } from '@symbo.ls/temp-db/symbols'
|
|
6
|
-
|
|
7
|
-
export const state = {
|
|
8
|
-
globalTheme: 'dark',
|
|
9
|
-
appKey: '4it.symbo.ls'
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
state.SYSTEM = USR_DATA[state.appKey]
|
|
13
|
-
// state.SYSTEM = {}
|
|
14
|
-
state.SYSTEM.COMPONENTS = {}
|
|
15
|
-
|
|
16
|
-
export const context = {
|
|
17
|
-
LIBRARY,
|
|
18
|
-
SYSTEM,
|
|
19
|
-
COMPONENTS
|
|
20
|
-
}
|