trek 2.2.0 → 2.3.0

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();
+  }
+}

data/app/components/trek/dropdown_component.rb

@@ -0,0 +1,29 @@
+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 :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 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,15 @@
   text-overflow: ellipsis;
 }
 
+/* Theme Dropdown */
+.nav-item-link:global(.c-trek--dropdown-root) {
+  padding: 0.8rem 1.6rem;
+}
+
+.nav-item-link:global(.c-trek--dropdown-root .c-trek--icon-root) {
+  --icon-size: 2rem;
+}
+
 /* 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),
+              classnames: class_for("nav-item-link"),
+              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,32 @@ 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_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 +69,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/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

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

@@ -9,6 +9,11 @@ module Trek
     end
 
     included do
+      # Sections are the host app's own `Section` model, which Trek doesn't generate: without one, a
+      # record has no sections, and declaring the association anyway would make `destroy` raise
+      # (`dependent: :destroy`). `const_defined?` also sees a model Zeitwerk hasn't loaded yet.
+      next unless Object.const_defined?(:Section)
+
       has_many :sections,
         -> { ordered },
         as: :sectionable,

data/app/models/concerns/trek/users/validations.rb

@@ -6,7 +6,7 @@ module Trek
       included do
         validates :password,
           length: { minimum: 8 },
-          if: -> { new_record? || changes[:crypted_password] },
+          if: -> { new_record? || password_digest_changed? },
           allow_blank: true
         validates :email,
           presence: true,

data/app/uploaders/audio_uploader.rb

@@ -0,0 +1,11 @@
+class AudioUploader < Shrine
+  plugin :determine_mime_type
+  plugin :validation_helpers
+  # The admin's sound field accepts files up to 200 MB (`Trek::Form::SoundFieldComponent`), above
+  # the 20 MB the Shrine initializer allows images.
+  plugin :upload_endpoint, url: true, max_size: 200.megabytes
+
+  Attacher.validate do
+    validate_mime_type %w[audio/mpeg audio/mp4 audio/aac audio/ogg audio/wav audio/x-wav audio/webm audio/flac]
+  end
+end

data/app/uploaders/record_image_uploader.rb

@@ -1,3 +1,6 @@
 class RecordImageUploader < ImageUploader
   plugin :activerecord
+  # Keeps a file attached during a save that reloads the record (closure_tree reorders siblings
+  # that way) pending, so it is still promoted out of the cache storage on commit.
+  plugin Trek::SavedAttachmentsReload
 end

data/config/locales/trek.en.yml

@@ -69,8 +69,8 @@ en:
           self: the same tab
       prompt:
         targets:
-          blank: un nouvel onglet
-          self: le même onglet
+          blank: a new tab
+          self: the same tab
     contents: Contents
     dashboard: Dashboard
     dashboards:
@@ -264,3 +264,4 @@ en:
   notices:
     authentication_needed: Please log in
     rate_limited: Too many attempts, please try again later
+    unauthorized: You are not allowed to do that

data/config/locales/trek.fr.yml

@@ -273,3 +273,4 @@ fr:
   notices:
     authentication_needed: Veuillez vous connecter
     rate_limited: Trop de tentatives, veuillez réessayer plus tard
+    unauthorized: Vous n'êtes pas autorisé·e à faire cela