@weni/unnnic-system 3.14.0-alpha-teleports.0 → 3.15.0

package/src/stories/ModalDialog.stories.js

@@ -1,16 +1,13 @@
 import UnnnicModalDialog from '../components/ModalDialog/ModalDialog.vue';
 import UnnnicInput from '../components/Input/Input.vue';
 import UnnnicLabel from '../components/Label/Label.vue';
-import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
-import UnnnicSwitch from '../components/Switch/Switch.vue';
-import UnnnicButton from '../components/Button/Button.vue';
 
 import { action } from '@storybook/addon-actions';
 import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Feedback/ModalDialog',
+  title: 'Example/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {
@@ -185,85 +182,6 @@ const TemplateLeftSidebar = (args) => ({
   },
 });
 
-const TemplateWithDatePicker = (args) => ({
-  components: {
-    UnnnicModalDialog,
-    UnnnicInputDatePicker,
-    UnnnicSwitch,
-    UnnnicButton,
-  },
-  setup() {
-    const updateModelValue = (value) => {
-      action('update:modelValue')(value);
-      args.modelValue = value;
-    };
-    return { args, updateModelValue };
-  },
-  data() {
-    return {
-      forms: [{ date: { start: null, end: null }, repeat: false }],
-      isLoading: false,
-    };
-  },
-  template: `
-  <div>
-    <button @click="updateModelValue(true)">Open Modal with DatePicker</button>
-    <unnnic-modal-dialog 
-      v-bind="args" 
-      @primaryButtonClick="handleSave" 
-      @secondaryButtonClick="secondaryButtonClick" 
-      @update:modelValue="updateModelValue"
-    >
-      <section style="display: flex; flex-direction: column; gap: 16px;">
-        <section 
-          v-for="(form, index) in forms"
-          :key="index"
-          style="display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #E2E6ED; border-radius: 8px;"
-        >
-          <section style="display: flex; flex-direction: column; gap: 8px;">
-            <p style="font-family: 'Lato'; font-size: 14px; font-weight: 600; margin: 0; color: #3B414D;">
-              Select date or period
-            </p>
-            <UnnnicInputDatePicker
-              v-model="form.date"
-              :options="[{ id: 'custom', name: 'Custom' }]"
-              next
-              fillW
-              actionText="Confirm"
-              disableClear
-            />
-          </section>
-          <UnnnicSwitch
-            v-model="form.repeat"
-            textRight="Repeat annually"
-            size="small"
-          />
-        </section>
-        <UnnnicButton
-          iconCenter="add-1"
-          type="tertiary"
-          text="Add"
-          @click="addForm"
-        />
-      </section>
-    </unnnic-modal-dialog>
-  </div>
-  `,
-  methods: {
-    primaryButtonClick: action('primaryButtonClick'),
-    secondaryButtonClick: action('secondaryButtonClick'),
-    handleSave() {
-      action('primaryButtonClick')();
-      action('save')(this.forms);
-      console.log('Forms data:', this.forms);
-    },
-    addForm() {
-      this.forms.push({ date: { start: null, end: null }, repeat: false });
-      action('addForm')();
-    },
-  },
-});
-
 export const Default = Template.bind({});
 Default.args = {
   title: 'Default Modal',
@@ -343,16 +261,3 @@ Image.args = {
   },
   showActionsDivider: true,
 };
-
-export const WithDatePicker = TemplateWithDatePicker.bind({});
-WithDatePicker.args = {
-  title: 'Add Non-Working Dates',
-  type: '',
-  primaryButtonProps: {
-    text: 'Save',
-    loading: false,
-  },
-  secondaryButtonProps: {
-    text: 'Cancel',
-  },
-};

package/src/stories/Select.stories.js

@@ -82,6 +82,18 @@ export default {
     disabled: {
       description: 'Disable the select.',
     },
+    infiniteScroll: {
+      description:
+        'Enable infinite scroll functionality. When enabled, the component will emit a `scroll-end` event when the user scrolls near the bottom of the options list.',
+    },
+    infiniteScrollDistance: {
+      description:
+        'Distance in pixels from the bottom of the scroll area to trigger the `scroll-end` event. Default is 10.',
+    },
+    infiniteScrollCanLoadMore: {
+      description:
+        'Function that returns a boolean indicating whether more items can be loaded. Used to prevent unnecessary scroll-end events.',
+    },
   },
   render: (args) => ({
     components: { UnnnicSelect },
@@ -159,3 +171,77 @@ export const WithSearch = {
     search: '',
   },
 };
+
+export const WithInfiniteScroll = {
+  render: () => ({
+    components: { UnnnicSelect },
+    data() {
+      return {
+        selectedValue: null,
+        loadedOptions: [],
+        currentPage: 1,
+        totalPages: 10,
+        isLoading: false,
+      };
+    },
+    mounted() {
+      this.loadInitialOptions();
+    },
+    methods: {
+      loadInitialOptions() {
+        this.loadedOptions = this.generateOptions(1);
+      },
+      generateOptions(page) {
+        const startIndex = (page - 1) * 10 + 1;
+        return Array.from({ length: 10 }, (_, i) => ({
+          label: `Option ${startIndex + i}`,
+          value: `option${startIndex + i}`,
+        }));
+      },
+      async handleScrollEnd() {
+        if (this.currentPage >= this.totalPages || this.isLoading) {
+          return;
+        }
+
+        this.isLoading = true;
+
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        this.currentPage++;
+        const newOptions = this.generateOptions(this.currentPage);
+        this.loadedOptions = [...this.loadedOptions, ...newOptions];
+
+        this.isLoading = false;
+
+        this.$refs.selectRef.finishInfiniteScroll();
+      },
+      canLoadMore() {
+        return this.currentPage < this.totalPages && !this.isLoading;
+      },
+    },
+    template: `
+      <div style="width: 300px;">
+        <h3>Infinite Scroll Example</h3>
+        <p style="color: #666; font-size: 14px;">
+          Scroll down in the options list to load more items.
+          <br />
+          Page: {{ currentPage }} / {{ totalPages }}
+          <br />
+          Total options: {{ loadedOptions.length }}
+        </p>
+        <p>Selected: {{ selectedValue }}</p>
+        <unnnic-select
+          ref="selectRef"
+          v-model="selectedValue"
+          :options="loadedOptions"
+          placeholder="Select an option"
+          label="Infinite Scroll Select"
+          :infinite-scroll="true"
+          :infinite-scroll-distance="10"
+          :infinite-scroll-can-load-more="canLoadMore"
+          @scroll-end="handleScrollEnd"
+        />
+      </div>
+    `,
+  }),
+};

package/src/stories/TemplatePreview.stories.js

@@ -1,8 +1,8 @@
-import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
+import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
 
 export default {
-  title: "example/TemplatePreview",
-  tags: ["autodocs"],
+  title: 'example/TemplatePreview',
+  tags: ['autodocs'],
   component: UnnnicTemplatePreview,
 };
 
@@ -17,28 +17,28 @@ const Template = (args) => ({
 });
 
 const bodyText =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
 
 export const Default = Template.bind({});
 Default.args = {
   template: {
     header: {
-      type: "TEXT",
-      text: "Hello, world!",
+      type: 'TEXT',
+      text: 'Hello, world!',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
     body: bodyText,
@@ -49,10 +49,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "IMAGE",
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };
@@ -61,21 +61,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "VIDEO",
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
     },
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
   },
@@ -85,10 +85,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "DOCUMENT",
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };

package/src/stories/TemplatePreviewModal.stories.js

@@ -1,15 +1,15 @@
-import UnnnicTemplatePreviewModal from "../components/TemplatePreview/TemplatePreviewModal.vue";
+import UnnnicTemplatePreviewModal from '../components/TemplatePreview/TemplatePreviewModal.vue';
 
-import { action } from "@storybook/addon-actions";
+import { action } from '@storybook/addon-actions';
 
 export default {
-  title: "example/TemplatePreviewModal",
-  tags: ["autodocs"],
+  title: 'example/TemplatePreviewModal',
+  tags: ['autodocs'],
   component: UnnnicTemplatePreviewModal,
   argTypes: {
     locale: {
-      control: { type: "select" },
-      options: ["pt-br", "en", "es"],
+      control: { type: 'select' },
+      options: ['pt-br', 'en', 'es'],
     },
   },
 };
@@ -18,7 +18,7 @@ const Template = (args) => ({
   components: { UnnnicTemplatePreviewModal },
   setup() {
     const close = () => {
-      action("close")();
+      action('close')();
       args.modelValue = false;
     };
     return { args, close };
@@ -32,29 +32,29 @@ const Template = (args) => ({
 });
 
 const bodyText =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
 
 export const Default = Template.bind({});
 Default.args = {
   modelValue: false,
   template: {
     header: {
-      type: "TEXT",
-      text: "Hello, world!",
+      type: 'TEXT',
+      text: 'Hello, world!',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
     body: bodyText,
@@ -65,10 +65,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "IMAGE",
+      type: 'MEDIA',
+      mediaType: 'IMAGE',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };
@@ -77,21 +77,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "VIDEO",
+      type: 'MEDIA',
+      mediaType: 'VIDEO',
     },
     buttons: [
       {
-        text: "Button 1",
-        type: "PHONE_NUMBER",
+        text: 'Button 1',
+        type: 'PHONE_NUMBER',
       },
       {
-        text: "Button 2",
-        type: "URL",
+        text: 'Button 2',
+        type: 'URL',
       },
       {
-        text: "Button 3",
-        type: "QUICK_REPLY",
+        text: 'Button 3',
+        type: 'QUICK_REPLY',
       },
     ],
   },
@@ -101,10 +101,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: "MEDIA",
-      mediaType: "DOCUMENT",
+      type: 'MEDIA',
+      mediaType: 'DOCUMENT',
     },
-    footer: "Weni by VTEX",
+    footer: 'Weni by VTEX',
     body: bodyText,
   },
 };

package/src/components/ui/dialog/Dialog.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
-import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicDialog',
-});
-
-const props = defineProps<DialogRootProps>();
-const emits = defineEmits<DialogRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
-</template>

package/src/components/ui/dialog/DialogClose.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from 'reka-ui';
-import { DialogClose } from 'reka-ui';
-
-defineOptions({
-  name: 'UnnnicDialogClose',
-});
-
-const props = withDefaults(defineProps<DialogCloseProps>(), {
-  asChild: true,
-});
-</script>
-
-<template>
-  <DialogClose
-    class="unnnic-dialog-close"
-    v-bind="props"
-  >
-    <slot />
-  </DialogClose>
-</template>
-
-<style lang="scss" scoped>
-.unnnic-dialog-close {
-  > * {
-    width: 100%;
-  }
-}
-</style>

package/src/components/ui/dialog/DialogContent.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
-import type { HTMLAttributes, Component } from 'vue';
-import { computed, h } from 'vue';
-import { reactiveOmit } from '@vueuse/core';
-import {
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from 'reka-ui';
-import { cn } from '@/lib/utils';
-import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
-
-defineOptions({
-  name: 'UnnnicDialogContent',
-});
-
-const props = withDefaults(
-  defineProps<
-    DialogContentProps & {
-      parentClass?: HTMLAttributes['class'];
-      class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
-    }
-  >(),
-  {
-    size: 'medium',
-    parentClass: '', // This class should be temporary, to be discontinued with the ModalDialog component
-    class: '',
-  },
-);
-const emits = defineEmits<DialogContentEmits>();
-
-const delegatedProps = reactiveOmit(props, 'class', 'parentClass');
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
-
-const overlayZIndex = useLayerZIndex({ offset: -2 });
-const modalZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
-
-const contentClasses = computed(() =>
-  cn(
-    'unnnic-dialog-content',
-    `unnnic-dialog-content--size-${props.size}`,
-    'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-    props.class,
-  ),
-);
-
-// This component is used to wrap the DialogContent component in a section if the parentClass is provided
-// This is a temporary solution, to be discontinued with the ModalDialog component
-const ConditionalWrapper: Component = (_, { slots }) => {
-  const content = slots.default?.();
-  return props.parentClass
-    ? h('section', { class: props.parentClass }, content)
-    : content;
-};
-</script>
-
-<template>
-  <DialogPortal :to="portalTarget">
-    <DialogOverlay
-      class="unnnic-dialog-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-      :style="{ zIndex: overlayZIndex }"
-    />
-
-    <ConditionalWrapper>
-      <DialogContent
-        v-bind="forwarded"
-        :class="contentClasses"
-        :style="{ zIndex: modalZIndex }"
-      >
-        <slot />
-      </DialogContent>
-    </ConditionalWrapper>
-  </DialogPortal>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-
-  width: 100vw;
-  height: 100vh;
-  background: rgba(53, 57, 69, 0.5);
-}
-
-.unnnic-dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-
-  transform: translate(-50%, -50%);
-
-  width: 100%;
-  max-height: calc(100% - $unnnic-space-20);
-
-  display: flex;
-  flex-direction: column;
-
-  box-shadow: $unnnic-shadow-2;
-  border-radius: $unnnic-radius-4;
-  background-color: $unnnic-color-bg-base;
-
-  &--size-small {
-    max-width: 360px;
-  }
-
-  &--size-medium {
-    max-width: 560px;
-  }
-
-  &--size-large {
-    max-width: 800px;
-  }
-
-  > * {
-    &::-webkit-scrollbar {
-      width: $unnnic-spacing-inline-nano;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-neutral-cleanest;
-      border-radius: $unnnic-border-radius-pill;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $unnnic-color-neutral-soft;
-      border-radius: $unnnic-border-radius-pill;
-    }
-  }
-}
-</style>

package/src/components/ui/dialog/DialogFooter.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { cn } from '@/lib/utils';
-
-defineOptions({
-  name: 'UnnnicDialogFooter',
-});
-
-const props = withDefaults(
-  defineProps<{ class?: HTMLAttributes['class']; divider?: boolean }>(),
-  {
-    divider: true,
-  },
-);
-</script>
-
-<template>
-  <footer
-    :class="
-      cn(
-        'unnnic-dialog-footer',
-        { 'unnnic-dialog-footer--with-divider': props.divider },
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-dialog-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: $unnnic-space-2;
-
-  padding: $unnnic-space-6;
-
-  &--with-divider {
-    border-top: 1px solid $unnnic-color-border-soft;
-  }
-
-  > * {
-    width: 100%;
-  }
-}
-</style>