@symbo.ls/preview 0.0.61 → 0.0.62

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/DesignComponent.js +1 -0
  3. package/src/pages/DesignSystem/Dashboard/banners.js +1 -1
  4. package/src/pages/DesignSystem/Dashboard/summary.js +130 -111
  5. package/src/pages/Library/index.js +13 -2
  6. package/user_data/byld.js +2 -0
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@symbo.ls/preview",
3
3
  "description": "",
4
4
  "author": "",
5
- "version": "0.0.61",
5
+ "version": "0.0.62",
6
6
  "repository": "https://github.com/rackai/editor",
7
7
  "main": "src/index.js",
8
8
  "scripts": {
package/src/components/DesignComponent.js CHANGED
@@ -67,6 +67,7 @@ export const DesignComponent = {
67
67
  extend: Flex,
68
68
  props: {
69
69
  flow: 'column',
70
+ minWidth: 'F1',
70
71
  maxWidth: 'F2',
71
72
  round: 'A',
72
73
  height: 'fit-content',
package/src/pages/DesignSystem/Dashboard/banners.js CHANGED
@@ -5,7 +5,7 @@ import { TutorialBanner } from '../../../components'
5
5
 
6
6
  import DARK_PNG from '../../../assets/dark.png'
7
7
  import TYPE_PNG from '../../../assets/type.png'
8
- import SPACE_PNG from '../../../assets/space.png'
8
+ import SPACE_PNG from '../../../assets/space.png' // eslint-disable-line
9
9
  import SHAPES_PNG from '../../../assets/shapes.png'
10
10
 
11
11
  export default {
package/src/pages/DesignSystem/Dashboard/summary.js CHANGED
@@ -1,136 +1,155 @@
1
1
  'use strict'
2
- import { Grid } from '@symbo.ls/components'
2
+ import { ClickableItem, Grid } from '@symbo.ls/components'
3
3
 
4
4
  import { DesignComponent } from '../../../components'
5
5
 
6
- const DESIGN_SYSTEM_ITEMS = [{
7
- icon: 'colorOutline',
8
- iconTheme: 'theme',
9
- title: 'colors',
10
- paragraph: 'Colorize styles manually',
11
- iconBackground: 'red',
12
- properties: [{
13
- property: 'Colors',
14
- value: '35'
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
+ }]
15
20
  }, {
16
- property: 'Themes',
17
- value: '15'
18
- }]
19
- }, {
20
- icon: 'typographyOutline',
21
- iconTheme: 'typography',
22
- title: 'typography',
23
- paragraph: 'style a typed material',
24
- properties: [{
25
- property: 'Base size',
26
- value: '16px'
27
- }, {
28
- property: 'Ratio',
29
- value: '1.2'
30
- }, {
31
- property: 'Style',
32
- value: '8'
33
- }, {
34
- property: 'Fonts',
35
- value: '2'
36
- }, {
37
- property: 'Breakpoints',
38
- value: '3'
39
- }]
40
- }, {
41
- icon: 'spaceOutline',
42
- iconTheme: 'space',
43
- title: 'Spacing',
44
- paragraph: 'Manage properties of a size',
45
- properties: [{
46
- property: 'Ratio',
47
- value: '1.618'
48
- }, {
49
- property: 'Style',
50
- value: '8'
51
- }, {
52
- property: 'Breakpoints',
53
- value: '3'
54
- }]
55
- }, {
56
- icon: 'shape',
57
- iconTheme: 'shape',
58
- title: 'shapes',
59
- paragraph: 'Design an outline to a chosen component',
60
- properties: [{
61
- property: 'HTML',
62
- value: '32'
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
+ }]
63
41
  }, {
64
- property: 'SVG',
65
- value: '1'
66
- }]
67
- }, {
68
- icon: 'iconsOutline',
69
- iconTheme: 'color',
70
- title: 'Icons',
71
- paragraph: 'Label a role of subject with glyphs',
72
- properties: [{
73
- property: 'Linear',
74
- value: '788'
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
+ }]
75
53
  }, {
76
- property: 'Colored',
77
- value: '64'
78
- }]
79
- }, {
80
- icon: 'clock',
81
- iconTheme: 'icons',
82
- title: 'Timing',
83
- paragraph: 'Tokens for transitions and animations',
84
- properties: [{
85
- property: 'Timing base',
86
- value: '150ms'
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
+ }]
87
65
  }, {
88
- property: 'Ratio',
89
- value: '1.618'
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
+ }]
90
80
  }, {
91
- property: 'Transitions',
92
- value: '15'
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
+ }]
93
98
  }, {
94
- property: 'Animations',
95
- value: '11'
96
- }]
97
- }, {
98
- icon: 'deviceMobileOutline',
99
- title: 'Breakpoints',
100
- paragraph: 'Label a role of subject with glyphs',
101
- properties: [{
102
- property: 'Breakpoints',
103
- value: '8'
104
- }, {
105
- property: 'Screens',
106
- value: '3'
107
- }]
108
- }, {
109
- icon: 'threeDots',
110
- title: 'Sequence',
111
- paragraph: 'The mapping system of generative sizing units',
112
- properties: [{
113
- property: 'Breakpoints',
114
- value: '8'
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
+ }]
115
109
  }, {
116
- property: 'Screens',
117
- value: '3'
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
+ }]
118
120
  }]
119
- }]
121
+ })
120
122
 
121
123
  export const designComponents = {
122
124
  extend: Grid,
123
125
  props: {
124
- columns: 'repeat(5, 1fr)',
125
- rows: 'repeat(3, 1fr)'
126
+ columns: `repeat(auto-fill, 15.235%)`,
127
+ rows: 'repeat(2, 1fr)',
128
+ autoFlow: 'dense',
129
+ justifyItems: 'flex-start',
130
+ autoColumns: 'auto',
131
+ autoRows: 'auto',
132
+
133
+ gap: 'B1'
126
134
  },
127
135
 
128
- childExtend: { extend: DesignComponent },
136
+ childExtend: {
137
+ extend: [ClickableItem, DesignComponent],
138
+ props: {
139
+ maxWidth: 'none',
140
+ width: '100%'
141
+
142
+ // flex: '1 1 100%'
143
+ // widthRange: 'F2 G'
144
+ }
145
+ },
129
146
 
130
- $setStateCollection: () => DESIGN_SYSTEM_ITEMS
147
+ $setStateCollection: ({ state }) => state.data
131
148
  }
132
149
 
133
150
  export default {
151
+ state,
152
+
134
153
  SectionHeader: {
135
154
  margin: '- - C1',
136
155
  title: 'Design System takeaways',
package/src/pages/Library/index.js CHANGED
@@ -3,7 +3,7 @@
3
3
  import { ComponentTemplate } from '@symbo.ls/components'
4
4
  import { Page } from '../../components'
5
5
 
6
- import { LIBRARY } from '../../../.symbols'
6
+ import { COMPONENTS } from '../../../.symbols'
7
7
 
8
8
  export const Library = {
9
9
  extend: Page,
@@ -27,6 +27,17 @@ export const Library = {
27
27
  },
28
28
 
29
29
  childExtend: ComponentTemplate,
30
- $setStateCollection: () => LIBRARY
30
+ $setStateCollection: () => COMPONENTS
31
+ },
32
+
33
+ Overlay: {
34
+ inset: '50% 0 0',
35
+ style: {
36
+ WebkitMaskImage: '-webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))'
37
+ },
38
+
39
+ H1: {
40
+
41
+ }
31
42
  }
32
43
  }
package/user_data/byld.js CHANGED
@@ -77,6 +77,8 @@ const TYPOGRAPHY = {
77
77
  ratio: 1.125,
78
78
  subSequence: true,
79
79
 
80
+ styles: {},
81
+
80
82
  '@mobileL': {
81
83
  base: 15,
82
84
  ratio: 1.125