trek 2.1.0 → 2.3.0

data/app/components/trek/dashboard/chart_component/chart_component.css

@@ -0,0 +1,192 @@
+.root {
+  border: 0.1rem solid;
+  border-radius: 0.8rem;
+  font-weight: var(--semibold);
+  margin-bottom: 2rem;
+  max-width: 83.7rem;
+  padding: 2rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.title {
+  color: var(--mint-12);
+  font-size: 1.6rem;
+  font-weight: var(--semibold);
+  margin: 0 0 0.5rem;
+}
+
+.data {
+  margin-bottom: 2rem;
+}
+
+.info {
+  color: var(--slate-11);
+  font-size: 1.4rem;
+  font-weight: var(--medium);
+  padding-bottom: 1.6rem;
+}
+
+.root.color-amber {
+  --icon-color: var(--amber-11);
+
+  background-color: var(--amber-2);
+  border-color: var(--amber-5);
+  color: var(--amber-12);
+}
+
+.root.color-amber:hover {
+  --icon-color: var(--amber-12);
+
+  background-color: var(--amber-3);
+  border-color: var(--amber-6);
+}
+
+.root.color-amber:active {
+  background-color: var(--amber-5);
+  border-color: var(--amber-7);
+}
+
+.root.color-lime {
+  --icon-color: var(--lime-11);
+
+  background-color: var(--lime-2);
+  border-color: var(--lime-5);
+  color: var(--lime-12);
+}
+
+.root.color-lime:hover {
+  --icon-color: var(--lime-12);
+
+  background-color: var(--lime-3);
+  border-color: var(--lime-6);
+}
+
+.root.color-lime:active {
+  background-color: var(--lime-5);
+  border-color: var(--lime-7);
+}
+
+.root.color-mint {
+  --icon-color: var(--mint-11);
+
+  background-color: var(--mint-2);
+  border-color: var(--mint-5);
+  color: var(--mint-12);
+}
+
+.root.color-mint:hover {
+  --icon-color: var(--mint-12);
+
+  background-color: var(--mint-3);
+  border-color: var(--mint-6);
+}
+
+.root.color-mint:active {
+  background-color: var(--mint-5);
+  border-color: var(--mint-7);
+}
+
+.root.color-purple {
+  --icon-color: var(--purple-11);
+
+  background-color: var(--purple-2);
+  border-color: var(--purple-5);
+  color: var(--purple-12);
+}
+
+.root.color-purple:hover {
+  --icon-color: var(--purple-12);
+
+  background-color: var(--purple-3);
+  border-color: var(--purple-6);
+}
+
+.root.color-purple:active {
+  background-color: var(--purple-5);
+  border-color: var(--purple-7);
+}
+
+.root.color-sky {
+  --icon-color: var(--sky-11);
+
+  background-color: var(--sky-2);
+  border-color: var(--sky-5);
+  color: var(--sky-12);
+}
+
+.root.color-sky:hover {
+  --icon-color: var(--sky-12);
+
+  background-color: var(--sky-3);
+  border-color: var(--sky-6);
+}
+
+.root.color-sky:active {
+  background-color: var(--sky-5);
+  border-color: var(--sky-7);
+}
+
+.root.color-slate {
+  --icon-color: var(--slate-11);
+
+  background-color: var(--slate-2);
+  border-color: var(--slate-5);
+  color: var(--slate-12);
+}
+
+.root.color-slate:hover {
+  --icon-color: var(--slate-12);
+
+  background-color: var(--slate-3);
+  border-color: var(--slate-6);
+}
+
+.root.color-slate:active {
+  background-color: var(--slate-5);
+  border-color: var(--slate-7);
+}
+
+.root.color-teal {
+  --icon-color: var(--teal-11);
+
+  background-color: var(--teal-2);
+  border-color: var(--teal-5);
+  color: var(--teal-12);
+}
+
+.root.color-teal:hover {
+  --icon-color: var(--teal-12);
+
+  background-color: var(--teal-3);
+  border-color: var(--teal-6);
+}
+
+.root.color-teal:active {
+  background-color: var(--teal-5);
+  border-color: var(--teal-7);
+}
+
+.root.color-violet {
+  --icon-color: var(--violet-11);
+
+  background-color: var(--violet-2);
+  border-color: var(--violet-5);
+  color: var(--violet-12);
+}
+
+.root.color-violet:hover {
+  --icon-color: var(--violet-12);
+
+  background-color: var(--violet-3);
+  border-color: var(--violet-6);
+}
+
+.root.color-violet:active {
+  background-color: var(--violet-5);
+  border-color: var(--violet-7);
+}

data/app/components/trek/dashboard/chart_component/chart_component.html.slim

@@ -0,0 +1,6 @@
+div(class=classes)
+  div(class=class_for("title")) = title
+  - if info.present?
+    span(class=class_for("info")) = info
+  div(class=class_for("data"))
+  = chart

data/app/components/trek/dashboard/chart_component/chart_component.js

@@ -0,0 +1 @@
+import "./chart_component.css";

data/app/components/trek/dashboard/chart_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Trek
+  class Dashboard::ChartComponent < Trek::Component
+    # Chartkick is an optional dependency: host apps that use this component must
+    # add `gem "chartkick"` and import "chartkick/chart.js" in their JS bundle.
+    include Chartkick::Helper if defined?(Chartkick)
+
+    option :title
+    option :info, optional: true
+    option :data
+    option :type
+    option :options, optional: true, default: proc { {} }
+    option :color, default: proc { :slate }
+
+    def chart
+      public_send(type, data, **options)
+    end
+
+    def classes
+      class_names(
+        root_class,
+        class_for("color-#{color}")
+      )
+    end
+  end
+end

data/app/components/trek/dashboard/tile_component/tile_component.css

@@ -20,6 +20,14 @@
   width: 20rem;
 }
 
+.root.wide {
+  width: calc(40rem + 1.2rem);
+}
+
+.title {
+  font-size: 3.6rem;
+}
+
 .root:hover .icon {
   transform: scale(1.125);
 }
@@ -58,6 +66,10 @@
   border-color: var(--amber-7);
 }
 
+.root.color-amber .title {
+  color: var(--amber-11);
+}
+
 .root.color-lime {
   --icon-color: var(--lime-11);
 
@@ -78,6 +90,10 @@
   border-color: var(--lime-7);
 }
 
+.root.color-lime .title {
+  color: var(--lime-11);
+}
+
 .root.color-mint {
   --icon-color: var(--mint-11);
 
@@ -98,6 +114,10 @@
   border-color: var(--mint-7);
 }
 
+.root.color-mint .title {
+  color: var(--mint-11);
+}
+
 .root.color-purple {
   --icon-color: var(--purple-11);
 
@@ -118,6 +138,10 @@
   border-color: var(--purple-7);
 }
 
+.root.color-purple .title {
+  color: var(--purple-11);
+}
+
 .root.color-sky {
   --icon-color: var(--sky-11);
 
@@ -138,6 +162,10 @@
   border-color: var(--sky-7);
 }
 
+.root.color-sky .title {
+  color: var(--sky-11);
+}
+
 .root.color-slate {
   --icon-color: var(--slate-11);
 
@@ -158,6 +186,10 @@
   border-color: var(--slate-7);
 }
 
+.root.color-slate .title {
+  color: var(--slate-11);
+}
+
 .root.color-teal {
   --icon-color: var(--teal-11);
 
@@ -178,6 +210,10 @@
   border-color: var(--teal-7);
 }
 
+.root.color-teal .title {
+  color: var(--teal-11);
+}
+
 .root.color-violet {
   --icon-color: var(--violet-11);
 
@@ -197,3 +233,7 @@
   background-color: var(--violet-5);
   border-color: var(--violet-7);
 }
+
+.root.color-violet .title {
+  color: var(--violet-11);
+}

data/app/components/trek/dashboard/tile_component/tile_component.html.slim

@@ -1,4 +1,14 @@
-= link_to href, class: classes, rel: rel, target: target
-  - if icon
-    = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
-  span(class=class_for("text")) = formatted_text
+- if href.present?
+  = link_to href, class: classes, data: link_data, rel: link_rel, target: target
+    - if title
+      span(class=class_for("title")) = title
+    - if icon
+      = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
+    span(class=class_for("text")) = formatted_text
+- else
+  div(class=classes)
+    - if title
+      span(class=class_for("title")) = title
+    - if icon
+      = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
+    span(class=class_for("text")) = formatted_text

data/app/components/trek/dashboard/tile_component.rb

@@ -3,12 +3,21 @@
 module Trek
   class Dashboard::TileComponent < Trek::Component
     option :color, default: proc { :slate }
-    option :href
+    # Extra data attributes for the link, e.g. `turbo_confirm:`.
+    option :data, default: proc { {} }
+    option :href, optional: true
     option :icon, optional: true
+    # An HTTP method other than GET (`:post`, `:delete`…), issued through
+    # Turbo like Trek::ButtonComponent's `to:` links: a tile can create a
+    # record in one click rather than open a form.
+    option :method, optional: true
     option :rel, optional: true
     option :target, optional: true
     option :text
+    option :title, optional: true
     option :allowed_to, default: -> { true }
+    # Spans two tile columns (including the gap between them).
+    option :wide, default: proc { false }
 
     def render?
       allowed_to
@@ -17,10 +26,19 @@ module Trek
     def classes
       class_names(
         root_class,
-        class_for("color-#{color}")
+        class_for("color-#{color}"),
+        class_for("wide") => wide
       )
     end
 
+    def link_data
+      data.merge(turbo_method: method).compact
+    end
+
+    def link_rel
+      rel || ("noopener" if target == "_blank")
+    end
+
     def formatted_text
       # rubocop:disable Rails/OutputSafety
       text.gsub("\n", "#{tag.br} ")&.html_safe

data/app/components/trek/dialog_component/dialog_component.html.slim

@@ -1,5 +1,8 @@
 dialog(class=root_class data-controller=identifier)
-  h2(class=class_for("title")) = title || t(".title")
+  h2(
+    class=class_for("title")
+    data=stimulus_target_hash("title")
+  ) = title || t(".title")
   p(
     class=class_for("text")
     data=stimulus_target_hash("text")
@@ -22,5 +25,6 @@ dialog(class=root_class data-controller=identifier)
           text: t("admin.actions.delete"),
           color: :tomato,
           value: "confirm",
-          data: { action: stimulus_action("close") },
+          data: { action: stimulus_action("close") }
+            .merge(stimulus_target_hash("confirm_button")),
         )

data/app/components/trek/dialog_component/dialog_component.js

@@ -3,11 +3,26 @@ import "./dialog_component.css";
 import { Controller as BaseController } from "@hotwired/stimulus";
 
 export class Controller extends BaseController {
-  static targets = ["text"];
+  static targets = ["title", "text", "confirmButton"];
 
   connect() {
+    this.saveDefaults();
+
+    // For a link with data-turbo-method, Turbo submits an ephemeral form it
+    // only copies data-turbo-confirm onto, and calls confirm() without a
+    // submitter — remember the clicked element to read the other
+    // data-turbo-confirm-* attributes from.
+    this.rememberConfirmSource = (event) => {
+      this.confirmSource = event.target.closest?.("[data-turbo-confirm]");
+    };
+    document.addEventListener("click", this.rememberConfirmSource, {
+      capture: true,
+    });
+
     // eslint-disable-next-line no-undef
-    Turbo.config.forms.confirm = (message) => {
+    Turbo.config.forms.confirm = (message, _formElement, submitter) => {
+      this.customize({ ...this.confirmSource?.dataset, ...submitter?.dataset });
+      this.confirmSource = null;
       this.setText(message);
       this.open();
 
@@ -23,6 +38,51 @@ export class Controller extends BaseController {
     };
   }
 
+  disconnect() {
+    document.removeEventListener("click", this.rememberConfirmSource, {
+      capture: true,
+    });
+  }
+
+  saveDefaults() {
+    if (this.hasTitleTarget) {
+      this.defaultTitle = this.titleTarget.textContent;
+    }
+
+    if (this.hasConfirmButtonTarget) {
+      this.defaultConfirmLabel = this.confirmLabelElement.textContent;
+      this.defaultConfirmColor = this.confirmButtonTarget.dataset.accentColor;
+    }
+  }
+
+  customize({ turboConfirmTitle, turboConfirmButton, turboConfirmColor }) {
+    if (this.hasTitleTarget) {
+      this.titleTarget.textContent = turboConfirmTitle ?? this.defaultTitle;
+    }
+
+    if (this.hasConfirmButtonTarget) {
+      this.confirmLabelElement.textContent =
+        turboConfirmButton ?? this.defaultConfirmLabel;
+      this.setConfirmColor(turboConfirmColor ?? this.defaultConfirmColor);
+    }
+  }
+
+  setConfirmColor(color) {
+    const button = this.confirmButtonTarget;
+
+    // Swap the postcss-modules-scoped color-* class along with the accent
+    // variables (see generateScopedName in postcss.config.js).
+    button.classList.replace(
+      `c-trek--button-color-${button.dataset.accentColor}`,
+      `c-trek--button-color-${color}`
+    );
+    button.dataset.accentColor = color;
+  }
+
+  get confirmLabelElement() {
+    return this.confirmButtonTarget.querySelector("span");
+  }
+
   setText(text) {
     if (this.hasTextTarget) {
       this.textTarget.textContent = text;

data/app/components/trek/dropdown_component/dropdown_component.css

@@ -0,0 +1,66 @@
+/* Use component-local class names and add them to HTML via #class_for(name) helper */
+
+.root {
+  display: inline-flex;
+  position: relative;
+}
+
+.trigger {
+  align-items: center;
+  background: none;
+  border: none;
+  color: var(--slate-12);
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.4rem;
+}
+
+.indicator {
+  transition: transform 0.2s ease-in-out;
+}
+
+.trigger[aria-expanded="true"] .indicator {
+  transform: rotate(180deg);
+}
+
+.menu {
+  background-color: var(--slate-2);
+  border: 1px solid var(--slate-6);
+  border-radius: 0.8rem;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
+  list-style: none;
+  margin: 0;
+  min-width: 14rem;
+  padding: 0.4rem;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.4rem);
+  z-index: 10;
+}
+
+.menu[hidden] {
+  display: none;
+}
+
+.-item-root {
+  background: none;
+  border: none;
+  border-radius: 0.6rem;
+  color: var(--slate-12);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 1.3rem;
+  gap: 1rem;
+  line-height: 1.23;
+  padding: 0.8rem 1.2rem;
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+}
+
+.-item-root:hover,
+.-item-root:focus {
+  background-color: var(--accent-3);
+  color: var(--accent-11);
+  outline: none;
+}

data/app/components/trek/dropdown_component/dropdown_component.html.slim

@@ -0,0 +1,31 @@
+div(class=classes data-controller=identifier)
+  button(
+    type="button"
+    class=class_for("trigger")
+    aria-haspopup="true"
+    aria-expanded="false"
+    aria-controls=menu_id
+    aria-label=label
+    data=stimulus_target_hash("trigger")
+    data-action=stimulus_action(click: :toggle, keydown: :on_trigger_keydown)
+  )
+    = trigger
+    - unless hide_chevron
+      = render Trek::IconComponent.new( \
+          "trek/chevron-down",
+          classnames: class_for("indicator"),
+          aria_hidden: true,
+        )
+  ul(
+    id=menu_id
+    class=class_for("menu")
+    role="menu"
+    aria-label=label
+    hidden=true
+    data=stimulus_target_hash("menu")
+    data-action=stimulus_action( \
+      keydown: :on_menu_keydown,
+      click: :on_menu_click,
+    )
+  )
+    = safe_join(items)

data/app/components/trek/dropdown_component/dropdown_component.js

@@ -0,0 +1,114 @@
+import "./dropdown_component.css";
+
+import { Controller as BaseController } from "@hotwired/stimulus";
+
+export class Controller extends BaseController {
+  static targets = ["trigger", "menu"];
+
+  connect() {
+    this.onDocumentClick = this.onDocumentClick.bind(this);
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.onDocumentClick);
+  }
+
+  get items() {
+    return Array.from(this.menuTarget.querySelectorAll('[role="menuitem"]'));
+  }
+
+  get expanded() {
+    return this.triggerTarget.getAttribute("aria-expanded") === "true";
+  }
+
+  toggle(event) {
+    event.preventDefault();
+    this.expanded ? this.collapse() : this.open();
+  }
+
+  onTriggerKeydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        this.open();
+        this.focusItem(0);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.open();
+        this.focusItem(this.items.length - 1);
+        break;
+    }
+  }
+
+  onMenuKeydown(event) {
+    const items = this.items;
+    const current = items.indexOf(document.activeElement);
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.focusItem((current + 1) % items.length);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.focusItem((current - 1 + items.length) % items.length);
+        break;
+      case "Home":
+        event.preventDefault();
+        this.focusItem(0);
+        break;
+      case "End":
+        event.preventDefault();
+        this.focusItem(items.length - 1);
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.collapse();
+        this.triggerTarget.focus();
+        break;
+      case "Enter":
+      case " ":
+        // Menu items are not native buttons: activate the focused one as a
+        // click so it runs its own action, then onMenuClick closes the menu.
+        if (current === -1) break;
+        event.preventDefault();
+        items[current].click();
+        break;
+      case "Tab":
+        this.collapse();
+        break;
+    }
+  }
+
+  onMenuClick(event) {
+    if (event.target.closest('[role="menuitem"]')) {
+      this.collapse();
+      this.triggerTarget.focus();
+    }
+  }
+
+  open() {
+    if (this.expanded) return;
+    this.menuTarget.hidden = false;
+    this.triggerTarget.setAttribute("aria-expanded", "true");
+    document.addEventListener("click", this.onDocumentClick);
+  }
+
+  collapse() {
+    if (!this.expanded) return;
+    this.menuTarget.hidden = true;
+    this.triggerTarget.setAttribute("aria-expanded", "false");
+    document.removeEventListener("click", this.onDocumentClick);
+  }
+
+  focusItem(index) {
+    const item = this.items[index];
+    if (item) item.focus();
+  }
+
+  onDocumentClick(event) {
+    if (!this.element.contains(event.target)) this.collapse();
+  }
+}