@youngonesworks/ui 1.0.11 → 1.0.14

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

@@ -2919,6 +2919,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 +3682,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 +3691,6 @@ exports.UnorderedListItem = UnorderedListItem;
 exports.UnstyledButton = UnstyledButton;
 exports.WysiwygEditor = WysiwygEditor;
 exports.buttonVariants = buttonVariants;
+exports.useToast = useToast;
 
 //# sourceMappingURL=index.cjs.map