orbital-core-components 0.1.1

Themed Orbital UI components for Leptos applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

use leptos::prelude::*;
use orbital_base_components::{RatingColor, RatingSize};
use orbital_macros::component_doc;
use orbital_style::inject_style;

use super::injection::RatingInjection;
use super::rating_item::RatingItem;
use super::styles::rating_styles;

/// Non-interactive star rating for reviews and aggregates.
///
/// Orbital RatingDisplay control. `value` is shown as filled stars plus numeric text. Items render with `interactive=false` so no radio inputs appear.
///
/// # Examples
///
/// ## Default
/// Read-only four-star display with value label — use in reviews and list metadata.
/// <!-- preview -->
/// ```rust
/// view! {
///     <div data-testid="rating-display-preview">
///         <RatingDisplay value=4.0 />
///     </div>
/// }
/// ```
///
/// ## Sizes
/// Size tokens scale icons for dense tables versus spacious detail headers.
/// <!-- preview -->
/// ```rust
/// use crate::{Flex, FlexAlign, FlexGap, RatingDisplay, RatingSize};
/// view! {
///     <div data-testid="rating-display-sizes">
///         <Flex gap=FlexGap::Large align=FlexAlign::Center>
///             <RatingDisplay value=3.5 size=RatingSize::Small />
///             <RatingDisplay value=3.5 size=RatingSize::Medium />
///             <RatingDisplay value=3.5 size=RatingSize::Large />
///         </Flex>
///     </div>
/// }
/// ```
///
/// ## Colors
/// Brand, marigold, and neutral presets for marketing versus subdued contexts.
/// <!-- preview -->
/// ```rust
/// use crate::{Flex, FlexAlign, FlexGap, RatingColor, RatingDisplay};
/// view! {
///     <div data-testid="rating-display-colors">
///         <Flex vertical=true gap=FlexGap::Small align=FlexAlign::Start>
///             <RatingDisplay value=4.0 color=RatingColor::Brand />
///             <RatingDisplay value=4.0 color=RatingColor::Marigold />
///             <RatingDisplay value=4.0 color=RatingColor::Neutral />
///         </Flex>
///     </div>
/// }
/// ```
///
/// ## Half value
/// Fractional scores render half-filled stars when the value includes a `.5` step.
/// <!-- preview -->
/// ```rust
/// view! {
///     <div data-testid="rating-display-half">
///         <RatingDisplay value=3.5 />
///     </div>
/// }
/// ```
///
/// ## Custom max
/// Increase `max` when displaying scores on a scale larger than five stars.
/// <!-- preview -->
/// ```rust
/// view! {
///     <div data-testid="rating-display-max">
///         <RatingDisplay value=8.0 max=10 />
///     </div>
/// }
/// ```
#[component_doc(
    category = "Data Display",
    preview_slug = "rating-display",
    preview_label = "Rating Display",
    preview_icon = icondata::AiStarOutlined,
)]
#[component]
pub fn RatingDisplay(
    /// Optional CSS class on the display root.
    #[prop(optional, into)]
    class: MaybeProp<String>,
    /// Displayed rating value.
    #[prop(optional, into)]
    value: Signal<f32>,
    /// Number of star slots (minimum 2).
    #[prop(default = 5.into(), into)]
    max: Signal<u8>,
    /// Icon size preset.
    #[prop(default = RatingSize::Medium.into(), into)]
    size: Signal<RatingSize>,
    /// Color preset.
    #[prop(optional, into)]
    color: Signal<RatingColor>,
) -> impl IntoView {
    inject_style("orbital-rating", rating_styles());

    let bound_value = RwSignal::new(Some(value.get_untracked()));
    Effect::new(move |_| {
        bound_value.set(Some(value.get()));
    });

    let class = MaybeProp::derive(move || {
        let mut parts = vec![
            "orbital-rating-display".to_string(),
            format!("orbital-rating-display--{}", size.get().as_str()),
        ];
        if let Some(extra) = class.get() {
            if !extra.is_empty() {
                parts.push(extra);
            }
        }
        Some(parts.join(" "))
    });

    view! {
        <div role="img" class=class>
            <leptos::context::Provider value=RatingInjection {
                value: bound_value.into(),
                hovered_value: RwSignal::new(None::<f32>),
                name: Signal::from(String::new()),
                step: 0.5.into(),
                size,
                color,
                interactive: false,
            }>
                {move || {
                    let mut max = max.get();
                    if max < 2 {
                        max = 2;
                    }
                    (0..max)
                        .map(|i| view! { <RatingItem value=i + 1 /> })
                        .collect_view()
                }}
            </leptos::context::Provider>
            <span aria-hidden="true" class="orbital-rating-display__value-text">
                {move || value.get()}
            </span>
        </div>
    }
}