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

package/src/components/index.ts

@@ -112,20 +112,6 @@ import {
   SegmentedControlContent,
 } from './ui/segmented-control';
 import PageHeader from './PageHeader/PageHeader.vue';
-import Dialog from './ui/dialog/Dialog.vue';
-import DialogContent from './ui/dialog/DialogContent.vue';
-import DialogFooter from './ui/dialog/DialogFooter.vue';
-import DialogHeader from './ui/dialog/DialogHeader.vue';
-import DialogTitle from './ui/dialog/DialogTitle.vue';
-import DialogTrigger from './ui/dialog/DialogTrigger.vue';
-import DialogClose from './ui/dialog/DialogClose.vue';
-import DrawerNext from './ui/drawer/Drawer.vue';
-import DrawerContent from './ui/drawer/DrawerContent.vue';
-import DrawerHeader from './ui/drawer/DrawerHeader.vue';
-import DrawerFooter from './ui/drawer/DrawerFooter.vue';
-import DrawerClose from './ui/drawer/DrawerClose.vue';
-import DrawerTitle from './ui/drawer/DrawerTitle.vue';
-import DrawerDescription from './ui/drawer/DrawerDescription.vue';
 
 type VueComponent = Component;
 
@@ -246,20 +232,6 @@ export const components: ComponentsMap = {
   unnnicSegmentedControlTrigger: SegmentedControlTrigger,
   unnnicSegmentedControlContent: SegmentedControlContent,
   unnnicPageHeader: PageHeader,
-  unnnicDialog: Dialog,
-  unnnicDialogContent: DialogContent,
-  unnnicDialogFooter: DialogFooter,
-  unnnicDialogHeader: DialogHeader,
-  unnnicDialogTitle: DialogTitle,
-  unnnicDialogTrigger: DialogTrigger,
-  unnnicDialogClose: DialogClose,
-  unnnicDrawerNext: DrawerNext,
-  unnnicDrawerContent: DrawerContent,
-  unnnicDrawerHeader: DrawerHeader,
-  unnnicDrawerFooter: DrawerFooter,
-  unnnicDrawerClose: DrawerClose,
-  unnnicDrawerTitle: DrawerTitle,
-  unnnicDrawerDescription: DrawerDescription,
 };
 
 export const unnnicFontSize = fontSize;
@@ -375,20 +347,6 @@ export const unnnicSegmentedControlList = SegmentedControlList;
 export const unnnicSegmentedControlTrigger = SegmentedControlTrigger;
 export const unnnicSegmentedControlContent = SegmentedControlContent;
 export const unnnicPageHeader = PageHeader;
-export const unnnicDialog = Dialog;
-export const unnnicDialogContent = DialogContent;
-export const unnnicDialogFooter = DialogFooter;
-export const unnnicDialogHeader = DialogHeader;
-export const unnnicDialogTitle = DialogTitle;
-export const unnnicDialogTrigger = DialogTrigger;
-export const unnnicDialogClose = DialogClose;
-export const unnnicDrawerNext = DrawerNext;
-export const unnnicDrawerContent = DrawerContent;
-export const unnnicDrawerHeader = DrawerHeader;
-export const unnnicDrawerFooter = DrawerFooter;
-export const unnnicDrawerClose = DrawerClose;
-export const unnnicDrawerTitle = DrawerTitle;
-export const unnnicDrawerDescription = DrawerDescription;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -503,17 +461,3 @@ export const UnnnicSegmentedControlList = SegmentedControlList;
 export const UnnnicSegmentedControlTrigger = SegmentedControlTrigger;
 export const UnnnicSegmentedControlContent = SegmentedControlContent;
 export const UnnnicPageHeader = PageHeader;
-export const UnnnicDialog = Dialog;
-export const UnnnicDialogContent = DialogContent;
-export const UnnnicDialogFooter = DialogFooter;
-export const UnnnicDialogHeader = DialogHeader;
-export const UnnnicDialogTitle = DialogTitle;
-export const UnnnicDialogTrigger = DialogTrigger;
-export const UnnnicDialogClose = DialogClose;
-export const UnnnicDrawerNext = DrawerNext;
-export const UnnnicDrawerContent = DrawerContent;
-export const UnnnicDrawerHeader = DrawerHeader;
-export const UnnnicDrawerFooter = DrawerFooter;
-export const UnnnicDrawerClose = DrawerClose;
-export const UnnnicDrawerTitle = DrawerTitle;
-export const UnnnicDrawerDescription = DrawerDescription;

package/src/components/ui/popover/PopoverContent.vue

@@ -1,8 +1,8 @@
 <template>
-  <PopoverPortal :to="portalTarget">
+  <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
-      :style="{ width: contentWidth, zIndex: popoverZIndex }"
+      :style="{ width: contentWidth }"
       :class="
         cn(
           'unnnic-popover',
@@ -34,8 +34,6 @@ import { computed, useSlots } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/lib/utils';
-import { useLayerZIndex } from '@/lib/layer-manager';
-import { useTeleportTarget } from '@/lib/teleport-target';
 
 defineOptions({
   inheritAttrs: false,
@@ -65,9 +63,6 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const slots = useSlots() as Slots;
 
-const popoverZIndex = useLayerZIndex();
-const portalTarget = useTeleportTarget();
-
 const getComponentName = (vnode: VNode): string | undefined => {
   const componentType = vnode.type as { name?: string; __name?: string };
   return componentType?.name || componentType?.__name;
@@ -106,6 +101,8 @@ const contentWidth = computed(() => {
 $popover-space: $unnnic-space-4;
 
 .unnnic-popover {
+  z-index: 10000;
+
   border-radius: $unnnic-radius-2;
   box-shadow: $unnnic-shadow-1;
   border: 1px solid $unnnic-color-border-soft;

package/src/components/ui/popover/PopoverTrigger.vue

@@ -14,14 +14,10 @@ const props = defineProps<PopoverTriggerProps>();
   </PopoverTrigger>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .unnnic-popover-trigger {
   border: none;
   background: transparent;
   padding: 0;
-
-  & > * {
-    width: 100%;
-  }
 }
 </style>

package/src/index.ts

@@ -1,21 +1,14 @@
 import type { App } from 'vue';
 import { components } from '@/components';
 import './assets/scss/tailwind.scss';
-import { setTeleportTarget, type TeleportTarget } from '@/lib/teleport-target';
 
 interface UnnnicPlugin {
-  install(app: App, options?: UnnnicPluginOptions): void;
+  install(app: App): void;
   [key: string]: any;
 }
 
-export interface UnnnicPluginOptions {
-  teleportTarget?: TeleportTarget | null;
-}
-
 const Unnnic: UnnnicPlugin = {
-  install(app: App, options?: UnnnicPluginOptions) {
-    setTeleportTarget(options?.teleportTarget ?? null);
-
+  install(app: App) {
     Object.keys(components).forEach((name) => {
       app.component(name, components[name] as any);
     });

package/src/stories/Drawer.stories.js

@@ -14,7 +14,7 @@ const primaryButtonTypeOptions = [
 ];
 
 export default {
-  title: 'Misc/Drawer',
+  title: 'Example/Drawer',
   component: UnnnicDrawer,
   argTypes: {
     title: { control: { type: 'text' } },

package/src/stories/ModalDialog.mdx

@@ -6,9 +6,6 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
-> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
-instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
-
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

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/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>