Feature: Adds Lightbox support for the File field

app/components/avo/cover_photo_component.html.erb

@@ -1,3 +1,3 @@
 <div class="related w-full -mt-4 md:-mt-4 lg:-mt-6 mb-2 flex flex-col">
-  <%= image_tag helpers.main_app.url_for(@cover_photo.value), class: class_names("w-full object-cover", size_class), data: {component: self.class.to_s.underscore} %>
+  <%= image_tag helpers.main_app.url_for(@cover_photo.value), class: class_names("w-full object-cover", size_class), data: { component: self.class.to_s.underscore } %>
 </div>

app/components/avo/fields/common/files/view_type/grid_item_component.html.erb

@@ -1,7 +1,18 @@
 <div id="<%= dom_id file %>" class="relative min-h-full max-w-full flex-1 flex flex-col justify-between space-y-2">
   <div class="flex flex-col h-full">
     <% if file.representable? && is_image? %>
-      <%= image_tag helpers.main_app.url_for(file), class: "rounded-lg max-w-full self-start #{@extra_classes}", loading: :lazy, width: file.metadata["width"], height: file.metadata["height"] %>
+    <div data-controller="lightbox" >
+      <%= image_tag helpers.main_app.url_for(file),
+        class: "rounded-lg max-w-full self-start #{@extra_classes}", 
+        loading: :lazy, 
+        width: file.metadata["width"], 
+        height: file.metadata["height"], 
+        data: {
+          action: "click->lightbox#open"
+        } 
+      %>
+      <%= render partial: "avo/partials/lightbox" %>
+    </div>
     <% elsif is_audio? %>
       <%= audio_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
     <% elsif is_video? %>
@@ -20,4 +31,4 @@
   <div class="flex space-x-2">
     <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: @field, file: file, resource: @resource) %>
   </div>
-</div>
+</div>

app/javascript/js/controllers.js

@@ -52,6 +52,7 @@ import TiptapFieldController from './controllers/fields/tiptap_field_controller'
 import ToggleController from './controllers/toggle_controller'
 import TrixBodyController from './controllers/trix_body_controller'
 import TrixFieldController from './controllers/fields/trix_field_controller'
+import LightBoxController from './controllers/lightbox_controller'
 
 application.register('action', ActionController)
 application.register('actions-overflow', ActionsOverflowController)
@@ -95,6 +96,7 @@ application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)
 application.register('toggle', ToggleController)
 application.register('trix-body', TrixBodyController)
+application.register('lightbox', LightBoxController)
 
 // Field controllers
 application.register('belongs-to-field', BelongsToFieldController)

app/javascript/js/controllers/lightbox_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["modal", "image"]
+
+  connect() {
+    console.log("Lightbox controller connected")
+  }
+
+  open(event) {
+    const imageUrl = event.target.getAttribute("src")
+    const imageAlt = event.target.getAttribute("alt") || "Expanded view of the image"
+
+    this.imageTarget.setAttribute("alt", imageAlt)
+    this.imageTarget.setAttribute("src", imageUrl)
+    this.modalTarget.classList.remove("hidden")
+
+    document.body.style.overflow = "hidden"
+  }
+
+  close(event) {
+    if (event.target === this.modalTarget || event.target.closest('[data-action*="lightbox#close"]')) {
+      this.modalTarget.classList.add("hidden")
+    }
+
+    document.body.style.overflow = "auto"
+  }
+}

spec/dummy/app/views/avo/partials/_lightbox.html.erb

@@ -0,0 +1,10 @@
+<div data-lightbox-target="modal" class="hidden fixed inset-0 z-[100] bg-gray-400 flex" data-action="click->lightbox#close">
+  <img data-lightbox-target="image" class="rounded-lg shadow-lg p-6 w-full" alt="Expanded view of the image" src="" />
+  <button
+    class="flex justify-end pr-6"
+    data-action="click->lightbox#close"
+    type="button"
+  >
+    X
+  </button>
+</div>

spec/features/avo/lightbox_spec.rb

@@ -0,0 +1,40 @@
+require "rails_helper"
+
+RSpec.feature "Lightbox", type: :feature do
+  describe "Lightbox functionality" do
+    let(:image_path) { Rails.root.join("..", "fixtures", "files", "test_image.jpg") }
+
+    let!(:post) do
+      post = create(:post)
+      post.cover_photo.attach(
+        io: File.open(image_path),
+        filename: "test_image.jpg",
+        content_type: "image/jpeg"
+      )
+      post
+    end
+
+    it "displays clicked image in a lightbox modal and closes the modal when the close button is clicked" do
+      Avo::Resources::Post.with_temporary_items do
+        field :cover_photo, as: :file, is_image: true, full_width: true, hide_on: [], accept: "image/*", stacked: true
+      end
+
+      visit "/admin/resources/posts/#{post.id}"
+
+      expect(page).to have_selector('[data-lightbox-target="modal"].hidden')
+
+      cover_photo_image = find("img[data-action='click->lightbox#open']", visible: true)
+      cover_photo_image.click
+
+      visible_modal = find('[data-lightbox-target="modal"]')
+      expect(visible_modal).to have_selector('img[data-lightbox-target="image"]')
+      expect(visible_modal).to have_selector('button[data-action="click->lightbox#close"]')
+
+      close_lightbox_modal_button = find('button[data-action="click->lightbox#close"]', visible: true)
+      close_lightbox_modal_button.click
+      expect(page).to have_selector('[data-lightbox-target="modal"].hidden')
+
+      Avo::Resources::Post.restore_items_from_backup
+    end
+  end
+end