Merge branch 'main' into feat/table-component

Cargo.toml

@@ -27,17 +27,17 @@ freya-testing = { path = "crates/testing", version = "0.1" }
 freya-engine = { path = "crates/engine", version = "0.1" }
 torin = { path = "crates/torin", version = "0.1" }
 
-dioxus = { version = "0.4" }
+dioxus = { version = "0.4", default-features = false }
 dioxus-native-core-macro = { version = "0.4" }
 dioxus-rsx = { version = "0.4", features = ["hot_reload"] }
 dioxus-native-core = { version = "0.4", features = ["dioxus"] }
 dioxus-core-macro = { version = "0.4" }
 dioxus-hooks = { version = "0.4" }
 dioxus-core = { version = "0.4" }
 dioxus-hot-reload = { version = "0.4", features = ["file_watcher"] }
-dioxus-router = { version = "0.4" }
+dioxus-router = { version = "0.4", default-features = false }
 
-skia-safe = { version = "0.63.0", features = ["gl", "textlayout", "svg"] }
+skia-safe = { version = "0.66.3", features = ["gl", "textlayout", "svg"] }
 
 gl = "0.14.0"
 glutin = "0.30.6"

README.md

@@ -72,7 +72,7 @@ Add Freya and Dioxus as dependencies:
 
 ```toml
 freya = "0.1"
-dioxus = { version = "0.4", features = ["macro", "hooks"] }
+dioxus = { version = "0.4", features = ["macro", "hooks"], default-features = false }
 ```
 
 ### Features ✨

book/src/differences_with_dioxus.md

@@ -7,7 +7,7 @@ These are the main differences between Freya and the different Dioxus renderers
 | Category                             | Freya            | Dioxus                          |
 |--------------------------------------|------------------|---------------------------------|
 | **Elements, attributes and events**  | Custom           | HTML                            |
-| **Layout**                           | Custom ([`torin`](https://github.com/marc2332/freya/tree/main/torin))   | WebView and [`taffy`](https://github.com/DioxusLabs/taffy)               |
+| **Layout** | [`Torin`](https://github.com/marc2332/freya/tree/main/crates/torin) | WebView and [`Taffy`](https://github.com/DioxusLabs/taffy) |
 | **Renderer**                         | Skia             | WebView or WGPU                 |
 | **Components library**               | Custom           | None, but can use CSS libraries |
 | **Devtools**                         | Custom           | Provided in Webview             |

book/src/guides/animating.md

@@ -19,13 +19,12 @@ fn main() {
 }
 
  fn app(cx: Scope) -> Element {
-    let animation = use_animation(cx, 0.0);
+    let animation = use_animation(cx, || 0.0);
 
     let progress = animation.value();
 
-    use_effect(cx, (), move |_| {
+    use_memo(cx, (), move |_| {
         animation.start(Animation::new_linear(0.0..=100.0, 50));
-        async move {}
     });
 
     render!(rect {

book/src/guides/components.md

@@ -19,4 +19,4 @@ Freya comes with a set of ready to use components:
 - [`NetworkImage`](https://docs.rs/freya/latest/freya/components/fn.NetworkImage.html)
 - [`Slider`](https://docs.rs/freya/latest/freya/components/fn.Slider.html)
 - [`ThemeProvider`](https://docs.rs/freya/latest/freya/components/fn.ThemeProvider.html)
-- [`Tooltip`](https://docs.rs/freya/latest/freya/components/fn.Tooltip.html)
+- [`Tooltip`](https://docs.rs/freya/latest/freya/components/fn.Tooltip.html)

book/src/guides/getting_started.md

@@ -24,7 +24,7 @@ edition = "2021"
 
 [dependencies]
 freya = "0.1"
-dioxus = { version = "0.4", features = ["macro", "hooks"] }
+dioxus = { version = "0.4", features = ["macro", "hooks"], default-features = false }
 ```
 
 ### src/main.rs

crates/components/Cargo.toml

@@ -31,6 +31,7 @@ dioxus-router = { workspace = true }
 
 winit = { workspace = true }
 tokio = { workspace = true }
+tracing = { workspace = true }
 
 open = "1"
 reqwest = { version = "0.11.13", features = ["json"] }

crates/components/src/accordion.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_animation, use_get_theme, use_node, Animation};
+use freya_hooks::{use_animation, use_get_theme, use_node, AccordionTheme, Animation};
 
 /// [`Accordion`] component properties.
 #[derive(Props)]
@@ -23,15 +23,15 @@ pub struct AccordionProps<'a> {
 #[allow(non_snake_case)]
 pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     let theme = use_get_theme(cx);
-    let accordion_theme = &theme.accordion;
-    let animation = use_animation(cx, 0.0);
+    let animation = use_animation(cx, || 0.0);
     let open = use_state(cx, || false);
     let (node_ref, size) = use_node(cx);
 
     let animation_value = animation.value();
+    let AccordionTheme { background, color } = theme.accordion;
 
     // Adapt the accordion if the body size changes
-    use_effect(
+    use_memo(
         cx,
         &(
             size.area.width(),
@@ -44,7 +44,6 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
                 if (height as f64) < animation.value() && !animating {
                     animation.set_value(size.area.height() as f64);
                 }
-                async move {}
             }
         },
     );
@@ -62,12 +61,12 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     render!(
         rect {
             overflow: "clip",
-            color: "{accordion_theme.color}",
+            color: "{color}",
             padding: "10",
             corner_radius: "3",
             width: "100%",
             height: "auto",
-            background: "{accordion_theme.background}",
+            background: "{background}",
             onclick: onclick,
             &cx.props.summary
             rect {

crates/components/src/dropdown.rs

@@ -170,9 +170,8 @@ where
     let color = theme.dropdown.font_theme.color;
 
     // Update the provided value if the passed value changes
-    use_effect(cx, &cx.props.value, move |value| {
+    use_memo(cx, &cx.props.value, move |value| {
         *selected.write() = value;
-        async move {}
     });
 
     // Close the dropdown if clicked anywhere

crates/components/src/external_link.rs

@@ -47,7 +47,6 @@ pub struct ExternalLinkProps<'a> {
 #[allow(non_snake_case)]
 pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
     let theme = use_get_theme(cx);
-    let theme = &theme.external_link;
     let is_hovering = use_state(cx, || false);
     let show_tooltip = cx.props.show_tooltip.unwrap_or(true);
 
@@ -68,7 +67,7 @@ pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
     };
 
     let color = if *is_hovering.get() {
-        theme.highlight_color
+        theme.external_link.highlight_color
     } else {
         "inherit"
     };

crates/components/src/gesture_area.rs

@@ -62,7 +62,7 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>;
 pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
     let touch_events = use_ref::<EventsQueue>(cx, VecDeque::new);
 
-    use_effect(cx, touch_events, move |_| {
+    use_memo(cx, touch_events, move |_| {
         // Keep the touch events queue under a certain size
         if touch_events.read().len() > MAX_EVENTS_QUEUE {
             touch_events.write_silent().pop_front();
@@ -132,8 +132,6 @@ pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
                 _ => {}
             }
         }
-
-        async move {}
     });
 
     let ontouchcancel = |e: TouchEvent| {

crates/components/src/graph.rs

@@ -45,7 +45,7 @@ pub struct GraphProps {
 pub fn Graph(cx: Scope<GraphProps>) -> Element {
     let platform = use_platform(cx);
 
-    use_effect(cx, (cx.props,), move |_| async move {
+    use_memo(cx, (cx.props,), move |_| {
         platform.send(EventMessage::RequestRerender)
     });
 

crates/components/src/input.rs

@@ -3,18 +3,37 @@ use crate::ScrollView;
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{KeyboardData, MouseEvent};
+use freya_hooks::ButtonTheme;
+use freya_hooks::FontTheme;
 use freya_hooks::{
     use_editable, use_focus, use_get_theme, EditableConfig, EditableEvent, EditableMode, TextEditor,
 };
 use winit::window::CursorIcon;
+/// Enum to declare is [`Input`] hidden.
+#[derive(Default)]
+pub enum InputMode {
+    /// The input text is shown
+    #[default]
+    Shown,
+    /// The input text is obfuscated with a character
+    Hidden(char),
+}
 
+impl InputMode {
+    pub fn new_password() -> Self {
+        Self::Hidden('*')
+    }
+}
 /// [`Input`] component properties.
 #[derive(Props)]
 pub struct InputProps<'a> {
     /// Current value of the Input
     pub value: String,
     /// Handler for the `onchange` event.
     pub onchange: EventHandler<'a, String>,
+    /// Is input hidden with a character. By default input text is shown.
+    #[props(default = InputMode::Shown, into)]
+    hidden: InputMode,
     /// Width of the Input. Default 100.
     #[props(default = "150".to_string(), into)]
     width: String,
@@ -65,21 +84,22 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
     let theme = use_get_theme(cx);
     let focus_manager = use_focus(cx);
 
-    let text = &cx.props.value;
-    let button_theme = &theme.button;
+    let text = match cx.props.hidden {
+        InputMode::Hidden(ch) => ch.to_string().repeat(cx.props.value.len()),
+        InputMode::Shown => cx.props.value.clone(),
+    };
     let cursor_attr = editable.cursor_attr(cx);
     let highlights_attr = editable.highlights_attr(cx, 0);
     let width = &cx.props.width;
     let height = &cx.props.height;
     let max_lines = &cx.props.max_lines;
 
-    use_effect(cx, &(cx.props.value.to_string(),), {
+    use_memo(cx, &(cx.props.value.to_string(),), {
         to_owned![editable];
         move |(text,)| {
             editable.editor().with_mut(|editor| {
                 editor.set(&text);
             });
-            async move {}
         }
     });
 
@@ -122,8 +142,11 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
     } else {
         "none".to_string()
     };
-    let background = button_theme.background;
-    let color = button_theme.font_theme.color;
+    let ButtonTheme {
+        background,
+        font_theme: FontTheme { color, .. },
+        ..
+    } = theme.button;
 
     render!(
         CursorArea {

crates/components/src/lib.rs

@@ -13,6 +13,7 @@ mod graph;
 mod input;
 mod loader;
 mod network_image;
+mod progress_bar;
 mod scroll_views;
 mod slider;
 mod switch;
@@ -32,6 +33,7 @@ pub use graph::*;
 pub use input::*;
 pub use loader::*;
 pub use network_image::*;
+pub use progress_bar::*;
 pub use scroll_views::*;
 pub use slider::*;
 pub use switch::*;

crates/components/src/loader.rs

@@ -2,7 +2,7 @@ use std::time::Duration;
 
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::use_get_theme;
+use freya_hooks::{use_get_theme, LoaderTheme};
 use tokio::time::interval;
 
 /// [`Loader`] component properties. Currently empty.
@@ -22,7 +22,10 @@ pub fn Loader(cx: Scope<LoaderProps>) -> Element {
     let theme = use_get_theme(cx);
     let degrees = use_state(cx, || 0);
 
-    let loader_theme = theme.loader;
+    let LoaderTheme {
+        primary_color,
+        secondary_color,
+    } = theme.loader;
 
     use_effect(cx, (), move |_| {
         to_owned![degrees];
@@ -45,8 +48,8 @@ pub fn Loader(cx: Scope<LoaderProps>) -> Element {
         height: "31",
         svg_content: r#"
                 <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M15.5235 27.6652C22.2292 27.6652 27.6652 22.2292 27.6652 15.5235C27.6652 8.81783 22.2292 3.38182 15.5235 3.38182C8.81783 3.38182 3.38182 8.81783 3.38182 15.5235C3.38182 22.2292 8.81783 27.6652 15.5235 27.6652Z" stroke="{loader_theme.primary_color}"  stroke-width="4"/>
-                    <path d="M27.6652 15.5235C27.6652 8.81859 22.2284 3.38182 15.5235 3.38182" stroke="{loader_theme.secondary_color}" stroke-width="4"/>
+                    <path d="M15.5235 27.6652C22.2292 27.6652 27.6652 22.2292 27.6652 15.5235C27.6652 8.81783 22.2292 3.38182 15.5235 3.38182C8.81783 3.38182 3.38182 8.81783 3.38182 15.5235C3.38182 22.2292 8.81783 27.6652 15.5235 27.6652Z" stroke="{primary_color}"  stroke-width="4"/>
+                    <path d="M27.6652 15.5235C27.6652 8.81859 22.2284 3.38182 15.5235 3.38182" stroke="{secondary_color}" stroke-width="4"/>
                 </svg>
             "#
     })