@datametria/vue-components 1.2.0 → 2.0.1

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

@@ -0,0 +1,153 @@
+/**
+ * Theme Types Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import type { Theme, ThemeTokens, ColorTokens, TypographyTokens } from '../types'
+
+describe('Theme Types', () => {
+  it('should validate ColorTokens structure', () => {
+    const colors: ColorTokens = {
+      primary: '#0072CE',
+      secondary: '#4B0078',
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#06b6d4',
+      neutral: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827'
+      }
+    }
+
+    expect(colors.primary).toBe('#0072CE')
+    expect(colors.neutral[50]).toBe('#f9fafb')
+    expect(colors.neutral[900]).toBe('#111827')
+  })
+
+  it('should validate TypographyTokens structure', () => {
+    const typography: TypographyTokens = {
+      fontFamily: {
+        sans: 'Arial, sans-serif',
+        mono: 'Courier, monospace'
+      },
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem'
+      },
+      fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700
+      },
+      lineHeight: {
+        tight: 1.25,
+        normal: 1.5,
+        relaxed: 1.75
+      }
+    }
+
+    expect(typography.fontFamily.sans).toBe('Arial, sans-serif')
+    expect(typography.fontSize.base).toBe('1rem')
+    expect(typography.fontWeight.bold).toBe(700)
+    expect(typography.lineHeight.normal).toBe(1.5)
+  })
+
+  it('should validate Theme structure', () => {
+    const theme: Theme = {
+      name: 'Test Theme',
+      tokens: {
+        colors: {
+          primary: '#000',
+          secondary: '#fff',
+          success: '#0f0',
+          warning: '#ff0',
+          error: '#f00',
+          info: '#00f',
+          neutral: {
+            50: '#f9fafb',
+            100: '#f3f4f6',
+            200: '#e5e7eb',
+            300: '#d1d5db',
+            400: '#9ca3af',
+            500: '#6b7280',
+            600: '#4b5563',
+            700: '#374151',
+            800: '#1f2937',
+            900: '#111827'
+          }
+        },
+        typography: {
+          fontFamily: { sans: 'Arial', mono: 'Courier' },
+          fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '1.875rem',
+            '4xl': '2.25rem'
+          },
+          fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 },
+          lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 }
+        },
+        spacing: {
+          0: '0',
+          1: '0.25rem',
+          2: '0.5rem',
+          3: '0.75rem',
+          4: '1rem',
+          6: '1.5rem',
+          8: '2rem',
+          12: '3rem',
+          16: '4rem',
+          20: '5rem',
+          24: '6rem'
+        },
+        radius: {
+          none: '0',
+          sm: '0.25rem',
+          md: '0.375rem',
+          lg: '0.5rem',
+          xl: '0.75rem',
+          full: '9999px'
+        },
+        shadows: {
+          none: 'none',
+          sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+          md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+          lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+          xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
+          '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+        },
+        transitions: {
+          fast: '150ms',
+          base: '200ms',
+          slow: '300ms'
+        }
+      }
+    }
+
+    expect(theme.name).toBe('Test Theme')
+    expect(theme.tokens.colors.primary).toBe('#000')
+    expect(theme.tokens.spacing[4]).toBe('1rem')
+  })
+})

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

@@ -0,0 +1,146 @@
+/**
+ * useTheme Composable 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
+}
+
+describe('useTheme', () => {
+  it('should throw error when used outside ThemeProvider', () => {
+    // Suprimir warnings do Vue durante este teste
+    const originalWarn = console.warn
+    console.warn = () => {}
+    
+    expect(() => {
+      const TestComponent = {
+        setup() {
+          useTheme()
+          return () => h('div', 'Test')
+        }
+      }
+      mount(TestComponent)
+    }).toThrow('useTheme must be used within a ThemeProvider')
+    
+    // Restaurar console.warn
+    console.warn = originalWarn
+  })
+
+  it('should return theme when used inside ThemeProvider', () => {
+    const TestComponent = {
+      setup() {
+        const theme = useTheme()
+        expect(theme).toBeDefined()
+        expect(theme.value.name).toBe('Test Theme')
+        return () => h('div', theme.value.name)
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(TestComponent)
+      }
+    })
+
+    expect(wrapper.text()).toContain('Test Theme')
+  })
+
+  it('should return theme tokens', () => {
+    const TestComponent = {
+      setup() {
+        const theme = useTheme()
+        expect(theme.value.tokens).toBeDefined()
+        expect(theme.value.tokens.colors.primary).toBe('#0072CE')
+        return () => h('div', 'Test')
+      }
+    }
+
+    mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(TestComponent)
+      }
+    })
+  })
+
+  it('should access all token categories', () => {
+    const TestComponent = {
+      setup() {
+        const theme = useTheme()
+        expect(theme.value.tokens.colors).toBeDefined()
+        expect(theme.value.tokens.typography).toBeDefined()
+        expect(theme.value.tokens.spacing).toBeDefined()
+        expect(theme.value.tokens.radius).toBeDefined()
+        expect(theme.value.tokens.shadows).toBeDefined()
+        expect(theme.value.tokens.transitions).toBeDefined()
+        return () => h('div', 'Test')
+      }
+    }
+
+    mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(TestComponent)
+      }
+    })
+  })
+
+  it('should work in nested components', () => {
+    const GrandchildComponent = {
+      setup() {
+        const theme = useTheme()
+        return () => h('div', { class: 'grandchild' }, theme.value.name)
+      }
+    }
+
+    const ChildComponent = {
+      setup() {
+        return () => h('div', { class: 'child' }, h(GrandchildComponent))
+      }
+    }
+
+    const wrapper = mount(ThemeProvider, {
+      props: { theme: testTheme },
+      slots: {
+        default: h(ChildComponent)
+      }
+    })
+
+    expect(wrapper.find('.grandchild').text()).toContain('Test Theme')
+  })
+
+  it('should provide helpful error message', () => {
+    // Suprimir warnings do Vue durante este teste
+    const originalWarn = console.warn
+    console.warn = () => {}
+    
+    try {
+      const TestComponent = {
+        setup() {
+          useTheme()
+          return () => h('div', 'Test')
+        }
+      }
+      mount(TestComponent)
+    } catch (error) {
+      expect(error).toBeInstanceOf(Error)
+      expect((error as Error).message).toContain('ThemeProvider')
+      expect((error as Error).message).toContain('Wrap your component tree')
+    }
+    
+    // Restaurar console.warn
+    console.warn = originalWarn
+  })
+})

package/src/theme/constants.ts

@@ -0,0 +1,14 @@
+/**
+ * Theme System Constants
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { InjectionKey, ComputedRef } from 'vue'
+import type { Theme } from './types'
+
+export const THEME_INJECTION_KEY: InjectionKey<ComputedRef<Theme>> = Symbol('theme')
+
+export const DEFAULT_THEME_PREFIX = 'dm'
+
+export const CSS_VARIABLE_PREFIX = '--'

package/src/theme/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Theme System Exports
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+export { default as ThemeProvider } from './ThemeProvider.vue'
+export { useTheme } from './useTheme'
+export * from './types'
+export * from './constants'
+export * from './tokens'
+export * from './presets'

package/src/theme/presets/datametria.ts

@@ -0,0 +1,94 @@
+/**
+ * DATAMETRIA Theme Preset
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { Theme } from '../types'
+
+export const datametriaTheme: Theme = {
+  name: 'DATAMETRIA',
+  tokens: {
+    colors: {
+      primary: '#0072CE',
+      secondary: '#4B0078',
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#06b6d4',
+      neutral: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827'
+      }
+    },
+    typography: {
+      fontFamily: {
+        sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        mono: 'Menlo, Monaco, Consolas, "Courier New", monospace'
+      },
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem'
+      },
+      fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700
+      },
+      lineHeight: {
+        tight: 1.25,
+        normal: 1.5,
+        relaxed: 1.75
+      }
+    },
+    spacing: {
+      0: '0',
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      6: '1.5rem',
+      8: '2rem',
+      12: '3rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem'
+    },
+    radius: {
+      none: '0',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      full: '9999px'
+    },
+    shadows: {
+      none: 'none',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+    },
+    transitions: {
+      fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
+      base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
+      slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)'
+    }
+  }
+}

package/src/theme/presets/default.ts

@@ -0,0 +1,94 @@
+/**
+ * Default Theme Preset (Generic)
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { Theme } from '../types'
+
+export const defaultTheme: Theme = {
+  name: 'Default',
+  tokens: {
+    colors: {
+      primary: '#3b82f6',
+      secondary: '#8b5cf6',
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#06b6d4',
+      neutral: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827'
+      }
+    },
+    typography: {
+      fontFamily: {
+        sans: 'system-ui, -apple-system, sans-serif',
+        mono: 'ui-monospace, monospace'
+      },
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem'
+      },
+      fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700
+      },
+      lineHeight: {
+        tight: 1.25,
+        normal: 1.5,
+        relaxed: 1.75
+      }
+    },
+    spacing: {
+      0: '0',
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      6: '1.5rem',
+      8: '2rem',
+      12: '3rem',
+      16: '4rem',
+      20: '5rem',
+      24: '6rem'
+    },
+    radius: {
+      none: '0',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      full: '9999px'
+    },
+    shadows: {
+      none: 'none',
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+    },
+    transitions: {
+      fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
+      base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
+      slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)'
+    }
+  }
+}

package/src/theme/presets/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Theme Presets Index
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+export { datametriaTheme } from './datametria'
+export { defaultTheme } from './default'

package/src/theme/tokens/colors.ts

@@ -0,0 +1,28 @@
+/**
+ * Color Tokens
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { ColorTokens } from '../types'
+
+export const defaultColors: ColorTokens = {
+  primary: '#0072CE',
+  secondary: '#4B0078',
+  success: '#10b981',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  info: '#06b6d4',
+  neutral: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    300: '#d1d5db',
+    400: '#9ca3af',
+    500: '#6b7280',
+    600: '#4b5563',
+    700: '#374151',
+    800: '#1f2937',
+    900: '#111827'
+  }
+}

package/src/theme/tokens/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Theme Tokens Index
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { ThemeTokens, RadiusTokens, ShadowTokens, TransitionTokens } from '../types'
+import { defaultColors } from './colors'
+import { defaultTypography } from './typography'
+import { defaultSpacing } from './spacing'
+
+export const defaultRadius: RadiusTokens = {
+  none: '0',
+  sm: '0.25rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '0.75rem',
+  full: '9999px'
+}
+
+export const defaultShadows: ShadowTokens = {
+  none: 'none',
+  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)'
+}
+
+export const defaultTransitions: TransitionTokens = {
+  fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
+  base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
+  slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)'
+}
+
+export const defaultTokens: ThemeTokens = {
+  colors: defaultColors,
+  typography: defaultTypography,
+  spacing: defaultSpacing,
+  radius: defaultRadius,
+  shadows: defaultShadows,
+  transitions: defaultTransitions
+}
+
+export * from './colors'
+export * from './typography'
+export * from './spacing'

package/src/theme/tokens/spacing.ts

@@ -0,0 +1,21 @@
+/**
+ * Spacing Tokens
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { SpacingTokens } from '../types'
+
+export const defaultSpacing: SpacingTokens = {
+  0: '0',
+  1: '0.25rem',
+  2: '0.5rem',
+  3: '0.75rem',
+  4: '1rem',
+  6: '1.5rem',
+  8: '2rem',
+  12: '3rem',
+  16: '4rem',
+  20: '5rem',
+  24: '6rem'
+}

package/src/theme/tokens/typography.ts

@@ -0,0 +1,35 @@
+/**
+ * Typography Tokens
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import type { TypographyTokens } from '../types'
+
+export const defaultTypography: TypographyTokens = {
+  fontFamily: {
+    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    mono: 'Menlo, Monaco, Consolas, "Courier New", monospace'
+  },
+  fontSize: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem'
+  },
+  fontWeight: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+}