panda-core 0.12.5 → 1.1.0

data/app/components/panda/core/admin/container_component.rb

@@ -4,90 +4,24 @@ module Panda
   module Core
     module Admin
       class ContainerComponent < Panda::Core::Base
-        prop :full_height, _Nilable(_Boolean), default: -> { false }
-
-        def view_template(&block)
-          # Capture block content differently based on context (ERB vs Phlex)
-          if block_given?
-            if defined?(view_context) && view_context
-              # Called from ERB - capture HTML output
-              @body_html = view_context.capture { yield(self) }
-            else
-              # Called from Phlex - execute block directly to set instance variables
-              yield(self)
-            end
-          end
-
-          # Set content_for :sidebar if slideover is present (enables breadcrumb toggle button)
-          # This must happen before rendering so the layout can use it
-          if @slideover_block && @slideover_title && defined?(view_context) && view_context
-            view_context.content_for(:sidebar) do
-              # The block contains ERB content, capture it for the sidebar
-              view_context.capture(&@slideover_block)
-            end
-            view_context.content_for(:sidebar_title, @slideover_title)
-
-            # Set footer content if present
-            if @footer_block
-              view_context.content_for(:sidebar_footer) do
-                view_context.capture(&@footer_block)
-              end
-            end
-          end
-
-          main(class: "overflow-auto flex-1 h-full min-h-full max-h-full") do
-            div(class: "overflow-auto px-2 pt-2 mx-auto sm:px-6 lg:px-6") do
-              @heading_content&.call
-              @tab_bar_content&.call
-
-              section(class: section_classes) do
-                div(class: "flex-1 mt-4 w-full h-full") do
-                  if @main_content
-                    @main_content.call
-                  elsif @body_html
-                    raw(@body_html)
-                  end
-                end
-              end
-            end
-          end
-        end
-
-        def content(&block)
-          @main_content = if defined?(view_context) && view_context
-            # Capture ERB content
-            -> { raw(view_context.capture(&block)) }
-          else
-            block
-          end
-        end
-
-        def heading(**props, &block)
-          @heading_content = -> { render(Panda::Core::Admin::HeadingComponent.new(**props), &block) }
-        end
-
-        def tab_bar(**props, &block)
-          @tab_bar_content = -> { render(Panda::Core::Admin::TabBarComponent.new(**props), &block) } if defined?(Panda::Core::Admin::TabBarComponent)
-        end
-
-        def slideover(**props, &block)
-          @slideover_title = props[:title] || "Settings"
-          @slideover_block = block   # Save the block for content_for
-        end
-
-        def footer(&block)
-          @footer_block = block
+        renders_one :heading_slot, Panda::Core::Admin::HeadingComponent
+        renders_one :tab_bar_slot, Panda::Core::Admin::TabBarComponent
+        renders_one :body_slot
+        renders_one :slideover_slot, Panda::Core::Admin::SlideoverComponent
+        renders_one :footer_slot
+
+        def initialize(full_height: false, **attrs)
+          @full_height = full_height
+          super(**attrs)
         end
 
-        # Alias for ViewComponent-style API compatibility
-        alias_method :with_slideover, :slideover
-        alias_method :with_footer, :footer
+        attr_reader :full_height
 
         private
 
         def section_classes
           base = "flex-auto"
-          height = @full_height ? "h-[calc(100vh-9rem)]" : nil
+          height = full_height ? "h-[calc(100vh-9rem)]" : nil
           [base, height].compact.join(" ")
         end
       end

data/app/components/panda/core/admin/contributors_summary_component.html.erb

@@ -0,0 +1,15 @@
+<%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+  <% panel.with_heading_slot { heading } %>
+  <% panel.with_body_slot do %>
+    <div class="flex flex-wrap gap-3">
+      <% contributors.each do |contributor| %>
+        <%= render Panda::Core::Admin::UserDisplayComponent.new(user: contributor) %>
+      <% end %>
+    </div>
+    <p class="mt-4 text-sm text-gray-500">
+      <%= pluralize(contributors.size, "contributor") %> &bull;
+      <%= pluralize(total_count, count_label) %> &bull;
+      Last updated <%= time_ago_in_words(last_updated_at) %> ago
+    </p>
+  <% end %>
+<% end %>

data/app/components/panda/core/admin/contributors_summary_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class ContributorsSummaryComponent < Panda::Core::Base
+        def initialize(contributors:, total_count:, last_updated_at:, count_label: "version", heading: "Contributors", **attrs)
+          @contributors = contributors
+          @total_count = total_count
+          @count_label = count_label
+          @last_updated_at = last_updated_at
+          @heading = heading
+          super(**attrs)
+        end
+
+        attr_reader :contributors, :total_count, :count_label, :last_updated_at, :heading
+
+        include ActionView::Helpers::TextHelper
+        include ActionView::Helpers::DateHelper
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/dashboard_default_content_component.html.erb

@@ -0,0 +1,70 @@
+<div <% if @attrs.any? %><%= tag.attributes(@attrs) %><% end %>>
+  <div class="p-6 bg-white shadow rounded-lg">
+    <h2 class="text-lg font-medium text-gray-900">Welcome to Panda Admin</h2>
+    <p class="mt-1 text-sm text-gray-500">Manage your application from this central dashboard.</p>
+  </div>
+
+  <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <% if defined?(Panda::CMS) %>
+      <div class="bg-white overflow-hidden shadow rounded-lg">
+        <div class="px-4 py-5 sm:p-6">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <i class="fa-solid fa-file-lines text-3xl text-gray-400"></i>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dt class="text-sm font-medium text-gray-500 truncate">Content Management</dt>
+              <dd class="mt-1 text-lg font-semibold text-gray-900">
+                <%= helpers.link_to "Manage CMS", helpers.panda_cms.admin_cms_dashboard_path, class: "text-primary-600 hover:text-primary-800" %>
+              </dd>
+            </div>
+          </div>
+          <div class="mt-3">
+            <p class="text-sm text-gray-500">Pages, posts, menus, and content blocks</p>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="bg-white overflow-hidden shadow rounded-lg">
+      <div class="px-4 py-5 sm:p-6">
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <i class="fa-regular fa-user text-3xl text-gray-400"></i>
+          </div>
+          <div class="ml-5 w-0 flex-1">
+            <dt class="text-sm font-medium text-gray-500 truncate">My Profile</dt>
+            <dd class="mt-1 text-lg font-semibold text-gray-900">
+              <%= helpers.link_to "Edit Profile", helpers.edit_admin_my_profile_path, class: "text-primary-600 hover:text-primary-800" %>
+            </dd>
+          </div>
+        </div>
+        <div class="mt-3">
+          <p class="text-sm text-gray-500">Update your personal information</p>
+        </div>
+      </div>
+    </div>
+
+    <%# Hook for additional dashboard cards %>
+    <% dashboard_cards.each do |card| %>
+      <div class="bg-white overflow-hidden shadow rounded-lg">
+        <div class="px-4 py-5 sm:p-6">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <i class="<%= card[:icon] %> text-3xl text-gray-400"></i>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dt class="text-sm font-medium text-gray-500 truncate"><%= card[:title] %></dt>
+              <dd class="mt-1 text-lg font-semibold text-gray-900">
+                <%= helpers.link_to card[:link_text], card[:path], class: "text-primary-600 hover:text-primary-800" %>
+              </dd>
+            </div>
+          </div>
+          <div class="mt-3">
+            <p class="text-sm text-gray-500"><%= card[:description] %></p>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/panda/core/admin/dashboard_default_content_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Default dashboard content component
+      # Displays welcome message and quick action cards
+      class DashboardDefaultContentComponent < Panda::Core::Base
+        def initialize(user:, **attrs)
+          @user = user
+          super(**attrs)
+        end
+
+        attr_reader :user
+
+        private
+
+        def default_attrs
+          {class: "mt-5"}
+        end
+
+        def dashboard_cards
+          @dashboard_cards ||= if Panda::Core.config.respond_to?(:admin_dashboard_cards)
+            Panda::Core.config.admin_dashboard_cards&.call(@user) || []
+          else
+            []
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/delete_button_component.html.erb

@@ -0,0 +1,4 @@
+<div class="mt-6 flex justify-end">
+  <%= button_to text, path, method: :delete, class: attrs[:class],
+    data: { turbo_confirm: confirm } %>
+</div>

data/app/components/panda/core/admin/delete_button_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Renders a right-aligned delete button using `button_to` with DELETE method
+      # and a Turbo confirmation dialog.
+      #
+      # Lives in panda-core because every admin app needs destructive action buttons,
+      # and the existing ButtonComponent renders `<a>` tags rather than `<form>`-based
+      # `button_to` elements required for safe DELETE requests (CSRF + method override).
+      #
+      # @example Basic usage
+      #   render Panda::Core::Admin::DeleteButtonComponent.new(
+      #     text: "Delete Person",
+      #     path: person_path(@person),
+      #     confirm: "Are you sure you want to delete this person?"
+      #   )
+      class DeleteButtonComponent < Panda::Core::Base
+        attr_reader :text, :path, :confirm
+
+        def initialize(text:, path:, confirm:, **attrs)
+          @text = text
+          @path = path
+          @confirm = confirm
+          super(**attrs)
+        end
+
+        private
+
+        def default_attrs
+          {
+            class: "inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium " \
+                   "text-error-600 border border-error-200 bg-error-50 hover:bg-error-100 " \
+                   "shadow-sm cursor-pointer transition-colors"
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/dropdown_button_component.html.erb

@@ -0,0 +1,28 @@
+<div <%= tag.attributes(**attrs) %>
+     data-controller="dropdown"
+     data-action="click@window->dropdown#hide keydown.escape@window->dropdown#hide">
+  <button type="button"
+          data-action="click->dropdown#toggle"
+          data-dropdown-target="button"
+          class="<%= button_classes %>"
+          aria-haspopup="true">
+    <%= render_text %>
+  </button>
+
+  <div data-dropdown-target="menu"
+       class="hidden absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-xl bg-white shadow-sm border border-gray-200 focus:outline-none"
+       data-transition-enter="transition ease-out duration-100"
+       data-transition-enter-from="transform opacity-0 scale-95"
+       data-transition-enter-to="transform opacity-100 scale-100"
+       data-transition-leave="transition ease-in duration-75"
+       data-transition-leave-from="transform opacity-100 scale-100"
+       data-transition-leave-to="transform opacity-0 scale-95"
+       role="menu"
+       aria-orientation="vertical">
+    <div class="py-1" role="none">
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/panda/core/admin/dropdown_button_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # A button-styled dropdown menu. Combines ButtonComponent styling with
+      # DropdownComponent behaviour (Stimulus `dropdown` controller).
+      #
+      # @example In a heading slot
+      #   heading.with_dropdown_button(text: "View Board") do |db|
+      #     db.with_item(label: "Fundraising", href: "/boards/1")
+      #     db.with_item(label: "Events",      href: "/boards/2")
+      #   end
+      #
+      class DropdownButtonComponent < Panda::Core::Base
+        renders_many :items, "ItemComponent"
+
+        def initialize(text: "Options", action: :secondary, icon: nil, size: :regular, **attrs)
+          @text = text
+          @action = action
+          @icon = icon
+          @size = size
+          super(**attrs)
+          yield self if block_given?
+        end
+
+        attr_reader :text, :action, :icon, :size
+
+        class ItemComponent < Panda::Core::Base
+          def initialize(label:, href: "#", method: nil, **attrs)
+            @label = label
+            @href = href
+            @method = method
+            super(**attrs)
+          end
+
+          attr_reader :label, :href, :method
+
+          def call
+            options = {
+              class: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900",
+              role: "menuitem",
+              data: {dropdown_target: "menuItem"}
+            }
+            options[:data][:turbo_method] = method if method
+
+            content_tag(:a, label, **options.merge(href: href))
+          end
+        end
+
+        private
+
+        def default_attrs
+          {class: "relative inline-block text-left"}
+        end
+
+        def button_classes
+          base = "inline-flex items-center rounded-xl font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer transition-colors "
+          base + size_classes + action_classes
+        end
+
+        def size_classes
+          case @size
+          when :small, :sm
+            "gap-x-1.5 px-3 py-1.5 text-xs "
+          when :medium, :regular, :md
+            "gap-x-2 px-4 py-2 text-sm "
+          when :large, :lg
+            "gap-x-2 px-5 py-2.5 text-base "
+          else
+            "gap-x-2 px-4 py-2 text-sm "
+          end
+        end
+
+        def action_classes
+          case @action
+          when :save, :create, :add, :new
+            "text-white bg-primary-500 hover:bg-primary-600 focus-visible:outline-primary-600"
+          when :save_inactive
+            "text-white bg-gray-300 cursor-not-allowed"
+          when :secondary
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
+          when :delete, :destroy, :danger
+            "text-error-600 border border-error-200 bg-error-50 hover:bg-error-100 focus-visible:outline-error-300"
+          else
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
+          end
+        end
+
+        def render_text
+          parts = []
+          parts << content_tag(:i, "", class: "fa-solid fa-#{@icon}") if @icon
+          parts << @text.titleize
+          parts << content_tag(:i, "", class: "fa-solid fa-chevron-down text-xs", aria: {hidden: "true"})
+          safe_join(parts)
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/dropdown_component.html.erb

@@ -0,0 +1,32 @@
+<div <%= tag.attributes(**attrs) %>
+     data-controller="dropdown"
+     data-action="click@window->dropdown#hide keydown.escape@window->dropdown#hide">
+  <button type="button"
+          data-action="click->dropdown#toggle"
+          data-dropdown-target="button"
+          class="inline-flex items-center gap-1 text-gray-500 hover:text-gray-700 focus:outline-none"
+          aria-haspopup="true">
+    <% if trigger_slot? %>
+      <%= trigger_slot %>
+    <% else %>
+      <%= chevron_icon %>
+    <% end %>
+  </button>
+
+  <div data-dropdown-target="menu"
+       class="hidden absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-lg bg-white shadow-sm border border-gray-200 focus:outline-none"
+       data-transition-enter="transition ease-out duration-100"
+       data-transition-enter-from="transform opacity-0 scale-95"
+       data-transition-enter-to="transform opacity-100 scale-100"
+       data-transition-leave="transition ease-in duration-75"
+       data-transition-leave-from="transform opacity-100 scale-100"
+       data-transition-leave-to="transform opacity-0 scale-95"
+       role="menu"
+       aria-orientation="vertical">
+    <div class="py-1" role="none">
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/panda/core/admin/dropdown_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Reusable dropdown menu component with a chevron trigger.
+      #
+      # Uses the pre-registered `dropdown` Stimulus controller from
+      # tailwindcss-stimulus-components for toggle, outside-click close,
+      # Escape key close, and CSS transitions.
+      #
+      # @example Basic dropdown
+      #   <%= render Panda::Core::Admin::DropdownComponent.new do |dropdown| %>
+      #     <% dropdown.with_item(label: "Edit", href: edit_path) %>
+      #     <% dropdown.with_item(label: "Delete", href: delete_path, method: :delete) %>
+      #   <% end %>
+      #
+      # @example With custom trigger content
+      #   <%= render Panda::Core::Admin::DropdownComponent.new do |dropdown| %>
+      #     <% dropdown.with_trigger_slot do %>
+      #       <span class="text-xs text-gray-500">Last 30 days</span>
+      #       <i class="fa-solid fa-chevron-down text-xs"></i>
+      #     <% end %>
+      #     <% dropdown.with_item(label: "Last 7 days", href: "?period=7d") %>
+      #   <% end %>
+      #
+      class DropdownComponent < Panda::Core::Base
+        renders_one :trigger_slot
+        renders_many :items, "ItemComponent"
+
+        class ItemComponent < Panda::Core::Base
+          def initialize(label:, href: "#", method: nil, **attrs)
+            @label = label
+            @href = href
+            @method = method
+            super(**attrs)
+          end
+
+          attr_reader :label, :href, :method
+
+          def call
+            options = {
+              class: "block w-full text-left px-4 py-2 text-xs text-gray-500 hover:bg-gray-50 hover:text-gray-700",
+              role: "menuitem",
+              data: {dropdown_target: "menuItem"}
+            }
+            options[:data][:turbo_method] = method if method
+
+            content_tag(:a, label, **options.merge(href: href))
+          end
+        end
+
+        private
+
+        def default_attrs
+          {class: "relative inline-block text-left"}
+        end
+
+        def chevron_icon
+          content_tag(:i, nil, class: "fa-solid fa-chevron-down text-xs", aria: {hidden: "true"})
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/empty_state_component.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag :div, **attrs do %>
+  <% if icon.present? %>
+    <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-gray-100 text-gray-400">
+      <i class="<%= icon %>"></i>
+    </div>
+  <% end %>
+  <h3 class="text-lg font-semibold text-gray-900"><%= title %></h3>
+  <% if description.present? %>
+    <p class="mt-2 text-sm text-gray-500"><%= description %></p>
+  <% end %>
+  <% if content? %>
+    <div class="mt-4 flex justify-center">
+      <%= content %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/panda/core/admin/empty_state_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Empty state component for tables and lists.
+      class EmptyStateComponent < Panda::Core::Base
+        def initialize(title:, description: nil, icon: nil, **attrs)
+          @title = title
+          @description = description
+          @icon = icon
+          super(**attrs)
+        end
+
+        attr_reader :title, :description, :icon
+
+        def default_attrs
+          {
+            class: "border-2 border-dashed border-gray-200 bg-white rounded-2xl px-6 py-10 text-center"
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/file_gallery_component.html.erb

@@ -0,0 +1,58 @@
+<% if @files.any? %>
+  <%# Gallery %>
+  <section>
+    <h2 id="gallery-heading" class="sr-only">Files</h2>
+    <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
+      <% @files.each do |file| %>
+        <% is_selected = @selected_file && @selected_file.id == file.id %>
+        <li class="relative cursor-pointer">
+          <div class="<%= file_container_classes(is_selected) %> aspect-square">
+            <% if file.image? %>
+              <%= tag.img src: url_for(file),
+                  alt: file.filename.to_s,
+                  class: file_image_classes(is_selected),
+                  onerror: "this.onerror=null;this.style.display='none';this.nextElementSibling.classList.remove('hidden')" %>
+              <div class="hidden flex items-center justify-center h-full bg-gray-100 dark:bg-gray-700" role="img" aria-label="Image preview not available">
+                <i class="fa-solid fa-file-image text-4xl text-gray-400"></i>
+              </div>
+            <% else %>
+              <%# File icon placeholder - implement based on file type %>
+              <div class="flex items-center justify-center h-full bg-gray-100 dark:bg-gray-700">
+                <i class="fa-solid fa-file text-4xl text-gray-400"></i>
+              </div>
+            <% end %>
+
+            <%= content_tag :button,
+                type: "button",
+                class: "absolute inset-0 focus:outline-hidden",
+                data: {
+                  action: "click->file-gallery#selectFile",
+                  file_id: file.id,
+                  file_url: url_for(file),
+                  file_name: file.filename.to_s,
+                  file_size: file.byte_size,
+                  file_type: file.content_type,
+                  file_created: file.created_at.to_s
+                } do %>
+              <span class="sr-only">View details for <%= file.filename %></span>
+            <% end %>
+          </div>
+
+          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900 dark:text-white">
+            <%= file.filename.to_s %>
+          </p>
+          <p class="pointer-events-none block text-sm font-medium text-gray-500 dark:text-gray-400">
+            <%= file_metadata(file) %>
+          </p>
+        </li>
+      <% end %>
+    </ul>
+  </section>
+<% else %>
+  <%# Empty state %>
+  <div class="text-center py-12">
+    <i class="fa-solid fa-images text-6xl text-gray-400 mb-4"></i>
+    <h3 class="text-lg font-medium text-gray-900 dark:text-white">No files</h3>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Upload files to see them here.</p>
+  </div>
+<% end %>