@weni/unnnic-system 3.1.2-alpha.2 → 3.1.3-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.1.2-alpha.2",
+  "version": "3.1.3-alpha.2",
   "type": "commonjs",
   "files": [
     "dist",
@@ -50,9 +50,8 @@
     "vue": "^3.4.8"
   },
   "dependencies": {
-    "@emoji-mart/data": "^1.1.2",
     "@vueuse/components": "^10.4.1",
-    "emoji-mart": "^5.5.2",
+    "emoji-mart-vue-fast": "^15.0.5",
     "lodash": "^4.17.21",
     "mime": "^4.0.1",
     "mitt": "^3.0.1",

package/src/assets/scss/colors.scss

@@ -169,6 +169,38 @@ $unnnic-color-brand-sec-dark: $unnnic-color-neutral-black;
 $unnnic-color-brand-sec-soft: $unnnic-color-neutral-dark;
 $unnnic-color-brand-sec: $unnnic-color-neutral-cleanest;
 
+/* Semantic Background Colors */
+$unnnic-color-bg-base: $unnnic-color-white;
+$unnnic-color-bg-soft: $unnnic-color-gray-50;
+$unnnic-color-bg-muted: $unnnic-color-gray-100;
+$unnnic-color-bg-active: $unnnic-color-teal-600;
+$unnnic-color-bg-info: $unnnic-color-aux-blue-100;
+$unnnic-color-bg-success: $unnnic-color-aux-green-100;
+$unnnic-color-bg-warning: $unnnic-color-aux-yellow-50;
+$unnnic-color-bg-critical: $unnnic-color-aux-red-50;
+
+/* Semantic Text Colors */
+$unnnic-color-fg-base: $unnnic-color-gray-500;
+$unnnic-color-fg-muted: $unnnic-color-gray-300;
+$unnnic-color-fg-emphasized: $unnnic-color-gray-900;
+$unnnic-color-fg-inverted: $unnnic-color-white;
+$unnnic-color-fg-active: $unnnic-color-teal-600;
+$unnnic-color-fg-info: $unnnic-color-aux-blue-500;
+$unnnic-color-fg-success: $unnnic-color-aux-green-500;
+$unnnic-color-fg-warning: $unnnic-color-aux-yellow-500;
+$unnnic-color-fg-critical: $unnnic-color-aux-red-500;
+
+/* Semantic Border Colors */
+$unnnic-color-border-base: $unnnic-color-gray-200;
+$unnnic-color-border-soft: $unnnic-color-gray-100;
+$unnnic-color-border-muted: $unnnic-color-gray-200;
+$unnnic-color-border-emphasized: $unnnic-color-gray-400;
+$unnnic-color-border-active: $unnnic-color-teal-600;
+$unnnic-color-border-info: $unnnic-color-aux-blue-300;
+$unnnic-color-border-success: $unnnic-color-aux-green-300;
+$unnnic-color-border-warning: $unnnic-color-aux-yellow-300;
+$unnnic-color-border-critical: $unnnic-color-aux-red-300;
+
 :export{
     unnnicColorBackgroundSolo: $unnnic-color-background-solo;
 }
@@ -340,36 +372,36 @@ $scheme-colors:
   "brand-sec" $unnnic-color-brand-sec,
   
   // Background semantic colors
-  "bg-base" $unnnic-color-white,
-  "bg-soft" $unnnic-color-gray-50,
-  "bg-muted" $unnnic-color-gray-100,
-  "bg-active" $unnnic-color-teal-600,
-  "bg-info" $unnnic-color-aux-blue-100,
-  "bg-success" $unnnic-color-aux-green-100,
-  "bg-warning" $unnnic-color-aux-yellow-50,
-  "bg-critical" $unnnic-color-aux-red-50,
+  "bg-base" $unnnic-color-bg-base,
+  "bg-soft" $unnnic-color-bg-soft,
+  "bg-muted" $unnnic-color-bg-muted,
+  "bg-active" $unnnic-color-bg-active,
+  "bg-info" $unnnic-color-bg-info,
+  "bg-success" $unnnic-color-bg-success,
+  "bg-warning" $unnnic-color-bg-warning,
+  "bg-critical" $unnnic-color-bg-critical,
   
   // Text semantic colors
-  "fg-base" $unnnic-color-gray-500,
-  "fg-muted" $unnnic-color-gray-300,
-  "fg-emphasized" $unnnic-color-gray-900,
-  "fg-inverted" $unnnic-color-white,
-  "fg-active" $unnnic-color-teal-600,
-  "fg-info" $unnnic-color-aux-blue-500,
-  "fg-success" $unnnic-color-aux-green-500,
-  "fg-warning" $unnnic-color-aux-yellow-500,
-  "fg-critical" $unnnic-color-aux-red-500,
+  "fg-base" $unnnic-color-fg-base,
+  "fg-muted" $unnnic-color-fg-muted,
+  "fg-emphasized" $unnnic-color-fg-emphasized,
+  "fg-inverted" $unnnic-color-fg-inverted,
+  "fg-active" $unnnic-color-fg-active,
+  "fg-info" $unnnic-color-fg-info,
+  "fg-success" $unnnic-color-fg-success,
+  "fg-warning" $unnnic-color-fg-warning,
+  "fg-critical" $unnnic-color-fg-critical,
   
   // Border semantic colors
-  "border-base" $unnnic-color-gray-200,
-  "border-soft" $unnnic-color-gray-100,
-  "border-muted" $unnnic-color-gray-200,
-  "border-emphasized" $unnnic-color-gray-400,
-  "border-active" $unnnic-color-teal-600,
-  "border-info" $unnnic-color-aux-blue-300,
-  "border-success" $unnnic-color-aux-green-300,
-  "border-warning" $unnnic-color-aux-yellow-300,
-  "border-critical" $unnnic-color-aux-red-300;
+  "border-base" $unnnic-color-border-base,
+  "border-soft" $unnnic-color-border-soft,
+  "border-muted" $unnnic-color-border-muted,
+  "border-emphasized" $unnnic-color-border-emphasized,
+  "border-active" $unnnic-color-border-active,
+  "border-info" $unnnic-color-border-info,
+  "border-success" $unnnic-color-border-success,
+  "border-warning" $unnnic-color-border-warning,
+  "border-critical" $unnnic-color-border-critical;
 
 
 @each $name, $color in $scheme-colors {

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -1,64 +1,112 @@
 <template>
   <div
-    ref="pickerContainer"
+    ref="emojiPickerRef"
     :class="['emoji-picker', `emoji-picker--${position}`]"
     @click.stop
     @keypress.enter.stop
-  />
+  >
+    <Picker
+      :data="emojiIndex"
+      set="apple"
+      theme="light"
+      :preview="false"
+      :search="true"
+      nav-position="bottom"
+      no-results-emoji="cry"
+      :max-frequent-rows="3"
+      :i18n="translations"
+      :color="accentColor"
+      @select="onEmojiSelect"
+    />
+  </div>
 </template>
 
-<script>
-import i18n from '@emoji-mart/data/i18n/pt.json';
-import data from '@emoji-mart/data/sets/14/apple.json';
-import { Picker } from 'emoji-mart/';
-
-export default {
-  name: 'UnnnicEmojiPicker',
-  props: {
-    returnName: {
-      type: Boolean,
-      default: false,
-    },
-    position: {
-      type: String,
-      default: 'top',
-      validator: (position) => ['top', 'bottom'].includes(position),
-    },
-  },
-  emits: ['close', 'emojiSelected'],
-  computed: {
-    emojiPickerPreferences() {
-      return {
-        data,
-        set: 'apple',
-        theme: 'light',
-        previewPosition: 'none',
-        searchPosition: 'none',
-        navPosition: 'bottom',
-        noResultsEmoji: 'cry',
-        maxFrequentRows: 3,
-      };
-    },
-  },
-  mounted() {
-    this.initPicker();
-  },
-  methods: {
-    initPicker() {
-      // eslint-disable-next-line no-new
-      new Picker({
-        i18n,
-        parent: this.$refs.pickerContainer,
-        onEmojiSelect: this.onEmojiSelect,
-        onClickOutside: () => this.$emit('close'),
-        ...this.emojiPickerPreferences,
-      });
-    },
-    onEmojiSelect(emoji) {
-      this.$emit('emojiSelected', this.returnName ? emoji.id : emoji.native);
-    },
-  },
-};
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { get } from 'lodash'
+import i18n from '../../utils/plugins/i18n'
+import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
+import data from 'emoji-mart-vue-fast/data/all.json'
+import 'emoji-mart-vue-fast/css/emoji-mart.css'
+import UnnnicI18n from '../../mixins/i18n'
+
+defineOptions({
+  mixins: [UnnnicI18n],
+})
+
+interface Emoji {
+  id: string
+  native: string
+}
+
+export interface Props {
+  returnName?: boolean
+  position?: 'top' | 'bottom'
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  returnName: false,
+  position: 'top',
+  locale: 'pt-br'
+})
+
+const emit = defineEmits<{
+  close: []
+  emojiSelected: [emoji: string]
+}>()
+
+const emojiPickerRef = ref<HTMLElement>()
+const emojiIndex = computed(() => new EmojiIndex(data))
+
+const accentColor = '#00A49F' // $unnnic-color-weni-600
+
+const currentLocale = computed(() => props.locale || 'pt-br')
+
+const translation = (key: string) => {
+  const messages: Record<string, unknown> = i18n.global.messages as Record<string, unknown>
+  const loc = currentLocale.value
+  const localeMsgs = messages?.[loc] || messages?.[loc?.toLowerCase?.()] || messages?.[loc?.toUpperCase?.()]
+  const enMsgs = messages?.['en']
+  return get(localeMsgs, key) || get(enMsgs, key) || key
+}
+
+const translations = computed(() => ({
+  search: translation('emoji_picker.search'),
+  notfound: translation('emoji_picker.notfound'),
+  categories: {
+    search: translation('emoji_picker.categories.search'),
+    recent: translation('emoji_picker.categories.recent'),
+    smileys: translation('emoji_picker.categories.smileys'),
+    people: translation('emoji_picker.categories.people'),
+    nature: translation('emoji_picker.categories.nature'),
+    foods: translation('emoji_picker.categories.foods'),
+    activity: translation('emoji_picker.categories.activity'),
+    places: translation('emoji_picker.categories.places'),
+    objects: translation('emoji_picker.categories.objects'),
+    symbols: translation('emoji_picker.categories.symbols'),
+    flags: translation('emoji_picker.categories.flags'),
+    custom: translation('emoji_picker.categories.custom')
+  }
+}))
+
+const handleClickOutside = (event: Event) => {
+  if (emojiPickerRef.value && !emojiPickerRef.value.contains(event.target as Node)) {
+    emit('close')
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+const onEmojiSelect = (emoji: Emoji) => {
+  emit('emojiSelected', props.returnName ? emoji.id : emoji.native)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -78,16 +126,35 @@ export default {
     animation-name: slideInDown;
   }
 
-  :deep(em-emoji-picker) {
-    // Most variables don't work here
-    --border-radius: 16px;
-    --font-family: Lato, sans-serif; // $unnnic-font-family
-    --rgb-accent: 0, 164, 159; // $unnnic-color-weni-600
-    --rgb-color: 59, 65, 77; // $unnnic-color-neutral-darkest
-    --color-border: rgb(244, 246, 248);
-    --shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
-
+  :deep(.emoji-mart) {
+    border-radius: 16px;
+    font-family: Lato, sans-serif; // $unnnic-font-family
+    border: 1px solid rgb(244, 246, 248);
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
     cursor: default;
+    color: #3B4151; // $unnnic-color-neutral-darkest
+  }
+
+  :deep(.emoji-mart-emoji) {
+    cursor: pointer;
+  }
+
+  :deep(.emoji-mart-category .emoji-mart-emoji span) {
+    cursor: pointer;
+  }
+
+  :deep(.emoji-mart-anchor) {
+    cursor: pointer;
+    color: #858585;
+  }
+
+  :deep(.emoji-mart-anchor:hover),
+  :deep(.emoji-mart-anchor-selected) {
+    color: #00A49F; // $unnnic-color-weni-600
+  }
+
+  :deep(.emoji-mart-anchor-bar) {
+    background-color: #00A49F; // $unnnic-color-weni-600
   }
 }
 

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

@@ -1,16 +1,37 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-
 import UnnnicEmojiPicker from '../EmojiPicker.vue';
 
-import { Picker } from 'emoji-mart/';
+vi.mock('emoji-mart-vue-fast/src', () => ({
+  Picker: {
+    name: 'Picker',
+    props: ['data', 'set', 'theme', 'preview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+    emits: ['select', 'click-outside'],
+    template: '<div class="emoji-mart-picker"></div>'
+  },
+  EmojiIndex: vi.fn().mockImplementation(() => ({}))
+}));
+
+vi.mock('emoji-mart-vue-fast/data/all.json', () => ({
+  default: {}
+}));
 
-vi.mock('emoji-mart/', () => {
+vi.mock('emoji-mart-vue-fast/css/emoji-mart.css', () => ({}));
+
+vi.mock('../../utils/plugins/i18n', () => {
+  const current = 'pt-br'
   return {
-    Picker: vi.fn(),
-  };
+    default: {
+      global: {
+        get locale() { return current },
+        set locale(_v) {},
+        t: (key) => `${key}`,
+      },
+    },
+  }
 });
 
+
 describe('UnnnicEmojiPicker', () => {
   let wrapper;
 
@@ -21,59 +42,99 @@ describe('UnnnicEmojiPicker', () => {
         position: 'top',
         returnName: false,
       },
+      global: {
+        config: {
+          errorHandler: () => {},
+          warnHandler: () => {},
+        },
+        stubs: {
+          Picker: {
+            name: 'Picker',
+            props: ['data', 'set', 'theme', 'preview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+            emits: ['select', 'click-outside'],
+            template: '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)" @click-outside="$emit(\'click-outside\')"></div>'
+          }
+        }
+      }
     });
   });
 
   it('renders correctly with the correct position class', () => {
-    const position = wrapper.vm.position;
     expect(wrapper.classes()).toContain('emoji-picker');
-    expect(wrapper.classes()).toContain(`emoji-picker--${position}`);
+    expect(wrapper.classes()).toContain('emoji-picker--top');
   });
 
-  it('calls `initPicker` on mount and passes the correct configuration to Picker', () => {
-    expect(Picker).toHaveBeenCalledTimes(1);
-    const pickerConfig = Picker.mock.calls[0][0];
-    expect(pickerConfig).toMatchObject({
-      i18n: expect.any(Object),
-      parent: wrapper.vm.$refs.pickerContainer,
-      onEmojiSelect: expect.any(Function),
-      onClickOutside: expect.any(Function),
-      data: expect.any(Object),
-      set: 'apple',
-      theme: 'light',
-      previewPosition: 'none',
-      searchPosition: 'none',
-      navPosition: 'bottom',
-      noResultsEmoji: 'cry',
-      maxFrequentRows: 3,
-    });
+  it('renders the Picker component with correct props', () => {
+    const picker = wrapper.findComponent({ name: 'Picker' });
+    expect(picker.exists()).toBe(true);
+    expect(picker.props('set')).toBe('apple');
+    expect(picker.props('theme')).toBe('light');
+    expect(picker.props('preview')).toBe(false);
+    expect(picker.props('search')).toBe(true);
+    expect(picker.props('navPosition')).toBe('bottom');
+    expect(picker.props('noResultsEmoji')).toBe('cry');
+    expect(picker.props('maxFrequentRows')).toBe(3);
+    expect(picker.props('color')).toBe('#00A49F');
+    expect(picker.props('i18n')).toBeDefined();
   });
 
-  it('emits "emojiSelected" with the correct data when an emoji is selected', () => {
+  it('emits "emojiSelected" with the correct data when an emoji is selected', async () => {
     const emojiMock = { id: 'smile', native: '😊' };
-    const onEmojiSelect = Picker.mock.calls[0][0].onEmojiSelect;
+    const picker = wrapper.findComponent({ name: 'Picker' });
 
-    onEmojiSelect(emojiMock);
+    await picker.vm.$emit('select', emojiMock);
     expect(wrapper.emitted('emojiSelected')).toBeTruthy();
     expect(wrapper.emitted('emojiSelected')[0]).toEqual(['😊']);
   });
 
   it('emits "emojiSelected" with the name when `returnName` is true', async () => {
-    await wrapper.setProps({ returnName: true });
+    const custom = mount(UnnnicEmojiPicker, {
+      props: { position: 'top', returnName: true },
+      global: {
+        stubs: {
+          Picker: {
+            name: 'Picker',
+            props: ['data', 'set', 'theme', 'preview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+            emits: ['select', 'click-outside'],
+            template: '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)"></div>'
+          }
+        }
+      }
+    });
 
     const emojiMock = { id: 'smile', native: '😊' };
-    const onEmojiSelect = Picker.mock.calls[0][0].onEmojiSelect;
+    const picker = custom.findComponent({ name: 'Picker' });
 
-    onEmojiSelect(emojiMock);
-    expect(wrapper.emitted('emojiSelected')).toBeTruthy();
-    expect(wrapper.emitted('emojiSelected')[0]).toEqual(['smile']);
+    await picker.vm.$emit('select', emojiMock);
+    expect(custom.emitted('emojiSelected')).toBeTruthy();
+    expect(custom.emitted('emojiSelected')[0]).toEqual(['smile']);
+    custom.unmount();
   });
 
-  it('emits "close" when `onClickOutside` is triggered', () => {
-    const onClickOutside = Picker.mock.calls[0][0].onClickOutside;
-
-    onClickOutside();
+  it('emits "close" when clicking outside the component', async () => {
+    // Simula um click fora do componente
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+    
+    const clickEvent = new Event('click', { bubbles: true });
+    Object.defineProperty(clickEvent, 'target', { value: outsideElement });
+    
+    document.dispatchEvent(clickEvent);
+    
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('close')).toBeTruthy();
+    
+    // Cleanup
+    document.body.removeChild(outsideElement);
+  });
+
+  it('renders bottom position class when position is bottom', async () => {
+    const custom = mount(UnnnicEmojiPicker, {
+      props: { position: 'bottom' },
+      global: { stubs: { Picker: { name: 'Picker', props: ['data','set','theme','preview','search','navPosition','noResultsEmoji','maxFrequentRows','i18n','color'], template: '<div />' } } }
+    });
+    expect(custom.classes()).toContain('emoji-picker--bottom');
+    custom.unmount();
   });
 
   it('stops event propagation on click', async () => {
@@ -94,4 +155,19 @@ describe('UnnnicEmojiPicker', () => {
     });
     expect(stopPropagationSpy).toHaveBeenCalled();
   });
+
+  it('uses pt-br as default locale', () => {
+    const picker = wrapper.findComponent({ name: 'Picker' });
+    const i18nProp = picker.props('i18n');
+    expect(i18nProp).toBeDefined();
+    expect(i18nProp.search).toBeDefined();
+  });
+
+  it('uses custom locale when provided', async () => {
+    await wrapper.setProps({ locale: 'en' });
+    const picker = wrapper.findComponent({ name: 'Picker' });
+    const i18nProp = picker.props('i18n');
+    expect(i18nProp).toBeDefined();
+    expect(i18nProp.search).toBeDefined();
+  });
 });

package/src/locales/en.json

@@ -22,5 +22,23 @@
       "image": "Image",
       "audio": "Audio message"
     }
+  },
+  "emoji_picker": {
+    "search": "Search",
+    "notfound": "No Emoji Found",
+    "categories": {
+      "search": "Search Results",
+      "recent": "Frequently Used",
+      "smileys": "Smileys & Emotion",
+      "people": "People & Body",
+      "nature": "Animals & Nature",
+      "foods": "Food & Drink",
+      "activity": "Activity",
+      "places": "Travel & Places",
+      "objects": "Objects",
+      "symbols": "Symbols",
+      "flags": "Flags",
+      "custom": "Custom"
+    }
   }
 }

package/src/locales/es.json

@@ -22,5 +22,23 @@
       "image": "Imagen",
       "audio": "Mensaje de audio"
     }
+  },
+  "emoji_picker": {
+    "search": "Buscar",
+    "notfound": "No se encontró ningún emoji",
+    "categories": {
+      "search": "Resultados de búsqueda",
+      "recent": "Usados frecuentemente",
+      "smileys": "Caritas y Emociones",
+      "people": "Personas y Cuerpo",
+      "nature": "Animales y Naturaleza",
+      "foods": "Comidas y Bebidas",
+      "activity": "Actividades",
+      "places": "Viajes y Lugares",
+      "objects": "Objetos",
+      "symbols": "Símbolos",
+      "flags": "Banderas",
+      "custom": "Personalizados"
+    }
   }
 }

package/src/locales/pt_br.json

@@ -22,5 +22,23 @@
       "image": "Imagem",
       "audio": "Mensagem de áudio"
     }
+  },
+  "emoji_picker": {
+    "search": "Buscar",
+    "notfound": "Nenhum emoji encontrado",
+    "categories": {
+      "search": "Resultados da busca",
+      "recent": "Usados frequentemente",
+      "smileys": "Carinhas & Pessoas",
+      "people": "Pessoas e Corpo",
+      "nature": "Animais e Natureza",
+      "foods": "Comidas e Bebidas",
+      "activity": "Atividades",
+      "places": "Viagens e Lugares",
+      "objects": "Objetos",
+      "symbols": "Símbolos",
+      "flags": "Bandeiras",
+      "custom": "Personalizados"
+    }
   }
 }