Components cli

Cargo.toml

@@ -8,23 +8,8 @@ dioxus-primitives = { path = "primitives" }
 dioxus = "^0.7.0-rc.0"
 tracing = { version = "0.1", features = ["std"] }
 
-[profile]
-
-[profile.wasm-dev]
-inherits = "dev"
-opt-level = 1
-
-[profile.server-dev]
-inherits = "dev"
-
-[profile.android-dev]
-inherits = "dev"
-
-# Same as in the Stable section
-[profile.release]
-opt-level = "z"
-debug = false
-lto = true
-codegen-units = 1
-panic = "abort"
-incremental = false
+[patch.crates-io]
+dioxus = { git = "https://github.com/DioxusLabs/dioxus" }
+dioxus-core = { git = "https://github.com/DioxusLabs/dioxus" }
+dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus" }
+generational-box = { git = "https://github.com/DioxusLabs/dioxus" }

complaints.md

@@ -6,22 +6,22 @@ https://github.com/DioxusLabs/dioxus/issues/3919
 ### Setting default of signal prop is verbose.
 https://github.com/DioxusLabs/dioxus/issues/3920
 
-It's verbose to set a `Signal` or `ReadOnlySignal`'s default value through props.
+It's verbose to set a `Signal` or `ReadSignal`'s default value through props.
 ```rust
 #[derive(Props, Clone, PartialEq)]
 pub struct SomeProps {
 
     // This sets bool to be false
-    #[props(default)] 
-    value: ReadOnlySignal<bool>,
+    #[props(default)]
+    value: ReadSignal<bool>,
 
-    // This is what I'd like, except it wants a ReadOnlySignal
-    #[props(default = true)] 
-    value: ReadOnlySignal<bool>,
+    // This is what I'd like, except it wants a ReadSignal
+    #[props(default = true)]
+    value: ReadSignal<bool>,
 
     // Instead you have to do this:
-    #[props(default = ReadOnlySignal::new(Signal::new(true)))]
-    value: ReadOnlySignal<bool>,
+    #[props(default = ReadSignal::new(Signal::new(true)))]
+    value: ReadSignal<bool>,
 
     // Same for a regular signal:
     #[props(default = Signal::new(true))]
@@ -31,13 +31,13 @@ pub struct SomeProps {
 
 ### No way to know a component or element's parent, siblings, or children.
 
-Some stuff relies on knowing their surrounding elements for proper behavior. 
+Some stuff relies on knowing their surrounding elements for proper behavior.
 
 Take [radix-primitives' switch](https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/switch/src/switch.tsx#L51) as an example. It detects when the switch is in a form and creates an input so that the switch's value bubbles with the form submit event.
 
 This is also an issue with keybind navigation - we can give components ids to internally track them through a parent context, but how do we know which order they are in for navigation?
 
-At a minimum, I need the ordering index. This could be a special prop similar to `children`. 
+At a minimum, I need the ordering index. This could be a special prop similar to `children`.
 
 ### Need Portals
 Components should behave as if they are still a child of the parent of the "portaled" item. Same scope basically - context is still consumable as if it was a child.
@@ -73,16 +73,16 @@ pub fn App() -> Element {
 
 ```
 
-### `From<Signal<T>>` Is Not Implemented For `Option<ReadOnlySignal<T>>`
+### `From<Signal<T>>` Is Not Implemented For `Option<ReadSignal<T>>`
 
-### `From<T>` Is Not Implemented For `Option<ReadOnlySignal<T>>`
+### `From<T>` Is Not Implemented For `Option<ReadSignal<T>>`
 `T` can already be converted to `Option<Signal<T>>` when provided thru props.
-This however doesn't work for `Option<ReadOnlySignal<T>>`.
+This however doesn't work for `Option<ReadSignal<T>>`.
 
 ### Number Props Don't Type Infer
 Normally Rust would automatically determine that a number should be of type thru inference but for props it doesn't work when the prop is a signal.
 
-`index: ReadOnlySignal<usize>,` fails
+`index: ReadSignal<usize>,` fails
 `index: usize,` works
 
 ```rust

component.json

@@ -0,0 +1,37 @@
+{
+  "name": "dioxus-components",
+  "description": "",
+  "members": [
+    "preview/src/components/tabs",
+    "preview/src/components/dropdown_menu",
+    "preview/src/components/navbar",
+    "preview/src/components/form",
+    "preview/src/components/tooltip",
+    "preview/src/components/calendar",
+    "preview/src/components/menubar",
+    "preview/src/components/progress",
+    "preview/src/components/hover_card",
+    "preview/src/components/input",
+    "preview/src/components/accordion",
+    "preview/src/components/separator",
+    "preview/src/components/toast",
+    "preview/src/components/toolbar",
+    "preview/src/components/checkbox",
+    "preview/src/components/label",
+    "preview/src/components/slider",
+    "preview/src/components/toggle",
+    "preview/src/components/dialog",
+    "preview/src/components/alert_dialog",
+    "preview/src/components/popover",
+    "preview/src/components/radio_group",
+    "preview/src/components/button",
+    "preview/src/components/collapsible",
+    "preview/src/components/avatar",
+    "preview/src/components/switch",
+    "preview/src/components/select",
+    "preview/src/components/toggle_group",
+    "preview/src/components/context_menu",
+    "preview/src/components/aspect_ratio",
+    "preview/src/components/scroll_area"
+  ]
+}

preview/build.rs

@@ -13,11 +13,11 @@ fn main() {
         walk_highlight_dir(&folder_path, &out_dir).unwrap();
     }
 
-    // Process the main theme.css file
-    let theme_css_path = std::path::PathBuf::from("assets/theme.css");
+    // Process the main dx-components-theme.css file
+    let theme_css_path = std::path::PathBuf::from("assets/dx-components-theme.css");
     for theme in ["base16-ocean.dark", "base16-ocean.light"] {
         let html = highlight_file_to(&theme_css_path, theme);
-        let out_file_path = out_dir.join(format!("theme.css.{theme}.html"));
+        let out_file_path = out_dir.join(format!("dx-components-theme.css.{theme}.html"));
         std::fs::write(out_file_path, html).unwrap();
     }
 }

preview/src/components/accordion/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "accordion",
+  "description": "An accordion component for displaying collapsible content sections.",
+  "authors": ["Evan Almloff"],
+  "exclude": ["variants", "docs.md", "component.json"],
+  "cargoDependencies": [
+    {
+      "name": "dioxus-primitives",
+      "git": "https://github.com/DioxusLabs/components"
+    }
+  ],
+  "globalAssets": ["../../../assets/dx-components-theme.css"]
+}

preview/src/components/accordion/component.rs

@@ -6,10 +6,7 @@ use dioxus_primitives::accordion::{
 #[component]
 pub fn Accordion(props: AccordionProps) -> Element {
     rsx! {
-        document::Link {
-            rel: "stylesheet",
-            href: asset!("/src/components/accordion/style.css"),
-        }
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
         accordion::Accordion {
             class: "accordion",
             width: "15rem",
@@ -43,7 +40,8 @@ pub fn AccordionItem(props: AccordionItemProps) -> Element {
 #[component]
 pub fn AccordionTrigger(props: AccordionTriggerProps) -> Element {
     rsx! {
-        accordion::AccordionTrigger { class: "accordion-trigger",
+        accordion::AccordionTrigger {
+            class: "accordion-trigger",
             id: props.id,
             attributes: props.attributes,
             {props.children}
@@ -60,7 +58,8 @@ pub fn AccordionTrigger(props: AccordionTriggerProps) -> Element {
 #[component]
 pub fn AccordionContent(props: AccordionContentProps) -> Element {
     rsx! {
-        accordion::AccordionContent { class: "accordion-content",
+        accordion::AccordionContent {
+            class: "accordion-content",
             style: "--collapsible-content-width: 140px",
             id: props.id,
             attributes: props.attributes,

preview/src/components/accordion/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

preview/src/components/accordion/variants/main/mod.rs

@@ -3,19 +3,13 @@ use dioxus::prelude::*;
 #[component]
 pub fn Demo() -> Element {
     rsx! {
-        Accordion {
-            allow_multiple_open: false,
-            horizontal: false,
+        Accordion { allow_multiple_open: false, horizontal: false,
             for i in 0..4 {
-                AccordionItem {
-                    index: i,
-                    AccordionTrigger {
-                        "the quick brown fox"
-                    }
+                AccordionItem { index: i,
+                    AccordionTrigger { "the quick brown fox" }
                     AccordionContent {
                         div { padding_bottom: "1rem",
-                            p {
-                                padding: "0",
+                            p { padding: "0",
                                 "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
                             }
                         }

preview/src/components/alert_dialog/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "alert_dialog",
+  "description": "An alert dialog component for displaying important messages and requiring user confirmation.",
+  "authors": ["Evan Almloff"],
+  "exclude": ["variants", "docs.md", "component.json"],
+  "cargoDependencies": [
+    {
+      "name": "dioxus-primitives",
+      "git": "https://github.com/DioxusLabs/components"
+    }
+  ],
+  "globalAssets": ["../../../assets/dx-components-theme.css"]
+}

preview/src/components/alert_dialog/component.rs

@@ -8,10 +8,7 @@ use dioxus_primitives::alert_dialog::{
 #[component]
 pub fn AlertDialogRoot(props: AlertDialogRootProps) -> Element {
     rsx! {
-        document::Link {
-            rel: "stylesheet",
-            href: asset!("/src/components/alert_dialog/style.css"),
-        }
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
         alert_dialog::AlertDialogRoot {
             class: "alert-dialog-backdrop",
             id: props.id,
@@ -49,11 +46,7 @@ pub fn AlertDialogDescription(props: AlertDialogDescriptionProps) -> Element {
 #[component]
 pub fn AlertDialogActions(props: AlertDialogActionsProps) -> Element {
     rsx! {
-        alert_dialog::AlertDialogActions {
-            class: "alert-dialog-actions",
-            attributes: props.attributes,
-            {props.children}
-        }
+        alert_dialog::AlertDialogActions { class: "alert-dialog-actions", attributes: props.attributes, {props.children} }
     }
 }
 

preview/src/components/alert_dialog/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

preview/src/components/alert_dialog/variants/main/mod.rs

@@ -10,24 +10,19 @@ pub fn Demo() -> Element {
 
     rsx! {
         Button {
-            type: "button",
+            r#type: "button",
             "data-style": "outline",
             style: "margin-bottom: 1.5rem;",
             onclick: move |_| open.set(true),
             "Show Alert Dialog"
         }
-        AlertDialogRoot {
-            open: open(),
-            on_open_change: move |v| open.set(v),
+        AlertDialogRoot { open: open(), on_open_change: move |v| open.set(v),
             AlertDialogContent {
                 AlertDialogTitle { "Delete item" }
                 AlertDialogDescription { "Are you sure you want to delete this item? This action cannot be undone." }
                 AlertDialogActions {
                     AlertDialogCancel { "Cancel" }
-                    AlertDialogAction {
-                        on_click: move |_| confirmed.set(true),
-                        "Delete"
-                    }
+                    AlertDialogAction { on_click: move |_| confirmed.set(true), "Delete" }
                 }
             }
         }

preview/src/components/aspect_ratio/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "aspect_ratio",
+  "description": "An aspect ratio component for maintaining a consistent width-to-height ratio of an element.",
+  "authors": ["Evan Almloff"],
+  "exclude": ["variants", "docs.md", "component.json"],
+  "cargoDependencies": [
+    {
+      "name": "dioxus-primitives",
+      "git": "https://github.com/DioxusLabs/components"
+    }
+  ],
+  "globalAssets": ["../../../assets/dx-components-theme.css"]
+}

preview/src/components/aspect_ratio/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

preview/src/components/aspect_ratio/variants/main/mod.rs

@@ -4,10 +4,7 @@ use dioxus::prelude::*;
 #[component]
 pub fn Demo() -> Element {
     rsx! {
-        document::Link {
-            rel: "stylesheet",
-            href: asset!("/src/components/aspect_ratio/style.css"),
-        }
+        document::Link { rel: "stylesheet", href: asset!("../../style.css") }
         div {
             class: "aspect-ratio-container",
             width: "20rem",

preview/src/components/avatar/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "avatar",
+  "description": "An avatar component for displaying user profile images or initials.",
+  "authors": ["Evan Almloff"],
+  "exclude": ["variants", "docs.md", "component.json"],
+  "cargoDependencies": [
+    {
+      "name": "dioxus-primitives",
+      "git": "https://github.com/DioxusLabs/components"
+    }
+  ],
+  "globalAssets": ["../../../assets/dx-components-theme.css"]
+}

preview/src/components/avatar/component.rs

@@ -48,10 +48,7 @@ pub struct AvatarProps {
 #[component]
 pub fn Avatar(props: AvatarProps) -> Element {
     rsx! {
-        document::Link {
-            rel: "stylesheet",
-            href: asset!("/src/components/avatar/style.css"),
-        }
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
 
         avatar::Avatar {
             class: "avatar {props.size.to_class()}",
@@ -79,10 +76,6 @@ pub fn AvatarImage(props: AvatarImageProps) -> Element {
 #[component]
 pub fn AvatarFallback(props: AvatarFallbackProps) -> Element {
     rsx! {
-        avatar::AvatarFallback {
-            class: "avatar-fallback",
-            attributes: props.attributes,
-            {props.children}
-        }
+        avatar::AvatarFallback { class: "avatar-fallback", attributes: props.attributes, {props.children} }
     }
 }

preview/src/components/avatar/mod.rs

@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;

preview/src/components/avatar/variants/main/mod.rs

@@ -5,7 +5,12 @@ use dioxus::prelude::*;
 pub fn Demo() -> Element {
     let mut avatar_state = use_signal(|| "No state yet".to_string());
     rsx! {
-        div { display: "flex", flex_direction: "row", align_items: "center", justify_content: "between", gap: "1rem",
+        div {
+            display: "flex",
+            flex_direction: "row",
+            align_items: "center",
+            justify_content: "between",
+            gap: "1rem",
             div { class: "avatar-item",
                 p { class: "avatar-label", "Basic Usage" }
                 Avatar {

preview/src/components/button/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "button",
+  "description": "A button component for triggering actions or events when clicked.",
+  "authors": ["Evan Almloff"],
+  "exclude": ["variants", "docs.md", "component.json"],
+  "cargoDependencies": [
+    {
+      "name": "dioxus-primitives",
+      "git": "https://github.com/DioxusLabs/components"
+    }
+  ],
+  "globalAssets": ["../../../assets/dx-components-theme.css"]
+}