trek 2.2.0 → 2.3.1

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

@@ -0,0 +1,69 @@
+/* Use component-local class names and add them to HTML via #class_for(name) helper */
+
+.root {
+  display: inline-flex;
+  position: relative;
+}
+
+/* Inherits its context's color and font, so it reads as part of the surrounding text or link (and
+   follows its hover color). Style the trigger itself, not the root, with `trigger_classnames:`. */
+.trigger {
+  align-items: center;
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  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=trigger_classes
+    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();
+  }
+}

data/app/components/trek/dropdown_component.rb

@@ -0,0 +1,34 @@
+module Trek
+  class DropdownComponent < Trek::Component
+    option :label, optional: true       # accessible name (aria-label on trigger + menu)
+    option :classnames, optional: true  # extra classes on root
+    option :trigger_classnames, optional: true # extra classes on the trigger button, the clickable element
+    option :hide_chevron, default: proc { false }
+
+    renders_one :trigger                 # inner content of the trigger button (e.g. an icon)
+    renders_many :items, "ItemComponent"
+
+    def classes
+      class_names_for(root_class, classnames)
+    end
+
+    def trigger_classes
+      class_names_for(class_for("trigger"), trigger_classnames)
+    end
+
+    def menu_id
+      @menu_id ||= "#{identifier}-menu-#{SecureRandom.hex(4)}"
+    end
+
+    class ItemComponent < Trek::Component
+      option :data, default: -> { {} }
+
+      def call
+        attrs = { class: class_for("root"), role: "menuitem", tabindex: -1, data: }
+        tag.li(**attrs) do
+          content
+        end
+      end
+    end
+  end
+end

data/app/components/trek/form/group_component/group_component.css

@@ -92,6 +92,40 @@
   color: var(--slate-12);
 }
 
+.root input[type="file"] {
+  color: var(--slate-12);
+  font-size: 1.4rem;
+}
+
+/* Mirrors Trek::ButtonComponent with size: :narrow — keep in sync with
+   button_component/button_component.css (the scoped class can't be reused here) */
+.root input[type="file"]::file-selector-button {
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid var(--slate-6);
+  border-radius: 0.8rem;
+  color: var(--slate-12);
+  cursor: pointer;
+  font-size: 1.6rem;
+  font-weight: var(--semibold);
+  line-height: 1.25;
+  margin-right: 1.6rem;
+  padding: 1rem 2.8rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
+.root input[type="file"]::file-selector-button:hover {
+  background-color: var(--accent-3);
+  border-color: var(--accent-5);
+}
+
+.root input[type="file"]::file-selector-button:active {
+  background-color: var(--accent-4);
+  border-color: var(--accent-6);
+  color: var(--accent-12);
+}
+
 .root input:disabled,
 .root select:disabled,
 .root textarea:disabled {

data/app/components/trek/header_component/header_component.css

@@ -40,6 +40,7 @@
   align-items: center;
   border-radius: 0.8rem;
   display: flex;
+  gap: 0.8rem;
   padding: 1rem 1.6rem;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
@@ -52,10 +53,6 @@
   cursor: pointer;
 }
 
-.nav-item-link .nav-item-icon {
-  margin-left: 0.8rem;
-}
-
 .nav-item-link:hover,
 .nav-item-button:hover {
   background-color: var(--accent-3);
@@ -69,6 +66,14 @@
   text-overflow: ellipsis;
 }
 
+/* The theme dropdown's trigger: a nav item button (the button itself, so the whole pill is clickable),
+   with a larger icon and less vertical padding. */
+.nav-theme-trigger {
+  --icon-size: 2rem;
+
+  padding: 0.8rem 1.6rem;
+}
+
 /* Media queries */
 
 @media (max-width: 768px) {

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

@@ -1,4 +1,5 @@
-div(class=classes data-controller=identifier)
+div(class=classes data-controller=identifier \
+    data=stimulus_value_hash("url", theme_admin_users_path))
   = render Trek::BrandComponent.new
   nav(class=class_for("nav"))
     ul(class=class_for("nav-items"))
@@ -31,12 +32,18 @@ div(class=classes data-controller=identifier)
                 "trek/profile",
                 classnames: class_for("nav-item-icon"),
               )
-      li(class=class_for("nav-item"))
-        button(
-          class=class_for("nav-item-button")
-          data-action=stimulus_action("toggleTheme")
-        )
-          = render Trek::IconComponent.new( \
-              "trek/theme",
-              classnames: class_for("nav-item-icon"),
-            )
+        li(class=class_for("nav-item"))
+          = render Trek::DropdownComponent.new( \
+              label: User.human_attribute_name(:theme),
+              trigger_classnames: theme_trigger_classes,
+              hide_chevron: true,
+            ) do |dropdown|
+            - dropdown.with_trigger do
+              = helpers.theme_icon(current_user.theme)
+            - %w[auto light dark].each do |theme|
+              = dropdown.with_item(data: theme_item_data(theme)) do
+                = render Trek::IconComponent.new( \
+                    "trek/theme-#{theme}",
+                    classnames: class_for("nav-item-icon"),
+                  )
+                span = t("user.theme.#{theme}")

data/app/components/trek/header_component/header_component.js

@@ -3,11 +3,35 @@ import "./header_component.css";
 import { Controller as BaseController } from "@hotwired/stimulus";
 
 export class Controller extends BaseController {
-  toggleTheme() {
-    const dark = document.documentElement.classList.toggle("dark-theme");
-    document.documentElement.classList.toggle("light-theme");
+  static values = { url: String };
 
-    // TODO: save theme to user account
-    console.log(dark ? "dark" : "light");
+  setTheme(event) {
+    const theme = event.currentTarget.dataset.theme;
+    if (!theme) return;
+
+    const root = document.documentElement;
+    root.classList.remove("auto-theme", "light-theme", "dark-theme");
+    root.classList.add(`${theme}-theme`);
+
+    this.persist(theme);
+  }
+
+  async persist(theme) {
+    if (!this.hasUrlValue) return;
+
+    const token = document.querySelector('meta[name="csrf-token"]')?.content;
+    const response = await fetch(this.urlValue, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": token,
+        Accept: "text/vnd.turbo-stream.html",
+      },
+      body: JSON.stringify({ theme }),
+    });
+
+    // A manual fetch is not processed by Turbo automatically; render the
+    // returned stream ourselves to refresh the server-rendered theme icon.
+    if (response.ok) window.Turbo.renderStreamMessage(await response.text());
   }
 }

data/app/components/trek/header_component.rb

@@ -4,6 +4,7 @@ module Trek
   class HeaderComponent < Trek::Component
     extend Dry::Initializer
     include ActionPolicy::Behaviour
+    include Trek::PagePathHelper
 
     option :current_object, optional: true
     option :current_user, optional: true
@@ -25,14 +26,36 @@ module Trek
       current_object&.persisted? && (
         allowed_to?(:preview?, current_object, namespace: Admin, strict_namespace: true) ||
         (current_object_page? || current_object.respond_to?(:page))
-      )
+      ) && preview_path.present?
+    end
+
+    def theme_trigger_classes
+      class_names_for("nav-item-button", "nav-theme-trigger", map_args: true)
+    end
+
+    def theme_item_data(theme)
+      { action: stimulus_action("click", "setTheme"), theme: }
     end
 
     def can_preview_home?
       Admin::PreviewPolicy.new(user: current_user).apply(:home?)
     end
 
+    # Where the current object shows on the website, or nil when the app has no front-office route
+    # for it (a freshly generated app has none): the link is then left out rather than raising.
     def preview_path
+      return @preview_path if defined?(@preview_path)
+
+      @preview_path = website_path
+    rescue NoMethodError => e
+      raise unless e.receiver.equal?(self) && e.name.to_s.end_with?("_path", "_url")
+
+      @preview_path = nil
+    end
+
+    private
+
+    def website_path
       return current_object unless defined?(Page) && defined?(PageVersion)
 
       case current_object
@@ -50,8 +73,6 @@ module Trek
       end
     end
 
-    private
-
     def current_object_page?
       defined?(Page) && current_object.is_a?(Page)
     end

data/app/components/trek/menu_component/menu_component.css

@@ -38,6 +38,12 @@
   padding: 1rem 2.4rem;
 }
 
+.-section--item-icon {
+  --icon-size: 1.2rem;
+
+  margin-left: 0.6rem;
+}
+
 .-section--item-link:hover {
   background-color: var(--accent-3);
   color: var(--accent-11);

data/app/components/trek/menu_component.rb

@@ -62,13 +62,16 @@ module Trek
         # against it, a boolean forces the state. By default the item is active when its href
         # matches the current controller.
         option :active, optional: true
+        option :target, optional: true
 
         def call
           tag.li(
             link_to(
-              text,
+              rendered_text,
               href,
-              class: class_for("link")
+              class: class_for("link"),
+              target:,
+              rel:
             ),
             class: class_names_for(
               root_class,
@@ -83,6 +86,24 @@ module Trek
 
         private
 
+        def rendered_text
+          safe_join([text, icon].compact)
+        end
+
+        def icon
+          return unless new_tab?
+
+          render IconComponent.new("trek/external", classnames: class_for("icon"))
+        end
+
+        def rel
+          "noopener" if new_tab?
+        end
+
+        def new_tab?
+          target == "_blank"
+        end
+
         def active?
           case active
           when nil then href_path == controller_path
@@ -93,8 +114,12 @@ module Trek
         end
 
         def href_path
-          Array.wrap(href).map do |part|
-            part.respond_to?(:model_name) ? part.model_name.collection : part
+          Array.wrap(href).inject([]) do |parts, part|
+            segments = part.respond_to?(:model_name) ? part.model_name.collection.split("/") : [part.to_s]
+            # A namespaced model's collection already contains the namespace symbols the
+            # route helper needs before it — drop the overlap instead of doubling it.
+            overlap = (segments.length - 1).downto(0).find { |n| parts.last(n) == segments.first(n) }
+            parts + segments.drop(overlap)
           end.join("/").sub("root", "dashboards")
         end
       end

data/app/components/trek/toaster/toast_component.rb

@@ -52,7 +52,7 @@ module Trek
         def icon
           return if target != "_blank"
 
-          render IconComponent.new("external", classnames: class_for("icon"))
+          render IconComponent.new("trek/external", classnames: class_for("icon"))
         end
 
         def params

data/app/controllers/concerns/trek/authorization.rb

@@ -4,6 +4,8 @@ module Trek
 
     included do
       helper_method :policy_for, :policy_permitted_attribute?
+
+      rescue_from ActionPolicy::Unauthorized, with: :deny_access
     end
 
     private
@@ -11,5 +13,15 @@ module Trek
     def policy_permitted_attribute?(name)
       policy_for(record: @object).permitted_attribute?(name)
     end
+
+    # A signed-in user opening what their role doesn't allow (an editor on the users panel…) goes back
+    # where they came from, or to the dashboard, with an alert, rather than to an error page. Other
+    # formats (Turbo Streams, JSON) get a plain 403.
+    def deny_access
+      respond_to do |format|
+        format.html { redirect_back_or_to admin_root_path, alert: t("notices.unauthorized") }
+        format.any { head :forbidden }
+      end
+    end
   end
 end

data/app/controllers/concerns/trek/filters.rb

@@ -25,8 +25,13 @@ module Trek
     def apply_filters(scope, filters)
       return scope if filters.blank?
 
+      # Only the controller's own filters: the keys come from the request and become column names
+      allowed = available_filters.map(&:to_s)
+
       filters.each do |filter, value|
         next if value.blank?
+        next unless allowed.include?(filter.to_s)
+
         value = nil if value == "nil"
 
         scope = scope.where(filter => value)
@@ -37,7 +42,19 @@ module Trek
 
     def apply_filters!
       @filters_applied = true
-      @objects = apply_filters(@objects, params[:filters])
+      @objects = apply_filters(@objects, filter_params)
+    end
+
+    # The requested filters, permitted to the available ones with scalar values only; nil when
+    # params[:filters] isn't a hash
+    def filter_params
+      filters = params[:filters]
+      filters.permit(*available_filters) if filters.respond_to?(:permit)
+    end
+
+    # The columns a request may filter on; override in the controller.
+    def available_filters
+      []
     end
 
     private

data/app/helpers/trek/page_path_helper.rb

@@ -13,10 +13,11 @@ module Trek
       raise "#{object} is not a page" unless object.is_a?(Page)
 
       if object.pageable.present?
-        klass = object.pageable.class.name.underscore
+        # Same key as Rails' polymorphic routes: `shop_product` for Shop::Product, `post` for an isolated engine's Blog::Post
+        route_key = object.pageable.model_name.singular_route_key
         id = object.slug.presence || object.to_param
 
-        id ? send(:"#{klass}_#{suffix}", id:, **options) : nil
+        id ? send(:"#{route_key}_#{suffix}", id:, **options) : nil
       else
         begin
           key = object.key.presence
@@ -27,7 +28,7 @@ module Trek
               send(:"localized_root_#{suffix}", locale:, **options)
             end
           else
-            send(:"#{key}_path", **options)
+            send(:"#{key}_#{suffix}", **options)
           end
         rescue NoMethodError
           I18n.with_locale(locale) do

data/app/helpers/trek/theme_helper.rb

@@ -1,10 +1,25 @@
 module Trek
   module ThemeHelper
+    # DOM id of the header's theme indicator, targeted by the theme turbo_stream.
+    THEME_ICON_ID = "header-theme-icon".freeze
+
     def class_for_theme
       if authenticated?
         "#{Current.user.theme}-theme"
       else
-        "light-theme"
+        "auto-theme"
+      end
+    end
+
+    # Renders the theme indicator used in the header trigger. Wrapped in a
+    # stable-id element so the +theme+ turbo_stream can replace it after a
+    # theme change. Used both on initial render and in the stream response.
+    def theme_icon(theme)
+      tag.span(id: THEME_ICON_ID) do
+        render Trek::IconComponent.new(
+          "trek/theme-#{theme}",
+          classnames: "c-trek--header-nav-item-icon"
+        )
       end
     end
   end

data/app/models/concerns/trek/phonable.rb

@@ -10,14 +10,26 @@ module Trek
   module Phonable
     extend ActiveSupport::Concern
 
+    STRICTNESSES = %i[possible valid].freeze
+
     class_methods do
-      def phonable_attributes(*attrs)
+      # `strictness:` picks how hard Phonelib looks. `:possible`, the default, only asks whether the
+      # digits could form a number for the country; `:valid` asks whether they fall in a range the
+      # regulator has actually assigned. The gap is not academic: with a French default country,
+      # "0012345678" is possible, so it is accepted and normalized to "+12345678" — the stray leading
+      # zero read as an international prefix, the number silently rehomed to country code +1. An app
+      # that intends to call the numbers it collects wants `:valid`.
+      def phonable_attributes(*attrs, strictness: :possible)
+        unless STRICTNESSES.include?(strictness)
+          raise ArgumentError, "unknown strictness #{strictness.inspect}, expected one of #{STRICTNESSES.inspect}"
+        end
+
         @__phonable_attributes ||= []
         @__phonable_attributes += attrs
 
         attrs.each do |attr|
           validates attr,
-            phone: { possible: true, allow_blank: true }
+            phone: { possible: strictness == :possible, allow_blank: true }
 
           define_method :"formatted_#{attr}" do
             return if send(attr).blank?
@@ -42,7 +54,7 @@ module Trek
 
     def normalize_phone
       self.class.instance_variable_get(:@__phonable_attributes).each do |attr|
-        send(:"#{attr}=", Phonelib.parse(phone).full_e164.presence)
+        send(:"#{attr}=", Phonelib.parse(send(attr)).full_e164.presence)
       end
     end
   end