@sabrenski/spire-ui 0.0.1

package/src/components/EmptyState/EmptyState.test.ts

@@ -0,0 +1,180 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EmptyState from './EmptyState.vue'
+
+describe('EmptyState', () => {
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(EmptyState)
+      expect(wrapper.find('.ui-empty-state').exists()).toBe(true)
+      expect(wrapper.find('.ui-empty-state--default').exists()).toBe(true)
+    })
+
+    it('renders title when provided', () => {
+      const wrapper = mount(EmptyState, {
+        props: { title: 'No data available' }
+      })
+      expect(wrapper.find('.ui-empty-state__title').exists()).toBe(true)
+      expect(wrapper.find('.ui-empty-state__title').text()).toBe('No data available')
+    })
+
+    it('does not render title when not provided', () => {
+      const wrapper = mount(EmptyState)
+      expect(wrapper.find('.ui-empty-state__title').exists()).toBe(false)
+    })
+
+    it('renders description when provided', () => {
+      const wrapper = mount(EmptyState, {
+        props: { description: 'Try adjusting your filters' }
+      })
+      expect(wrapper.find('.ui-empty-state__description').exists()).toBe(true)
+      expect(wrapper.find('.ui-empty-state__description').text()).toBe('Try adjusting your filters')
+    })
+
+    it('does not render description when not provided', () => {
+      const wrapper = mount(EmptyState)
+      expect(wrapper.find('.ui-empty-state__description').exists()).toBe(false)
+    })
+
+    it('renders default icon when no custom icon provided', () => {
+      const wrapper = mount(EmptyState)
+      expect(wrapper.find('.ui-empty-state__icon').exists()).toBe(true)
+      expect(wrapper.find('.ui-empty-state__icon--default').exists()).toBe(true)
+    })
+  })
+
+  describe('Variants', () => {
+    it('applies default variant class', () => {
+      const wrapper = mount(EmptyState)
+      expect(wrapper.find('.ui-empty-state--default').exists()).toBe(true)
+    })
+
+    it('applies search variant class', () => {
+      const wrapper = mount(EmptyState, {
+        props: { variant: 'search' }
+      })
+      expect(wrapper.find('.ui-empty-state--search').exists()).toBe(true)
+    })
+
+    it('applies error variant class', () => {
+      const wrapper = mount(EmptyState, {
+        props: { variant: 'error' }
+      })
+      expect(wrapper.find('.ui-empty-state--error').exists()).toBe(true)
+    })
+
+    it('renders icon from registry for search variant', () => {
+      const wrapper = mount(EmptyState, {
+        props: { variant: 'search' }
+      })
+      const icon = wrapper.find('.ui-empty-state__icon--default .ui-empty-state__icon-svg')
+      expect(icon.exists()).toBe(true)
+    })
+
+    it('renders icon from registry for error variant', () => {
+      const wrapper = mount(EmptyState, {
+        props: { variant: 'error' }
+      })
+      const icon = wrapper.find('.ui-empty-state__icon--default .ui-empty-state__icon-svg')
+      expect(icon.exists()).toBe(true)
+    })
+
+    it('renders icon from registry for default variant', () => {
+      const wrapper = mount(EmptyState, {
+        props: { variant: 'default' }
+      })
+      const icon = wrapper.find('.ui-empty-state__icon--default .ui-empty-state__icon-svg')
+      expect(icon.exists()).toBe(true)
+    })
+  })
+
+  describe('Compact Mode', () => {
+    it('applies compact class when compact is true', () => {
+      const wrapper = mount(EmptyState, {
+        props: { compact: true }
+      })
+      expect(wrapper.find('.ui-empty-state--compact').exists()).toBe(true)
+    })
+
+    it('does not apply compact class by default', () => {
+      const wrapper = mount(EmptyState)
+      expect(wrapper.find('.ui-empty-state--compact').exists()).toBe(false)
+    })
+  })
+
+  describe('Action Slot', () => {
+    it('renders action slot when provided', () => {
+      const wrapper = mount(EmptyState, {
+        slots: {
+          default: '<button class="test-action">Click me</button>'
+        }
+      })
+      expect(wrapper.find('.ui-empty-state__action').exists()).toBe(true)
+      expect(wrapper.find('.test-action').exists()).toBe(true)
+    })
+
+    it('does not render action container when no slot provided', () => {
+      const wrapper = mount(EmptyState)
+      expect(wrapper.find('.ui-empty-state__action').exists()).toBe(false)
+    })
+
+    it('renders multiple actions', () => {
+      const wrapper = mount(EmptyState, {
+        slots: {
+          default: '<button>Action 1</button><button>Action 2</button>'
+        }
+      })
+      expect(wrapper.findAll('.ui-empty-state__action button').length).toBe(2)
+    })
+  })
+
+  describe('Full Example', () => {
+    it('renders all elements together', () => {
+      const wrapper = mount(EmptyState, {
+        props: {
+          title: 'No results found',
+          description: 'Try adjusting your search',
+          variant: 'search'
+        },
+        slots: {
+          default: '<button>Clear filters</button>'
+        }
+      })
+
+      expect(wrapper.find('.ui-empty-state--search').exists()).toBe(true)
+      expect(wrapper.find('.ui-empty-state__icon').exists()).toBe(true)
+      expect(wrapper.find('.ui-empty-state__title').text()).toBe('No results found')
+      expect(wrapper.find('.ui-empty-state__description').text()).toBe('Try adjusting your search')
+      expect(wrapper.find('.ui-empty-state__action button').exists()).toBe(true)
+    })
+  })
+
+  describe('Structure', () => {
+    it('has correct content wrapper', () => {
+      const wrapper = mount(EmptyState, {
+        props: { title: 'Test' }
+      })
+      expect(wrapper.find('.ui-empty-state__content').exists()).toBe(true)
+    })
+
+    it('maintains correct element order: icon, title, description, action', () => {
+      const wrapper = mount(EmptyState, {
+        props: {
+          title: 'Title',
+          description: 'Description'
+        },
+        slots: {
+          default: '<button>Action</button>'
+        }
+      })
+
+      const content = wrapper.find('.ui-empty-state__content')
+      const children = content.element.children
+
+      expect(children[0].classList.contains('ui-empty-state__icon')).toBe(true)
+      expect(children[1].classList.contains('ui-empty-state__title')).toBe(true)
+      expect(children[2].classList.contains('ui-empty-state__description')).toBe(true)
+      expect(children[3].classList.contains('ui-empty-state__action')).toBe(true)
+    })
+  })
+})

package/src/components/EmptyState/EmptyState.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import Icon from '../Icon/Icon.vue'
+import type { IconInput } from '../Icon/Icon.vue'
+import { useInternalIcon } from '../../config/icons'
+
+export type EmptyStateVariant = 'default' | 'search' | 'error'
+
+export interface EmptyStateProps {
+  /** Title text */
+  title?: string
+  /** Description text */
+  description?: string
+  /** Custom icon to display (overrides variant icon) */
+  icon?: IconInput
+  /** Visual variant */
+  variant?: EmptyStateVariant
+  /** Compact mode with reduced padding */
+  compact?: boolean
+}
+
+const props = withDefaults(defineProps<EmptyStateProps>(), {
+  variant: 'default',
+  compact: false
+})
+
+const slots = useSlots()
+
+const resolvedIcon = computed(() => {
+  if (props.icon) return null
+  switch (props.variant) {
+    case 'search': return useInternalIcon('emptySearch')
+    case 'error': return useInternalIcon('error')
+    default: return useInternalIcon('emptyData')
+  }
+})
+
+const hasCustomIcon = computed(() => !!props.icon)
+const hasTitle = computed(() => !!props.title)
+const hasDescription = computed(() => !!props.description)
+const hasAction = computed(() => !!slots.default)
+</script>
+
+<template>
+  <div
+    class="ui-empty-state"
+    :class="[
+      `ui-empty-state--${variant}`,
+      { 'ui-empty-state--compact': compact }
+    ]"
+  >
+    <div class="ui-empty-state__content">
+      <div v-if="hasCustomIcon" class="ui-empty-state__icon">
+        <Icon :icon="icon!" size="48px" />
+      </div>
+
+      <div v-else class="ui-empty-state__icon ui-empty-state__icon--default">
+        <component :is="resolvedIcon" class="ui-empty-state__icon-svg" />
+      </div>
+
+      <div v-if="hasTitle" class="ui-empty-state__title">
+        {{ title }}
+      </div>
+
+      <div v-if="hasDescription" class="ui-empty-state__description">
+        {{ description }}
+      </div>
+
+      <div v-if="hasAction" class="ui-empty-state__action">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 16rem;
+  padding: var(--space-8) var(--space-4);
+  padding-bottom: var(--space-12);
+  text-align: center;
+  font-family: var(--font-sans);
+}
+
+.ui-empty-state--compact {
+  min-height: 10rem;
+  padding: var(--space-6) var(--space-4);
+  padding-bottom: var(--space-8);
+}
+
+.ui-empty-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+  max-width: 24rem;
+}
+
+.ui-empty-state__icon {
+  color: var(--empty-state-icon);
+  margin-bottom: var(--space-2);
+}
+
+.ui-empty-state__icon-svg {
+  width: 48px;
+  height: 48px;
+}
+
+.ui-empty-state--error .ui-empty-state__icon {
+  color: var(--empty-state-icon-error);
+}
+
+.ui-empty-state__title {
+  font-size: var(--text-md);
+  font-weight: var(--font-medium);
+  color: var(--empty-state-title);
+  line-height: var(--leading-tight);
+}
+
+.ui-empty-state__description {
+  font-size: var(--text-sm);
+  color: var(--empty-state-description);
+  line-height: var(--leading-normal);
+  max-width: 20rem;
+}
+
+.ui-empty-state__action {
+  margin-top: var(--space-3);
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+</style>

package/src/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { default as EmptyState } from './EmptyState.vue'
+export type { EmptyStateProps, EmptyStateVariant } from './EmptyState.vue'