Add support for attributes to Radix Primitives and Themes Yew

RustForWeb · Nov 9, 2024 · e8e92b4 · e8e92b4
1 parent ae534ce
commit e8e92b4
Show file tree

Hide file tree

Showing 55 changed files with 2,028 additions and 1,973 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -33,6 +33,7 @@ web-sys = "0.3.72"
 yew = "0.21.0"
 yew-attrs = "0.2.4"
 yew-router = "0.18.0"
+yew-struct-component = "0.0.9"
 
 [patch.crates-io]
 yew = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }

diff --git a/packages/primitives/yew/arrow/Cargo.toml b/packages/primitives/yew/arrow/Cargo.toml
@@ -10,3 +10,4 @@ version.workspace = true
 
 [dependencies]
 yew.workspace = true
+yew-struct-component.workspace = true
diff --git a/packages/primitives/yew/arrow/src/arrow.rs b/packages/primitives/yew/arrow/src/arrow.rs
@@ -1,58 +1,52 @@
 use yew::prelude::*;
+use yew_struct_component::{struct_component, Attributes, StructComponent};
 
 #[derive(PartialEq, Properties)]
 pub struct ArrowProps<ChildProps: Clone + Default + PartialEq + SetArrowChildProps> {
     #[prop_or(10.0)]
     pub width: f64,
     #[prop_or(5.0)]
     pub height: f64,
+
+    // Global attributes
     #[prop_or_default]
-    pub node_ref: NodeRef,
+    pub class: Option<String>,
     #[prop_or_default]
     pub id: Option<String>,
     #[prop_or_default]
-    pub class: Option<String>,
-    #[prop_or_default]
     pub style: Option<String>,
+
+    #[prop_or_default]
+    pub node_ref: NodeRef,
+    #[prop_or_default]
+    pub attributes: Attributes,
     #[prop_or_default]
     pub as_child: Option<Callback<ChildProps, Html>>,
     #[prop_or_default]
     pub as_child_props: Option<ChildProps>,
-    #[prop_or_default]
-    pub children: Html,
 }
 
 pub trait SetArrowChildProps {
     fn set_arrow_child_props(&mut self, props: ArrowChildProps);
 }
 
-#[derive(Clone, Default, PartialEq)]
+#[derive(Clone, Default, PartialEq, StructComponent)]
+#[struct_component(tag = "svg")]
+#[expect(non_snake_case)]
 pub struct ArrowChildProps {
     pub node_ref: NodeRef,
-    pub id: Option<String>,
+    pub attributes: Attributes,
+
+    // Global attributes
     pub class: Option<String>,
+    pub id: Option<String>,
     pub style: Option<String>,
+
+    // Attributes from `svg`
     pub width: String,
     pub height: String,
-}
-
-impl ArrowChildProps {
-    pub fn render(self) -> Html {
-        html! {
-            <svg
-                ref={self.node_ref}
-                id={self.id}
-                class={self.class}
-                style={self.style}
-                width={self.width}
-                height={self.height}
-                viewBox="0 0 30 10"
-                preserveAspectRatio="none"
-            >
-                <polygon points="0,0 30,0 15,10" />
-            </svg>
-        }
-    }
+    pub viewBox: String,
+    pub preserveAspectRatio: String,
 }
 
 impl SetArrowChildProps for ArrowChildProps {
@@ -65,11 +59,18 @@ pub fn Arrow<ChildProps: Clone + Default + PartialEq + SetArrowChildProps = Arro
 ) -> Html {
     let child_props = ArrowChildProps {
         node_ref: props.node_ref.clone(),
+        attributes: props.attributes.clone(),
+
+        // Global attributes
         id: props.id.clone(),
         class: props.class.clone(),
         style: props.style.clone(),
+
+        // Attributes from `svg`
         width: props.width.to_string(),
         height: props.height.to_string(),
+        viewBox: "0 0 30 10".to_owned(),
+        preserveAspectRatio: "none".to_owned(),
     };
 
     if let Some(as_child) = props.as_child.as_ref() {
@@ -78,6 +79,8 @@ pub fn Arrow<ChildProps: Clone + Default + PartialEq + SetArrowChildProps = Arro
 
         as_child.emit(as_child_props)
     } else {
-        child_props.render()
+        child_props.render(html! {
+            <polygon points="0,0 30,0 15,10" />
+        })
     }
 }
diff --git a/packages/primitives/yew/aspect-ratio/Cargo.toml b/packages/primitives/yew/aspect-ratio/Cargo.toml
@@ -11,3 +11,4 @@ version.workspace = true
 
 [dependencies]
 yew.workspace = true
+yew-struct-component.workspace = true
diff --git a/packages/primitives/yew/aspect-ratio/src/aspect_ratio.rs b/packages/primitives/yew/aspect-ratio/src/aspect_ratio.rs
@@ -1,55 +1,52 @@
 use yew::prelude::*;
+use yew_struct_component::{struct_component, Attributes, StructComponent};
 
 #[derive(PartialEq, Properties)]
 pub struct AspectRatioProps {
     #[prop_or(1.0)]
     pub ratio: f64,
 
+    // Global attributes
     #[prop_or_default]
-    pub node_ref: NodeRef,
+    pub class: Option<String>,
     #[prop_or_default]
     pub id: Option<String>,
     #[prop_or_default]
-    pub class: Option<String>,
-    #[prop_or_default]
     pub style: Option<String>,
+
+    #[prop_or_default]
+    pub node_ref: NodeRef,
+    #[prop_or_default]
+    pub attributes: Attributes,
     #[prop_or_default]
     pub as_child: Option<Callback<AspectRatioChildProps, Html>>,
     #[prop_or_default]
     pub children: Html,
 }
 
-#[derive(Clone, Default, PartialEq)]
+#[derive(Clone, Default, PartialEq, StructComponent)]
+#[struct_component(tag = "div")]
 pub struct AspectRatioChildProps {
     pub node_ref: NodeRef,
-    pub id: Option<String>,
+    pub attributes: Attributes,
+
+    // Global attributes
     pub class: Option<String>,
+    pub id: Option<String>,
     pub style: String,
 }
 
-impl AspectRatioChildProps {
-    pub fn render(self, children: Html) -> Html {
-        html! {
-            <div
-                ref={self.node_ref}
-                id={self.id}
-                class={self.class}
-                style={self.style}
-            >
-                {children}
-            </div>
-        }
-    }
-}
-
 #[function_component]
 pub fn AspectRatio(props: &AspectRatioProps) -> Html {
     let child_props = AspectRatioChildProps {
         node_ref: props.node_ref.clone(),
-        id: props.id.clone(),
+        attributes: props.attributes.clone(),
+
+        // Global attributes
         class: props.class.clone(),
-        // Ensures children expand in ratio.
+        id: props.id.clone(),
         style: format!(
+            // Ensures children expand in ratio.
             "position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;{}",
             props.style.clone().unwrap_or_default()
         ),

diff --git a/packages/primitives/yew/avatar/Cargo.toml b/packages/primitives/yew/avatar/Cargo.toml
@@ -13,3 +13,4 @@ version.workspace = true
 log.workspace = true
 web-sys = { workspace = true, features = ["HtmlImageElement"] }
 yew.workspace = true
+yew-struct-component.workspace = true