@weni/unnnic-system 3.2.7 → 3.2.9-alpha.0

package/src/components/Toast/ToastManager.ts

@@ -0,0 +1,110 @@
+import { createApp } from 'vue';
+import Toast from './Toast.vue';
+import type {
+  ToastProps,
+  ToastInstance,
+  ToastOptions,
+  ToastCall,
+} from './types';
+
+class ToastManager implements ToastManager {
+  private toasts: Map<string, ToastInstance> = new Map();
+  private container: HTMLElement | null = null;
+  private nextId = 0;
+
+  private createContainer(): HTMLElement {
+    if (this.container) {
+      return this.container;
+    }
+
+    this.container = document.createElement('div');
+    this.container.setAttribute('unnnic-toast-container', 'true');
+
+    document.body.appendChild(this.container);
+    return this.container;
+  }
+
+  private generateId(): string {
+    return `toast-${++this.nextId}`;
+  }
+
+  show(props: ToastProps): ToastInstance {
+    const id = this.generateId();
+    const container = this.createContainer();
+
+    const toastWrapper = document.createElement('div');
+
+    // Create promise that resolves when toast is destroyed
+    let resolvePromise: () => void;
+    const promise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    const app = createApp(Toast, {
+      ...props,
+      onClose: () => {
+        this.close(id);
+      },
+      onDestroy: () => {
+        app.unmount();
+        toastWrapper.remove();
+        resolvePromise(); // Resolve the promise when toast is destroyed
+      },
+    });
+
+    app.mount(toastWrapper);
+    container.appendChild(toastWrapper);
+
+    const toastInstance: ToastInstance = {
+      id,
+      props,
+      close: () => this.close(id),
+      promise,
+    };
+
+    this.toasts.set(id, toastInstance);
+    return toastInstance;
+  }
+
+  close(id: string): void {
+    const toast = this.toasts.get(id);
+    if (toast) {
+      this.toasts.delete(id);
+    }
+  }
+}
+
+const toastManager = new ToastManager();
+
+export const toast: ToastCall = {
+  info: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'informational',
+    }).promise,
+  success: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'success',
+    }).promise,
+  attention: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'attention',
+    }).promise,
+  error: (title: string, description?: string, options?: ToastOptions) =>
+    toastManager.show({
+      title,
+      description,
+      ...options,
+      type: 'error',
+    }).promise,
+};
+
+export default toastManager;

package/src/components/Toast/types.ts

@@ -0,0 +1,57 @@
+export interface ToastManager {
+  show: (props: ToastProps) => ToastInstance;
+  close: (id: string) => void;
+}
+
+export interface ToastButton {
+  text: string;
+  action: () => void;
+}
+
+export type ToastType = 'informational' | 'attention' | 'success' | 'error';
+
+export interface ToastProps extends ToastOptions {
+  title: string;
+  description?: string;
+}
+
+export interface ToastOptions {
+  type?: ToastType;
+  button?: ToastButton;
+  timeout?: number;
+}
+
+export interface ToastEmits {
+  close: [];
+  destroy: [];
+}
+
+export interface ToastInstance {
+  id: string;
+  props: ToastProps;
+  close: () => void;
+  promise: Promise<void>;
+}
+
+export interface ToastCall {
+  info: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+  success: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+  attention: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+  error: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+}

package/src/components/Tour/TourPopover.vue

@@ -128,7 +128,7 @@ export default {
         left: attachedTop - popoverHeight / 2 + attachedHeight / 2,
       };
 
-      let style = {
+      const style = {
         transform: `translate(${translateXMap[step.popoverPosition]}px, ${translateYMap[step.popoverPosition]}px)`,
         transition: 'transform .3s ease',
       };

package/src/components/__tests__/Icon.spec.js

@@ -35,8 +35,8 @@ const commonTests = async (wrapper) => {
 describe('Icon', () => {
   it('should accept valid lineHeight props', () => {
     const validValues = ['sm', 'md', 'lg', null];
-    
-    validValues.forEach(value => {
+
+    validValues.forEach((value) => {
       const wrapper = createWrapper({ lineHeight: value });
       expect(wrapper.exists()).toBe(true);
     });

package/src/components/index.ts

@@ -1,95 +1,99 @@
-import type { Component } from "vue";
-import { unnnicFontSize as fontSize } from "./config";
-import formElement from "./FormElement/FormElement.vue";
-import input from "./Input/Input.vue";
-import inputNext from "./InputNext/InputNext.vue";
-import inputDatePicker from "./InputDatePicker/InputDatePicker.vue";
-import button from "./Button/Button.vue";
-import buttonIcon from "./Button/ButtonIcon.vue";
-import sidebar from "./Sidebar/index.vue";
-import sidebarItem from "./Sidebar/SidebarItem.vue";
-import table from "./Table/Table.vue";
-import tableRow from "./Table/TableRow.vue";
-import dropdown from "./Dropdown/Dropdown.vue";
-import dropdownItem from "./Dropdown/DropdownItem.vue";
-import avatarIcon from "./AvatarIcon/AvatarIcon.vue";
-import icon from "./Icon.vue";
-import iconLoading from "./IconLoading/IconLoading.vue";
-import toolTip from "./ToolTip/ToolTip.vue";
-import card from "./Card/Card.vue";
-import cardSimple from "./Card/SimpleCard.vue";
-import cardCompany from "./Card/CardCompany.vue";
-import cardData from "./Card/CardData.vue";
-import cardImage from "./CardImage/CardImage.vue";
+import type { Component } from 'vue';
+import { unnnicFontSize as fontSize } from './config';
+import formElement from './FormElement/FormElement.vue';
+import input from './Input/Input.vue';
+import inputNext from './InputNext/InputNext.vue';
+import inputDatePicker from './InputDatePicker/InputDatePicker.vue';
+import button from './Button/Button.vue';
+import buttonIcon from './Button/ButtonIcon.vue';
+import sidebar from './Sidebar/index.vue';
+import sidebarItem from './Sidebar/SidebarItem.vue';
+import table from './Table/Table.vue';
+import tableRow from './Table/TableRow.vue';
+import dropdown from './Dropdown/Dropdown.vue';
+import dropdownItem from './Dropdown/DropdownItem.vue';
+import avatarIcon from './AvatarIcon/AvatarIcon.vue';
+import icon from './Icon.vue';
+import iconLoading from './IconLoading/IconLoading.vue';
+import toolTip from './ToolTip/ToolTip.vue';
+import card from './Card/Card.vue';
+import cardSimple from './Card/SimpleCard.vue';
+import cardCompany from './Card/CardCompany.vue';
+import cardData from './Card/CardData.vue';
+import cardImage from './CardImage/CardImage.vue';
 // import cardFlow from './CardFlow/CardFlow.vue';
-import cardProject from "./CardProject/CardProject.vue";
-import cardInformation from "./CardInformation/CardInformation.vue";
-import checkbox from "./Checkbox/Checkbox.vue";
-import collapse from "./Collapse/Collapse.vue";
-import radio from "./Radio/Radio.vue";
-import languageSelect from "./Dropdown/LanguageSelect.vue";
-import modal from "./Modal/Modal.vue";
-import modalUpload from "./ModalUpload/ModalUpload.vue";
-import { callAlert, callModal } from "../utils/call";
-import selectSmart from "./SelectSmart/SelectSmart.vue";
+import cardProject from './CardProject/CardProject.vue';
+import cardInformation from './CardInformation/CardInformation.vue';
+import checkbox from './Checkbox/Checkbox.vue';
+import collapse from './Collapse/Collapse.vue';
+import radio from './Radio/Radio.vue';
+import languageSelect from './Dropdown/LanguageSelect.vue';
+import modal from './Modal/Modal.vue';
+import modalUpload from './ModalUpload/ModalUpload.vue';
+import { callAlert, callModal } from '../utils/call';
+import selectSmart from './SelectSmart/SelectSmart.vue';
 // import select from './Select/Select.vue';
-import selectItem from "./Select/SelectItem.vue";
+import selectItem from './Select/SelectItem.vue';
 // import selectListItem from './SelectListItem/SelectListItem.vue';
-import multiSelect from "./MultiSelect/MultiSelect.vue";
-import alert from "./Alert/Alert.vue";
+import multiSelect from './MultiSelect/MultiSelect.vue';
+import alert from './Alert/Alert.vue';
 // import autocomplete from './Input/Autocomplete.vue';
 // import autocompleteSelect from './AutocompleteSelect/AutocompleteSelect.vue';
-import tag from "./Tag/Tag.vue";
-import accordion from "./Accordion/Accordion.vue";
-import indicator from "./Indicator/Indicator.vue";
-import skeletonLoading from "./SkeletonLoading/SkeletonLoading.vue"; // TODO: Unbreak this component
-import carousel from "./Carousel/Carousel.vue";
-import label from "./Label/Label.vue";
-import tab from "./Tab/Tab.vue";
-import tabsExpanded from "./TabsExpanded/TabsExpanded.vue";
-import banner from "./Banner/Banner.vue";
-import comment from "./Comment/Comment.vue";
-import datePicker from "./DatePicker/DatePicker.vue";
-import breadcrumb from "./Breadcrumb/Breadcrumb.vue";
-import Switch from "./Switch/Switch.vue";
-import Slider from "./Slider/Slider.vue";
-import DataArea from "./DataArea/DataArea.vue";
-import Pagination from "./Pagination/Pagination.vue";
-import DropArea from "./DropArea/DropArea.vue";
-import UploadArea from "./UploadArea/UploadArea.vue";
-import ImportCard from "./ImportCard/ImportCard.vue";
-import DateFilter from "./DateFilter/DateFilter.vue";
-import ChatText from "./ChatText/ChatText.vue";
-import TextArea from "./TextArea/TextArea.vue";
-import CardNumber from "./CardNumber/CardNumber.vue";
-import chartRainbow from "./ChartRainbow/ChartRainbow.vue";
-import chartBar from "./ChartBar/ChartBar.vue";
-import chartLine from "./ChartLine/ChartLine.vue";
-import moodRating from "./MoodRating/MoodRating.vue";
-import starRating from "./StarRating/StarRating.vue";
-import audioRecorder from "./AudioRecorder/AudioRecorder.vue";
-import circleProgressBar from "./CircleProgressBar/CircleProgressBar.vue";
-import progressBar from "./ProgressBar/ProgressBar.vue";
-import ChatsContact from "./ChatsContact/ChatsContact.vue";
-import ChatsDashboardTagLive from "./ChatsDashboardTagLive/ChatsDashboardTagLive.vue";
-import ChatsHeader from "./ChatsHeader/ChatsHeader.vue";
-import ChatsMessage from "./ChatsMessage/ChatsMessage.vue";
-import ReplyMessage from "./ChatsMessage/ReplyMessage.vue";
-import ChatsNavbar from "./ChatsNavbar/ChatsNavbar.vue";
-import ChatsUserAvatar from "./ChatsUserAvatar/ChatsUserAvatar.vue";
-import ChartMultiLine from "./ChartMultiLine/ChartMultiLine.vue";
-import EmojiPicker from "./EmojiPicker/EmojiPicker.vue";
-import ChartFunnel from "./ChartFunnel/ChartFunnel.vue";
-import Disclaimer from "./Disclaimer/Disclaimer.vue";
-import Drawer from "./Drawer/Drawer.vue";
-import TableNext from "./TableNext/TableNext.vue";
-import ModalNext from "./ModalNext/ModalNext.vue";
-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 DataTable from "./DataTable/index.vue";
-import Chip from "./Chip/Chip.vue";
+import tag from './Tag/Tag.vue';
+import accordion from './Accordion/Accordion.vue';
+import indicator from './Indicator/Indicator.vue';
+import skeletonLoading from './SkeletonLoading/SkeletonLoading.vue'; // TODO: Unbreak this component
+import carousel from './Carousel/Carousel.vue';
+import label from './Label/Label.vue';
+import tab from './Tab/Tab.vue';
+import tabsExpanded from './TabsExpanded/TabsExpanded.vue';
+import banner from './Banner/Banner.vue';
+import comment from './Comment/Comment.vue';
+import datePicker from './DatePicker/DatePicker.vue';
+import breadcrumb from './Breadcrumb/Breadcrumb.vue';
+import Switch from './Switch/Switch.vue';
+import Slider from './Slider/Slider.vue';
+import DataArea from './DataArea/DataArea.vue';
+import Pagination from './Pagination/Pagination.vue';
+import DropArea from './DropArea/DropArea.vue';
+import UploadArea from './UploadArea/UploadArea.vue';
+import ImportCard from './ImportCard/ImportCard.vue';
+import DateFilter from './DateFilter/DateFilter.vue';
+import ChatText from './ChatText/ChatText.vue';
+import TextArea from './TextArea/TextArea.vue';
+import CardNumber from './CardNumber/CardNumber.vue';
+import chartRainbow from './ChartRainbow/ChartRainbow.vue';
+import chartBar from './ChartBar/ChartBar.vue';
+import chartLine from './ChartLine/ChartLine.vue';
+import moodRating from './MoodRating/MoodRating.vue';
+import starRating from './StarRating/StarRating.vue';
+import audioRecorder from './AudioRecorder/AudioRecorder.vue';
+import circleProgressBar from './CircleProgressBar/CircleProgressBar.vue';
+import progressBar from './ProgressBar/ProgressBar.vue';
+import ChatsContact from './ChatsContact/ChatsContact.vue';
+import ChatsDashboardTagLive from './ChatsDashboardTagLive/ChatsDashboardTagLive.vue';
+import ChatsHeader from './ChatsHeader/ChatsHeader.vue';
+import ChatsMessage from './ChatsMessage/ChatsMessage.vue';
+import ReplyMessage from './ChatsMessage/ReplyMessage.vue';
+import ChatsNavbar from './ChatsNavbar/ChatsNavbar.vue';
+import ChatsUserAvatar from './ChatsUserAvatar/ChatsUserAvatar.vue';
+import ChartMultiLine from './ChartMultiLine/ChartMultiLine.vue';
+import EmojiPicker from './EmojiPicker/EmojiPicker.vue';
+import ChartFunnel from './ChartFunnel/ChartFunnel.vue';
+import Disclaimer from './Disclaimer/Disclaimer.vue';
+import Drawer from './Drawer/Drawer.vue';
+import TableNext from './TableNext/TableNext.vue';
+import ModalNext from './ModalNext/ModalNext.vue';
+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 Chip from './Chip/Chip.vue';
+import Toast from './Toast/Toast.vue';
+import { toast } from './Toast/ToastManager';
 
 type VueComponent = Component;
 
@@ -188,8 +192,12 @@ export const components: ComponentsMap = {
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
   unnnicSelectTime: SelectTime,
+  unnnicTemplatePreview: TemplatePreview,
+  unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
+  unnnicToast: Toast,
+  unnnicToastManager: toast,
 };
 
 export const unnnicFontSize = fontSize;
@@ -241,7 +249,7 @@ export const unnnicAccordion = accordion;
 export const unnnicIndicator = indicator;
 export const unnnicSkeletonLoading = skeletonLoading;
 export const unnnicCarousel = carousel;
-export const unnnicLabel = label;
+export const unnnicLabel = label as VueComponent;
 export const unnnicTab = tab;
 export const unnnicTabsExpanded = tabsExpanded;
 export const unnnicBanner = banner;
@@ -282,8 +290,10 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicDataTable = DataTable as VueComponent;
 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 unnnicChip = Chip;
 
 export const UnnnicFontSize = fontSize;
@@ -335,7 +345,7 @@ export const UnnnicAccordion = accordion;
 export const UnnnicIndicator = indicator;
 export const UnnnicSkeletonLoading = skeletonLoading;
 export const UnnnicCarousel = carousel;
-export const UnnnicLabel = label;
+export const UnnnicLabel = label as VueComponent;
 export const UnnnicTab = tab;
 export const UnnnicTabsExpanded = tabsExpanded;
 export const UnnnicBanner = banner;
@@ -376,6 +386,10 @@ export const UnnnicDrawer = Drawer;
 export const UnnnicTableNext = TableNext;
 export const UnnnicTour = Tour;
 export const UnnnicNavigator = Navigator;
-export const UnnnicDataTable = DataTable as VueComponent;
 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 UnnnicChip = Chip;
+export const UnnnicToast = Toast;
+export const UnnnicToastManager = toast;

package/src/index.ts

@@ -16,4 +16,4 @@ const Unnnic: UnnnicPlugin = {
 };
 
 export default Unnnic;
-export * from '@/components'; 
+export * from '@/components';

package/src/main.ts

@@ -5,4 +5,4 @@ import Unnnic from './index';
 const app = createApp(App);
 
 app.use(Unnnic);
-app.mount('#app'); 
+app.mount('#app');

package/src/stories/Alert.stories.js

@@ -1,7 +1,5 @@
-import AlertCaller from '../components/Alert/AlertCaller.vue';
 import alert from '../utils/call';
 import UnnnicAlert from '../components/Alert/Alert.vue';
-import AlertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'Feedback/Alert',
@@ -20,9 +18,6 @@ export default {
   args: {
     type: 'default',
     text: 'Text',
-    linkHref: '',
-    linkText: '',
-    linkTarget: '',
   },
   argTypes: {
     type: {
@@ -37,42 +32,15 @@ export default {
         type: 'text',
       },
     },
-
-    linkHref: {
-      control: {
-        type: 'text',
-      },
-    },
-
-    linkText: {
-      control: {
-        type: 'text',
-      },
-    },
-
-    linkTarget: {
+    version: {
       control: {
-        type: 'text',
+        type: 'select',
       },
-    },
-    position: {
-      if: { arg: 'version' },
-    },
-    version: {
-      control: false,
+      options: ['1.1', '2.0'],
     },
     title: {
       if: { arg: 'version' },
     },
-    icon: {
-      if: { arg: 'version' },
-    },
-    closeText: {
-      if: { arg: 'version' },
-    },
-    scheme: {
-      if: { arg: 'version' },
-    },
   },
 };
 
@@ -95,7 +63,7 @@ export const Normal = {
     },
   },
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -117,7 +85,7 @@ export const Normal = {
 
 export const InlineComponent = {
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -166,7 +134,7 @@ export const WithContainerRef = {
     },
   },
   render: (args) => ({
-    components: { AlertCaller, UnnnicAlert },
+    components: { UnnnicAlert },
     setup() {
       return { args };
     },
@@ -190,32 +158,3 @@ export const WithContainerRef = {
     scheme: 'feedback-green',
   },
 };
-
-export const Banner = {
-  parameters: {
-    docs: {
-      description: {
-        story: `This variation has the additional prop ${'`showCloseButton`'}, false by default.`,
-      },
-    },
-  },
-  render: (args) => ({
-    components: { AlertBanner },
-    setup() {
-      return { args };
-    },
-    methods: {
-      unnnicCallAlert() {
-        alert.callAlert({
-          props: this.args,
-          containerRef: this.$refs.divContainer,
-        });
-      },
-    },
-    template: '<alert-banner v-bind="args" />',
-  }),
-  args: {
-    text: 'Text',
-    showCloseButton: false,
-  },
-};

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 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
+          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -36,14 +36,7 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: [
-        'primary',
-        'secondary',
-        'tertiary',
-        'alternative',
-        'warning',
-        'attention',
-      ],
+      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
     },
     size: {
       control: { type: 'select' },
@@ -104,7 +97,7 @@ export const FilledIcon = {
   args: {
     text: 'Button Text',
     iconLeft: 'play_arrow',
-    iconsFilled: true, 
+    iconsFilled: true,
   },
 };
 
@@ -114,14 +107,6 @@ export const OnlyIcon = {
   },
 };
 
-export const Alternative = {
-  args: {
-    type: 'alternative',
-    iconLeft: 'add',
-    text: 'Text',
-  },
-};
-
 export const Warning = {
   parameters: {
     docs: {

package/src/stories/ChatsHeader.stories.js

@@ -51,7 +51,7 @@ export const ContactRightSlot = {
         </template>
       </UnnnicChatsHeader>`,
   }),
-}
+};
 
 export const Dashboard = {
   args: {

package/src/stories/ChatsMessage.stories.js

@@ -103,7 +103,6 @@ export default {
 
 export const Default = { args: {} };
 
-
 export const Automatic = {
   args: {
     automatic: true,

package/src/stories/Chip.stories.js

@@ -25,7 +25,8 @@ export default {
     type: {
       control: { type: 'select' },
       options: ['single', 'multiple'],
-      description: 'The type of chip - single for basic display, multiple for selection with icons',
+      description:
+        'The type of chip - single for basic display, multiple for selection with icons',
     },
     text: {
       control: { type: 'text' },
@@ -33,7 +34,8 @@ export default {
     },
     isSelected: {
       control: { type: 'boolean' },
-      description: 'Whether the chip is in selected state (affects styling and icons)',
+      description:
+        'Whether the chip is in selected state (affects styling and icons)',
     },
     count: {
       control: { type: 'number' },
@@ -41,7 +43,8 @@ export default {
     },
     isClickable: {
       control: { type: 'boolean' },
-      description: 'Whether the chip should show clickable styling (cursor pointer)',
+      description:
+        'Whether the chip should show clickable styling (cursor pointer)',
     },
   },
 };
@@ -170,4 +173,4 @@ export const Interactive = {
       />
     `,
   }),
-};
+};