@datametria/vue-components 1.2.0 → 2.0.1

package/src/theme/ThemeProvider.vue

@@ -0,0 +1,96 @@
+<!--
+  Theme Provider Component
+  @author Vander Loto - CTO DATAMETRIA
+  @date 13/11/2025
+-->
+
+<template>
+  <div :class="themeClass" :style="cssVariables">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import type { Theme } from './types'
+import { THEME_INJECTION_KEY, DEFAULT_THEME_PREFIX, CSS_VARIABLE_PREFIX } from './constants'
+
+interface Props {
+  theme: Theme
+  prefix?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefix: DEFAULT_THEME_PREFIX
+})
+
+// Provide theme to child components
+const themeRef = computed(() => props.theme)
+provide(THEME_INJECTION_KEY, themeRef)
+
+const themeClass = computed(() => `${props.prefix}-theme`)
+
+const cssVariables = computed(() => {
+  const vars: Record<string, string> = {}
+  const { tokens } = props.theme
+  const prefix = `${CSS_VARIABLE_PREFIX}${props.prefix}`
+
+  // Colors
+  vars[`${prefix}-primary`] = tokens.colors.primary
+  vars[`${prefix}-secondary`] = tokens.colors.secondary
+  vars[`${prefix}-success`] = tokens.colors.success
+  vars[`${prefix}-warning`] = tokens.colors.warning
+  vars[`${prefix}-error`] = tokens.colors.error
+  vars[`${prefix}-info`] = tokens.colors.info
+
+  // Neutral colors
+  Object.entries(tokens.colors.neutral).forEach(([key, value]) => {
+    vars[`${prefix}-neutral-${key}`] = value
+  })
+
+  // Typography - Font Family
+  vars[`${prefix}-font-sans`] = tokens.typography.fontFamily.sans
+  vars[`${prefix}-font-mono`] = tokens.typography.fontFamily.mono
+
+  // Typography - Font Size
+  Object.entries(tokens.typography.fontSize).forEach(([key, value]) => {
+    vars[`${prefix}-text-${key}`] = value
+  })
+
+  // Typography - Font Weight
+  Object.entries(tokens.typography.fontWeight).forEach(([key, value]) => {
+    vars[`${prefix}-font-${key}`] = value.toString()
+  })
+
+  // Typography - Line Height
+  Object.entries(tokens.typography.lineHeight).forEach(([key, value]) => {
+    vars[`${prefix}-leading-${key}`] = value.toString()
+  })
+
+  // Spacing
+  Object.entries(tokens.spacing).forEach(([key, value]) => {
+    vars[`${prefix}-space-${key}`] = value
+  })
+
+  // Radius
+  Object.entries(tokens.radius).forEach(([key, value]) => {
+    vars[`${prefix}-radius-${key}`] = value
+  })
+
+  // Shadows
+  Object.entries(tokens.shadows).forEach(([key, value]) => {
+    vars[`${prefix}-shadow-${key}`] = value
+  })
+
+  // Transitions
+  Object.entries(tokens.transitions).forEach(([key, value]) => {
+    vars[`${prefix}-transition-${key}`] = value
+  })
+
+  return vars
+})
+</script>
+
+<style scoped>
+/* Theme container - no additional styles needed */
+</style>

package/src/theme/__tests__/ThemeProvider.test.ts

@@ -0,0 +1,208 @@
+/**
+ * ThemeProvider Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import ThemeProvider from '../ThemeProvider.vue'
+import { useTheme } from '../useTheme'
+import { defaultTokens } from '../tokens'
+import type { Theme } from '../types'
+
+const testTheme: Theme = {
+  name: 'Test Theme',
+  tokens: defaultTokens
+}
+
+const customTheme: Theme = {
+  name: 'Custom Theme',
+  tokens: {
+    ...defaultTokens,
+    colors: {
+      ...defaultTokens.colors,
+      primary: '#FF0000',
+      secondary: '#00FF00'
+    }
+  }
+}
+
+describe('ThemeProvider', () => {
+  it('should render children', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: '<div class="test-child">Child Content</div>'
+      }
+    })
+
+    expect(wrapper.text()).toContain('Child Content')
+    expect(wrapper.find('.test-child').exists()).toBe(true)
+  })
+
+  it('should apply default theme class', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    expect(wrapper.classes()).toContain('dm-theme')
+  })
+
+  it('should apply custom prefix class', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme, prefix: 'custom' },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    expect(wrapper.classes()).toContain('custom-theme')
+  })
+
+  it('should generate CSS variables for colors', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-primary')
+    expect(style).toContain('#0072CE')
+    expect(style).toContain('--dm-secondary')
+    expect(style).toContain('#4B0078')
+  })
+
+  it('should generate CSS variables for neutral colors', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-neutral-50')
+    expect(style).toContain('--dm-neutral-900')
+  })
+
+  it('should generate CSS variables for typography', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-font-sans')
+    expect(style).toContain('--dm-text-base')
+    expect(style).toContain('--dm-font-bold')
+  })
+
+  it('should generate CSS variables for spacing', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-space-4')
+    expect(style).toContain('1rem')
+  })
+
+  it('should generate CSS variables for radius', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-radius-md')
+  })
+
+  it('should generate CSS variables for shadows', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-shadow-md')
+  })
+
+  it('should generate CSS variables for transitions', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--dm-transition-base')
+  })
+
+  it('should use custom prefix for CSS variables', () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme, prefix: 'custom' },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--custom-primary')
+    expect(style).not.toContain('--dm-primary')
+  })
+
+  it('should update CSS variables when theme changes', async () => {
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: { default: '<div>Content</div>' }
+    })
+
+    let style = wrapper.attributes('style')
+    expect(style).toContain('#0072CE')
+
+    await wrapper.setProps({ theme: customTheme })
+
+    style = wrapper.attributes('style')
+    expect(style).toContain('#FF0000')
+  })
+
+  it('should provide theme to child components', () => {
+    const ChildComponent = {
+      setup() {
+        const theme = useTheme()
+        return () => h('div', { class: 'child' }, theme.value.name)
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(ChildComponent)
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test Theme')
+  })
+
+  it('should provide updated theme when changed', async () => {
+    const ChildComponent = {
+      setup() {
+        const theme = useTheme()
+        return () => h('div', { class: 'child' }, `${theme.value.name}-${theme.value.tokens.colors.primary}`)
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(ChildComponent)
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test Theme')
+    expect(wrapper.text()).toContain('#0072CE')
+
+    await wrapper.setProps({ theme: customTheme })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Custom Theme')
+    expect(wrapper.text()).toContain('#FF0000')
+  })
+})

package/src/theme/__tests__/constants.test.ts

@@ -0,0 +1,31 @@
+/**
+ * Theme Constants Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import { THEME_INJECTION_KEY, DEFAULT_THEME_PREFIX, CSS_VARIABLE_PREFIX } from '../constants'
+
+describe('Theme Constants', () => {
+  it('should have THEME_INJECTION_KEY as Symbol', () => {
+    expect(typeof THEME_INJECTION_KEY).toBe('symbol')
+    expect(THEME_INJECTION_KEY.toString()).toContain('theme')
+  })
+
+  it('should have DEFAULT_THEME_PREFIX', () => {
+    expect(DEFAULT_THEME_PREFIX).toBe('dm')
+    expect(typeof DEFAULT_THEME_PREFIX).toBe('string')
+  })
+
+  it('should have CSS_VARIABLE_PREFIX', () => {
+    expect(CSS_VARIABLE_PREFIX).toBe('--')
+    expect(typeof CSS_VARIABLE_PREFIX).toBe('string')
+  })
+
+  it('should have unique injection key', () => {
+    const key1 = THEME_INJECTION_KEY
+    const key2 = Symbol('theme')
+    expect(key1).not.toBe(key2)
+  })
+})

package/src/theme/__tests__/presets.test.ts

@@ -0,0 +1,166 @@
+/**
+ * Theme Presets Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import { datametriaTheme, defaultTheme } from '../presets'
+
+describe('Theme Presets', () => {
+  describe('DATAMETRIA Theme', () => {
+    it('should have correct name', () => {
+      expect(datametriaTheme.name).toBe('DATAMETRIA')
+    })
+
+    it('should have DATAMETRIA brand colors', () => {
+      expect(datametriaTheme.tokens.colors.primary).toBe('#0072CE')
+      expect(datametriaTheme.tokens.colors.secondary).toBe('#4B0078')
+    })
+
+    it('should have semantic colors', () => {
+      expect(datametriaTheme.tokens.colors.success).toBe('#10b981')
+      expect(datametriaTheme.tokens.colors.warning).toBe('#f59e0b')
+      expect(datametriaTheme.tokens.colors.error).toBe('#ef4444')
+      expect(datametriaTheme.tokens.colors.info).toBe('#06b6d4')
+    })
+
+    it('should have complete neutral scale', () => {
+      const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
+      neutralKeys.forEach(key => {
+        expect(datametriaTheme.tokens.colors.neutral).toHaveProperty(key)
+      })
+    })
+
+    it('should have typography tokens', () => {
+      expect(datametriaTheme.tokens.typography.fontFamily.sans).toBeDefined()
+      expect(datametriaTheme.tokens.typography.fontSize.base).toBe('1rem')
+      expect(datametriaTheme.tokens.typography.fontWeight.bold).toBe(700)
+    })
+
+    it('should have spacing tokens', () => {
+      expect(datametriaTheme.tokens.spacing[0]).toBe('0')
+      expect(datametriaTheme.tokens.spacing[4]).toBe('1rem')
+      expect(datametriaTheme.tokens.spacing[8]).toBe('2rem')
+    })
+
+    it('should have radius tokens', () => {
+      expect(datametriaTheme.tokens.radius.none).toBe('0')
+      expect(datametriaTheme.tokens.radius.md).toBe('0.375rem')
+      expect(datametriaTheme.tokens.radius.full).toBe('9999px')
+    })
+
+    it('should have shadow tokens', () => {
+      expect(datametriaTheme.tokens.shadows.none).toBe('none')
+      expect(datametriaTheme.tokens.shadows.md).toContain('rgba')
+    })
+
+    it('should have transition tokens', () => {
+      expect(datametriaTheme.tokens.transitions.fast).toContain('150ms')
+      expect(datametriaTheme.tokens.transitions.base).toContain('200ms')
+      expect(datametriaTheme.tokens.transitions.slow).toContain('300ms')
+    })
+
+    it('should have all required token categories', () => {
+      expect(datametriaTheme.tokens).toHaveProperty('colors')
+      expect(datametriaTheme.tokens).toHaveProperty('typography')
+      expect(datametriaTheme.tokens).toHaveProperty('spacing')
+      expect(datametriaTheme.tokens).toHaveProperty('radius')
+      expect(datametriaTheme.tokens).toHaveProperty('shadows')
+      expect(datametriaTheme.tokens).toHaveProperty('transitions')
+    })
+  })
+
+  describe('Default Theme', () => {
+    it('should have correct name', () => {
+      expect(defaultTheme.name).toBe('Default')
+    })
+
+    it('should have generic brand colors', () => {
+      expect(defaultTheme.tokens.colors.primary).toBe('#3b82f6')
+      expect(defaultTheme.tokens.colors.secondary).toBe('#8b5cf6')
+    })
+
+    it('should have semantic colors', () => {
+      expect(defaultTheme.tokens.colors.success).toBe('#10b981')
+      expect(defaultTheme.tokens.colors.warning).toBe('#f59e0b')
+      expect(defaultTheme.tokens.colors.error).toBe('#ef4444')
+      expect(defaultTheme.tokens.colors.info).toBe('#06b6d4')
+    })
+
+    it('should have complete neutral scale', () => {
+      const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
+      neutralKeys.forEach(key => {
+        expect(defaultTheme.tokens.colors.neutral).toHaveProperty(key)
+      })
+    })
+
+    it('should have typography tokens', () => {
+      expect(defaultTheme.tokens.typography.fontFamily.sans).toBeDefined()
+      expect(defaultTheme.tokens.typography.fontSize.base).toBe('1rem')
+      expect(defaultTheme.tokens.typography.fontWeight.bold).toBe(700)
+    })
+
+    it('should have all required token categories', () => {
+      expect(defaultTheme.tokens).toHaveProperty('colors')
+      expect(defaultTheme.tokens).toHaveProperty('typography')
+      expect(defaultTheme.tokens).toHaveProperty('spacing')
+      expect(defaultTheme.tokens).toHaveProperty('radius')
+      expect(defaultTheme.tokens).toHaveProperty('shadows')
+      expect(defaultTheme.tokens).toHaveProperty('transitions')
+    })
+  })
+
+  describe('Theme Comparison', () => {
+    it('should have different primary colors', () => {
+      expect(datametriaTheme.tokens.colors.primary).not.toBe(defaultTheme.tokens.colors.primary)
+    })
+
+    it('should have different secondary colors', () => {
+      expect(datametriaTheme.tokens.colors.secondary).not.toBe(defaultTheme.tokens.colors.secondary)
+    })
+
+    it('should have same semantic colors', () => {
+      expect(datametriaTheme.tokens.colors.success).toBe(defaultTheme.tokens.colors.success)
+      expect(datametriaTheme.tokens.colors.warning).toBe(defaultTheme.tokens.colors.warning)
+      expect(datametriaTheme.tokens.colors.error).toBe(defaultTheme.tokens.colors.error)
+    })
+
+    it('should have same neutral scale', () => {
+      expect(datametriaTheme.tokens.colors.neutral).toEqual(defaultTheme.tokens.colors.neutral)
+    })
+
+    it('should have same spacing scale', () => {
+      expect(datametriaTheme.tokens.spacing).toEqual(defaultTheme.tokens.spacing)
+    })
+
+    it('should have same radius scale', () => {
+      expect(datametriaTheme.tokens.radius).toEqual(defaultTheme.tokens.radius)
+    })
+  })
+
+  describe('Theme Validation', () => {
+    it('DATAMETRIA theme should be valid', () => {
+      expect(datametriaTheme.name).toBeTruthy()
+      expect(datametriaTheme.tokens).toBeDefined()
+      expect(typeof datametriaTheme.tokens.colors.primary).toBe('string')
+    })
+
+    it('Default theme should be valid', () => {
+      expect(defaultTheme.name).toBeTruthy()
+      expect(defaultTheme.tokens).toBeDefined()
+      expect(typeof defaultTheme.tokens.colors.primary).toBe('string')
+    })
+
+    it('should have valid hex colors', () => {
+      const hexRegex = /^#[0-9A-Fa-f]{6}$/
+      expect(datametriaTheme.tokens.colors.primary).toMatch(hexRegex)
+      expect(defaultTheme.tokens.colors.primary).toMatch(hexRegex)
+    })
+
+    it('should have valid rem values', () => {
+      expect(datametriaTheme.tokens.spacing[4]).toMatch(/rem$/)
+      expect(defaultTheme.tokens.spacing[4]).toMatch(/rem$/)
+    })
+  })
+})

package/src/theme/__tests__/tokens.test.ts

@@ -0,0 +1,155 @@
+/**
+ * Theme Tokens Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import {
+  defaultColors,
+  defaultTypography,
+  defaultSpacing,
+  defaultRadius,
+  defaultShadows,
+  defaultTransitions,
+  defaultTokens
+} from '../tokens'
+
+describe('Default Tokens', () => {
+  describe('Colors', () => {
+    it('should have all required color properties', () => {
+      expect(defaultColors).toHaveProperty('primary')
+      expect(defaultColors).toHaveProperty('secondary')
+      expect(defaultColors).toHaveProperty('success')
+      expect(defaultColors).toHaveProperty('warning')
+      expect(defaultColors).toHaveProperty('error')
+      expect(defaultColors).toHaveProperty('info')
+      expect(defaultColors).toHaveProperty('neutral')
+    })
+
+    it('should have DATAMETRIA brand colors', () => {
+      expect(defaultColors.primary).toBe('#0072CE')
+      expect(defaultColors.secondary).toBe('#4B0078')
+    })
+
+    it('should have complete neutral scale', () => {
+      const neutralKeys = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
+      neutralKeys.forEach(key => {
+        expect(defaultColors.neutral).toHaveProperty(key)
+        expect(typeof defaultColors.neutral[key as keyof typeof defaultColors.neutral]).toBe('string')
+      })
+    })
+
+    it('should have valid hex color format', () => {
+      const hexRegex = /^#[0-9A-Fa-f]{6}$/
+      expect(defaultColors.primary).toMatch(hexRegex)
+      expect(defaultColors.secondary).toMatch(hexRegex)
+      expect(defaultColors.success).toMatch(hexRegex)
+    })
+  })
+
+  describe('Typography', () => {
+    it('should have font families', () => {
+      expect(defaultTypography.fontFamily).toHaveProperty('sans')
+      expect(defaultTypography.fontFamily).toHaveProperty('mono')
+      expect(typeof defaultTypography.fontFamily.sans).toBe('string')
+    })
+
+    it('should have complete font size scale', () => {
+      const sizeKeys = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl']
+      sizeKeys.forEach(key => {
+        expect(defaultTypography.fontSize).toHaveProperty(key)
+      })
+    })
+
+    it('should have font weights', () => {
+      expect(defaultTypography.fontWeight.normal).toBe(400)
+      expect(defaultTypography.fontWeight.medium).toBe(500)
+      expect(defaultTypography.fontWeight.semibold).toBe(600)
+      expect(defaultTypography.fontWeight.bold).toBe(700)
+    })
+
+    it('should have line heights', () => {
+      expect(defaultTypography.lineHeight.tight).toBe(1.25)
+      expect(defaultTypography.lineHeight.normal).toBe(1.5)
+      expect(defaultTypography.lineHeight.relaxed).toBe(1.75)
+    })
+  })
+
+  describe('Spacing', () => {
+    it('should have complete spacing scale', () => {
+      const spacingKeys = ['0', '1', '2', '3', '4', '6', '8', '12', '16', '20', '24']
+      spacingKeys.forEach(key => {
+        expect(defaultSpacing).toHaveProperty(key)
+      })
+    })
+
+    it('should have valid rem values', () => {
+      expect(defaultSpacing[0]).toBe('0')
+      expect(defaultSpacing[4]).toBe('1rem')
+      expect(defaultSpacing[8]).toBe('2rem')
+    })
+  })
+
+  describe('Radius', () => {
+    it('should have all radius sizes', () => {
+      expect(defaultRadius).toHaveProperty('none')
+      expect(defaultRadius).toHaveProperty('sm')
+      expect(defaultRadius).toHaveProperty('md')
+      expect(defaultRadius).toHaveProperty('lg')
+      expect(defaultRadius).toHaveProperty('xl')
+      expect(defaultRadius).toHaveProperty('full')
+    })
+
+    it('should have valid values', () => {
+      expect(defaultRadius.none).toBe('0')
+      expect(defaultRadius.full).toBe('9999px')
+    })
+  })
+
+  describe('Shadows', () => {
+    it('should have all shadow sizes', () => {
+      expect(defaultShadows).toHaveProperty('none')
+      expect(defaultShadows).toHaveProperty('sm')
+      expect(defaultShadows).toHaveProperty('md')
+      expect(defaultShadows).toHaveProperty('lg')
+      expect(defaultShadows).toHaveProperty('xl')
+      expect(defaultShadows).toHaveProperty('2xl')
+    })
+
+    it('should have valid shadow values', () => {
+      expect(defaultShadows.none).toBe('none')
+      expect(defaultShadows.sm).toContain('rgba')
+    })
+  })
+
+  describe('Transitions', () => {
+    it('should have all transition speeds', () => {
+      expect(defaultTransitions).toHaveProperty('fast')
+      expect(defaultTransitions).toHaveProperty('base')
+      expect(defaultTransitions).toHaveProperty('slow')
+    })
+
+    it('should have valid timing values', () => {
+      expect(defaultTransitions.fast).toContain('ms')
+      expect(defaultTransitions.base).toContain('cubic-bezier')
+    })
+  })
+
+  describe('Complete Token Set', () => {
+    it('should export complete default tokens', () => {
+      expect(defaultTokens).toHaveProperty('colors')
+      expect(defaultTokens).toHaveProperty('typography')
+      expect(defaultTokens).toHaveProperty('spacing')
+      expect(defaultTokens).toHaveProperty('radius')
+      expect(defaultTokens).toHaveProperty('shadows')
+      expect(defaultTokens).toHaveProperty('transitions')
+    })
+
+    it('should have consistent structure', () => {
+      expect(defaultTokens.colors).toBe(defaultColors)
+      expect(defaultTokens.typography).toBe(defaultTypography)
+      expect(defaultTokens.spacing).toBe(defaultSpacing)
+    })
+  })
+})