@youngonesworks/ui 1.0.11 → 1.0.15

package/dist/components/actionIcon/index.d.ts

@@ -6,6 +6,7 @@ export interface ActionIconProps {
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset' | undefined;
     styleVariant?: 'default' | 'transparent' | 'small' | 'round';
+    tooltipTitle?: string;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     icon?: React.ReactNode;
     iconSize?: number;
@@ -22,7 +23,7 @@ export interface ActionIconProps {
     height?: string;
 }
 declare const ActionIcon: {
-    ({ ref, title, disabled, styleVariant, icon, type, "data-testid": testId, iconSize, strokeWidth, onClick, className, ...props }: ActionIconProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, title, disabled, styleVariant, icon, type, tooltipTitle, "data-testid": testId, iconSize, strokeWidth, onClick, className, ...props }: ActionIconProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { ActionIcon };

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,16 @@
+export interface IToast {
+    id: string;
+    message?: string;
+    type?: TToastType;
+    timeout?: number | false;
+}
+export type TToastType = 'warning' | 'success' | 'error';
+interface IToastProps {
+    toast: IToast;
+    onClose: () => void;
+}
+declare const Toast: {
+    ({ toast, onClose }: IToastProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Toast;

package/dist/components/toast/Toast.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Toast from './Toast';
+declare const meta: Meta<typeof Toast>;
+export default meta;
+type Story = StoryObj<typeof Toast>;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Error: Story;
+export declare const NoType: Story;
+export declare const LongMessage: Story;

package/dist/components/toast/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/toast/ToastContext.d.ts

@@ -0,0 +1,10 @@
+import { type Dispatch } from 'react';
+import { type IToast } from './Toast';
+export interface IToastDispatchProps {
+    type: 'ADD' | 'DELETE';
+    toast: IToast;
+}
+export declare const ToastStateContext: import("react").Context<IToast[]>;
+export declare const ToastDispatchContext: import("react").Context<Dispatch<IToastDispatchProps> | undefined>;
+export declare const useToastStateContext: () => IToast[];
+export declare const useToastDispatchContext: () => Dispatch<IToastDispatchProps> | undefined;

package/dist/components/toast/ToastProvider.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+interface IToastProviderProps {
+    children: ReactNode;
+    autoDelete?: boolean;
+    dismissTime?: number;
+}
+export declare const ToastProvider: {
+    ({ children, autoDelete, dismissTime }: IToastProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/toast/index.d.ts

@@ -0,0 +1,3 @@
+export type { IToast, TToastType } from './Toast';
+export { ToastProvider } from './ToastProvider';
+export { useToast } from './useToast';

package/dist/components/toast/useToast.d.ts

@@ -0,0 +1,11 @@
+import { type TToastType } from './Toast';
+interface IAddToastOptions {
+    message: string;
+    type: TToastType;
+    timeout?: number | false;
+}
+export declare const useToast: () => {
+    addToast: ({ message, type, timeout }: IAddToastOptions) => void;
+    deleteToast: (id: string) => void;
+};
+export {};

package/dist/index.cjs

@@ -281,34 +281,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 = (0, clsx.default)({
 		"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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
+	const renderButton = () => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(Tooltip, {
 		size: "sm",
-		content: title,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -1250,6 +1251,7 @@ const Divider = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runti
 const FavouriteButton = (0, react.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__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+		tooltipTitle: favouriteTitle || "Favorite",
 		onClick,
 		"data-component": "favouriteButton",
 		title: favouriteTitle || "Favorite",
@@ -1819,12 +1821,12 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "relative z-10 w-full",
 						children: withCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {}),
-							title: "Close modal"
+							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, {})
 						})
 					}),
 					title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2919,6 +2921,132 @@ const TimeInput = (0, react.forwardRef)(({ label, error, withSeconds, className
 	});
 });
 //#endregion
+//#region src/components/toast/Toast.tsx
+const Toast = ({ toast, onClose }) => {
+	const icon = (0, react.useMemo)(() => {
+		switch (toast.type) {
+			case "success": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconCircleCheck, {
+				className: "text-navy-blue",
+				stroke: 2,
+				size: 26
+			});
+			case "warning": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconAlertCircle, {
+				className: "text-warning",
+				size: 26
+			});
+			case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconAlertCircle, {
+				className: "text-red-500",
+				size: 26
+			});
+			default: return null;
+		}
+	}, [toast.type]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-6",
+				children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-testid": "toast-icon",
+					children: icon
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					"data-testid": "toast-message",
+					className: "yo-text-body m-0 text-black",
+					children: toast.message
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionIcon, {
+				styleVariant: "transparent",
+				onClick: onClose,
+				title: "",
+				"aria-label": "Close",
+				className: "text-inherit",
+				"data-testid": "closeToast",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, { size: 20 })
+			})]
+		})
+	}, toast.id);
+};
+Toast.displayName = "Toast";
+//#endregion
+//#region src/components/toast/ToastContext.tsx
+const ToastStateContext = (0, react.createContext)([]);
+const ToastDispatchContext = (0, react.createContext)(void 0);
+const useToastDispatchContext = () => (0, react.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] = (0, react.useReducer)(toastReducer, []);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(ToastStateContext.Provider, {
+		value: toasts,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToastDispatchContext.Provider, {
+			value: dispatch,
+			children: [children, toasts.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-component": "ToastContainer",
+				className: "fixed top-8 left-1/2 z-1000 -translate-x-1/2",
+				children: toasts.map((toast) => /* @__PURE__ */ (0, react_jsx_runtime.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: (0, react.useCallback)(({ message, type, timeout }) => {
+			dispatch?.({
+				type: "ADD",
+				toast: {
+					id: crypto.randomUUID(),
+					message,
+					type,
+					timeout
+				}
+			});
+		}, [dispatch]),
+		deleteToast: (0, react.useCallback)((id) => {
+			dispatch?.({
+				type: "DELETE",
+				toast: { id }
+			});
+		}, [dispatch])
+	};
+};
+//#endregion
 //#region src/components/toggle/index.tsx
 const Toggle = ({ onClick, value, disabled = false }) => {
 	const handleToggle = (e) => {
@@ -3556,6 +3684,7 @@ exports.TextInput = TextInput;
 exports.Textarea = Textarea;
 exports.ThemeIcon = ThemeIcon;
 exports.TimeInput = TimeInput;
+exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
 exports.TruncatedText = TruncatedText;
@@ -3564,5 +3693,6 @@ exports.UnorderedListItem = UnorderedListItem;
 exports.UnstyledButton = UnstyledButton;
 exports.WysiwygEditor = WysiwygEditor;
 exports.buttonVariants = buttonVariants;
+exports.useToast = useToast;
 
 //# sourceMappingURL=index.cjs.map