@weni/unnnic-system 3.0.3 → 3.0.4-alpha.1

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -0,0 +1,249 @@
+<template>
+  <section class="unnnic-template-preview">
+    <section
+      :class="[
+        'unnnic-template-preview__content',
+        { 'unnnic-template-preview__content--has-media': hasHeaderMedia },
+      ]"
+    >
+      <header
+        v-if="hasHeader"
+        :class="`unnnic-template-preview__header__${
+          template?.header.type === 'TEXT' ? 'text' : 'media'
+        }`"
+      >
+        <img
+          class="unnnic-template-preview__header__media__preview"
+          v-if="
+            template?.header.type === 'MEDIA' &&
+            template?.header.mediaType === 'IMAGE'
+          "
+          :src="template.header.src || imagePreview"
+        />
+        <template
+          v-else-if="
+            template?.header.type === 'MEDIA' &&
+            template?.header.mediaType === 'VIDEO'
+          "
+        >
+          <video
+            v-if="template.header.src"
+            class="unnnic-template-preview__header__media__preview"
+            :src="template.header.src"
+            controls
+          />
+          <img
+            v-else
+            class="unnnic-template-preview__header__media__preview"
+            :src="videoPreview"
+          />
+        </template>
+        <template
+          v-else-if="
+            template?.header.type === 'MEDIA' &&
+            template?.header.mediaType === 'DOCUMENT'
+          "
+        >
+          <img
+            class="unnnic-template-preview__header__media__preview"
+            :src="documentPreview"
+          />
+        </template>
+        <h1
+          class="unnnic-template-preview__header__text__preview"
+          v-else-if="template?.header.type === 'TEXT'"
+        >
+          {{ template.header.text }}
+        </h1>
+      </header>
+      <section
+        v-if="hasBody"
+        :class="[
+          'unnnic-template-preview__body',
+          { 'unnnic-template-preview__body--has-media': hasHeaderMedia },
+        ]"
+      >
+        <section v-html="parsedBody"></section>
+      </section>
+      <footer
+        v-if="hasFooter"
+        :class="[
+          'unnnic-template-preview__footer',
+          { 'unnnic-template-preview__footer--has-media': hasHeaderMedia },
+        ]"
+      >
+        {{ template?.footer }}
+      </footer>
+    </section>
+    <footer v-if="hasButtons" class="unnnic-template-preview__buttons">
+      <section
+        v-for="(button, index) in template?.buttons"
+        :key="`button-${index}`"
+        class="unnnic-template-preview__buttons__button"
+      >
+        <UnnnicIcon
+          class="unnnic-template-preview__buttons__button__icon"
+          :icon="getButtonIcon(button.type)"
+          scheme="aux-blue-500"
+          size="ant"
+        />
+        <p class="unnnic-template-preview__buttons__button__text">
+          {{ button.text }}
+        </p>
+      </section>
+    </footer>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+import type { Template } from "./types";
+
+import imagePreview from "../../assets/img/previews/image-preview.png";
+import documentPreview from "../../assets/img/previews/doc-preview.png";
+import videoPreview from "../../assets/img/previews/video-preview.png";
+
+import UnnnicIcon from "../Icon.vue";
+
+interface Props {
+  template?: Template | null;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  template: null,
+});
+
+const hasHeader = computed(
+  () => props.template?.header && props.template.header.type
+);
+const hasHeaderMedia = computed(
+  () => !!props.template?.header && props.template.header.type === "MEDIA"
+);
+const hasBody = computed(
+  () => !!props.template?.body && props.template.body.length > 0
+);
+const hasFooter = computed(
+  () => !!props.template?.footer && props.template.footer.length > 0
+);
+const hasButtons = computed(
+  () => !!props.template?.buttons && props.template.buttons.length > 0
+);
+const parsedBody = computed(() => {
+  if (!hasBody.value) return "";
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const result = props
+    .template!.body!.replaceAll("\n", "<br/>")
+    .replaceAll(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
+    .replaceAll(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
+    .replaceAll(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
+    .replaceAll(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
+    .replaceAll(/{{.*?}}/g, (match) => `<strong>${match}</strong>`);
+
+  return result;
+});
+
+const getButtonIcon = (buttonType) => {
+  const buttonMapper = {
+    PHONE_NUMBER: "phone",
+    URL: "open_in_new",
+    COPY_CODE: "content_copy",
+    FLOW: "",
+    QUICK_REPLY: "reply",
+  };
+
+  return buttonMapper[buttonType] || "";
+};
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/scss/unnnic" as *;
+
+.unnnic-template-preview {
+  display: flex;
+  flex-direction: column;
+  box-shadow: $unnnic-shadow-level-near;
+  background-color: $unnnic-color-background-white;
+  width: 368px;
+  border-radius: $unnnic-border-radius-md;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-3;
+    padding: $unnnic-space-4 $unnnic-space-3;
+
+    &--has-media {
+      padding: $unnnic-space-1;
+    }
+  }
+
+  &__header {
+    &__text {
+      &__preview {
+        font-family: $unnnic-font-family-secondary;
+        font-weight: $unnnic-font-weight-bold;
+        font-size: $unnnic-font-size-body-gt;
+        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+        color: $unnnic-color-neutral-dark;
+
+        margin: $unnnic-space-0;
+      }
+    }
+
+    &__media {
+      &__preview {
+        width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &__body {
+    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-medium;
+    color: $unnnic-color-neutral-cloudy;
+
+    &--has-media {
+      padding: $unnnic-space-0 $unnnic-space-2;
+    }
+  }
+
+  &__footer {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-regular;
+    font-size: $unnnic-font-size-body-md;
+    line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
+    color: $unnnic-color-neutral-clean;
+
+    &--has-media {
+      padding: $unnnic-space-0 $unnnic-space-3 $unnnic-space-2;
+    }
+  }
+
+  &__buttons {
+    font-family: $unnnic-font-family-secondary;
+    font-weight: $unnnic-font-weight-bold;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+
+    &__button {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: $unnnic-space-2;
+      padding: $unnnic-space-3;
+      border-top: 1px solid $unnnic-color-neutral-light;
+
+      &__text {
+        color: $unnnic-color-aux-blue-500;
+        margin: $unnnic-space-0;
+      }
+    }
+  }
+}
+</style>

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -0,0 +1,51 @@
+<template>
+  <UnnnicModalDialog
+    :model-value="modelValue"
+    @update:modelValue="$event === false && $emit('close')"
+    :title="defaultTranslations.title[props.locale]"
+    :show-close-icon="true"
+    class="unnnic-template-preview-modal"
+  >
+    <UnnnicTemplatePreview :template="template" />
+  </UnnnicModalDialog>
+</template>
+
+<script lang="ts" setup>
+import UnnnicTemplatePreview from "./TemplatePreview.vue";
+import UnnnicModalDialog from "../ModalDialog/ModalDialog.vue";
+
+import type { Template } from "./types";
+
+const defaultTranslations = {
+  title: {
+    "pt-br": "Visualizar modelo",
+    en: "Template preview",
+    es: "Vista previa de plantilla",
+  },
+};
+
+interface Props {
+  locale?: string;
+  template: Template;
+  modelValue: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  locale: "en",
+});
+
+defineEmits<{
+  close: void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+@use "@/assets/scss/unnnic" as *;
+
+:deep(.unnnic-modal-dialog__container__content) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $unnnic-color-neutral-lightest;
+}
+</style>

package/src/components/TemplatePreview/types.d.ts

@@ -0,0 +1,16 @@
+export interface Template {
+  header: {
+    type: "TEXT" | "MEDIA";
+    mediaType?: "IMAGE" | "VIDEO" | "DOCUMENT";
+    text?: string | null;
+    src?: string | null;
+  };
+  body?: string;
+  footer?: string;
+  buttons?: Array<{
+    type: "QUICK_REPLY" | "PHONE_NUMBER";
+    text: string;
+    countryCode?: string;
+    phoneNumber?: string;
+  }>;
+}

package/src/components/index.ts

@@ -88,6 +88,9 @@ import ModalDialog from "./ModalDialog/ModalDialog.vue";
 import Tour from "./Tour/Tour.vue";
 import Navigator from "./Navigator/index.vue";
 import SelectTime from "./SelectTime/index.vue";
+import TemplatePreview from "./TemplatePreview/TemplatePreview.vue";
+import TemplatePreviewModal from "./TemplatePreview/TemplatePreviewModal.vue";
+import DataTable from './DataTable/index.vue';
 
 type VueComponent = Component;
 
@@ -186,6 +189,9 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
+  unnnicTemplatePreview: TemplatePreview,
+  unnnicTemplatePreviewModal: TemplatePreviewModal,
+  unnnicDataTable: DataTable,
 };
 
 export const unnnicFontSize = fontSize;
@@ -279,3 +285,6 @@ export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
 export const unnnicSelectTime = SelectTime as VueComponent;
+export const unnnicTemplatePreview = TemplatePreview as VueComponent;
+export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const unnnicDataTable = DataTable;

package/src/stories/DataTable.stories.js

@@ -0,0 +1,332 @@
+import UnnnicDataTable from '../components/DataTable/index.vue';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Data Display/DataTable',
+  component: UnnnicDataTable,
+  tags: ['autodocs'],
+  args: {
+    page: 1,
+  },
+  argTypes: {
+    headers: {
+      description:
+        'Array of header items defining the structure of the table header.',
+      control: 'object',
+    },
+    items: {
+      description: 'Array of row items defining the content of the table rows.',
+      control: 'object',
+    },
+    size: {
+      description:
+        'The size of the table. Options are `sm` for small and `md` for medium.',
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+    },
+    page: {
+      description: 'The current page number for pagination.',
+      control: 'number',
+    },
+    pageTotal: {
+      description: 'The total number of pages available for pagination.',
+      control: 'number',
+    },
+    pageInterval: {
+      description: 'The number of items displayed per page.',
+      control: 'number',
+    },
+    isLoading: {
+      description: 'Indicates whether the table data is loading.',
+      control: 'boolean',
+    },
+    hideHeaders: {
+      description: 'Determines if the table headers should be hidden.',
+      control: 'boolean',
+    },
+    height: {
+      description: 'The height of the table.',
+      control: 'text',
+    },
+    maxHeight: {
+      description: 'The maximum height of the table.',
+      control: 'text',
+    },
+    clickable: {
+      description: 'Indicates whether the table rows should be clickable.',
+      control: 'boolean',
+    },
+    fixedHeaders: {
+      description:
+        'Indicates whether the table headers should be fixed in scroll.',
+      control: 'boolean',
+    },
+    hidePagination: {
+      description: 'Indicates whether the pagination should be hidden.',
+      control: 'boolean',
+    },
+    locale: {
+      description: 'The locale for the table translations.',
+      control: { type: 'select' },
+      options: ['en', 'pt-br', 'es'],
+    },
+  },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+const headers = [
+  {
+    title: 'ID',
+    itemKey: 'id',
+    isSortable: true,
+  },
+  {
+    title: 'Name',
+    itemKey: 'name',
+  },
+  {
+    title: 'Age',
+    itemKey: 'age',
+  },
+  {
+    title: 'Country',
+    itemKey: 'country',
+  },
+];
+
+const items = [
+  {
+    id: '1',
+    name: 'Eduardo',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '2',
+    name: 'Marcus',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '3',
+    name: 'Paulo',
+    age: 29,
+    country: 'Brazil',
+  },
+  {
+    id: '4',
+    name: 'Cristian',
+    age: 27,
+    country: 'Brazil',
+  },
+  {
+    id: '5',
+    name: 'Aldemylla',
+    age: 27,
+    country: 'Brazil',
+  },
+];
+
+export const Default = {
+  args: {
+    headers,
+    items,
+  },
+};
+
+export const Clickable = {
+  args: {
+    headers,
+    items,
+    clickable: true,
+  },
+};
+
+export const WithHeightLimit = {
+  args: {
+    headers,
+    items,
+    height: '165px',
+  },
+};
+
+export const FixedHeaders = {
+  args: {
+    headers,
+    items,
+    fixedHeaders: true,
+    height: '165px',
+  },
+};
+
+export const Medium = {
+  args: {
+    headers,
+    items,
+    size: 'md',
+  },
+};
+
+export const Small = {
+  args: {
+    headers,
+    items,
+    size: 'sm',
+  },
+};
+
+export const HideHeaders = {
+  args: {
+    headers,
+    items,
+    hideHeaders: true,
+  },
+};
+
+export const SlotHeader = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+      <template #header-name="{ header }">
+        <button>
+          {{ header.title }}
+        </button>
+      </template>
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const SlotItem = {
+  args: { headers, items },
+  render: (args) => ({
+    components: {
+      UnnnicDataTable,
+    },
+    setup() {
+      const sort = ({ order, header }) => {
+        action('update:sort')({ order, header });
+        if (order === 'asc')
+          args.items = args.items.sort((a, b) => a.id - b.id);
+        if (order === 'desc')
+          args.items = args.items.sort((a, b) => b.id - a.id);
+      };
+      const updatePage = (page) => {
+        action('update:page')(page);
+        args.page = page;
+      };
+      const itemClick = (item) => {
+        action('itemClick')(item);
+      };
+
+      return { args, sort, updatePage, itemClick };
+    },
+    template: `
+    <UnnnicDataTable
+      v-bind="args"
+      :headers="args.headers"
+      :items="args.items"
+      :pageTotal="125"
+      :pageInterval="5"
+      @update:sort="sort"
+      @update:page="updatePage"
+      @itemClick="itemClick"
+    >
+      <template #body-id="{ item }">
+        <button>
+          {{ item.id }}
+        </button>
+      </template>
+    </UnnnicDataTable>
+    `,
+  }),
+};
+
+export const HidePagination = {
+  args: {
+    headers,
+    items,
+    hidePagination: true,
+  },
+};
+
+export const WithoutResults = {
+  args: {
+    headers,
+    items: [],
+  },
+};
+
+export const Loading = {
+  args: {
+    headers,
+    items,
+    isLoading: true,
+  },
+};