@datametria/vue-components 2.3.1 → 2.4.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.
- package/README.md +625 -594
- package/dist/index.es.js +1962 -1887
- package/dist/index.umd.js +6 -6
- package/dist/src/components/DatametriaForm.vue.d.ts +1 -1
- package/dist/src/components/DatametriaInput.vue.d.ts +9 -1
- package/dist/src/components/DatametriaSelect.vue.d.ts +10 -1
- package/dist/vue-components.css +1 -1
- package/package.json +103 -102
- package/src/components/DatametriaAlert.vue +151 -133
- package/src/components/DatametriaAutocomplete.vue +250 -229
- package/src/components/DatametriaAvatar.vue +256 -238
- package/src/components/DatametriaBadge.vue +101 -96
- package/src/components/DatametriaBreadcrumb.vue +132 -128
- package/src/components/DatametriaButton.vue +191 -173
- package/src/components/DatametriaCard.vue +84 -66
- package/src/components/DatametriaCheckbox.vue +197 -193
- package/src/components/DatametriaCheckboxGroup.vue +56 -38
- package/src/components/DatametriaChip.vue +159 -141
- package/src/components/DatametriaContainer.vue +70 -52
- package/src/components/DatametriaDataTable.vue +318 -300
- package/src/components/DatametriaDatePicker.vue +396 -378
- package/src/components/DatametriaDialog.vue +297 -293
- package/src/components/DatametriaDivider.vue +105 -98
- package/src/components/DatametriaDropdown.vue +356 -350
- package/src/components/DatametriaEmpty.vue +155 -151
- package/src/components/DatametriaFileUpload.vue +413 -395
- package/src/components/DatametriaFloatingBar.vue +144 -126
- package/src/components/DatametriaForm.vue +174 -156
- package/src/components/DatametriaFormItem.vue +183 -179
- package/src/components/DatametriaGrid.vue +55 -37
- package/src/components/DatametriaInput.vue +314 -263
- package/src/components/DatametriaMenu.vue +618 -600
- package/src/components/DatametriaModal.vue +147 -129
- package/src/components/DatametriaNavbar.vue +277 -223
- package/src/components/DatametriaPagination.vue +375 -371
- package/src/components/DatametriaPasswordInput.vue +444 -426
- package/src/components/DatametriaPopconfirm.vue +240 -234
- package/src/components/DatametriaProgress.vue +228 -224
- package/src/components/DatametriaRadio.vue +151 -147
- package/src/components/DatametriaRadioGroup.vue +55 -37
- package/src/components/DatametriaResult.vue +135 -131
- package/src/components/DatametriaSelect.vue +311 -211
- package/src/components/DatametriaSidebar.vue +294 -222
- package/src/components/DatametriaSkeleton.vue +257 -234
- package/src/components/DatametriaSlider.vue +409 -391
- package/src/components/DatametriaSortableTable.vue +820 -802
- package/src/components/DatametriaSpinner.vue +114 -110
- package/src/components/DatametriaSteps.vue +318 -312
- package/src/components/DatametriaSwitch.vue +146 -142
- package/src/components/DatametriaTabPane.vue +94 -76
- package/src/components/DatametriaTable.vue +118 -100
- package/src/components/DatametriaTabs.vue +315 -297
- package/src/components/DatametriaTextarea.vue +213 -195
- package/src/components/DatametriaTimePicker.vue +317 -299
- package/src/components/DatametriaToast.vue +176 -176
- package/src/components/DatametriaTooltip.vue +421 -400
- package/src/components/DatametriaTree.vue +126 -122
- package/src/components/DatametriaTreeNode.vue +176 -172
- package/src/components/DatametriaUpload.vue +379 -361
- package/src/components/__tests__/DatametriaAlert.test.js +35 -35
- package/src/components/__tests__/DatametriaAlert.test.ts +190 -190
- package/src/components/__tests__/DatametriaAvatar.test.ts +151 -151
- package/src/components/__tests__/DatametriaBadge.test.js +29 -29
- package/src/components/__tests__/DatametriaBadge.test.ts +167 -167
- package/src/components/__tests__/DatametriaBreadcrumb.test.ts +187 -0
- package/src/components/__tests__/DatametriaButton.test.js +30 -30
- package/src/components/__tests__/DatametriaButton.test.ts +283 -283
- package/src/components/__tests__/DatametriaCard.test.ts +201 -201
- package/src/components/__tests__/DatametriaCheckbox.test.ts +204 -0
- package/src/components/__tests__/DatametriaChip.test.js +38 -38
- package/src/components/__tests__/DatametriaContainer.test.ts +52 -52
- package/src/components/__tests__/DatametriaDialog.test.ts +338 -0
- package/src/components/__tests__/DatametriaDivider.test.ts +54 -54
- package/src/components/__tests__/DatametriaDropdown.test.ts +357 -0
- package/src/components/__tests__/DatametriaEmpty.test.ts +261 -0
- package/src/components/__tests__/DatametriaFileUpload.test.ts +290 -290
- package/src/components/__tests__/DatametriaFloatingBar.test.ts +137 -137
- package/src/components/__tests__/DatametriaForm.test.ts +96 -0
- package/src/components/__tests__/DatametriaFormItem.test.ts +58 -0
- package/src/components/__tests__/DatametriaGrid.test.ts +31 -31
- package/src/components/__tests__/DatametriaInput.test.ts +72 -72
- package/src/components/__tests__/DatametriaMenu.test.ts +366 -366
- package/src/components/__tests__/DatametriaModal.test.ts +86 -86
- package/src/components/__tests__/DatametriaNavbar.test.js +48 -48
- package/src/components/__tests__/DatametriaNavbar.test.ts +203 -203
- package/src/components/__tests__/DatametriaPasswordInput.test.js +305 -305
- package/src/components/__tests__/DatametriaRadio.test.ts +195 -0
- package/src/components/__tests__/DatametriaSelect.test.ts +77 -77
- package/src/components/__tests__/DatametriaSidebar.test.ts +169 -169
- package/src/components/__tests__/DatametriaSlider.test.ts +261 -261
- package/src/components/__tests__/DatametriaSortableTable.test.js +168 -168
- package/src/components/__tests__/DatametriaSpinner.test.ts +156 -156
- package/src/components/__tests__/DatametriaSteps.test.ts +211 -0
- package/src/components/__tests__/DatametriaSwitch.test.ts +129 -0
- package/src/components/__tests__/DatametriaTabPane.test.ts +205 -0
- package/src/components/__tests__/DatametriaTable.test.ts +97 -97
- package/src/components/__tests__/DatametriaTabs.test.ts +232 -232
- package/src/components/__tests__/DatametriaToast.test.js +48 -48
- package/src/components/__tests__/DatametriaToast.test.ts +99 -99
- package/src/components/__tests__/DatametriaTree.test.ts +376 -0
- package/src/components/__tests__/index.test.ts +48 -0
- package/src/composables/useAccessibilityScale.ts +94 -94
- package/src/composables/useBreakpoints.ts +82 -82
- package/src/composables/useHapticFeedback.ts +439 -439
- package/src/composables/useRipple.ts +218 -218
- package/src/composables/useTheme.ts +5 -1
- package/src/index.ts +84 -84
- package/src/stories/Variants.stories.js +95 -95
- package/src/styles/design-tokens.css +623 -623
- package/src/theme/ThemeProvider.vue +96 -96
- package/src/theme/__tests__/ThemeProvider.test.ts +208 -208
- package/src/theme/__tests__/constants.test.ts +31 -31
- package/src/theme/__tests__/presets.test.ts +166 -166
- package/src/theme/__tests__/tokens.test.ts +155 -155
- package/src/theme/__tests__/types.test.ts +153 -153
- package/src/theme/__tests__/useTheme.test.ts +146 -146
- package/src/theme/constants.ts +14 -14
- package/src/theme/index.ts +12 -12
- package/src/theme/presets/datametria.ts +94 -94
- package/src/theme/presets/default.ts +94 -94
- package/src/theme/presets/index.ts +8 -8
- package/src/theme/tokens/colors.ts +28 -28
- package/src/theme/tokens/index.ts +47 -47
- package/src/theme/tokens/spacing.ts +21 -21
- package/src/theme/tokens/typography.ts +35 -35
- package/src/theme/types.ts +111 -111
- package/src/theme/useTheme.ts +28 -28
- package/src/types/index.ts +55 -55
|
@@ -1,166 +1,166 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Theme Presets Tests
|
|
3
|
-
* @author Vander Loto - CTO DATAMETRIA
|
|
4
|
-
* @date 13/11/2025
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { describe, it, expect } from 'vitest'
|
|
8
|
-
import { datametriaTheme, defaultTheme } from '../presets'
|
|
9
|
-
|
|
10
|
-
describe('Theme Presets', () => {
|
|
11
|
-
describe('DATAMETRIA Theme', () => {
|
|
12
|
-
it('should have correct name', () => {
|
|
13
|
-
expect(datametriaTheme.name).toBe('DATAMETRIA')
|
|
14
|
-
})
|
|
15
|
-
|
|
16
|
-
it('should have DATAMETRIA brand colors', () => {
|
|
17
|
-
expect(datametriaTheme.tokens.colors.primary).toBe('#0072CE')
|
|
18
|
-
expect(datametriaTheme.tokens.colors.secondary).toBe('#4B0078')
|
|
19
|
-
})
|
|
20
|
-
|
|
21
|
-
it('should have semantic colors', () => {
|
|
22
|
-
expect(datametriaTheme.tokens.colors.success).toBe('#10b981')
|
|
23
|
-
expect(datametriaTheme.tokens.colors.warning).toBe('#f59e0b')
|
|
24
|
-
expect(datametriaTheme.tokens.colors.error).toBe('#ef4444')
|
|
25
|
-
expect(datametriaTheme.tokens.colors.info).toBe('#06b6d4')
|
|
26
|
-
})
|
|
27
|
-
|
|
28
|
-
it('should have complete neutral scale', () => {
|
|
29
|
-
const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
|
|
30
|
-
neutralKeys.forEach(key => {
|
|
31
|
-
expect(datametriaTheme.tokens.colors.neutral).toHaveProperty(key)
|
|
32
|
-
})
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
it('should have typography tokens', () => {
|
|
36
|
-
expect(datametriaTheme.tokens.typography.fontFamily.sans).toBeDefined()
|
|
37
|
-
expect(datametriaTheme.tokens.typography.fontSize.base).toBe('1rem')
|
|
38
|
-
expect(datametriaTheme.tokens.typography.fontWeight.bold).toBe(700)
|
|
39
|
-
})
|
|
40
|
-
|
|
41
|
-
it('should have spacing tokens', () => {
|
|
42
|
-
expect(datametriaTheme.tokens.spacing[0]).toBe('0')
|
|
43
|
-
expect(datametriaTheme.tokens.spacing[4]).toBe('1rem')
|
|
44
|
-
expect(datametriaTheme.tokens.spacing[8]).toBe('2rem')
|
|
45
|
-
})
|
|
46
|
-
|
|
47
|
-
it('should have radius tokens', () => {
|
|
48
|
-
expect(datametriaTheme.tokens.radius.none).toBe('0')
|
|
49
|
-
expect(datametriaTheme.tokens.radius.md).toBe('0.375rem')
|
|
50
|
-
expect(datametriaTheme.tokens.radius.full).toBe('9999px')
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
it('should have shadow tokens', () => {
|
|
54
|
-
expect(datametriaTheme.tokens.shadows.none).toBe('none')
|
|
55
|
-
expect(datametriaTheme.tokens.shadows.md).toContain('rgba')
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
it('should have transition tokens', () => {
|
|
59
|
-
expect(datametriaTheme.tokens.transitions.fast).toContain('150ms')
|
|
60
|
-
expect(datametriaTheme.tokens.transitions.base).toContain('200ms')
|
|
61
|
-
expect(datametriaTheme.tokens.transitions.slow).toContain('300ms')
|
|
62
|
-
})
|
|
63
|
-
|
|
64
|
-
it('should have all required token categories', () => {
|
|
65
|
-
expect(datametriaTheme.tokens).toHaveProperty('colors')
|
|
66
|
-
expect(datametriaTheme.tokens).toHaveProperty('typography')
|
|
67
|
-
expect(datametriaTheme.tokens).toHaveProperty('spacing')
|
|
68
|
-
expect(datametriaTheme.tokens).toHaveProperty('radius')
|
|
69
|
-
expect(datametriaTheme.tokens).toHaveProperty('shadows')
|
|
70
|
-
expect(datametriaTheme.tokens).toHaveProperty('transitions')
|
|
71
|
-
})
|
|
72
|
-
})
|
|
73
|
-
|
|
74
|
-
describe('Default Theme', () => {
|
|
75
|
-
it('should have correct name', () => {
|
|
76
|
-
expect(defaultTheme.name).toBe('Default')
|
|
77
|
-
})
|
|
78
|
-
|
|
79
|
-
it('should have generic brand colors', () => {
|
|
80
|
-
expect(defaultTheme.tokens.colors.primary).toBe('#3b82f6')
|
|
81
|
-
expect(defaultTheme.tokens.colors.secondary).toBe('#8b5cf6')
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
it('should have semantic colors', () => {
|
|
85
|
-
expect(defaultTheme.tokens.colors.success).toBe('#10b981')
|
|
86
|
-
expect(defaultTheme.tokens.colors.warning).toBe('#f59e0b')
|
|
87
|
-
expect(defaultTheme.tokens.colors.error).toBe('#ef4444')
|
|
88
|
-
expect(defaultTheme.tokens.colors.info).toBe('#06b6d4')
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
it('should have complete neutral scale', () => {
|
|
92
|
-
const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
|
|
93
|
-
neutralKeys.forEach(key => {
|
|
94
|
-
expect(defaultTheme.tokens.colors.neutral).toHaveProperty(key)
|
|
95
|
-
})
|
|
96
|
-
})
|
|
97
|
-
|
|
98
|
-
it('should have typography tokens', () => {
|
|
99
|
-
expect(defaultTheme.tokens.typography.fontFamily.sans).toBeDefined()
|
|
100
|
-
expect(defaultTheme.tokens.typography.fontSize.base).toBe('1rem')
|
|
101
|
-
expect(defaultTheme.tokens.typography.fontWeight.bold).toBe(700)
|
|
102
|
-
})
|
|
103
|
-
|
|
104
|
-
it('should have all required token categories', () => {
|
|
105
|
-
expect(defaultTheme.tokens).toHaveProperty('colors')
|
|
106
|
-
expect(defaultTheme.tokens).toHaveProperty('typography')
|
|
107
|
-
expect(defaultTheme.tokens).toHaveProperty('spacing')
|
|
108
|
-
expect(defaultTheme.tokens).toHaveProperty('radius')
|
|
109
|
-
expect(defaultTheme.tokens).toHaveProperty('shadows')
|
|
110
|
-
expect(defaultTheme.tokens).toHaveProperty('transitions')
|
|
111
|
-
})
|
|
112
|
-
})
|
|
113
|
-
|
|
114
|
-
describe('Theme Comparison', () => {
|
|
115
|
-
it('should have different primary colors', () => {
|
|
116
|
-
expect(datametriaTheme.tokens.colors.primary).not.toBe(defaultTheme.tokens.colors.primary)
|
|
117
|
-
})
|
|
118
|
-
|
|
119
|
-
it('should have different secondary colors', () => {
|
|
120
|
-
expect(datametriaTheme.tokens.colors.secondary).not.toBe(defaultTheme.tokens.colors.secondary)
|
|
121
|
-
})
|
|
122
|
-
|
|
123
|
-
it('should have same semantic colors', () => {
|
|
124
|
-
expect(datametriaTheme.tokens.colors.success).toBe(defaultTheme.tokens.colors.success)
|
|
125
|
-
expect(datametriaTheme.tokens.colors.warning).toBe(defaultTheme.tokens.colors.warning)
|
|
126
|
-
expect(datametriaTheme.tokens.colors.error).toBe(defaultTheme.tokens.colors.error)
|
|
127
|
-
})
|
|
128
|
-
|
|
129
|
-
it('should have same neutral scale', () => {
|
|
130
|
-
expect(datametriaTheme.tokens.colors.neutral).toEqual(defaultTheme.tokens.colors.neutral)
|
|
131
|
-
})
|
|
132
|
-
|
|
133
|
-
it('should have same spacing scale', () => {
|
|
134
|
-
expect(datametriaTheme.tokens.spacing).toEqual(defaultTheme.tokens.spacing)
|
|
135
|
-
})
|
|
136
|
-
|
|
137
|
-
it('should have same radius scale', () => {
|
|
138
|
-
expect(datametriaTheme.tokens.radius).toEqual(defaultTheme.tokens.radius)
|
|
139
|
-
})
|
|
140
|
-
})
|
|
141
|
-
|
|
142
|
-
describe('Theme Validation', () => {
|
|
143
|
-
it('DATAMETRIA theme should be valid', () => {
|
|
144
|
-
expect(datametriaTheme.name).toBeTruthy()
|
|
145
|
-
expect(datametriaTheme.tokens).toBeDefined()
|
|
146
|
-
expect(typeof datametriaTheme.tokens.colors.primary).toBe('string')
|
|
147
|
-
})
|
|
148
|
-
|
|
149
|
-
it('Default theme should be valid', () => {
|
|
150
|
-
expect(defaultTheme.name).toBeTruthy()
|
|
151
|
-
expect(defaultTheme.tokens).toBeDefined()
|
|
152
|
-
expect(typeof defaultTheme.tokens.colors.primary).toBe('string')
|
|
153
|
-
})
|
|
154
|
-
|
|
155
|
-
it('should have valid hex colors', () => {
|
|
156
|
-
const hexRegex = /^#[0-9A-Fa-f]{6}$/
|
|
157
|
-
expect(datametriaTheme.tokens.colors.primary).toMatch(hexRegex)
|
|
158
|
-
expect(defaultTheme.tokens.colors.primary).toMatch(hexRegex)
|
|
159
|
-
})
|
|
160
|
-
|
|
161
|
-
it('should have valid rem values', () => {
|
|
162
|
-
expect(datametriaTheme.tokens.spacing[4]).toMatch(/rem$/)
|
|
163
|
-
expect(defaultTheme.tokens.spacing[4]).toMatch(/rem$/)
|
|
164
|
-
})
|
|
165
|
-
})
|
|
166
|
-
})
|
|
1
|
+
/**
|
|
2
|
+
* Theme Presets Tests
|
|
3
|
+
* @author Vander Loto - CTO DATAMETRIA
|
|
4
|
+
* @date 13/11/2025
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { describe, it, expect } from 'vitest'
|
|
8
|
+
import { datametriaTheme, defaultTheme } from '../presets'
|
|
9
|
+
|
|
10
|
+
describe('Theme Presets', () => {
|
|
11
|
+
describe('DATAMETRIA Theme', () => {
|
|
12
|
+
it('should have correct name', () => {
|
|
13
|
+
expect(datametriaTheme.name).toBe('DATAMETRIA')
|
|
14
|
+
})
|
|
15
|
+
|
|
16
|
+
it('should have DATAMETRIA brand colors', () => {
|
|
17
|
+
expect(datametriaTheme.tokens.colors.primary).toBe('#0072CE')
|
|
18
|
+
expect(datametriaTheme.tokens.colors.secondary).toBe('#4B0078')
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
it('should have semantic colors', () => {
|
|
22
|
+
expect(datametriaTheme.tokens.colors.success).toBe('#10b981')
|
|
23
|
+
expect(datametriaTheme.tokens.colors.warning).toBe('#f59e0b')
|
|
24
|
+
expect(datametriaTheme.tokens.colors.error).toBe('#ef4444')
|
|
25
|
+
expect(datametriaTheme.tokens.colors.info).toBe('#06b6d4')
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
it('should have complete neutral scale', () => {
|
|
29
|
+
const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
|
|
30
|
+
neutralKeys.forEach(key => {
|
|
31
|
+
expect(datametriaTheme.tokens.colors.neutral).toHaveProperty(key)
|
|
32
|
+
})
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
it('should have typography tokens', () => {
|
|
36
|
+
expect(datametriaTheme.tokens.typography.fontFamily.sans).toBeDefined()
|
|
37
|
+
expect(datametriaTheme.tokens.typography.fontSize.base).toBe('1rem')
|
|
38
|
+
expect(datametriaTheme.tokens.typography.fontWeight.bold).toBe(700)
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
it('should have spacing tokens', () => {
|
|
42
|
+
expect(datametriaTheme.tokens.spacing[0]).toBe('0')
|
|
43
|
+
expect(datametriaTheme.tokens.spacing[4]).toBe('1rem')
|
|
44
|
+
expect(datametriaTheme.tokens.spacing[8]).toBe('2rem')
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
it('should have radius tokens', () => {
|
|
48
|
+
expect(datametriaTheme.tokens.radius.none).toBe('0')
|
|
49
|
+
expect(datametriaTheme.tokens.radius.md).toBe('0.375rem')
|
|
50
|
+
expect(datametriaTheme.tokens.radius.full).toBe('9999px')
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
it('should have shadow tokens', () => {
|
|
54
|
+
expect(datametriaTheme.tokens.shadows.none).toBe('none')
|
|
55
|
+
expect(datametriaTheme.tokens.shadows.md).toContain('rgba')
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
it('should have transition tokens', () => {
|
|
59
|
+
expect(datametriaTheme.tokens.transitions.fast).toContain('150ms')
|
|
60
|
+
expect(datametriaTheme.tokens.transitions.base).toContain('200ms')
|
|
61
|
+
expect(datametriaTheme.tokens.transitions.slow).toContain('300ms')
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
it('should have all required token categories', () => {
|
|
65
|
+
expect(datametriaTheme.tokens).toHaveProperty('colors')
|
|
66
|
+
expect(datametriaTheme.tokens).toHaveProperty('typography')
|
|
67
|
+
expect(datametriaTheme.tokens).toHaveProperty('spacing')
|
|
68
|
+
expect(datametriaTheme.tokens).toHaveProperty('radius')
|
|
69
|
+
expect(datametriaTheme.tokens).toHaveProperty('shadows')
|
|
70
|
+
expect(datametriaTheme.tokens).toHaveProperty('transitions')
|
|
71
|
+
})
|
|
72
|
+
})
|
|
73
|
+
|
|
74
|
+
describe('Default Theme', () => {
|
|
75
|
+
it('should have correct name', () => {
|
|
76
|
+
expect(defaultTheme.name).toBe('Default')
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
it('should have generic brand colors', () => {
|
|
80
|
+
expect(defaultTheme.tokens.colors.primary).toBe('#3b82f6')
|
|
81
|
+
expect(defaultTheme.tokens.colors.secondary).toBe('#8b5cf6')
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
it('should have semantic colors', () => {
|
|
85
|
+
expect(defaultTheme.tokens.colors.success).toBe('#10b981')
|
|
86
|
+
expect(defaultTheme.tokens.colors.warning).toBe('#f59e0b')
|
|
87
|
+
expect(defaultTheme.tokens.colors.error).toBe('#ef4444')
|
|
88
|
+
expect(defaultTheme.tokens.colors.info).toBe('#06b6d4')
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
it('should have complete neutral scale', () => {
|
|
92
|
+
const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
|
|
93
|
+
neutralKeys.forEach(key => {
|
|
94
|
+
expect(defaultTheme.tokens.colors.neutral).toHaveProperty(key)
|
|
95
|
+
})
|
|
96
|
+
})
|
|
97
|
+
|
|
98
|
+
it('should have typography tokens', () => {
|
|
99
|
+
expect(defaultTheme.tokens.typography.fontFamily.sans).toBeDefined()
|
|
100
|
+
expect(defaultTheme.tokens.typography.fontSize.base).toBe('1rem')
|
|
101
|
+
expect(defaultTheme.tokens.typography.fontWeight.bold).toBe(700)
|
|
102
|
+
})
|
|
103
|
+
|
|
104
|
+
it('should have all required token categories', () => {
|
|
105
|
+
expect(defaultTheme.tokens).toHaveProperty('colors')
|
|
106
|
+
expect(defaultTheme.tokens).toHaveProperty('typography')
|
|
107
|
+
expect(defaultTheme.tokens).toHaveProperty('spacing')
|
|
108
|
+
expect(defaultTheme.tokens).toHaveProperty('radius')
|
|
109
|
+
expect(defaultTheme.tokens).toHaveProperty('shadows')
|
|
110
|
+
expect(defaultTheme.tokens).toHaveProperty('transitions')
|
|
111
|
+
})
|
|
112
|
+
})
|
|
113
|
+
|
|
114
|
+
describe('Theme Comparison', () => {
|
|
115
|
+
it('should have different primary colors', () => {
|
|
116
|
+
expect(datametriaTheme.tokens.colors.primary).not.toBe(defaultTheme.tokens.colors.primary)
|
|
117
|
+
})
|
|
118
|
+
|
|
119
|
+
it('should have different secondary colors', () => {
|
|
120
|
+
expect(datametriaTheme.tokens.colors.secondary).not.toBe(defaultTheme.tokens.colors.secondary)
|
|
121
|
+
})
|
|
122
|
+
|
|
123
|
+
it('should have same semantic colors', () => {
|
|
124
|
+
expect(datametriaTheme.tokens.colors.success).toBe(defaultTheme.tokens.colors.success)
|
|
125
|
+
expect(datametriaTheme.tokens.colors.warning).toBe(defaultTheme.tokens.colors.warning)
|
|
126
|
+
expect(datametriaTheme.tokens.colors.error).toBe(defaultTheme.tokens.colors.error)
|
|
127
|
+
})
|
|
128
|
+
|
|
129
|
+
it('should have same neutral scale', () => {
|
|
130
|
+
expect(datametriaTheme.tokens.colors.neutral).toEqual(defaultTheme.tokens.colors.neutral)
|
|
131
|
+
})
|
|
132
|
+
|
|
133
|
+
it('should have same spacing scale', () => {
|
|
134
|
+
expect(datametriaTheme.tokens.spacing).toEqual(defaultTheme.tokens.spacing)
|
|
135
|
+
})
|
|
136
|
+
|
|
137
|
+
it('should have same radius scale', () => {
|
|
138
|
+
expect(datametriaTheme.tokens.radius).toEqual(defaultTheme.tokens.radius)
|
|
139
|
+
})
|
|
140
|
+
})
|
|
141
|
+
|
|
142
|
+
describe('Theme Validation', () => {
|
|
143
|
+
it('DATAMETRIA theme should be valid', () => {
|
|
144
|
+
expect(datametriaTheme.name).toBeTruthy()
|
|
145
|
+
expect(datametriaTheme.tokens).toBeDefined()
|
|
146
|
+
expect(typeof datametriaTheme.tokens.colors.primary).toBe('string')
|
|
147
|
+
})
|
|
148
|
+
|
|
149
|
+
it('Default theme should be valid', () => {
|
|
150
|
+
expect(defaultTheme.name).toBeTruthy()
|
|
151
|
+
expect(defaultTheme.tokens).toBeDefined()
|
|
152
|
+
expect(typeof defaultTheme.tokens.colors.primary).toBe('string')
|
|
153
|
+
})
|
|
154
|
+
|
|
155
|
+
it('should have valid hex colors', () => {
|
|
156
|
+
const hexRegex = /^#[0-9A-Fa-f]{6}$/
|
|
157
|
+
expect(datametriaTheme.tokens.colors.primary).toMatch(hexRegex)
|
|
158
|
+
expect(defaultTheme.tokens.colors.primary).toMatch(hexRegex)
|
|
159
|
+
})
|
|
160
|
+
|
|
161
|
+
it('should have valid rem values', () => {
|
|
162
|
+
expect(datametriaTheme.tokens.spacing[4]).toMatch(/rem$/)
|
|
163
|
+
expect(defaultTheme.tokens.spacing[4]).toMatch(/rem$/)
|
|
164
|
+
})
|
|
165
|
+
})
|
|
166
|
+
})
|
|
@@ -1,155 +1,155 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Theme Tokens Tests
|
|
3
|
-
* @author Vander Loto - CTO DATAMETRIA
|
|
4
|
-
* @date 13/11/2025
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import { describe, it, expect } from 'vitest'
|
|
8
|
-
import {
|
|
9
|
-
defaultColors,
|
|
10
|
-
defaultTypography,
|
|
11
|
-
defaultSpacing,
|
|
12
|
-
defaultRadius,
|
|
13
|
-
defaultShadows,
|
|
14
|
-
defaultTransitions,
|
|
15
|
-
defaultTokens
|
|
16
|
-
} from '../tokens'
|
|
17
|
-
|
|
18
|
-
describe('Default Tokens', () => {
|
|
19
|
-
describe('Colors', () => {
|
|
20
|
-
it('should have all required color properties', () => {
|
|
21
|
-
expect(defaultColors).toHaveProperty('primary')
|
|
22
|
-
expect(defaultColors).toHaveProperty('secondary')
|
|
23
|
-
expect(defaultColors).toHaveProperty('success')
|
|
24
|
-
expect(defaultColors).toHaveProperty('warning')
|
|
25
|
-
expect(defaultColors).toHaveProperty('error')
|
|
26
|
-
expect(defaultColors).toHaveProperty('info')
|
|
27
|
-
expect(defaultColors).toHaveProperty('neutral')
|
|
28
|
-
})
|
|
29
|
-
|
|
30
|
-
it('should have DATAMETRIA brand colors', () => {
|
|
31
|
-
expect(defaultColors.primary).toBe('#0072CE')
|
|
32
|
-
expect(defaultColors.secondary).toBe('#4B0078')
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
it('should have complete neutral scale', () => {
|
|
36
|
-
const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
|
|
37
|
-
neutralKeys.forEach(key => {
|
|
38
|
-
expect(defaultColors.neutral).toHaveProperty(key)
|
|
39
|
-
expect(typeof defaultColors.neutral[key as keyof typeof defaultColors.neutral]).toBe('string')
|
|
40
|
-
})
|
|
41
|
-
})
|
|
42
|
-
|
|
43
|
-
it('should have valid hex color format', () => {
|
|
44
|
-
const hexRegex = /^#[0-9A-Fa-f]{6}$/
|
|
45
|
-
expect(defaultColors.primary).toMatch(hexRegex)
|
|
46
|
-
expect(defaultColors.secondary).toMatch(hexRegex)
|
|
47
|
-
expect(defaultColors.success).toMatch(hexRegex)
|
|
48
|
-
})
|
|
49
|
-
})
|
|
50
|
-
|
|
51
|
-
describe('Typography', () => {
|
|
52
|
-
it('should have font families', () => {
|
|
53
|
-
expect(defaultTypography.fontFamily).toHaveProperty('sans')
|
|
54
|
-
expect(defaultTypography.fontFamily).toHaveProperty('mono')
|
|
55
|
-
expect(typeof defaultTypography.fontFamily.sans).toBe('string')
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
it('should have complete font size scale', () => {
|
|
59
|
-
const sizeKeys = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl']
|
|
60
|
-
sizeKeys.forEach(key => {
|
|
61
|
-
expect(defaultTypography.fontSize).toHaveProperty(key)
|
|
62
|
-
})
|
|
63
|
-
})
|
|
64
|
-
|
|
65
|
-
it('should have font weights', () => {
|
|
66
|
-
expect(defaultTypography.fontWeight.normal).toBe(400)
|
|
67
|
-
expect(defaultTypography.fontWeight.medium).toBe(500)
|
|
68
|
-
expect(defaultTypography.fontWeight.semibold).toBe(600)
|
|
69
|
-
expect(defaultTypography.fontWeight.bold).toBe(700)
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
it('should have line heights', () => {
|
|
73
|
-
expect(defaultTypography.lineHeight.tight).toBe(1.25)
|
|
74
|
-
expect(defaultTypography.lineHeight.normal).toBe(1.5)
|
|
75
|
-
expect(defaultTypography.lineHeight.relaxed).toBe(1.75)
|
|
76
|
-
})
|
|
77
|
-
})
|
|
78
|
-
|
|
79
|
-
describe('Spacing', () => {
|
|
80
|
-
it('should have complete spacing scale', () => {
|
|
81
|
-
const spacingKeys = ['0', '1', '2', '3', '4', '6', '8', '12', '16', '20', '24']
|
|
82
|
-
spacingKeys.forEach(key => {
|
|
83
|
-
expect(defaultSpacing).toHaveProperty(key)
|
|
84
|
-
})
|
|
85
|
-
})
|
|
86
|
-
|
|
87
|
-
it('should have valid rem values', () => {
|
|
88
|
-
expect(defaultSpacing[0]).toBe('0')
|
|
89
|
-
expect(defaultSpacing[4]).toBe('1rem')
|
|
90
|
-
expect(defaultSpacing[8]).toBe('2rem')
|
|
91
|
-
})
|
|
92
|
-
})
|
|
93
|
-
|
|
94
|
-
describe('Radius', () => {
|
|
95
|
-
it('should have all radius sizes', () => {
|
|
96
|
-
expect(defaultRadius).toHaveProperty('none')
|
|
97
|
-
expect(defaultRadius).toHaveProperty('sm')
|
|
98
|
-
expect(defaultRadius).toHaveProperty('md')
|
|
99
|
-
expect(defaultRadius).toHaveProperty('lg')
|
|
100
|
-
expect(defaultRadius).toHaveProperty('xl')
|
|
101
|
-
expect(defaultRadius).toHaveProperty('full')
|
|
102
|
-
})
|
|
103
|
-
|
|
104
|
-
it('should have valid values', () => {
|
|
105
|
-
expect(defaultRadius.none).toBe('0')
|
|
106
|
-
expect(defaultRadius.full).toBe('9999px')
|
|
107
|
-
})
|
|
108
|
-
})
|
|
109
|
-
|
|
110
|
-
describe('Shadows', () => {
|
|
111
|
-
it('should have all shadow sizes', () => {
|
|
112
|
-
expect(defaultShadows).toHaveProperty('none')
|
|
113
|
-
expect(defaultShadows).toHaveProperty('sm')
|
|
114
|
-
expect(defaultShadows).toHaveProperty('md')
|
|
115
|
-
expect(defaultShadows).toHaveProperty('lg')
|
|
116
|
-
expect(defaultShadows).toHaveProperty('xl')
|
|
117
|
-
expect(defaultShadows).toHaveProperty('2xl')
|
|
118
|
-
})
|
|
119
|
-
|
|
120
|
-
it('should have valid shadow values', () => {
|
|
121
|
-
expect(defaultShadows.none).toBe('none')
|
|
122
|
-
expect(defaultShadows.sm).toContain('rgba')
|
|
123
|
-
})
|
|
124
|
-
})
|
|
125
|
-
|
|
126
|
-
describe('Transitions', () => {
|
|
127
|
-
it('should have all transition speeds', () => {
|
|
128
|
-
expect(defaultTransitions).toHaveProperty('fast')
|
|
129
|
-
expect(defaultTransitions).toHaveProperty('base')
|
|
130
|
-
expect(defaultTransitions).toHaveProperty('slow')
|
|
131
|
-
})
|
|
132
|
-
|
|
133
|
-
it('should have valid timing values', () => {
|
|
134
|
-
expect(defaultTransitions.fast).toContain('ms')
|
|
135
|
-
expect(defaultTransitions.base).toContain('cubic-bezier')
|
|
136
|
-
})
|
|
137
|
-
})
|
|
138
|
-
|
|
139
|
-
describe('Complete Token Set', () => {
|
|
140
|
-
it('should export complete default tokens', () => {
|
|
141
|
-
expect(defaultTokens).toHaveProperty('colors')
|
|
142
|
-
expect(defaultTokens).toHaveProperty('typography')
|
|
143
|
-
expect(defaultTokens).toHaveProperty('spacing')
|
|
144
|
-
expect(defaultTokens).toHaveProperty('radius')
|
|
145
|
-
expect(defaultTokens).toHaveProperty('shadows')
|
|
146
|
-
expect(defaultTokens).toHaveProperty('transitions')
|
|
147
|
-
})
|
|
148
|
-
|
|
149
|
-
it('should have consistent structure', () => {
|
|
150
|
-
expect(defaultTokens.colors).toBe(defaultColors)
|
|
151
|
-
expect(defaultTokens.typography).toBe(defaultTypography)
|
|
152
|
-
expect(defaultTokens.spacing).toBe(defaultSpacing)
|
|
153
|
-
})
|
|
154
|
-
})
|
|
155
|
-
})
|
|
1
|
+
/**
|
|
2
|
+
* Theme Tokens Tests
|
|
3
|
+
* @author Vander Loto - CTO DATAMETRIA
|
|
4
|
+
* @date 13/11/2025
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { describe, it, expect } from 'vitest'
|
|
8
|
+
import {
|
|
9
|
+
defaultColors,
|
|
10
|
+
defaultTypography,
|
|
11
|
+
defaultSpacing,
|
|
12
|
+
defaultRadius,
|
|
13
|
+
defaultShadows,
|
|
14
|
+
defaultTransitions,
|
|
15
|
+
defaultTokens
|
|
16
|
+
} from '../tokens'
|
|
17
|
+
|
|
18
|
+
describe('Default Tokens', () => {
|
|
19
|
+
describe('Colors', () => {
|
|
20
|
+
it('should have all required color properties', () => {
|
|
21
|
+
expect(defaultColors).toHaveProperty('primary')
|
|
22
|
+
expect(defaultColors).toHaveProperty('secondary')
|
|
23
|
+
expect(defaultColors).toHaveProperty('success')
|
|
24
|
+
expect(defaultColors).toHaveProperty('warning')
|
|
25
|
+
expect(defaultColors).toHaveProperty('error')
|
|
26
|
+
expect(defaultColors).toHaveProperty('info')
|
|
27
|
+
expect(defaultColors).toHaveProperty('neutral')
|
|
28
|
+
})
|
|
29
|
+
|
|
30
|
+
it('should have DATAMETRIA brand colors', () => {
|
|
31
|
+
expect(defaultColors.primary).toBe('#0072CE')
|
|
32
|
+
expect(defaultColors.secondary).toBe('#4B0078')
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
it('should have complete neutral scale', () => {
|
|
36
|
+
const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
|
|
37
|
+
neutralKeys.forEach(key => {
|
|
38
|
+
expect(defaultColors.neutral).toHaveProperty(key)
|
|
39
|
+
expect(typeof defaultColors.neutral[key as keyof typeof defaultColors.neutral]).toBe('string')
|
|
40
|
+
})
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
it('should have valid hex color format', () => {
|
|
44
|
+
const hexRegex = /^#[0-9A-Fa-f]{6}$/
|
|
45
|
+
expect(defaultColors.primary).toMatch(hexRegex)
|
|
46
|
+
expect(defaultColors.secondary).toMatch(hexRegex)
|
|
47
|
+
expect(defaultColors.success).toMatch(hexRegex)
|
|
48
|
+
})
|
|
49
|
+
})
|
|
50
|
+
|
|
51
|
+
describe('Typography', () => {
|
|
52
|
+
it('should have font families', () => {
|
|
53
|
+
expect(defaultTypography.fontFamily).toHaveProperty('sans')
|
|
54
|
+
expect(defaultTypography.fontFamily).toHaveProperty('mono')
|
|
55
|
+
expect(typeof defaultTypography.fontFamily.sans).toBe('string')
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
it('should have complete font size scale', () => {
|
|
59
|
+
const sizeKeys = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl']
|
|
60
|
+
sizeKeys.forEach(key => {
|
|
61
|
+
expect(defaultTypography.fontSize).toHaveProperty(key)
|
|
62
|
+
})
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
it('should have font weights', () => {
|
|
66
|
+
expect(defaultTypography.fontWeight.normal).toBe(400)
|
|
67
|
+
expect(defaultTypography.fontWeight.medium).toBe(500)
|
|
68
|
+
expect(defaultTypography.fontWeight.semibold).toBe(600)
|
|
69
|
+
expect(defaultTypography.fontWeight.bold).toBe(700)
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
it('should have line heights', () => {
|
|
73
|
+
expect(defaultTypography.lineHeight.tight).toBe(1.25)
|
|
74
|
+
expect(defaultTypography.lineHeight.normal).toBe(1.5)
|
|
75
|
+
expect(defaultTypography.lineHeight.relaxed).toBe(1.75)
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
describe('Spacing', () => {
|
|
80
|
+
it('should have complete spacing scale', () => {
|
|
81
|
+
const spacingKeys = ['0', '1', '2', '3', '4', '6', '8', '12', '16', '20', '24']
|
|
82
|
+
spacingKeys.forEach(key => {
|
|
83
|
+
expect(defaultSpacing).toHaveProperty(key)
|
|
84
|
+
})
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
it('should have valid rem values', () => {
|
|
88
|
+
expect(defaultSpacing[0]).toBe('0')
|
|
89
|
+
expect(defaultSpacing[4]).toBe('1rem')
|
|
90
|
+
expect(defaultSpacing[8]).toBe('2rem')
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
describe('Radius', () => {
|
|
95
|
+
it('should have all radius sizes', () => {
|
|
96
|
+
expect(defaultRadius).toHaveProperty('none')
|
|
97
|
+
expect(defaultRadius).toHaveProperty('sm')
|
|
98
|
+
expect(defaultRadius).toHaveProperty('md')
|
|
99
|
+
expect(defaultRadius).toHaveProperty('lg')
|
|
100
|
+
expect(defaultRadius).toHaveProperty('xl')
|
|
101
|
+
expect(defaultRadius).toHaveProperty('full')
|
|
102
|
+
})
|
|
103
|
+
|
|
104
|
+
it('should have valid values', () => {
|
|
105
|
+
expect(defaultRadius.none).toBe('0')
|
|
106
|
+
expect(defaultRadius.full).toBe('9999px')
|
|
107
|
+
})
|
|
108
|
+
})
|
|
109
|
+
|
|
110
|
+
describe('Shadows', () => {
|
|
111
|
+
it('should have all shadow sizes', () => {
|
|
112
|
+
expect(defaultShadows).toHaveProperty('none')
|
|
113
|
+
expect(defaultShadows).toHaveProperty('sm')
|
|
114
|
+
expect(defaultShadows).toHaveProperty('md')
|
|
115
|
+
expect(defaultShadows).toHaveProperty('lg')
|
|
116
|
+
expect(defaultShadows).toHaveProperty('xl')
|
|
117
|
+
expect(defaultShadows).toHaveProperty('2xl')
|
|
118
|
+
})
|
|
119
|
+
|
|
120
|
+
it('should have valid shadow values', () => {
|
|
121
|
+
expect(defaultShadows.none).toBe('none')
|
|
122
|
+
expect(defaultShadows.sm).toContain('rgba')
|
|
123
|
+
})
|
|
124
|
+
})
|
|
125
|
+
|
|
126
|
+
describe('Transitions', () => {
|
|
127
|
+
it('should have all transition speeds', () => {
|
|
128
|
+
expect(defaultTransitions).toHaveProperty('fast')
|
|
129
|
+
expect(defaultTransitions).toHaveProperty('base')
|
|
130
|
+
expect(defaultTransitions).toHaveProperty('slow')
|
|
131
|
+
})
|
|
132
|
+
|
|
133
|
+
it('should have valid timing values', () => {
|
|
134
|
+
expect(defaultTransitions.fast).toContain('ms')
|
|
135
|
+
expect(defaultTransitions.base).toContain('cubic-bezier')
|
|
136
|
+
})
|
|
137
|
+
})
|
|
138
|
+
|
|
139
|
+
describe('Complete Token Set', () => {
|
|
140
|
+
it('should export complete default tokens', () => {
|
|
141
|
+
expect(defaultTokens).toHaveProperty('colors')
|
|
142
|
+
expect(defaultTokens).toHaveProperty('typography')
|
|
143
|
+
expect(defaultTokens).toHaveProperty('spacing')
|
|
144
|
+
expect(defaultTokens).toHaveProperty('radius')
|
|
145
|
+
expect(defaultTokens).toHaveProperty('shadows')
|
|
146
|
+
expect(defaultTokens).toHaveProperty('transitions')
|
|
147
|
+
})
|
|
148
|
+
|
|
149
|
+
it('should have consistent structure', () => {
|
|
150
|
+
expect(defaultTokens.colors).toBe(defaultColors)
|
|
151
|
+
expect(defaultTokens.typography).toBe(defaultTypography)
|
|
152
|
+
expect(defaultTokens.spacing).toBe(defaultSpacing)
|
|
153
|
+
})
|
|
154
|
+
})
|
|
155
|
+
})
|