@weni/unnnic-system 3.9.1-alpha.0 → 3.9.1-alpha.2

package/src/components/PageHeader/PageHeader.vue

@@ -1,154 +0,0 @@
-<template>
-  <header
-    :class="`page-header 
-      ${hasBackButton ? 'page-header--has-back-button' : ''} 
-      ${hasTabsSlot ? 'page-header--has-tabs' : ''}
-    `"
-  >
-    <UnnnicButton
-      v-if="hasBackButton"
-      data-testid="back-button"
-      type="tertiary"
-      iconCenter="arrow_back_ios_new"
-      class="page-header__back-button"
-      @click="handleBackClick"
-    />
-
-    <section class="page-header__infos">
-      <section class="page-header__main-infos">
-        <h1
-          class="page-header__title"
-          data-testid="page-title"
-        >
-          {{ title }}
-        </h1>
-
-        <slot name="tag" />
-      </section>
-
-      <p
-        v-if="description"
-        class="page-header__description"
-        data-testid="page-description"
-      >
-        {{ description }}
-      </p>
-    </section>
-
-    <section
-      v-if="hasActionsSlot"
-      class="page-header__actions"
-      data-testid="page-actions"
-    >
-      <slot name="actions" />
-    </section>
-
-    <section
-      v-if="hasTabsSlot"
-      class="page-header__tabs"
-      data-testid="page-tabs"
-    >
-      <slot name="tabs" />
-    </section>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { useSlots } from 'vue';
-
-import UnnnicButton from '../Button/Button.vue';
-
-import type { PageHeaderProps, PageHeaderEmits } from './types';
-
-withDefaults(defineProps<PageHeaderProps>(), {
-  description: '',
-  hasBackButton: false,
-});
-
-const emit = defineEmits<PageHeaderEmits>();
-
-const slots = useSlots();
-const hasActionsSlot = !!slots.actions;
-const hasTabsSlot = !!slots.tabs;
-
-const handleBackClick = (): void => {
-  emit('back');
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.page-header {
-  width: 100%;
-
-  margin-top: $unnnic-space-2;
-  padding-bottom: $unnnic-space-6;
-
-  display: grid;
-  gap: $unnnic-space-4;
-  grid-template-columns: 1fr minmax(250px, 20%); // TODO: Verify if is 250px or 20% (8fr 2fr)
-  align-items: center;
-
-  border-bottom: 1px solid $unnnic-color-border-soft;
-
-  &--has-back-button {
-    grid-template-columns: auto 1fr minmax(250px, 20%);
-  }
-
-  &--has-tabs {
-    border-bottom: none;
-  }
-
-  &__infos {
-    display: flex;
-    flex-direction: column;
-    gap: $unnnic-space-2;
-  }
-
-  &__main-infos {
-    display: flex;
-    align-items: center;
-    gap: $unnnic-space-2;
-  }
-
-  &__title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    color: $unnnic-color-fg-emphasized;
-    text-overflow: ellipsis;
-
-    font: $unnnic-font-display-1;
-  }
-
-  &__description {
-    color: $unnnic-color-fg-base;
-
-    font: $unnnic-font-body;
-  }
-
-  &__actions {
-    display: flex;
-    gap: $unnnic-space-2;
-    align-items: center;
-    justify-content: flex-end;
-
-    > * {
-      width: 100%;
-    }
-  }
-
-  &__tabs {
-    grid-column: 1 / -1;
-    grid-row: 2 / 3;
-  }
-}
-</style>

package/src/components/PageHeader/index.ts

@@ -1,2 +0,0 @@
-export { default } from './PageHeader.vue';
-export { default as PageHeader } from './PageHeader.vue';

package/src/components/PageHeader/types.ts

@@ -1,10 +0,0 @@
-export interface PageHeaderProps {
-  title: string;
-  description?: string;
-
-  hasBackButton?: boolean;
-}
-
-export interface PageHeaderEmits {
-  (event: 'back'): void;
-}

package/src/components/Popover/__tests__/Popover.spec.js

@@ -1,147 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
-import UnnnicPopover from '@/components/Popover/index.vue';
-
-vi.mock('@vueuse/core', () => ({
-  onClickOutside: vi.fn(),
-  useResizeObserver: vi.fn(),
-}));
-
-describe('UnnnicPopover.vue', () => {
-  let wrapper;
-
-  const defaultSlots = {
-    trigger: '<button data-testid="trigger-button">Click me</button>',
-    content: '<div data-testid="popover-content">Popover content</div>',
-  };
-
-  const mountWrapper = (props) => {
-    return mount(UnnnicPopover, {
-      slots: defaultSlots,
-      props: {
-        ...props,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    wrapper = mountWrapper();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  test('renders correctly', () => {
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.unnnic-popover').exists()).toBe(true);
-  });
-
-  test('renders trigger slot', () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    const triggerButton = wrapper.find('[data-testid="trigger-button"]');
-
-    expect(trigger.exists()).toBe(true);
-    expect(triggerButton.exists()).toBe(true);
-    expect(triggerButton.text()).toBe('Click me');
-  });
-
-  test('renders content slot inside balloon', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    const content = wrapper.find('[data-testid="popover-content"]');
-
-    expect(balloon.exists()).toBe(true);
-    expect(content.exists()).toBe(true);
-    expect(content.text()).toBe('Popover content');
-  });
-
-  test('balloon is hidden by default', () => {
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.exists()).toBe(false);
-  });
-
-  test('toggles balloon visibility when trigger is clicked', async () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-
-    let balloon = wrapper.find('[data-testid="popover-balloon"]');
-
-    expect(balloon.exists()).toBe(false);
-
-    await trigger.trigger('click');
-    await wrapper.vm.$nextTick();
-
-    balloon = wrapper.find('[data-testid="popover-balloon"]');
-
-    expect(balloon.exists()).toBe(true);
-  });
-
-  test('uses modelValue when provided', async () => {
-    const wrapper = mountWrapper({ modelValue: true });
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('emits update:modelValue when open state changes', async () => {
-    await wrapper.setProps({ modelValue: false });
-
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    await trigger.trigger('click');
-
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    expect(wrapper.emitted('update:modelValue')[0]).toEqual([true]);
-  });
-
-  test('does not emit update:modelValue when modelValue is undefined', async () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    await trigger.trigger('click');
-
-    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-  });
-
-  test('exposes open ref', () => {
-    expect(wrapper.vm.open).toBeDefined();
-    expect(typeof wrapper.vm.open).toBe('boolean');
-  });
-
-  test('open ref can be controlled programmatically', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('persistent prop prevents closing on outside click', async () => {
-    await wrapper.setProps({ persistent: true });
-
-    const { onClickOutside } = await import('@vueuse/core');
-    const mockOnClickOutside = vi.mocked(onClickOutside);
-
-    const callback = mockOnClickOutside.mock.calls[0][1];
-
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    callback();
-
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('applies correct CSS classes', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    const popover = wrapper.find('.unnnic-popover');
-    const balloon = wrapper.find('.unnnic-popover__balloon');
-
-    expect(popover.exists()).toBe(true);
-    expect(balloon.exists()).toBe(true);
-  });
-
-  test('matches the snapshot', () => {
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});

package/src/components/Popover/__tests__/__snapshots__/Popover.spec.js.snap

@@ -1,8 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UnnnicPopover.vue > matches the snapshot 1`] = `
-"<section data-v-5a3125ac="" class="unnnic-popover">
-  <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger"><button data-testid="trigger-button">Click me</button></div>
-  <!--v-if-->
-</section>"
-`;

package/src/components/Popover/index.vue

@@ -1,146 +0,0 @@
-<template>
-  <section
-    ref="popover"
-    class="unnnic-popover"
-  >
-    <div
-      class="unnnic-popover__trigger"
-      data-testid="popover-trigger"
-      @click="toggleOpen()"
-    >
-      <slot name="trigger" />
-    </div>
-    <div
-      v-if="open"
-      class="unnnic-popover__balloon"
-      data-testid="popover-balloon"
-    >
-      <slot name="content" />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
-import { onClickOutside, useResizeObserver } from '@vueuse/core';
-
-const target = useTemplateRef<HTMLDivElement>('popover');
-
-const popoverWidth = ref<string>('');
-
-useResizeObserver(target, (entries) => {
-  const entry = entries[0];
-  const { width } = entry.contentRect;
-  popoverWidth.value = `${width}px`;
-});
-
-onClickOutside(target, () => {
-  if (props.persistent) return;
-  open.value = false;
-});
-
-defineOptions({
-  name: 'UnnnicPopover',
-});
-
-interface PopoverBalloonProps {
-  width?: string;
-  height?: string;
-  maxHeight?: string;
-}
-
-interface PopoverProps {
-  modelValue?: boolean;
-  persistent?: boolean;
-  popoverBalloonProps?: PopoverBalloonProps;
-}
-
-const props = withDefaults(defineProps<PopoverProps>(), {
-  modelValue: undefined,
-  persistent: false,
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean];
-}>();
-
-const useModelValue = computed(() => props.modelValue !== undefined);
-
-const open = ref<boolean>(
-  useModelValue.value ? Boolean(props.modelValue) : false,
-);
-
-const toggleOpen = () => {
-  open.value = !open.value;
-};
-
-const calculatedPopoverWidth = computed(() => {
-  return props.popoverBalloonProps?.width || popoverWidth.value;
-});
-
-const popoverHeight = computed(() => {
-  return props.popoverBalloonProps?.height || 'unset';
-});
-
-const popoverMaxHeight = computed(() => {
-  return props.popoverBalloonProps?.maxHeight || 'unset';
-});
-
-onMounted(() => {
-  if (useModelValue.value) {
-    open.value = Boolean(props.modelValue);
-  }
-});
-
-watch(open, (value) => {
-  if (useModelValue.value) {
-    emit('update:modelValue', value);
-  }
-});
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    open.value = !!value;
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-popover {
-  &__balloon {
-    border-radius: $unnnic-radius-2;
-    padding: $unnnic-space-4;
-    background: $unnnic-color-bg-base;
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
-    // margin-top: $unnnic-space-1;
-    position: fixed;
-    width: v-bind(calculatedPopoverWidth);
-    height: v-bind(popoverHeight);
-    max-height: v-bind(popoverMaxHeight);
-    overflow: auto;
-
-    &::-webkit-scrollbar {
-      width: $unnnic-spacing-inline-nano;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-neutral-cleanest;
-      border-radius: $unnnic-border-radius-pill;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $unnnic-color-neutral-soft;
-      border-radius: $unnnic-border-radius-pill;
-    }
-  }
-}
-</style>

package/src/components/Select/SelectOption.vue

@@ -1,65 +0,0 @@
-<template>
-  <div
-    :class="[
-      'unnnic-select-option',
-      {
-        'unnnic-select-option--disabled': props.disabled,
-        'unnnic-select-option--active': props.active,
-        'unnnic-select-option--focused': props.focused,
-      },
-    ]"
-  >
-    <p class="unnnic-select-option__label">{{ props.label }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: 'UnnnicSelectOption',
-});
-
-interface SelectOptionProps {
-  label: string;
-  disabled?: boolean;
-  active?: boolean;
-  focused?: boolean;
-}
-
-const props = withDefaults(defineProps<SelectOptionProps>(), {
-  disabled: false,
-  active: false,
-  focused: false,
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-select-option {
-  cursor: pointer;
-  border-radius: $unnnic-radius-1;
-  padding: $unnnic-space-2 $unnnic-space-4;
-  font: $unnnic-font-emphasis;
-
-  &:hover:not(&--active):not(&--disabled),
-  &--focused {
-    background-color: $unnnic-color-bg-soft;
-  }
-
-  &--active {
-    background-color: $unnnic-color-bg-active;
-    color: $unnnic-color-fg-inverted;
-  }
-
-  &--disabled {
-    color: $unnnic-color-fg-muted;
-    background-color: $unnnic-color-bg-muted;
-    cursor: not-allowed;
-  }
-}
-</style>