postgresml · levkk · Apr 2, 2024 · Mar 27, 2024 · Mar 28, 2024 · Mar 28, 2024
diff --git a/packages/pgml-components/src/lib.rs b/packages/pgml-components/src/lib.rs
@@ -3,7 +3,7 @@
 
 use sailfish::TemplateOnce;
 
-#[derive(Default, Clone, TemplateOnce)]
+#[derive(Default, Clone, TemplateOnce, Debug)]
 #[template(path = "components/component.html")]
 pub struct Component {
     pub value: String,

diff --git a/pgml-dashboard/Cargo.lock b/pgml-dashboard/Cargo.lock
diff --git a/pgml-dashboard/src/api/cms.rs b/pgml-dashboard/src/api/cms.rs
@@ -14,7 +14,7 @@ use yaml_rust::YamlLoader;
 use crate::{
     components::{cms::index_link::IndexLink, layouts::marketing::base::Theme, layouts::marketing::Base},
     guards::Cluster,
-    responses::{Response, ResponseOk, Template},
+    responses::{Error, Response, ResponseOk, Template},
     templates::docs::*,
     utils::{config, markdown::SearchResult},
 };
@@ -882,6 +882,37 @@ async fn careers_landing_page(cluster: &Cluster) -> Result<ResponseOk, crate::re
     Ok(ResponseOk(layout.render(page)))
 }
 
+#[get("/components-library-demo?<search>")]
+async fn demo(search: Option<String>) -> Result<Response, Error> {
+    #[cfg(not(debug_assertions))]
+    {
+        let _search = search;
+        return Ok(Response::not_found());
+    }
+
+    #[cfg(debug_assertions)]
+    {
+        use crate::components::dropdown::{DropdownFrame, DropdownItems};
+        use crate::components::inputs::text::search::SearchOption;
+        if let Some(search) = search {
+            let candidates = vec!["hello", "world", "foo", "bar"]
+                .into_iter()
+                .filter(|c| c.starts_with(&search))
+                .map(|c| SearchOption::new(c.into()).into())
+                .collect::<Vec<pgml_components::Component>>();
+
+            Ok(Response::ok(
+                DropdownFrame::rendered("model-search", DropdownItems::new(candidates).into()).render_once()?,
+            ))
+        } else {
+            let layout = Base::new("Demos", None).theme(Theme::Marketing);
+
+            let page = crate::components::pages::demo::Demo::new();
+            Ok(Response::ok(layout.render(page)))
+        }
+    }
+}
+
 pub fn routes() -> Vec<Route> {
     routes![
         blog_landing_page,
@@ -896,7 +927,8 @@ pub fn routes() -> Vec<Route> {
         get_docs_asset,
         get_user_guides,
         search,
-        search_blog
+        search_blog,
+        demo,
     ]
 }
 

diff --git a/pgml-dashboard/src/components/badges/large/label/label.scss b/pgml-dashboard/src/components/badges/large/label/label.scss
@@ -0,0 +1,11 @@
+span[data-controller="badges-large-label"] {
+    padding: 8px;
+    background: #{$gray-500};
+    font-weight: #{$font-weight-medium};
+    border: 1px solid #{$neon-tint-100};
+
+    &.active {
+        background: #{$neon-tint-100};
+        border: 1px solid #{$neon-tint-600};
+    }
+}
diff --git a/pgml-dashboard/src/components/badges/large/label/mod.rs b/pgml-dashboard/src/components/badges/large/label/mod.rs
@@ -0,0 +1,39 @@
+use crate::components::stimulus::StimulusAction;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(Clone, Debug)]
+pub struct LabelCloseOptions {
+    pub action: StimulusAction,
+    pub url: String,
+}
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "badges/large/label/template.html")]
+pub struct Label {
+    value: String,
+    close_options: Option<LabelCloseOptions>,
+    active: String,
+}
+
+impl Label {
+    pub fn new(value: &str) -> Label {
+        Label {
+            value: value.into(),
+            close_options: None,
+            active: "".into(),
+        }
+    }
+
+    pub fn close_options(mut self, options: LabelCloseOptions) -> Label {
+        self.close_options = Some(options);
+        self
+    }
+
+    pub fn active(mut self) -> Label {
+        self.active = "active".into();
+        self
+    }
+}
+
+component!(Label);
diff --git a/pgml-dashboard/src/components/badges/large/label/template.html b/pgml-dashboard/src/components/badges/large/label/template.html
@@ -0,0 +1,12 @@
+<% use crate::components::badges::large::label::LabelCloseOptions; %>
+
+<span data-controller="badges-large-label" class="d-inline-flex gap-2 align-items-center rounded-2 <%= active %>">
+  <span><%= value %></span>
+  <% if let Some(LabelCloseOptions { action, url }) = close_options { %>
+  <a href="<%= url %>" data-action="<%= action %>" class="d-inline-flex align-items-center">
+    <span class="material-symbols-outlined text-white">
+      close
+    </span>
+  </a>
+  <% } %>
+</span>
diff --git a/pgml-dashboard/src/components/badges/large/mod.rs b/pgml-dashboard/src/components/badges/large/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/badges/large/label
+pub mod label;
+pub use label::Label;
diff --git a/pgml-dashboard/src/components/badges/mod.rs b/pgml-dashboard/src/components/badges/mod.rs
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/badges/large
+pub mod large;
+
+// src/components/badges/small
+pub mod small;
diff --git a/pgml-dashboard/src/components/badges/small/label/label.scss b/pgml-dashboard/src/components/badges/small/label/label.scss
@@ -0,0 +1,12 @@
+span[data-controller="badges-small-label"] {
+    span {
+        font-size: 12px;
+        font-weight: #{$font-weight-normal};
+    }
+
+    background: #{$gray-800};
+    padding: 4px 8px;
+    border-radius: 4px;
+
+    text-transform: uppercase;
+}
diff --git a/pgml-dashboard/src/components/badges/small/label/mod.rs b/pgml-dashboard/src/components/badges/small/label/mod.rs
@@ -0,0 +1,48 @@
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "badges/small/label/template.html")]
+pub struct Label {
+    value: String,
+    image_url: String,
+}
+
+impl Label {
+    pub fn check_circle(value: &str) -> Label {
+        Label {
+            value: value.into(),
+            image_url: "/dashboard/static/images/icons/check_circle.svg".to_string(),
+        }
+    }
+
+    pub fn cancel(value: &str) -> Label {
+        Label {
+            value: value.into(),
+            image_url: "/dashboard/static/images/icons/cancel.svg".to_string(),
+        }
+    }
+
+    pub fn outbound(value: &str) -> Label {
+        Label {
+            value: value.into(),
+            image_url: "/dashboard/static/images/icons/outbound.svg".to_string(),
+        }
+    }
+
+    pub fn download_for_offline(value: &str) -> Label {
+        Label {
+            value: value.into(),
+            image_url: "/dashboard/static/images/icons/download_for_offline.svg".to_string(),
+        }
+    }
+
+    pub fn forward_circle(value: &str) -> Label {
+        Label {
+            value: value.into(),
+            image_url: "/dashboard/static/images/icons/forward_circle.svg".to_string(),
+        }
+    }
+}
+
+component!(Label);
diff --git a/pgml-dashboard/src/components/badges/small/label/template.html b/pgml-dashboard/src/components/badges/small/label/template.html
@@ -0,0 +1,4 @@
+<span data-controller="badges-small-label" class="d-inline-flex gap-2 align-items-center">
+  <img src="<%= image_url %>" alt="icon" aria-hidden="true" width="14" height="15">
+  <span><%= value %></span>
+</span>
diff --git a/pgml-dashboard/src/components/badges/small/mod.rs b/pgml-dashboard/src/components/badges/small/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/badges/small/label
+pub mod label;
+pub use label::Label;
diff --git a/pgml-dashboard/src/components/cards/mod.rs b/pgml-dashboard/src/components/cards/mod.rs
@@ -7,3 +7,7 @@ pub mod blog;
 // src/components/cards/newsletter_subscribe
 pub mod newsletter_subscribe;
 pub use newsletter_subscribe::NewsletterSubscribe;
+
+// src/components/cards/rgb
+pub mod rgb;
+pub use rgb::Rgb;
diff --git a/pgml-dashboard/src/components/cards/rgb/mod.rs b/pgml-dashboard/src/components/cards/rgb/mod.rs
@@ -0,0 +1,38 @@
+use pgml_components::{component, Component};
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce)]
+#[template(path = "cards/rgb/template.html")]
+pub struct Rgb {
+    value: Component,
+    active: bool,
+    link: Option<String>,
+}
+
+impl Default for Rgb {
+    fn default() -> Self {
+        Rgb::new("RGB card".into())
+    }
+}
+
+impl Rgb {
+    pub fn new(value: Component) -> Rgb {
+        Rgb {
+            value,
+            active: false,
+            link: None,
+        }
+    }
+
+    pub fn active(mut self) -> Self {
+        self.active = true;
+        self
+    }
+
+    pub fn link(mut self, link: &str) -> Self {
+        self.link = Some(link.to_string());
+        self
+    }
+}
+
+component!(Rgb);
diff --git a/pgml-dashboard/src/components/cards/rgb/rgb.scss b/pgml-dashboard/src/components/cards/rgb/rgb.scss
@@ -0,0 +1,6 @@
+div[data-controller="cards-rgb"] {
+    .card {
+        --bs-card-bg: transparent;
+        --bs-card-border-color: #{$gray-700};
+    }
+}
diff --git a/pgml-dashboard/src/components/cards/rgb/rgb_controller.js b/pgml-dashboard/src/components/cards/rgb/rgb_controller.js
@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  // Activate this card (add RGB).
+  active() {
+    this.element
+      .querySelector(".card")
+      .classList.add("main-gradient-border-card-1");
+  }
+
+  // Deactivate this card (remove RGB).
+  inactive() {
+    this.element
+      .querySelector(".card")
+      .classList.remove("main-gradient-border-card-1");
+  }
+}
diff --git a/pgml-dashboard/src/components/cards/rgb/template.html b/pgml-dashboard/src/components/cards/rgb/template.html
@@ -0,0 +1,11 @@
+<% let active = if active { "main-gradient-border-card-1 active" } else { "" }; %>
+<div data-controller="cards-rgb">
+  <div class="card <%= active %>">
+    <div class="card-body">
+      <%+ value %>
+      <% if let Some(link) = link { %>
+        <a href="<%= link %>" class="stretched-link"></a>
+      <% } %>
+    </div>
+  </div>
+</div>
diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss
@@ -95,7 +95,7 @@
 }
 
 @mixin dropdown-menu($primary-color: null) {
-    padding: 20px 0px 40px 0px;
+    padding: 20px 0px 20px 0px;
     overflow-y: auto;
 
     @if ($primary-color) {

diff --git a/pgml-dashboard/src/components/dropdown/dropdown_frame.html b/pgml-dashboard/src/components/dropdown/dropdown_frame.html
@@ -0,0 +1,8 @@
+<% if let Some(src) = src { %>
+<turbo-frame src="<%= src %>" id="<%= id %>">
+</turbo-frame>
+<% } else { %>
+<turbo-frame id="<%= id %>">
+  <%+ content %>
+</turbo-frame>
+<% } %>
diff --git a/pgml-dashboard/src/components/dropdown/dropdown_items.html b/pgml-dashboard/src/components/dropdown/dropdown_items.html
@@ -0,0 +1,3 @@
+<% for item in items { %>
+  <%+ item %>
+<% } %>