Add more params to previews and split into new dir

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<Vec<String>>,
-) -> Element<'a> {
-    render!(
-        div { width: "500px",
-            TabRow {
-                onselect: |_| {},
-                selected: 0,
-                tabs: cx
-                    .bump()
-                    .alloc(tabs.0.iter().map(|label| render!(Tab { "{label}" })).collect::<Vec<_>>())
-            }
-        }
-    )
-}
-
-/// 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() {

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 }
+    )
+}

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;

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<usize>,
+
+    /// Tab elements.
+    #[lookbook(default = vec![String::from("Tab A"), String::from("Tab B")])]
+    tabs: Json<Vec<String>>,
+) -> Element<'a> {
+    render!(
+        div { width: "500px",
+            TabRow {
+                onselect: |_| {},
+                selected: selected.0,
+                tabs: cx
+                    .bump()
+                    .alloc(tabs.0.iter().map(|label| render!(Tab { "{label}" })).collect::<Vec<_>>())
+            }
+        }
+    )
+}

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 }
+    )
+}

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())
+        }
+    )
+}