radix_leptos_primitives/components/

toast.rs

use crate::utils::merge_classes;
use leptos::callback::Callback;
use leptos::children::Children;
use leptos::prelude::*;

/// Toast component - Enhanced notification system with positioning
#[component]
pub fn Toast(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] title: Option<String>,
    #[prop(optional)] description: Option<String>,
    #[prop(optional)] variant: Option<ToastVariant>,
    #[prop(optional)] position: Option<ToastPosition>,
    #[prop(optional)] duration: Option<u64>,
    #[prop(optional)] dismissible: Option<bool>,
    #[prop(optional)] on_dismiss: Option<Callback<()>>,
    #[prop(optional)] on_action: Option<Callback<()>>,
) -> impl IntoView {
    let title = title.unwrap_or_default();
    let description = description.unwrap_or_default();
    let variant = variant.unwrap_or_default();
    let position = position.unwrap_or_default();
    let duration = duration.unwrap_or(5000);
    let dismissible = dismissible.unwrap_or(true);

    let class = merge_classes(
        [
            "toast",
            variant.to_class(),
            position.to_class(),
            if dismissible {
                "dismissible"
            } else {
                "non-dismissible"
            },
            class.as_deref().unwrap_or(""),
        ]
        .to_vec(),
    );

    view! {
        <div
            class=class
            style=style
            role="alert"
            aria-live="polite"
            aria-atomic="true"
            data-duration=duration
            data-position=position.to_string()
            data-variant=variant.to_string()
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Toast Provider component
#[component]
pub fn ToastProvider(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] position: Option<ToastPosition>,
    #[prop(optional)] max_toasts: Option<usize>,
    #[prop(optional)] default_duration: Option<u64>,
) -> impl IntoView {
    let position = position.unwrap_or_default();
    let max_toasts = max_toasts.unwrap_or(5);
    let default_duration = default_duration.unwrap_or(5000);

    let class = merge_classes(
        [
            "toast-provider",
            position.to_class(),
            class.as_deref().unwrap_or(""),
        ]
        .to_vec(),
    );

    view! {
        <div
            class=class
            style=style
            role="region"
            aria-label="Toast notifications"
            data-max-toasts=max_toasts
            data-default-duration=default_duration
            data-position=position.to_string()
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Toast Title component
#[component]
pub fn ToastTitle(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] title: Option<String>,
) -> impl IntoView {
    let title = title.unwrap_or_default();

    let class = merge_classes(["toast-title", class.as_deref().unwrap_or("")].to_vec());

    view! {
        <div
            class=class
            style=style
            role="heading"
            data-level="3"
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Toast Description component
#[component]
pub fn ToastDescription(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] description: Option<String>,
) -> impl IntoView {
    let description = description.unwrap_or_default();

    let class = merge_classes(["toast-description", class.as_deref().unwrap_or("")].to_vec());

    view! {
        <div
            class=class
            style=style
            role="text"
        >
            {children.map(|c| c())}
        </div>
    }
}

/// Toast Action component
#[component]
pub fn ToastAction(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] label: Option<String>,
    #[prop(optional)] on_click: Option<Callback<()>>,
) -> impl IntoView {
    let label = label.unwrap_or_else(|| "Action".to_string());

    let class = merge_classes(["toast-action", class.as_deref().unwrap_or("")].to_vec());

    let handle_click = move |_| {
        if let Some(callback) = on_click {
            callback.run(());
        }
    };

    view! {
        <button
            class=class
            style=style
            type="button"
            aria-label=label
            on:click=handle_click
        >
            {children.map(|c| c())}
        </button>
    }
}

/// Toast Close Button component
#[component]
pub fn ToastClose(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] on_click: Option<Callback<()>>,
) -> impl IntoView {
    let class = merge_classes(["toast-close", class.as_deref().unwrap_or("")].to_vec());

    let handle_click = move |_| {
        if let Some(callback) = on_click {
            callback.run(());
        }
    };

    view! {
        <button
            class=class
            style=style
            type="button"
            aria-label="Close toast"
            on:click=handle_click
        >
            {children.map(|c| c())}
        </button>
    }
}

/// Toast Variant enum
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum ToastVariant {
    #[default]
    Default,
    Success,
    Warning,
    Error,
    Info,
}

impl ToastVariant {
    pub fn to_class(&self) -> &'static str {
        match self {
            ToastVariant::Default => "variant-default",
            ToastVariant::Success => "variant-success",
            ToastVariant::Warning => "variant-warning",
            ToastVariant::Error => "variant-error",
            ToastVariant::Info => "variant-info",
        }
    }

    pub fn to_string(&self) -> &'static str {
        match self {
            ToastVariant::Default => "default",
            ToastVariant::Success => "success",
            ToastVariant::Warning => "warning",
            ToastVariant::Error => "error",
            ToastVariant::Info => "info",
        }
    }
}

/// Toast Position enum
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
pub enum ToastPosition {
    #[default]
    TopRight,
    TopLeft,
    TopCenter,
    BottomRight,
    BottomLeft,
    BottomCenter,
}

impl ToastPosition {
    pub fn to_class(&self) -> &'static str {
        match self {
            ToastPosition::TopRight => "position-top-right",
            ToastPosition::TopLeft => "position-top-left",
            ToastPosition::TopCenter => "position-top-center",
            ToastPosition::BottomRight => "position-bottom-right",
            ToastPosition::BottomLeft => "position-bottom-left",
            ToastPosition::BottomCenter => "position-bottom-center",
        }
    }

    pub fn to_string(&self) -> &'static str {
        match self {
            ToastPosition::TopRight => "top-right",
            ToastPosition::TopLeft => "top-left",
            ToastPosition::TopCenter => "top-center",
            ToastPosition::BottomRight => "bottom-right",
            ToastPosition::BottomLeft => "bottom-left",
            ToastPosition::BottomCenter => "bottom-center",
        }
    }
}

/// Toast Viewport component
#[component]
pub fn ToastViewport(
    #[prop(optional)] class: Option<String>,
    #[prop(optional)] style: Option<String>,
    #[prop(optional)] children: Option<Children>,
    #[prop(optional)] position: Option<ToastPosition>,
) -> impl IntoView {
    let position = position.unwrap_or_default();

    let class = merge_classes(
        [
            "toast-viewport",
            position.to_class(),
            class.as_deref().unwrap_or(""),
        ]
        .to_vec(),
    );

    view! {
        <div
            class=class
            style=style
            role="region"
            aria-label="Toast viewport"
            data-position=position.to_string()
        >
            {children.map(|c| c())}
        </div>
    }
}

#[cfg(test)]
mod tests {
    use proptest::prelude::*;
    use wasm_bindgen_test::*;

    wasm_bindgen_test_configure!(run_in_browser);

    // Unit Tests
    #[test]
    fn test_toast_creation() {}
    #[test]
    fn test_toast_with_class() {}
    #[test]
    fn test_toast_with_style() {}
    #[test]
    fn test_toast_title() {}
    #[test]
    fn test_toast_description() {}
    #[test]
    fn test_toast_variant() {}
    #[test]
    fn test_toast_position() {}
    #[test]
    fn test_toast_duration() {}
    #[test]
    fn test_toastdismissible() {}
    #[test]
    fn test_toast_on_dismiss() {}
    #[test]
    fn test_toast_on_action() {}

    // Toast Provider tests
    #[test]
    fn test_toast_provider_creation() {}
    #[test]
    fn test_toast_provider_with_class() {}
    #[test]
    fn test_toast_provider_position() {}
    #[test]
    fn test_toast_provider_max_toasts() {}
    #[test]
    fn test_toast_provider_default_duration() {}

    // Toast Title tests
    #[test]
    fn test_toast_title_creation() {}
    #[test]
    fn test_toast_title_with_class() {}
    #[test]
    fn test_toast_title_title() {}

    // Toast Description tests
    #[test]
    fn test_toast_description_creation() {}
    #[test]
    fn test_toast_description_with_class() {}
    #[test]
    fn test_toast_description_description() {}

    // Toast Action tests
    #[test]
    fn test_toast_action_creation() {}
    #[test]
    fn test_toast_action_with_class() {}
    #[test]
    fn test_toast_action_label() {}
    #[test]
    fn test_toast_action_on_click() {}

    // Toast Close tests
    #[test]
    fn test_toast_close_creation() {}
    #[test]
    fn test_toast_close_with_class() {}
    #[test]
    fn test_toast_close_on_click() {}

    // Toast Variant tests
    #[test]
    fn test_toast_variant_default() {}
    #[test]
    fn test_toast_variant_success() {}
    #[test]
    fn test_toast_variant_warning() {}
    #[test]
    fn test_toast_variant_error() {}
    #[test]
    fn test_toast_variant_info() {}

    // Toast Position tests
    #[test]
    fn test_toast_position_default() {}
    #[test]
    fn test_toast_position_top_right() {}
    #[test]
    fn test_toast_position_top_left() {}
    #[test]
    fn test_toast_position_top_center() {}
    #[test]
    fn test_toast_position_bottom_right() {}
    #[test]
    fn test_toast_position_bottom_left() {}
    #[test]
    fn test_toast_position_bottom_center() {}

    // Toast Viewport tests
    #[test]
    fn test_toast_viewport_creation() {}
    #[test]
    fn test_toast_viewport_with_class() {}
    #[test]
    fn test_toast_viewport_position() {}

    // Helper function tests
    #[test]
    fn test_merge_classes_empty() {}
    #[test]
    fn test_merge_classes_single() {}
    #[test]
    fn test_merge_classes_multiple() {}
    #[test]
    fn test_merge_classes_with_empty() {}

    // Property-based Tests
    #[test]
    fn test_toast_property_based() {
        proptest!(|(____class in ".*", __style in ".*")| {

        });
    }

    #[test]
    fn test_toast_duration_validation() {
        proptest!(|(____duration in 1000..30000u64)| {

        });
    }

    #[test]
    fn test_toast_position_validation() {
        proptest!(|(____position in ".*")| {

        });
    }

    // Integration Tests
    #[test]
    fn test_toast_notification_workflow() {}
    #[test]
    fn test_toast_accessibility() {}
    #[test]
    fn test_toast_positioning_system() {}
    #[test]
    fn test_toast_dismissal_workflow() {}
    #[test]
    fn test_toast_action_workflow() {}

    // Performance Tests
    #[test]
    fn test_toast_multiple_notifications() {}
    #[test]
    fn test_toast_render_performance() {}
    #[test]
    fn test_toast_memory_usage() {}
    #[test]
    fn test_toast_animation_performance() {}
}