@weni/unnnic-system 3.10.0 → 3.11.1-alpha.0

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

@@ -0,0 +1,294 @@
+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

@@ -0,0 +1,57 @@
+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/ToolTip/ToolTip.vue

@@ -1,48 +1,53 @@
 <template>
-  <div
-    ref="tooltip"
-    :class="{
-      'unnnic-tooltip': enabled || forceOpen,
-      'force-open': forceOpen,
-    }"
-    @mouseover="handleResize"
-  >
-    <slot />
-    <span
-      v-show="enabled || forceOpen"
-      ref="label"
-      :class="['unnnic-tooltip-label', `unnnic-tooltip-label-${side}`]"
-      :style="{ maxWidth: maxWidth, left: leftPos, top: topPos }"
-      data-testid="tooltip-label"
+  <TooltipProvider>
+    <Tooltip
+      :disabled="!(enabled || forceOpen)"
+      :open="forceOpen || undefined"
+      data-testid="tooltip-wrapper"
     >
-      <template v-if="enableHtml">
-        <!-- eslint-disable-next-line vue/no-v-html -->
-        <section v-html="text"></section>
-      </template>
-      <template
-        v-for="(line, index) in text.split('\n')"
-        v-else
-        :key="index"
-      >
-        {{ line }}
-        <br />
-      </template>
+      <TooltipTrigger data-testid="tooltip-trigger">
+        <slot />
+      </TooltipTrigger>
 
-      <template v-if="shortcutText">
-        <span
-          class="unnnic-tooltip-label-shortcut"
-          data-testid="tooltip-label-shortcut"
+      <TooltipContent
+        :class="['unnnic-tooltip-label', `unnnic-tooltip-label-${side}`]"
+        :style="{ maxWidth: maxWidth }"
+        :side="side"
+        data-testid="tooltip-content"
+      >
+        <template v-if="enableHtml">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <section
+            v-html="text"
+            data-testid="tooltip-html-content"
+          ></section>
+        </template>
+        <template
+          v-for="(line, index) in text.split('\n')"
+          v-else
+          :key="index"
         >
-          {{ shortcutText }}
-        </span>
-      </template>
-    </span>
-  </div>
+          {{ line }}
+          <br />
+        </template>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
 </template>
 
 <script>
+import { Tooltip, TooltipProvider } from '../ui/tooltip';
+import TooltipContent from '../ui/tooltip/TooltipContent.vue';
+import TooltipTrigger from '../ui/tooltip/TooltipTrigger.vue';
+
 export default {
   name: 'UnnnicTooltip',
+  components: {
+    Tooltip,
+    TooltipProvider,
+    TooltipTrigger,
+    TooltipContent,
+  },
   props: {
     text: {
       type: String,
@@ -67,162 +72,10 @@ export default {
       type: String,
       default: '',
     },
-    shortcutText: {
-      type: String,
-      default: null,
-    },
     enableHtml: {
       type: Boolean,
       default: false,
     },
   },
-  data() {
-    return {
-      topPos: null,
-      leftPos: null,
-    };
-  },
-  watch: {
-    side() {
-      this.getRightPost(this.$refs.tooltip);
-    },
-  },
-  mounted() {
-    this.handleResize();
-
-    window.addEventListener('scroll', this.handleResize);
-    window.addEventListener('resize', this.handleResize);
-  },
-  unmounted() {
-    window.removeEventListener('scroll', this.handleResize);
-    window.removeEventListener('resize', this.handleResize);
-  },
-  methods: {
-    handleResize() {
-      this.getRightPost(this.$refs.tooltip);
-    },
-    getRightPost(element) {
-      const elementPos = element.getBoundingClientRect();
-
-      if (element && this.$refs.label) {
-        if (this.side === 'right') {
-          this.leftPos = `${elementPos.x + elementPos.width + 8}px`;
-          this.topPos = `${elementPos.y + elementPos.height / 2 - this.$refs.label.offsetHeight / 2}px`;
-        } else if (this.side === 'left') {
-          this.leftPos = `${elementPos.x - this.$refs.label.offsetWidth - 8}px`;
-          this.topPos = `${elementPos.y + elementPos.height / 2 - this.$refs.label.offsetHeight / 2}px`;
-        } else if (this.side === 'top') {
-          this.leftPos = `${elementPos.x + elementPos.width / 2 - this.$refs.label.clientWidth / 2}px`;
-          this.topPos = `${elementPos.y - this.$refs.label.offsetHeight - 8}px`;
-        } else if (this.side === 'bottom') {
-          this.leftPos = `${elementPos.x + elementPos.width / 2 - this.$refs.label.clientWidth / 2}px`;
-          this.topPos = `${elementPos.y + elementPos.height + 8}px`;
-        }
-      }
-    },
-  },
 };
 </script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-tooltip {
-  position: relative;
-  display: inline-block;
-  overflow-wrap: break-word;
-}
-
-.unnnic-tooltip-label {
-  z-index: 1;
-  visibility: hidden;
-  text-align: center;
-  position: fixed;
-  width: max-content;
-  min-width: 2 * $unnnic-font-size;
-  box-sizing: border-box;
-  width: auto;
-  display: flex;
-  justify-content: center;
-  gap: $unnnic-spacing-xs;
-  align-items: center;
-
-  background-color: $unnnic-color-neutral-black;
-  color: $unnnic-color-neutral-snow;
-  border-radius: $unnnic-border-radius-sm;
-  padding: $unnnic-inset-nano;
-  box-shadow: $unnnic-shadow-level-near;
-  font-size: $unnnic-font-size-body-md;
-  font-family: $unnnic-font-family-secondary;
-  font-weight: $unnnic-font-weight-regular;
-  line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-
-  &::after {
-    content: '';
-    position: absolute;
-    border-width: 5px;
-    border-style: solid;
-  }
-
-  &-top {
-    position: fixed;
-    &::after {
-      top: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-color: $unnnic-color-neutral-black transparent transparent
-        transparent;
-    }
-  }
-
-  &-bottom {
-    position: fixed;
-    &::after {
-      bottom: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-color: transparent transparent $unnnic-color-neutral-black
-        transparent;
-    }
-  }
-  &-right {
-    position: fixed;
-    &::after {
-      top: 50%;
-      right: 100%;
-      margin-top: -5px;
-      border-color: transparent $unnnic-color-neutral-black transparent
-        transparent;
-    }
-  }
-  &-left {
-    position: fixed;
-    &::after {
-      top: 50%;
-      left: 100%;
-      margin-top: -5px;
-      border-color: transparent transparent transparent
-        $unnnic-color-neutral-black;
-    }
-  }
-
-  &-shortcut {
-    background-color: $unnnic-color-neutral-darkest;
-    border-radius: $unnnic-border-radius-sm;
-    padding: calc($unnnic-inset-nano / 2) $unnnic-inset-nano;
-  }
-}
-
-.unnnic-tooltip.force-open {
-  .unnnic-tooltip-label {
-    visibility: visible;
-  }
-}
-
-.unnnic-tooltip:hover {
-  .unnnic-tooltip-label {
-    visibility: visible;
-    width: auto;
-  }
-}
-</style>