Add Leptos Alert (#196)

israelsilvabarbara · web-flow · commit ff0008a077ba · 2024-12-23T17:39:02.000+01:00
* Add alert crate to leptos

* add default implementation of alert

* add new york implementation of alert

* Initial example implementaion

* Work with book-examples and make tests

* Fix wrong html for description

* Add book example destructive icon

* Fix and Add class change to Alert

* Fix path book-examples/leptos/button default==new-york

* Update packages/leptos/alert/src/lib.rs comment

* Change into regular Leptos elements

* Fix examples for default

* Fix examples for new-york

* Fix book-examples alphabetical order

* Fix book-examples components ui.rs alphabetical order

* Fix book-examples cargo.toml alphabetical order

* Fix book-examples cargo.toml dependencies
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/book-examples/leptos/Cargo.toml b/book-examples/leptos/Cargo.toml
@@ -18,13 +18,24 @@ lucide-leptos = { version = "1.0.0", optional = true }
 log.workspace = true
 radix-leptos-icons = { workspace = true, optional = true }
 shadcn-ui-leptos-button = { path = "../../packages/leptos/button", optional = true }
+shadcn-ui-leptos-alert = { path = "../../packages/leptos/alert" , optional = true }
 shadcn-ui-leptos-card = { path = "../../packages/leptos/card", optional = true }
 
 [features]
 default = [
+    "alert",
     "button",
-    "card"
+    "card",
 ]
+
+alert = [
+    "dep:lucide-leptos",
+    "dep:radix-leptos-icons",
+    "dep:shadcn-ui-leptos-alert",
+    "radix-leptos-icons/exclamation-triangle",
+    "radix-leptos-icons/rocket",
+]
+
 button = [
     "dep:lucide-leptos",
     "dep:radix-leptos-icons",
@@ -37,4 +48,4 @@ card = [
     "dep:lucide-leptos",
     "dep:shadcn-ui-leptos-button",
     "dep:shadcn-ui-leptos-card",
-]
+]
diff --git a/book-examples/leptos/src/default.rs b/book-examples/leptos/src/default.rs
@@ -1,7 +1,11 @@
 mod components;
 
+#[cfg(feature = "alert")]
+mod alert;
+
 #[cfg(feature = "button")]
 mod button;
+
 #[cfg(feature = "card")]
 mod card;
 
@@ -14,6 +18,10 @@ use leptos_router::{
 #[component(transparent)]
 pub fn Default() -> impl MatchNestedRoutes + Clone {
     let children = (
+        #[cfg(feature = "alert")]
+        {
+            component_view(self::alert::AlertRoutes, ())
+        },
         #[cfg(feature = "button")]
         {
             component_view(self::button::ButtonRoutes, ())
diff --git a/book-examples/leptos/src/default/alert.rs b/book-examples/leptos/src/default/alert.rs
@@ -0,0 +1,20 @@
+#[allow(clippy::module_inception)]
+mod alert;
+mod alert_destructive;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn AlertRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/alert") view=Outlet>
+            <Route path=path!("/") view=alert::AlertDemo />
+            <Route path=path!("/destructive") view=alert_destructive::AlertDestructive />
+        </ParentRoute>
+    }
+    .into_inner()
+}
diff --git a/book-examples/leptos/src/default/alert/alert.rs b/book-examples/leptos/src/default/alert/alert.rs
@@ -0,0 +1,17 @@
+use leptos::prelude::*;
+use lucide_leptos::Terminal;
+
+use crate::default::components::ui::alert::{Alert, AlertDescription, AlertTitle};
+
+#[component]
+pub fn AlertDemo() -> impl IntoView {
+    view! {
+        <Alert>
+            <Terminal attr:class="h-4 w-4" />
+            <AlertTitle>"Heads up!"</AlertTitle>
+            <AlertDescription>
+                "You can add components to your app using the cli."
+            </AlertDescription>
+        </Alert>
+    }
+}
diff --git a/book-examples/leptos/src/default/alert/alert_destructive.rs b/book-examples/leptos/src/default/alert/alert_destructive.rs
@@ -0,0 +1,17 @@
+use leptos::prelude::*;
+use lucide_leptos::CircleAlert;
+
+use crate::default::components::ui::alert::{Alert, AlertDescription, AlertTitle, AlertVariant};
+
+#[component]
+pub fn AlertDestructive() -> impl IntoView {
+    view! {
+        <Alert variant={AlertVariant::Destructive}>
+            <CircleAlert attr:class="h-4 w-4" />
+            <AlertTitle>"Error"</AlertTitle>
+            <AlertDescription>
+                "Your session has expired. Please log in again."
+            </AlertDescription>
+        </Alert>
+    }
+}
diff --git a/book-examples/leptos/src/default/components/ui.rs b/book-examples/leptos/src/default/components/ui.rs
@@ -1,6 +1,10 @@
 // In actual projects this module would contain the copied components, but this example uses the local workspace packages.
 
+#[cfg(feature = "alert")]
+pub use shadcn_ui_leptos_alert::default as alert;
+
 #[cfg(any(feature = "button", feature = "card"))]
 pub use shadcn_ui_leptos_button::default as button;
+
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::default as card;
diff --git a/book-examples/leptos/src/new_york.rs b/book-examples/leptos/src/new_york.rs
@@ -1,7 +1,11 @@
 mod components;
 
+#[cfg(feature = "alert")]
+mod alert;
+
 #[cfg(feature = "button")]
 mod button;
+
 #[cfg(feature = "card")]
 mod card;
 
@@ -14,6 +18,10 @@ use leptos_router::{
 #[component(transparent)]
 pub fn NewYork() -> impl MatchNestedRoutes + Clone {
     let children = (
+        #[cfg(feature = "alert")]
+        {
+            component_view(self::alert::AlertRoutes, ())
+        },
         #[cfg(feature = "button")]
         {
             component_view(self::button::ButtonRoutes, ())
diff --git a/book-examples/leptos/src/new_york/alert.rs b/book-examples/leptos/src/new_york/alert.rs
@@ -0,0 +1,20 @@
+#[allow(clippy::module_inception)]
+mod alert;
+mod alert_destructive;
+
+use leptos::prelude::*;
+use leptos_router::{
+    components::{Outlet, ParentRoute, Route},
+    path, MatchNestedRoutes,
+};
+
+#[component(transparent)]
+pub fn AlertRoutes() -> impl MatchNestedRoutes + Clone {
+    view! {
+        <ParentRoute path=path!("/alert") view=Outlet>
+            <Route path=path!("/") view=alert::AlertDemo />
+            <Route path=path!("/destructive") view=alert_destructive::AlertDestructive />
+        </ParentRoute>
+    }
+    .into_inner()
+}
diff --git a/book-examples/leptos/src/new_york/alert/alert.rs b/book-examples/leptos/src/new_york/alert/alert.rs
@@ -0,0 +1,17 @@
+use leptos::prelude::*;
+use lucide_leptos::Terminal;
+
+use crate::new_york::components::ui::alert::{Alert, AlertDescription, AlertTitle};
+
+#[component]
+pub fn AlertDemo() -> impl IntoView {
+    view! {
+        <Alert>
+            <Terminal attr:class="h-4 w-4" />
+            <AlertTitle>"Heads up!"</AlertTitle>
+            <AlertDescription>
+                "You can add components to your app using the cli."
+            </AlertDescription>
+        </Alert>
+    }
+}
diff --git a/book-examples/leptos/src/new_york/alert/alert_destructive.rs b/book-examples/leptos/src/new_york/alert/alert_destructive.rs
@@ -0,0 +1,17 @@
+use leptos::prelude::*;
+use lucide_leptos::CircleAlert;
+
+use crate::new_york::components::ui::alert::{Alert, AlertDescription, AlertTitle, AlertVariant};
+
+#[component]
+pub fn AlertDestructive() -> impl IntoView {
+    view! {
+        <Alert variant={AlertVariant::Destructive}>
+            <CircleAlert attr:class="h-4 w-4" />
+            <AlertTitle>"Error"</AlertTitle>
+            <AlertDescription>
+                "Your session has expired. Please log in again."
+            </AlertDescription>
+        </Alert>
+    }
+}
diff --git a/book-examples/leptos/src/new_york/components/ui.rs b/book-examples/leptos/src/new_york/components/ui.rs
@@ -1,6 +1,10 @@
 // In actual projects this module would contain the copied components, but this example uses the local workspace packages.
 
+#[cfg(feature = "alert")]
+pub use shadcn_ui_leptos_alert::new_york as alert;
+
 #[cfg(any(feature = "button", feature = "card"))]
 pub use shadcn_ui_leptos_button::new_york as button;
+
 #[cfg(feature = "card")]
 pub use shadcn_ui_leptos_card::new_york as card;
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/leptos/alert/Cargo.toml b/packages/leptos/alert/Cargo.toml
@@ -0,0 +1,20 @@
+[package]
+name = "shadcn-ui-leptos-alert"
+description = "Leptos port of shadcn/ui Alert."
+homepage = "https://shadcn-ui.rustforweb.org/components/alert.html"
+
+authors.workspace = true
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+version.workspace = true
+
+[dependencies]
+tailwind_fuse.workspace = true
+leptos.workspace = true
+leptos-node-ref.workspace = true
+leptos-struct-component.workspace = true
+leptos-style.workspace = true
+
+
+
diff --git a/packages/leptos/alert/src/default.rs b/packages/leptos/alert/src/default.rs
@@ -0,0 +1,92 @@
+use leptos::prelude::*;
+use leptos_node_ref::AnyNodeRef;
+use leptos_style::Style;
+use tailwind_fuse::*;
+
+#[derive(TwClass)]
+#[tw(
+    class = "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground"
+)]
+pub struct AlertClass {
+    pub variant: AlertVariant,
+}
+
+#[derive(PartialEq, TwVariant)]
+pub enum AlertVariant {
+    #[tw(default, class = "bg-background text-foreground")]
+    Default,
+    #[tw(
+        class = "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+    )]
+    Destructive,
+}
+
+#[component]
+pub fn Alert(
+    #[prop(into, optional)] variant: Signal<AlertVariant>,
+
+    // 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,
+    children: Children,
+) -> impl IntoView {
+    let class = Memo::new(move |_| {
+        AlertClass {
+            variant: variant.get(),
+        }
+        .with_class(class.get().unwrap_or_default())
+    });
+
+    view! {
+        <div
+            node_ref=node_ref
+            class=class
+            id=move || id.get()
+            style=style
+        >{children()}
+        </div>
+    }
+}
+
+#[component]
+pub fn AlertTitle(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <h5
+            node_ref=node_ref
+            class= move || tw_merge!("mb-1 font-medium leading-none tracking-tight", class.get())
+            id=move || id.get()
+            style=style
+        >{children()}
+        </h5>
+    }
+}
+
+#[component]
+pub fn AlertDescription(
+    #[prop(into, optional)] class: MaybeProp<String>,
+    #[prop(into, optional)] id: MaybeProp<String>,
+    #[prop(into, optional)] style: Signal<Style>,
+
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <div
+            node_ref=node_ref
+            class=move || tw_merge!("text-sm [&_p]:leading-relaxed", class.get())
+            id=move || id.get()
+            style=style
+        >{children()}
+        </div>
+    }
+}
diff --git a/packages/leptos/alert/src/lib.rs b/packages/leptos/alert/src/lib.rs
@@ -0,0 +1,8 @@
+//! Leptos port of [shadcn/ui Alert](https://ui.shadcn.com/docs/components/alert).
+//!
+//! Displays a Alert or a component that looks like a Alert.
+//!
+//! See [the Rust shadcn/ui book](https://shadcn-ui.rustforweb.org/components/alert.html) for more documenation.
+
+pub mod default;
+pub mod new_york;
diff --git a/packages/leptos/alert/src/new_york.rs b/packages/leptos/alert/src/new_york.rs
