@weni/unnnic-system 3.9.0 → 3.9.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/index.ts

@@ -25,6 +25,7 @@ import cardImage from './CardImage/CardImage.vue';
 import cardProject from './CardProject/CardProject.vue';
 import cardInformation from './CardInformation/CardInformation.vue';
 import checkbox from './Checkbox/Checkbox.vue';
+import checkboxGroup from './CheckboxGroup/CheckboxGroup.vue';
 import collapse from './Collapse/Collapse.vue';
 import radio from './Radio/Radio.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
@@ -88,18 +89,28 @@ import ModalDialog from './ModalDialog/ModalDialog.vue';
 import Tour from './Tour/Tour.vue';
 import Navigator from './Navigator/index.vue';
 import SelectTime from './SelectTime/index.vue';
+import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
+import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
-import Tabs from './ui/tabs/Tabs.vue';
-import TabsList from './ui/tabs/TabsList.vue';
-import TabsTrigger from './ui/tabs/TabsTrigger.vue';
-import TabsContent from './ui/tabs/TabsContent.vue';
+import Toast from './Toast/Toast.vue';
+import { toast } from './Toast/ToastManager';
 import Popover from './ui/popover/Popover.vue';
 import PopoverContent from './ui/popover/PopoverContent.vue';
 import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 import PopoverFooter from './ui/popover/PopoverFooter.vue';
-import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
-import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
+import Dialog from './ui/dialog/Dialog.vue';
+import DialogContent from './ui/dialog/DialogContent.vue';
+import DialogFooter from './ui/dialog/DialogFooter.vue';
+import DialogHeader from './ui/dialog/DialogHeader.vue';
+import DialogTitle from './ui/dialog/DialogTitle.vue';
+import DialogTrigger from './ui/dialog/DialogTrigger.vue';
+import DialogClose from './ui/dialog/DialogClose.vue';
+import Tabs from './ui/tabs/Tabs.vue';
+import TabsList from './ui/tabs/TabsList.vue';
+import TabsTrigger from './ui/tabs/TabsTrigger.vue';
+import TabsContent from './ui/tabs/TabsContent.vue';
+import PageHeader from './PageHeader/PageHeader.vue';
 
 type VueComponent = Component;
 
@@ -134,6 +145,7 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
+  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -202,13 +214,23 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
+  unnnicToast: Toast,
+  unnnicToastManager: toast,
+  unnnicPopover: Popover,
+  unnnicPopoverContent: PopoverContent,
+  unnnicPopoverTrigger: PopoverTrigger,
+  unnnicDialog: Dialog,
+  unnnicDialogContent: DialogContent,
+  unnnicDialogFooter: DialogFooter,
+  unnnicDialogHeader: DialogHeader,
+  unnnicDialogTitle: DialogTitle,
+  unnnicDialogTrigger: DialogTrigger,
+  unnnicDialogClose: DialogClose,
   unnnicTabs: Tabs,
   unnnicTabsList: TabsList,
   unnnicTabsTrigger: TabsTrigger,
   unnnicTabsContent: TabsContent,
-  unnnicPopover: Popover,
-  unnnicPopoverContent: PopoverContent,
-  unnnicPopoverTrigger: PopoverTrigger,
+  unnnicPageHeader: PageHeader,
 };
 
 export const unnnicFontSize = fontSize;
@@ -238,6 +260,7 @@ export const unnnicCardImage = cardImage as VueComponent;
 export const unnnicCardProject = cardProject as VueComponent;
 export const unnnicCardInformation = cardInformation;
 export const unnnicCheckbox = checkbox;
+export const unnnicCheckboxGroup = checkboxGroup;
 export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
 export const unnniclanguageSelect = languageSelect as VueComponent;
@@ -260,7 +283,7 @@ export const unnnicAccordion = accordion;
 export const unnnicIndicator = indicator;
 export const unnnicSkeletonLoading = skeletonLoading;
 export const unnnicCarousel = carousel;
-export const unnnicLabel = label;
+export const unnnicLabel = label as VueComponent;
 export const unnnicTab = tab;
 export const unnnicTabsExpanded = tabsExpanded;
 export const unnnicBanner = banner;
@@ -301,22 +324,31 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
+export const unnnicTemplatePreview = TemplatePreview as VueComponent;
+export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicChip = Chip;
-export const unnnicTabs = Tabs;
-export const unnnicTabsList = TabsList;
-export const unnnicTabsTrigger = TabsTrigger;
-export const unnnicTabsContent = TabsContent;
+export const unnnicToast = Toast;
+export const unnnicToastManager = toast;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
 export const unnnicPopoverFooter = PopoverFooter;
-export const unnnicTemplatePreview = TemplatePreview as VueComponent;
-export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const unnnicDialog = Dialog;
+export const unnnicDialogContent = DialogContent;
+export const unnnicDialogFooter = DialogFooter;
+export const unnnicDialogHeader = DialogHeader;
+export const unnnicDialogTitle = DialogTitle;
+export const unnnicDialogTrigger = DialogTrigger;
+export const unnnicDialogClose = DialogClose;
+export const unnnicTabs = Tabs;
+export const unnnicTabsList = TabsList;
+export const unnnicTabsTrigger = TabsTrigger;
+export const unnnicTabsContent = TabsContent;
+export const unnnicPageHeader = PageHeader;
 
 export const UnnnicFontSize = fontSize;
-export const UnnnicFormElement = formElement;
 export const UnnnicInput = input;
 export const UnnnicInputNext = inputNext;
 export const UnnnicInputDatePicker = inputDatePicker;
@@ -342,6 +374,7 @@ export const UnnnicCardImage = cardImage as VueComponent;
 export const UnnnicCardProject = cardProject as VueComponent;
 export const UnnnicCardInformation = cardInformation;
 export const UnnnicCheckbox = checkbox;
+export const UnnnicCheckboxGroup = checkboxGroup;
 export const UnnnicCollapse = collapse;
 export const UnnnicRadio = radio;
 export const UnnniclanguageSelect = languageSelect as VueComponent;
@@ -364,7 +397,7 @@ export const UnnnicAccordion = accordion;
 export const UnnnicIndicator = indicator;
 export const UnnnicSkeletonLoading = skeletonLoading;
 export const UnnnicCarousel = carousel;
-export const UnnnicLabel = label;
+export const UnnnicLabel = label as VueComponent;
 export const UnnnicTab = tab;
 export const UnnnicTabsExpanded = tabsExpanded;
 export const UnnnicBanner = banner;
@@ -405,16 +438,26 @@ export const UnnnicDrawer = Drawer;
 export const UnnnicTableNext = TableNext;
 export const UnnnicTour = Tour;
 export const UnnnicNavigator = Navigator;
-export const UnnnicDataTable = DataTable as VueComponent;
 export const UnnnicSelectTime = SelectTime as VueComponent;
+export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
+export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const UnnnicDataTable = DataTable as VueComponent;
 export const UnnnicChip = Chip;
-export const UnnnicTabs = Tabs;
-export const UnnnicTabsList = TabsList;
-export const UnnnicTabsTrigger = TabsTrigger;
-export const UnnnicTabsContent = TabsContent;
+export const UnnnicToast = Toast;
+export const UnnnicToastManager = toast;
 export const UnnnicPopover = Popover;
 export const UnnnicPopoverContent = PopoverContent;
 export const UnnnicPopoverTrigger = PopoverTrigger;
 export const UnnnicPopoverFooter = PopoverFooter;
-export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
-export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const UnnnicDialog = Dialog;
+export const UnnnicDialogContent = DialogContent;
+export const UnnnicDialogFooter = DialogFooter;
+export const UnnnicDialogHeader = DialogHeader;
+export const UnnnicDialogTitle = DialogTitle;
+export const UnnnicDialogTrigger = DialogTrigger;
+export const UnnnicDialogClose = DialogClose;
+export const UnnnicTabs = Tabs;
+export const UnnnicTabsList = TabsList;
+export const UnnnicTabsTrigger = TabsTrigger;
+export const UnnnicTabsContent = TabsContent;
+export const UnnnicPageHeader = PageHeader;

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

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

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

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

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+  defineProps<
+    DialogContentProps & {
+      class?: HTMLAttributes['class'];
+      size?: 'small' | 'medium' | 'large';
+    }
+  >(),
+  {
+    size: 'medium',
+  },
+);
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="unnnic-dialog-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'unnnic-dialog-content',
+          `unnnic-dialog-content--size-${props.size}`,
+          'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </DialogContent>
+  </DialogPortal>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+
+  width: 100vw;
+  height: 100vh;
+  background: rgba(53, 57, 69, 0.5);
+}
+
+.unnnic-dialog-content {
+  z-index: 10000;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  width: 100%;
+  max-height: calc(100% - $unnnic-space-20);
+
+  display: flex;
+  flex-direction: column;
+
+  box-shadow: $unnnic-shadow-2;
+  border-radius: $unnnic-radius-4;
+  background-color: $unnnic-color-bg-base;
+
+  &--size-small {
+    max-width: 360px;
+  }
+
+  &--size-medium {
+    max-width: 560px;
+  }
+
+  &--size-large {
+    max-width: 800px;
+  }
+
+  > * {
+    &::-webkit-scrollbar {
+      width: $unnnic-spacing-inline-nano;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-neutral-cleanest;
+      border-radius: $unnnic-border-radius-pill;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-neutral-soft;
+      border-radius: $unnnic-border-radius-pill;
+    }
+  }
+}
+</style>