@weni/unnnic-system 3.31.1 → 3.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.31.1",
+  "version": "3.32.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/index.ts

@@ -2,10 +2,8 @@ import type { Component } from 'vue';
 import { unnnicFontSize as fontSize } from './config';
 import formElement from './FormElement/FormElement.vue';
 import input from './Input/Input.vue';
-import inputNext from './InputNext/InputNext.vue';
 import inputDatePicker from './InputDatePicker/InputDatePicker.vue';
 import button from './Button/Button.vue';
-import buttonIcon from './Button/ButtonIcon.vue';
 import sidebar from './Sidebar/index.vue';
 import sidebarItem from './Sidebar/SidebarItem.vue';
 import table from './Table/Table.vue';
@@ -32,7 +30,6 @@ import radio from './Radio/Radio.vue';
 import radioGroup from './RadioGroup/RadioGroup.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
 import modal from './Modal/Modal.vue';
-import modalUpload from './ModalUpload/ModalUpload.vue';
 import { callAlert, callModal } from '../utils/call';
 import selectSmart from './SelectSmart/SelectSmart.vue';
 import select from './Select/index.vue';
@@ -44,9 +41,7 @@ import alert from './Alert/Alert.vue';
 // import autocompleteSelect from './AutocompleteSelect/AutocompleteSelect.vue';
 import tag from './Tag/Tag.vue';
 import accordion from './Accordion/Accordion.vue';
-import indicator from './Indicator/Indicator.vue';
-import skeletonLoading from './SkeletonLoading/SkeletonLoading.vue'; // TODO: Unbreak this component
-import carousel from './Carousel/Carousel.vue';
+import skeletonLoading from './SkeletonLoading/SkeletonLoading.vue';
 import label from './Label/Label.vue';
 import tab from './Tab/Tab.vue';
 import tabsExpanded from './TabsExpanded/TabsExpanded.vue';
@@ -55,23 +50,18 @@ import comment from './Comment/Comment.vue';
 import datePicker from './DatePicker/DatePicker.vue';
 import breadcrumb from './Breadcrumb/Breadcrumb.vue';
 import Switch from './Switch/Switch.vue';
-import Slider from './Slider/Slider.vue';
 import DataArea from './DataArea/DataArea.vue';
 import Pagination from './Pagination/Pagination.vue';
 import DropArea from './DropArea/DropArea.vue';
 import UploadArea from './UploadArea/UploadArea.vue';
 import ImportCard from './ImportCard/ImportCard.vue';
 import DateFilter from './DateFilter/DateFilter.vue';
-import ChatText from './ChatText/ChatText.vue';
 import TextArea from './TextArea/TextArea.vue';
 import CardNumber from './CardNumber/CardNumber.vue';
 import chartRainbow from './ChartRainbow/ChartRainbow.vue';
 import chartBar from './ChartBar/ChartBar.vue';
 import chartLine from './ChartLine/ChartLine.vue';
-import moodRating from './MoodRating/MoodRating.vue';
-import starRating from './StarRating/StarRating.vue';
 import audioRecorder from './AudioRecorder/AudioRecorder.vue';
-import circleProgressBar from './CircleProgressBar/CircleProgressBar.vue';
 import progressBar from './ProgressBar/ProgressBar.vue';
 import ChatsUserAvatar from './ChatsUserAvatar/ChatsUserAvatar.vue';
 import ChartMultiLine from './ChartMultiLine/ChartMultiLine.vue';
@@ -131,10 +121,8 @@ export interface ComponentsMap {
 export const components: ComponentsMap = {
   unnnicFormElement: formElement,
   unnnicInput: input,
-  unnnicInputNext: inputNext,
   unnnicInputDatePicker: inputDatePicker,
   unnnicButton: button,
-  unnnicButtonIcon: buttonIcon,
   unnnicSidebar: sidebar,
   unnnicSidebarItem: sidebarItem,
   unnnicTable: table,
@@ -167,7 +155,6 @@ export const components: ComponentsMap = {
   unnnicModal: modal,
   unnnicModalNext: ModalNext,
   unnnicModalDialog: ModalDialog,
-  unnnicModalUpload: modalUpload,
   unnnicSelectSmart: selectSmart,
   unnnicSelect: select,
   unnnicSelectItem: selectItem,
@@ -180,9 +167,7 @@ export const components: ComponentsMap = {
   // unnnicAutocompleteSelect: autocompleteSelect,
   unnnicTag: tag,
   unnnicAccordion: accordion,
-  unnnicIndicator: indicator,
   unnnicSkeletonLoading: skeletonLoading,
-  unnnicCarousel: carousel,
   unnnicLabel: label,
   unnnicTab: tab,
   unnnicTabsExpanded: tabsExpanded,
@@ -191,23 +176,18 @@ export const components: ComponentsMap = {
   unnnicDatePicker: datePicker,
   unnnicBreadcrumb: breadcrumb,
   unnnicSwitch: Switch,
-  unnnicSlider: Slider,
   unnnicDataArea: DataArea,
   unnnicPagination: Pagination,
   unnnicDropArea: DropArea,
   unnnicUploadArea: UploadArea,
   unnnicImportCard: ImportCard,
   unnnicDateFilter: DateFilter,
-  unnnicChatText: ChatText,
   unnnicTextArea: TextArea,
   unnnicCardNumber: CardNumber,
   unnnicChartRainbow: chartRainbow,
   unnnicChartBar: chartBar,
   unnnicChartLine: chartLine,
-  unnnicMoodRating: moodRating,
-  unnnicStarRating: starRating,
   unnnicAudioRecorder: audioRecorder,
-  unnnicCircleProgressBar: circleProgressBar,
   unnnicProgressBar: progressBar,
   unnnicChatsUserAvatar: ChatsUserAvatar,
   unnnicChartMultiLine: ChartMultiLine,
@@ -258,10 +238,8 @@ export const components: ComponentsMap = {
 export const unnnicFontSize = fontSize;
 export const unnnicFormElement = formElement;
 export const unnnicInput = input;
-export const unnnicInputNext = inputNext;
 export const unnnicInputDatePicker = inputDatePicker as VueComponent;
 export const unnnicButton = button;
-export const unnnicButtonIcon = buttonIcon;
 export const unnnicSidebar = sidebar;
 export const unnnicSidebarItem = sidebarItem;
 export const unnnicTable = table;
@@ -294,7 +272,6 @@ export const unnniclanguageSelect = languageSelect as VueComponent;
 export const unnnicModal = modal;
 export const unnnicModalDialog = ModalDialog;
 export const unnnicModalNext = ModalNext;
-export const unnnicModalUpload = modalUpload;
 export const unnnicSelectSmart = selectSmart as VueComponent;
 export const unnnicSelect = select as VueComponent;
 export const unnnicSelectItem = selectItem;
@@ -307,9 +284,7 @@ export const unnnicCallModal = (props: any) => callModal(props);
 // export const unnnicAutocompleteSelect = autocompleteSelect;
 export const unnnicTag = tag;
 export const unnnicAccordion = accordion;
-export const unnnicIndicator = indicator;
 export const unnnicSkeletonLoading = skeletonLoading;
-export const unnnicCarousel = carousel;
 export const unnnicLabel = label as VueComponent;
 export const unnnicTab = tab;
 export const unnnicTabsExpanded = tabsExpanded;
@@ -318,23 +293,18 @@ export const unnnicComment = comment;
 export const unnnicDatePicker = datePicker;
 export const unnnicBreadcrumb = breadcrumb;
 export const unnnicSwitch = Switch;
-export const unnnicSlider = Slider;
 export const unnnicDataArea = DataArea;
 export const unnnicPagination = Pagination;
 export const unnnicDropArea = DropArea;
 export const unnnicUploadArea = UploadArea;
 export const unnnicImportCard = ImportCard;
 export const unnnicDateFilter = DateFilter;
-export const unnnicChatText = ChatText;
 export const unnnicTextArea = TextArea;
 export const unnnicCardNumber = CardNumber;
 export const unnnicChartRainbow = chartRainbow;
 export const unnnicChartBar = chartBar;
 export const unnnicChartLine = chartLine;
-export const unnnicMoodRating = moodRating;
-export const unnnicStarRating = starRating;
 export const unnnicAudioRecorder = audioRecorder;
-export const unnnicCircleProgressBar = circleProgressBar;
 export const unnnicProgressBar = progressBar;
 export const unnnicChatsUserAvatar = ChatsUserAvatar;
 export const unnnicChartMultiLine = ChartMultiLine;
@@ -384,10 +354,8 @@ export const unnnicDrawerDescription = DrawerDescription;
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
 export const UnnnicInput = input;
-export const UnnnicInputNext = inputNext;
 export const UnnnicInputDatePicker = inputDatePicker as VueComponent;
 export const UnnnicButton = button;
-export const UnnnicButtonIcon = buttonIcon;
 export const UnnnicSidebar = sidebar;
 export const UnnnicSidebarItem = sidebarItem;
 export const UnnnicTable = table;
@@ -420,7 +388,6 @@ export const UnnniclanguageSelect = languageSelect as VueComponent;
 export const UnnnicModal = modal;
 export const UnnnicModalDialog = ModalDialog;
 export const UnnnicModalNext = ModalNext;
-export const UnnnicModalUpload = modalUpload;
 export const UnnnicSelectSmart = selectSmart as VueComponent;
 export const UnnnicSelect = select as VueComponent;
 export const UnnnicSelectItem = selectItem;
@@ -433,9 +400,7 @@ export const UnnnicCallModal = (props: any) => callModal(props);
 // export const UnnnicAutocompleteSelect = autocompleteSelect;
 export const UnnnicTag = tag;
 export const UnnnicAccordion = accordion;
-export const UnnnicIndicator = indicator;
 export const UnnnicSkeletonLoading = skeletonLoading;
-export const UnnnicCarousel = carousel;
 export const UnnnicLabel = label as VueComponent;
 export const UnnnicTab = tab;
 export const UnnnicTabsExpanded = tabsExpanded;
@@ -444,23 +409,18 @@ export const UnnnicComment = comment;
 export const UnnnicDatePicker = datePicker;
 export const UnnnicBreadcrumb = breadcrumb;
 export const UnnnicSwitch = Switch;
-export const UnnnicSlider = Slider;
 export const UnnnicDataArea = DataArea;
 export const UnnnicPagination = Pagination;
 export const UnnnicDropArea = DropArea;
 export const UnnnicUploadArea = UploadArea;
 export const UnnnicImportCard = ImportCard;
 export const UnnnicDateFilter = DateFilter;
-export const UnnnicChatText = ChatText;
 export const UnnnicTextArea = TextArea;
 export const UnnnicCardNumber = CardNumber;
 export const UnnnicChartRainbow = chartRainbow;
 export const UnnnicChartBar = chartBar;
 export const UnnnicChartLine = chartLine;
-export const UnnnicMoodRating = moodRating;
-export const UnnnicStarRating = starRating;
 export const UnnnicAudioRecorder = audioRecorder;
-export const UnnnicCircleProgressBar = circleProgressBar;
 export const UnnnicProgressBar = progressBar;
 export const UnnnicChatsUserAvatar = ChatsUserAvatar;
 export const UnnnicChartMultiLine = ChartMultiLine;

package/src/stories/PageHeader.stories.js

@@ -3,7 +3,7 @@ import { action } from 'storybook/actions';
 import PageHeader from '../components/PageHeader/PageHeader.vue';
 import UnnnicButton from '../components/Button/Button.vue';
 import UnnnicTag from '../components/Tag/Tag.vue';
-import UnnnicSelectSmart from '../components/SelectSmart/SelectSmart.vue';
+import UnnnicSelect from '../components/Select/index.vue';
 import UnnnicIcon from '../components/Icon.vue';
 
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
@@ -193,7 +193,7 @@ export const WithSelect = {
   description="Description"
 >
   <template #actions>
-    <UnnnicSelectSmart />
+    <UnnnicSelect placeholder="Select" :options="options" />
   </template>
 </UnnnicPageHeader>
         `,
@@ -201,14 +201,20 @@ export const WithSelect = {
     },
   },
   render: (args) => ({
-    components: { PageHeader, UnnnicSelectSmart },
+    components: { PageHeader, UnnnicSelect },
     setup() {
-      return { args };
+      return {
+        args,
+        options: [
+          { label: 'Option 1', value: 'option1' },
+          { label: 'Option 2', value: 'option2' },
+        ],
+      };
     },
     template: `
       <PageHeader v-bind="args">
         <template #actions>
-          <UnnnicSelectSmart />
+          <UnnnicSelect placeholder="Select" :options="options" />
         </template>
       </PageHeader>
     `,

package/src/types/index.d.ts

@@ -36,7 +36,6 @@ export declare const unnnicTag: Component;
 export declare const unnnicTab: Component;
 export declare const unnnicAccordion: Component;
 export declare const unnnicCollapse: Component;
-export declare const unnnicCarousel: Component;
 export declare const unnnicSidebar: Component;
 export declare const unnnicDrawer: Component;
 export declare const unnnicProgressBar: Component;

package/src/components/Button/ButtonIcon.vue

@@ -1,106 +0,0 @@
-<template>
-  <button
-    :class="['button-icon', size, type]"
-    v-bind="$attrs"
-  >
-    <UnnnicIcon
-      :icon="icon"
-      :scheme="iconScheme"
-      size="ant"
-    ></UnnnicIcon>
-  </button>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  components: {
-    UnnnicIcon,
-  },
-
-  props: {
-    type: {
-      type: String,
-      default: 'secondary',
-    },
-
-    size: {
-      type: String,
-      required: true,
-      validator(value) {
-        return ['small', 'large'].includes(value);
-      },
-    },
-
-    icon: {
-      type: String,
-      required: true,
-    },
-  },
-
-  computed: {
-    iconScheme() {
-      if (this.type === 'primary') {
-        return 'fg-inverted';
-      }
-
-      return 'fg-emphasized';
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.button-icon {
-  border: 0;
-  cursor: pointer;
-  border-radius: $unnnic-border-radius-sm;
-
-  &.small {
-    padding: $unnnic-spacing-inset-nano;
-  }
-
-  &.large {
-    padding: $unnnic-spacing-inset-xs;
-  }
-
-  &.primary {
-    background-color: $unnnic-color-fg-emphasized;
-
-    &:hover {
-      opacity: $unnnic-opacity-level-clear;
-    }
-  }
-
-  &.secondary {
-    background-color: rgba($unnnic-color-bg-muted, $unnnic-opacity-level-light);
-    position: relative;
-
-    &:before {
-      content: ' ';
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      border: 1px solid $unnnic-color-border-emphasized;
-      border-radius: inherit;
-      pointer-events: none;
-    }
-
-    &:hover {
-      background-color: rgba(
-        $unnnic-color-bg-muted,
-        $unnnic-opacity-level-overlay
-      );
-
-      &:before {
-        border: 0;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,56 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { mount } from '@vue/test-utils';
-
-import ButtonIcon from '../ButtonIcon.vue';
-
-const mountButtonIcon = (props = {}) =>
-  mount(ButtonIcon, {
-    props: {
-      size: 'large',
-      icon: 'search-1',
-      ...props,
-    },
-    global: {
-      stubs: {
-        UnnnicIcon: {
-          props: ['icon', 'scheme', 'size'],
-          template:
-            '<span data-testid="button-icon" :data-icon="icon" :data-scheme="scheme" />',
-        },
-      },
-    },
-  });
-
-describe('ButtonIcon', () => {
-  it('renders with primary type icon scheme', () => {
-    const wrapper = mountButtonIcon({ type: 'primary' });
-
-    expect(
-      wrapper.find('[data-testid="button-icon"]').attributes('data-scheme'),
-    ).toBe('fg-inverted');
-    expect(wrapper.classes()).toContain('primary');
-  });
-
-  it('renders with secondary type icon scheme', () => {
-    const wrapper = mountButtonIcon({ type: 'secondary' });
-
-    expect(
-      wrapper.find('[data-testid="button-icon"]').attributes('data-scheme'),
-    ).toBe('fg-emphasized');
-    expect(wrapper.classes()).toContain('secondary');
-  });
-
-  it('applies size class', () => {
-    const wrapper = mountButtonIcon({ size: 'small' });
-
-    expect(wrapper.classes()).toContain('small');
-  });
-
-  it('rejects invalid size prop in validator', () => {
-    const { validator } = ButtonIcon.props.size;
-
-    expect(validator('large')).toBe(true);
-    expect(validator('small')).toBe(true);
-    expect(validator('invalid')).toBe(false);
-  });
-});

package/src/components/Carousel/Carousel.vue

@@ -1,59 +0,0 @@
-<template>
-  <component
-    :is="currentComponent"
-    class="unnnic-carousel-component"
-    v-bind="$attrs"
-    :name="name"
-    :clickable="clickable"
-    :tagItems="tagItems"
-    :modelValue="modelValue"
-    @selected="$emit('update:model-value', $event)"
-  />
-</template>
-
-<script>
-import TagCarousel from './TagCarousel.vue';
-
-export default {
-  name: 'UnnnicCarousel',
-  model: {
-    event: 'update:model-value',
-  },
-  props: {
-    modelValue: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    type: {
-      type: String,
-      default: 'brand',
-      validator(value) {
-        return ['brand'].indexOf(value) !== -1;
-      },
-    },
-    tagItems: {
-      type: Array,
-      default: () => [],
-    },
-    name: {
-      type: String,
-      default: null,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    currentComponent() {
-      return TagCarousel;
-    },
-  },
-};
-</script>

package/src/components/Carousel/TagCarousel.vue

@@ -1,209 +0,0 @@
-<template>
-  <div class="unnnic-card-tag-carousel">
-    <div
-      class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--left"
-    >
-      <div class="unnnic-card-tag-carousel__button__icon">
-        <UnnnicIcon
-          icon="arrow-left-1-1"
-          size="sm"
-          :scheme="hasPrev ? 'fg-emphasized' : 'fg-muted'"
-          clickable
-          @click="handlePrevious"
-        />
-      </div>
-      <span
-        v-show="hasPrev"
-        class="unnnic-card-tag-carousel__button__blur unnnic-card-tag-carousel__button__blur--left"
-      />
-    </div>
-
-    <div
-      id="scroll"
-      class="unnnic-card-tag-carousel__container"
-    >
-      <div
-        v-for="tag in slides"
-        :key="tag.id"
-        class="unnnic-card-tag-carousel__container__slide"
-      >
-        <UnnnicTag
-          :text="tag.name"
-          clickable
-          type="brand"
-          :disabled="checkIsInclude(tag)"
-          class="unnnic-card-tag-carousel__container__slide__item"
-          @click="save(tag)"
-        />
-      </div>
-    </div>
-
-    <div
-      class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--right"
-    >
-      <span
-        v-show="hasNext"
-        class="unnnic-card-tag-carousel__button__blur unnnic-card-tag-carousel__button__blur--right"
-      />
-      <div class="unnnic-card-tag-carousel__button__icon">
-        <UnnnicIcon
-          icon="arrow-right-1-1"
-          size="sm"
-          :scheme="hasNext ? 'fg-emphasized' : 'fg-muted'"
-          clickable
-          @click="handleNext"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  name: 'UnnnicTagCarousel',
-  components: {
-    UnnnicTag,
-    UnnnicIcon,
-  },
-  props: {
-    modelValue: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    tagItems: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      hasNext: true,
-      hasPrev: false,
-      slides: [],
-    };
-  },
-  mounted() {
-    this.slides = this.tagItems;
-  },
-  methods: {
-    handleNext() {
-      this.next();
-    },
-    handlePrevious() {
-      this.previous();
-    },
-    save(tagItem) {
-      let valueLocal = this.modelValue;
-      if (this.checkIsInclude(tagItem)) {
-        valueLocal = valueLocal.filter((id) => id !== tagItem.id);
-      } else {
-        valueLocal = [...valueLocal, tagItem.id];
-      }
-      this.$emit('selected', valueLocal);
-    },
-    checkIsInclude(tagItem) {
-      return this.modelValue.some((id) => id === tagItem.id);
-    },
-    next() {
-      const element = document.querySelector('#scroll');
-      const scrollCalc = element.scrollWidth - element.clientWidth;
-      element.scrollLeft += 200;
-      if (scrollCalc !== element.scrollLeft) {
-        if (!this.hasNext) {
-          this.hasNext = true;
-        }
-        this.hasPrev = true;
-      } else {
-        this.hasNext = false;
-      }
-    },
-    previous() {
-      const element = document.querySelector('#scroll');
-      element.scrollLeft -= 200;
-      if (element.scrollLeft !== 0) {
-        if (!this.hasPrev) {
-          this.hasPrev = true;
-        }
-        this.hasNext = true;
-      } else {
-        this.hasPrev = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-card-tag-carousel {
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  &__container {
-    width: 100%;
-    display: flex;
-    overflow: hidden;
-    scroll-behavior: smooth;
-
-    &__slide {
-      &:first-of-type {
-        margin-left: $unnnic-inline-lg;
-      }
-      &:last-of-type {
-        margin-right: $unnnic-inline-awesome;
-      }
-      &__item {
-        margin-right: 2 * $unnnic-font-size;
-      }
-    }
-  }
-
-  &__button {
-    z-index: 1;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &__icon {
-      height: $unnnic-inline-lg;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: $unnnic-color-bg-base;
-    }
-
-    &__blur {
-      width: $unnnic-inline-giant;
-      height: $unnnic-inline-lg;
-      &--left {
-        background-image: linear-gradient(
-          to right,
-          $unnnic-color-bg-base,
-          rgba($unnnic-color-bg-base, $unnnic-opacity-level-overlay)
-        );
-      }
-      &--right {
-        background-image: linear-gradient(
-          to right,
-          rgba($unnnic-color-bg-base, $unnnic-opacity-level-overlay),
-          $unnnic-color-bg-base
-        );
-      }
-    }
-    &--left {
-      left: 0;
-    }
-    &--right {
-      right: 0;
-    }
-  }
-}
-</style>