@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/ChatsMessage/ChatsMessageText.vue

@@ -0,0 +1,80 @@
+<template>
+  <p
+    v-html="formattedText"
+    class="unnnic-chats-message__text"
+  />
+</template>
+
+<script>
+export default {
+  name: 'ChatsMessageText',
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    formattedText() {
+      function treatTextUrl(text) {
+        const urlRegex = /(https?:\/\/[^\s]+)/g;
+        return text.replace(urlRegex, '<a href="$1" target="_blank">$1</a>');
+      }
+
+      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,
+              )) {
+                const name = i.groups.name1 || i.groups.name2;
+                const value = i.groups.value1 || i.groups.value2;
+
+                if (name === 'style') {
+                  const styles = [];
+
+                  // eslint-disable-next-line no-restricted-syntax
+                  for (const j of value.matchAll(
+                    /(?<propertyName>[^:]+):(?<propertyValue>[^;]+);?/g,
+                  )) {
+                    if (
+                      j.groups.propertyName.toLowerCase().trim() ===
+                      'text-align'
+                    ) {
+                      styles.push(
+                        `${j.groups.propertyName
+                          .toLowerCase()
+                          .trim()}: ${j.groups.propertyValue.trim()}`,
+                      );
+                    }
+                  }
+
+                  complements.push(`style="${styles.join('; ')};"`);
+                }
+              }
+
+              return `<${$2}${$3}${
+                complements.length ? ` ${complements.join(' ')}` : ''
+              }>`;
+            }
+
+            return '';
+          },
+        );
+      }
+
+      const formattedText = treatTextUrl(
+        removeHtmlDangerousContent(this.text).trim()?.replace(/\n/g, '<br/>'),
+      );
+
+      return typeof this.text === 'string' ? formattedText : '';
+    },
+  },
+};
+</script>

package/src/components/{NavbarChats/NavbarChats.vue → ChatsNavbar/ChatsNavbar.vue}

@@ -1,10 +1,13 @@
 <template>
-  <nav class="unnnic-navbar-chats">
-    <ol class="unnnic-navbar-chats__list">
-      <li v-for="(link, index) in links" :key="link.icon + index">
+  <nav class="unnnic-chats-navbar">
+    <ol class="unnnic-chats-navbar__list">
+      <li
+        v-for="(link, index) in links"
+        :key="link.icon + index"
+      >
         <a
           :class="[
-            'unnnic-navbar-chats__link',
+            'unnnic-chats-navbar__link',
             'unnnic--clickable',
             { selected: isSelected(link) },
           ]"
@@ -15,10 +18,11 @@
             }
           "
         >
-          <unnnic-icon
-            :icon="isSelected(link) ? link.icon.selected : link.icon.default"
+          <UnnnicIcon
+            :icon="getLinkIcon(link)"
             size="lg"
             scheme="neutral-snow"
+            :filled="isSelected(link)"
           />
         </a>
       </li>
@@ -30,7 +34,7 @@
 import UnnnicIcon from '../Icon.vue';
 
 export default {
-  name: 'unnnic-navbar-chats',
+  name: 'unnnic-chats-navbar',
 
   components: {
     UnnnicIcon,
@@ -57,7 +61,9 @@ export default {
 
         function isValidLink(link) {
           const hasValidName = typeof link.name === 'string';
-          const hasValidIcon = typeof link.icon.default === 'string';
+          const hasValidIcon =
+            typeof link.icon === 'string' ||
+            typeof link.icon.default === 'string';
           const hasValidAction = typeof link.action === 'function';
 
           return hasValidName && hasValidIcon && hasValidAction;
@@ -67,34 +73,33 @@ export default {
       },
     },
 
-    initialLink: {
+    modelValue: {
       type: String,
-      required: false,
+      required: true,
     },
   },
 
-  data() {
-    return {
-      selectedLink: null,
-    };
-  },
-
   methods: {
     selectLink(link) {
-      this.selectedLink = link;
+      this.$emit('update:modelValue', link.name);
     },
 
     isSelected(link) {
-      return this.selectedLink === link;
+      return this.modelValue === link.name;
     },
-  },
 
-  mounted() {
-    if (this.initialLink) {
-      const initialLinkToSelect = this.links.find((link) => link.name === this.initialLink);
+    getLinkIcon(link) {
+      const { icon } = link;
+      if (typeof icon === 'string') {
+        return icon;
+      }
 
-      this.selectLink(initialLinkToSelect);
-    }
+      if (this.isSelected(link)) {
+        return icon.selected;
+      }
+
+      return icon.default || '';
+    },
   },
 };
 </script>
@@ -102,7 +107,7 @@ export default {
 <style lang="scss">
 @import '../../assets/scss/unnnic.scss';
 
-.unnnic-navbar-chats {
+.unnnic-chats-navbar {
   width: 100vw;
   max-width: 100%;
 

package/src/components/ChatsUserAvatar/ChatsUserAvatar.vue

@@ -0,0 +1,140 @@
+<template>
+  <span
+    class="user-avatar"
+    :class="{
+      active,
+      clickable,
+      disabled,
+      [`user-avatar--${size}`]: true,
+    }"
+    @click="$emit('click')"
+    @keypress.enter="$emit('click')"
+  >
+    <UnnnicIcon
+      v-if="username === 'Agent'"
+      icon="single-neutral-actions-1"
+      size="sm"
+      :scheme="disabled ? 'neutral-snow' : ''"
+    />
+    <UnnnicIcon
+      v-else-if="username === 'Bot'"
+      icon="science-fiction-robot-2"
+      size="sm"
+      :scheme="disabled ? 'neutral-snow' : ''"
+    />
+    <img
+      v-else-if="!!photoUrl"
+      :src="photoUrl"
+      alt=""
+    />
+    <span v-else>
+      {{ getUsernameFirstCharacter }}
+    </span>
+  </span>
+</template>
+
+<script>
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  name: 'UserAvatar',
+  components: {
+    UnnnicIcon,
+  },
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'xl',
+      validator: (value) =>
+        ['xs', 'sm', 'ant', 'md', 'lg', 'xl', '2xl'].indexOf(value) !== -1,
+    },
+    username: {
+      type: String,
+      required: true,
+    },
+    photoUrl: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    getUsernameFirstCharacter() {
+      const cleanUsername = this.username.replace(/[^a-zA-Z0-9]+/g, '');
+
+      const firstCodePoint = (cleanUsername || this.username).codePointAt(0);
+      if (firstCodePoint) {
+        return String.fromCodePoint(firstCodePoint);
+      }
+      return '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+$avatar-sizes:
+  '2xl' 3rem,
+  'xl' $unnnic-icon-size-xl,
+  'lg' $unnnic-icon-size-lg,
+  'md' $unnnic-icon-size-md,
+  'ant' $unnnic-icon-size-ant,
+  'sm' $unnnic-icon-size-sm,
+  'xs' $unnnic-icon-size-xs;
+
+.user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $unnnic-border-radius-sm;
+
+  background: $unnnic-color-weni-50;
+  color: $unnnic-color-aux-purple-500;
+
+  &.active {
+    background: $unnnic-color-weni-100;
+  }
+
+  &.disabled {
+    background: $unnnic-color-neutral-cleanest;
+    color: $unnnic-color-neutral-snow;
+  }
+
+  &.clickable {
+    cursor: pointer;
+  }
+
+  @each $name, $size in $avatar-sizes {
+    &--#{$name} {
+      min-width: $size;
+      max-height: $size;
+      width: $size;
+      height: $size;
+
+      font-size: calc($size / 2);
+      font-family: $unnnic-font-family-secondary;
+
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+}
+</style>

package/src/components/Checkbox/Checkbox.vue

@@ -1,10 +1,11 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="unnnic-checkbox-wrapper">
-    <unnnic-icon-svg
+    <UIcon
       class="unnnic-checkbox"
+      :class="{ disabled }"
       :icon="icon"
       :scheme="color"
-      :disabled="disabled"
       :clickable="!disabled"
       :size="size"
       @click="click"
@@ -24,7 +25,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon.vue';
+import uIcon from '../Icon.vue';
 
 export default {
   model: {
@@ -32,7 +33,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: [Boolean, String],
       default: false,
       validator(value) {
@@ -59,14 +60,15 @@ export default {
   },
 
   components: {
-    unnnicIconSvg,
+    uIcon,
   },
 
   computed: {
     valueName() {
-      if (this.value === true) {
+      if (this.modelValue === true) {
         return 'checked';
-      } if (this.value === false) {
+      }
+      if (this.modelValue === false) {
         return 'default';
       }
 
@@ -103,18 +105,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
-.unnnic-checkbox-wrapper{
+.unnnic-checkbox-wrapper {
   display: flex;
   align-items: flex-start;
   cursor: pointer;
 }
 
 .unnnic-checkbox {
-  &[disabled] {
-    ::v-deep .primary {
-      fill: $unnnic-color-brand-sec;
+  &.disabled {
+    :deep(.primary) {
+      fill: $unnnic-color-neutral-soft;
     }
   }
 }

package/src/components/CircleProgressBar/CircleProgressBar.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="unnnic-circle-progress-bar">
-    <svg width="46" height="46" class="semicircle">
+    <svg
+      width="46"
+      height="46"
+      class="semicircle"
+    >
       <circle
         cx="23"
         cy="23"
@@ -104,7 +108,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-circle-progress-bar {
   position: relative;
@@ -136,7 +140,7 @@ export default {
     left: 50%;
     transform: translate(-50%, -50%);
 
-    color: $unnnic-color-neutral-clean;
+    color: $unnnic-color-neutral-cleanest;
     font-family: $unnnic-font-family-secondary;
     font-weight: $unnnic-font-weight-regular;
     font-size: $unnnic-font-size-body-gt;

package/src/components/Collapse/Collapse.vue

@@ -0,0 +1,141 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div
+    :class="[
+      'unnnic-collapse',
+      `unnnic-collapse--size-${size}`,
+      {
+        'unnnic-collapse--border-bottom': borderBottom,
+        'unnnic-collapse--unspaced-icon': unspacedIcon,
+        'unnnic-collapse--active': localActive,
+      },
+    ]"
+  >
+    <div
+      class="unnnic-collapse__header"
+      @click="localActive = !localActive"
+    >
+      {{ title }}<slot name="header"></slot>
+
+      <UnnnicIcon
+        size="xs"
+        :icon="localActive ? 'arrow-button-up-1' : 'arrow-button-down-1'"
+        :scheme="localActive ? 'neutral-dark' : 'neutral-cloudy'"
+      />
+    </div>
+
+    <div
+      v-show="localActive"
+      class="unnnic-collapse__body"
+    >
+      <slot name="default"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import UnnnicIcon from '../Icon.vue';
+
+const props = defineProps({
+  title: String,
+  active: Boolean,
+  borderBottom: Boolean,
+  unspacedIcon: Boolean,
+  size: {
+    type: String,
+    default: 'lg',
+    validator(value) {
+      return ['md', 'lg'].includes(value);
+    },
+  },
+  modelValue: Boolean,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const localActive = ref(false);
+
+watch(localActive, (newActive) => {
+  emit('change', newActive);
+  emit('update:modelValue', newActive);
+});
+
+watch(
+  () => props.active,
+  (newActive) => {
+    localActive.value = newActive;
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.modelValue,
+  (newActive) => {
+    localActive.value = newActive;
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-collapse {
+  padding-bottom: $unnnic-spacing-ant;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    column-gap: $unnnic-spacing-ant;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: $unnnic-spacing-ant 0;
+    margin-bottom: -$unnnic-spacing-ant;
+    user-select: none;
+
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-lg;
+    line-height: $unnnic-font-size-body-lg + $unnnic-line-height-md;
+    color: $unnnic-color-neutral-cloudy;
+
+    &:hover {
+      color: $unnnic-color-neutral-dark;
+
+      :deep(svg .primary) {
+        fill: $unnnic-color-neutral-dark;
+      }
+    }
+  }
+
+  &__body {
+    margin-top: $unnnic-spacing-ant;
+
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+    color: $unnnic-color-neutral-cloudy;
+  }
+
+  &--border-bottom {
+    padding-bottom: $unnnic-spacing-ant - $unnnic-border-width-thinner;
+    border-bottom: $unnnic-border-width-thinner solid
+      $unnnic-color-neutral-cleanest;
+  }
+
+  &--active .unnnic-collapse__header {
+    color: $unnnic-color-neutral-dark;
+  }
+
+  &--unspaced-icon .unnnic-collapse__header {
+    justify-content: flex-start;
+  }
+
+  &--size-md .unnnic-collapse__header {
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+  }
+}
+</style>

package/src/components/DataArea/DataArea.vue

@@ -9,9 +9,12 @@
     </div>
 
     <div class="data-area-container__content">
-      <tool-tip :enabled="enableHover" :text="hoverText">
+      <ToolTip
+        :enabled="enableHover"
+        :text="hoverText"
+      >
         <div class="data-area-container__content__text">{{ text }}</div>
-      </tool-tip>
+      </ToolTip>
 
       <div class="data-area-container__content__buttons-slot">
         <slot name="buttons"></slot>
@@ -43,7 +46,7 @@ export default {
     },
     hoverText: {
       type: String,
-      default: null,
+      default: '',
     },
   },
 };

package/src/components/DateFilter/DateFilter.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="unnnic-date-filter">
-    <unnnic-input
+    <UnnnicInput
       class="unnnic-date-filter__input"
       :size="size"
-      icon-left="notes-1"
+      iconLeft="notes-1"
       @focus.stop="emitFilter"
       readonly
       :mask="fullMask"
       :value="dateRange"
       :placeholder="placeholder"
-    ></unnnic-input>
+    ></UnnnicInput>
   </div>
 </template>
 
@@ -56,12 +56,16 @@ export default {
       let range = '';
 
       if (this.startDate) {
-        const formattedDate = moment(this.startDate).format(this.dateFormat.replaceAll('/', ''));
+        const formattedDate = moment(this.startDate).format(
+          this.dateFormat.replaceAll('/', ''),
+        );
         range += formattedDate.toString();
       }
 
       if (this.endDate) {
-        const formattedDate = moment(this.endDate).format(this.dateFormat.replaceAll('/', ''));
+        const formattedDate = moment(this.endDate).format(
+          this.dateFormat.replaceAll('/', ''),
+        );
         range += formattedDate.toString();
       }