Revamp Color Theme and Docs/Features (#38)

* feat: debounce * fix: fmt * revision: debounce * fix: clippy * revision: docs, compile errors * revision: debounce * fix: fmt * revision: use clone * revision: remove clone * revision: formatting * revision: manually partialeq * progress: stuff Saving progress as there is a tornado-capable storm coming * revision: docs, clippy, etc * fix: example, features * remove: old code * revision: listening * fix: doc reference * revision: add partialeq * revision: change target cfgs * update: dioxus-signals * fix: window_size * fix: readme typo * fix: signal life
DioxusLabs · Jun 16, 2024 · 2fbad1b · 2fbad1b
1 parent d49812f
commit 2fbad1b
Show file tree

Hide file tree

Showing 30 changed files with 377 additions and 236 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ sudo apt-get install xorg-dev
 You can add `dioxus-sdk` to your application by adding it to your dependencies.
 ```toml
 [dependencies]
-dioxus-sdk=  { version = "0.5", features = [] }
+dioxus-sdk = { version = "0.5", features = [] }
 ```
 
 ## License

diff --git a/examples/README.md b/examples/README.md
@@ -1,7 +1,7 @@
 # Examples
 
-### [`color_scheme`](./color_scheme/)
-Learn how to use `use_preferred_color_scheme`.
+### [`system_theme`](./system_theme/)
+Learn how to use `use_system_theme`.
 
 ### [`geolocation`](./geolocation/)
 Learn how to use the `geolocation` abstraction.

diff --git a/examples/color_scheme/Cargo.toml b/examples/color_scheme/Cargo.toml
diff --git a/examples/color_scheme/Dioxus.toml b/examples/color_scheme/Dioxus.toml
diff --git a/examples/color_scheme/src/main.rs b/examples/color_scheme/src/main.rs
diff --git a/examples/storage/src/main.rs b/examples/storage/src/main.rs
@@ -1,5 +1,4 @@
 use dioxus::prelude::*;
-use dioxus_router::prelude::*;
 use dioxus_sdk::storage::*;
 
 fn main() {

diff --git a/examples/system_theme/Cargo.toml b/examples/system_theme/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "color_scheme"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus-sdk = { workspace = true, features = ["system_theme"] }
+dioxus = { workspace = true }
+
+[features]
+web = ["dioxus/web"]
+desktop = ["dioxus/desktop"]
diff --git a/examples/color_scheme/README.md → examples/system_theme/README.md b/examples/color_scheme/README.md → examples/system_theme/README.md
diff --git a/examples/color_scheme/public/favicon.ico → examples/system_theme/public/favicon.ico b/examples/color_scheme/public/favicon.ico → examples/system_theme/public/favicon.ico
diff --git a/examples/system_theme/src/main.rs b/examples/system_theme/src/main.rs
@@ -0,0 +1,43 @@
+use dioxus::prelude::*;
+use dioxus_sdk::theme::use_system_theme;
+
+fn main() {
+    launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    let theme = use_system_theme();
+
+    let theme_text = match theme() {
+        Ok(theme) => rsx! { h3 { "Your system theme is {theme}." } },
+        Err(err) => rsx! { h3 {"Error getting system theme: {err:?}" } },
+    };
+
+    rsx!(
+        div {
+            style: "text-align: center;",
+            h1 { "🌗 Dioxus 🚀" }
+            {theme_text}
+        }
+
+        Other {}
+    )
+}
+
+#[component]
+fn Other() -> Element {
+    let theme = use_system_theme();
+
+    let theme_text = match theme() {
+        Ok(theme) => rsx! { h3 { "Your system theme x2 is {theme}." } },
+        Err(err) => rsx! { h3 {"Error getting system theme: {err:?}" } },
+    };
+
+    rsx!(
+        div {
+            style: "text-align: center;",
+            {theme_text}
+        }
+    )
+}
diff --git a/examples/use_window_size/Cargo.toml → examples/window_size/Cargo.toml b/examples/use_window_size/Cargo.toml → examples/window_size/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-dioxus-sdk = { workspace = true, features = ["use_window_size"] }
+dioxus-sdk = { workspace = true, features = ["window_size"] }
 dioxus = { workspace = true }
 
 [features]

diff --git a/examples/use_window_size/README.md → examples/window_size/README.md b/examples/use_window_size/README.md → examples/window_size/README.md
diff --git a/examples/use_window_size/public/favicon.ico → examples/window_size/public/favicon.ico b/examples/use_window_size/public/favicon.ico → examples/window_size/public/favicon.ico
diff --git a/examples/use_window_size/src/main.rs → examples/window_size/src/main.rs b/examples/use_window_size/src/main.rs → examples/window_size/src/main.rs
@@ -2,15 +2,17 @@ use dioxus::prelude::*;
 use dioxus_sdk::utils::window::{get_window_size, use_window_size};
 
 fn main() {
-    launch(app);
+    launch(App);
 }
 
-fn app() -> Element {
+#[component]
+fn App() -> Element {
     let initial_size = use_signal(get_window_size);
     let window_size = use_window_size();
 
     rsx!(
-        div { style: "text-align: center;",
+        div {
+            style: "text-align: center;",
             h1 { "↕️ Window Size Utilities ↔️" }
             h3 { "Initial Size" }
             p { "Width: {initial_size().width}" }

diff --git a/sdk/Cargo.toml b/sdk/Cargo.toml
@@ -34,14 +34,20 @@ geolocation = [
     "web-sys/PositionOptions",
     "dep:wasm-bindgen",
 ]
-color_scheme = [
+system_theme = [
+    # Shared
+    "dep:futures",
+
+    # Desktop (not linux)
+    "dep:dioxus-desktop",
+
     # Wasm
     "web-sys/Window",
     "web-sys/MediaQueryList",
     "dep:wasm-bindgen",
     "dep:wasm-bindgen-futures",
 ]
-use_window_size = [
+window_size = [
     # Shared
     "dep:futures-util",
 
@@ -70,6 +76,7 @@ storage = [
     "dep:tokio",
     "tokio/sync",
     "dep:yazi",
+    "web-sys/Storage",
     "web-sys/StorageEvent",
     "dep:serde",
     "dep:futures-util",
@@ -94,21 +101,24 @@ timing = [
 
 # CI testing
 wasm-testing = [
-    "color_scheme",
+    "system_theme",
     "geolocation",
     "channel",
-    "use_window_size",
+    "window_size",
     "timing",
     "i18n",
+    "storage",
 ]
 desktop-testing = [
+    "system_theme",
     "clipboard",
     "notifications",
     "geolocation",
     "channel",
-    "use_window_size",
+    "window_size",
     "i18n",
     "timing",
+    "storage",
 ]
 
 
@@ -131,7 +141,7 @@ notify-rust = { version = "4.8.0", optional = true }
 uuid = { version = "1.3.2", optional = true }
 async-broadcast = { version = "0.5.1", optional = true }
 
-# Used by: geolocation, storage
+# Used by: geolocation, storage, timing, window_size, system_theme
 futures = { version = "0.3.28", features = ["std"], optional = true }
 futures-util = { version = "0.3.28", optional = true }
 
@@ -144,7 +154,7 @@ unic-langid = { version = "0.9.1", features = ["serde"], optional = true }
 rustc-hash = { version = "1.1.0", optional = true }
 postcard = { version = "1.0.2", features = ["use-std"], optional = true }
 once_cell = { version = "1.17.0", optional = true }
-dioxus-signals = { version = "0.5.0-alpha.2", features = [
+dioxus-signals = { version = "0.5.1", features = [
     "serialize",
 ], optional = true }
 
@@ -170,7 +180,7 @@ windows = { version = "0.48.0", optional = true }
 
 [target.'cfg(target_family = "wasm")'.dependencies]
 
-# Used by: color_scheme, geolocation, use_window_size
+# Used by: color_scheme, geolocation, window_size
 web-sys = { version = "0.3.60", optional = true }
 wasm-bindgen = { version = "0.2.87", optional = true }
 wasm-bindgen-futures = { version = "0.4.35", optional = true }
@@ -184,18 +194,19 @@ uuid = { version = "1.3.2", features = ["js"] }
 # Used by: timing
 gloo-timers = { version = "0.3.0", optional = true, features = ["futures"] }
 
-[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+[target.'cfg(not(target_family = "wasm"))'.dependencies]
+
 # Used by: storage
 directories = { version = "4.0.1", optional = true }
 
-# Used by: use_window_size
+# Used by: window_size, system_theme
 dioxus-desktop = { workspace = true, optional = true }
 
 # # # # #
 # Docs. #
 # # # # #
 
 [package.metadata.docs.rs]
-default-target = "x86_64-pc-windows-msvc"
+targets = ["x86_64-pc-windows-msvc", "wasm32-unknown-unknown"]
 no-default-features = true
-features = ["desktop-testing"]
+features = ["desktop-testing", "wasm-testing"]
diff --git a/sdk/src/clipboard/mod.rs b/sdk/src/clipboard/mod.rs
@@ -1,3 +1,5 @@
+//! Interact with the clipboard.
+
 cfg_if::cfg_if! {
     if #[cfg(not(target_family = "wasm"))] {
         mod use_clipboard;

diff --git a/sdk/src/clipboard/use_clipboard.rs b/sdk/src/clipboard/use_clipboard.rs
@@ -42,7 +42,7 @@ impl UseClipboard {
 ///
 /// # Examples
 ///
-/// ```ignore
+/// ```rust,ignore
 /// use dioxus_sdk::clipboard::use_clipboard;
 ///
 /// // Get a handle to the clipboard

diff --git a/sdk/src/color_scheme/mod.rs b/sdk/src/color_scheme/mod.rs