@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/notification/assets/styles.scss

@@ -0,0 +1,251 @@
+$positions: (
+  "top": "top-5 left-1/2 items-center -translate-x-1/2",
+  "top-right": "top-5 right-5 items-end",
+  "top-left": "top-5 left-5 items-start",
+  "bottom": "bottom-5 left-1/2 items-center -translate-x-1/2",
+  "bottom-right": "bottom-5 right-5 items-end",
+  "bottom-left": "bottom-5 left-5 items-start"
+);
+
+$notification-types: (
+  "info": "primary-dark-blue",
+  "success": "green-500",
+  "error": "red-500",
+  "warning": "primary-orange",
+  "dark": "gray-700"
+);
+
+$notification-sizes: (
+  "small": "py-2 px-2.5 text-sm gap-2 rounded-lg",
+  "large": "py-3.5 text-sm gap-3 rounded-xl"
+);
+
+$light-notification-types: (
+  "dark": (
+    "bg-color": "gray-100",
+    "icon-color": "gray-900",
+    "title-color": "gray-900",
+    "description-color": "gray-500",
+    "close-color": "gray-500",
+    "button-color": "gray-900"
+  ),
+  "info": (
+    "bg-color": "indigo-100",
+    "icon-color": "blue-800",
+    "title-color": "blue-800",
+    "description-color": "blue-800",
+    "close-color": "blue-800",
+    "button-color": "blue-800"
+  ),
+  "success": (
+    "bg-color": "green-100",
+    "icon-color": "green-800",
+    "title-color": "green-800",
+    "description-color": "green-800",
+    "close-color": "green-800",
+    "button-color": "green-800"
+  ),
+  "warning": (
+    "bg-color": "orange-100",
+    "icon-color": "yellow-800",
+    "title-color": "yellow-800",
+    "description-color": "yellow-800",
+    "close-color": "yellow-800",
+    "button-color": "yellow-800"
+  ),
+  "error": (
+    "bg-color": "red-100",
+    "icon-color": "red-800",
+    "title-color": "red-800",
+    "description-color": "red-800",
+    "close-color": "red-800",
+    "button-color": "red-800"
+  )
+);
+
+@mixin notification-styles($type, $color) {
+  &.ma-notification--filled {
+    @apply bg-#{$color};
+    .ma-notification-icon,
+    .ma-notification-title,
+    .ma-notification-description,
+    .ma-notification-close {
+      @apply text-white;
+    }
+    .ma-notification-description {
+      @apply opacity-80;
+    }
+    .ma-notification-buttons .ma-button {
+      @apply text-white;
+      &:after,
+      &:before {
+        @apply bg-white;
+      }
+    }
+  }
+  &.ma-notification--stroke {
+    @apply bg-white border border-gray-200;
+    box-shadow: 0px 16px 32px -12px rgba(88, 92, 95, 0.1);
+    .ma-notification-icon {
+      @apply text-#{$color};
+    }
+    .ma-notification-title,
+    .ma-notification-description,
+    .ma-notification-close,
+    .ma-notification-buttons .ma-button {
+      @apply text-gray-900;
+    }
+    .ma-notification-description,
+    .ma-notification-close {
+      @apply text-gray-500;
+    }
+    .ma-notification-buttons {
+      .ma-button {
+        &:after,
+        &:before {
+          @apply bg-gray-900;
+        }
+      }
+    }
+  }
+}
+
+@mixin light-notification($bg-color, $icon-color, $title-color, $description-color, $close-color, $button-color) {
+  @apply bg-#{$bg-color};
+  .ma-notification-icon {
+    @apply text-#{$icon-color};
+  }
+  .ma-notification-title,
+  .ma-notification-description,
+  .ma-notification-close {
+    @apply text-#{$title-color};
+  }
+  .ma-notification-description {
+    @apply opacity-100;
+  }
+  .ma-notification-buttons .ma-button {
+    @apply text-#{$button-color};
+    &:after,
+    &:before {
+      @apply bg-#{$button-color};
+    }
+  }
+}
+
+.ma-notification-wrapper {
+  @apply fixed w-full h-full pointer-events-none top-0 left-0 z-[1001] overflow-y-auto;
+
+  @each $position, $classes in $positions {
+    .ma-notification--#{$position} {
+      @apply absolute flex flex-col #{$classes};
+    }
+  }
+
+  .ma-notification {
+    @apply flex items-start justify-between pointer-events-auto p-3.5 transition-all duration-200 ease-linear mb-4;
+
+    &__content {
+      @apply flex flex-row items-start gap-2.5 max-w-full lg:max-w-md;
+
+      &__texts {
+        @apply flex flex-col gap-1 w-[298px];
+        .ma-notification-title,
+        .ma-notification-description {
+          @apply overflow-hidden max-h-64;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 12;
+        }
+        .ma-notification-title {
+          @apply font-medium;
+        }
+      }
+      .ma-notification-buttons {
+        @apply flex gap-5 ml-4;
+        .ma-button {
+          @apply relative;
+          &:not(:first-child) {
+            &::before {
+              @apply content-[''] w-1 h-1 rounded-full absolute -left-3;
+            }
+          }
+        }
+      }
+    }
+
+    &__actions {
+      .ma-notification-close {
+        @apply w-5 h-5 p-1 cursor-pointer transition-opacity duration-300;
+        &:hover {
+          @apply opacity-60;
+        }
+      }
+    }
+
+    @each $size, $size-classes in $notification-sizes {
+      &--#{$size} {
+        @apply #{$size-classes};
+      }
+    }
+
+    @each $type, $color in $notification-types {
+      &--#{$type} {
+        @include notification-styles($type, $color);
+      }
+    }
+
+    &--dark.ma-notification--stroke .ma-notification-icon {
+      @apply text-gray-500;
+    }
+
+    &--light {
+      @each $type, $colors in $light-notification-types {
+        &.ma-notification--#{$type} {
+          @include light-notification(
+            map-get($colors, "bg-color"),
+            map-get($colors, "icon-color"),
+            map-get($colors, "title-color"),
+            map-get($colors, "description-color"),
+            map-get($colors, "close-color"),
+            map-get($colors, "button-color")
+          );
+        }
+      }
+    }
+
+    &--double-text {
+      .ma-notification__content {
+        @apply flex-col;
+        .ma-notification-buttons {
+          @apply ml-0;
+        }
+      }
+    }
+
+    &.leaving {
+      transition:
+        transform 200ms ease-out,
+        opacity 200ms ease-out,
+        margin-bottom 200ms ease-out;
+    }
+  }
+
+  .ma-notification-enter-active,
+  .ma-notification-leave-active {
+    @apply transition-all duration-200 ease-linear;
+  }
+
+  .ma-notification-enter-from,
+  .ma-notification-leave-to {
+    @apply opacity-0 -translate-y-5;
+  }
+
+  .ma-notification-enter-to,
+  .ma-notification-leave-from {
+    @apply opacity-100 translate-y-0;
+  }
+
+  .ma-notification-leave-to {
+    @apply opacity-0 translate-y-5;
+  }
+}

package/src/components/notification/components/notification.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, isVNode } from 'vue';
+import { NotificationOptions } from '../types';
+import { useNotificationAnimation } from '../composables/useNotificationAnimation';
+
+import { MaLinkButton, MaIcon } from '@/index';
+
+export interface MaNotificationProps {
+    notification: NotificationOptions
+}
+
+const { runNotificationLeaveAnimation } = useNotificationAnimation();
+
+const props = defineProps<MaNotificationProps>();
+
+const emit = defineEmits(['remove']);
+
+const timeout = ref<ReturnType<typeof setTimeout> | null>(null);
+const notificationEl = ref<HTMLElement>();
+
+const notificationClasses = [
+    'ma-notification',
+    `ma-notification--${props.notification.type}`,
+    `ma-notification--${props.notification.variant}`,
+    `ma-notification--${props.notification.size}`,
+    {
+        'ma-notification--double-text': props.notification?.title && props.notification?.description,
+    },
+];
+
+const startTimer = () => {
+    if (props.notification.duration) {
+        timeout.value = setTimeout(removeNotification, props.notification.duration);
+    }
+};
+
+const stopTimer = () => {
+    if (timeout.value) {
+        clearTimeout(timeout.value);
+        timeout.value = null;
+    }
+};
+
+const removeNotification = () => {
+    if (!notificationEl.value) return;
+    runNotificationLeaveAnimation(notificationEl, () => {
+        emit('remove', props.notification.id);
+    });
+};
+
+onMounted(startTimer);
+onUnmounted(stopTimer);
+</script>
+<template>
+  <div
+    ref="notificationEl"
+    :class="notificationClasses"
+    @mouseenter="stopTimer"
+    @mouseleave="startTimer"
+  >
+    <ma-icon
+      v-if="props.notification.icon"
+      class="ma-notification-icon"
+      :name="props.notification.icon"
+      size="sm"
+    />
+    <div class="ma-notification__content">
+      <div class="ma-notification__content__texts">
+        <component
+          :is="props.notification.title"
+          v-if="isVNode(props.notification.title)"
+          class="ma-notification-title"
+        />
+        <div
+          v-else-if="props.notification.title"
+          class="ma-notification-title"
+          :title="props.notification.title"
+        >
+          {{ props.notification.title }}
+        </div>
+        <component
+          :is="props.notification.description"
+          v-if="isVNode(props.notification.description)"
+          class="ma-notification-description"
+        />
+        <div
+          v-else-if="props.notification.description"
+          class="ma-notification-description"
+          :title="props.notification.description"
+        >
+          {{ props.notification.description }}
+        </div>
+      </div>
+      <div
+        v-if="props.notification.buttons && props.notification.buttons.length"
+        class="ma-notification-buttons"
+      >
+        <ma-link-button
+          v-for="(button, buttonIndex) in props.notification.buttons"
+          :key="buttonIndex"
+          size="small"
+          @click="button.onClick(props.notification.id)"
+        >
+          {{ button.label }}
+        </ma-link-button>
+      </div>
+    </div>
+    <div class="ma-notification__actions">
+      <ma-icon
+        v-if="props.notification.closable"
+        name="close"
+        class="ma-notification-close"
+        size="xs"
+        @click="removeNotification"
+      />
+    </div>
+  </div>
+</template>

package/src/components/notification/components/notificationContainer.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref, computed, ComputedRef } from 'vue';
+import { NotificationOptions, NotificationPlacement } from '../types';
+import kebabCase from 'lodash/kebabCase';
+import MaNotification from './notification.vue';
+
+const notifications = ref<NotificationOptions[]>([]);
+
+const addNotification = (notification: NotificationOptions) => {
+    notifications.value.push(notification);
+    return notification.id;
+};
+
+const removeNotification = (deletedId: number | string) => {
+    notifications.value = notifications.value.filter(
+        ({ id }) => id !== deletedId
+    );
+};
+
+const removeAll = () => {
+    notifications.value = [];
+};
+
+type Placements = Record<NotificationPlacement, NotificationOptions[]>;
+
+const placementNotifications: ComputedRef<Placements> = computed(() => {
+    const initialPlacement: Placements = {
+        top: [],
+        topRight: [],
+        topLeft: [],
+        bottom: [],
+        bottomRight: [],
+        bottomLeft: [],
+    };
+
+    return notifications.value.reduce((placements, notification) => {
+        const placement = notification.placement || 'topLeft';
+        placements[placement].push(notification);
+        return placements;
+    }, initialPlacement);
+});
+
+defineExpose({
+    addNotification,
+    removeNotification,
+    removeAll,
+});
+</script>
+<template>
+  <teleport to="body">
+    <div
+      v-if="notifications.length"
+      class="ma-notification-wrapper"
+    >
+      <div
+        v-for="(notificationList, placement) in placementNotifications"
+        :key="placement"
+        :class="`ma-notification--${kebabCase(placement)}`"
+      >
+        <transition-group name="ma-notification">
+          <ma-notification
+            v-for="notification in notificationList"
+            :key="notification.id"
+            :notification="notification"
+            @remove="removeNotification"
+          />
+        </transition-group>
+      </div>
+    </div>
+  </teleport>
+</template>
+<style lang="scss" src="../assets/styles.scss"></style>

package/src/components/notification/composables/useNotificationAnimation.ts

@@ -0,0 +1,48 @@
+import { Ref } from "vue";
+
+const animationDuration = 200; // Animation duration in ms
+
+export const useNotificationAnimation = () => {
+
+  /**
+   * Handles the notification removal animation.
+   * @param {Ref<HTMLElement>} notificationEl - The ref of the notification element to animate.
+   * @param {Function} callback - The callback function to call after the animation is complete.
+   */
+  const runNotificationLeaveAnimation = (notificationEl: Ref<HTMLElement>, callback: () => void) => {
+    if (!notificationEl.value) return;
+
+    notificationEl.value.classList.add('leaving');
+    const element = notificationEl.value;
+    let start: number | null = null;
+    const initialHeight = element.offsetHeight;
+
+    const step = (timestamp: number) => {
+      if (!start) start = timestamp;
+      const progress = timestamp - start;
+      const easedProgress = Math.min(progress / animationDuration, 1);
+      const translateY = -initialHeight * easedProgress; // Move up
+      const opacity = 1 - easedProgress; // Opacity from 1 to 0
+      const marginBottom = -initialHeight * easedProgress; // Adjust margin-bottom
+
+      element.style.transform = `translateY(${translateY}px)`;
+      element.style.opacity = `${opacity}`;
+      element.style.marginBottom = `${marginBottom}px`;
+
+      if (progress < animationDuration) {
+        window.requestAnimationFrame(step);
+      } else {
+        setTimeout(() => {
+          callback();
+        }, animationDuration);
+      }
+    };
+
+    window.requestAnimationFrame(step);
+  }
+
+  return {
+    runNotificationLeaveAnimation
+  }
+
+};

package/src/components/notification/index.ts

@@ -0,0 +1,53 @@
+import { createApp } from 'vue';
+import { NotificationOptions, NotificationType } from './types';
+import NotificationContainer from './components/notificationContainer.vue';
+
+const container = document.createElement('div');
+document.body.appendChild(container);
+
+const notificationApp = createApp(NotificationContainer);
+const notificationInstance = notificationApp.mount(container) as unknown as {
+  addNotification: (options: NotificationOptions) => void;
+  removeNotification: (id: number | string) => void;
+  removeAll: () => void;
+};
+
+const getDefaultTypeIcon = (type: NotificationType) => {
+  switch (type) {
+    case 'success':
+      return 'tick-circle-bold';
+    case 'warning':
+      return 'warning-2-bold'
+    case 'error':
+      return 'info-circle-bold'
+    case 'info':
+      return 'info-circle-2-bold'
+  }
+  return undefined;
+}
+
+const mergeOptionsWithDefaults = (options: NotificationOptions): NotificationOptions => ({
+  id: Date.now(),
+  duration: 3000,
+  closable: true,
+  variant: 'stroke',
+  placement: 'topRight',
+  size: 'small',
+  icon: getDefaultTypeIcon(options.type),
+  ...options,
+});
+
+const addNotification = (options: NotificationOptions) =>
+  notificationInstance.addNotification({
+    ...mergeOptionsWithDefaults(options),
+  });
+
+const createNotificationFn = (type: NotificationType) => (options: NotificationOptions) => addNotification({ ...options, type });
+
+export const dark = createNotificationFn('dark');
+export const success = createNotificationFn('success');
+export const error = createNotificationFn('error');
+export const info = createNotificationFn('info');
+export const warning = createNotificationFn('warning');
+export const remove = (id: number | string) => notificationInstance.removeNotification(id);
+export const removeAll = () => notificationInstance.removeAll();

package/src/components/notification/notification.test.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect, vi } from 'vitest';
+import { NotificationOptions, NotificationPlacement, NotificationType } from './types';
+import { MaNotification } from '@/index';
+import { waitFor } from '@testing-library/vue';
+import { nextTick } from 'vue';
+import kebabCase from 'lodash/kebabCase';
+
+describe('Notification API', () => {
+
+    const placements: NotificationPlacement[] = [
+        'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'top', 'bottom',
+    ];
+
+    const getRandomPlacement = (): NotificationPlacement => {
+        return placements[Math.floor(Math.random() * placements.length)];
+    };
+
+    /**
+   * Adds a notification, verifies its existence in the DOM, then removes it and verifies its removal.
+   * @param type The type of the notification to be added.
+   * @param options The options for the notification.
+   */
+    const checkAddAndRemoveNotification = async (type: NotificationType, options: NotificationOptions) => {
+    // Ensure no notifications exist initially
+        let notificationElements = document.querySelectorAll('.ma-notification');
+        expect(notificationElements.length).toBe(0);
+
+        // Add a new notification
+        const notificationId = MaNotification[type](options) as unknown as string | number;
+
+        // Wait for the notification to be added to the DOM
+        await waitFor(() => {
+            const newNotificationElements = document.querySelectorAll('.ma-notification');
+            expect(newNotificationElements.length).toBe(1);
+
+            const notificationElement = newNotificationElements[0];
+            expect(notificationElement.classList).toContain(`ma-notification--${type}`);
+            expect(notificationElement.querySelector('.ma-notification-title')?.textContent).toBe(options.title);
+            expect(notificationElement.parentElement?.classList).toContain(`ma-notification--${kebabCase(options.placement)}`);
+        }, { timeout: 1000 });
+
+        // Remove the notification
+        MaNotification.remove(notificationId);
+
+        // Wait for the notification to be removed from the DOM
+        await waitFor(() => {
+            notificationElements = document.querySelectorAll('.ma-notification');
+            expect(notificationElements.length).toBe(0);
+        });
+        await nextTick();
+    };
+
+    // Test cases for adding and removing different types of notifications
+    it('should add & remove dark notification', async () => {
+        await checkAddAndRemoveNotification('dark', { title: 'Dark notification', placement: getRandomPlacement() });
+    });
+
+    it('should add & remove success notification', async () => {
+        await checkAddAndRemoveNotification('success', { title: 'Success notification', placement: getRandomPlacement() });
+    });
+
+    it('should add & remove error notification', async () => {
+        await checkAddAndRemoveNotification('error', { title: 'Error notification', placement: getRandomPlacement() });
+    });
+
+    it('should add & remove info notification', async () => {
+        await checkAddAndRemoveNotification('info', { title: 'Info notification', placement: getRandomPlacement() });
+    });
+
+    it('should add & remove warning notification', async () => {
+        await checkAddAndRemoveNotification('warning', { title: 'Warning notification', placement: getRandomPlacement() });
+    });
+
+    // Test case for automatic removal of notification after a duration
+    it('should remove the notification after the duration', async () => {
+        MaNotification.error({
+            title: 'should remove the notification after the duration',
+            duration: 500,
+        });
+
+        // Ensure Vue updates the DOM
+        await nextTick();
+
+        // Verify the notification is added to the DOM
+        let notificationElements = document.querySelectorAll('.ma-notification');
+        expect(notificationElements.length).toBe(1);
+
+        // Wait for the notification to be removed from the DOM
+        await waitFor(() => {
+            notificationElements = document.querySelectorAll('.ma-notification');
+            expect(notificationElements.length).toBe(0);
+        }, {
+            timeout: 1000, // include transition delay
+        });
+    });
+
+    // Test case for notification buttons
+    it('should call the button callback when clicked', async () => {
+        const buttonCallback = vi.fn();
+        MaNotification.info({
+            title: 'Notification with button',
+            buttons: [
+                { label: 'Click me', onClick: buttonCallback },
+            ],
+        });
+        await nextTick();
+
+        const notificationElements = document.querySelectorAll('.ma-notification');
+        expect(notificationElements.length).toBe(1);
+
+        const button = document.querySelector('.ma-notification button');
+        if (button) {
+            button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        }
+
+        // Verify the callback was called
+        expect(buttonCallback).toHaveBeenCalled();
+    });
+
+});