@youngonesworks/ui 1.0.11 → 1.0.15

package/dist/index.d.ts

@@ -55,6 +55,8 @@ export { Textarea } from './components/textArea';
 export { TextInput } from './components/textInput';
 export { ThemeIcon } from './components/themeIcon';
 export { TimeInput } from './components/timeInput';
+export type { IToast, TToastType } from './components/toast';
+export { ToastProvider, useToast } from './components/toast';
 export { Toggle } from './components/toggle';
 export { Tooltip } from './components/tooltip';
 export { TruncatedText } from './components/truncatedText';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React$1 from "react";
-import React, { Fragment, cloneElement, createRef, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import React, { Fragment, cloneElement, createContext, createRef, forwardRef, isValidElement, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
 import { IconAlertCircle, IconAlertTriangle, IconArrowNarrowLeft, IconBold, IconCalendar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircleCheck, IconClearFormatting, IconDotsVertical, IconEyeCheck, IconEyeOff, IconFilter, IconHeart, IconHeartFilled, IconItalic, IconList, IconListNumbers, IconMessageDots, IconSearch, IconSelector, IconUnderline, IconX } from "@tabler/icons-react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -251,34 +251,35 @@ function formatIcon(icon, defaultFormatAttributes) {
 }
 //#endregion
 //#region src/components/actionIcon/index.tsx
-const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className, ...props }) => {
+const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", tooltipTitle, "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className, ...props }) => {
 	const variantClassNames = clsx({
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
 		"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
 		"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] child:p-10 w-[37px] h-[37px] text-black rounded-full bg-primary hover:bg-turquoise-700 disabled:turquoise-50 disabled:text-gray-800": styleVariant === ACTION_ICON_STYLE_VARIANT.ROUND,
 		"w-7 h-7 active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black hover:bg-ultra-light-blue-gray disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.SMALL
 	});
-	return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Tooltip, {
+	const renderButton = () => /* @__PURE__ */ jsx("button", {
+		title,
+		type,
+		disabled,
+		"data-testid": testId,
+		"data-component": "ActionIcon",
+		className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
+		onClick,
+		ref,
+		"data-tooltip-id": tooltipTitle,
+		"data-tooltip-content": tooltipTitle,
+		...props,
+		children: icon ? formatIcon(icon, {
+			stroke: strokeWidth,
+			size: iconSize
+		}) : props.children
+	});
+	return tooltipTitle ? /* @__PURE__ */ jsx(Tooltip, {
 		size: "sm",
-		content: title,
-		children: /* @__PURE__ */ jsx("button", {
-			title,
-			type,
-			disabled,
-			"data-testid": testId,
-			"data-component": "ActionIcon",
-			className: cn(variantClassNames, { "hover:bg-transparant cursor-not-allowed hover:border-gray-200": disabled }, className),
-			onClick,
-			ref,
-			"data-tooltip-id": title,
-			"data-tooltip-content": title,
-			...props,
-			children: icon ? formatIcon(icon, {
-				stroke: strokeWidth,
-				size: iconSize
-			}) : props.children
-		})
-	}) });
+		content: tooltipTitle,
+		children: renderButton()
+	}) : renderButton();
 };
 ActionIcon.displayName = "ActionIcon";
 //#endregion
@@ -1219,6 +1220,7 @@ const Divider = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 const FavouriteButton = forwardRef((props, ref) => {
 	const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-secondary", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children, ...rest } = props;
 	return /* @__PURE__ */ jsx(ActionIcon, {
+		tooltipTitle: favouriteTitle || "Favorite",
 		onClick,
 		"data-component": "favouriteButton",
 		title: favouriteTitle || "Favorite",
@@ -1788,12 +1790,12 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 					/* @__PURE__ */ jsx("div", {
 						className: "relative z-10 w-full",
 						children: withCloseButton && /* @__PURE__ */ jsx(ActionIcon, {
+							title: "Close modal",
 							onClick: handleClose,
-							"aria-label": "close modal",
+							"aria-label": "Close modal",
 							className: "absolute top-0 right-0",
 							"data-testid": "close-modal",
-							icon: /* @__PURE__ */ jsx(IconX, {}),
-							title: "Close modal"
+							icon: /* @__PURE__ */ jsx(IconX, {})
 						})
 					}),
 					title && /* @__PURE__ */ jsx("div", {
@@ -2885,6 +2887,132 @@ const TimeInput = forwardRef(({ label, error, withSeconds, className = "", ...pr
 	});
 });
 //#endregion
+//#region src/components/toast/Toast.tsx
+const Toast = ({ toast, onClose }) => {
+	const icon = useMemo(() => {
+		switch (toast.type) {
+			case "success": return /* @__PURE__ */ jsx(IconCircleCheck, {
+				className: "text-navy-blue",
+				stroke: 2,
+				size: 26
+			});
+			case "warning": return /* @__PURE__ */ jsx(IconAlertCircle, {
+				className: "text-warning",
+				size: 26
+			});
+			case "error": return /* @__PURE__ */ jsx(IconAlertCircle, {
+				className: "text-red-500",
+				size: 26
+			});
+			default: return null;
+		}
+	}, [toast.type]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": `toast-${toast.type || "default"}`,
+		className: "bg-gradient-blue-turquoise mb-4 w-full max-w-[1400px] rounded p-px drop-shadow-sm",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-testid": "toast-content",
+			className: cn("flex w-full max-w-[1400px] min-w-[350px] items-center justify-between", "gap-6 rounded-[0.20rem] bg-white p-5 md:gap-12"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-6",
+				children: [icon && /* @__PURE__ */ jsx("div", {
+					"data-testid": "toast-icon",
+					children: icon
+				}), /* @__PURE__ */ jsx("p", {
+					"data-testid": "toast-message",
+					className: "yo-text-body m-0 text-black",
+					children: toast.message
+				})]
+			}), /* @__PURE__ */ jsx(ActionIcon, {
+				styleVariant: "transparent",
+				onClick: onClose,
+				title: "",
+				"aria-label": "Close",
+				className: "text-inherit",
+				"data-testid": "closeToast",
+				icon: /* @__PURE__ */ jsx(IconX, { size: 20 })
+			})]
+		})
+	}, toast.id);
+};
+Toast.displayName = "Toast";
+//#endregion
+//#region src/components/toast/ToastContext.tsx
+const ToastStateContext = createContext([]);
+const ToastDispatchContext = createContext(void 0);
+const useToastDispatchContext = () => useContext(ToastDispatchContext);
+//#endregion
+//#region src/components/toast/ToastProvider.tsx
+const toastReducer = (state, action) => {
+	switch (action.type) {
+		case "ADD": return [action.toast, ...state];
+		case "DELETE": return state.filter((t) => t.id !== action.toast.id);
+	}
+};
+const toastTimers = /* @__PURE__ */ new Map();
+const ToastProvider = ({ children, autoDelete = true, dismissTime = 5e3 }) => {
+	const [toasts, dispatch] = useReducer(toastReducer, []);
+	useEffect(() => {
+		if (!autoDelete) return;
+		for (const toast of toasts) if (toast.timeout !== false && !toastTimers.has(toast.id)) {
+			const timer = setTimeout(() => {
+				dispatch({
+					type: "DELETE",
+					toast: { id: toast.id }
+				});
+				toastTimers.delete(toast.id);
+			}, toast.timeout ?? dismissTime);
+			toastTimers.set(toast.id, timer);
+		}
+	}, [
+		autoDelete,
+		dismissTime,
+		toasts
+	]);
+	return /* @__PURE__ */ jsx(ToastStateContext.Provider, {
+		value: toasts,
+		children: /* @__PURE__ */ jsxs(ToastDispatchContext.Provider, {
+			value: dispatch,
+			children: [children, toasts.length > 0 && /* @__PURE__ */ jsx("div", {
+				"data-component": "ToastContainer",
+				className: "fixed top-8 left-1/2 z-1000 -translate-x-1/2",
+				children: toasts.map((toast) => /* @__PURE__ */ jsx(Toast, {
+					toast,
+					onClose: () => dispatch({
+						type: "DELETE",
+						toast: { id: toast.id }
+					})
+				}, toast.id))
+			})]
+		})
+	});
+};
+ToastProvider.displayName = "ToastProvider";
+//#endregion
+//#region src/components/toast/useToast.tsx
+const useToast = () => {
+	const dispatch = useToastDispatchContext();
+	return {
+		addToast: useCallback(({ message, type, timeout }) => {
+			dispatch?.({
+				type: "ADD",
+				toast: {
+					id: crypto.randomUUID(),
+					message,
+					type,
+					timeout
+				}
+			});
+		}, [dispatch]),
+		deleteToast: useCallback((id) => {
+			dispatch?.({
+				type: "DELETE",
+				toast: { id }
+			});
+		}, [dispatch])
+	};
+};
+//#endregion
 //#region src/components/toggle/index.tsx
 const Toggle = ({ onClick, value, disabled = false }) => {
 	const handleToggle = (e) => {
@@ -3460,6 +3588,6 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
 	})] });
 });
 //#endregion
-export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, Checkbox, DatePickerInput, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, KebabMenu, Label, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, PhoneInput, Popover, ProfileMenu, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, ThemeIcon, TimeInput, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants };
+export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, Checkbox, DatePickerInput, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, KebabMenu, Label, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, PhoneInput, Popover, ProfileMenu, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, ThemeIcon, TimeInput, ToastProvider, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants, useToast };
 
 //# sourceMappingURL=index.js.map