@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.
Files changed (149) hide show
  1. package/.eslintrc.js +2 -8
  2. package/.vscode/settings.json +4 -1
  3. package/README.md +1 -0
  4. package/config.js +6 -0
  5. package/define.js +10 -0
  6. package/index.html +5 -5
  7. package/index.js +6 -9
  8. package/package.json +9 -28
  9. package/src/app.js +26 -40
  10. package/state.js +14 -0
  11. package/svgSprite.config.js +2 -2
  12. package/.babelrc.js +0 -5
  13. package/.coveralls.yml +0 -1
  14. package/.eslintignore +0 -1
  15. package/.legacy/_tools_old.js +0 -49
  16. package/.legacy/boxModel.js +0 -3
  17. package/.legacy/index copy.js +0 -45
  18. package/.legacy/preview.js +0 -133
  19. package/.legacy/sequence.js +0 -3
  20. package/.legacy/style.js +0 -30
  21. package/.prettierrc +0 -4
  22. package/.vscode/extensions.json +0 -5
  23. package/src/assets/dark.png +0 -0
  24. package/src/assets/fonts/FiraGO/FiraGO-Bold.woff2 +0 -0
  25. package/src/assets/fonts/FiraGO/FiraGO-Light.woff2 +0 -0
  26. package/src/assets/fonts/FiraGO/FiraGO-Medium.woff2 +0 -0
  27. package/src/assets/fonts/FiraGO/FiraGO-Regular.woff2 +0 -0
  28. package/src/assets/fonts/europa-bold-webfont.woff2 +0 -0
  29. package/src/assets/fonts/europa-bolditalic-webfont.woff2 +0 -0
  30. package/src/assets/fonts/europa-light-webfont.woff2 +0 -0
  31. package/src/assets/fonts/europa-lightitalic-webfont.woff2 +0 -0
  32. package/src/assets/fonts/europa-regular-webfont.woff2 +0 -0
  33. package/src/assets/fonts/europa-regularitalic-webfont.woff2 +0 -0
  34. package/src/assets/mask1.png +0 -0
  35. package/src/assets/mask2.png +0 -0
  36. package/src/assets/ovalCircle.svg +0 -9
  37. package/src/assets/shapes.png +0 -0
  38. package/src/assets/space.png +0 -0
  39. package/src/assets/type.png +0 -0
  40. package/src/components/Aside.js +0 -101
  41. package/src/components/Banner.js +0 -58
  42. package/src/components/ColorText.js +0 -29
  43. package/src/components/ColorsPalette.js +0 -69
  44. package/src/components/ColumnParagrphs.js +0 -22
  45. package/src/components/ContinueButton.js +0 -14
  46. package/src/components/DesignComponent.js +0 -81
  47. package/src/components/FontText.js +0 -193
  48. package/src/components/Header.js +0 -53
  49. package/src/components/HeaderHeading.js +0 -23
  50. package/src/components/IconsGroup.js +0 -64
  51. package/src/components/Page.js +0 -135
  52. package/src/components/ResponsivePreview.js +0 -44
  53. package/src/components/Route.js +0 -1
  54. package/src/components/ShapePreview.js +0 -63
  55. package/src/components/ShapeSet.js +0 -85
  56. package/src/components/SlidersWithResponsive.js +0 -23
  57. package/src/components/SpacingButton/actionButtons.js +0 -41
  58. package/src/components/SpacingButton/dropdown.js +0 -114
  59. package/src/components/SpacingButton/index.js +0 -248
  60. package/src/components/SpacingButton/props.js +0 -45
  61. package/src/components/SpacingPreview.js +0 -154
  62. package/src/components/SpacingTable.js +0 -210
  63. package/src/components/ThemeButtons.js +0 -41
  64. package/src/components/UploadImage.js +0 -31
  65. package/src/components/Widget.js +0 -1
  66. package/src/components/index.js +0 -25
  67. package/src/pages/Account/Personal.js +0 -59
  68. package/src/pages/Account/Project.js +0 -40
  69. package/src/pages/Account/fields.js +0 -74
  70. package/src/pages/Account/fieldsGridProps.js +0 -15
  71. package/src/pages/Account/index.js +0 -117
  72. package/src/pages/Color/globalThemes.js +0 -32
  73. package/src/pages/Color/index.js +0 -18
  74. package/src/pages/Color/palette.js +0 -37
  75. package/src/pages/Color/themes.js +0 -38
  76. package/src/pages/Components/grid.js +0 -99
  77. package/src/pages/Components/index.js +0 -37
  78. package/src/pages/Components/sidebar.js +0 -28
  79. package/src/pages/Components/style.js +0 -16
  80. package/src/pages/DesignSystem/Dashboard/banners.js +0 -38
  81. package/src/pages/DesignSystem/Dashboard/designElements.js +0 -124
  82. package/src/pages/DesignSystem/Dashboard/index.js +0 -22
  83. package/src/pages/DesignSystem/Dashboard/quickstart.js +0 -84
  84. package/src/pages/DesignSystem/Dashboard/state.js +0 -142
  85. package/src/pages/DesignSystem/Dashboard/summary.js +0 -52
  86. package/src/pages/DesignSystem/index.js +0 -187
  87. package/src/pages/Editor/index.js +0 -46
  88. package/src/pages/Editor/layers.js +0 -126
  89. package/src/pages/Editor/scene.js +0 -95
  90. package/src/pages/Editor/style.js +0 -13
  91. package/src/pages/Editor/tools.js +0 -360
  92. package/src/pages/Export/const.js +0 -19
  93. package/src/pages/Export/description.js +0 -88
  94. package/src/pages/Export/gist.js +0 -23
  95. package/src/pages/Export/index.js +0 -82
  96. package/src/pages/Export/scene.js +0 -59
  97. package/src/pages/Export/state.js +0 -23
  98. package/src/pages/Export/tools.js +0 -101
  99. package/src/pages/Fonts/fontFaces.js +0 -50
  100. package/src/pages/Fonts/fontFamilies.js +0 -47
  101. package/src/pages/Fonts/index.js +0 -15
  102. package/src/pages/Fonts/state.js +0 -5
  103. package/src/pages/Icons/index.js +0 -92
  104. package/src/pages/Icons/style.js +0 -1
  105. package/src/pages/Init/ChooseEnvironment.js +0 -146
  106. package/src/pages/Init/ChooseProject.js +0 -61
  107. package/src/pages/Init/CreateDocumentTheme.js +0 -173
  108. package/src/pages/Init/CreatePalette.js +0 -94
  109. package/src/pages/Init/FontText.js +0 -33
  110. package/src/pages/Init/Personalize/fields.js +0 -120
  111. package/src/pages/Init/Personalize/icon.js +0 -76
  112. package/src/pages/Init/Personalize/index.js +0 -120
  113. package/src/pages/Init/index.js +0 -39
  114. package/src/pages/Library/disabled.js +0 -38
  115. package/src/pages/Library/index.js +0 -33
  116. package/src/pages/MediaQuery/index.js +0 -46
  117. package/src/pages/MediaQuery/lists.js +0 -299
  118. package/src/pages/MediaQuery/state.js +0 -149
  119. package/src/pages/MediaQuery/typeScale.js +0 -69
  120. package/src/pages/Shapes/index.js +0 -75
  121. package/src/pages/Shapes/shapeSet.js +0 -133
  122. package/src/pages/Shapes/style.js +0 -11
  123. package/src/pages/Spaces/index.js +0 -32
  124. package/src/pages/Spaces/sequence.js +0 -32
  125. package/src/pages/Spaces/state.js +0 -20
  126. package/src/pages/State/index.js +0 -87
  127. package/src/pages/Theme/buttonTitlesGrid.js +0 -47
  128. package/src/pages/Theme/buttonsHeader.js +0 -33
  129. package/src/pages/Theme/friendTheme.js +0 -30
  130. package/src/pages/Theme/index.js +0 -273
  131. package/src/pages/Theme/interactivity.js +0 -115
  132. package/src/pages/Theme/ntc.js +0 -1689
  133. package/src/pages/Theme/preview.js +0 -153
  134. package/src/pages/Theme/selectsGrid.js +0 -73
  135. package/src/pages/Theme/style.js +0 -38
  136. package/src/pages/Theme/themingTools.js +0 -106
  137. package/src/pages/Typography/collection.js +0 -115
  138. package/src/pages/Typography/documentStyles.js +0 -113
  139. package/src/pages/Typography/index.js +0 -69
  140. package/src/pages/Typography/rangeButtons.js +0 -58
  141. package/src/pages/Typography/shared.js +0 -9
  142. package/src/pages/Typography/stylesHelpers.js +0 -30
  143. package/src/pages/Typography/typeScale.js +0 -86
  144. package/src/pages/__Account/__/index.js +0 -241
  145. package/src/pages/__Account/__/setUpProject.js +0 -142
  146. package/src/pages/__Account/index.js +0 -111
  147. package/src/pages/index.js +0 -17
  148. package/src/state.js +0 -20
  149. 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,9 +0,0 @@
1
- 'use strict'
2
-
3
- import { SectionHeader } from '@symbo.ls/components'
4
-
5
- export const TypeSection = {
6
- header: {
7
- extend: SectionHeader
8
- }
9
- }
@@ -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
- }
@@ -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
- }