@weni/unnnic-system 3.2.7 → 3.2.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.7",
-  "type": "commonjs",
+  "version": "3.2.8",
+  "type": "module",
   "files": [
     "dist",
     "src",
@@ -30,7 +30,7 @@
     "build": "vite build",
     "build:types": "vue-tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore --fix src",
+    "lint": "eslint src/**/*.{js,vue,ts} --fix",
     "format": "prettier --write src/",
     "type-check": "vue-tsc --noEmit",
     "storybook": "storybook dev -p 6006",
@@ -80,14 +80,15 @@
     "@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/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^8.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "@weni/eslint-config": "^2.0.0",
+    "eslint": "^9.33.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-vue": "^9.25.0",
+    "eslint-plugin-vue": "10.4.0",
     "jsdom": "^24.1.1",
+    "prettier": "3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.63.0",

package/src/assets/icons/script-to-convert-svg-to-vue.js

@@ -1,6 +1,6 @@
-const fs = require('node:fs');
+import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
 
-const files = fs.readdirSync('.');
+const files = readdirSync('.');
 
 files
   .filter((name) => name.endsWith('.svg'))
@@ -11,10 +11,7 @@ files
       .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
       .join('');
 
-    const content = fs.readFileSync(file + '.svg', { encoding: 'utf8' });
+    const content = readFileSync(file + '.svg', { encoding: 'utf8' });
 
-    fs.writeFileSync(
-      pascalCaseName + '.vue',
-      `<template>${content}</template>`,
-    );
+    writeFileSync(pascalCaseName + '.vue', `<template>${content}</template>`);
   });

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -66,7 +66,6 @@ const filterData = (audioBuffer) => {
 };
 
 const normalizeData = (filteredData) => {
-  // eslint-disable-next-line no-restricted-properties
   const multiplier = Math.pow(Math.max(...filteredData), -1);
   return filteredData.map((n) => n * multiplier);
 };
@@ -273,7 +272,9 @@ export default {
       this.audio.addEventListener('timeupdate', () => {
         if (this.status !== 'playing') return;
 
-        this.currentTime = isNaN(this.audio.currentTime) ? 0 : this.audio.currentTime;
+        this.currentTime = isNaN(this.audio.currentTime)
+          ? 0
+          : this.audio.currentTime;
       });
 
       this.audio.addEventListener('ended', () => {

package/src/components/Button/Button.vue

@@ -170,7 +170,7 @@ watch(
   () => {
     validateProps();
   },
-  { deep: true, immediate: true }
+  { deep: true, immediate: true },
 );
 </script>
 

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

@@ -91,10 +91,10 @@ describe('Button', () => {
   });
 
   it('should render filled icons when iconsFilled prop is true', async () => {
-    const wrapper = createWrapper({ 
+    const wrapper = createWrapper({
       iconLeft: 'search-1',
       iconRight: 'search-1',
-      iconsFilled: true 
+      iconsFilled: true,
     });
 
     const leftIcon = wrapper.findComponent('[data-testid="icon-left"]');

package/src/components/Button/types.ts

@@ -1,6 +1,6 @@
 export type ButtonSize = 'small' | 'large' | 'extra-large';
 
-export type ButtonType = 
+export type ButtonType =
   | 'primary'
   | 'secondary'
   | 'tertiary'

package/src/components/Card/Card.vue

@@ -194,7 +194,10 @@ export default {
 <style lang="scss">
 @use '@/assets/scss/unnnic' as *;
 
-$card-needed-colors: 'feedback-red', 'feedback-green', 'feedback-yellow', 'feedback-blue', 'feedback-grey', 'aux-blue', 'aux-purple', 'aux-orange', 'aux-lemon', 'aux-pink', 'brand-weni-soft';
+$card-needed-colors:
+  'feedback-red', 'feedback-green', 'feedback-yellow', 'feedback-blue',
+  'feedback-grey', 'aux-blue', 'aux-purple', 'aux-orange', 'aux-lemon',
+  'aux-pink', 'brand-weni-soft';
 
 @each $name, $color in $unnnic-scheme-colors {
   @if index($card-needed-colors, $name) {

package/src/components/ChartMultiLine/Line/Line.vue

@@ -124,7 +124,8 @@ export default {
 </script>
 
 <style lang="scss">
-@use '@/assets/scss/unnnic' as *;.chart {
+@use '@/assets/scss/unnnic' as *;
+.chart {
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;

package/src/components/ChatsContact/ChatsContact.vue

@@ -119,7 +119,7 @@
           />
         </button>
         <p
-          v-else-if="(unreadMessages && !selected) || (forceShowUnreadMessages)"
+          v-else-if="(unreadMessages && !selected) || forceShowUnreadMessages"
           class="chats-contact__infos__unread-messages"
           :title="i18n('unread_messages', unreadMessages, { unreadMessages })"
         >

package/src/components/ChatsHeader/ChatsHeader.vue

@@ -68,7 +68,10 @@
           <slot />
         </div>
       </main>
-      <slot v-if="slots['right']" name="right" />
+      <slot
+        v-if="slots['right']"
+        name="right"
+      />
       <UnnnicButton
         v-else-if="close"
         class="unnnic-chats-header__close--sm"
@@ -127,7 +130,6 @@ const slots = useSlots();
 defineEmits<{
   crumbClick: [crumb: { name: string; path: string }];
 }>();
-
 </script>
 
 <style lang="scss">

package/src/components/ChatsMessage/ChatsMessageText.vue

@@ -4,7 +4,10 @@
       class="unnnic-chats-message__text"
       v-html="formattedText"
     />
-    <p v-if="isAutomatic" class="unnnic-chats-message__text--automatic">
+    <p
+      v-if="isAutomatic"
+      class="unnnic-chats-message__text--automatic"
+    >
       {{ i18n('automatic_message') }}
     </p>
   </section>
@@ -49,14 +52,12 @@ export default {
       }
 
       function removeHtmlDangerousContent(text) {
-        // eslint-disable-next-line default-param-last
         return text.replace(
           /<(\/)?([^> ]+)( [^>]+)?>/gi,
           ($1, $2 = '', $3, $4 = '') => {
             if (['b', 'i', 'u', 'ul', 'li', 'br', 'div'].includes($3)) {
               const complements = [];
 
-              // eslint-disable-next-line no-restricted-syntax
               for (const i of $4.matchAll(
                 /((?<name1>[^ =]+)="(?<value1>[^"]*)"|(?<name2>[^ =]+)='(?<value2>[^"]*)')/g,
               )) {
@@ -66,7 +67,6 @@ export default {
                 if (name === 'style') {
                   const styles = [];
 
-                  // eslint-disable-next-line no-restricted-syntax
                   for (const j of value.matchAll(
                     /(?<propertyName>[^:]+):(?<propertyValue>[^;]+);?/g,
                   )) {
@@ -131,4 +131,4 @@ export default {
     color: $unnnic-color-aux-blue-500;
   }
 }
-</style>
+</style>

package/src/components/Chip/Chip.vue

@@ -1,24 +1,29 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <section 
+  <section
     :class="[
       'chip',
       chipClass,
       {
         'chip--border': shouldShowBorder,
-        'chip--is-clickable': isClickable
-      }
+        'chip--is-clickable': isClickable,
+      },
     ]"
     @click="onClick"
   >
     <p :class="['chip__text', textColorClass]">{{ text }}</p>
-    <p v-if="count" :class="['chip__count', countColorClass]">{{ count }}</p>
-    <UnnnicIcon 
-      v-if="type === 'multiple'" 
-      :icon="isSelected ? 'close' : 'add'" 
-      :scheme="isSelected ? 'teal-600' : 'feedback-grey'" 
-      class="chip__icon" 
-      size="sm" 
+    <p
+      v-if="count"
+      :class="['chip__count', countColorClass]"
+    >
+      {{ count }}
+    </p>
+    <UnnnicIcon
+      v-if="type === 'multiple'"
+      :icon="isSelected ? 'close' : 'add'"
+      :scheme="isSelected ? 'teal-600' : 'feedback-grey'"
+      class="chip__icon"
+      size="sm"
     />
   </section>
 </template>
@@ -47,7 +52,7 @@ const textColorClass = computed(() => {
     return 'chip__text--is-selected';
   }
   return '';
-}); 
+});
 
 const countColorClass = computed(() => {
   if (props.isSelected) {
@@ -65,60 +70,60 @@ const chipClass = computed(() => {
 @use '@/assets/scss/unnnic' as *;
 
 .chip {
-    display: inline-flex;
-    height: 26px;
-    padding: $unnnic-space-1 $unnnic-space-3;
-    justify-content: center;
-    align-items: center;
-    gap: $unnnic-space-2;
-    flex-shrink: 0;
-    border-radius: 600px;
-    background-color: $unnnic-color-bg-base;
+  display: inline-flex;
+  height: 26px;
+  padding: $unnnic-space-1 $unnnic-space-3;
+  justify-content: center;
+  align-items: center;
+  gap: $unnnic-space-2;
+  flex-shrink: 0;
+  border-radius: 600px;
+  background-color: $unnnic-color-bg-base;
+
+  &:hover {
+    background-color: $unnnic-color-bg-soft;
+  }
 
+  &--is-selected {
+    background-color: $unnnic-color-teal-100;
     &:hover {
-        background-color: $unnnic-color-bg-soft;
+      background-color: $unnnic-color-teal-200;
     }
+  }
 
-    &--is-selected {
-        background-color: $unnnic-color-teal-100;
-        &:hover {
-            background-color: $unnnic-color-teal-200;
-        }
-    }
+  &--is-clickable {
+    cursor: pointer;
+  }
 
-    &--is-clickable {
-        cursor: pointer;
-    }
-    
-    &--border {
-        border: 1px solid $unnnic-color-border-base;
-    }
+  &--border {
+    border: 1px solid $unnnic-color-border-base;
+  }
 
-    &__text {
-        color: $unnnic-color-fg-base;
-        font: $unnnic-font-caption-1;
+  &__text {
+    color: $unnnic-color-fg-base;
+    font: $unnnic-font-caption-1;
 
-        &--is-selected {
-            color: $unnnic-color-fg-active;
-        }
+    &--is-selected {
+      color: $unnnic-color-fg-active;
     }
+  }
+
+  &__count {
+    display: flex;
+    padding: 0 $unnnic-space-2;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 600px;
+    background: $unnnic-color-bg-soft;
+    color: $unnnic-color-fg-base;
+    font: $unnnic-font-caption-1;
+    font-weight: $unnnic-font-weight-medium;
 
-    &__count {
-        display: flex;
-        padding: 0 $unnnic-space-2;
-        justify-content: center;
-        align-items: center;
-        gap: 10px;
-        border-radius: 600px;
-        background: $unnnic-color-bg-soft;
-        color: $unnnic-color-fg-base;
-        font: $unnnic-font-caption-1;
-        font-weight: $unnnic-font-weight-medium;
-
-        &--is-selected {
-            color: $unnnic-color-fg-active;
-            background: $unnnic-color-white;
-        }
+    &--is-selected {
+      color: $unnnic-color-fg-active;
+      background: $unnnic-color-white;
     }
+  }
 }
-</style>
+</style>

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

@@ -37,10 +37,10 @@ describe('Chip', () => {
   describe('Selection state', () => {
     it('should apply selected styling when isSelected is true', async () => {
       await wrapper.setProps({ isSelected: true });
-      
+
       expect(wrapper.classes()).toContain('chip--is-selected');
       expect(wrapper.classes()).not.toContain('chip--border');
-      
+
       const textElement = wrapper.find('.chip__text');
       expect(textElement.classes()).toContain('chip__text--is-selected');
     });
@@ -49,7 +49,7 @@ describe('Chip', () => {
   describe('Count functionality', () => {
     it('should render count when provided', async () => {
       await wrapper.setProps({ count: 5 });
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.exists()).toBe(true);
       expect(countElement.text()).toBe('5');
@@ -57,14 +57,14 @@ describe('Chip', () => {
 
     it('should not render count when not provided or zero', async () => {
       expect(wrapper.find('.chip__count').exists()).toBe(false);
-      
+
       await wrapper.setProps({ count: 0 });
       expect(wrapper.find('.chip__count').exists()).toBe(false);
     });
 
     it('should apply selected styling to count when chip is selected', async () => {
       await wrapper.setProps({ count: 3, isSelected: true });
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.classes()).toContain('chip__count--is-selected');
     });
@@ -78,7 +78,7 @@ describe('Chip', () => {
 
     it('should render correct icons for multiple type', async () => {
       await wrapper.setProps({ type: 'multiple', isSelected: false });
-      
+
       let icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.exists()).toBe(true);
       expect(icon.props('icon')).toBe('add');
@@ -86,7 +86,7 @@ describe('Chip', () => {
       expect(icon.props('size')).toBe('sm');
 
       await wrapper.setProps({ isSelected: true });
-      
+
       icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.props('icon')).toBe('close');
       expect(icon.props('scheme')).toBe('teal-600');
@@ -95,21 +95,21 @@ describe('Chip', () => {
 
   describe('Combined functionality', () => {
     it('should render all elements correctly when combined', async () => {
-      await wrapper.setProps({ 
+      await wrapper.setProps({
         text: 'Complete Chip',
         count: 42,
         type: 'multiple',
-        isSelected: true
+        isSelected: true,
       });
 
       expect(wrapper.text()).toContain('Complete Chip');
       expect(wrapper.classes()).toContain('chip--is-selected');
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.exists()).toBe(true);
       expect(countElement.text()).toBe('42');
       expect(countElement.classes()).toContain('chip__count--is-selected');
-      
+
       const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.exists()).toBe(true);
       expect(icon.props('icon')).toBe('close');
@@ -119,16 +119,16 @@ describe('Chip', () => {
   describe('Click functionality', () => {
     it('should emit click event when clicked', async () => {
       await wrapper.setProps({ isClickable: true });
-      
+
       await wrapper.trigger('click');
-      
+
       expect(wrapper.emitted().click).toBeTruthy();
       expect(wrapper.emitted().click).toHaveLength(1);
     });
 
     it('should apply clickable styling when isClickable is true', async () => {
       await wrapper.setProps({ isClickable: true });
-      
+
       expect(wrapper.classes()).toContain('chip--is-clickable');
     });
 
@@ -138,7 +138,7 @@ describe('Chip', () => {
 
     it('should emit click event even when not marked as clickable', async () => {
       await wrapper.trigger('click');
-      
+
       expect(wrapper.emitted().click).toBeTruthy();
       expect(wrapper.emitted().click).toHaveLength(1);
     });
@@ -147,7 +147,7 @@ describe('Chip', () => {
   describe('Edge cases', () => {
     it('should handle negative count', async () => {
       await wrapper.setProps({ count: -5 });
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.exists()).toBe(true);
       expect(countElement.text()).toBe('-5');
@@ -155,10 +155,10 @@ describe('Chip', () => {
 
     it('should handle empty text', async () => {
       await wrapper.setProps({ text: '' });
-      
+
       const textElement = wrapper.find('.chip__text');
       expect(textElement.exists()).toBe(true);
       expect(textElement.text()).toBe('');
     });
   });
-});
+});

package/src/components/DataTable/index.vue

@@ -69,7 +69,7 @@
           'unnnic-data-table__body-row--loading',
         ]"
       >
-        <td 
+        <td
           :class="[
             'unnnic-data-table__body-cell',
             `unnnic-data-table__body-cell--${size}`,
@@ -132,7 +132,7 @@
           v-if="slots['without-results']"
           :class="[
             'unnnic-data-table__body-cell',
-            `unnnic-data-table__body-cell--${size}`
+            `unnnic-data-table__body-cell--${size}`,
           ]"
         >
           <slot name="without-results" />
@@ -212,8 +212,6 @@ const emit = defineEmits<{
   'update:page': [page: number];
 }>();
 
-
-
 const props = withDefaults(defineProps<Props>(), {
   isLoading: false,
   size: 'md',
@@ -292,7 +290,12 @@ const handleClickHeader = (header: DataTableHeader) => {
       ? 'asc'
       : nextSortOrderMapper[sort.value.order];
 
-  handleSort(nextSort === '' ? { header: '', itemKey: '', order: '' } : { header: header.title, itemKey: header.itemKey, order: nextSort }, nextSort);
+  handleSort(
+    nextSort === ''
+      ? { header: '', itemKey: '', order: '' }
+      : { header: header.title, itemKey: header.itemKey, order: nextSort },
+    nextSort,
+  );
 };
 
 const handleClickRow = (item: DataTableItem) => {

package/src/components/DatePicker/DatePicker.vue

@@ -50,8 +50,8 @@
               }"
               @click="
                 date.properties.includes('inside month') &&
-                  !date.properties.includes('out of range') &&
-                  selectDate(date)
+                !date.properties.includes('out of range') &&
+                selectDate(date)
               "
             >
               {{ getDate(date) }}
@@ -183,7 +183,13 @@
         <div
           v-for="(option, index) in periodsLocale"
           :key="index"
-          :class="['option', { selectable: option.id !== 'custom', selected: optionSelected === option.id }]"
+          :class="[
+            'option',
+            {
+              selectable: option.id !== 'custom',
+              selected: optionSelected === option.id,
+            },
+          ]"
           @click="option.id === 'custom' ? null : autoSelect(option.id)"
         >
           {{ option.name }}
@@ -316,10 +322,6 @@ export default {
     };
   },
 
-  mounted() {
-    this.updateOptionSelected();
-  },
-
   computed: {
     openMonths() {
       return [this.addMonth(this.referenceDate, -1), this.referenceDate];
@@ -365,6 +367,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.updateOptionSelected();
+  },
+
   methods: {
     submit() {
       this.$emit('submit', this.value);
@@ -372,7 +378,12 @@ export default {
       if (this.optionSelected === 'custom') {
         this.$emit('update:equivalentOption', '');
       } else {
-        this.$emit('update:equivalentOption', this.periodsLocale.find(({ id: periodId }) => periodId === this.optionSelected)?.name || '');
+        this.$emit(
+          'update:equivalentOption',
+          this.periodsLocale.find(
+            ({ id: periodId }) => periodId === this.optionSelected,
+          )?.name || '',
+        );
       }
     },
 
@@ -382,19 +393,21 @@ export default {
       function isSameTime(date1, date2) {
         return new Date(date1).getTime() === new Date(date2).getTime();
       }
-      
+
       const period = this.periodsLocale.find(({ id: periodId }) => {
-        const {
-          startDate: periodStartDate,
-          endDate: periodEndDate,
-        } = this.getStartAndEndDateByPeriod(periodId);
+        const { startDate: periodStartDate, endDate: periodEndDate } =
+          this.getStartAndEndDateByPeriod(periodId);
 
-        return isSameTime(startDate, periodStartDate) && isSameTime(endDate, periodEndDate);
+        return (
+          isSameTime(startDate, periodStartDate) &&
+          isSameTime(endDate, periodEndDate)
+        );
       });
 
-      this.optionSelected = startDate || endDate ? period ? period.id : 'custom' : '';
+      this.optionSelected =
+        startDate || endDate ? (period ? period.id : 'custom') : '';
     },
-    
+
     dateToString(date) {
       return `${date.getMonth() + 1} ${date.getDate()} ${date.getFullYear()}`;
     },

package/src/components/Drawer/Drawer.vue

@@ -24,7 +24,10 @@
       >
         <header class="unnnic-drawer__header">
           <section class="unnnic-drawer__title-container">
-            <slot v-if="$slots.title" name="title"/>
+            <slot
+              v-if="$slots.title"
+              name="title"
+            />
 
             <template v-else>
               <h1

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

@@ -96,8 +96,12 @@ describe('Drawer.vue', () => {
         });
 
         expect(title().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="custom-title"]').exists()).toBe(true);
-        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe('Custom Title Content');
+        expect(wrapper.find('[data-testid="custom-title"]').exists()).toBe(
+          true,
+        );
+        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe(
+          'Custom Title Content',
+        );
       });
 
       it('should prioritize title slot over title prop', () => {
@@ -112,7 +116,9 @@ describe('Drawer.vue', () => {
         });
 
         expect(title().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe('Slot Title');
+        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe(
+          'Slot Title',
+        );
       });
     });
   });