From d69d4cda45f7b166ed7f6295155d2da5fc4688b7 Mon Sep 17 00:00:00 2001
From: Manuel Cillero <manuel@cillero.es>
Date: Sun, 3 Mar 2024 20:40:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20code=20with=20l?=
 =?UTF-8?q?ast=20API=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/pagetop-bootsier/src/lib.rs          | 145 ++++++------------
 .../pagetop-bootsier/static/css/styles.css    |   4 +-
 packages/pagetop-bulmix/src/lib.rs            | 118 +++++---------
 3 files changed, 85 insertions(+), 182 deletions(-)

diff --git a/packages/pagetop-bootsier/src/lib.rs b/packages/pagetop-bootsier/src/lib.rs
index 24b01c34..ceb1abd0 100644
--- a/packages/pagetop-bootsier/src/lib.rs
+++ b/packages/pagetop-bootsier/src/lib.rs
@@ -32,6 +32,14 @@ impl ThemeTrait for Bootsier {
         ]
     }
 
+    #[rustfmt::skip]
+    fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<&str> {
+        match builtin {
+            ThemeBuiltInClasses::RegionContainer => Some("container"),
+            _ => None,
+        }
+    }
+
     fn prepare_body(&self, page: &mut Page) -> Markup {
         match page.template() {
             "admin" => html! {
@@ -79,120 +87,45 @@ impl ThemeTrait for Bootsier {
             ));
     }
 
+    #[rustfmt::skip]
     fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
         match component.type_id() {
             t if t == TypeId::of::<Icon>() => {
                 if let Some(i) = component_as_mut::<Icon>(component) {
-                    match i.font_size() {
-                        FontSize::ExtraLarge => {
-                            i.replace_classes(i.font_size().to_string(), "fs-1");
-                        }
-                        FontSize::XxLarge => {
-                            i.replace_classes(i.font_size().to_string(), "fs-2");
-                        }
-                        FontSize::XLarge => {
-                            i.replace_classes(i.font_size().to_string(), "fs-3");
-                        }
-                        FontSize::Large => {
-                            i.replace_classes(i.font_size().to_string(), "fs-4");
-                        }
-                        FontSize::Medium => {
-                            i.replace_classes(i.font_size().to_string(), "fs-5");
-                        }
-                        _ => {}
-                    };
+                    i.replace_classes(i.font_size().to_string(), with_font(i.font_size()));
                 }
             }
             t if t == TypeId::of::<Button>() => {
                 if let Some(b) = component_as_mut::<Button>(component) {
-                    match b.style() {
-                        ButtonStyle::Default => {
-                            b.replace_classes(b.style().to_string(), "btn btn-primary");
-                        }
-                        ButtonStyle::Info => {
-                            b.replace_classes(b.style().to_string(), "btn btn-info");
-                        }
-                        ButtonStyle::Success => {
-                            b.replace_classes(b.style().to_string(), "btn btn-success");
-                        }
-                        ButtonStyle::Warning => {
-                            b.replace_classes(b.style().to_string(), "btn btn-warning");
-                        }
-                        ButtonStyle::Danger => {
-                            b.replace_classes(b.style().to_string(), "btn btn-danger");
-                        }
-                        ButtonStyle::Light => {
-                            b.replace_classes(b.style().to_string(), "btn btn-light");
-                        }
-                        ButtonStyle::Dark => {
-                            b.replace_classes(b.style().to_string(), "btn btn-dark");
-                        }
-                        ButtonStyle::Link => {
-                            b.replace_classes(b.style().to_string(), "btn btn-link");
-                        }
-                    };
-                    match b.font_size() {
-                        FontSize::ExtraLarge => {
-                            b.replace_classes(b.font_size().to_string(), "fs-1");
-                        }
-                        FontSize::XxLarge => {
-                            b.replace_classes(b.font_size().to_string(), "fs-2");
-                        }
-                        FontSize::XLarge => {
-                            b.replace_classes(b.font_size().to_string(), "fs-3");
-                        }
-                        FontSize::Large => {
-                            b.replace_classes(b.font_size().to_string(), "fs-4");
-                        }
-                        FontSize::Medium => {
-                            b.replace_classes(b.font_size().to_string(), "fs-5");
-                        }
-                        _ => {}
-                    };
+                    b.replace_classes("button__tap", "btn");
+                    b.replace_classes(b.style().to_string(), match b.style() {
+                        StyleBase::Default => "btn-primary",
+                        StyleBase::Success => "btn-success",
+                        StyleBase::Danger  => "btn-danger",
+                        StyleBase::Warning => "btn-warning",
+                        StyleBase::Info    => "btn-info",
+                        StyleBase::Light   => "btn-light",
+                        StyleBase::Dark    => "btn-dark",
+                        StyleBase::Link    => "btn-link",
+                    });
+                    b.replace_classes(b.font_size().to_string(), with_font(b.font_size()));
                 }
-            }
+            },
             t if t == TypeId::of::<Heading>() => {
                 if let Some(h) = component_as_mut::<Heading>(component) {
-                    match h.size() {
-                        HeadingSize::ExtraLarge => {
-                            h.replace_classes(h.size().to_string(), "display-1");
-                        }
-                        HeadingSize::XxLarge => {
-                            h.replace_classes(h.size().to_string(), "display-2");
-                        }
-                        HeadingSize::XLarge => {
-                            h.replace_classes(h.size().to_string(), "display-3");
-                        }
-                        HeadingSize::Large => {
-                            h.replace_classes(h.size().to_string(), "display-4");
-                        }
-                        HeadingSize::Medium => {
-                            h.replace_classes(h.size().to_string(), "display-5");
-                        }
-                        _ => {}
-                    };
+                    h.replace_classes(h.size().to_string(), match h.size() {
+                        HeadingSize::ExtraLarge => "display-1",
+                        HeadingSize::XxLarge    => "display-2",
+                        HeadingSize::XLarge     => "display-3",
+                        HeadingSize::Large      => "display-4",
+                        HeadingSize::Medium     => "display-5",
+                        _ => "",
+                    });
                 }
-            }
+            },
             t if t == TypeId::of::<Paragraph>() => {
                 if let Some(p) = component_as_mut::<Paragraph>(component) {
-                    match p.font_size() {
-                        FontSize::ExtraLarge => {
-                            p.replace_classes(p.font_size().to_string(), "fs-1");
-                        }
-                        FontSize::XxLarge => {
-                            p.replace_classes(p.font_size().to_string(), "fs-2");
-                        }
-                        FontSize::XLarge => {
-                            p.replace_classes(p.font_size().to_string(), "fs-3");
-                        }
-                        FontSize::Large => {
-                            p.replace_classes(p.font_size().to_string(), "fs-4");
-                        }
-                        FontSize::Medium => {
-                            p.replace_classes(p.font_size().to_string(), "fs-5");
-                        }
-                        _ => {}
-                    };
+                    p.replace_classes(p.font_size().to_string(), with_font(p.font_size()));
                 }
             }
             _ => {}
@@ -236,3 +169,15 @@ impl ThemeTrait for Bootsier {
         }
     }
 }
+
+#[rustfmt::skip]
+fn with_font(font_size: &FontSize) -> String {
+    String::from(match font_size {
+        FontSize::ExtraLarge => "fs-1",
+        FontSize::XxLarge    => "fs-2",
+        FontSize::XLarge     => "fs-3",
+        FontSize::Large      => "fs-4",
+        FontSize::Medium     => "fs-5",
+        _ => "",
+    })
+}
diff --git a/packages/pagetop-bootsier/static/css/styles.css b/packages/pagetop-bootsier/static/css/styles.css
index 90f3cda9..eb2ce57b 100644
--- a/packages/pagetop-bootsier/static/css/styles.css
+++ b/packages/pagetop-bootsier/static/css/styles.css
@@ -8,6 +8,6 @@
 
 /* Button component */
 
-.btn-link {
-	text-decoration: none;
+.btn > span {
+	margin: 0 var(--val-gap-0-5);
 }
diff --git a/packages/pagetop-bulmix/src/lib.rs b/packages/pagetop-bulmix/src/lib.rs
index f76f619d..1ad0ab7c 100644
--- a/packages/pagetop-bulmix/src/lib.rs
+++ b/packages/pagetop-bulmix/src/lib.rs
@@ -15,6 +15,17 @@ impl PackageTrait for Bulmix {
 }
 
 impl ThemeTrait for Bulmix {
+    #[rustfmt::skip]
+    fn builtin_classes(&self, builtin: ThemeBuiltInClasses) -> Option<&str> {
+        match builtin {
+            ThemeBuiltInClasses::BodyContainer    => Some("container"),
+            ThemeBuiltInClasses::RegionContainer  => Some("container"),
+            ThemeBuiltInClasses::ContentContainer => Some("container"),
+            ThemeBuiltInClasses::SkipToContent    => Some("skip__to_content"),
+            _ => None,
+        }
+    }
+
     fn after_prepare_body(&self, page: &mut Page) {
         page.alter_favicon(Some(Favicon::new().with_icon("/base/favicon.ico")))
             .alter_context(ContextOp::AddStyleSheet(
@@ -28,76 +39,28 @@ impl ThemeTrait for Bulmix {
             ));
     }
 
+    #[rustfmt::skip]
     fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
         match component.type_id() {
             t if t == TypeId::of::<Icon>() => {
                 if let Some(i) = component_as_mut::<Icon>(component) {
-                    match i.font_size() {
-                        FontSize::ExtraLarge => {
-                            i.replace_classes(i.font_size().to_string(), "is-size-1");
-                        }
-                        FontSize::XxLarge => {
-                            i.replace_classes(i.font_size().to_string(), "is-size-2");
-                        }
-                        FontSize::XLarge => {
-                            i.replace_classes(i.font_size().to_string(), "is-size-3");
-                        }
-                        FontSize::Large => {
-                            i.replace_classes(i.font_size().to_string(), "is-size-4");
-                        }
-                        FontSize::Medium => {
-                            i.replace_classes(i.font_size().to_string(), "is-size-5");
-                        }
-                        _ => {}
-                    };
+                    i.replace_classes(i.font_size().to_string(), with_font(i.font_size()));
                 }
             }
             t if t == TypeId::of::<Button>() => {
                 if let Some(b) = component_as_mut::<Button>(component) {
-                    match b.style() {
-                        ButtonStyle::Default => {
-                            b.replace_classes(b.style().to_string(), "button is-primary");
-                        }
-                        ButtonStyle::Info => {
-                            b.replace_classes(b.style().to_string(), "button is-info");
-                        }
-                        ButtonStyle::Success => {
-                            b.replace_classes(b.style().to_string(), "button is-success");
-                        }
-                        ButtonStyle::Warning => {
-                            b.replace_classes(b.style().to_string(), "button is-warning");
-                        }
-                        ButtonStyle::Danger => {
-                            b.replace_classes(b.style().to_string(), "button is-danger");
-                        }
-                        ButtonStyle::Light => {
-                            b.replace_classes(b.style().to_string(), "button is-light");
-                        }
-                        ButtonStyle::Dark => {
-                            b.replace_classes(b.style().to_string(), "button is-dark");
-                        }
-                        ButtonStyle::Link => {
-                            b.replace_classes(b.style().to_string(), "button is-text");
-                        }
-                    };
-                    match b.font_size() {
-                        FontSize::ExtraLarge => {
-                            b.replace_classes(b.font_size().to_string(), "is-size-1");
-                        }
-                        FontSize::XxLarge => {
-                            b.replace_classes(b.font_size().to_string(), "is-size-2");
-                        }
-                        FontSize::XLarge => {
-                            b.replace_classes(b.font_size().to_string(), "is-size-3");
-                        }
-                        FontSize::Large => {
-                            b.replace_classes(b.font_size().to_string(), "is-size-4");
-                        }
-                        FontSize::Medium => {
-                            b.replace_classes(b.font_size().to_string(), "is-size-5");
-                        }
-                        _ => {}
-                    };
+                    b.replace_classes("button__tap", "button");
+                    b.replace_classes(b.style().to_string(), match b.style() {
+                        StyleBase::Default => "is-primary",
+                        StyleBase::Success => "is-success",
+                        StyleBase::Danger  => "is-danger",
+                        StyleBase::Warning => "is-warning",
+                        StyleBase::Info    => "is-info",
+                        StyleBase::Light   => "is-light",
+                        StyleBase::Dark    => "is-dark",
+                        StyleBase::Link    => "is-text",
+                    });
+                    b.replace_classes(b.font_size().to_string(), with_font(b.font_size()));
                 }
             }
             t if t == TypeId::of::<Heading>() => {
@@ -113,24 +76,7 @@ impl ThemeTrait for Bulmix {
             t if t == TypeId::of::<Paragraph>() => {
                 if let Some(p) = component_as_mut::<Paragraph>(component) {
                     p.add_classes("block");
-                    match p.font_size() {
-                        FontSize::ExtraLarge => {
-                            p.replace_classes(p.font_size().to_string(), "is-size-1");
-                        }
-                        FontSize::XxLarge => {
-                            p.replace_classes(p.font_size().to_string(), "is-size-2");
-                        }
-                        FontSize::XLarge => {
-                            p.replace_classes(p.font_size().to_string(), "is-size-3");
-                        }
-                        FontSize::Large => {
-                            p.replace_classes(p.font_size().to_string(), "is-size-4");
-                        }
-                        FontSize::Medium => {
-                            p.replace_classes(p.font_size().to_string(), "is-size-5");
-                        }
-                        _ => {}
-                    };
+                    p.replace_classes(p.font_size().to_string(), with_font(p.font_size()));
                 }
             }
             _ => {}
@@ -156,3 +102,15 @@ impl ThemeTrait for Bulmix {
         }
     }
 }
+
+#[rustfmt::skip]
+fn with_font(font_size: &FontSize) -> String {
+    String::from(match font_size {
+        FontSize::ExtraLarge => "is-size-1",
+        FontSize::XxLarge    => "is-size-2",
+        FontSize::XLarge     => "is-size-3",
+        FontSize::Large      => "is-size-4",
+        FontSize::Medium     => "is-size-5",
+        _ => "",
+    })
+}