@symbo.ls/preview 0.0.62 → 0.0.63

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/pages/DesignSystem/Dashboard/state.js +118 -0
  3. package/src/pages/DesignSystem/Dashboard/summary.js +2 -117
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@symbo.ls/preview",
3
3
  "description": "",
4
4
  "author": "",
5
- "version": "0.0.62",
5
+ "version": "0.0.63",
6
6
  "repository": "https://github.com/rackai/editor",
7
7
  "main": "src/index.js",
8
8
  "scripts": {
package/src/pages/DesignSystem/Dashboard/state.js ADDED
@@ -0,0 +1,118 @@
1
+ 'use strict'
2
+
3
+ export default ({ parent: { state: { __system } } }) => ({
4
+ data: [{
5
+ icon: 'colorOutline',
6
+ iconTheme: 'theme',
7
+ title: 'colors',
8
+ paragraph: 'Colorize styles manually',
9
+ iconBackground: 'red',
10
+ properties: [{
11
+ property: 'Colors',
12
+ value: Object.keys(__system.COLOR).length
13
+ }, {
14
+ property: 'Themes',
15
+ value: Object.keys(__system.THEME).length
16
+ }]
17
+ }, {
18
+ icon: 'typographyOutline',
19
+ iconTheme: 'typography',
20
+ title: 'typography',
21
+ paragraph: 'style a typed material',
22
+ properties: [{
23
+ property: 'Base size',
24
+ value: __system.TYPOGRAPHY.base + 'px'
25
+ }, {
26
+ property: 'Ratio',
27
+ value: __system.TYPOGRAPHY.ratio
28
+ }, {
29
+ property: 'Styles',
30
+ value: Object.keys(__system.TYPOGRAPHY?.styles).length
31
+ }, {
32
+ property: 'Fonts',
33
+ value: Object.keys(__system.FONT).length
34
+ }, {
35
+ property: 'Families',
36
+ value: Object.keys(__system.FONT_FAMILY).length - 1
37
+ }]
38
+ }, {
39
+ icon: 'spaceOutline',
40
+ iconTheme: 'space',
41
+ title: 'Spacing',
42
+ paragraph: 'Manage properties of a size',
43
+ properties: [{
44
+ property: 'Ratio',
45
+ value: __system.SPACING.ratio
46
+ }, {
47
+ property: 'Templates',
48
+ value: 'TBA'
49
+ }]
50
+ }, {
51
+ icon: 'shape',
52
+ iconTheme: 'shape',
53
+ title: 'shapes',
54
+ paragraph: 'Design an outline to a chosen component',
55
+ properties: [{
56
+ property: 'HTML',
57
+ value: '32'
58
+ }, {
59
+ property: 'SVG',
60
+ value: 'TBA'
61
+ }]
62
+ }, {
63
+ icon: 'iconsOutline',
64
+ iconTheme: 'color',
65
+ title: 'Icons',
66
+ paragraph: 'Label a role of subject with glyphs',
67
+ properties: [{
68
+ property: 'All',
69
+ value: console.log(__system) || Object.keys(__system.ICONS).length
70
+ }, {
71
+ property: 'Linear',
72
+ value: Object.keys(__system.ICONS).filter(v => v.includes('Outline')).length
73
+ }, {
74
+ property: 'Colored',
75
+ value: Object.keys(__system.ICONS).filter(v => v.includes('Colored')).length
76
+ }]
77
+ }, {
78
+ icon: 'clock',
79
+ iconTheme: 'icons',
80
+ title: 'Timing',
81
+ paragraph: 'Tokens for transitions and animations',
82
+ properties: [{
83
+ property: 'Timing base',
84
+ value: __system.TIMING.base + 'ms'
85
+ }, {
86
+ property: 'Ratio',
87
+ value: __system.TIMING.ratio
88
+ }, {
89
+ property: 'Transitions',
90
+ value: 'TBA'
91
+ }, {
92
+ property: 'Animations',
93
+ value: 'TBA'
94
+ }]
95
+ }, {
96
+ icon: 'deviceMobileOutline',
97
+ title: 'Breakpoints',
98
+ paragraph: 'Label a role of subject with glyphs',
99
+ properties: [{
100
+ property: 'Breakpoints',
101
+ value: Object.keys(__system.MEDIA).length
102
+ }, {
103
+ property: 'Screens',
104
+ value: Object.keys(__system.DEVICES).length
105
+ }]
106
+ }, {
107
+ icon: 'threeDots',
108
+ title: 'Sequence',
109
+ paragraph: 'The mapping system of generative sizing units',
110
+ properties: [{
111
+ property: 'Breakpoints',
112
+ value: '8'
113
+ }, {
114
+ property: 'Screens',
115
+ value: '3'
116
+ }]
117
+ }]
118
+ })
package/src/pages/DesignSystem/Dashboard/summary.js CHANGED
@@ -1,124 +1,9 @@
1
1
  'use strict'
2
- import { ClickableItem, Grid } from '@symbo.ls/components'
3
2
 
3
+ import { ClickableItem, Grid } from '@symbo.ls/components'
4
4
  import { DesignComponent } from '../../../components'
5
5
 
6
- const state = ({ parent: { state: { __system } } }) => ({
7
- data: [{
8
- icon: 'colorOutline',
9
- iconTheme: 'theme',
10
- title: 'colors',
11
- paragraph: 'Colorize styles manually',
12
- iconBackground: 'red',
13
- properties: [{
14
- property: 'Colors',
15
- value: Object.keys(__system.COLOR).length
16
- }, {
17
- property: 'Themes',
18
- value: Object.keys(__system.THEME).length
19
- }]
20
- }, {
21
- icon: 'typographyOutline',
22
- iconTheme: 'typography',
23
- title: 'typography',
24
- paragraph: 'style a typed material',
25
- properties: [{
26
- property: 'Base size',
27
- value: __system.TYPOGRAPHY.base + 'px'
28
- }, {
29
- property: 'Ratio',
30
- value: __system.TYPOGRAPHY.ratio
31
- }, {
32
- property: 'Styles',
33
- value: Object.keys(__system.TYPOGRAPHY?.styles).length
34
- }, {
35
- property: 'Fonts',
36
- value: Object.keys(__system.FONT).length
37
- }, {
38
- property: 'Families',
39
- value: Object.keys(__system.FONT_FAMILY).length - 1
40
- }]
41
- }, {
42
- icon: 'spaceOutline',
43
- iconTheme: 'space',
44
- title: 'Spacing',
45
- paragraph: 'Manage properties of a size',
46
- properties: [{
47
- property: 'Ratio',
48
- value: __system.SPACING.ratio
49
- }, {
50
- property: 'Templates',
51
- value: 'TBA'
52
- }]
53
- }, {
54
- icon: 'shape',
55
- iconTheme: 'shape',
56
- title: 'shapes',
57
- paragraph: 'Design an outline to a chosen component',
58
- properties: [{
59
- property: 'HTML',
60
- value: '32'
61
- }, {
62
- property: 'SVG',
63
- value: 'TBA'
64
- }]
65
- }, {
66
- icon: 'iconsOutline',
67
- iconTheme: 'color',
68
- title: 'Icons',
69
- paragraph: 'Label a role of subject with glyphs',
70
- properties: [{
71
- property: 'All',
72
- value: console.log(__system) || Object.keys(__system.ICONS).length
73
- }, {
74
- property: 'Linear',
75
- value: Object.keys(__system.ICONS).filter(v => v.includes('Outline')).length
76
- }, {
77
- property: 'Colored',
78
- value: Object.keys(__system.ICONS).filter(v => v.includes('Colored')).length
79
- }]
80
- }, {
81
- icon: 'clock',
82
- iconTheme: 'icons',
83
- title: 'Timing',
84
- paragraph: 'Tokens for transitions and animations',
85
- properties: [{
86
- property: 'Timing base',
87
- value: __system.TIMING.base + 'ms'
88
- }, {
89
- property: 'Ratio',
90
- value: __system.TIMING.ratio
91
- }, {
92
- property: 'Transitions',
93
- value: 'TBA'
94
- }, {
95
- property: 'Animations',
96
- value: 'TBA'
97
- }]
98
- }, {
99
- icon: 'deviceMobileOutline',
100
- title: 'Breakpoints',
101
- paragraph: 'Label a role of subject with glyphs',
102
- properties: [{
103
- property: 'Breakpoints',
104
- value: Object.keys(__system.MEDIA).length
105
- }, {
106
- property: 'Screens',
107
- value: Object.keys(__system.DEVICES).length
108
- }]
109
- }, {
110
- icon: 'threeDots',
111
- title: 'Sequence',
112
- paragraph: 'The mapping system of generative sizing units',
113
- properties: [{
114
- property: 'Breakpoints',
115
- value: '8'
116
- }, {
117
- property: 'Screens',
118
- value: '3'
119
- }]
120
- }]
121
- })
6
+ import state from './state'
122
7
 
123
8
  export const designComponents = {
124
9
  extend: Grid,