@weni/unnnic-system 2.6.1 → 2.7.0

package/package.json

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

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -13,6 +13,14 @@ 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,
+    },
+  },
+  emits: ['close', 'emojiSelected'],
   computed: {
     emojiPickerPreferences() {
       return {
@@ -42,7 +50,7 @@ export default {
       });
     },
     onEmojiSelect(emoji) {
-      this.$emit('emojiSelected', emoji.native);
+      this.$emit('emojiSelected', this.returnName ? emoji.id : emoji.native);
     },
   },
 };

package/src/components/Tour/Tour.vue

@@ -0,0 +1,129 @@
+<template>
+  <TourMask
+    v-if="isTourActive"
+    :maskRect="maskRect"
+  />
+
+  <TourPopover
+    v-if="isTourActive"
+    :step="currentStepOptions"
+    :stepsLength="steps.length"
+    :currentStep="currentStep"
+    :attachedElement="currentStepOptions.attachedElement"
+    @end="end"
+    @next-step="nextStep"
+  />
+</template>
+
+<script>
+import TourMask from './TourMask.vue';
+import TourPopover from './TourPopover.vue';
+
+import { validateSteps } from './propsValidation';
+
+export default {
+  name: 'UnnnicTour',
+
+  components: {
+    TourMask,
+    TourPopover,
+  },
+
+  props: {
+    steps: {
+      required: true,
+      type: Array,
+      validator: validateSteps,
+    },
+  },
+
+  data() {
+    return {
+      isTourActive: false,
+      currentStep: 1,
+      maskRect: {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+      },
+    };
+  },
+
+  computed: {
+    currentStepOptions() {
+      return this.steps[this.currentStep - 1];
+    },
+    stepStyle() {
+      const attachedElement = this.currentStepOptions.attachedElement;
+
+      if (!this.isTourActive || !attachedElement) {
+        return {};
+      }
+
+      const { top, left, width, height } =
+        attachedElement.getBoundingClientRect();
+      return {
+        top: `${top}px`,
+        left: `${left}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      };
+    },
+  },
+
+  watch: {
+    currentStep() {
+      this.updateMaskRect();
+    },
+    isTourActive(isTourActive) {
+      if (isTourActive) {
+        this.updateMaskRect();
+      }
+    },
+  },
+
+  methods: {
+    start() {
+      this.isTourActive = true;
+      this.currentStep = 1;
+    },
+    end() {
+      this.isTourActive = false;
+      this.currentStep = 1;
+    },
+    handleStep(step) {
+      if (this.currentStep < this.steps.length) {
+        this.currentStep = step;
+      }
+    },
+    nextStep() {
+      const { handleStep, steps, currentStep, end } = this;
+
+      if (currentStep === steps.length) {
+        end();
+        return;
+      }
+
+      handleStep(currentStep + 1);
+    },
+    updateMaskRect() {
+      const attachedElement = this.currentStepOptions?.attachedElement;
+      const { padding } = this.currentStepOptions;
+
+      if (!attachedElement) {
+        return;
+      }
+
+      const { top, left, width, height } =
+        attachedElement.getBoundingClientRect();
+      this.maskRect = {
+        x: left - (padding?.horizontal || 0) / 2,
+        y: top - (padding?.vertical || 0) / 2,
+        width: width + (padding?.horizontal || 0),
+        height: height + (padding?.vertical || 0),
+      };
+    },
+  },
+};
+</script>

package/src/components/Tour/TourMask.vue

@@ -0,0 +1,135 @@
+<template>
+  <section class="unnnic-tour__mask">
+    <svg
+      class="mask__svg"
+      width="100%"
+      height="100%"
+    >
+      <defs>
+        <mask
+          id="svgTourMask"
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+        >
+          <rect
+            x="0"
+            y="0"
+            width="100vw"
+            height="100vh"
+            fill="white"
+          />
+          <rect
+            :x="maskRect.x"
+            :y="maskRect.y"
+            :width="maskRect.width"
+            :height="maskRect.height"
+            rx="4"
+            fill="black"
+            class="unnnic-tour__step"
+          />
+        </mask>
+      </defs>
+      <rect
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        mask="url(#svgTourMask)"
+        class="unnnic-tour__overlay"
+      />
+      <rect
+        v-for="(rect, index) of clickBlockerRects"
+        :key="index"
+        :x="rect.x"
+        :y="rect.y"
+        :width="rect.width"
+        :height="rect.height"
+        :style="rect.style"
+        fill="transparent"
+        pointer-events="auto"
+      />
+    </svg>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'TourMask',
+
+  props: {
+    maskRect: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    clickBlockerRects() {
+      const { maskRect } = this;
+      return [
+        {
+          x: '0',
+          y: '0',
+          width: '100%',
+          height: maskRect.y,
+        },
+        {
+          x: '0',
+          y: '0',
+          width: maskRect.x,
+          height: '100%',
+        },
+        {
+          x: '0',
+          y: maskRect.y + maskRect.height,
+          style: { height: `calc(100vh - ${maskRect.y}px)` },
+          width: '100%',
+        },
+        {
+          x: maskRect.x + maskRect.width,
+          y: '0',
+          style: { width: `calc(100vw - ${maskRect.x}px)` },
+          height: '100%',
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+.unnnic-tour {
+  &__mask {
+    position: fixed;
+    z-index: 1000;
+
+    inset: 0;
+
+    pointer-events: none;
+
+    width: 100%;
+    height: 100%;
+
+    &__svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__step {
+    transition: all 0.2s ease;
+  }
+
+  &__overlay {
+    fill: rgba($unnnic-color-neutral-black, $unnnic-opacity-level-overlay);
+  }
+}
+</style>

package/src/components/Tour/TourPopover.vue

@@ -0,0 +1,229 @@
+<template>
+  <section
+    ref="popover"
+    :class="['unnnic-tour__popover', step.popoverPosition]"
+    :style="style"
+  >
+    <header class="popover__header">
+      <h1 class="header__title">{{ step.title }}</h1>
+      <p
+        class="header__close-tour"
+        @click="$emit('end')"
+      >
+        {{ i18n('close_tour') }}
+      </p>
+    </header>
+    <p class="popover__description">{{ step.description }}</p>
+    <UnnnicButton
+      type="primary"
+      @click="$emit('nextStep')"
+    >
+      {{ i18n('understood') }} {{ currentStep }}/{{ stepsLength }}
+    </UnnnicButton>
+  </section>
+</template>
+
+<script>
+import UnnnicI18n from '@/mixins/i18n';
+
+import UnnnicButton from '@/components/Button/Button.vue';
+
+export default {
+  name: 'UnnnicTourPopover',
+
+  components: {
+    UnnnicButton,
+  },
+
+  mixins: [UnnnicI18n],
+
+  props: {
+    step: {
+      type: Object,
+      required: true,
+    },
+    currentStep: {
+      type: Number,
+      required: true,
+    },
+    stepsLength: {
+      type: Number,
+      required: true,
+    },
+    attachedElement: {
+      type: Element,
+      required: true,
+    },
+  },
+
+  emits: ['end', 'nextStep'],
+
+  data() {
+    return {
+      style: {},
+      defaultTranslations: {
+        close_tour: {
+          'pt-br': 'Fechar tour',
+          en: 'Close tour',
+          es: 'Cerrar recorrido',
+        },
+        understood: {
+          'pt-br': 'Entendi',
+          en: 'I understood',
+          es: 'Entendí',
+        },
+      },
+    };
+  },
+
+  watch: {
+    attachedElement: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.updatePopoverStyle();
+        });
+      },
+    },
+  },
+
+  methods: {
+    updatePopoverStyle() {
+      const { attachedElement, step } = this;
+
+      const popoverElement = this.$refs.popover;
+
+      if (!attachedElement || !popoverElement) {
+        return;
+      }
+
+      const {
+        top: attachedTop,
+        left: attachedLeft,
+        width: attachedWidth,
+        height: attachedHeight,
+      } = attachedElement.getBoundingClientRect();
+      const popoverArrowSize = 12;
+      const popoverArrowMargin = 2;
+      const popoverArrowSpacing = popoverArrowSize + popoverArrowMargin;
+      const popoverWidth = popoverElement?.offsetWidth;
+      const popoverHeight = popoverElement?.offsetHeight;
+
+      const translateXMap = {
+        top: attachedLeft - (popoverWidth - attachedWidth) / 2,
+        bottom: attachedLeft - (popoverWidth - attachedWidth) / 2,
+        right: attachedLeft + attachedWidth + popoverArrowSpacing,
+        left: attachedLeft - popoverWidth - popoverArrowSpacing,
+      };
+      const translateYMap = {
+        top: attachedTop - popoverHeight - popoverArrowSpacing,
+        bottom: attachedTop + attachedHeight + popoverArrowSpacing,
+        right: attachedTop - popoverHeight / 2 + attachedHeight / 2,
+        left: attachedTop - popoverHeight / 2 + attachedHeight / 2,
+      };
+
+      let style = {
+        transform: `translate(${translateXMap[step.popoverPosition]}px, ${translateYMap[step.popoverPosition]}px)`,
+        transition: 'transform .3s ease',
+      };
+
+      this.style = style;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.unnnic-tour__popover {
+  display: flex;
+  flex-direction: column;
+  gap: $unnnic-spacing-ant;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  z-index: 1001;
+
+  border-radius: $unnnic-border-radius-sm;
+  box-shadow: $unnnic-shadow-level-near;
+  background: $unnnic-color-background-white;
+  padding: $unnnic-spacing-ant;
+
+  width: max-content;
+  max-width: 30vw;
+
+  color: $unnnic-color-neutral-darkest;
+  font-family: $unnnic-font-family-secondary;
+  font-size: $unnnic-font-size-body-gt;
+  font-weight: $unnnic-font-weight-regular;
+
+  $arrowSize: $unnnic-icon-size-xs;
+  $arrowHalfSize: calc($arrowSize / 2);
+
+  &::before {
+    content: '';
+    position: absolute;
+
+    width: $unnnic-icon-size-xs;
+    height: $unnnic-icon-size-xs;
+
+    border-radius: calc($unnnic-border-radius-sm / 2);
+
+    background: linear-gradient(
+      -45deg,
+      $unnnic-color-background-white 50%,
+      transparent 50%
+    );
+  }
+
+  &.top::before {
+    left: 50%;
+    bottom: -$arrowHalfSize;
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  &.bottom::before {
+    top: -$arrowHalfSize;
+    left: 50%;
+    transform: translateX(-50%) rotate(225deg);
+  }
+
+  &.left::before {
+    right: -$arrowHalfSize;
+    top: 50%;
+    transform: translateY(-50%) rotate(315deg);
+  }
+
+  &.right::before {
+    left: -$arrowHalfSize;
+    top: 50%;
+    transform: translateY(-50%) rotate(135deg);
+  }
+
+  .popover__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: $unnnic-spacing-nano;
+
+    .header__title {
+      font-weight: $unnnic-font-weight-bold;
+      font-size: $unnnic-font-size-body-gt;
+    }
+    .header__close-tour {
+      cursor: pointer;
+
+      font-size: $unnnic-font-size-body-md;
+      text-decoration-line: underline;
+    }
+  }
+}
+</style>

package/src/components/Tour/propsValidation.js

@@ -0,0 +1,82 @@
+const validateStep = (step) => {
+  const { title, description, attachedElement, popoverPosition } = step;
+  const hasObrigatoryProps =
+    'title' in step &&
+    'description' in step &&
+    'attachedElement' in step &&
+    'popoverPosition' in step;
+
+  if (!hasObrigatoryProps) {
+    throw new Error(
+      'Each item in "steps" must have "title", "description", "attachedElement" and "popoverPosition".',
+    );
+  }
+
+  const isTitleInvalid = typeof title !== 'string' || !title.trim();
+  if (isTitleInvalid) {
+    throw new Error('"title" must be a padded string');
+  }
+
+  const isDescriptionInvalid =
+    typeof description !== 'string' || !description.trim();
+  if (isDescriptionInvalid) {
+    throw new Error('"description" must be a padded string');
+  }
+
+  const isAttachedElementInvalid = !(attachedElement instanceof HTMLElement);
+  if (isAttachedElementInvalid) {
+    throw new Error('"attachedElement" must be an HTML element.');
+  }
+  const validPopoverPositions = ['top', 'bottom', 'left', 'right'];
+  const isPopoverPositionInvalid =
+    !validPopoverPositions.includes(popoverPosition);
+  if (isPopoverPositionInvalid) {
+    throw new Error(
+      '"popoverPosition" must be one of "top", "bottom", "left", or "right".',
+    );
+  }
+
+  if ('padding' in step) {
+    const isPaddingInvalidType =
+      typeof step.padding !== 'object' || step.padding === null;
+    if (isPaddingInvalidType) {
+      throw new Error(
+        'Each item in "steps" that contains "padding" must assign it as an object.',
+      );
+    }
+
+    const isPaddingEmpty = !(step.padding.vertical || step.padding.horizontal);
+    if (isPaddingEmpty) {
+      throw new Error(
+        'Each item in "steps" that contains "padding" must assign it as an object with "vertical" and/or "horizontal" keys.',
+      );
+    }
+
+    const isPaddingVerticalInvalid =
+      'vertical' in step.padding && typeof step.padding.vertical !== 'number';
+    if (isPaddingVerticalInvalid) {
+      throw new Error('"vertical" in "padding" must be a number.');
+    }
+
+    const isPaddingHorizontalInvalid =
+      'horizontal' in step.padding &&
+      typeof step.padding.horizontal !== 'number';
+    if (isPaddingHorizontalInvalid) {
+      throw new Error('"horizontal" in "padding" must be a number.');
+    }
+  }
+};
+
+export const validateSteps = (steps) => {
+  if (!Array.isArray(steps)) {
+    throw new Error('Property steps needs to be a padded array.');
+  }
+
+  if (!steps?.[0]) {
+    throw new Error('Steps property cannot be an empty array.');
+  }
+
+  steps.forEach(validateStep);
+
+  return true;
+};

package/src/components/index.js

@@ -82,6 +82,7 @@ import Drawer from './Drawer/Drawer.vue';
 import TableNext from './TableNext/TableNext.vue';
 import ModalNext from './ModalNext/ModalNext.vue';
 import ModalDialog from './ModalDialog/ModalDialog.vue';
+import Tour from './Tour/Tour.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -169,6 +170,7 @@ export const components = {
   unnnicDisclaimer: Disclaimer,
   unnnicDrawer: Drawer,
   unnnicTableNext: TableNext,
+  unnnicTour: Tour,
 };
 
 export const unnnicFontSize = fontSize;
@@ -257,3 +259,4 @@ export const unnnicChartFunnel = ChartFunnel;
 export const unnnicDisclaimer = Disclaimer;
 export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
+export const unnnicTour = Tour;

package/src/stories/EmojiPicker.stories.js

@@ -1,5 +1,5 @@
-import unnnicButton from '../components/Button/Button.vue';
-import unnnicEmojiPicker from '../components/EmojiPicker/EmojiPicker.vue';
+import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicEmojiPicker from '../components/EmojiPicker/EmojiPicker.vue';
 
 export default {
   title: 'Form/EmojiPicker',
@@ -12,11 +12,11 @@ export default {
 };
 
 export const Default = () => ({
-  components: { unnnicEmojiPicker, unnnicButton },
+  components: { UnnnicEmojiPicker, UnnnicButton },
   template: `
     <section style="position: relative;">
-      <unnnicButton @click.stop="handleEmojiPicker" type="secondary" iconCenter="emoji" size="small"/>
-      <unnnicEmojiPicker
+      <UnnnicButton @click.stop="handleEmojiPicker" type="secondary" iconCenter="emoji" size="small"/>
+      <UnnnicEmojiPicker
         v-show="isEmojiPickerOpen"
         @emojiSelected="handleInput"
         @close="closeEmojiPicker"
@@ -57,3 +57,51 @@ export const Default = () => ({
     },
   },
 });
+
+export const EmojiName = () => ({
+  components: { UnnnicEmojiPicker, UnnnicButton },
+  template: `
+    <section style="position: relative;">
+      <UnnnicButton @click.stop="handleEmojiPicker" type="secondary" iconCenter="emoji" size="small"/>
+      <UnnnicEmojiPicker
+        v-show="isEmojiPickerOpen"
+        returnName
+        @emojiSelected="handleInput"
+        @close="closeEmojiPicker"
+      />
+      <input
+        placeholder="..."
+        :value="inputValue"
+        @input="handleInput"
+      />
+    </section>
+  `,
+  data() {
+    return {
+      isEmojiPickerOpen: false,
+      inputValue: '',
+    };
+  },
+  methods: {
+    openEmojiPicker() {
+      this.isEmojiPickerOpen = true;
+    },
+    closeEmojiPicker() {
+      this.isEmojiPickerOpen = false;
+    },
+    handleEmojiPicker() {
+      if (this.isEmojiPickerOpen) {
+        this.closeEmojiPicker();
+      } else {
+        this.openEmojiPicker();
+      }
+    },
+    handleInput(event) {
+      if (typeof event === 'string') {
+        this.inputValue = event;
+      } else {
+        this.inputValue = event.target.value;
+      }
+    },
+  },
+});