@weni/unnnic-system 3.2.9-alpha.9 → 3.3.0

package/src/components/Toast/Toast.vue

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

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

@@ -1,57 +0,0 @@
-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/stories/Popover.stories.js

@@ -1,39 +0,0 @@
-import UnnnicPopover from '../components/Popover/index.vue';
-
-export default {
-  title: 'example/Popover',
-  component: UnnnicPopover,
-  render: (args) => ({
-    components: { UnnnicPopover },
-    setup() {
-      return {
-        args,
-      };
-    },
-    template: `
-    <div>
-      <unnnic-popover v-bind="args">
-        <template #trigger>
-          <button>Click me</button>
-        </template>
-        <template #content>
-          <p>Hello</p>
-        </template>
-      </unnnic-popover>
-      <p>label label</p>
-    </div>
-  `,
-  }),
-};
-
-export const Default = {
-  args: {
-    modelValue: false,
-  },
-};
-
-export const WithModelValue = {
-  args: {
-    modelValue: true,
-  },
-};

package/src/stories/Select.stories.js

@@ -1,91 +0,0 @@
-import UnnnicSelect from '../components/Select/index.vue';
-
-const options = [
-  { label: 'Option 1', value: 'option1', altValue: 'alt_value_option1' },
-  { label: 'Option 2', value: 'option2', altValue: 'alt_value_option2' },
-  { label: 'Option 3', value: 'option3', altValue: 'alt_value_option3' },
-  { label: 'Option 4', value: 'option4', altValue: 'alt_value_option4' },
-  { label: 'Option 5', value: 'option5', altValue: 'alt_value_option5' },
-  { label: 'Option 6', value: 'option6', altValue: 'alt_value_option6' },
-  { label: 'Option 7', value: 'option7', altValue: 'alt_value_option7' },
-  { label: 'Option 8', value: 'option8', altValue: 'alt_value_option8' },
-  { label: 'Option 9', value: 'option9', altValue: 'alt_value_option9' },
-  { label: 'Option 10', value: 'option10', disabled: true },
-];
-
-export default {
-  title: 'Form/Select',
-  component: UnnnicSelect,
-  render: (args) => ({
-    components: { UnnnicSelect },
-    setup() {
-      const handleSearch = (value) => {
-        args.search = value;
-      };
-      return { args, handleSearch };
-    },
-    data() {
-      return {
-        exampleValue: null,
-      };
-    },
-    template: `
-      <p>modelValue: {{ exampleValue }}</p>
-      <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
-    `,
-  }),
-};
-
-export const Default = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const ReturnObject = {
-  args: {
-    returnObject: true,
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const AlternativeValueKey = {
-  args: {
-    itemValue: 'altValue',
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const AlternativeValueLabel = {
-  args: {
-    itemLabel: 'altValue',
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-  },
-};
-
-export const Disabled = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    disabled: true,
-  },
-};
-
-export const WithSearch = {
-  args: {
-    placeholder: 'Placeholder',
-    label: 'Label',
-    options,
-    enableSearch: true,
-    search: '',
-  },
-};

package/src/stories/TemplatePreview.stories.js

@@ -1,94 +0,0 @@
-import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
-
-export default {
-  title: 'example/TemplatePreview',
-  tags: ['autodocs'],
-  component: UnnnicTemplatePreview,
-};
-
-const Template = (args) => ({
-  components: { UnnnicTemplatePreview },
-  setup() {
-    return { args };
-  },
-  template: `
-      <unnnic-template-preview v-bind="args" />
-    `,
-});
-
-const bodyText =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
-
-export const Default = Template.bind({});
-Default.args = {
-  template: {
-    header: {
-      type: 'TEXT',
-      text: 'Hello, world!',
-    },
-    footer: 'Weni by VTEX',
-    buttons: [
-      {
-        text: 'Button 1',
-        type: 'PHONE_NUMBER',
-      },
-      {
-        text: 'Button 2',
-        type: 'URL',
-      },
-      {
-        text: 'Button 3',
-        type: 'QUICK_REPLY',
-      },
-    ],
-    body: bodyText,
-  },
-};
-
-export const Image = Template.bind({});
-Image.args = {
-  template: {
-    header: {
-      type: 'MEDIA',
-      mediaType: 'IMAGE',
-    },
-    footer: 'Weni by VTEX',
-    body: bodyText,
-  },
-};
-
-export const Video = Template.bind({});
-Video.args = {
-  template: {
-    header: {
-      type: 'MEDIA',
-      mediaType: 'VIDEO',
-    },
-    buttons: [
-      {
-        text: 'Button 1',
-        type: 'PHONE_NUMBER',
-      },
-      {
-        text: 'Button 2',
-        type: 'URL',
-      },
-      {
-        text: 'Button 3',
-        type: 'QUICK_REPLY',
-      },
-    ],
-  },
-};
-
-export const Document = Template.bind({});
-Document.args = {
-  template: {
-    header: {
-      type: 'MEDIA',
-      mediaType: 'DOCUMENT',
-    },
-    footer: 'Weni by VTEX',
-    body: bodyText,
-  },
-};