@sabrenski/spire-ui 0.0.1

package/src/components/Toast/ToastProvider.test.ts

@@ -0,0 +1,158 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToastProvider from './ToastProvider.vue'
+import { toastActions } from './toastState'
+
+describe('ToastProvider', () => {
+  beforeEach(() => {
+    toastActions.clear()
+  })
+
+  describe('Rendering', () => {
+    it('renders provider container', () => {
+      const wrapper = mount(ToastProvider, {
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').exists()).toBe(true)
+    })
+
+    it('renders toasts from state', () => {
+      toastActions.success('Toast 1')
+      toastActions.error('Toast 2')
+
+      const wrapper = mount(ToastProvider, {
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+
+      const toasts = wrapper.findAll('.ui-toast')
+      expect(toasts.length).toBe(2)
+    })
+  })
+
+  describe('Positions', () => {
+    it('applies top-right position by default', () => {
+      const wrapper = mount(ToastProvider, {
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').classes()).toContain('ui-toast-provider--top-right')
+    })
+
+    it('applies top-left position', () => {
+      const wrapper = mount(ToastProvider, {
+        props: { position: 'top-left' },
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').classes()).toContain('ui-toast-provider--top-left')
+    })
+
+    it('applies bottom-right position', () => {
+      const wrapper = mount(ToastProvider, {
+        props: { position: 'bottom-right' },
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').classes()).toContain('ui-toast-provider--bottom-right')
+    })
+
+    it('applies bottom-left position', () => {
+      const wrapper = mount(ToastProvider, {
+        props: { position: 'bottom-left' },
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').classes()).toContain('ui-toast-provider--bottom-left')
+    })
+
+    it('applies top-center position', () => {
+      const wrapper = mount(ToastProvider, {
+        props: { position: 'top-center' },
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').classes()).toContain('ui-toast-provider--top-center')
+    })
+
+    it('applies bottom-center position', () => {
+      const wrapper = mount(ToastProvider, {
+        props: { position: 'bottom-center' },
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').classes()).toContain('ui-toast-provider--bottom-center')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="region"', () => {
+      const wrapper = mount(ToastProvider, {
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').attributes('role')).toBe('region')
+    })
+
+    it('has aria-label="Notifications"', () => {
+      const wrapper = mount(ToastProvider, {
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+      expect(wrapper.find('.ui-toast-provider').attributes('aria-label')).toBe('Notifications')
+    })
+  })
+
+  describe('Dismiss handling', () => {
+    it('removes toast when dismiss event is emitted', async () => {
+      const id = toastActions.success('Test toast')
+
+      const wrapper = mount(ToastProvider, {
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+
+      expect(wrapper.findAll('.ui-toast').length).toBe(1)
+
+      // Find the close button and click it
+      await wrapper.find('.ui-toast__close').trigger('click')
+
+      // Toast should be removed
+      expect(wrapper.findAll('.ui-toast').length).toBe(0)
+    })
+  })
+})

package/src/components/Toast/ToastProvider.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { toasts, toastActions } from './toastState'
+import ToastItem from './ToastItem.vue'
+
+export interface ToastProviderProps {
+  /** Position of the toast container */
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'
+}
+
+withDefaults(defineProps<ToastProviderProps>(), {
+  position: 'top-right'
+})
+
+function handleDismiss(id: string) {
+  toastActions.remove(id)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="ui-toast-provider"
+      :class="[`ui-toast-provider--${position}`]"
+      role="region"
+      aria-label="Notifications"
+    >
+      <TransitionGroup name="toast">
+        <ToastItem
+          v-for="toast in toasts"
+          :key="toast.id"
+          :toast="toast"
+          @dismiss="handleDismiss"
+        />
+      </TransitionGroup>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.ui-toast-provider {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  pointer-events: none;
+}
+
+.ui-toast-provider--top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.ui-toast-provider--top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.ui-toast-provider--bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+.ui-toast-provider--bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.ui-toast-provider--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.ui-toast-provider--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+.toast-enter-active {
+  transition:
+    opacity var(--duration-normal) var(--ease-out),
+    transform var(--duration-normal) var(--ease-out-back);
+}
+
+.toast-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.toast-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.toast-leave-active {
+  position: absolute;
+  transition:
+    opacity var(--duration-fast) var(--ease-default),
+    transform var(--duration-fast) var(--ease-default);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.toast-move {
+  transition: transform var(--duration-normal) var(--ease-out);
+}
+
+.ui-toast-provider--top-left .toast-enter-from,
+.ui-toast-provider--bottom-left .toast-enter-from {
+  transform: translateX(-100%);
+}
+
+.ui-toast-provider--top-center .toast-enter-from,
+.ui-toast-provider--bottom-center .toast-enter-from {
+  transform: translateY(-100%) scale(0.9);
+}
+
+.ui-toast-provider--bottom-right .toast-enter-from,
+.ui-toast-provider--bottom-left .toast-enter-from {
+  transform: translateY(100%);
+}
+
+.ui-toast-provider--bottom-right .toast-enter-from {
+  transform: translateX(100%);
+}
+
+@media (max-width: 480px) {
+  .ui-toast-provider {
+    left: 0 !important;
+    right: 0 !important;
+    transform: none !important;
+    padding: var(--space-3);
+  }
+
+  .ui-toast-provider--top-right,
+  .ui-toast-provider--top-left,
+  .ui-toast-provider--top-center {
+    top: 0;
+    bottom: auto;
+    align-items: stretch;
+  }
+
+  .ui-toast-provider--bottom-right,
+  .ui-toast-provider--bottom-left,
+  .ui-toast-provider--bottom-center {
+    bottom: 0;
+    top: auto;
+    align-items: stretch;
+  }
+
+  .toast-enter-from {
+    transform: translateY(-20px);
+  }
+
+  .ui-toast-provider--bottom-right .toast-enter-from,
+  .ui-toast-provider--bottom-left .toast-enter-from,
+  .ui-toast-provider--bottom-center .toast-enter-from {
+    transform: translateY(20px);
+  }
+}
+</style>

package/src/components/Toast/index.ts

@@ -0,0 +1,83 @@
+export { default as ToastProvider } from './ToastProvider.vue'
+export type { ToastProviderProps } from './ToastProvider.vue'
+
+export { default as ToastItem } from './ToastItem.vue'
+export type { ToastItemProps } from './ToastItem.vue'
+
+import { toastActions } from './toastState'
+export { toasts, toastActions } from './toastState'
+export type { Toast, ToastOptions, ToastVariant, ToastAction } from './toastState'
+
+/**
+ * Composable for triggering toast notifications.
+ * Can be used anywhere - components, stores, API interceptors.
+ *
+ * @example
+ * ```ts
+ * const toast = useToast()
+ *
+ * // Simple usage
+ * toast.success('Saved!')
+ * toast.error('Something went wrong')
+ *
+ * // With message
+ * toast.success('Profile updated', { message: 'Your changes have been saved.' })
+ *
+ * // Custom duration (ms)
+ * toast.info('Heads up', { duration: 10000 })
+ *
+ * // No auto-dismiss
+ * toast.warning('Action required', { duration: 0 })
+ *
+ * // Manual dismiss
+ * const id = toast.info('Processing...')
+ * // later...
+ * toast.dismiss(id)
+ * ```
+ */
+export function useToast() {
+  return {
+    /**
+     * Show a success toast
+     * @param title - Toast title
+     * @param options - Additional options (message, duration)
+     * @returns Toast ID for manual dismissal
+     */
+    success: toastActions.success,
+
+    /**
+     * Show an error toast
+     * @param title - Toast title
+     * @param options - Additional options (message, duration)
+     * @returns Toast ID for manual dismissal
+     */
+    error: toastActions.error,
+
+    /**
+     * Show a warning toast
+     * @param title - Toast title
+     * @param options - Additional options (message, duration)
+     * @returns Toast ID for manual dismissal
+     */
+    warning: toastActions.warning,
+
+    /**
+     * Show an info toast
+     * @param title - Toast title
+     * @param options - Additional options (message, duration)
+     * @returns Toast ID for manual dismissal
+     */
+    info: toastActions.info,
+
+    /**
+     * Dismiss a specific toast
+     * @param id - Toast ID returned from success/error/warning/info
+     */
+    dismiss: toastActions.remove,
+
+    /**
+     * Dismiss all toasts
+     */
+    clear: toastActions.clear
+  }
+}

package/src/components/Toast/toastState.test.ts

@@ -0,0 +1,165 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { toasts, toastActions } from './toastState'
+
+describe('toastState', () => {
+  beforeEach(() => {
+    // Clear all toasts before each test
+    toastActions.clear()
+  })
+
+  describe('add', () => {
+    it('adds a toast with required properties', () => {
+      const id = toastActions.add({ variant: 'success', title: 'Test' })
+
+      expect(toasts.length).toBe(1)
+      expect(toasts[0].id).toBe(id)
+      expect(toasts[0].variant).toBe('success')
+      expect(toasts[0].title).toBe('Test')
+    })
+
+    it('adds toast with message', () => {
+      toastActions.add({ variant: 'info', title: 'Title', message: 'Description' })
+
+      expect(toasts[0].message).toBe('Description')
+    })
+
+    it('uses default duration of 5000ms', () => {
+      toastActions.add({ variant: 'success', title: 'Test' })
+
+      expect(toasts[0].duration).toBe(5000)
+    })
+
+    it('uses custom duration', () => {
+      toastActions.add({ variant: 'success', title: 'Test', duration: 10000 })
+
+      expect(toasts[0].duration).toBe(10000)
+    })
+
+    it('generates unique IDs', () => {
+      const id1 = toastActions.add({ variant: 'success', title: 'Test 1' })
+      const id2 = toastActions.add({ variant: 'success', title: 'Test 2' })
+
+      expect(id1).not.toBe(id2)
+    })
+
+    it('sets createdAt timestamp', () => {
+      const before = Date.now()
+      toastActions.add({ variant: 'success', title: 'Test' })
+      const after = Date.now()
+
+      expect(toasts[0].createdAt).toBeGreaterThanOrEqual(before)
+      expect(toasts[0].createdAt).toBeLessThanOrEqual(after)
+    })
+
+    it('enforces max limit of 5 toasts', () => {
+      for (let i = 0; i < 7; i++) {
+        toastActions.add({ variant: 'info', title: `Toast ${i}` })
+      }
+
+      expect(toasts.length).toBe(5)
+      // Oldest should be removed
+      expect(toasts[0].title).toBe('Toast 2')
+      expect(toasts[4].title).toBe('Toast 6')
+    })
+
+    it('returns toast ID', () => {
+      const id = toastActions.add({ variant: 'success', title: 'Test' })
+
+      expect(typeof id).toBe('string')
+      expect(id.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('remove', () => {
+    it('removes toast by ID', () => {
+      const id = toastActions.add({ variant: 'success', title: 'Test' })
+      expect(toasts.length).toBe(1)
+
+      toastActions.remove(id)
+      expect(toasts.length).toBe(0)
+    })
+
+    it('does nothing if ID not found', () => {
+      toastActions.add({ variant: 'success', title: 'Test' })
+      expect(toasts.length).toBe(1)
+
+      toastActions.remove('non-existent-id')
+      expect(toasts.length).toBe(1)
+    })
+
+    it('removes correct toast from multiple', () => {
+      toastActions.add({ variant: 'success', title: 'Toast 1' })
+      const id2 = toastActions.add({ variant: 'error', title: 'Toast 2' })
+      toastActions.add({ variant: 'info', title: 'Toast 3' })
+
+      toastActions.remove(id2)
+
+      expect(toasts.length).toBe(2)
+      expect(toasts[0].title).toBe('Toast 1')
+      expect(toasts[1].title).toBe('Toast 3')
+    })
+  })
+
+  describe('clear', () => {
+    it('removes all toasts', () => {
+      toastActions.add({ variant: 'success', title: 'Test 1' })
+      toastActions.add({ variant: 'error', title: 'Test 2' })
+      toastActions.add({ variant: 'info', title: 'Test 3' })
+      expect(toasts.length).toBe(3)
+
+      toastActions.clear()
+      expect(toasts.length).toBe(0)
+    })
+
+    it('does nothing if already empty', () => {
+      expect(toasts.length).toBe(0)
+      toastActions.clear()
+      expect(toasts.length).toBe(0)
+    })
+  })
+
+  describe('convenience methods', () => {
+    it('success() creates success toast', () => {
+      toastActions.success('Success!')
+
+      expect(toasts[0].variant).toBe('success')
+      expect(toasts[0].title).toBe('Success!')
+    })
+
+    it('error() creates error toast', () => {
+      toastActions.error('Error!')
+
+      expect(toasts[0].variant).toBe('error')
+      expect(toasts[0].title).toBe('Error!')
+    })
+
+    it('warning() creates warning toast', () => {
+      toastActions.warning('Warning!')
+
+      expect(toasts[0].variant).toBe('warning')
+      expect(toasts[0].title).toBe('Warning!')
+    })
+
+    it('info() creates info toast', () => {
+      toastActions.info('Info!')
+
+      expect(toasts[0].variant).toBe('info')
+      expect(toasts[0].title).toBe('Info!')
+    })
+
+    it('convenience methods accept options', () => {
+      toastActions.success('Title', { message: 'Message', duration: 3000 })
+
+      expect(toasts[0].title).toBe('Title')
+      expect(toasts[0].message).toBe('Message')
+      expect(toasts[0].duration).toBe(3000)
+    })
+
+    it('convenience methods return ID', () => {
+      const id = toastActions.success('Test')
+
+      expect(typeof id).toBe('string')
+      expect(toasts[0].id).toBe(id)
+    })
+  })
+})