From 81a01b167113039e3d40684d7f495c8591d2e2ab Mon Sep 17 00:00:00 2001 From: Matt Hunzinger Date: Thu, 26 Oct 2023 18:06:15 -0400 Subject: [PATCH] Add more params to previews and split into new dir --- Cargo.lock | 2 +- lookbook/src/main.rs | 96 +++------------------------- lookbook/src/previews/button.rs | 24 +++++++ lookbook/src/previews/mod.rs | 11 ++++ lookbook/src/previews/tab_row.rs | 29 +++++++++ lookbook/src/previews/text_button.rs | 24 +++++++ lookbook/src/previews/text_field.rs | 22 +++++++ 7 files changed, 120 insertions(+), 88 deletions(-) create mode 100644 lookbook/src/previews/button.rs create mode 100644 lookbook/src/previews/mod.rs create mode 100644 lookbook/src/previews/tab_row.rs create mode 100644 lookbook/src/previews/text_button.rs create mode 100644 lookbook/src/previews/text_field.rs diff --git a/Cargo.lock b/Cargo.lock index de704c2..c28ea17 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -353,7 +353,7 @@ dependencies = [ [[package]] name = "dioxus-material" version = "0.1.0" -source = "git+https://github.com/matthunz/dioxus-material#c1c3a4505fa5c4248f718ae51ca604c5523cafed" +source = "git+https://github.com/matthunz/dioxus-material#0ccf7d564281a800b2dbded8181890504141c95a" dependencies = [ "dioxus", "dioxus-logger", diff --git a/lookbook/src/main.rs b/lookbook/src/main.rs index 76162c7..5232b8d 100644 --- a/lookbook/src/main.rs +++ b/lookbook/src/main.rs @@ -1,83 +1,8 @@ use dioxus::prelude::*; -use dioxus_material::{use_theme, Button, Tab, TabRow, TextButton, TextField}; -use lookbook::{preview, Json, LookBook}; +use lookbook::LookBook; -/// Buttons let people take action and make choices with one tap. -#[preview] -fn ButtonPreview( - cx: Scope, - /// Label for the button. - #[lookbook(default = "Label")] - label: &'a str, - - /// Background color of the container (optional). - #[lookbook(default = &*use_theme(cx).primary_color)] - background_color: &'a str, - - /// Background color of the container (optional). - #[lookbook(default = &*use_theme(cx).border_radius_medium)] - border_radius: &'a str, -) -> Element { - render!(Button { - background_color: background_color, - border_radius: border_radius, - onpress: |_| {}, - label - }) -} - -/// Tabs show multiple options for information. -#[preview] -fn TabRowPreview<'a>( - cx: Scope<'a>, - - /// Label for tab A. - #[lookbook(default = vec![String::from("Tab A")])] - tabs: Json>, -) -> Element<'a> { - render!( - div { width: "500px", - TabRow { - onselect: |_| {}, - selected: 0, - tabs: cx - .bump() - .alloc(tabs.0.iter().map(|label| render!(Tab { "{label}" })).collect::>()) - } - } - ) -} - -/// Buttons let people take action and make choices with one tap. -#[preview] -fn TextButtonPreview( - cx: Scope, - /// Label for the text button. - #[lookbook(default = "Label")] - label: &'a str, -) -> Element { - render!(TextButton { - onpress: |_| {}, - label - }) -} - -/// Text fields let users enter text into a UI. -#[preview] -fn TextFieldPreview<'a>( - cx: Scope, - /// Label for the text field. - #[lookbook(default = "Label")] - label: &'a str, -) -> Element<'a> { - let value = use_state(cx, || String::from("Text Field")); - - render!(TextField { - label: label, - value: value, - onchange: move |event: FormEvent| value.set(event.data.value.clone()) - }) -} +mod previews; +use previews::{ButtonPreview, TabRowPreview, TextButtonPreview, TextFieldPreview}; #[component] fn Home(cx: Scope) -> Element { @@ -97,15 +22,12 @@ fn Home(cx: Scope) -> Element { } fn app(cx: Scope) -> Element { - render!(LookBook { - home: Home, - previews: [ - ButtonPreview, - TabRowPreview, - TextButtonPreview, - TextFieldPreview - ] - }) + render!( + LookBook { + home: Home, + previews: [ButtonPreview, TabRowPreview, TextButtonPreview, TextFieldPreview] + } + ) } fn main() { diff --git a/lookbook/src/previews/button.rs b/lookbook/src/previews/button.rs new file mode 100644 index 0000000..fe3deec --- /dev/null +++ b/lookbook/src/previews/button.rs @@ -0,0 +1,24 @@ +use dioxus::prelude::*; +use dioxus_material::{use_theme, Button}; +use lookbook::preview; + +/// Buttons let people take action and make choices with one tap. +#[preview] +pub fn ButtonPreview( + cx: Scope, + /// Label for the button. + #[lookbook(default = "Label")] + label: &'a str, + + /// Background color of the container (optional). + #[lookbook(default = &*use_theme(cx).primary_color)] + background_color: &'a str, + + /// Background color of the container (optional). + #[lookbook(default = &*use_theme(cx).border_radius_medium)] + border_radius: &'a str, +) -> Element { + render!( + Button { background_color: background_color, border_radius: border_radius, onpress: |_| {}, label } + ) +} diff --git a/lookbook/src/previews/mod.rs b/lookbook/src/previews/mod.rs new file mode 100644 index 0000000..b80b8ef --- /dev/null +++ b/lookbook/src/previews/mod.rs @@ -0,0 +1,11 @@ +mod button; +pub use button::ButtonPreview; + +mod tab_row; +pub use tab_row::TabRowPreview; + +mod text_button; +pub use text_button::TextButtonPreview; + +mod text_field; +pub use text_field::TextFieldPreview; diff --git a/lookbook/src/previews/tab_row.rs b/lookbook/src/previews/tab_row.rs new file mode 100644 index 0000000..baa6053 --- /dev/null +++ b/lookbook/src/previews/tab_row.rs @@ -0,0 +1,29 @@ +use dioxus::prelude::*; +use dioxus_material::{Tab, TabRow}; +use lookbook::{preview, Json}; + +/// Tabs show multiple options for information. +#[preview] +pub fn TabRowPreview<'a>( + cx: Scope<'a>, + + /// Selected tab index. + #[lookbook(default = 0)] + selected: Json, + + /// Tab elements. + #[lookbook(default = vec![String::from("Tab A"), String::from("Tab B")])] + tabs: Json>, +) -> Element<'a> { + render!( + div { width: "500px", + TabRow { + onselect: |_| {}, + selected: selected.0, + tabs: cx + .bump() + .alloc(tabs.0.iter().map(|label| render!(Tab { "{label}" })).collect::>()) + } + } + ) +} diff --git a/lookbook/src/previews/text_button.rs b/lookbook/src/previews/text_button.rs new file mode 100644 index 0000000..25949bc --- /dev/null +++ b/lookbook/src/previews/text_button.rs @@ -0,0 +1,24 @@ +use dioxus::prelude::*; +use dioxus_material::{TextButton, use_theme}; +use lookbook::preview; + +/// Buttons let people take action and make choices with one tap. +#[preview] +pub fn TextButtonPreview( + cx: Scope, + /// Label for the text button. + #[lookbook(default = "Label")] + label: &'a str, + + /// Background color of the container (optional). + #[lookbook(default = &*use_theme(cx).primary_color)] + color: &'a str, + + /// Background color of the container (optional). + #[lookbook(default = &*use_theme(cx).border_radius_medium)] + border_radius: &'a str, +) -> Element { + render!( + TextButton { color: color, border_radius: border_radius, onpress: |_| {}, label } + ) +} diff --git a/lookbook/src/previews/text_field.rs b/lookbook/src/previews/text_field.rs new file mode 100644 index 0000000..651ec75 --- /dev/null +++ b/lookbook/src/previews/text_field.rs @@ -0,0 +1,22 @@ +use dioxus::prelude::*; +use dioxus_material::TextField; +use lookbook::preview; + +/// Text fields let users enter text into a UI. +#[preview] +pub fn TextFieldPreview<'a>( + cx: Scope, + /// Label for the text field. + #[lookbook(default = "Label")] + label: &'a str, +) -> Element<'a> { + let value = use_state(cx, || String::from("Text Field")); + + render!( + TextField { + label: label, + value: value, + onchange: move |event: FormEvent| value.set(event.data.value.clone()) + } + ) +}