impulse_ui_kit/
lib.rs

1//! UI Kit framework built on top of Leptos and Thaw.
2//!
3//! Provides a simple `setup_app` function to launch your
4//! CSR (client-side rendered) application.
5
6#![feature(let_chains)]
7#![allow(non_snake_case)]
8#![warn(missing_docs)]
9#![deny(warnings, clippy::todo, clippy::unimplemented)]
10
11pub mod router;
12pub mod utils;
13
14pub mod prelude;
15
16use leptos::prelude::*;
17use impulse_thaw::ConfigProvider;
18
19/// Application entrypoint.
20///
21/// Just specify log level and needed view:
22///
23/// ```rust,ignore
24/// fn main() {
25///   setup_app(log::Level::Info, Box::new(move || { view! { <App /> }.into_any() }))
26/// }
27/// ```
28pub fn setup_app(#[allow(unused_variables)] log_level: log::Level, children: Children) {
29  console_error_panic_hook::set_once();
30  #[cfg(debug_assertions)]
31  console_log::init_with_level(log::Level::Debug).unwrap();
32  #[cfg(not(debug_assertions))]
33  console_log::init_with_level(log_level).unwrap();
34  leptos::mount::mount_to_body(move || {
35    view! { <UIApp children /> }
36  })
37}
38
39/// Also, you can use main styled `UIApp` component without `setup_app`, if you want more flexibility.
40#[component]
41pub fn UIApp(children: Children) -> impl IntoView {
42  use crate::utils::{dark_theme, light_theme};
43
44  let leptos_use::UseColorModeReturn { mode, .. } = leptos_use::use_color_mode();
45  let tw_dark_class = RwSignal::new(if let leptos_use::ColorMode::Dark = mode.get() {
46    Some("dark")
47  } else {
48    None
49  });
50  let theme = RwSignal::new({
51    if let leptos_use::ColorMode::Dark = mode.get() {
52      dark_theme()
53    } else {
54      light_theme()
55    }
56  });
57  Effect::new(move |_| {
58    theme.set(if let leptos_use::ColorMode::Dark = mode.get() {
59      dark_theme()
60    } else {
61      light_theme()
62    })
63  });
64
65  view! {
66    <ConfigProvider theme class="uikit-app-container" class:dark=move || tw_dark_class.get().is_some()>
67      <div class="uikit-app-content">{children()}</div>
68    </ConfigProvider>
69  }
70}