@weni/unnnic-system 2.15.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.15.0",
+  "version": "2.16.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -61,10 +61,12 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/vue3": "^8.0.10",
     "@storybook/vue3-vite": "^8.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vitest/coverage-v8": "^1.6.0",
     "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "^1.6.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/test-utils": "^2.4.6",
@@ -79,8 +81,9 @@
     "react-dom": "^18.2.0",
     "sass": "^1.62.1",
     "storybook": "^8.0.10",
+    "typescript": "^5.6.3",
     "vite": "4.3.5",
     "vitest": "^1.6.0",
     "vue-eslint-parser": "^9.4.2"
   }
-}
+}

package/src/components/ChartFunnel/ChartFunnel.vue

@@ -1,14 +1,15 @@
 <template>
   <component
     :is="chartComponent"
-    :data="data"
+    :data="chartData"
   />
 </template>
 
 <script>
-import ChartFunnelThreeRows from './ChartFunnelThreeRows.vue';
-import ChartFunnelFourRows from './ChartFunnelFourRows.vue';
-import ChartFunnelFiveRows from './ChartFunnelFiveRows.vue';
+import ChartFunnelThreeRows from './SvgFunnel/ChartFunnelThreeRows.vue';
+import ChartFunnelFourRows from './SvgFunnel/ChartFunnelFourRows.vue';
+import ChartFunnelFiveRows from './SvgFunnel/ChartFunnelFiveRows.vue';
+import ChartDefaultFunnelBase from './DefaultFunnel/ChartDefaultFunnelBase.vue';
 
 export default {
   name: 'UnnnicChartFunnel',
@@ -17,6 +18,7 @@ export default {
     ChartFunnelThreeRows,
     ChartFunnelFourRows,
     ChartFunnelFiveRows,
+    ChartDefaultFunnelBase,
   },
 
   props: {
@@ -24,16 +26,40 @@ export default {
       type: Array,
       required: true,
     },
+    type: {
+      type: String,
+      default: 'default',
+    },
   },
 
   computed: {
     chartComponent() {
       const componentMap = {
-        3: 'ChartFunnelThreeRows',
-        4: 'ChartFunnelFourRows',
-        5: 'ChartFunnelFiveRows',
+        default: {
+          3: ChartDefaultFunnelBase,
+          4: ChartDefaultFunnelBase,
+          5: ChartDefaultFunnelBase,
+        },
+        basic: {
+          3: 'ChartFunnelThreeRows',
+          4: 'ChartFunnelFourRows',
+          5: 'ChartFunnelFiveRows',
+        },
       };
-      return componentMap[this.data.length] || null;
+      return componentMap[this.type][this.data.length] || null;
+    },
+    chartData() {
+      const classIndex = ['w-60', 'w-50', 'w-40', 'w-30', 'w-20'];
+      if (this.type === 'default')
+        return this.data.map((e, index) => ({
+          percentage: e.title,
+          value: e.value,
+          description: e.description,
+          widthClass: classIndex[index],
+          color: e.color,
+        }));
+
+      return this.data;
     },
   },
 };

package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -0,0 +1,195 @@
+<template>
+  <section class="unnnic-chart-funnel-base-container">
+    <section
+      v-for="(step, index) in data"
+      :key="index"
+      class="unnnic-chart-funnel-base-item"
+    >
+      <section
+        :class="[
+          'overflow-hidden',
+          step.widthClass,
+          { 'first-item': index === 0, 'last-item': index === data.length - 1 },
+        ]"
+      >
+        <section
+          :class="[
+            'unnnic-chart-funnel-base-item__card',
+            { 'first-item': index === 0 },
+          ]"
+          :style="{ backgroundColor: step.color }"
+        ></section>
+      </section>
+
+      <section
+        :class="[
+          'unnnic-chart-funnel-base-item__text',
+          { 'last-item': index === data.length - 1 },
+        ]"
+      >
+        <section class="unnnic-chart-funnel-base-item__text__values">
+          <p class="unnnic-chart-funnel-base-item__text__values-title">
+            {{ step.percentage }}
+          </p>
+          <p class="unnnic-chart-funnel-base-item__text__values-sub-title">
+            &nbsp; | {{ step.value }}
+          </p>
+        </section>
+        <p class="unnnic-chart-funnel-base-item__text-description">
+          {{ step.description }}
+        </p>
+      </section>
+    </section>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface FunnelStep {
+  percentage: number | string;
+  value: number | string;
+  description: string;
+  widthClass: string;
+  color: string;
+}
+
+defineProps<{
+  data: FunnelStep[];
+}>();
+</script>
+
+<style lang="scss" scoped>
+@import '../../../assets/scss/unnnic.scss';
+
+.unnnic-chart-funnel-base-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.unnnic-chart-funnel-base-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-grow: 1;
+
+  &__card {
+    height: 100%;
+    transition: background-color 0.3s ease;
+    transform: skew(-12deg, 0deg) translateX(-20px);
+    border-radius: 0 0 $unnnic-spacing-xs 0;
+
+    &.first-item {
+      border-radius: $unnnic-spacing-xs $unnnic-spacing-xs $unnnic-spacing-xs 0;
+    }
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    padding-left: $unnnic-spacing-sm;
+    padding-right: $unnnic-spacing-sm;
+    height: 100%;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0px;
+      width: 100%;
+      height: 1px;
+      background-color: $unnnic-color-neutral-soft;
+      z-index: -1;
+    }
+
+    &.last-item::after {
+      display: none;
+    }
+
+    &-description {
+      margin: 0;
+      color: $unnnic-color-neutral-dark;
+      text-align: center;
+
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-md;
+      font-style: normal;
+      font-weight: $unnnic-font-weight-regular;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+    }
+    &__values {
+      display: flex;
+      &-title {
+        margin: 0;
+        color: $unnnic-color-neutral-dark;
+
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-body-lg;
+        font-style: normal;
+        font-weight: $unnnic-font-weight-bold;
+        line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+      }
+
+      &-sub-title {
+        display: flex;
+        align-items: end;
+        margin: 0;
+        color: $unnnic-color-neutral-cloudy;
+
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-body-md;
+        font-style: normal;
+        font-weight: $unnnic-font-weight-regular;
+        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
+      }
+    }
+  }
+}
+
+.w-60 {
+  width: 60%;
+}
+.w-50 {
+  width: 50%;
+}
+.w-40 {
+  width: 40%;
+}
+.w-30 {
+  width: 30%;
+}
+.w-20 {
+  width: 20%;
+}
+.overflow-hidden {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+
+  &.first-item {
+    border-radius: $unnnic-spacing-xs $unnnic-spacing-xs 0px 0;
+  }
+
+  &.last-item {
+    border-radius: 0 0 $unnnic-spacing-xs $unnnic-spacing-xs;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    width: 100%;
+    height: 2px;
+    background-color: $unnnic-color-neutral-soft;
+    z-index: -1;
+  }
+
+  &.last-item::after {
+    display: none;
+  }
+}
+</style>

package/src/components/ChartFunnel/{ChartFunnelBaseRow.vue → SvgFunnel/ChartFunnelBaseRow.vue}

@@ -48,7 +48,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@import '../../../assets/scss/unnnic.scss';
 
 .unnnic-chart-funnel-base-rows {
   width: 100%;

package/src/components/ChartFunnel/{ChartFunnelFiveRows.vue → SvgFunnel/ChartFunnelFiveRows.vue}

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@import '../../../assets/scss/unnnic.scss';
 
 .unnnic-chart-funnel-five-rows {
   [class$='row']:nth-child(1) {

package/src/components/ChartFunnel/{ChartFunnelFourRows.vue → SvgFunnel/ChartFunnelFourRows.vue}

@@ -71,7 +71,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@import '../../../assets/scss/unnnic.scss';
 
 .unnnic-chart-funnel-four-rows {
   [class$='row']:nth-child(1) {

package/src/components/ChartFunnel/{ChartFunnelThreeRows.vue → SvgFunnel/ChartFunnelThreeRows.vue}

@@ -62,7 +62,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../assets/scss/unnnic.scss';
+@import '../../../assets/scss/unnnic.scss';
 
 .unnnic-chart-funnel-three-rows {
   [class$='row']:nth-child(1) {

package/src/components/Dropdown/Dropdown.vue

@@ -8,6 +8,7 @@
       <div
         v-if="active"
         v-on-click-outside="onClickOutside"
+        data-testid="dropdown-content"
         :class="[
           'unnnic-dropdown__content',
           active ? '' : 'unnnic-dropdown__content--hidden',

package/src/components/Dropdown/DropdownItem.vue

@@ -1,5 +1,8 @@
 <template>
-  <a class="unnnic-dropdown-item unnnic--clickable">
+  <a
+    class="unnnic-dropdown-item unnnic--clickable"
+    data-testid="dropdown-item"
+  >
     <slot />
   </a>
 </template>

package/src/components/Dropdown/DropdownSkeleton.vue

@@ -1,11 +1,13 @@
 <template>
   <span
     ref="dropdown"
+    data-testid="dropdown-skeleton"
     :class="['dropdown', { active }]"
   >
     <slot> </slot>
     <div
       ref="dropdown-data"
+      data-testid="dropdown-data"
       class="dropdown-data"
       :style="{ position: 'fixed', ...positions }"
     >

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

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import Dropdown from '../Dropdown.vue';
+
+describe('Dropdown.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Dropdown, {
+      props: {
+        open: false,
+        position: 'bottom-left',
+      },
+      slots: {
+        trigger: '<button data-testid="dropdown-trigger">Trigger</button>',
+        default: '<div data-testid="dropdown-slot">Dropdown Content</div>',
+      },
+    });
+  });
+
+  describe('Render elements', () => {
+    it('should render the trigger slot', () => {
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      expect(trigger.exists()).toBe(true);
+    });
+
+    it('should not display the dropdown content initially when `open` is false', () => {
+      const slot = wrapper.find('[data-testid="dropdown-slot"]');
+      expect(slot.exists()).toBe(false);
+    });
+
+    it('should display the dropdown content initially when `open` is true', async () => {
+      await wrapper.setProps({ open: true });
+      const slot = wrapper.find('[data-testid="dropdown-slot"]');
+      expect(slot.exists()).toBe(true);
+    });
+  });
+
+  describe('Props and Positioning', () => {
+    it('should set the dropdown position based on the `position` prop', async () => {
+      await wrapper.setProps({ open: true, position: 'top-left' });
+      const content = wrapper.find('[data-testid="dropdown-content"]');
+      expect(content.classes()).toContain(
+        'unnnic-dropdown__content__position-top-left',
+      );
+    });
+
+    it('should validate the `position` prop with allowed values', () => {
+      const { validator } = Dropdown.props.position;
+
+      expect(validator('top-left')).toBe(true);
+      expect(validator('none')).toBe(true);
+      expect(validator('bottom-left')).toBe(true);
+      expect(validator('bottom-right')).toBe(true);
+      expect(validator('invalid-position')).toBe(false);
+    });
+  });
+
+  describe('Trigger Functionality', () => {
+    it('should toggle `active` state on trigger click', async () => {
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      await trigger.trigger('click');
+      expect(wrapper.vm.active).toBe(true);
+
+      await trigger.trigger('click');
+      expect(wrapper.vm.active).toBe(false);
+    });
+
+    it('should emit "update:open" event when `active` state changes', async () => {
+      await wrapper.setProps({ open: false });
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      await trigger.trigger('click');
+
+      expect(wrapper.emitted('update:open')).toBeTruthy();
+      expect(wrapper.emitted('update:open')[0]).toEqual([true]);
+
+      await trigger.trigger('click');
+      expect(wrapper.emitted('update:open')[1]).toEqual([false]);
+    });
+  });
+
+  describe('Click Outside Behavior', () => {
+    it('should close the dropdown when clicking outside', async () => {
+      await wrapper.setProps({ open: true });
+      expect(wrapper.vm.active).toBe(true);
+
+      await wrapper.vm.onClickOutside();
+      expect(wrapper.vm.active).toBe(false);
+    });
+
+    it('should not close the dropdown if `active` is already false on outside click', async () => {
+      await wrapper.setProps({ open: false });
+      await wrapper.vm.onClickOutside();
+
+      expect(wrapper.vm.active).toBe(false);
+    });
+  });
+});

package/src/components/Dropdown/__tests__/DropdownItem.spec.js

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import DropdownItem from '../DropdownItem.vue';
+
+describe('DropdownItem.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(DropdownItem, {
+      slots: {
+        default: '<span>Dropdown Item Content</span>',
+      },
+    });
+  });
+
+  it('renders slot content', () => {
+    expect(wrapper.html()).toContain('Dropdown Item Content');
+  });
+
+  it('has the correct classes applied', () => {
+    const dropdownItem = wrapper.find('[data-testid="dropdown-item"]');
+    expect(dropdownItem.classes()).toContain('unnnic-dropdown-item');
+    expect(dropdownItem.classes()).toContain('unnnic--clickable');
+  });
+});

package/src/components/Dropdown/__tests__/DropdownSkeleton.spec.js

@@ -0,0 +1,147 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import DropdownSkeleton from '../DropdownSkeleton.vue';
+
+describe('DropdownSkeleton.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(DropdownSkeleton, {
+      props: {
+        type: 'automatic',
+        modelValue: false,
+        position: 'bottom-left',
+      },
+      slots: {
+        default: '<div data-testid="default-slot">Default Slot Content</div>',
+        inside: '<div data-testid="inside-slot">Inside Slot Content</div>',
+      },
+    });
+  });
+
+  const dropdown = () => wrapper.find('[data-testid="dropdown-skeleton"]');
+  const dropdownData = () => wrapper.find('[data-testid="dropdown-data"]');
+
+  describe('Rendering', () => {
+    it('should render the dropdown with the correct default classes', () => {
+      expect(dropdown().exists()).toBe(true);
+      expect(dropdown().classes()).toContain('dropdown');
+      expect(dropdown().classes()).not.toContain('active');
+    });
+
+    it('should render the default slot content inside the dropdown', () => {
+      const defaultSlot = wrapper.find('[data-testid="default-slot"]');
+      expect(defaultSlot.exists()).toBe(true);
+      expect(defaultSlot.text()).toBe('Default Slot Content');
+    });
+
+    it('should apply active class when modelValue is true and type is "manual"', async () => {
+      await wrapper.setProps({ modelValue: true, type: 'manual' });
+      expect(dropdown().classes()).toContain('active');
+    });
+  });
+
+  describe('Active State Management', () => {
+    it('should set active class to false when type is "automatic"', () => {
+      expect(dropdown().classes()).not.toContain('active');
+    });
+
+    it('should set active class to true when type is "manual" and modelValue is true', async () => {
+      await wrapper.setProps({ type: 'manual', modelValue: true });
+      expect(dropdown().classes()).toContain('active');
+    });
+
+    it('should set active class to false when type is "manual" and modelValue is false', async () => {
+      await wrapper.setProps({ type: 'manual', modelValue: false });
+      expect(dropdown().classes()).not.toContain('active');
+    });
+
+    it('should not change active class when type is "manual" and modelValue is not changed', () => {
+      expect(dropdown().classes()).not.toContain('active');
+    });
+  });
+
+  describe('Position Calculation', () => {
+    it('should calculate position as bottom-left by default', () => {
+      const positions = wrapper.vm.positions;
+
+      expect(dropdownData().attributes('style')).toContain(
+        `left: ${positions.left}`,
+      );
+      expect(dropdownData().attributes('style')).toContain(
+        `top: ${positions.top}`,
+      );
+    });
+
+    it('should adjust position to avoid overflow on bottom-right', async () => {
+      await wrapper.setProps({ position: 'bottom-right' });
+
+      Object.defineProperty(wrapper.vm, 'clientHeight', { value: 500 });
+      Object.defineProperty(wrapper.vm, 'clientWidth', { value: 500 });
+
+      wrapper.vm.data.width = 600;
+      wrapper.vm.data.height = 600;
+
+      wrapper.vm.calculatePosition();
+
+      const positions = wrapper.vm.positions;
+
+      expect(dropdownData().attributes('style')).toContain(
+        `left: ${positions.left}`,
+      );
+      expect(dropdownData().attributes('style')).toContain(
+        `top: ${positions.top}`,
+      );
+      expect(parseInt(positions.left, 10)).toBeLessThanOrEqual(
+        wrapper.vm.clientWidth,
+      );
+      expect(parseInt(positions.top, 10)).toBeLessThanOrEqual(
+        wrapper.vm.clientHeight,
+      );
+    });
+
+    it('should correctly position on top-left when specified', async () => {
+      await wrapper.setProps({ position: 'top-left' });
+
+      wrapper.vm.data.width = 100;
+      wrapper.vm.data.height = 100;
+
+      wrapper.vm.calculatePosition();
+
+      const positions = wrapper.vm.positions;
+
+      expect(dropdownData().attributes('style')).toContain(
+        `left: ${positions.left}`,
+      );
+      expect(dropdownData().attributes('style')).toContain(
+        `top: ${positions.top}`,
+      );
+    });
+  });
+
+  describe('Lifecycle', () => {
+    it('should clean up event listeners on beforeUnmount', async () => {
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+      await wrapper.unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'scroll',
+        wrapper.vm.calculatePosition,
+      );
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'resize',
+        wrapper.vm.calculatePosition,
+      );
+    });
+
+    it('should set initial data properties on mount', () => {
+      expect(wrapper.vm.clientHeight).toBe(0);
+      expect(wrapper.vm.clientWidth).toBe(0);
+      expect(wrapper.vm.x).toBe(0);
+      expect(wrapper.vm.y).toBe(0);
+      expect(wrapper.vm.width).toBe(0);
+      expect(wrapper.vm.height).toBe(0);
+    });
+  });
+});

package/src/components/SelectSmart/SelectSmart.vue

@@ -2,6 +2,7 @@
   <div
     v-on-click-outside="onClickOutside"
     class="unnnic-select-smart"
+    data-testid="select-smart"
     @keydown="onKeyDownSelect"
   >
     <DropdownSkeleton
@@ -13,6 +14,7 @@
       <TextInput
         ref="selectSmartInput"
         class="unnnic-select-smart__input"
+        data-testid="select-smart-input"
         :modelValue="inputValue"
         :placeholder="placeholder || autocompletePlaceholder || selectedLabel"
         :type="type"
@@ -37,6 +39,7 @@
             active: active,
             inactive: !active,
           }"
+          data-testid="options-container"
         >
           <div :style="{ overflow: 'auto' }">
             <SelectSmartMultipleHeader
@@ -49,6 +52,7 @@
             />
             <div
               ref="selectSmartOptionsScrollArea"
+              data-testid="options-scroll-area"
               :class="[
                 'unnnic-select-smart__options__scroll-area',
                 `size-${size}`,
@@ -61,6 +65,7 @@
               <SelectSmartOption
                 v-for="(option, index) in filterOptions(options)"
                 :key="option.value"
+                data-testid="option"
                 :label="option.label"
                 :description="option.description"
                 :tabindex="index"