@datametria/vue-components 1.1.3 → 1.2.0

package/src/components/DatametriaToast.vue

@@ -1,163 +1,176 @@
-<template>
-  <Teleport to="body">
-    <Transition name="dm-toast">
-      <div
-        v-if="isVisible"
-        class="dm-toast"
-        :class="`dm-toast--${variant}`"
-        role="alert"
-        :aria-live="variant === 'error' ? 'assertive' : 'polite'"
-      >
-        <div class="dm-toast__content">
-          <span class="dm-toast__message">{{ message }}</span>
-          <button
-            v-if="closable"
-            class="dm-toast__close"
-            @click="close"
-            aria-label="Fechar"
-          >×</button>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
-
-interface Props {
-  message: string
-  variant?: 'success' | 'error' | 'warning' | 'info'
-  duration?: number
-  closable?: boolean
-  modelValue?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'info',
-  duration: 3000,
-  closable: true,
-  modelValue: false
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  close: []
-}>()
-
-const isVisible = ref(props.modelValue)
-let timer: ReturnType<typeof setTimeout> | null = null
-
-watch(() => props.modelValue, (newValue) => {
-  isVisible.value = newValue
-  if (newValue && props.duration > 0) {
-    startTimer()
-  }
-})
-
-const startTimer = () => {
-  if (timer) clearTimeout(timer)
-  timer = setTimeout(() => {
-    close()
-  }, props.duration)
-}
-
-const close = () => {
-  isVisible.value = false
-  emit('update:modelValue', false)
-  emit('close')
-  if (timer) clearTimeout(timer)
-}
-
-onMounted(() => {
-  if (isVisible.value && props.duration > 0) {
-    startTimer()
-  }
-})
-</script>
-
-<style scoped>
-.dm-toast {
-  position: fixed;
-  top: var(--dm-space-4);
-  right: var(--dm-space-4);
-  min-width: 300px;
-  max-width: 500px;
-  padding: var(--dm-space-4);
-  border-radius: var(--dm-radius);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 9999;
-}
-
-.dm-toast--success {
-  background: var(--dm-success);
-  color: var(--dm-white);
-}
-
-.dm-toast--error {
-  background: var(--dm-error);
-  color: var(--dm-white);
-}
-
-.dm-toast--warning {
-  background: var(--dm-warning);
-  color: var(--dm-gray-900);
-}
-
-.dm-toast--info {
-  background: var(--dm-primary);
-  color: var(--dm-white);
-}
-
-.dm-toast__content {
-  display: flex;
-  align-items: center;
-  gap: var(--dm-space-3);
-}
-
-.dm-toast__message {
-  flex: 1;
-  font-size: var(--dm-text-sm);
-  line-height: 1.5;
-}
-
-.dm-toast__close {
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font-size: 24px;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: var(--dm-transition);
-}
-
-.dm-toast__close:hover {
-  opacity: 1;
-}
-
-.dm-toast-enter-active,
-.dm-toast-leave-active {
-  transition: all 0.3s ease;
-}
-
-.dm-toast-enter-from {
-  opacity: 0;
-  transform: translateX(100%);
-}
-
-.dm-toast-leave-to {
-  opacity: 0;
-  transform: translateY(-20px);
-}
-
-@media (max-width: 640px) {
-  .dm-toast {
-    left: var(--dm-space-4);
-    right: var(--dm-space-4);
-    min-width: auto;
-  }
-}
-</style>
+<template>
+  <Teleport to="body">
+    <Transition name="dm-toast">
+      <div
+        v-if="isVisible"
+        class="dm-toast"
+        :class="`dm-toast--${variant}`"
+        role="alert"
+        :aria-live="variant === 'error' ? 'assertive' : 'polite'"
+      >
+        <div class="dm-toast__content">
+          <span class="dm-toast__message">{{ message }}</span>
+          <button
+            v-if="closable"
+            class="dm-toast__close"
+            @click="close"
+            aria-label="Fechar"
+          >×</button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+interface Props {
+  message: string
+  variant?: 'success' | 'error' | 'warning' | 'info' | 'primary'
+  duration?: number
+  closable?: boolean
+  modelValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  duration: 3000,
+  closable: true,
+  modelValue: false
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = ['success', 'error', 'warning', 'info', 'primary']
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaToast] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const isVisible = ref(props.modelValue)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(() => props.modelValue, (newValue) => {
+  isVisible.value = newValue
+  if (newValue && props.duration > 0) {
+    startTimer()
+  }
+})
+
+const startTimer = () => {
+  if (timer) clearTimeout(timer)
+  timer = setTimeout(() => {
+    close()
+  }, props.duration)
+}
+
+const close = () => {
+  isVisible.value = false
+  emit('update:modelValue', false)
+  emit('close')
+  if (timer) clearTimeout(timer)
+}
+
+onMounted(() => {
+  if (isVisible.value && props.duration > 0) {
+    startTimer()
+  }
+})
+</script>
+
+<style scoped>
+.dm-toast {
+  position: fixed;
+  top: var(--dm-space-4);
+  right: var(--dm-space-4);
+  min-width: 300px;
+  max-width: 500px;
+  padding: var(--dm-space-4);
+  border-radius: var(--dm-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+}
+
+.dm-toast--success {
+  background: var(--dm-success);
+  color: var(--dm-white);
+}
+
+.dm-toast--error {
+  background: var(--dm-error);
+  color: var(--dm-white);
+}
+
+.dm-toast--warning {
+  background: var(--dm-warning);
+  color: var(--dm-gray-900);
+}
+
+.dm-toast--primary {
+  background: var(--dm-primary);
+  color: var(--dm-white);
+}
+
+.dm-toast--info {
+  background: var(--dm-gray-600);
+  color: var(--dm-white);
+}
+
+.dm-toast__content {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-3);
+}
+
+.dm-toast__message {
+  flex: 1;
+  font-size: var(--dm-text-sm);
+  line-height: 1.5;
+}
+
+.dm-toast__close {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: var(--dm-transition);
+}
+
+.dm-toast__close:hover {
+  opacity: 1;
+}
+
+.dm-toast-enter-active,
+.dm-toast-leave-active {
+  transition: all 0.3s ease;
+}
+
+.dm-toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.dm-toast-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+@media (max-width: 640px) {
+  .dm-toast {
+    left: var(--dm-space-4);
+    right: var(--dm-space-4);
+    min-width: auto;
+  }
+}
+</style>

package/src/components/__tests__/DatametriaAlert.test.js

@@ -0,0 +1,36 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaAlert from '../DatametriaAlert.vue'
+
+describe('DatametriaAlert', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaAlert, {
+      props: { 
+        variant: 'primary',
+        message: 'Test message'
+      }
+    })
+    
+    expect(wrapper.classes()).toContain('datametria-alert--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaAlert, {
+      props: { 
+        variant: 'invalid',
+        message: 'Test'
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaAlert] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+})

package/src/components/__tests__/DatametriaBadge.test.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaBadge from '../DatametriaBadge.vue'
+
+describe('DatametriaBadge', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaBadge, {
+      props: { label: 'Test', variant: 'primary' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-badge--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaBadge, {
+      props: { label: 'Test', variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaBadge] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+})

package/src/components/__tests__/DatametriaButton.test.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaButton from '../DatametriaButton.vue'
+import { ButtonVariant } from '../../types'
+
+describe('DatametriaButton', () => {
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaButton, {
+      props: { variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaButton] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaButton, {
+      props: { variant: ButtonVariant.PRIMARY }
+    })
+    
+    expect(wrapper.classes()).toContain('datametria-button--primary')
+  })
+})

package/src/components/__tests__/DatametriaChip.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaChip from '../DatametriaChip.vue'
+
+describe('DatametriaChip', () => {
+  it('renders with primary variant by default', () => {
+    const wrapper = mount(DatametriaChip, {
+      props: { label: 'Test' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-chip--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaChip, {
+      props: { label: 'Test', variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaChip] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('emits click event when clickable', async () => {
+    const wrapper = mount(DatametriaChip, {
+      props: { label: 'Test', clickable: true }
+    })
+    
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+})

package/src/components/__tests__/DatametriaNavbar.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaNavbar from '../DatametriaNavbar.vue'
+
+describe('DatametriaNavbar', () => {
+  it('renders with primary variant', () => {
+    const wrapper = mount(DatametriaNavbar, {
+      props: { variant: 'primary' }
+    })
+    
+    expect(wrapper.classes()).toContain('dm-navbar--primary')
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaNavbar, {
+      props: { variant: 'invalid' }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaNavbar] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+
+  it('renders brand text', () => {
+    const wrapper = mount(DatametriaNavbar, {
+      props: { brand: 'DATAMETRIA' }
+    })
+    
+    expect(wrapper.text()).toContain('DATAMETRIA')
+  })
+
+  it('toggles mobile menu', async () => {
+    const wrapper = mount(DatametriaNavbar, {
+      slots: { menu: '<div>Menu items</div>' }
+    })
+    
+    const toggle = wrapper.find('.dm-navbar__toggle')
+    await toggle.trigger('click')
+    
+    expect(wrapper.find('.dm-navbar__menu').classes()).toContain('dm-navbar__menu--open')
+  })
+})

package/src/components/__tests__/DatametriaToast.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaToast from '../DatametriaToast.vue'
+
+describe('DatametriaToast', () => {
+  it('renders with primary variant', () => {
+    // Create body element for Teleport
+    const body = document.createElement('div')
+    document.body.appendChild(body)
+    
+    const wrapper = mount(DatametriaToast, {
+      props: { 
+        message: 'Test message',
+        variant: 'primary',
+        modelValue: true
+      },
+      attachTo: body
+    })
+    
+    // Check if toast exists in document body
+    const toast = document.querySelector('.dm-toast')
+    expect(toast).toBeTruthy()
+    expect(toast.classList.contains('dm-toast--primary')).toBe(true)
+    
+    wrapper.unmount()
+    document.body.removeChild(body)
+  })
+
+  it('validates invalid variant in development', () => {
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const originalEnv = process.env.NODE_ENV
+    process.env.NODE_ENV = 'development'
+
+    mount(DatametriaToast, {
+      props: { 
+        message: 'Test',
+        variant: 'invalid',
+        modelValue: true
+      }
+    })
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('[DatametriaToast] Invalid variant "invalid"')
+    )
+
+    process.env.NODE_ENV = originalEnv
+    consoleSpy.mockRestore()
+  })
+})

package/src/stories/Variants.stories.js

@@ -0,0 +1,96 @@
+import DatametriaButton from '../components/DatametriaButton.vue'
+import DatametriaAlert from '../components/DatametriaAlert.vue'
+import DatametriaBadge from '../components/DatametriaBadge.vue'
+import DatametriaChip from '../components/DatametriaChip.vue'
+import DatametriaToast from '../components/DatametriaToast.vue'
+import DatametriaNavbar from '../components/DatametriaNavbar.vue'
+
+export default {
+  title: 'Design System/Variants',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Showcase of all component variants with primary variant standardization'
+      }
+    }
+  }
+}
+
+export const AllVariants = () => ({
+  components: {
+    DatametriaButton,
+    DatametriaAlert,
+    DatametriaBadge,
+    DatametriaChip,
+    DatametriaToast,
+    DatametriaNavbar
+  },
+  template: `
+    <div style="padding: 2rem; space-y: 2rem;">
+      <section>
+        <h2>Button Variants</h2>
+        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
+          <DatametriaButton variant="primary">Primary</DatametriaButton>
+          <DatametriaButton variant="secondary">Secondary</DatametriaButton>
+          <DatametriaButton variant="outline">Outline</DatametriaButton>
+          <DatametriaButton variant="ghost">Ghost</DatametriaButton>
+        </div>
+      </section>
+
+      <section>
+        <h2>Alert Variants</h2>
+        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
+          <DatametriaAlert variant="primary" message="Primary alert message" />
+          <DatametriaAlert variant="success" message="Success alert message" />
+          <DatametriaAlert variant="error" message="Error alert message" />
+          <DatametriaAlert variant="warning" message="Warning alert message" />
+          <DatametriaAlert variant="info" message="Info alert message" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Badge Variants</h2>
+        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
+          <DatametriaBadge variant="primary" label="Primary" />
+          <DatametriaBadge variant="secondary" label="Secondary" />
+          <DatametriaBadge variant="success" label="Success" />
+          <DatametriaBadge variant="error" label="Error" />
+          <DatametriaBadge variant="warning" label="Warning" />
+          <DatametriaBadge variant="info" label="Info" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Chip Variants</h2>
+        <div style="display: flex; gap: 1rem; margin: 1rem 0;">
+          <DatametriaChip variant="primary" label="Primary" />
+          <DatametriaChip variant="secondary" label="Secondary" />
+          <DatametriaChip variant="success" label="Success" />
+          <DatametriaChip variant="error" label="Error" />
+          <DatametriaChip variant="warning" label="Warning" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Toast Variants</h2>
+        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
+          <DatametriaToast variant="primary" message="Primary toast" :model-value="true" />
+          <DatametriaToast variant="success" message="Success toast" :model-value="true" />
+          <DatametriaToast variant="error" message="Error toast" :model-value="true" />
+          <DatametriaToast variant="warning" message="Warning toast" :model-value="true" />
+          <DatametriaToast variant="info" message="Info toast" :model-value="true" />
+        </div>
+      </section>
+
+      <section>
+        <h2>Navbar Variants</h2>
+        <div style="display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0;">
+          <DatametriaNavbar variant="primary" brand="Primary Navbar" />
+          <DatametriaNavbar variant="light" brand="Light Navbar" />
+          <DatametriaNavbar variant="dark" brand="Dark Navbar" />
+          <DatametriaNavbar variant="transparent" brand="Transparent Navbar" />
+        </div>
+      </section>
+    </div>
+  `
+})