@weni/unnnic-system 3.2.5-alpha.0 → 3.2.5

package/src/components/index.ts

@@ -88,9 +88,8 @@ 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';
+import DataTable from "./DataTable/index.vue";
+import Chip from "./Chip/Chip.vue";
 
 type VueComponent = Component;
 
@@ -189,9 +188,8 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
-  unnnicTemplatePreview: TemplatePreview,
-  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
+  unnnicChip: Chip,
 };
 
 export const unnnicFontSize = fontSize;
@@ -284,10 +282,9 @@ export const unnnicDrawer = Drawer;
 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 as VueComponent;
+export const unnnicSelectTime = SelectTime as VueComponent;
+export const unnnicChip = Chip;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -379,8 +376,6 @@ export const UnnnicDrawer = Drawer;
 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 as VueComponent;
-
+export const UnnnicSelectTime = SelectTime as VueComponent;
+export const UnnnicChip = Chip;

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
+          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -40,6 +40,7 @@ export default {
         'primary',
         'secondary',
         'tertiary',
+        'alternative',
         'warning',
         'attention',
       ],
@@ -113,6 +114,14 @@ export const OnlyIcon = {
   },
 };
 
+export const Alternative = {
+  args: {
+    type: 'alternative',
+    iconLeft: 'add',
+    text: 'Text',
+  },
+};
+
 export const Warning = {
   parameters: {
     docs: {

package/src/stories/Chip.stories.js

@@ -0,0 +1,173 @@
+import UnnnicChip from '../components/Chip/Chip.vue';
+
+export default {
+  title: 'Data Display/Chip',
+  component: UnnnicChip,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `A simplified compact element used for selection and filtering. 
+        Chips are commonly used to display tags, filters, or selectable options 
+        with automatic styling based on selection state. They provide a clean 
+        and organized way to show multiple related items with clear visual feedback.`,
+      },
+    },
+  },
+  args: {
+    text: 'Chip Text',
+    type: 'single',
+    isSelected: false,
+    count: null,
+    isClickable: false,
+  },
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['single', 'multiple'],
+      description: 'The type of chip - single for basic display, multiple for selection with icons',
+    },
+    text: {
+      control: { type: 'text' },
+      description: 'The text content displayed in the chip',
+    },
+    isSelected: {
+      control: { type: 'boolean' },
+      description: 'Whether the chip is in selected state (affects styling and icons)',
+    },
+    count: {
+      control: { type: 'number' },
+      description: 'Optional count number displayed in the chip',
+    },
+    isClickable: {
+      control: { type: 'boolean' },
+      description: 'Whether the chip should show clickable styling (cursor pointer)',
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    text: 'Default Chip',
+    type: 'single',
+  },
+};
+
+export const Selected = {
+  args: {
+    text: 'Selected Chip',
+    type: 'single',
+    isSelected: true,
+  },
+};
+
+export const WithCount = {
+  args: {
+    text: 'Messages',
+    type: 'single',
+    count: 5,
+  },
+};
+
+export const WithCountSelected = {
+  args: {
+    text: 'Selected Messages',
+    type: 'single',
+    count: 12,
+    isSelected: true,
+  },
+};
+
+export const MultipleType = {
+  args: {
+    text: 'Multiple Chip',
+    type: 'multiple',
+    isSelected: false,
+  },
+};
+
+export const MultipleSelected = {
+  args: {
+    text: 'Selected Multiple',
+    type: 'multiple',
+    isSelected: true,
+  },
+};
+
+export const MultipleWithCount = {
+  args: {
+    text: 'Items',
+    type: 'multiple',
+    count: 8,
+    isSelected: false,
+  },
+};
+
+export const MultipleWithCountSelected = {
+  args: {
+    text: 'Selected Items',
+    type: 'multiple',
+    count: 15,
+    isSelected: true,
+  },
+};
+
+export const LongText = {
+  args: {
+    text: 'This is a chip with longer text content',
+    type: 'single',
+  },
+};
+
+export const LongTextSelected = {
+  args: {
+    text: 'This is a selected chip with longer text',
+    type: 'single',
+    isSelected: true,
+  },
+};
+
+export const Clickable = {
+  args: {
+    text: 'Clickable Chip',
+    type: 'single',
+    isClickable: true,
+  },
+};
+
+export const ClickableSelected = {
+  args: {
+    text: 'Clickable Selected',
+    type: 'multiple',
+    isSelected: true,
+    isClickable: true,
+  },
+};
+
+// Interactive example showing state changes
+export const Interactive = {
+  args: {
+    text: 'Click to toggle',
+    type: 'multiple',
+    count: 3,
+    isClickable: true,
+  },
+  render: (args) => ({
+    components: { UnnnicChip },
+    data() {
+      return {
+        selected: args.isSelected || false,
+      };
+    },
+    template: `
+      <UnnnicChip 
+        :text="'${args.text}'"
+        :type="'${args.type}'"
+        :count="${args.count}"
+        :isSelected="selected"
+        :isClickable="true"
+        @click="selected = !selected"
+      />
+    `,
+  }),
+};

package/src/types/scheme-colors.d.ts

@@ -0,0 +1,102 @@
+export type SchemeColor = 
+  | 'background-solo'
+  | 'background-sky'
+  | 'background-grass'
+  | 'background-carpet'
+  | 'background-snow'
+  | 'background-lightest'
+  | 'background-white'
+  | 'neutral-black'
+  | 'neutral-darkest'
+  | 'neutral-dark'
+  | 'neutral-cloudy'
+  | 'neutral-cleanest'
+  | 'neutral-clean'
+  | 'neutral-soft'
+  | 'neutral-lightest'
+  | 'neutral-light'
+  | 'neutral-white'
+  | 'neutral-snow'
+  | 'feedback-red'
+  | 'feedback-green'
+  | 'feedback-yellow'
+  | 'feedback-blue'
+  | 'feedback-grey'
+  | 'aux-blue'
+  | 'aux-purple'
+  | 'aux-orange'
+  | 'aux-lemon'
+  | 'aux-pink'
+  | 'aux-baby-blue'
+  | 'aux-baby-yellow'
+  | 'aux-baby-red'
+  | 'aux-baby-green'
+  | 'aux-baby-pink'
+  | 'aux-green-100'
+  | 'aux-green-300'
+  | 'aux-green-500'
+  | 'aux-green-700'
+  | 'aux-green-900'
+  | 'aux-blue-100'
+  | 'aux-blue-300'
+  | 'aux-blue-500'
+  | 'aux-blue-700'
+  | 'aux-blue-900'
+  | 'aux-purple-100'
+  | 'aux-purple-300'
+  | 'aux-purple-500'
+  | 'aux-purple-700'
+  | 'aux-purple-900'
+  | 'aux-red-100'
+  | 'aux-red-300'
+  | 'aux-red-500'
+  | 'aux-red-700'
+  | 'aux-red-900'
+  | 'aux-orange-100'
+  | 'aux-orange-300'
+  | 'aux-orange-500'
+  | 'aux-orange-700'
+  | 'aux-orange-900'
+  | 'aux-yellow-100'
+  | 'aux-yellow-300'
+  | 'aux-yellow-500'
+  | 'aux-yellow-700'
+  | 'aux-yellow-900'
+  | 'floweditor-blue'
+  | 'floweditor-purple'
+  | 'floweditor-wine'
+  | 'floweditor-orange'
+  | 'floweditor-pink'
+  | 'floweditor-turquoise'
+  | 'floweditor-green'
+  | 'weni-50'
+  | 'weni-100'
+  | 'weni-200'
+  | 'weni-300'
+  | 'weni-400'
+  | 'weni-500'
+  | 'weni-600'
+  | 'weni-700'
+  | 'weni-800'
+  | 'weni-900'
+  | 'weni-950'
+  | 'brand-weni'
+  | 'brand-weni-dark'
+  | 'brand-weni-soft'
+  | 'brand-sec-dark'
+  | 'brand-sec-soft'
+  | 'brand-sec'
+  | 'bg-base'
+  | 'bg-soft'
+  | 'teal-50'
+  | 'teal-100'
+  | 'teal-200'
+  | 'teal-300'
+  | 'teal-400'
+  | 'teal-500'
+  | 'teal-600'
+  | 'teal-700'
+  | 'teal-800'
+  | 'teal-900'
+  | 'teal-950';
+  

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts

@@ -1,9 +0,0 @@
-import { Template } from './types';
-interface Props {
-    template?: Template | null;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    template: Template | null;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
-export default _default;
-//# sourceMappingURL=TemplatePreview.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreview.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreview.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreview.vue"],"names":[],"mappings":"AAgGA;AA6PA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQxC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B;;cADY,QAAQ,GAAG,IAAI;;AAkN5B,wBAQG"}

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts

@@ -1,15 +0,0 @@
-import { Template } from './types';
-interface Props {
-    locale?: string;
-    template: Template;
-    modelValue: boolean;
-}
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => any;
-}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-}>, {
-    locale: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=TemplatePreviewModal.vue.d.ts.map

package/dist/components/TemplatePreview/TemplatePreviewModal.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TemplatePreviewModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/TemplatePreview/TemplatePreviewModal.vue"],"names":[],"mappings":"AAWA;AAwDA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUxC,UAAU,KAAK;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB;;;;;;YAHU,MAAM;;AAgGjB,wBASG"}

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>