Merge branch 'main' into feat/sidebar-component

.github/workflows/sponsors.yml

@@ -0,0 +1,23 @@
+name: Publish Sponsors
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: 30 15 * * 0-6
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Generate Sponsors 💖
+        uses: JamesIves/github-sponsors-readme-action@v1
+        with:
+          token: ${{ secrets.PAT }}
+          file: 'README.md'
+
+      - name: Deploy to GitHub Pages 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: main
+          folder: '.'

README.md

@@ -55,6 +55,12 @@ fn app(cx: Scope) -> Element {
 </td>
 </table>
 
+### Sponsors 🤗
+
+Thanks to my sponsors for supporting this project! 😄
+
+<!-- sponsors --><a href="https://github.com/piny4man"><img src="https://github.com/piny4man.png" width="60px" alt="Alberto Mendez" /></a><a href="https://github.com/dcrasch"><img src="https://github.com/dcrasch.png" width="60px" alt="David Rasch" /></a><!-- sponsors -->
+
 ### Want to try it? 🤔
 
 ⚠️ First, see [Environment setup](https://book.freyaui.dev/setup.html).
@@ -78,7 +84,7 @@ dioxus = { version = "0.4", features = ["macro", "hooks"], default-features = fa
 ### Features ✨
 - ⛏️ Built-in **components** (button, scroll views, switch and more) 
 - 🚇 Built-in **hooks** library (animations, text editing and more)
-- 🔍 Built-in **devtools** panel (experimental ⚠️) (experimental ⚠️)
+- 🔍 Built-in **devtools** panel (experimental ⚠️)
 - 🧰 Built-in **headless testing** runner for components
 - 🎨 **Theming** support (not extensible yet ⚠️)
 - 🛩️ Cross-platform (Windows, Linux, MacOS)

book/src/guides/style.md

@@ -139,7 +139,8 @@ The attributes that have colors as values can use the following syntax:
 #### rgb() / hsl()
 
 - With RGB: `rgb(150, 60, 20)`
-- With RGB and alpha: `rgb(150, 60, 20, 70)`
+- With RGB and alpha: `rgb(150, 60, 20, 0.7)` 
+    - Yyou can also use 0-255 for the alpha: `rgb(150, 60, 20, 70)` 
 - With HSL: `hsl(28deg, 80%, 50%)`
 - With HSL and alpha: `hsl(28deg, 80%, 50%, 25%)`
 

book/src/index.md

@@ -1,3 +1,5 @@
+> 👋 Note: This Book is being constantly updated, so, there might some features that have been added, removed or changed.
+
 # Welcome
 
 **Freya** is __work in progress__ cross-platform native GUI library for 🦀 Rust, built on top of 🧬 [Dioxus](https://dioxuslabs.com) and 🎨 [Skia](https://skia.org/) as graphics library. 

crates/components/src/accordion.rs

@@ -1,7 +1,20 @@
 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, AccordionTheme, Animation};
+use freya_hooks::{
+    use_animation, use_get_theme, use_node, use_platform, AccordionTheme, Animation,
+};
+use winit::window::CursorIcon;
+
+/// Indicates the current status of the accordion.
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum AccordionStatus {
+    /// Default state.
+    #[default]
+    Idle,
+    /// Mouse is hovering the accordion.
+    Hovering,
+}
 
 /// [`Accordion`] component properties.
 #[derive(Props)]
@@ -26,9 +39,15 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     let animation = use_animation(cx, || 0.0);
     let open = use_state(cx, || false);
     let (node_ref, size) = use_node(cx);
+    let status = use_state(cx, AccordionStatus::default);
+    let platform = use_platform(cx);
 
     let animation_value = animation.value();
-    let AccordionTheme { background, color } = theme.accordion;
+    let AccordionTheme {
+        background,
+        color,
+        border_fill,
+    } = theme.accordion;
 
     // Adapt the accordion if the body size changes
     use_memo(
@@ -58,16 +77,42 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
         open.set(!*open.get());
     };
 
+    use_on_unmount(cx, {
+        to_owned![status, platform];
+        move || {
+            if *status.current() == AccordionStatus::Hovering {
+                platform.set_cursor(CursorIcon::default());
+            }
+        }
+    });
+
+    let onmouseenter = {
+        to_owned![status, platform];
+        move |_| {
+            platform.set_cursor(CursorIcon::Hand);
+            status.set(AccordionStatus::Hovering);
+        }
+    };
+
+    let onmouseleave = move |_| {
+        platform.set_cursor(CursorIcon::default());
+        status.set(AccordionStatus::default());
+    };
+
     render!(
         rect {
+            onmouseenter: onmouseenter,
+            onmouseleave: onmouseleave,
             overflow: "clip",
             color: "{color}",
             padding: "10",
-            corner_radius: "3",
+            margin: "2 4",
+            corner_radius: "6",
             width: "100%",
             height: "auto",
             background: "{background}",
             onclick: onclick,
+            border: "1 solid {border_fill}",
             &cx.props.summary
             rect {
                 overflow: "clip",

crates/components/src/body.rs

@@ -0,0 +1,54 @@
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_hooks::{use_get_theme, BodyTheme};
+
+/// [`Body`] component properties.
+#[derive(Props)]
+pub struct BodyProps<'a> {
+    /// Inner children for the Body.
+    children: Element<'a>,
+    /// Padding for the Body.
+    #[props(default = "none".to_string(), into)]
+    padding: String,
+}
+
+/// `Body` component.
+///
+/// Usually just used one time and as a root component for all the app.
+///
+/// # Props
+/// See [`BodyProps`].
+///
+/// # Styling
+/// Inherits the [`BodyTheme`](freya_hooks::BodyTheme) theme.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app(cx: Scope) -> Element {
+///     render!(
+///         Body {
+///             label {
+///                 "Click this"
+///             }
+///         }
+///     )
+/// }
+/// ```
+///
+#[allow(non_snake_case)]
+pub fn Body<'a>(cx: Scope<'a, BodyProps<'a>>) -> Element {
+    let theme = use_get_theme(cx);
+    let BodyTheme { background, color } = theme.body;
+    let BodyProps { children, padding } = cx.props;
+
+    render!(rect {
+        width: "fill",
+        height: "fill",
+        color: "{color}",
+        background: "{background}",
+        padding: "{padding}",
+        children
+    })
+}

crates/components/src/button.rs

@@ -8,13 +8,13 @@ use winit::window::CursorIcon;
 #[derive(Props)]
 pub struct ButtonProps<'a> {
     /// Padding for the Button.
-    #[props(default = "10 14".to_string(), into)]
+    #[props(default = "8 16".to_string(), into)]
     pub padding: String,
     /// Margin for the Button.
     #[props(default = "4".to_string(), into)]
     pub margin: String,
     /// Corner radius for the Button.
-    #[props(default = "10".to_string(), into)]
+    #[props(default = "8".to_string(), into)]
     pub corner_radius: String,
     /// Width size for the Button.
     #[props(default = "auto".to_string(), into)]
@@ -130,7 +130,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
             overflow: "clip",
             role: "button",
             color: "{color}",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
+            shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
             border: "1 solid {border_fill}",
             corner_radius: "{corner_radius}",
             background: "{background}",