@weni/unnnic-system 3.3.3 → 3.4.1-alpha.0

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,15 @@ 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';
+import Popover from './ui/popover/Popover.vue';
+import PopoverContent from './ui/popover/PopoverContent.vue';
+import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 
 type VueComponent = Component;
 
@@ -188,8 +195,15 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
+  unnnicTemplatePreview: TemplatePreview,
+  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
+  unnnicToast: Toast,
+  unnnicToastManager: toast,
+  unnnicPopover: Popover,
+  unnnicPopoverContent: PopoverContent,
+  unnnicPopoverTrigger: PopoverTrigger,
 };
 
 export const unnnicFontSize = fontSize;
@@ -241,7 +255,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,9 +296,14 @@ 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 unnnicPopover = Popover;
+export const unnnicPopoverContent = PopoverContent;
+export const unnnicPopoverTrigger = PopoverTrigger;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -335,7 +354,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 +395,13 @@ 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;
+export const UnnnicPopover = Popover;
+export const UnnnicPopoverContent = PopoverContent;
+export const UnnnicPopoverTrigger = PopoverTrigger;

package/src/components/ui/popover/Popover.vue

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

package/src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,98 @@
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'unnnic-popover',
+          `unnnic-popover--size-${props.size}`,
+          'bg-popover text-popover-foreground outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        )
+      "
+    >
+      <section :class="`unnnic-popover__content ${props.class || ''}`">
+        <slot />
+      </section>
+
+      <footer
+        v-if="$slots.footer"
+        class="unnnic-popover__footer"
+      >
+        <slot name="footer" />
+      </footer>
+    </PopoverContent>
+  </PopoverPortal>
+</template>
+
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    PopoverContentProps & {
+      class?: HTMLAttributes['class'];
+      size?: 'small' | 'medium' | 'large';
+    }
+  >(),
+  {
+    align: 'center',
+    sideOffset: 4,
+    size: 'medium',
+  },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+$popover-space: $unnnic-space-4;
+
+.unnnic-popover {
+  z-index: 10000;
+
+  border-radius: $unnnic-radius-2;
+  box-shadow: $unnnic-shadow-1;
+
+  &--size-small {
+    width: 240px;
+  }
+  &--size-medium {
+    width: 320px;
+  }
+  &--size-large {
+    width: 400px;
+  }
+
+  &__content {
+    padding: $popover-space;
+  }
+
+  &__footer {
+    border-top: 1px solid $unnnic-color-border-soft;
+
+    padding: $popover-space;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: $unnnic-space-2;
+
+    > * {
+      width: 100%;
+    }
+  }
+}
+</style>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>

package/src/components/ui/popover/index.ts

@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
+export { PopoverAnchor } from 'reka-ui';

package/src/index.ts

@@ -1,5 +1,6 @@
 import type { App } from 'vue';
 import { components } from '@/components';
+import './assets/scss/tailwind.scss';
 
 interface UnnnicPlugin {
   install(app: App): void;

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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"
 }

package/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import Unnnic from './index';
+import './assets/scss/tailwind.scss';
 
 const app = createApp(App);