ui_storybook/stories/
fixtures_gallery.rs

1//! Fixture-gallery story (M-UI.22 / AUT-142). Renders a contact sheet
2//! of every major fixture domain so designers can review the canonical
3//! data shape at a glance.
4
5use leptos::prelude::*;
6
7use crate::components::cursor::{CursorAppearancePanel, CursorAppearanceView};
8use crate::components::library::RecordingCard;
9use crate::components::recorder::{CaptureSourceRow, DisplaySourceCard, SystemAudioAppList};
10use crate::components::shell::WorkspaceSwitcherMenu;
11use crate::fixtures::default_ui_fixtures;
12
13use super::{Story, StoryViewport, render};
14
15/// All fixture-gallery stories.
16#[must_use]
17pub fn stories() -> Vec<Story> {
18    vec![
19        story(
20            "fixtures-contact-sheet",
21            "Fixtures — contact sheet",
22            render_contact_sheet,
23        ),
24        story("fixtures-recorder", "Fixtures — recorder", render_recorder),
25        story("fixtures-library", "Fixtures — library", render_library),
26        story("fixtures-cursor", "Fixtures — cursor", render_cursor),
27    ]
28}
29
30fn story(id: &'static str, title: &'static str, render: fn() -> String) -> Story {
31    Story {
32        id,
33        category: "Fixtures",
34        title,
35        viewport: StoryViewport::Fixed {
36            width: 1080,
37            height: 720,
38        },
39        render,
40    }
41}
42
43fn render_contact_sheet() -> String {
44    let f = default_ui_fixtures();
45    let display_cards: Vec<_> = f
46        .displays
47        .into_iter()
48        .map(|d| view! { <DisplaySourceCard view=d /> })
49        .collect();
50    let cards: Vec<_> = f
51        .recordings
52        .into_iter()
53        .map(|r| view! { <RecordingCard view=r /> })
54        .collect();
55    let appearances: Vec<_> = f
56        .cursor_presets
57        .into_iter()
58        .map(render_appearance_tile)
59        .collect();
60    render(view! {
61        <section class="contact-sheet">
62            <h3 class="contact-sheet-heading">"Workspaces"</h3>
63            <WorkspaceSwitcherMenu workspaces=f.workspaces selected_id="ws-northwind".to_string() />
64
65            <h3 class="contact-sheet-heading">"Displays"</h3>
66            <div class="contact-sheet-row">{display_cards}</div>
67
68            <h3 class="contact-sheet-heading">"Capture sources"</h3>
69            <div class="contact-sheet-row">
70                <CaptureSourceRow view=f.devices.camera />
71                <CaptureSourceRow view=f.devices.microphone />
72            </div>
73
74            <h3 class="contact-sheet-heading">"System audio"</h3>
75            <SystemAudioAppList apps=f.audio_apps />
76
77            <h3 class="contact-sheet-heading">"Recordings"</h3>
78            <div class="contact-sheet-row contact-sheet-row-grid">{cards}</div>
79
80            <h3 class="contact-sheet-heading">"Cursor presets"</h3>
81            <div class="contact-sheet-row">{appearances}</div>
82        </section>
83    })
84}
85
86fn render_appearance_tile(v: CursorAppearanceView) -> AnyView {
87    view! {
88        <div class="contact-sheet-cursor-tile">
89            <CursorAppearancePanel view=v />
90        </div>
91    }
92    .into_any()
93}
94
95fn render_recorder() -> String {
96    let f = default_ui_fixtures();
97    render(view! {
98        <section class="contact-sheet">
99            <h3 class="contact-sheet-heading">"Capture sources"</h3>
100            <CaptureSourceRow view=f.devices.camera />
101            <CaptureSourceRow view=f.devices.microphone />
102            <h3 class="contact-sheet-heading">"System audio"</h3>
103            <SystemAudioAppList apps=f.audio_apps />
104        </section>
105    })
106}
107
108fn render_library() -> String {
109    let f = default_ui_fixtures();
110    let cards: Vec<_> = f
111        .recordings
112        .into_iter()
113        .map(|r| view! { <RecordingCard view=r /> })
114        .collect();
115    render(view! {
116        <section class="contact-sheet">
117            <h3 class="contact-sheet-heading">"Recording cards"</h3>
118            <div class="contact-sheet-row contact-sheet-row-grid">{cards}</div>
119        </section>
120    })
121}
122
123fn render_cursor() -> String {
124    let f = default_ui_fixtures();
125    let tiles: Vec<_> = f
126        .cursor_presets
127        .into_iter()
128        .map(render_appearance_tile)
129        .collect();
130    render(view! {
131        <section class="contact-sheet">
132            <h3 class="contact-sheet-heading">"Cursor appearance presets"</h3>
133            <div class="contact-sheet-row">{tiles}</div>
134        </section>
135    })
136}
ui_storybook/stories/fixtures_gallery.rs

ui_storybook/stories/
fixtures_gallery.rs
