@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

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

@@ -0,0 +1,236 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import UnnnicEmojiPicker from '../EmojiPicker.vue';
+
+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-vue-fast/css/emoji-mart.css', () => ({}));
+
+vi.mock('../../utils/plugins/i18n', () => {
+  const current = 'pt-br';
+  return {
+    default: {
+      global: {
+        get locale() {
+          return current;
+        },
+        set locale(_v) {},
+        t: (key) => `${key}`,
+      },
+    },
+  };
+});
+
+describe('UnnnicEmojiPicker', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    wrapper = mount(UnnnicEmojiPicker, {
+      props: {
+        position: 'top',
+        returnName: false,
+      },
+      global: {
+        config: {
+          errorHandler: () => {},
+          warnHandler: () => {},
+        },
+        stubs: {
+          Picker: {
+            name: 'Picker',
+            props: [
+              'data',
+              'set',
+              'theme',
+              'emoji',
+              'title',
+              'showPreview',
+              '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', () => {
+    expect(wrapper.classes()).toContain('emoji-picker');
+    expect(wrapper.classes()).toContain('emoji-picker--top');
+  });
+
+  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('emoji')).toBe('point_up');
+    expect(picker.props('title')).toBe('Escolha seu emoji...');
+    expect(picker.props('showPreview')).toBe(true);
+    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('var(--unnnic-color-fg-accent)');
+    expect(picker.props('i18n')).toBeDefined();
+  });
+
+  it('emits "emojiSelected" with the correct data when an emoji is selected', async () => {
+    const emojiMock = { id: 'smile', native: '😊' };
+    const picker = wrapper.findComponent({ name: 'Picker' });
+
+    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 () => {
+    const custom = mount(UnnnicEmojiPicker, {
+      props: { position: 'top', returnName: true },
+      global: {
+        stubs: {
+          Picker: {
+            name: 'Picker',
+            props: [
+              'data',
+              'set',
+              'theme',
+              'emoji',
+              'title',
+              'showPreview',
+              '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 picker = custom.findComponent({ name: 'Picker' });
+
+    await picker.vm.$emit('select', emojiMock);
+    expect(custom.emitted('emojiSelected')).toBeTruthy();
+    expect(custom.emitted('emojiSelected')[0]).toEqual(['smile']);
+    custom.unmount();
+  });
+
+  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',
+              'emoji',
+              'title',
+              'showPreview',
+              'search',
+              'navPosition',
+              'noResultsEmoji',
+              'maxFrequentRows',
+              'i18n',
+              'color',
+            ],
+            template: '<div />',
+          },
+        },
+      },
+    });
+    expect(custom.classes()).toContain('emoji-picker--bottom');
+    custom.unmount();
+  });
+
+  it('stops event propagation on click', async () => {
+    const event = new MouseEvent('click');
+    const stopPropagationSpy = vi.spyOn(event, 'stopPropagation');
+
+    await wrapper.trigger('click', { stopPropagation: stopPropagationSpy });
+    expect(stopPropagationSpy).toHaveBeenCalled();
+  });
+
+  it('stops event propagation on keypress "Enter"', async () => {
+    const event = new KeyboardEvent('keypress', { key: 'Enter' });
+    const stopPropagationSpy = vi.spyOn(event, 'stopPropagation');
+
+    await wrapper.trigger('keypress', {
+      key: 'Enter',
+      stopPropagation: stopPropagationSpy,
+    });
+    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/components/Flag.vue

@@ -0,0 +1,40 @@
+<template>
+  <UnnnicIcon
+    :icon="name"
+    :size="size"
+  />
+</template>
+
+<script>
+/* eslint-disable vue/multi-word-component-names */
+import UnnnicIcon from './Icon.vue';
+
+export default {
+  name: 'Flag',
+  components: {
+    UnnnicIcon,
+  },
+  props: {
+    code: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator(value) {
+        return ['nano', 'xs', 'sm', 'md', 'lg'].indexOf(value) !== -1;
+      },
+    },
+  },
+  computed: {
+    name() {
+      return {
+        'pt-br': 'Brazil',
+        en: 'USA',
+        es: 'Spain',
+      }[this.code];
+    },
+  },
+};
+</script>

package/src/components/FormElement/FormElement.vue

@@ -0,0 +1,139 @@
+<template>
+  <section
+    class="unnnic-form-element"
+    :class="{ 'unnnic-form-element--disabled': disabled }"
+  >
+    <UnnnicLabel
+      v-if="label"
+      :label="label"
+      :tooltip="tooltip"
+      :class="[
+        'unnnic-form-element__label',
+        {
+          'unnnic-form-element__label--fixed': fixedLabel,
+        },
+      ]"
+    />
+
+    <slot></slot>
+
+    <section
+      v-if="message || error || !!$slots.rightMessage"
+      class="unnnic-form-element__hints-container"
+    >
+      <section class="unnnic-form-element__message-container">
+        <p
+          v-if="message"
+          class="unnnic-form-element__message"
+        >
+          {{ fullySanitize(message) }}
+        </p>
+        <p
+          v-if="!!error?.length"
+          class="unnnic-form-element__message error"
+        >
+          {{ Array.isArray(error) ? error.join(', ') : error }}
+        </p>
+      </section>
+      <p v-if="!!$slots.rightMessage">
+        <slot name="rightMessage" />
+      </p>
+    </section>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { fullySanitize } from '../../utils/sanitize';
+import UnnnicLabel from '../Label/Label.vue';
+import { type TooltipProps } from '../ToolTip/ToolTip.vue';
+
+defineOptions({
+  name: 'UnnnicFormElement',
+});
+
+export interface FormElementProps {
+  size?: 'md' | 'sm';
+  label?: string;
+  fixedLabel?: boolean;
+  error?: string;
+  message?: string;
+  disabled?: boolean;
+  tooltip?: TooltipProps;
+}
+
+withDefaults(defineProps<FormElementProps>(), {
+  size: 'md',
+  label: '',
+  fixedLabel: false,
+  error: '',
+  message: '',
+  disabled: false,
+  tooltip: undefined,
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  margin: $unnnic-space-0;
+  padding: $unnnic-space-0;
+  box-sizing: border-box;
+}
+
+.unnnic-form-element {
+  &__label {
+    font: $unnnic-font-body;
+    margin-bottom: $unnnic-space-1;
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+
+    &--fixed {
+      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
+    }
+
+    &--fixed {
+      margin-bottom: $unnnic-space-0;
+      position: absolute;
+      padding: $unnnic-space-0 $unnnic-space-1;
+      margin-left: $unnnic-space-2;
+
+      &:after {
+        content: ' ';
+        position: absolute;
+        left: $unnnic-space-0;
+        bottom: $unnnic-space-1 - 1px;
+        width: 100%;
+        height: 1px;
+        background-color: $unnnic-color-bg-base;
+      }
+    }
+  }
+
+  &__message {
+    &.error {
+      color: $unnnic-color-fg-critical;
+    }
+  }
+
+  &__hints-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: $unnnic-space-1;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
+
+  &__message-container {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-1;
+  }
+
+  &--disabled .unnnic-form-element__label,
+  &--disabled .unnnic-form-element__message {
+    user-select: none;
+  }
+}
+</style>

package/src/components/Icon/OldIconsMap.json

@@ -0,0 +1,111 @@
+{
+  "lock-2-1": "lock",
+  "lock-2-2": "lock",
+  "view-1-1": "visibility",
+  "view-off-1": "visibility_off",
+  "read-email-at-1": "alternate_email",
+  "email-action-unread-1": "mail",
+  "loading-circle-1": "progress_activity",
+  "close-1": "close",
+  "alert-circle-1": "error",
+  "alert-circle-1-1": "error",
+  "check-circle-1-1": "check_circle",
+  "check-circle-1-1-1": "check_circle",
+  "check-2": "check",
+  "search-1": "search",
+  "house-1-1": "some",
+  "gauge-dashboard-2": "speed",
+  "science-fiction-robot-2": "neurology",
+  "hierarchy-3-2": "account_tree",
+  "messaging-we-chat-3": "forum",
+  "question-circle-1": "help",
+  "alarm-bell-3": "notifications",
+  "expand-full-1": "open_in_full",
+  "expand-8-1": "close_fullscreen",
+  "logout-1-1": "logout",
+  "arrow-left-1-1": "chevron_left",
+  "arrow-right-1-1": "chevron_right",
+  "arrow-button-down-1": "expand_more",
+  "task-list-clock-1": "pending_actions",
+  "graph-stats-ascend-2": "trending_up",
+  "graph-stats-descend-2": "trending_down",
+  "messages-bubble-1": "chat_bubble",
+  "chat-translate-1": "translate",
+  "translate-1": "translate",
+  "translate-2": "translate",
+  "arrow-button-up-1": "expand_less",
+  "delete-1": "error",
+  "button-refresh-arrow-1": "refresh",
+  "book-address-1-2": "contacts",
+  "synchronize-arrow-clock-4": "update",
+  "flash-1-3": "bolt",
+  "phone-3": "call",
+  "phone-4": "call",
+  "layout-dashboard-1": "dashboard",
+  "check-square-1": "task_alt",
+  "cog-1": "settings",
+  "cog-2": "settings",
+  "download-bottom-1": "download",
+  "charger-1": "cloud",
+  "upload-bottom-1": "upload",
+  "copy-paste-1": "content_copy",
+  "pencil-write-1": "edit_square",
+  "add-1": "add",
+  "time-clock-circle-1": "schedule",
+  "button-refresh-arrows-1": "refresh",
+  "keyboard-return-1": "keyboard_return",
+  "delete-1-1": "dangerous",
+  "delete-2-1": "dangerous",
+  "keyboard-arrow-left-1": "keyboard_backspace",
+  "graph-stats-circle-1": "vital_signs",
+  "graph-stats-1": "vital_signs",
+  "paginate-filter-text-1": "article",
+  "keyboard-arrow-down-1": "south",
+  "keyboard-arrow-right-1": "arrow_right_alt",
+  "study-light-idea-1": "lightbulb",
+  "folder-1": "folder",
+  "export-1": "open_in_new",
+  "add-circle-1": "add_circle",
+  "subtract-circle-1": "do_not_disturb_on",
+  "subtract-1": "remove",
+  "button-play-1": "play_circle",
+  "lock-unlock-1-1": "lock_open_right",
+  "video-file-mp4-1": "video_file",
+  "office-file-pdf-1-1": "picture_as_pdf",
+  "send-email-3-1": "send",
+  "rating-star-1": "star",
+  "rating-star-1-1": "star",
+  "floppy-disk-1": "save",
+  "common-file-empty-1": "check_box_outline_blank",
+  "currency-dollar-circle-1": "paid",
+  "app-window-edit-1": "web_asset",
+  "headphones-customer-support-human-1-1": "headset_mic",
+  "bin-1-1": "delete",
+  "book-library-1": "school",
+  "notes-1": "event_note",
+  "arrow-undo": "undo",
+  "arrow-redo": "redo",
+  "emoji": "mood",
+  "text-bold": "format_bold",
+  "text-italic": "format_italic",
+  "text-left": "format_align_left",
+  "text-center": "format_align_center",
+  "text-right": "format_align_right",
+  "text-justified": "format_align_justify",
+  "attachment": "attach_file",
+  "microphone": "mic",
+  "controls-play-1": "play_arrow",
+  "controls-pause-1": "pause",
+  "common-file-horizontal-image-1": "image",
+  "information-circle-4": "info",
+  "task-checklist-1": "content_paste",
+  "preferences": "tune",
+  "check-double": "done",
+  "alarm-bell-ring": "notifications_ative",
+  "bookmark-tag-1": "sell",
+  "move-expand-vertical-1": "unfold_more",
+  "text-underline": "format_underlined",
+  "unordered-list": "list",
+  "filter": "filter_alt",
+  "typing-1": "text_select_start"
+}

package/src/components/Icon/types.ts

@@ -0,0 +1,26 @@
+import type { SchemeColor } from '@/types/scheme-colors';
+
+// Re-export SchemeColor for backward compatibility
+export type { SchemeColor };
+
+export type IconSize =
+  | 'nano'
+  | 'xs'
+  | 'sm'
+  | 'ant'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'avatar-lg'
+  | 'avatar-md'
+  | 'avatar-sm'
+  | 'avatar-xs'
+  | 'avatar-nano';
+
+export interface IconProps {
+  filled?: boolean;
+  icon?: string | null;
+  clickable?: boolean;
+  size?: IconSize;
+  scheme?: SchemeColor;
+}