@weni/unnnic-system 3.5.3-alpha.2 → 3.6.0

package/src/components/Toast/__tests__/Toast.spec.js

@@ -1,284 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
-import Toast from '../Toast.vue';
-
-describe('UnnnicToast', () => {
-  let wrapper;
-  let mockAction;
-
-  beforeEach(() => {
-    mockAction = vi.fn();
-    vi.useFakeTimers();
-
-    wrapper = shallowMount(Toast, {
-      props: {
-        title: 'Test Toast',
-      },
-      global: {
-        stubs: {
-          Transition: {
-            template: '<div data-testid="toast-transition"><slot /></div>',
-          },
-        },
-      },
-    });
-  });
-
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-    vi.useRealTimers();
-    vi.clearAllMocks();
-  });
-
-  const transition = () =>
-    wrapper.findComponent('[data-testid="toast-transition"]');
-  const toast = () => wrapper.find('[data-testid="toast"]');
-  const content = () => wrapper.find('[data-testid="toast-content"]');
-  const header = () => wrapper.find('[data-testid="toast-header"]');
-  const title = () => wrapper.find('[data-testid="toast-title"]');
-  const text = () => wrapper.find('[data-testid="toast-text"]');
-  const actionButton = () =>
-    wrapper.findComponent('[data-testid="toast-action-button"]');
-  const closeIcon = () =>
-    wrapper.findComponent('[data-testid="toast-close-icon"]');
-  const typeIcon = () =>
-    wrapper.findComponent('[data-testid="toast-type-icon"]');
-
-  describe('Rendering', () => {
-    test('renders correctly with required props', () => {
-      expect(transition().exists()).toBe(true);
-      expect(header().exists()).toBe(true);
-
-      expect(typeIcon().exists()).toBe(true);
-      expect(typeIcon().props('icon')).toBe('info');
-      expect(typeIcon().props('scheme')).toBe('blue-500');
-      expect(typeIcon().props('size')).toBe('ant');
-
-      expect(title().exists()).toBe(true);
-      expect(title().text()).toBe('Test Toast');
-
-      expect(text().exists()).toBe(false);
-
-      expect(toast().exists()).toBe(true);
-      expect(content().exists()).toBe(true);
-      expect(actionButton().exists()).toBe(false);
-
-      expect(closeIcon().exists()).toBe(true);
-      expect(closeIcon().props('icon')).toBe('close');
-      expect(closeIcon().props('scheme')).toBe('neutral-dark');
-      expect(closeIcon().props('size')).toBe('ant');
-      expect(closeIcon().props('clickable')).toBe(true);
-    });
-
-    test('renders description when provided', async () => {
-      await wrapper.setProps({ description: 'Test description' });
-
-      expect(text().exists()).toBe(true);
-      expect(text().text()).toBe('Test description');
-    });
-
-    test('applies correct CSS class based on type', async () => {
-      const types = ['informational', 'attention', 'success', 'error'];
-
-      for (const type of types) {
-        await wrapper.setProps({ type });
-
-        expect(toast().classes()).toContain(`unnnic-toast--${type}`);
-      }
-    });
-
-    test('sets correct ARIA attributes for different types', async () => {
-      // Error type
-      await wrapper.setProps({ type: 'error' });
-      expect(toast().attributes('role')).toBe('alert');
-      expect(toast().attributes('aria-live')).toBe('assertive');
-
-      // Other types
-      await wrapper.setProps({ type: 'informational' });
-      expect(toast().attributes('role')).toBe('status');
-      expect(toast().attributes('aria-live')).toBe('polite');
-    });
-  });
-
-  describe('Icon Configuration', () => {
-    test('displays correct icon for each type', async () => {
-      const typeConfigs = [
-        { type: 'informational', expectedIcon: 'info' },
-        { type: 'attention', expectedIcon: 'error' },
-        { type: 'success', expectedIcon: 'check_circle' },
-        { type: 'error', expectedIcon: 'cancel' },
-      ];
-
-      for (const { type, expectedIcon } of typeConfigs) {
-        await wrapper.setProps({ type });
-        const icon = typeIcon();
-        expect(icon.props('icon')).toBe(expectedIcon);
-      }
-    });
-
-    test('displays correct scheme color for each type', async () => {
-      const typeConfigs = [
-        { type: 'informational', expectedScheme: 'blue-500' },
-        { type: 'attention', expectedScheme: 'yellow-500' },
-        { type: 'success', expectedScheme: 'green-500' },
-        { type: 'error', expectedScheme: 'red-500' },
-      ];
-
-      for (const { type, expectedScheme } of typeConfigs) {
-        await wrapper.setProps({ type });
-        const icon = typeIcon();
-        expect(icon.props('scheme')).toBe(expectedScheme);
-      }
-    });
-  });
-
-  describe('Close Functionality', () => {
-    test('emits close event when close button is clicked', async () => {
-      const closeButton = closeIcon();
-      await closeButton.trigger('click');
-
-      expect(wrapper.emitted('close')).toBeTruthy();
-      expect(wrapper.emitted('close')).toHaveLength(1);
-
-      expect(wrapper.vm.isVisible).toBe(false);
-    });
-
-    test('emits close event when close button is activated with Enter key', async () => {
-      const closeButton = closeIcon();
-      await closeButton.trigger('keydown.enter');
-
-      expect(wrapper.emitted('close')).toBeTruthy();
-      expect(wrapper.emitted('close')).toHaveLength(1);
-
-      expect(wrapper.vm.isVisible).toBe(false);
-    });
-
-    test('hides toast when close is triggered', async () => {
-      expect(toast().exists()).toBe(true);
-
-      await wrapper.vm.handleClose();
-      await wrapper.vm.$nextTick();
-
-      expect(toast().exists()).toBe(false);
-    });
-  });
-
-  describe('Action Button', () => {
-    test('renders action button when provided', async () => {
-      await wrapper.setProps({
-        button: {
-          text: 'Action',
-          action: mockAction,
-        },
-      });
-
-      expect(actionButton().exists()).toBe(true);
-      expect(actionButton().props('text')).toBe('Action');
-    });
-
-    test('does not render action button when not provided', async () => {
-      expect(actionButton().exists()).toBe(false);
-    });
-
-    test('calls action function when action button is clicked', async () => {
-      await wrapper.setProps({
-        button: {
-          text: 'Action',
-          action: mockAction,
-        },
-      });
-
-      await actionButton().trigger('click');
-
-      expect(mockAction).toHaveBeenCalledTimes(1);
-    });
-
-    test('calls action function when action button is activated with Enter key', async () => {
-      await wrapper.setProps({
-        button: {
-          text: 'Action',
-          action: mockAction,
-        },
-      });
-
-      await actionButton().trigger('keydown.enter');
-
-      expect(mockAction).toHaveBeenCalledTimes(1);
-    });
-
-    test('does not throw error when action button has no action function', async () => {
-      await wrapper.setProps({
-        button: {
-          text: 'Action',
-          action: undefined,
-        },
-      });
-
-      expect(async () => {
-        await actionButton().trigger('click');
-      }).not.toThrow();
-    });
-  });
-
-  describe('Timeout Functionality', () => {
-    const createTimeoutWrapper = (timeout = 1000) => {
-      return shallowMount(Toast, {
-        props: { title: 'Test Toast', timeout },
-      });
-    };
-
-    test('auto-closes after timeout period', async () => {
-      wrapper = createTimeoutWrapper();
-      vi.advanceTimersByTime(1000);
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('close')).toBeTruthy();
-    });
-
-    test('does not auto-close when timeout is 0', async () => {
-      wrapper = createTimeoutWrapper(0);
-      vi.advanceTimersByTime(5000);
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('close')).toBeFalsy();
-    });
-
-    test('does not auto-close when timeout is negative', async () => {
-      wrapper = createTimeoutWrapper(-1);
-      vi.advanceTimersByTime(5000);
-
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted('close')).toBeFalsy();
-    });
-
-    test('clears timeout when component is unmounted', () => {
-      const clearTimeoutSpy = vi.spyOn(window, 'clearTimeout');
-      wrapper = createTimeoutWrapper();
-
-      wrapper.unmount();
-      expect(clearTimeoutSpy).toHaveBeenCalled();
-    });
-  });
-
-  describe('Transitions', () => {
-    test('emits destroy event after leave transition', async () => {
-      await wrapper.vm.handleClose();
-      await wrapper.vm.$nextTick();
-
-      await transition().vm.$emit('after-leave');
-
-      expect(wrapper.emitted('destroy')).toBeTruthy();
-    });
-  });
-
-  describe('Default Props', () => {
-    test('uses correct default values', () => {
-      expect(wrapper.props('description')).toBe('');
-      expect(wrapper.props('button')).toBeUndefined();
-      expect(wrapper.props('timeout')).toBe(5000);
-      expect(wrapper.props('type')).toBe('informational');
-    });
-  });
-});

package/src/components/Toast/__tests__/ToastManager.spec.js

@@ -1,294 +0,0 @@
-import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
-
-vi.mock('vue', () => ({
-  createApp: vi.fn(() => ({
-    mount: vi.fn(),
-    unmount: vi.fn(),
-  })),
-}));
-
-vi.mock('../Toast.vue', () => ({
-  default: {
-    name: 'Toast',
-    template: '<div data-testid="toast">Mock Toast</div>',
-  },
-}));
-
-import toastManager, { toast } from '../ToastManager';
-import Toast from '../Toast.vue';
-
-describe('ToastManager', () => {
-  let mockCreateApp;
-  let mockMount;
-  let mockUnmount;
-
-  beforeEach(async () => {
-    vi.clearAllMocks();
-
-    document.body.innerHTML = '';
-
-    const { createApp } = await import('vue');
-    mockCreateApp = createApp;
-    mockMount = vi.fn();
-    mockUnmount = vi.fn();
-
-    mockCreateApp.mockReturnValue({
-      mount: mockMount,
-      unmount: mockUnmount,
-    });
-
-    Object.defineProperty(globalThis, 'document', {
-      value: {
-        ...document,
-        createElement: vi.fn((tagName) => {
-          const element = {
-            tagName: tagName.toUpperCase(),
-            setAttribute: vi.fn(),
-            appendChild: vi.fn(),
-            remove: vi.fn(),
-            children: [],
-            parentNode: null,
-          };
-
-          if (tagName === 'div') {
-            element.appendChild = vi.fn((child) => {
-              child.parentNode = element;
-              element.children.push(child);
-            });
-          }
-
-          return element;
-        }),
-        body: {
-          ...document.body,
-          appendChild: vi.fn(),
-        },
-      },
-      writable: true,
-    });
-  });
-
-  afterEach(() => {
-    if (toastManager.toasts) {
-      toastManager.toasts.clear();
-    }
-
-    document.body.innerHTML = '';
-
-    vi.clearAllMocks();
-  });
-
-  describe('Container Management', () => {
-    test('creates container on first toast', () => {
-      const createElementSpy = vi.spyOn(document, 'createElement');
-      const appendChildSpy = vi.spyOn(document.body, 'appendChild');
-
-      toastManager.show({ title: 'Test Toast' });
-
-      expect(createElementSpy).toHaveBeenCalledWith('div');
-      expect(appendChildSpy).toHaveBeenCalled();
-    });
-
-    test('reuses existing container', () => {
-      const createElementSpy = vi.spyOn(document, 'createElement');
-
-      toastManager.show({ title: 'First Toast' });
-      const firstCallCount = createElementSpy.mock.calls.length;
-
-      toastManager.show({ title: 'Second Toast' });
-      const secondCallCount = createElementSpy.mock.calls.length;
-
-      // First toast: container div + wrapper div = 2 calls
-      // Second toast: only wrapper div = 1 more call
-      // Total: 3 calls (1 container + 2 wrappers)
-      expect(secondCallCount).toBe(firstCallCount + 1);
-
-      expect(createElementSpy).toHaveBeenCalledWith('div');
-    });
-  });
-
-  describe('Toast Instance Management', () => {
-    test('generates unique IDs for toasts', () => {
-      const toast1 = toastManager.show({ title: 'First Toast' });
-      const toast2 = toastManager.show({ title: 'Second Toast' });
-
-      expect(toast1.id).not.toBe(toast2.id);
-      expect(toast1.id).toMatch(/^toast-\d+$/);
-      expect(toast2.id).toMatch(/^toast-\d+$/);
-    });
-
-    test('stores toast instances in map', () => {
-      const toast1 = toastManager.show({ title: 'First Toast' });
-      const toast2 = toastManager.show({ title: 'Second Toast' });
-
-      expect(toastManager.toasts.has(toast1.id)).toBe(true);
-      expect(toastManager.toasts.has(toast2.id)).toBe(true);
-      expect(toastManager.toasts.size).toBe(2);
-    });
-
-    test('creates toast with correct props', () => {
-      const props = {
-        title: 'Test Toast',
-        description: 'Test Description',
-        type: 'success',
-        timeout: 3000,
-      };
-
-      toastManager.show(props);
-
-      expect(mockCreateApp).toHaveBeenCalledWith(
-        Toast,
-        expect.objectContaining({
-          title: 'Test Toast',
-          description: 'Test Description',
-          type: 'success',
-          timeout: 3000,
-          onClose: expect.any(Function),
-          onDestroy: expect.any(Function),
-        }),
-      );
-    });
-
-    test('mounts toast app to wrapper element', () => {
-      toastManager.show({ title: 'Test Toast' });
-
-      expect(mockMount).toHaveBeenCalled();
-    });
-  });
-
-  describe('Toast Close Functionality', () => {
-    test('removes toast from map when closed', () => {
-      const toastInstance = toastManager.show({ title: 'Test Toast' });
-
-      expect(toastManager.toasts.has(toastInstance.id)).toBe(true);
-
-      toastManager.close(toastInstance.id);
-
-      expect(toastManager.toasts.has(toastInstance.id)).toBe(false);
-    });
-
-    test('handles closing non-existent toast gracefully', () => {
-      expect(() => {
-        toastManager.close('non-existent-id');
-      }).not.toThrow();
-    });
-
-    test('calls close when onClose is triggered', () => {
-      const closeSpy = vi.spyOn(toastManager, 'close');
-
-      toastManager.show({ title: 'Test Toast' });
-
-      const createAppCall = mockCreateApp.mock.calls[0];
-      const props = createAppCall[1];
-      const onCloseCallback = props.onClose;
-
-      onCloseCallback();
-
-      expect(closeSpy).toHaveBeenCalled();
-    });
-  });
-
-  describe('Toast Destroy Functionality', () => {
-    test('unmounts app and removes wrapper on destroy', () => {
-      toastManager.show({ title: 'Test Toast' });
-
-      const createAppCall = mockCreateApp.mock.calls[0];
-      const props = createAppCall[1];
-      const onDestroyCallback = props.onDestroy;
-
-      onDestroyCallback();
-
-      expect(mockUnmount).toHaveBeenCalled();
-    });
-
-    test('resolves promise when toast is destroyed', async () => {
-      const toastInstance = toastManager.show({ title: 'Test Toast' });
-
-      const createAppCall = mockCreateApp.mock.calls[0];
-      const props = createAppCall[1];
-      const onDestroyCallback = props.onDestroy;
-
-      const promiseResolved = vi.fn();
-      toastInstance.promise.then(promiseResolved);
-
-      onDestroyCallback();
-
-      await new Promise((resolve) => setTimeout(resolve, 0));
-
-      expect(promiseResolved).toHaveBeenCalled();
-    });
-  });
-
-  describe('Toast API', () => {
-    beforeEach(() => {
-      vi.spyOn(toastManager, 'show').mockReturnValue({
-        id: 'mock-id',
-        props: {},
-        close: vi.fn(),
-        promise: Promise.resolve(),
-      });
-    });
-
-    test('toast.info creates informational toast', () => {
-      toast.info('Info Title', 'Info Description', { timeout: 1000 });
-
-      expect(toastManager.show).toHaveBeenCalledWith({
-        title: 'Info Title',
-        description: 'Info Description',
-        timeout: 1000,
-        type: 'informational',
-      });
-    });
-
-    test('toast.success creates success toast', () => {
-      toast.success('Success Title', 'Success Description');
-
-      expect(toastManager.show).toHaveBeenCalledWith({
-        title: 'Success Title',
-        description: 'Success Description',
-        type: 'success',
-      });
-    });
-
-    test('toast.attention creates attention toast', () => {
-      toast.attention('Attention Title');
-
-      expect(toastManager.show).toHaveBeenCalledWith({
-        title: 'Attention Title',
-        type: 'attention',
-      });
-    });
-
-    test('toast.error creates error toast', () => {
-      toast.error('Error Title', 'Error Description', {
-        button: { text: 'Retry', action: vi.fn() },
-      });
-
-      expect(toastManager.show).toHaveBeenCalledWith({
-        title: 'Error Title',
-        description: 'Error Description',
-        button: { text: 'Retry', action: expect.any(Function) },
-        type: 'error',
-      });
-    });
-
-    test('toast methods return promises', async () => {
-      const infoPromise = toast.info('Test');
-      const successPromise = toast.success('Test');
-      const attentionPromise = toast.attention('Test');
-      const errorPromise = toast.error('Test');
-
-      expect(infoPromise).toBeInstanceOf(Promise);
-      expect(successPromise).toBeInstanceOf(Promise);
-      expect(attentionPromise).toBeInstanceOf(Promise);
-      expect(errorPromise).toBeInstanceOf(Promise);
-
-      await Promise.all([
-        infoPromise,
-        successPromise,
-        attentionPromise,
-        errorPromise,
-      ]);
-    });
-  });
-});

package/src/components/Toast/types.ts

@@ -1,57 +0,0 @@
-export interface ToastManager {
-  show: (props: ToastProps) => ToastInstance;
-  close: (id: string) => void;
-}
-
-export interface ToastButton {
-  text: string;
-  action: () => void;
-}
-
-export type ToastType = 'informational' | 'attention' | 'success' | 'error';
-
-export interface ToastProps extends ToastOptions {
-  title: string;
-  description?: string;
-}
-
-export interface ToastOptions {
-  type?: ToastType;
-  button?: ToastButton;
-  timeout?: number;
-}
-
-export interface ToastEmits {
-  close: [];
-  destroy: [];
-}
-
-export interface ToastInstance {
-  id: string;
-  props: ToastProps;
-  close: () => void;
-  promise: Promise<void>;
-}
-
-export interface ToastCall {
-  info: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  success: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  attention: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-  error: (
-    title: string,
-    description?: string,
-    options?: ToastOptions,
-  ) => Promise<void>;
-}

package/src/components/ui/dialog/Dialog.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
-import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
-
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
-</template>

package/src/components/ui/dialog/DialogClose.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from 'reka-ui';
-import { DialogClose } from 'reka-ui';
-
-const props = defineProps<DialogCloseProps>();
-</script>
-
-<template>
-  <DialogClose
-    class="unnnic-dialog-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-close {
-  > * {
-    width: 100%;
-  }
-}
-</style>