matthunz / lookbook

Lookbook

UI preview framework for Dioxus

Demo

/// To-Do Task.
#[preview]
pub fn TaskPreview(
    /// Label of the task.
    #[lookbook(default = "Ice skating")]
    label: String,

    /// Content of the task.
    #[lookbook(default = "Central Park")]
    content: String,

    /// List of tags.
    #[lookbook(default = vec![String::from("A")])]
    tags: Json<Vec<String>>,
) -> Element {
    rsx!(
        div {
            h4 { "{label}" }
            p { "{content}" }
            div { { tags.0.iter().map(|tag| rsx!(li { "{tag}" })) } }
        }
    )
}

#[component]
fn app() -> Element {
    rsx!(LookBook {
        home: |()| rsx!("Home"),
        previews: [TaskPreview]
    })
}

fn main() {
    dioxus::launch(app)
}

Usage

First add Lookbook as a dependency to your project.

cargo add lookbook --git https://github.com/matthunz/lookbook

Then create a preview like the one above and add it to a lookbook.

fn app(cx: Scope) -> Element {
    rsx!(LookBook {
        home: |cx| rsx!("Home"),
        previews: [TaskPreview]
    })
}

fn main() {
    dioxus_web::launch(app)
}

Run with dx serve!

Running examples

Run the examples with dx serve --example {name}.

lookbook's Issues

How is this supposed to run in relation to my app?

I'm new to rust so I apologize if these are stupid questions.

In the README example, you have the dioxus_web::launch(app) in the main function of what looks like the app.

But shouldn't the main function of my app be used to actually run my app?

I checked the dioxus-material app, and it looks like the lookbook directory is a separate app from the main one. This makes sense, but it doesn't look like the lookbook app is able to directly reference the components in the main dioxus_material package. It seems to be loading them from github. If this is the case, then wouldn't that mean that the changes would need to be pushed up to github and reinstalled before they could be observed in lookbook?

So my question is, what is the best way to set up lookbook so that I can observe the changes in real time and have my actual app running concurrently with the lookbook interface?

Fix missing global Dioxus context