plutonium 0.16.4 → 0.18.0

data/lib/plutonium/ui/display/components/attachment.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        class Attachment < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+          include Plutonium::UI::Component::Methods
+          include Plutonium::UI::Component::Behaviour
+
+          def render_value(attachment)
+            return unless attachment.url.present?
+
+            div(
+              class: "p-2 w-full",
+              title: attachment.filename,
+              data: {
+                controller: "attachment-preview",
+                attachment_preview_mime_type_value: attachment.content_type,
+                attachment_preview_thumbnail_url_value: attachment_thumbnail_url(attachment)
+              }
+            ) do
+              div(class: "flex flex-col items-center w-full") do
+                render_thumbnail(attachment)
+                render_caption(attachment)
+              end
+            end
+          end
+
+          private
+
+          def render_thumbnail(attachment)
+            return unless attachment.url.present?
+
+            div(
+              class: "w-full aspect-square bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
+              data: {attachment_preview_target: "thumbnail"}
+            ) do
+              a(
+                href: attachment.url,
+                class: "block aspect-square overflow-hidden rounded-lg",
+                target: :blank,
+                data: {attachment_preview_target: "thumbnailLink"}
+              ) do
+                thumbnail_url = attachment_thumbnail_url(attachment)
+                if thumbnail_url
+                  img(
+                    src: thumbnail_url,
+                    class: "w-full h-full object-cover"
+                  )
+                else
+                  div(class: "w-full h-full flex items-center justify-center text-gray-500 dark:text-gray-400 font-mono") do
+                    ".#{attachment_extension(attachment)}"
+                  end
+                end
+              end
+            end
+          end
+
+          def render_caption(attachment)
+            return if attributes[:caption] == false
+
+            div(class: "w-full p-2 text-sm text-gray-700 dark:text-gray-300 truncate text-center") do
+              caption = attributes[:caption] || attachment.filename
+              a(
+                href: attachment.url,
+                class: "hover:text-primary-600 dark:hover:text-primary-500 transition-colors duration-200",
+                target: :blank
+              ) do
+                phlexi_render(caption) {
+                  plain caption
+                }
+              end
+            end
+          end
+
+          def attachment_thumbnail_url(attachment)
+            attachment.url if attachment.representable?
+          end
+
+          def attachment_extension(attachment)
+            attachment.try(:extension) || File.extname(attachment.filename.to_s)
+          end
+
+          def normalize_value(value)
+            value
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/{component → components}/markdown.rb

@@ -5,9 +5,10 @@ require "redcarpet"
 module Plutonium
   module UI
     module Display
-      module Component
+      module Components
         class Markdown < Phlexi::Display::Components::Base
           include Phlexi::Display::Components::Concerns::DisplaysValue
+          include Plutonium::UI::Component::Methods
 
           RENDERER = Redcarpet::Markdown.new(
             Redcarpet::Render::HTML.new(

data/lib/plutonium/ui/display/resource.rb

@@ -31,6 +31,10 @@ module Plutonium
         end
 
         def render_associations
+          return unless resource_associations.present?
+
+          tablist = BuildTabList()
+
           resource_associations.each do |name|
             reflection = object.class.reflect_on_association name
 
@@ -50,16 +54,26 @@ module Plutonium
             when :has_many
               resource_url_for(reflection.klass, parent: object)
             end
-            FrameNavigatorPanel(title:, src:) if src
+
+            next unless src
+
+            tablist.with_tab(
+              identifier: title.parameterize,
+              title: -> { h5(class: "text-2xl font-bold tracking-tight text-gray-900 dark:text-white") { title } }
+            ) do
+              FrameNavigatorPanel(title: "", src:)
+            end
           end
+
+          render tablist
         end
 
         def render_resource_field(name)
           when_permitted(name) do
             # field :name, as: :string
             # display :name, as: :string
-            # display :description, class: "col-span-full"
-            # display :age, tag: {class: "max-h-fit"}
+            # display :description, wrapper: {class: "col-span-full"}
+            # display :age, class: "max-h-fit"
             # display :dob do |f|
             #   f.date_tag
             # end
@@ -69,15 +83,16 @@ module Plutonium
             display_definition = resource_definition.defined_displays[name] || {}
             display_options = display_definition[:options] || {}
 
-            tag = field_options[:as] || display_options[:as]
-            tag_attributes = display_options[:tag] || {}
+            tag = display_options[:as] || field_options[:as]
+            tag_attributes = display_options.except(:wrapper, :as)
             tag_block = display_definition[:block] || ->(f) {
               tag ||= f.inferred_field_component
               f.send(:"#{tag}_tag", **tag_attributes)
             }
 
+            wrapper_options = display_options[:wrapper] || {}
+
             field_options = field_options.except(:as)
-            wrapper_options = display_options.except(:tag, :as)
             render field(name, **field_options).wrapped(**wrapper_options) do |f|
               render instance_exec(f, &tag_block)
             end

data/lib/plutonium/ui/display/theme.rb

@@ -21,7 +21,8 @@ module Plutonium
             phone: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
             json: "text-sm text-gray-900 dark:text-white mb-1 whitespace-pre font-mono shadow-inner p-4",
             prefixed_icon: "w-8 h-8 mr-2",
-            markdown: "format dark:format-invert format-primary"
+            markdown: "format dark:format-invert format-primary",
+            attachment_value_wrapper: "grid grid-cols-[repeat(auto-fill,minmax(0,180px))]"
           })
         end
       end

data/lib/plutonium/ui/form/base.rb

@@ -37,11 +37,18 @@ module Plutonium
             create_component(Components::IntlTelInput, :int_tel_input, **, &)
           end
           alias_method :phone_tag, :int_tel_input_tag
+
+          def uppy_tag(**, &)
+            create_component(Components::Uppy, :uppy, **, &)
+          end
+          alias_method :file_tag, :uppy_tag
         end
 
         private
 
         def render_actions
+          input name: :return_to, value: request.params[:return_to], type: :hidden, hidden: true
+
           actions_wrapper {
             render submit_button
           }

data/lib/plutonium/ui/form/components/belongs_to.rb

@@ -7,14 +7,58 @@ module Plutonium
         class BelongsTo < Phlexi::Form::Components::BelongsTo
           include Plutonium::UI::Component::Methods
 
+          def view_template
+            div(class: "flex space-x-1") do
+              super
+              render_add_button
+            end
+          end
+
           private
 
+          def add_url
+            @add_url ||= begin
+              return unless @skip_authorization || allowed_to?(:create?, association_reflection.klass)
+
+              url = @add_action || resource_url_for(association_reflection.klass, action: :new, parent: nil)
+              return unless url
+
+              uri = URI(url)
+              uri.query = URI.encode_www_form({return_to: request.original_url})
+              uri.to_s
+            end
+          end
+
+          def render_add_button
+            return if @add_action == false || add_url.nil?
+
+            a(
+              href: add_url,
+              class:
+                "bg-gray-100 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-500 hover:bg-gray-200 border border-gray-300 rounded-lg p-3 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none dark:text-white"
+            ) do
+              render Phlex::TablerIcons::Plus.new(class: "w-3 h-3")
+            end
+          end
+
           def choices
             @choices ||= begin
-              collection = authorized_resource_scope(association_reflection.klass, relation: @choice_collection)
+              collection = if @provided_choices || @skip_authorization
+                @choice_collection
+              else
+                authorized_resource_scope(association_reflection.klass, relation: @choice_collection)
+              end
               Phlexi::Form::ChoicesMapper.new(collection, label_method: @label_method, value_method: @value_method)
             end
           end
+
+          def build_attributes
+            @provided_choices = !attributes[:choices].nil?
+            @skip_authorization = attributes.delete(:skip_authorization)
+            @add_action = attributes.delete(:add_action)
+
+            super
+          end
         end
       end
     end

data/lib/plutonium/ui/form/components/has_many.rb

@@ -7,14 +7,58 @@ module Plutonium
         class HasMany < Phlexi::Form::Components::HasMany
           include Plutonium::UI::Component::Methods
 
+          def view_template
+            div(class: "flex space-x-1") do
+              super
+              render_add_button
+            end
+          end
+
           private
 
+          def add_url
+            @add_url ||= begin
+              return unless @skip_authorization || allowed_to?(:create?, association_reflection.klass)
+
+              url = @add_action || resource_url_for(association_reflection.klass, action: :new, parent: nil)
+              return unless url
+
+              uri = URI(url)
+              uri.query = URI.encode_www_form({return_to: request.original_url})
+              uri.to_s
+            end
+          end
+
+          def render_add_button
+            return if @add_action == false || add_url.nil?
+
+            a(
+              href: add_url,
+              class:
+                "bg-gray-100 dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-500 hover:bg-gray-200 border border-gray-300 rounded-lg p-3 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none dark:text-white"
+            ) do
+              render Phlex::TablerIcons::Plus.new(class: "w-3 h-3")
+            end
+          end
+
           def choices
             @choices ||= begin
-              collection = authorized_resource_scope(association_reflection.klass, relation: @choice_collection)
+              collection = if @provided_choices || @skip_authorization
+                @choice_collection
+              else
+                authorized_resource_scope(association_reflection.klass, relation: @choice_collection)
+              end
               Phlexi::Form::ChoicesMapper.new(collection, label_method: @label_method, value_method: @value_method)
             end
           end
+
+          def build_attributes
+            @provided_choices = !attributes[:choices].nil?
+            @skip_authorization = attributes.delete(:skip_authorization)
+            @add_action = attributes.delete(:add_action)
+
+            super
+          end
         end
       end
     end

data/lib/plutonium/ui/form/components/uppy.rb

@@ -0,0 +1,173 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        class Uppy < Phlexi::Form::Components::Input
+          include Phlexi::Form::Components::Concerns::UploadsFile
+
+          def view_template
+            div(class: tokens(field.dom.id, "flex flex-col-reverse gap-2")) do
+              div do
+                # Hidden field for ensuring removal of esp. has_one_attached attachments
+                input(type: :hidden, name: attributes[:name], multiple: attributes[:multiple], value: nil, autocomplete: "off", hidden: true)
+
+                next if field.value.nil?
+
+                div(
+                  class: "attachment-preview-container grid grid-cols-[repeat(auto-fill,minmax(0,180px))] gap-4",
+                  data_controller: "attachment-preview-container"
+                ) do
+                  render_existing_attachments
+                end
+              end
+
+              div(class: "attachment-input") do
+                input(
+                  **build_direct_upload_options,
+                  **attributes,
+                  class: tokens(@input_class, attributes[:class])
+                )
+              end
+            end
+          end
+
+          protected
+
+          def build_input_attributes
+            attributes[:type] = :file
+            super
+
+            @input_class = field.dom.id
+            @include_hidden = attributes.delete(:include_hidden)
+            # ensure we are always setting it to false
+            attributes[:value] = false
+
+            if attributes[:multiple]
+              attributes[:name] = "#{attributes[:name].sub(/\[\]$/, "")}[]"
+            end
+          end
+
+          private
+
+          def render_existing_attachments
+            Array(field.value).each do |attachment|
+              next unless attachment&.url.present?
+
+              render_attachment_preview(attachment)
+            end
+          end
+
+          def render_attachment_preview(attachment)
+            input_name = if attributes[:multiple]
+              "#{attributes[:name].sub(/\[\]$/, "")}[]"
+            else
+              attributes[:name]
+            end
+
+            div(
+              class: "attachment-preview group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-300",
+              data: {
+                controller: "attachment-preview",
+                attachment_preview_mime_type_value: attachment.content_type,
+                attachment_preview_thumbnail_url_value: attachment_thumbnail_url(attachment),
+                attachment_preview_target: "thumbnail"
+              },
+              title: attachment.filename
+            ) do
+              # Hidden field to preserve the uploaded file
+              input(type: :hidden, name: input_name, multiple: attributes[:multiple], value: attachment.signed_id, autocomplete: "off", hidden: true)
+
+              render_preview_content(attachment)
+              render_filename(attachment)
+              render_delete_button
+            end
+          end
+
+          def render_preview_content(attachment)
+            a(
+              href: attachment.url,
+              class: "block aspect-square overflow-hidden rounded-t-lg",
+              target: :blank,
+              data: {attachment_preview_target: "thumbnailLink"}
+            ) do
+              if attachment_thumbnail_url(attachment)
+                img(
+                  src: attachment_thumbnail_url(attachment),
+                  class: "w-full h-full object-cover"
+                )
+              else
+                div(
+                  class: "w-full h-full flex items-center justify-center bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400 font-mono"
+                ) do
+                  ".#{attachment_extension(attachment)}"
+                end
+              end
+            end
+          end
+
+          def render_filename(attachment)
+            div(
+              class: "px-2 py-1.5 text-sm text-gray-700 dark:text-gray-300 border-t border-gray-200 dark:border-gray-700 truncate text-center bg-white dark:bg-gray-800",
+              title: attachment.filename
+            ) do
+              plain attachment.filename.to_s
+            end
+          end
+
+          def render_delete_button
+            button(
+              type: "button",
+              class: "w-full py-2 px-4 text-sm text-red-600 dark:text-red-400 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/50 rounded-b-lg transition-colors duration-200 flex items-center justify-center gap-2 border-t border-gray-200 dark:border-gray-700",
+              data: {action: "click->attachment-preview#remove"}
+            ) do
+              span(class: "bi bi-trash")
+              plain "Delete"
+            end
+          end
+
+          def attachment_thumbnail_url(attachment)
+            attachment.url if attachment.representable?
+          end
+
+          def attachment_extension(attachment)
+            attachment.try(:extension) || File.extname(attachment.filename.to_s)
+          end
+
+          def build_direct_upload_options
+            return {} unless attributes[:direct_upload]
+
+            direct_upload_options = {
+              data: {
+                controller: "attachment-input",
+                attachment_input_identifier_value: @input_class,
+                attachment_input_attachment_preview_outlet: ".#{@input_class} .attachment-preview",
+                attachment_input_attachment_preview_container_outlet: ".#{@input_class} .attachment-preview-container"
+              }
+            }
+
+            {
+              max_file_size: nil,
+              min_file_size: nil,
+              max_total_size: nil,
+              max_file_num: attributes.fetch(:size, field.multiple? ? field.limit : 1),
+              min_file_num: nil,
+              allowed_file_types: nil,
+              required_meta_fields: nil
+            }.each do |key, default_value|
+              value = attributes.key?(key) ? attributes.delete(key) : default_value
+              direct_upload_options[:data][:"attachment_input_#{key}_value"] = value
+            end
+
+            direct_upload_options
+          end
+
+          def normalize_input(input_value)
+            input_value
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/query.rb

@@ -143,19 +143,19 @@ module Plutonium
         def render_defined_field(nested, resource_definition, name)
           # field :name, as: :string
           # input :name, as: :string
-          # input :description, class: "col-span-full"
-          # input :age, tag: {class: "max-h-fit"}
+          # input :description, wrapper: {class: "col-span-full"}
+          # input :age, class: "max-h-fit"
           # input :dob do |f|
           #   f.date_tag
           # end
 
           field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options] : {}
 
-          input_definition = resource_definition.defined_inputs[name] || {}
+          input_definition = definition.defined_inputs[name] || {}
           input_options = input_definition[:options] || {}
 
-          tag = field_options[:as] || input_options[:as]
-          tag_attributes = input_options[:tag] || {}
+          tag = input_options[:as] || field_options[:as]
+          tag_attributes = input_options.except(:wrapper, :as)
           tag_block = input_definition[:block] || ->(f) {
             tag ||= f.inferred_field_component
             f.send(:"#{tag}_tag", **tag_attributes, class: tokens(tag_attributes[:class], "flex-1"))

data/lib/plutonium/ui/form/resource.rb

@@ -48,8 +48,8 @@ module Plutonium
         def render_simple_resource_field(name, definition, form)
           # field :name, as: :string
           # input :name, as: :string
-          # input :description, class: "col-span-full"
-          # input :age, tag: {class: "max-h-fit"}
+          # input :description, wrapper: {class: "col-span-full"}
+          # input :age, class: "max-h-fit"
           # input :dob do |f|
           #   f.date_tag
           # end
@@ -59,21 +59,21 @@ module Plutonium
           input_definition = definition.defined_inputs[name] || {}
           input_options = input_definition[:options] || {}
 
-          tag = field_options[:as] || input_options[:as]
-          tag_attributes = input_options[:tag] || {}
+          tag = input_options[:as] || field_options[:as]
+          tag_attributes = input_options.except(:wrapper, :as)
           tag_block = input_definition[:block] || ->(f) {
             tag ||= f.inferred_field_component
             f.send(:"#{tag}_tag", **tag_attributes)
           }
 
-          field_options = field_options.except(:as)
-          wrapper_options = input_options.except(:tag, :as)
+          wrapper_options = input_options[:wrapper] || {}
           if !wrapper_options[:class] || !wrapper_options[:class].include?("col-span")
             # temp hack to allow col span overrides
             # TODO: remove once we complete theming, which will support merges
             wrapper_options[:class] = tokens("col-span-full", wrapper_options[:class])
           end
 
+          field_options = field_options.except(:as)
           render form.field(name, **field_options).wrapped(**wrapper_options) do |f|
             render instance_exec(f, &tag_block)
           end

data/lib/plutonium/ui/form/theme.rb

@@ -31,7 +31,7 @@ module Plutonium
             valid_color: nil,
             neutral_color: nil,
             # file
-            file: "w-full border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 focus:outline-none",
+            # file: "w-full border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 focus:outline-none",
             # hint themes
             hint: "mt-2 text-sm text-gray-500 dark:text-gray-200",
             # error themes
@@ -47,7 +47,11 @@ module Plutonium
             int_tel_input: :input,
             valid_int_tel_input: :valid_input,
             invalid_int_tel_input: :invalid_input,
-            neutral_int_tel_input: :neutral_input
+            neutral_int_tel_input: :neutral_input,
+            uppy: :file,
+            valid_uppy: :valid_file,
+            invalid_uppy: :invalid_file,
+            neutral_uppy: :neutral_file
           })
         end
       end

data/lib/plutonium/ui/frame_navigator_panel.rb

@@ -20,6 +20,26 @@ module Plutonium
         end
       end
 
+      class PanelLink < Plutonium::UI::Component::Base
+        def initialize(label:, icon:, href:, **attributes)
+          @label = label
+          @icon = icon
+          @href = href
+          @attributes = attributes
+        end
+
+        def view_template
+          a(
+            title: @label,
+            class: "text-gray-600 dark:text-gray-300",
+            href: @href,
+            **@attributes
+          ) {
+            render @icon.new(class: "w-6 h-6")
+          }
+        end
+      end
+
       class PanelContent < Plutonium::UI::Component::Base
         def initialize(src:)
           @src = src
@@ -38,12 +58,13 @@ module Plutonium
       end
 
       def view_template
-        div(data: {controller: %w[has-many-panel frame-navigator]}) do
+        div(data: {controller: %w[frame-navigator]}) do
           Panel do |panel|
             panel.with_title @title
-            panel.with_item PanelItem.new(label: "Home", icon: Phlex::TablerIcons::Home2, data_frame_navigator_target: %(homeButton))
-            panel.with_item PanelItem.new(label: "Back", icon: Phlex::TablerIcons::ChevronLeft, data_frame_navigator_target: %(backButton))
-            panel.with_item PanelItem.new(label: "Refresh", icon: Phlex::TablerIcons::RefreshDot, data_frame_navigator_target: %(refreshButton))
+            panel.with_item PanelItem.new(label: "Home", icon: Phlex::TablerIcons::Home2, data_frame_navigator_target: "homeButton")
+            panel.with_item PanelItem.new(label: "Back", icon: Phlex::TablerIcons::ChevronLeft, data_frame_navigator_target: "backButton")
+            panel.with_item PanelItem.new(label: "Refresh", icon: Phlex::TablerIcons::RefreshDot, data_frame_navigator_target: "refreshButton")
+            panel.with_item PanelLink.new(label: "Maximize", icon: Phlex::TablerIcons::WindowMaximize, href: @src, data_frame_navigator_target: "maximizeLink")
             panel.with_content PanelContent.new(src: @src)
           end
         end

data/lib/plutonium/ui/layout/base.rb

@@ -23,7 +23,7 @@ module Plutonium
 
         def page_title = helpers.controller.instance_variable_get(:@page_title)
 
-        def html_attributes = {lang:, data_controller: "resource-layout color-mode"}
+        def html_attributes = {lang:, data_controller: "color-mode"}
 
         def body_attributes = {class: "antialiased min-h-screen bg-gray-50 dark:bg-gray-900"}
 

data/lib/plutonium/ui/layout/header.rb

@@ -43,7 +43,7 @@ module Plutonium
           nav(
             class: "bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50",
             data: {
-              controller: :header,
+              controller: "resource-header",
               header_sidebar_outlet: "#sidebar-navigation"
             }
           ) do

data/lib/plutonium/ui/layout/sidebar.rb

@@ -26,7 +26,6 @@ module Plutonium
           aside(
             id: "sidebar-navigation",
             aria: {label: "Sidebar Navigation"},
-            data: {controller: :sidebar},
             class: "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0",
             &
           )