From b218558e6fbd2c9d0b1f997821e4920930414481 Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Fri, 27 Dec 2024 07:19:20 -0300
Subject: [PATCH 1/4] Add Skleleton to leptos

---
 packages/leptos/skeleton/Cargo.toml      | 17 +++++++++++++++++
 packages/leptos/skeleton/README.md       | 21 +++++++++++++++++++++
 packages/leptos/skeleton/src/default.rs  | 24 ++++++++++++++++++++++++
 packages/leptos/skeleton/src/lib.rs      |  8 ++++++++
 packages/leptos/skeleton/src/new_york.rs | 24 ++++++++++++++++++++++++
 5 files changed, 94 insertions(+)
 create mode 100644 packages/leptos/skeleton/Cargo.toml
 create mode 100644 packages/leptos/skeleton/README.md
 create mode 100644 packages/leptos/skeleton/src/default.rs
 create mode 100644 packages/leptos/skeleton/src/lib.rs
 create mode 100644 packages/leptos/skeleton/src/new_york.rs

diff --git a/packages/leptos/skeleton/Cargo.toml b/packages/leptos/skeleton/Cargo.toml
new file mode 100644
index 0000000..f1641b4
--- /dev/null
+++ b/packages/leptos/skeleton/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "shadcn-ui-leptos-skeleton"
+description = "Leptos port of shadcn/ui Skeleton."
+homepage = "https://shadcn-ui.rustforweb.org/components/skeleton.html"
+publish = false
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+tailwind_fuse.workspace = true
+leptos.workspace = true
+leptos-style.workspace = true
+leptos-node-ref.workspace = true
diff --git a/packages/leptos/skeleton/README.md b/packages/leptos/skeleton/README.md
new file mode 100644
index 0000000..f34feea
--- /dev/null
+++ b/packages/leptos/skeleton/README.md
@@ -0,0 +1,21 @@
+<p align="center">
+    <a href="../../../logo.svg">
+        <img src="../../../logo.svg" width="300" height="200" alt="Rust shadcn/ui Logo">
+    </a>
+</p>
+
+<h1 align="center">shadcn-ui-leptos-skeleton</h1>
+
+Use to show a placeholder while content is loading.
+
+[Rust shadcn/ui](https://github.com/RustForWeb/shadcn-ui) is a Rust port of [shadcn/ui](https://ui.shadcn.com/).
+
+## Documentation
+
+See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/) for documentation.
+
+## Rust For Web
+
+The Rust shadcn/ui project is part of the [Rust For Web](https://github.com/RustForWeb).
+
+[Rust For Web](https://github.com/RustForWeb) creates and ports web UI libraries for Rust. All projects are free and open source.
diff --git a/packages/leptos/skeleton/src/default.rs b/packages/leptos/skeleton/src/default.rs
new file mode 100644
index 0000000..6533003
--- /dev/null
+++ b/packages/leptos/skeleton/src/default.rs
@@ -0,0 +1,24 @@
+use tailwind_fuse::*;
+use leptos::prelude::*;
+use leptos_style::Style;
+use leptos_node_ref::AnyNodeRef;
+
+#[component]
+pub fn Skeleton(
+    // Global attributes
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+) -> impl IntoView {
+    view! {
+        <div
+            node_ref=node_ref
+
+            class=move || tw_merge!("animate-pulse rounded-md bg-muted", class.get())
+            id=id.get()
+            style=style
+        />
+    }
+}
diff --git a/packages/leptos/skeleton/src/lib.rs b/packages/leptos/skeleton/src/lib.rs
new file mode 100644
index 0000000..fdf6c8a
--- /dev/null
+++ b/packages/leptos/skeleton/src/lib.rs
@@ -0,0 +1,8 @@
+//! Leptos port of [shadcn/ui Skeleton](https://ui.shadcn.com/docs/components/skeleton).
+//!
+//! Use to show a placeholder while content is loading.
+//!
+//! See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/components/skeleton.html) for more documenation.
+
+pub mod default;
+pub mod new_york;
diff --git a/packages/leptos/skeleton/src/new_york.rs b/packages/leptos/skeleton/src/new_york.rs
new file mode 100644
index 0000000..ac00caa
--- /dev/null
+++ b/packages/leptos/skeleton/src/new_york.rs
@@ -0,0 +1,24 @@
+use tailwind_fuse::*;
+use leptos::prelude::*;
+use leptos_style::Style;
+use leptos_node_ref::AnyNodeRef;
+
+#[component]
+pub fn Skeleton(
+    // Global attributes
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+) -> impl IntoView {
+    view! {
+        <div
+            node_ref=node_ref
+
+            class=move || tw_merge!("animate-pulse rounded-md bg-primary/10", class.get())
+            id=id.get()
+            style=style
+        />
+    }
+}

From 6054c748967f3708d2cd5caf073164056eac4c11 Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Fri, 27 Dec 2024 07:20:07 -0300
Subject: [PATCH 2/4] Add skeleton Book-examples to leptos

---
 book-examples/leptos/Cargo.toml               |  3 +++
 book-examples/leptos/src/default.rs           |  6 ++++++
 .../leptos/src/default/components/ui.rs       |  2 ++
 book-examples/leptos/src/default/skeleton.rs  | 20 +++++++++++++++++++
 .../leptos/src/default/skeleton/skeleton.rs   | 16 +++++++++++++++
 .../src/default/skeleton/skeleton_card.rs     | 16 +++++++++++++++
 .../leptos/src/new_york/components/ui.rs      |  2 ++
 book-examples/leptos/src/new_york/skeleton.rs | 20 +++++++++++++++++++
 .../leptos/src/new_york/skeleton/skeleton.rs  | 16 +++++++++++++++
 .../src/new_york/skeleton/skeleton_card.rs    | 16 +++++++++++++++
 10 files changed, 117 insertions(+)
 create mode 100644 book-examples/leptos/src/default/skeleton.rs
 create mode 100644 book-examples/leptos/src/default/skeleton/skeleton.rs
 create mode 100644 book-examples/leptos/src/default/skeleton/skeleton_card.rs
 create mode 100644 book-examples/leptos/src/new_york/skeleton.rs
 create mode 100644 book-examples/leptos/src/new_york/skeleton/skeleton.rs
 create mode 100644 book-examples/leptos/src/new_york/skeleton/skeleton_card.rs

diff --git a/book-examples/leptos/Cargo.toml b/book-examples/leptos/Cargo.toml
index d93efac..2d0dd68 100644
--- a/book-examples/leptos/Cargo.toml
+++ b/book-examples/leptos/Cargo.toml
@@ -21,6 +21,7 @@ shadcn-ui-leptos-alert = { path = "../../packages/leptos/alert" , optional = tru
 shadcn-ui-leptos-badge = { path = "../../packages/leptos/badge", optional = true }
 shadcn-ui-leptos-button = { path = "../../packages/leptos/button", optional = true }
 shadcn-ui-leptos-card = { path = "../../packages/leptos/card", optional = true }
+shadcn-ui-leptos-skeleton = { path = "../../packages/leptos/skeleton", optional = true }
 
 [features]
 default = [
@@ -28,6 +29,7 @@ default = [
     "badge",
     "button",
     "card",
+    "skeleton",
 ]
 alert = [
     "dep:lucide-leptos",
@@ -45,3 +47,4 @@ card = [
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
 ]
+skeleton = ["dep:shadcn-ui-yew-skeleton"]
diff --git a/book-examples/leptos/src/default.rs b/book-examples/leptos/src/default.rs
index a3148f2..2c9f816 100644
--- a/book-examples/leptos/src/default.rs
+++ b/book-examples/leptos/src/default.rs
@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "skeleton")]
+mod skeleton;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn Default() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "skeleton")]
+        {
+            component_view(self::skeleton::SkeletonRoutes, ())
+        },
     );
 
     view! {
diff --git a/book-examples/leptos/src/default/components/ui.rs b/book-examples/leptos/src/default/components/ui.rs
index a95ce66..1676d69 100644
--- a/book-examples/leptos/src/default/components/ui.rs
+++ b/book-examples/leptos/src/default/components/ui.rs
@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::default as badge;
 pub use shadcn_ui_leptos_button::default as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::default as card;
+#[cfg(feature = "skeleton")]
+pub use shadcn_ui_leptos_skeleton::default as skeleton;
diff --git a/book-examples/leptos/src/default/skeleton.rs b/book-examples/leptos/src/default/skeleton.rs
new file mode 100644
index 0000000..1f582f6
--- /dev/null
+++ b/book-examples/leptos/src/default/skeleton.rs
@@ -0,0 +1,20 @@
+#[allow(clippy::module_inception)]
+mod skeleton;
+mod skeleton_card;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn SkeletonRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/skeleton") view=Outlet>
+            <Route path=path!("/") view=skeleton::SkeletonDemo />
+            <Route path=path!("/card") view=skeleton_card::SkeletonCardDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}
\ No newline at end of file
diff --git a/book-examples/leptos/src/default/skeleton/skeleton.rs b/book-examples/leptos/src/default/skeleton/skeleton.rs
new file mode 100644
index 0000000..f93ab71
--- /dev/null
+++ b/book-examples/leptos/src/default/skeleton/skeleton.rs
@@ -0,0 +1,16 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::skeleton::Skeleton;
+
+#[component]
+pub fn SkeletonDemo() -> impl IntoView {
+    view! {
+        <div class="flex items-center space-x-4">
+            <Skeleton class="h-12 w-12 rounded-full" />
+            <div class="space-y-2">
+                <Skeleton class="h-4 w-[250px]" />
+                <Skeleton class="h-4 w-[200px]" />
+            </div>
+        </div>
+    }
+}
diff --git a/book-examples/leptos/src/default/skeleton/skeleton_card.rs b/book-examples/leptos/src/default/skeleton/skeleton_card.rs
new file mode 100644
index 0000000..ec007dd
--- /dev/null
+++ b/book-examples/leptos/src/default/skeleton/skeleton_card.rs
@@ -0,0 +1,16 @@
+use leptos::prelude::*;
+
+use crate::default::components::ui::skeleton::Skeleton;
+
+#[component]
+pub fn SkeletonCardDemo() -> impl IntoView {
+    view! {
+        <div class="flex flex-col space-y-3">
+            <Skeleton class="h-[125px] w-[250px] rounded-xl" />
+            <div class="space-y-2">
+                <Skeleton class="h-4 w-[250px]" />
+                <Skeleton class="h-4 w-[200px]" />
+            </div>
+        </div>
+    }
+}
diff --git a/book-examples/leptos/src/new_york/components/ui.rs b/book-examples/leptos/src/new_york/components/ui.rs
index 92b7a22..bb7279a 100644
--- a/book-examples/leptos/src/new_york/components/ui.rs
+++ b/book-examples/leptos/src/new_york/components/ui.rs
@@ -8,3 +8,5 @@ pub use shadcn_ui_leptos_badge::new_york as badge;
 pub use shadcn_ui_leptos_button::new_york as button;
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::new_york as card;
+#[cfg(feature = "skeleton")]
+pub use shadcn_ui_leptos_skeleton::new_york as skeleton;
diff --git a/book-examples/leptos/src/new_york/skeleton.rs b/book-examples/leptos/src/new_york/skeleton.rs
new file mode 100644
index 0000000..1f582f6
--- /dev/null
+++ b/book-examples/leptos/src/new_york/skeleton.rs
@@ -0,0 +1,20 @@
+#[allow(clippy::module_inception)]
+mod skeleton;
+mod skeleton_card;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn SkeletonRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/skeleton") view=Outlet>
+            <Route path=path!("/") view=skeleton::SkeletonDemo />
+            <Route path=path!("/card") view=skeleton_card::SkeletonCardDemo />
+        </ParentRoute>
+    }
+    .into_inner()
+}
\ No newline at end of file
diff --git a/book-examples/leptos/src/new_york/skeleton/skeleton.rs b/book-examples/leptos/src/new_york/skeleton/skeleton.rs
new file mode 100644
index 0000000..d104c34
--- /dev/null
+++ b/book-examples/leptos/src/new_york/skeleton/skeleton.rs
@@ -0,0 +1,16 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::skeleton::Skeleton;
+
+#[component]
+pub fn SkeletonDemo() -> impl IntoView {
+    view! {
+        <div class="flex items-center space-x-4">
+            <Skeleton class="h-12 w-12 rounded-full" />
+            <div class="space-y-2">
+                <Skeleton class="h-4 w-[250px]" />
+                <Skeleton class="h-4 w-[200px]" />
+            </div>
+        </div>
+    }
+}
diff --git a/book-examples/leptos/src/new_york/skeleton/skeleton_card.rs b/book-examples/leptos/src/new_york/skeleton/skeleton_card.rs
new file mode 100644
index 0000000..87b04d3
--- /dev/null
+++ b/book-examples/leptos/src/new_york/skeleton/skeleton_card.rs
@@ -0,0 +1,16 @@
+use leptos::prelude::*;
+
+use crate::new_york::components::ui::skeleton::Skeleton;
+
+#[component]
+pub fn SkeletonCard() -> impl IntoView {
+    view! {
+        <div class="flex flex-col space-y-3">
+            <Skeleton class="h-[125px] w-[250px] rounded-xl" />
+            <div class="space-y-2">
+                <Skeleton class="h-4 w-[250px]" />
+                <Skeleton class="h-4 w-[200px]" />
+            </div>
+        </div>
+    }
+}

From 863525bddf356b52ecfc184963342462756ee723 Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Fri, 27 Dec 2024 07:36:30 -0300
Subject: [PATCH 3/4] Fix bugs

---
 Cargo.lock                                            | 11 +++++++++++
 book-examples/leptos/Cargo.toml                       |  2 +-
 book-examples/leptos/src/new_york.rs                  |  6 ++++++
 .../leptos/src/new_york/skeleton/skeleton_card.rs     |  2 +-
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index aa3ba82..2af66ae 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3498,6 +3498,7 @@ dependencies = [
  "shadcn-ui-leptos-badge",
  "shadcn-ui-leptos-button",
  "shadcn-ui-leptos-card",
+ "shadcn-ui-leptos-skeleton",
 ]
 
 [[package]]
@@ -3522,6 +3523,16 @@ dependencies = [
  "tailwind_fuse",
 ]
 
+[[package]]
+name = "shadcn-ui-leptos-skeleton"
+version = "0.0.1"
+dependencies = [
+ "leptos 0.7.2",
+ "leptos-node-ref",
+ "leptos-style",
+ "tailwind_fuse",
+]
+
 [[package]]
 name = "shadcn-ui-leptos-utils"
 version = "0.0.1"
diff --git a/book-examples/leptos/Cargo.toml b/book-examples/leptos/Cargo.toml
index 2d0dd68..c0a386f 100644
--- a/book-examples/leptos/Cargo.toml
+++ b/book-examples/leptos/Cargo.toml
@@ -47,4 +47,4 @@ card = [
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
 ]
-skeleton = ["dep:shadcn-ui-yew-skeleton"]
+skeleton = ["dep:shadcn-ui-leptos-skeleton"]
diff --git a/book-examples/leptos/src/new_york.rs b/book-examples/leptos/src/new_york.rs
index 90e0fac..c5efc27 100644
--- a/book-examples/leptos/src/new_york.rs
+++ b/book-examples/leptos/src/new_york.rs
@@ -8,6 +8,8 @@ mod badge;
 mod button;
 #[cfg(feature = "card")]
 mod card;
+#[cfg(feature = "skeleton")]
+mod skeleton;
 
 use leptos::prelude::*;
 use leptos_router::{
@@ -34,6 +36,10 @@ pub fn NewYork() -> impl MatchNestedRoutes + Clone {
         {
             component_view(self::card::CardRoutes, ())
         },
+        #[cfg(feature = "skeleton")]
+        {
+            component_view(self::skeleton::SkeletonRoutes, ())
+        },
     );
 
     view! {
diff --git a/book-examples/leptos/src/new_york/skeleton/skeleton_card.rs b/book-examples/leptos/src/new_york/skeleton/skeleton_card.rs
index 87b04d3..963fb59 100644
--- a/book-examples/leptos/src/new_york/skeleton/skeleton_card.rs
+++ b/book-examples/leptos/src/new_york/skeleton/skeleton_card.rs
@@ -3,7 +3,7 @@ use leptos::prelude::*;
 use crate::new_york::components::ui::skeleton::Skeleton;
 
 #[component]
-pub fn SkeletonCard() -> impl IntoView {
+pub fn SkeletonCardDemo() -> impl IntoView {
     view! {
         <div class="flex flex-col space-y-3">
             <Skeleton class="h-[125px] w-[250px] rounded-xl" />

From 4a8b94369ccd13d3d7870b90c71dae6408b3e33d Mon Sep 17 00:00:00 2001
From: Israel Barbara <israelsilvabarbara@gmail.com>
Date: Fri, 27 Dec 2024 07:36:52 -0300
Subject: [PATCH 4/4] Cargo fmt

---
 book-examples/leptos/src/default/skeleton.rs  | 2 +-
 book-examples/leptos/src/new_york/skeleton.rs | 2 +-
 packages/leptos/skeleton/src/default.rs       | 4 ++--
 packages/leptos/skeleton/src/new_york.rs      | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/book-examples/leptos/src/default/skeleton.rs b/book-examples/leptos/src/default/skeleton.rs
index 1f582f6..dca9594 100644
--- a/book-examples/leptos/src/default/skeleton.rs
+++ b/book-examples/leptos/src/default/skeleton.rs
@@ -17,4 +17,4 @@ pub fn SkeletonRoutes() -> impl MatchNestedRoutes + Clone {
         </ParentRoute>
     }
     .into_inner()
-}
\ No newline at end of file
+}
diff --git a/book-examples/leptos/src/new_york/skeleton.rs b/book-examples/leptos/src/new_york/skeleton.rs
index 1f582f6..dca9594 100644
--- a/book-examples/leptos/src/new_york/skeleton.rs
+++ b/book-examples/leptos/src/new_york/skeleton.rs
@@ -17,4 +17,4 @@ pub fn SkeletonRoutes() -> impl MatchNestedRoutes + Clone {
         </ParentRoute>
     }
     .into_inner()
-}
\ No newline at end of file
+}
diff --git a/packages/leptos/skeleton/src/default.rs b/packages/leptos/skeleton/src/default.rs
index 6533003..1fa7ce1 100644
--- a/packages/leptos/skeleton/src/default.rs
+++ b/packages/leptos/skeleton/src/default.rs
@@ -1,7 +1,7 @@
-use tailwind_fuse::*;
 use leptos::prelude::*;
-use leptos_style::Style;
 use leptos_node_ref::AnyNodeRef;
+use leptos_style::Style;
+use tailwind_fuse::*;
 
 #[component]
 pub fn Skeleton(
diff --git a/packages/leptos/skeleton/src/new_york.rs b/packages/leptos/skeleton/src/new_york.rs
index ac00caa..83b307b 100644
--- a/packages/leptos/skeleton/src/new_york.rs
+++ b/packages/leptos/skeleton/src/new_york.rs
@@ -1,7 +1,7 @@
-use tailwind_fuse::*;
 use leptos::prelude::*;
-use leptos_style::Style;
 use leptos_node_ref::AnyNodeRef;
+use leptos_style::Style;
+use tailwind_fuse::*;
 
 #[component]
 pub fn Skeleton(