@weni/unnnic-system 3.3.1-alpha.3 → 3.3.2

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/RadioGroup.stories.js

@@ -1,139 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import UnnnicRadioGroup from '../components/RadioGroup/RadioGroup.vue';
-import UnnnicRadio from '../components/Radio/Radio.vue';
-import { ref } from 'vue';
-
-export default {
-  title: 'Form/RadioGroup',
-  component: UnnnicRadioGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `Fundamental in forms, used when we present a list of two or more mutually 
-        exclusive options, and the user needs to choose exactly one of them. When you click on 
-        an unselected radio button, it will automatically deselect any other buttons that were 
-        previously selected in the list.
-          `,
-      },
-    },
-  },
-  argTypes: {
-    label: { control: { type: 'text' } },
-    labelTooltip: { control: { type: 'text' } },
-    labelUseHtmlTooltip: { control: 'boolean' },
-    modelValue: { control: { type: ['string', 'number'] } },
-    name: { control: { type: 'text' } },
-    state: { control: 'select', options: ['horizontal', 'vertical'] },
-  },
-};
-
-export const Default = {
-  args: {
-    label: 'Radio Group 1',
-  },
-
-  render: (args) => ({
-    components: {
-      UnnnicRadioGroup,
-      UnnnicRadio,
-    },
-
-    setup() {
-      const modelValue = ref('option 1');
-
-      const updateModelValue = (value) => {
-        action('update:modelValue')(value);
-        modelValue.value = value;
-      };
-
-      return { args, modelValue, updateModelValue };
-    },
-
-    template: `
-      <section>
-        <pre>v-model: {{ modelValue }}</pre>
-
-        <UnnnicRadioGroup v-bind="args" :modelValue="modelValue" @update:modelValue="updateModelValue">
-          <UnnnicRadio value="option 1">
-            Option 1
-          </UnnnicRadio>
-
-          <UnnnicRadio value="option 2">
-            Option 2
-          </UnnnicRadio>
-
-          <UnnnicRadio value="option 3">
-            Option 3
-          </UnnnicRadio>
-        </UnnnicRadioGroup>
-      </section>
-    `,
-  }),
-};
-
-export const Horizontal = {
-  args: {
-    state: 'horizontal',
-    label: 'Label',
-    name: 'Radio Group 1',
-  },
-
-  render: (args) => ({
-    components: {
-      UnnnicRadioGroup,
-      UnnnicRadio,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UnnnicRadioGroup v-bind="args">
-        <UnnnicRadio value="option 1">
-            Option 1
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 2">
-            Option 2
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 3">
-            Option 3
-        </UnnnicRadio>
-      </UnnnicRadioGroup>
-    `,
-  }),
-};
-
-export const Vertical = {
-  args: {
-    state: 'vertical',
-    label: 'Label',
-    name: 'Radio Group 2',
-  },
-
-  render: (args) => ({
-    components: {
-      UnnnicRadioGroup,
-      UnnnicRadio,
-    },
-    setup() {
-      return { args };
-    },
-    template: `
-      <UnnnicRadioGroup v-bind="args">
-        <UnnnicRadio value="option 1">
-            Option 1
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 2">
-            Option 2
-        </UnnnicRadio>
-
-        <UnnnicRadio value="option 3">
-            Option 3
-        </UnnnicRadio>
-      </UnnnicRadioGroup>
-    `,
-  }),
-};