@weni/unnnic-system 3.2.9 → 3.3.1-alpha.0

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -0,0 +1,51 @@
+<template>
+  <UnnnicModalDialog
+    :modelValue="modelValue"
+    :title="defaultTranslations.title[props.locale]"
+    :showCloseIcon="true"
+    class="unnnic-template-preview-modal"
+    @update:model-value="$event === false && $emit('close')"
+  >
+    <UnnnicTemplatePreview :template="template" />
+  </UnnnicModalDialog>
+</template>
+
+<script lang="ts" setup>
+import UnnnicTemplatePreview from './TemplatePreview.vue';
+import UnnnicModalDialog from '../ModalDialog/ModalDialog.vue';
+
+import type { Template } from './types';
+
+const defaultTranslations = {
+  title: {
+    'pt-br': 'Visualizar modelo',
+    en: 'Template preview',
+    es: 'Vista previa de plantilla',
+  },
+};
+
+interface Props {
+  locale?: string;
+  template: Template;
+  modelValue: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: 'en',
+});
+
+defineEmits<{
+  close: void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+:deep(.unnnic-modal-dialog__container__content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $unnnic-color-neutral-lightest;
+}
+</style>

package/src/components/TemplatePreview/types.d.ts

@@ -0,0 +1,16 @@
+export interface Template {
+  header: {
+    type: 'TEXT' | 'MEDIA';
+    mediaType?: 'IMAGE' | 'VIDEO' | 'DOCUMENT';
+    text?: string | null;
+    src?: string | null;
+  };
+  body?: string;
+  footer?: string;
+  buttons?: Array<{
+    type: 'QUICK_REPLY' | 'PHONE_NUMBER';
+    text: string;
+    countryCode?: string;
+    phoneNumber?: string;
+  }>;
+}

package/src/components/TextArea/TextArea.vue

@@ -18,13 +18,14 @@
       :disabled="disabled"
       :value="modelValue"
       @input="$emit('update:modelValue', fullySanitize($event.target.value))"
-    ></textarea>
+    />
 
     <template
       v-if="maxLength"
       #rightMessage
-      >{{ modelValue.length }}/{{ maxLength }}</template
     >
+      {{ modelValue.length }}/{{ maxLength }}
+    </template>
   </UnnnicFormElement>
 </template>
 
@@ -96,6 +97,12 @@ export default {
 @use '@/assets/scss/unnnic' as *;
 @use '@/components/Input/Input' as *;
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 .unnnic-text-area {
   &__textarea {
     @include input-base;
@@ -103,24 +110,21 @@ export default {
     display: block;
     width: 100%;
     resize: vertical;
-    box-sizing: border-box;
 
     scrollbar-width: thin;
 
+    padding: $unnnic-space-3 $unnnic-space-4;
+
     &--size-md {
       @include input-md-font;
 
-      min-height: 6.25 * $unnnic-font-size;
-      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: 100px;
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: 5 * $unnnic-font-size;
-      padding: ($unnnic-spacing-xs)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: $unnnic-space-20;
     }
 
     &.unnnic-text-area__textarea--type-error {

package/src/components/TextArea/__test__/__snapshots__/TextArea.spec.js.snap

@@ -3,7 +3,12 @@
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
   <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
-  <!--v-if-->
-  <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
+  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
+    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
+      <!--v-if-->
+      <!--v-if-->
+    </section>
+    <p data-v-9f8d6c86="">0/200</p>
+  </section>
 </section>"
 `;

package/src/components/Toast/Toast.vue

@@ -0,0 +1,236 @@
+<template>
+  <Transition
+    name="toast-slide"
+    appear
+    @after-leave="$emit('destroy')"
+  >
+    <aside
+      v-if="isVisible"
+      :class="['unnnic-toast', `unnnic-toast--${type}`]"
+      :role="type === 'error' ? 'alert' : 'status'"
+      :aria-live="type === 'error' ? 'assertive' : 'polite'"
+      data-testid="unnnic-toast"
+    >
+      <section class="unnnic-toast__content">
+        <header class="unnnic-toast__header">
+          <UnnnicIcon
+            :icon="typeConfig.icon"
+            :scheme="typeConfig.scheme"
+            size="ant"
+            data-testid="toast-type-icon"
+          />
+
+          <h3 class="unnnic-toast__title">
+            {{ title }}
+          </h3>
+
+          <UnnnicIcon
+            icon="close"
+            scheme="neutral-dark"
+            size="ant"
+            clickable
+            class="unnnic-toast__close"
+            data-testid="toast-close-button"
+            @click="handleClose"
+            @keydown.enter="handleClose"
+            @keydown.space.prevent="handleClose"
+          />
+        </header>
+
+        <p
+          v-if="description"
+          class="unnnic-toast__text"
+        >
+          {{ description }}
+        </p>
+      </section>
+
+      <UnnnicButton
+        v-if="button"
+        type="tertiary"
+        :text="button.text"
+        class="unnnic-toast__action-button"
+        data-testid="toast-action-button"
+        @click="handleAction"
+        @keydown.enter="handleAction"
+        @keydown.space.prevent="handleAction"
+      />
+    </aside>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+import UnnnicIcon from '@/components/Icon.vue';
+import UnnnicButton from '@/components/Button/Button.vue';
+
+import type { ToastProps, ToastEmits } from './types';
+import type { SchemeColor } from '@/types/scheme-colors';
+
+defineOptions({
+  name: 'UnnnicToast',
+});
+
+const props = withDefaults(defineProps<ToastProps>(), {
+  title: '',
+  description: '',
+  button: undefined,
+  timeout: 5000,
+  type: 'informational',
+});
+
+const emit = defineEmits<ToastEmits>();
+
+const isVisible = ref(false);
+let timeoutId: number | null = null;
+
+const typeConfig = computed(() => {
+  const configMap = {
+    informational: { icon: 'info', scheme: 'blue-500' },
+    attention: { icon: 'error', scheme: 'yellow-500' },
+    success: { icon: 'check_circle', scheme: 'green-500' },
+    error: { icon: 'cancel', scheme: 'red-500' },
+  };
+
+  return configMap[props.type || 'informational'] as {
+    icon: string;
+    scheme: SchemeColor;
+  };
+});
+
+const handleClose = () => {
+  isVisible.value = false;
+  emit('close');
+};
+
+const handleAction = () => {
+  if (props.button?.action) {
+    props.button.action();
+  }
+};
+
+const startTimeout = () => {
+  if (props.timeout > 0) {
+    timeoutId = window.setTimeout(() => {
+      handleClose();
+    }, props.timeout);
+  }
+};
+
+const clearTimeout = () => {
+  if (timeoutId) {
+    window.clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+};
+
+onMounted(() => {
+  isVisible.value = true;
+  startTimeout();
+});
+
+onUnmounted(() => {
+  clearTimeout();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-toast {
+  position: fixed;
+  bottom: $unnnic-space-4;
+  right: $unnnic-space-4;
+  z-index: 9999;
+
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  gap: $unnnic-space-5;
+
+  min-width: 250px;
+  max-width: 450px;
+  padding: $unnnic-space-4;
+
+  border-radius: $unnnic-radius-2;
+  box-shadow: $unnnic-shadow-2;
+  border: 1px solid $unnnic-color-border-base;
+
+  &--informational {
+    border-color: $unnnic-color-border-info;
+    background-color: $unnnic-color-bg-info;
+  }
+
+  &--attention {
+    border-color: $unnnic-color-border-warning;
+    background-color: $unnnic-color-bg-warning;
+  }
+
+  &--success {
+    border-color: $unnnic-color-border-success;
+    background-color: $unnnic-color-bg-success;
+  }
+
+  &--error {
+    border-color: $unnnic-color-border-critical;
+    background-color: $unnnic-color-bg-critical;
+  }
+
+  &__content,
+  &__header {
+    width: 100%;
+
+    display: flex;
+    gap: $unnnic-space-2;
+  }
+
+  &__content {
+    flex-direction: column;
+    gap: $unnnic-space-2;
+  }
+
+  &__header {
+    align-items: center;
+  }
+
+  &__title {
+    flex: 1;
+
+    margin: 0;
+
+    font: $unnnic-font-action;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &__text {
+    margin: 0;
+    margin-left: $unnnic-space-7;
+
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-emphasized;
+  }
+}
+
+// Animations
+.toast-slide-enter-active,
+.toast-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.toast-slide-enter-from {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.toast-slide-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.toast-slide-enter-to,
+.toast-slide-leave-from {
+  transform: translateY(0);
+  opacity: 1;
+}
+</style>

package/src/components/Toast/ToastManager.ts

@@ -0,0 +1,110 @@
+import { createApp } from 'vue';
+import Toast from './Toast.vue';
+import type {
+  ToastProps,
+  ToastInstance,
+  ToastOptions,
+  ToastCall,
+} from './types';
+
+class ToastManager implements ToastManager {
+  private toasts: Map<string, ToastInstance> = new Map();
+  private container: HTMLElement | null = null;
+  private nextId = 0;
+
+  private createContainer(): HTMLElement {
+    if (this.container) {
+      return this.container;
+    }
+
+    this.container = document.createElement('div');
+    this.container.setAttribute('unnnic-toast-container', 'true');
+
+    document.body.appendChild(this.container);
+    return this.container;
+  }
+
+  private generateId(): string {
+    return `toast-${++this.nextId}`;
+  }
+
+  show(props: ToastProps): ToastInstance {
+    const id = this.generateId();
+    const container = this.createContainer();
+
+    const toastWrapper = document.createElement('div');
+
+    // Create promise that resolves when toast is destroyed
+    let resolvePromise: () => void;
+    const promise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    const app = createApp(Toast, {
+      ...props,
+      onClose: () => {
+        this.close(id);
+      },
+      onDestroy: () => {
+        app.unmount();
+        toastWrapper.remove();
+        resolvePromise(); // Resolve the promise when toast is destroyed
+      },
+    });
+
+    app.mount(toastWrapper);
+    container.appendChild(toastWrapper);
+
+    const toastInstance: ToastInstance = {
+      id,
+      props,
+      close: () => this.close(id),
+      promise,
+    };
+
+    this.toasts.set(id, toastInstance);
+    return toastInstance;
+  }
+
+  close(id: string): void {
+    const toast = this.toasts.get(id);
+    if (toast) {
+      this.toasts.delete(id);
+    }
+  }
+}
+
+const toastManager = new ToastManager();
+
+export const toast: ToastCall = {
+  info: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'informational',
+    }).promise,
+  success: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'success',
+    }).promise,
+  attention: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'attention',
+    }).promise,
+  error: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'error',
+    }).promise,
+};
+
+export default toastManager;

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

@@ -88,8 +88,12 @@ 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 Toast from './Toast/Toast.vue';
+import { toast } from './Toast/ToastManager';
 
 type VueComponent = Component;
 
@@ -188,8 +192,12 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
+  unnnicTemplatePreview: TemplatePreview,
+  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
+  unnnicToast: Toast,
+  unnnicToastManager: toast,
 };
 
 export const unnnicFontSize = fontSize;
@@ -241,7 +249,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;
@@ -282,8 +290,10 @@ 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 UnnnicFontSize = fontSize;
@@ -335,7 +345,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;
@@ -376,6 +386,10 @@ 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 UnnnicToast = Toast;
+export const UnnnicToastManager = toast;

package/src/locales/en.json

@@ -41,5 +41,6 @@
       "flags": "Flags",
       "custom": "Custom"
     }
-  }
+  },
+  "search": "Search"
 }

package/src/locales/es.json

@@ -41,5 +41,6 @@
       "flags": "Banderas",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar"
 }

package/src/locales/pt_br.json

@@ -41,5 +41,6 @@
       "flags": "Bandeiras",
       "custom": "Personalizados"
     }
-  }
+  },
+  "search": "Buscar"
 }