ui_storybook/stories/
cursor.rs

1//! Cursor Studio stories — UI-20 (`CursorStudioShell` + style picker) /
2//! UI-21 (`CursorPreviewCanvas` + appearance controls).
3
4use leptos::prelude::*;
5
6use crate::components::cursor::{
7    CursorAppearancePanel, CursorPreviewBackend, CursorPreviewCanvas, CursorStudioShell,
8    CursorStyle, CursorStylePicker,
9};
10use crate::fixtures::cursor::{
11    sample_cursor_appearance, sample_cursor_appearance_pulse, sample_cursor_appearance_spotlight,
12    sample_cursor_appearance_trail_on, sample_cursor_studio_shell, sample_cursor_style_picker,
13    sample_cursor_style_picker_disabled,
14};
15
16use super::{Story, StoryViewport, render};
17
18const PICKER_W: u16 = 720;
19const PICKER_H: u16 = 140;
20const SHELL_W: u16 = 960;
21const SHELL_H: u16 = 600;
22
23fn fixed(w: u16, h: u16) -> StoryViewport {
24    StoryViewport::Fixed {
25        width: w,
26        height: h,
27    }
28}
29
30fn s(
31    id: &'static str,
32    title: &'static str,
33    viewport: StoryViewport,
34    render: fn() -> String,
35) -> Story {
36    Story {
37        id,
38        category: "Cursor",
39        title,
40        viewport,
41        render,
42    }
43}
44
45/// All cursor-surface stories.
46#[must_use]
47pub fn stories() -> Vec<Story> {
48    vec![
49        s(
50            "cursor-style-picker-default",
51            "Cursor style picker — default",
52            fixed(PICKER_W, PICKER_H),
53            render_picker_default,
54        ),
55        s(
56            "cursor-style-picker-arrow-selected",
57            "Cursor style picker — Arrow selected",
58            fixed(PICKER_W, PICKER_H),
59            render_picker_arrow,
60        ),
61        s(
62            "cursor-style-picker-disabled",
63            "Cursor style picker — all disabled",
64            fixed(PICKER_W, PICKER_H),
65            render_picker_disabled,
66        ),
67        s(
68            "cursor-studio-shell",
69            "Cursor Studio shell",
70            fixed(SHELL_W, SHELL_H),
71            render_shell,
72        ),
73        s(
74            "cursor-preview-arrow-ring",
75            "Cursor preview — arrow with ring",
76            fixed(360, 240),
77            render_preview_light,
78        ),
79        s(
80            "cursor-preview-dark-bg",
81            "Cursor preview — dark background",
82            fixed(360, 240),
83            render_preview_dark,
84        ),
85        s(
86            "cursor-appearance-panel-default",
87            "Cursor appearance — default",
88            fixed(320, 480),
89            render_appearance_default,
90        ),
91        s(
92            "cursor-appearance-panel-pulse",
93            "Cursor appearance — Pulse effect",
94            fixed(320, 480),
95            render_appearance_pulse,
96        ),
97        s(
98            "cursor-appearance-panel-spotlight",
99            "Cursor appearance — Spotlight effect",
100            fixed(320, 480),
101            render_appearance_spotlight,
102        ),
103        s(
104            "cursor-appearance-panel-trail-on",
105            "Cursor appearance — trail on",
106            fixed(320, 480),
107            render_appearance_trail,
108        ),
109    ]
110}
111
112fn render_picker_default() -> String {
113    render(view! { <CursorStylePicker view=sample_cursor_style_picker(CursorStyle::System) /> })
114}
115
116fn render_picker_arrow() -> String {
117    render(view! { <CursorStylePicker view=sample_cursor_style_picker(CursorStyle::Arrow) /> })
118}
119
120fn render_picker_disabled() -> String {
121    render(view! { <CursorStylePicker view=sample_cursor_style_picker_disabled() /> })
122}
123
124fn render_shell() -> String {
125    render(view! { <CursorStudioShell view=sample_cursor_studio_shell() /> })
126}
127
128fn render_preview_light() -> String {
129    render(view! {
130        <CursorPreviewCanvas backend=CursorPreviewBackend::CssFallback />
131    })
132}
133
134fn render_preview_dark() -> String {
135    render(view! {
136        <CursorPreviewCanvas
137            backend=CursorPreviewBackend::CssFallback
138            card_background="linear-gradient(135deg,#0f172a,#1e293b)"
139        />
140    })
141}
142
143fn render_appearance_default() -> String {
144    render(view! { <CursorAppearancePanel view=sample_cursor_appearance() /> })
145}
146
147fn render_appearance_pulse() -> String {
148    render(view! { <CursorAppearancePanel view=sample_cursor_appearance_pulse() /> })
149}
150
151fn render_appearance_spotlight() -> String {
152    render(view! { <CursorAppearancePanel view=sample_cursor_appearance_spotlight() /> })
153}
154
155fn render_appearance_trail() -> String {
156    render(view! { <CursorAppearancePanel view=sample_cursor_appearance_trail_on() /> })
157}
ui_storybook/stories/cursor.rs

ui_storybook/stories/
cursor.rs
