more

book/src/SUMMARY.md

@@ -17,11 +17,12 @@
     - [Global Signals](./learn/state_management/global_signals.md)
     - [Dioxus Hooks](./learn/dioxus_hooks.md)
     - [Context](./learn/state_management/context.md)
-    - [Other Crates](./learn/state_management/other_crates.md)
+    - [Third Party](./learn/state_management/third_party.md)
 - [Async](./learn/async.md)
 - [Themes](./learn/themes.md)
 - [i18n](./learn/i18n.md)
 - [Animation](./learn/animation.md)
+- [Accessibility](./learn/accessibility.md)
 - [Router](./learn/router.md)
     - [Native Router](./learn/router/native_router.md)
     - [Animated transitions](./learn/router/animated_transitions.md)

book/src/learn/accessibility.md

@@ -0,0 +1,23 @@
+# Accessibility
+
+TODO
+
+### `use_focus` hook
+
+```rs
+fn app() -> Element {
+    let mut my_focus = use_focus();
+
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            focus_id: my_focus.attribute(),
+            onclick: move |_| my_focus.focus(),
+            label {
+                "{my_focus.is_focused()}"
+            }
+        }
+    )
+}
+```

book/src/learn/animation.md

@@ -2,21 +2,56 @@
 
 Freya comes with a `use_animation` hook to create and manage animations in declarative way.
 
-TODO
+Simple Example:
 
-Example:
 ```rs
 fn app() -> Element {
     let animation = use_animation(|ctx| {
-        ctx.auto_start(true);
-        ctx.with(AnimNum::new(0., 100.).time(50))
+        // The animation will start automatically when the component is mounted
+        ctx.auto_start(true); 
+        // Create an animable numeric value that starts from 0 and goes to 100 in 200ms
+        ctx.with(AnimNum::new(0., 100.).time(200)) 
     });
 
     let width = animation.get().read().as_f32();
 
     rsx!(rect {
-        width: "{width}",
+        width: "{width}%",
         height: "100%",
         background: "blue"
     })
-}
+}
+
+Advanced Example:
+
+```rs
+fn app() -> Element {
+    let animation = use_animation(|ctx| {
+        // The animation will start automatically when the component is mounted
+        ctx.auto_start(true); 
+
+        // Run the animation in revese direction once an iteration is done
+        ctx.on_finish(OnFinish::Reverse);
+
+        // You can register as many animations you want
+        (
+            // Create an animable numeric value that starts from 0 and goes to 100 in 500ms
+            ctx.with(AnimNum::new(0., 100.).time(500).ease(Ease::InOut)), 
+            // Create an animable color value that starts from one color and transitions to another in 400ms and has a Bounce function
+            ctx.with(
+                AnimColor::new("rgb(131, 111, 255)", "rgb(255, 167, 50)")
+                    .time(400)
+                    .function(Function::Bounce)
+            )
+        )
+    });
+
+    let (width, color) = animation.get();
+
+    rsx!(rect {
+        width: "{width.read().as_f32()}%",
+        height: "100%",
+        background: "{color.read().as_string()}",
+    })
+}
+```

book/src/learn/built_in_hooks.md

@@ -2,23 +2,4 @@
 
 Freya comes with a set hooks to simplify various tasks, such as animations, accessibility, text editing and more.
 
-You can find more about them in [their docs](https://docs.rs/freya-hooks). 
-
-Example:
-```rs
-fn app() -> Element {
-    let mut my_focus = use_focus();
-
-    rsx!(
-        rect {
-            width: "100%",
-            height: "100%",
-            focus_id: my_focus.attribute(),
-            onclick: move |_| my_focus.focus(),
-            label {
-                "{my_focus.is_focused()}"
-            }
-        }
-    )
-}
-```
+You can find more about them in [their docs](https://docs.rs/freya-hooks). 

book/src/learn/components.md

@@ -1,7 +1,7 @@
 # Components
 
 Freya apps will usually be composed of different components.
-Components are defined in teh form functions that might receive some input as **Props** and return the UI as **Element**.
+Components are defined in the form functions that might receive some input as **Props** and return the UI as **Element**.
 
 This is how a simple root component looks like:
 

book/src/learn/i18n.md

@@ -1 +1,5 @@
 # i18n
+
+You may add i18n (localization) support to your Freya app by using the [**dioxus-i18n**](https://github.com/dioxus-community/dioxus-i18n) crate.
+
+[Code Example](https://github.com/dioxus-community/dioxus-i18n/blob/main/examples/freya.rs).

book/src/learn/state_management.md

@@ -1 +1,10 @@
 # State Management
+
+Dioxus and thus Freya apps, don't have a single type of state management. 
+
+See the different options:
+
+- [Signals](./state_management/signals.md)
+- [Global Signals](./state_management/globla_signals.md)
+- [Context](./state_management/context.md)
+- [Third Party](./state_management/third_party.md)

book/src/learn/state_management/global_signals.md

@@ -1 +1,35 @@
 # Global Signals
+
+Global Signals behave like Signals but you declare them statitically and you don't need to pass them through props or context as you can just import it. 
+Main use case is for apps, not libraries. 
+
+Example:
+
+```rs
+
+static COUNT: GlobalSignal<usize> = Signal::global(|| 0);
+
+fn app() -> Element {
+    let onclick = move |_| {
+        COUNT += 1; // Modify the global signal, as if it was a normal signal
+    };
+
+    rsx!(
+        label {
+            onclick,
+            "{COUNT}" // Read the global signal
+        }
+        SomeOtherComp {}
+    )
+}
+
+#[component]
+fn SomeOtherComp() -> Element {
+    rsx!(
+        label {
+            "{COUNT}" // We can use the global signal here again
+        }
+    )
+}
+
+```

book/src/learn/state_management/third_party.md

@@ -0,0 +1,11 @@
+# Third Party
+
+### dioxus-query
+
+https://github.com/marc2332/dioxus-query
+
+
+### dioxus-radio
+
+https://github.com/dioxus-community/dioxus-radio
+

book/src/learn/themes.md

@@ -1 +1,66 @@
 # Themes
+
+All the built-in components of Freya support themes, so if you find yourself wanting to tweak a certain style attribute of a component you might want to see if it can be changed through a theme.
+
+### ThemeProvider
+
+You can pass a ThemeProvider to your whole app or maybe just a part of it by using the ThemeProvider component.
+
+Example:
+
+```rs
+// A custom theme based on the Light Theme that simply tweaks some parts of the Button theme.
+const CUSTOM_THEME: Theme = Theme {
+    button: ButtonTheme {
+        background: Cow::Borrowed("rgb(230, 0, 0)"),
+        hover_background: Cow::Borrowed("rgb(150, 0, 0)"),
+        font_theme: FontTheme {
+            color: Cow::Borrowed("white"),
+        },
+        ..LIGHT_THEME.button
+    },
+    ..LIGHT_THEME
+};
+
+fn app() -> Element {
+    rsx!(
+        /// All the components descendant of this ThemeProvider will inherit the Custom Theme
+        /// Again, this could be your whole app or maybe just a small part.
+        ThemeProvider {
+            theme: CUSTOM_THEME,
+            rect {
+                width: "100%",
+                height: "100%",
+                Button {
+                    label {
+                        "Cancel"
+                    }
+                }
+            }
+        }
+    )
+}
+```
+
+### `theme` prop
+
+Most of the components also support being tweaked via their `theme` prop and with the help of the `theme_with` macro.
+
+Example:
+
+```rs
+fn app() -> Element {
+    rsx!(
+        Button {
+            // You could pass the whole theme or maybe just a part of it
+            theme: theme_with!(ButtonTheme {
+               background: "red".into(),
+               width: "200".into(),
+            }),
+            label {
+                "Cancel"
+            }
+        }
+    )
+}
+```

examples/animation.rs

@@ -10,58 +10,31 @@ fn main() {
 }
 
 fn app() -> Element {
-    let mut toggle = use_signal(|| true);
-    let animations = use_animation(|ctx| {
+    let animation = use_animation(|ctx| {
+        // The animation will start automatically when the component is mounted
+        ctx.auto_start(true); 
+
+        // Run the animation in revese direction once an iteration is done
+        ctx.on_finish(OnFinish::Reverse);
+
+        // You can register as many animations you want
         (
-            ctx.with(
-                AnimNum::new(100., 200.)
-                    .time(500)
-                    .ease(Ease::Out)
-                    .function(Function::Expo),
-            ),
+            // Create an animable numeric value that starts from 0 and goes to 100 in 50ms
+            ctx.with(AnimNum::new(0., 100.).time(500).ease(Ease::InOut)), 
+            // Create an animable color value that starts from one color and transitions to another in 200ms and has a Bounce function
             ctx.with(
                 AnimColor::new("rgb(131, 111, 255)", "rgb(255, 167, 50)")
-                    .time(170)
-                    .ease(Ease::InOut),
-            ),
-            ctx.with(
-                AnimNum::new(0., 360.)
-                    .time(1000)
-                    .ease(Ease::Out)
-                    .function(Function::Bounce),
-            ),
-            ctx.with(
-                AnimNum::new(50., 0.)
-                    .time(550)
-                    .ease(Ease::InOut)
-                    .function(Function::Bounce),
-            ),
+                    .time(400)
+                    .function(Function::Bounce)
+            )
         )
     });
 
-    let (size, color, rotate, radius) = animations.get();
+    let (width, color) = animation.get();
 
-    rsx!(
-        rect {
-            main_align: "center",
-            cross_align: "center",
-            height: "100%",
-            width: "100%",
-            onclick: move |_| {
-                if *toggle.peek() {
-                    animations.start();
-                } else {
-                    animations.reverse();
-                }
-                toggle.toggle();
-            },
-            rect {
-                width: "{size.read().as_f32()}",
-                rotate: "{rotate.read().as_f32()}deg",
-                height: "50%",
-                background: "{color.read().as_string()}",
-                corner_radius: "{radius.read().as_f32()}"
-            }
-        }
-    )
-}
+    rsx!(rect {
+        width: "{width.read().as_f32()}%",
+        height: "100%",
+        background: "{color.read().as_string()}",
+    })
+}