@adamjanicki/ui 1.6.9 → 1.7.0

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 (2) hide show
  1. package/package.json +1 -1
  2. package/utils/transformVfx.js +188 -97
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adamjanicki/ui",
3
- "version": "1.6.9",
3
+ "version": "1.7.0",
4
4
  "description": "Basic UI components and hooks for React in TypeScript",
5
5
  "type": "module",
6
6
  "main": "./index.js",
package/utils/transformVfx.js CHANGED
@@ -1,105 +1,196 @@
1
- export default function transformVfx(vfx) {
2
- if (!vfx)
3
- return null;
4
- var pos = vfx.pos, axis = vfx.axis, wrap = vfx.wrap, align = vfx.align, justify = vfx.justify, gap = vfx.gap, overflow = vfx.overflow, overflowX = vfx.overflowX, overflowY = vfx.overflowY, z = vfx.z, padding = vfx.padding, paddingX = vfx.paddingX, paddingY = vfx.paddingY, paddingTop = vfx.paddingTop, paddingBottom = vfx.paddingBottom, paddingLeft = vfx.paddingLeft, paddingRight = vfx.paddingRight, margin = vfx.margin, marginX = vfx.marginX, marginY = vfx.marginY, marginTop = vfx.marginTop, marginBottom = vfx.marginBottom, marginLeft = vfx.marginLeft, marginRight = vfx.marginRight, width = vfx.width, height = vfx.height, maxWidth = vfx.maxWidth, maxHeight = vfx.maxHeight, border = vfx.border, borderTop = vfx.borderTop, borderBottom = vfx.borderBottom, borderRight = vfx.borderRight, borderLeft = vfx.borderLeft, borderColor = vfx.borderColor, borderStyle = vfx.borderStyle, borderWidth = vfx.borderWidth, fontSize = vfx.fontSize, fontWeight = vfx.fontWeight, textAlign = vfx.textAlign, italics = vfx.italics, radius = vfx.radius, shadow = vfx.shadow, color = vfx.color, backgroundColor = vfx.backgroundColor, opacity = vfx.opacity, cursor = vfx.cursor;
5
- var classes = [];
1
+ var transformers = {
6
2
  // --- Layout ---
7
- if (pos)
8
- classes.push("aui-pos-".concat(pos));
9
- if (axis)
10
- classes.push("aui-flex-".concat(axis));
11
- if (wrap)
12
- classes.push("aui-flex-wrap");
13
- if (align)
14
- classes.push("aui-align-".concat(align));
15
- if (justify)
16
- classes.push("aui-justify-".concat(justify));
17
- if (gap)
18
- classes.push("aui-gap-".concat(gap));
19
- if (overflow)
20
- classes.push("aui-ov-".concat(overflow));
21
- if (overflowX)
22
- classes.push("aui-ov-x-".concat(overflowX));
23
- if (overflowY)
24
- classes.push("aui-ov-y-".concat(overflowY));
25
- if (z)
26
- classes.push("aui-z-".concat(z));
3
+ pos: function (classes, _a) {
4
+ var pos = _a.pos;
5
+ return classes.push("aui-pos-".concat(pos));
6
+ },
7
+ axis: function (classes, _a) {
8
+ var axis = _a.axis;
9
+ return classes.push("aui-flex-".concat(axis));
10
+ },
11
+ gap: function (classes, _a) {
12
+ var gap = _a.gap;
13
+ return classes.push("aui-gap-".concat(gap));
14
+ },
15
+ align: function (classes, _a) {
16
+ var align = _a.align;
17
+ return classes.push("aui-align-".concat(align));
18
+ },
19
+ justify: function (classes, _a) {
20
+ var justify = _a.justify;
21
+ return classes.push("aui-justify-".concat(justify));
22
+ },
23
+ wrap: function (classes) { return classes.push("aui-flex-wrap"); },
24
+ overflow: function (classes, _a) {
25
+ var overflow = _a.overflow;
26
+ return classes.push("aui-ov-".concat(overflow));
27
+ },
28
+ overflowX: function (classes, _a) {
29
+ var overflowX = _a.overflowX;
30
+ return classes.push("aui-ov-x-".concat(overflowX));
31
+ },
32
+ overflowY: function (classes, _a) {
33
+ var overflowY = _a.overflowY;
34
+ return classes.push("aui-ov-y-".concat(overflowY));
35
+ },
36
+ z: function (classes, _a) {
37
+ var z = _a.z;
38
+ return classes.push("aui-z-".concat(z));
39
+ },
27
40
  // --- Spacing ---
28
- var pt = paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY;
29
- var pb = paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY;
30
- var pl = paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX;
31
- var pr = paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX;
32
- var mt = marginTop !== null && marginTop !== void 0 ? marginTop : marginY;
33
- var mb = marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY;
34
- var ml = marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX;
35
- var mr = marginRight !== null && marginRight !== void 0 ? marginRight : marginX;
36
- if (padding)
37
- classes.push("aui-pa-".concat(padding));
38
- if (pt)
39
- classes.push("aui-pt-".concat(pt));
40
- if (pb)
41
- classes.push("aui-pb-".concat(pb));
42
- if (pl)
43
- classes.push("aui-pl-".concat(pl));
44
- if (pr)
45
- classes.push("aui-pr-".concat(pr));
46
- if (margin)
47
- classes.push("aui-ma-".concat(margin));
48
- if (mt)
49
- classes.push("aui-mt-".concat(mt));
50
- if (mb)
51
- classes.push("aui-mb-".concat(mb));
52
- if (ml)
53
- classes.push("aui-ml-".concat(ml));
54
- if (mr)
55
- classes.push("aui-mr-".concat(mr));
41
+ padding: function (classes, _a) {
42
+ var padding = _a.padding;
43
+ return classes.push("aui-pa-".concat(padding));
44
+ },
45
+ paddingX: function (classes, _a) {
46
+ var paddingX = _a.paddingX, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight;
47
+ if (!paddingLeft)
48
+ classes.push("aui-pl-".concat(paddingX));
49
+ if (!paddingRight)
50
+ classes.push("aui-pr-".concat(paddingX));
51
+ },
52
+ paddingY: function (classes, _a) {
53
+ var paddingY = _a.paddingY, paddingTop = _a.paddingTop, paddingBottom = _a.paddingBottom;
54
+ if (!paddingTop)
55
+ classes.push("aui-pt-".concat(paddingY));
56
+ if (!paddingBottom)
57
+ classes.push("aui-pb-".concat(paddingY));
58
+ },
59
+ paddingTop: function (classes, _a) {
60
+ var paddingTop = _a.paddingTop;
61
+ return classes.push("aui-pt-".concat(paddingTop));
62
+ },
63
+ paddingBottom: function (classes, _a) {
64
+ var paddingBottom = _a.paddingBottom;
65
+ return classes.push("aui-pb-".concat(paddingBottom));
66
+ },
67
+ paddingLeft: function (classes, _a) {
68
+ var paddingLeft = _a.paddingLeft;
69
+ return classes.push("aui-pl-".concat(paddingLeft));
70
+ },
71
+ paddingRight: function (classes, _a) {
72
+ var paddingRight = _a.paddingRight;
73
+ return classes.push("aui-pr-".concat(paddingRight));
74
+ },
75
+ margin: function (classes, _a) {
76
+ var margin = _a.margin;
77
+ return classes.push("aui-ma-".concat(margin));
78
+ },
79
+ marginX: function (classes, _a) {
80
+ var marginX = _a.marginX, marginLeft = _a.marginLeft, marginRight = _a.marginRight;
81
+ if (!marginLeft)
82
+ classes.push("aui-ml-".concat(marginX));
83
+ if (!marginRight)
84
+ classes.push("aui-mr-".concat(marginX));
85
+ },
86
+ marginY: function (classes, _a) {
87
+ var marginY = _a.marginY, marginTop = _a.marginTop, marginBottom = _a.marginBottom;
88
+ if (!marginTop)
89
+ classes.push("aui-mt-".concat(marginY));
90
+ if (!marginBottom)
91
+ classes.push("aui-mb-".concat(marginY));
92
+ },
93
+ marginTop: function (classes, _a) {
94
+ var marginTop = _a.marginTop;
95
+ return classes.push("aui-mt-".concat(marginTop));
96
+ },
97
+ marginBottom: function (classes, _a) {
98
+ var marginBottom = _a.marginBottom;
99
+ return classes.push("aui-mb-".concat(marginBottom));
100
+ },
101
+ marginLeft: function (classes, _a) {
102
+ var marginLeft = _a.marginLeft;
103
+ return classes.push("aui-ml-".concat(marginLeft));
104
+ },
105
+ marginRight: function (classes, _a) {
106
+ var marginRight = _a.marginRight;
107
+ return classes.push("aui-mr-".concat(marginRight));
108
+ },
56
109
  // --- Dimensions ---
57
- if (width)
58
- classes.push("aui-w-".concat(width));
59
- if (height)
60
- classes.push("aui-h-".concat(height));
61
- if (maxWidth)
62
- classes.push("aui-mw-".concat(maxWidth));
63
- if (maxHeight)
64
- classes.push("aui-mh-".concat(maxHeight));
110
+ width: function (classes, _a) {
111
+ var width = _a.width;
112
+ return classes.push("aui-w-".concat(width));
113
+ },
114
+ maxWidth: function (classes, _a) {
115
+ var maxWidth = _a.maxWidth;
116
+ return classes.push("aui-mw-".concat(maxWidth));
117
+ },
118
+ height: function (classes, _a) {
119
+ var height = _a.height;
120
+ return classes.push("aui-h-".concat(height));
121
+ },
122
+ maxHeight: function (classes, _a) {
123
+ var maxHeight = _a.maxHeight;
124
+ return classes.push("aui-mh-".concat(maxHeight));
125
+ },
65
126
  // --- Borders ---
66
- if (border)
67
- classes.push("aui-ba");
68
- if (borderTop)
69
- classes.push("aui-bt");
70
- if (borderBottom)
71
- classes.push("aui-bb");
72
- if (borderLeft)
73
- classes.push("aui-bl");
74
- if (borderRight)
75
- classes.push("aui-br");
76
- if (borderWidth)
77
- classes.push("aui-bw-".concat(borderWidth));
78
- if (borderStyle)
79
- classes.push("aui-bs-".concat(borderStyle));
80
- if (borderColor)
81
- classes.push("aui-bc-".concat(borderColor));
127
+ radius: function (classes, _a) {
128
+ var radius = _a.radius;
129
+ return classes.push("aui-radius-".concat(radius));
130
+ },
131
+ border: function (classes) { return classes.push("aui-ba"); },
132
+ borderTop: function (classes) { return classes.push("aui-bt"); },
133
+ borderBottom: function (classes) { return classes.push("aui-bb"); },
134
+ borderLeft: function (classes) { return classes.push("aui-bl"); },
135
+ borderRight: function (classes) { return classes.push("aui-br"); },
136
+ borderWidth: function (classes, _a) {
137
+ var borderWidth = _a.borderWidth;
138
+ return classes.push("aui-bw-".concat(borderWidth));
139
+ },
140
+ borderStyle: function (classes, _a) {
141
+ var borderStyle = _a.borderStyle;
142
+ return classes.push("aui-bs-".concat(borderStyle));
143
+ },
144
+ borderColor: function (classes, _a) {
145
+ var borderColor = _a.borderColor;
146
+ return classes.push("aui-bc-".concat(borderColor));
147
+ },
148
+ // --- Effects ---
149
+ shadow: function (classes, _a) {
150
+ var shadow = _a.shadow;
151
+ return classes.push("aui-shadow-".concat(shadow));
152
+ },
153
+ opacity: function (classes, _a) {
154
+ var opacity = _a.opacity;
155
+ return classes.push("aui-op-".concat(opacity));
156
+ },
82
157
  // --- Typography ---
83
- if (fontSize)
84
- classes.push("aui-f-".concat(fontSize));
85
- if (fontWeight)
86
- classes.push("aui-fw-".concat(fontWeight));
87
- if (textAlign)
88
- classes.push("aui-ta-".concat(textAlign));
89
- if (italics)
90
- classes.push("aui-it");
158
+ fontSize: function (classes, _a) {
159
+ var fontSize = _a.fontSize;
160
+ return classes.push("aui-f-".concat(fontSize));
161
+ },
162
+ fontWeight: function (classes, _a) {
163
+ var fontWeight = _a.fontWeight;
164
+ return classes.push("aui-fw-".concat(fontWeight));
165
+ },
166
+ textAlign: function (classes, _a) {
167
+ var textAlign = _a.textAlign;
168
+ return classes.push("aui-ta-".concat(textAlign));
169
+ },
170
+ italics: function (classes) { return classes.push("aui-it"); },
171
+ // --- Colors ---
172
+ color: function (classes, _a) {
173
+ var color = _a.color;
174
+ return classes.push("aui-c-".concat(color));
175
+ },
176
+ backgroundColor: function (classes, _a) {
177
+ var backgroundColor = _a.backgroundColor;
178
+ return classes.push("aui-bg-".concat(backgroundColor));
179
+ },
91
180
  // --- Misc ---
92
- if (radius)
93
- classes.push("aui-radius-".concat(radius));
94
- if (shadow)
95
- classes.push("aui-shadow-".concat(shadow));
96
- if (color)
97
- classes.push("aui-c-".concat(color));
98
- if (backgroundColor)
99
- classes.push("aui-bg-".concat(backgroundColor));
100
- if (opacity)
101
- classes.push("aui-op-".concat(opacity));
102
- if (cursor)
103
- classes.push("aui-cur-".concat(cursor));
181
+ cursor: function (classes, _a) {
182
+ var cursor = _a.cursor;
183
+ return classes.push("aui-cursor-".concat(cursor));
184
+ },
185
+ };
186
+ // Main function
187
+ export default function transformVfx(vfx) {
188
+ if (!vfx)
189
+ return null;
190
+ var classes = [];
191
+ for (var key in vfx) {
192
+ var transformer = transformers[key];
193
+ transformer(classes, vfx);
194
+ }
104
195
  return classes.join(" ") || null;
105
196
  }