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

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -1,249 +0,0 @@
-<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

@@ -1,51 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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/stories/DataTable.stories.js

@@ -1,332 +0,0 @@
-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,
-  },
-};