Merge pull request #55 from RustLangES/leptos

Some Leptos Components

Author: SergioRibera

Cargo.lock

@@ -1,6 +1,7 @@
 [package]
 name = "rustlanges-components"
 version = "0.1.0"
+edition = "2024"
 
 [lib]
 path = "crates/lib.rs"
@@ -9,7 +10,8 @@ path = "crates/lib.rs"
 leptos = ["leptos-components"]
 
 [workspace]
-members = ["crates/leptos"]
+members = [ "crates/core", "crates/leptos" ]
 
 [dependencies]
+components-core = { package = "rustlanges-components-core", version = "0.1.0", path = "./crates/core" }
 leptos-components = { path = "./crates/leptos", optional = true }

Cargo.toml

@@ -0,0 +1,7 @@
+[package]
+name = "rustlanges-components-core"
+version = "0.1.0"
+edition = "2024"
+
+[dependencies]
+constcat = "0.6.1"

crates/core/Cargo.toml

@@ -0,0 +1,3 @@
+pub const BASE_CLASS: &str = "rustlanges";
+
+pub use constcat::{concat, concat_bytes, concat_slices};

crates/core/src/lib.rs

@@ -5,4 +5,5 @@ edition = "2024"
 
 [dependencies]
 leptos = { version = "0.8.2", default-features = false }
+components-core = { package = "rustlanges-components-core", version = "0.1.0", path = "../core" }
 tailwind_fuse = { version = "0.3", features = ["variant", "tailwind_fuse_macro"] }

crates/leptos/Cargo.toml

@@ -0,0 +1,22 @@
+use components_core::{BASE_CLASS, concat};
+use leptos::prelude::*;
+
+#[component]
+pub fn Avatar(
+    #[prop(into)] url: String,
+    #[prop(into, optional)] alt: String,
+    #[prop(into, optional, default = 32)] size: i32,
+    #[prop(into, optional)] class: String,
+) -> impl IntoView {
+    let class = crate::tw!(concat!(BASE_CLASS, "-avatar"), class);
+
+    view! {
+        <div
+            class={class}
+            style:width={format!("{size}px")}
+            style:height={format!("{size}px")}
+        >
+            <img class="rustlanges-avatar__img" src={url} alt={alt} />
+        </div>
+    }
+}

crates/leptos/src/avatar.rs

@@ -0,0 +1,69 @@
+use components_core::{BASE_CLASS, concat};
+use leptos::prelude::*;
+use leptos::{IntoView, component, view};
+
+const LIMIT_NUMERIC: isize = 9;
+const LIMIT_NUMERIC_NEGATIVE: isize = -9;
+
+#[derive(Default, Debug, PartialEq)]
+pub enum Variant {
+    Completed,
+    Reading,
+    #[default]
+    Pending,
+    Unread,
+}
+
+impl Variant {
+    pub fn text(&self) -> &'static str {
+        match self {
+            Variant::Completed => "Completo",
+            Variant::Reading => "Leyendo",
+            Variant::Pending => "Pendiente",
+            Variant::Unread => "No leido",
+        }
+    }
+}
+
+#[derive(Default, Debug, PartialEq)]
+pub enum Type {
+    #[default]
+    Default,
+    Numeric,
+    Text,
+}
+
+#[component]
+pub fn Badge(
+    #[prop(into)] count: ReadSignal<isize>,
+    #[prop(into, optional)] variant: Variant,
+    #[prop(into, optional)] r#type: Type,
+) -> impl IntoView {
+    let class = crate::tw!(
+        concat!("text-paragraph-2 ", BASE_CLASS, "-badge"),
+        format!("{BASE_CLASS}-badge--variant-{variant:?}"),
+        format!("{BASE_CLASS}-badge--type-{type:?}"),
+    );
+
+    let display_value = move || match r#type {
+        Type::Default => count.get().to_string(),
+        Type::Numeric => {
+            let count = count.get();
+            match count {
+                ..=LIMIT_NUMERIC_NEGATIVE => LIMIT_NUMERIC_NEGATIVE.to_string(),
+                LIMIT_NUMERIC.. => format!("+{LIMIT_NUMERIC}"),
+                _ => count.to_string(),
+            }
+        }
+        Type::Text => variant.text().to_string(),
+    };
+
+    view! {
+        <div
+          class={class}
+        >
+          <div class={concat!(BASE_CLASS, "-badge__dot")} />
+          <span>{display_value}</span>
+        </div>
+    }
+}

crates/leptos/src/badge.rs

@@ -0,0 +1,36 @@
+use components_core::{BASE_CLASS, concat};
+use leptos::prelude::*;
+use tailwind_fuse::{AsTailwindClass, TwVariant};
+
+#[derive(TwVariant, PartialEq)]
+pub enum Variant {
+    #[tw(default, class = "rustlanges-button--primary")]
+    Primary,
+    #[tw(class = "rustlanges-button--secondary")]
+    Secondary,
+    #[tw(class = "rustlanges-button--text")]
+    Text,
+    #[tw(class = "rustlanges-button--icon")]
+    Icon,
+}
+
+#[component]
+pub fn Button(
+    #[prop(into, optional)] variant: Variant,
+    #[prop(into, optional)] label: String,
+    #[prop(into, optional)] class: String,
+    #[prop(into)] icon: Option<Children>,
+) -> impl IntoView {
+    let class = crate::tw!(
+        variant,
+        concat!("text-button ", BASE_CLASS, "-button"),
+        class
+    );
+
+    view! {
+        <button class={class}>
+            {(variant != Variant::Icon).then_some(label)}
+            {(variant == Variant::Icon).then(|| icon.map(|icon| icon())).flatten()}
+        </button>
+    }
+}

crates/leptos/src/button.rs

@@ -0,0 +1,23 @@
+use components_core::{BASE_CLASS, concat};
+use leptos::prelude::*;
+
+#[component]
+pub fn Card(
+    #[prop(into)] child: Children,
+    #[prop(into, optional)] class: String,
+    #[prop(into, optional, default = false)] clickable: bool,
+    #[prop(into, optional, default = false)] disabled: bool,
+) -> impl IntoView {
+    let class = crate::tw!(
+        concat!(BASE_CLASS, "-card"),
+        clickable.then_some(concat!(BASE_CLASS, "-card--clickable")),
+        disabled.then_some(concat!("disabled ", BASE_CLASS, "-card--disabled")),
+        class
+    );
+
+    view! {
+        <div class={class}>
+            {child()}
+        </div>
+    }
+}

crates/leptos/src/card.rs

@@ -0,0 +1,45 @@
+use components_core::{BASE_CLASS, concat};
+use leptos::prelude::*;
+use leptos::{IntoView, component, view};
+
+use crate::icons::{Location, StarBold};
+
+#[derive(Default, Debug, PartialEq)]
+pub enum Variant {
+    #[default]
+    Featured,
+    Numeric,
+    Description,
+    Location,
+    Small,
+}
+
+impl Variant {
+    pub fn icon(&self) -> Option<AnyView> {
+        match self {
+            Variant::Featured => Some(view! { <StarBold /> }.into_any()),
+            Variant::Small | Variant::Location => Some(view! { <Location /> }.into_any()),
+            _ => None,
+        }
+    }
+}
+
+#[component]
+pub fn Chip(
+    #[prop(into)] label: String,
+    #[prop(into, optional)] class: String,
+    #[prop(into, optional)] variant: Variant,
+) -> impl IntoView {
+    let class = crate::tw!(
+        concat!(BASE_CLASS, "-chip"),
+        format!("{BASE_CLASS}-chip--{variant:?}"),
+        class
+    );
+
+    view! {
+        <div class=class>
+            {variant.icon()}
+            {(variant != Variant::Numeric).then_some(format!("#{label}")).unwrap_or(label)}
+        </div>
+    }
+}