panda-core 0.12.2 → 1.1.0

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

@@ -0,0 +1,16 @@
+<nav aria-label="Breadcrumb" id="panda-breadcrumbs" <% if @attrs.any? %><%= tag.attributes(@attrs) %><% end %>>
+  <ol role="list">
+    <li class="inline-block">
+      <a href="<%= Panda::Core.config.admin_path %>" class="text-black/60 hover:text-black/80">
+        <i class="fa fa-solid fa-house fa-fw inline-block w-4 text-center"></i>
+        <span class="sr-only">Home</span>
+      </a>
+    </li>
+    <% @breadcrumbs.each do |crumb| %>
+      <li class="inline-block">
+        <i class="fa-solid fa-chevron-right fa-fw inline-block w-4 text-center font-light text-black/60 hover:text-black/80 px-2"></i>
+        <a href="<%= crumb.path %>" class="text-sm font-normal text-black/60 hover:text-black/80"><%= crumb.name %></a>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Breadcrumbs navigation component for admin pages
+      # Displays hierarchical navigation starting from admin home
+      class BreadcrumbsComponent < Panda::Core::Base
+        def initialize(breadcrumbs: [], **attrs)
+          @breadcrumbs = breadcrumbs
+          super(**attrs)
+        end
+
+        attr_reader :breadcrumbs
+
+        private
+
+        def default_attrs
+          {
+            class: "px-4 w-full sm:px-6 py-2.5"
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<% if @as_button %>
+  <%= content_tag :button, @attrs do %>
+    <%= render_content %>
+  <% end %>
+<% else %>
+  <%= content_tag :a, @attrs do %>
+    <%= render_content %>
+  <% end %>
+<% end %>

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

@@ -4,26 +4,19 @@ module Panda
   module Core
     module Admin
       class ButtonComponent < Panda::Core::Base
-        prop :text, String, default: "Button"
-        prop :action, _Nilable(Symbol), default: -> {}
-        prop :href, _Nilable(String), default: -> { "#" }
-        prop :icon, _Nilable(String), default: -> {}
-        prop :size, Symbol, default: :regular
-        prop :id, _Nilable(String), default: -> {}
-        prop :as_button, _Boolean, default: -> { false }
-
-        def view_template
-          if @as_button
-            button(**@attrs) do
-              render_content
-            end
-          else
-            a(**@attrs) do
-              render_content
-            end
-          end
+        def initialize(text: "Button", action: nil, href: "#", icon: nil, size: :regular, id: nil, as_button: false, **attrs)
+          @text = text
+          @action = action
+          @href = href
+          @icon = icon
+          @size = size
+          @id = id
+          @as_button = as_button
+          super(**attrs)
         end
 
+        attr_reader :text, :action, :href, :icon, :size, :id, :as_button
+
         def default_attrs
           base = {
             class: button_classes,
@@ -40,10 +33,22 @@ module Panda
         private
 
         def render_content
-          if computed_icon
-            i(class: "fa-solid fa-#{computed_icon}")
+          icon_html = if computed_icon
+            content_tag(:i, "", class: "fa-solid fa-#{computed_icon}")
+          else
+            "".html_safe
           end
-          plain @text.titleize
+          text_html = @text.titleize
+
+          if icon_right?
+            (text_html + icon_html).html_safe
+          else
+            (icon_html + text_html).html_safe
+          end
+        end
+
+        def icon_right?
+          @action.in?(%i[save create add new])
         end
 
         def computed_icon
@@ -51,35 +56,35 @@ module Panda
         end
 
         def button_classes
-          base = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer "
+          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-2.5 py-1.5 text-sm "
+            "gap-x-1.5 px-3 py-1.5 text-xs "
           when :medium, :regular, :md
-            "gap-x-1.5 px-3 py-2 text-base "
+            "gap-x-2 px-4 py-2 text-sm "
           when :large, :lg
-            "gap-x-2 px-3.5 py-2.5 text-lg "
+            "gap-x-2 px-5 py-2.5 text-base "
           else
-            "gap-x-1.5 px-3 py-2 text-base "
+            "gap-x-2 px-4 py-2 text-sm "
           end
         end
 
         def action_classes
           case @action
-          when :save, :create
-            "text-white bg-mid hover:bg-mid/80"
+          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-400"
+            "text-white bg-gray-300 cursor-not-allowed"
           when :secondary
-            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
           when :delete, :destroy, :danger
-            "text-red-600 border border-red-600 bg-red-100 hover:bg-red-200 hover:text-red-700 focus-visible:outline-red-300"
+            "text-error-600 border border-error-200 bg-error-50 hover:bg-error-100 focus-visible:outline-error-300"
           else
-            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
           end
         end
 

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

@@ -0,0 +1,17 @@
+<%= content_tag :div, **attrs do %>
+  <div class="flex items-start gap-3">
+    <i class="fa-solid <%= icon_class %> mt-0.5"></i>
+    <div>
+      <% if title.present? %>
+        <div class="text-sm font-medium"><%= title %></div>
+      <% end %>
+      <div class="text-sm">
+        <% if content? %>
+          <%= content %>
+        <% else %>
+          <%= text %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Lightweight callout for inline notices (info, warning, success, error).
+      # Intended for static, in-form guidance (not toast/flash).
+      class CalloutComponent < Panda::Core::Base
+        def initialize(text: nil, title: nil, kind: :info, icon: nil, **attrs)
+          @text = text
+          @title = title
+          @kind = kind
+          @icon = icon
+          super(**attrs)
+        end
+
+        attr_reader :text, :title, :kind, :icon
+
+        def default_attrs
+          {
+            class: "rounded-2xl border px-4 py-3 text-sm #{tone_classes}"
+          }
+        end
+
+        def icon_class
+          icon || default_icon
+        end
+
+        def default_icon
+          case kind
+          when :success
+            "fa-circle-check"
+          when :warning
+            "fa-triangle-exclamation"
+          when :error, :alert
+            "fa-circle-xmark"
+          else
+            "fa-circle-info"
+          end
+        end
+
+        def tone_classes
+          case kind
+          when :success
+            "bg-emerald-50 text-emerald-700 border-emerald-200"
+          when :warning
+            "bg-amber-50 text-amber-700 border-amber-200"
+          when :error, :alert
+            "bg-rose-50 text-rose-700 border-rose-200"
+          else
+            "bg-gray-50 text-gray-700 border-gray-200"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<%= content_tag :pre, **attrs do %>
+  <code>
+    <% if content? %>
+      <%= content %>
+    <% else %>
+      <%= code %>
+    <% end %>
+  </code>
+<% end %>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Code block component for snippets and examples.
+      class CodeBlockComponent < Panda::Core::Base
+        def initialize(code: nil, **attrs)
+          @code = code
+          super(**attrs)
+        end
+
+        attr_reader :code
+
+        def default_attrs
+          {
+            class: "rounded-xl bg-gray-900/95 p-3 text-xs text-emerald-200 font-mono overflow-x-auto"
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<div class="relative" data-controller="toggle">
+  <main class="overflow-auto flex-1 h-full min-h-full max-h-full">
+    <div class="overflow-auto px-2 pt-2 mx-auto sm:px-6 lg:px-6">
+      <% if heading_slot? %>
+        <%= heading_slot %>
+      <% end %>
+
+      <% if tab_bar_slot? %>
+        <%= tab_bar_slot %>
+      <% end %>
+
+      <section class="<%= section_classes %>">
+        <div class="flex-1 mt-4 w-full h-full">
+          <% if body_slot? %>
+            <%= body_slot %>
+          <% elsif content.present? %>
+            <%= content %>
+          <% end %>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <% if slideover_slot? %>
+    <%= slideover_slot %>
+  <% end %>
+</div>

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>