Components preview POC

Cargo.toml

@@ -4,7 +4,24 @@ version = "0.0.0"
 edition = "2021"
 
 [workspace]
-members = ["crates/renderer", "crates/state", "crates/freya", "crates/elements", "crates/components", "crates/hooks", "crates/common", "crates/core", "crates/testing", "crates/devtools", "crates/torin", "crates/engine", "./examples/installer",  "crates/native-core",  "crates/native-core-macro"]
+members = [
+    "crates/renderer",
+    "crates/state",
+    "crates/freya",
+    "crates/elements",
+    "crates/components",
+    "crates/hooks",
+    "crates/common",
+    "crates/core",
+    "crates/testing",
+    "crates/devtools",
+    "crates/torin",
+    "crates/engine",
+    "./examples/installer",
+    "./examples/all-components",
+    "crates/native-core",
+    "crates/native-core-macro",
+]
 
 [features]
 log = ["freya/log"]
@@ -39,15 +56,21 @@ torin = { path = "crates/torin", version = "0.2" }
 freya-native-core-macro = { path = "crates/native-core-macro", version = "0.2" }
 freya-native-core = { path = "crates/native-core", version = "0.2" }
 
-dioxus = { version = "0.5", default-features = false, features = ["macro", "signals", "hooks"]}
+dioxus = { version = "0.5", default-features = false, features = [
+    "macro",
+    "signals",
+    "hooks",
+] }
 dioxus-rsx = { version = "0.5", features = ["hot_reload"] }
 dioxus-core-macro = { version = "0.5" }
 dioxus-hooks = { version = "0.5" }
 dioxus-signals = { version = "0.5" }
 dioxus-core = { version = "0.5" }
-dioxus-hot-reload = { version = "0.5", features = ["file_watcher"], default-features = false }
+dioxus-hot-reload = { version = "0.5", features = [
+    "file_watcher",
+], default-features = false }
 dioxus-router = { version = "0.5", default-features = false }
-dioxus-sdk = { version = "0.5", features = ["clipboard"]}
+dioxus-sdk = { version = "0.5", features = ["clipboard"] }
 
 skia-safe = { version = "0.75.0", features = ["gl", "textlayout", "svg"] }
 
@@ -56,14 +79,23 @@ glutin = "0.32.0"
 glutin-winit = "0.5.0"
 raw-window-handle = "0.6.0"
 winit = "0.30.0"
-tokio = { version = "1.33.0", features = ["sync", "rt-multi-thread", "time", "macros"] }
-accesskit = { version = "0.16.0", features = ["serde"]}
+tokio = { version = "1.33.0", features = [
+    "sync",
+    "rt-multi-thread",
+    "time",
+    "macros",
+] }
+accesskit = { version = "0.16.0", features = ["serde"] }
 accesskit_winit = "0.22.0"
-shipyard = { version = "0.6.2", features = ["proc", "std", "parallel"], default-features = false }
+shipyard = { version = "0.6.2", features = [
+    "proc",
+    "std",
+    "parallel",
+], default-features = false }
 smallvec = "1.13.1"
 
 euclid = "0.22.9"
-uuid = { version = "1.4.1", features = ["v4"]}
+uuid = { version = "1.4.1", features = ["v4"] }
 futures-util = "0.3.30"
 futures-task = "0.3.30"
 tracing = "0.1"
@@ -72,7 +104,7 @@ rustc-hash = "2.0.0"
 
 [dev-dependencies]
 skia-safe = { workspace = true }
-tokio = { workspace = true, features = ["fs"]}
+tokio = { workspace = true, features = ["fs"] }
 dioxus = { workspace = true }
 freya = { workspace = true }
 freya-core = { workspace = true }

examples/all-components/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "freya-design-system-example"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+freya = { workspace = true }
+dioxus = { workspace = true }
+dioxus-router = { workspace = true }
+strum = { version = "0.26", features = ["derive"] }
+itertools = "0.13.0"

examples/all-components/src/ds/components/accordion.rs

@@ -0,0 +1,37 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsAccordion() -> Element {
+    rsx!(
+        Accordion {
+            summary: rsx!(AccordionSummary {
+                label {
+                    "Accordion 1"
+                }
+            }),
+            AccordionBody {
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+                label {
+                    "This is the body"
+                }
+            }
+        }
+    )
+}

examples/all-components/src/ds/components/activable_route.rs

@@ -0,0 +1,15 @@
+use freya::prelude::*;
+
+use crate::Route;
+
+#[allow(non_snake_case)]
+pub fn DsActivableRoute() -> Element {
+    rsx!(
+        ActivableRoute {
+            route: Route::Home,
+            label {
+                "ActivableRoute 1"
+            }
+        }
+    )
+}

examples/all-components/src/ds/components/button.rs

@@ -0,0 +1,23 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsButton() -> Element {
+    rsx!(
+        Button {
+            onclick: move |_| {
+                println!("button clicked")
+            },
+            label {
+                "A button"
+            }
+        }
+    )
+}
+
+#[component]
+pub fn ButtonThemeEditor(theme: Signal<Theme>) -> Element {
+    rsx!(Input {
+        value: theme().button.background,
+        onchange: move |e: String| { theme.write().button.background = e.into() }
+    })
+}

examples/all-components/src/ds/components/choice.rs

@@ -0,0 +1,104 @@
+use std::collections::HashSet;
+
+use freya::prelude::*;
+
+#[derive(PartialEq, Eq, Hash)]
+enum Choice {
+    First,
+    Second,
+    Third,
+}
+
+#[allow(non_snake_case)]
+pub fn DsCheckbox() -> Element {
+    let mut selected = use_signal::<HashSet<Choice>>(HashSet::default);
+
+    rsx!(
+        Tile {
+            onselect: move |_| {
+                if selected.read().contains(&Choice::First) {
+                    selected.write().remove(&Choice::First);
+                } else {
+                    selected.write().insert(Choice::First);
+                }
+            },
+            leading: rsx!(
+                Checkbox {
+                    selected: selected.read().contains(&Choice::First),
+                },
+            ),
+            label { "First choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                if selected.read().contains(&Choice::Second) {
+                    selected.write().remove(&Choice::Second);
+                } else {
+                    selected.write().insert(Choice::Second);
+                }
+            },
+            leading: rsx!(
+                Checkbox {
+                    selected: selected.read().contains(&Choice::Second),
+                },
+            ),
+            label { "Second choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                if selected.read().contains(&Choice::Third) {
+                    selected.write().remove(&Choice::Third);
+                } else {
+                    selected.write().insert(Choice::Third);
+                }
+            },
+            leading: rsx!(
+                Checkbox {
+                    selected: selected.read().contains(&Choice::Third),
+                },
+            ),
+            label { "Third choice" }
+        }
+    )
+}
+
+#[allow(non_snake_case)]
+pub fn DsRadio() -> Element {
+    let mut selected = use_signal(|| Choice::First);
+
+    rsx!(
+        Tile {
+            onselect: move |_| {
+                selected.set(Choice::First);
+            },
+            leading: rsx!(
+                Radio {
+                    selected: *selected.read() == Choice::First,
+                },
+            ),
+            label { "First choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                selected.set(Choice::Second);
+            },
+            leading: rsx!(
+                Radio {
+                    selected: *selected.read() == Choice::Second,
+                },
+            ),
+            label { "Second choice" }
+        }
+        Tile {
+            onselect: move |_| {
+                selected.set(Choice::Third);
+            },
+            leading: rsx!(
+                Radio {
+                    selected: *selected.read() == Choice::Third,
+                },
+            ),
+            label { "Third choice" }
+        }
+    )
+}

examples/all-components/src/ds/components/drag_drop.rs

@@ -0,0 +1,37 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsDragProvider() -> Element {
+    let column = vec!["I Like".to_string(), "Rust".to_string(), "🦀!".to_string()];
+
+    rsx!(
+        DragProvider::<String> {
+            DropZone {
+                ondrop: move |data: String| {
+                    println!("drop {data}");
+                },
+                rect {
+                    width: "100%",
+                    height: "100%",
+                    direction: "vertical",
+                    for el in column {
+                        DragZone {
+                            data: el.to_string(),
+                            drag_element: rsx!(
+                                label {
+                                    width: "200",
+                                    font_size: "20",
+                                "Moving '{el}'"
+                                }
+                            ),
+                            label {
+                                font_size: "30",
+                                "{el}"
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    )
+}

examples/all-components/src/ds/components/dropdown.rs

@@ -0,0 +1,29 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsDropdown() -> Element {
+    let values = use_hook(|| {
+        vec![
+            "First Option".to_string(),
+            "Second Option".to_string(),
+            "Rust".to_string(),
+        ]
+    });
+    let mut selected_dropdown = use_signal(|| "First Option".to_string());
+
+    rsx!(
+        Dropdown {
+            value: selected_dropdown.read().clone(),
+            for ch in values {
+                DropdownItem {
+                    value: ch.clone(),
+                    onclick: {
+                        to_owned![ch];
+                        move |_| selected_dropdown.set(ch.clone())
+                    },
+                    label { "{ch}" }
+                }
+            }
+        }
+    )
+}

examples/all-components/src/ds/components/icon.rs

@@ -0,0 +1,19 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsArrowIcon() -> Element {
+    rsx!(ArrowIcon {
+        fill: "black",
+        rotate: "0"
+    })
+}
+
+#[allow(non_snake_case)]
+pub fn DsCrossIcon() -> Element {
+    rsx!(CrossIcon { fill: "black" })
+}
+
+#[allow(non_snake_case)]
+pub fn DsTickIcon() -> Element {
+    rsx!(TickIcon { fill: "black" })
+}

examples/all-components/src/ds/components/input.rs

@@ -0,0 +1,18 @@
+use freya::prelude::*;
+
+#[allow(non_snake_case)]
+pub fn DsInput() -> Element {
+    let mut value = use_signal(String::new);
+
+    rsx!(
+        label {
+            "Value: {value}"
+        }
+        Input {
+            value: value.read().clone(),
+            onchange: move |e| {
+                 value.set(e)
+            }
+        }
+    )
+}