panda-core 0.4.1 → 0.7.0

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

@@ -6,37 +6,52 @@ module Panda
       class ButtonComponent < Panda::Core::Base
         prop :text, String, default: "Button"
         prop :action, _Nilable(Symbol), default: -> {}
-        prop :href, String, 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
-          a(**@attrs) do
-            if computed_icon
-              i(class: "mr-2 fa-regular fa-#{computed_icon}")
-              plain " "
+          if @as_button
+            button(**@attrs) do
+              render_content
+            end
+          else
+            a(**@attrs) do
+              render_content
             end
-            plain @text.titleize
           end
         end
 
         def default_attrs
-          {
-            href: @href,
+          base = {
             class: button_classes,
             id: @id
           }
+
+          if @as_button
+            base.merge(type: "button")
+          else
+            base.merge(href: @href)
+          end
         end
 
         private
 
+        def render_content
+          if computed_icon
+            i(class: "fa-solid fa-#{computed_icon}")
+          end
+          plain @text.titleize
+        end
+
         def computed_icon
           @computed_icon ||= @icon || icon_from_action(@action)
         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 "
+          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 + size_classes + action_classes
         end
 
@@ -56,15 +71,15 @@ module Panda
         def action_classes
           case @action
           when :save, :create
-            "text-white bg-green-600 hover:bg-green-700"
+            "text-white bg-mid hover:bg-mid/80"
           when :save_inactive
             "text-white bg-gray-400"
           when :secondary
-            "text-gray-700 border-2 border-gray-700 bg-transparent hover:bg-gray-100 transition-all"
+            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
           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"
           else
-            "text-gray-700 border-2 border-gray-700 bg-transparent hover:bg-gray-100 transition-all"
+            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
           end
         end
 

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

@@ -4,6 +4,8 @@ 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?
@@ -16,20 +18,36 @@ module Panda
             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-4 mx-auto sm:px-6 lg:px-6") 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: "flex-auto") do
-                div(class: "flex-1 mt-4 w-full") do
+              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
-                @slideover_content&.call
               end
             end
           end
@@ -53,7 +71,24 @@ module Panda
         end
 
         def slideover(**props, &block)
-          @slideover_content = -> { render(Panda::Core::Admin::SlideoverComponent.new(**props), &block) }
+          @slideover_title = props[:title] || "Settings"
+          @slideover_block = block   # Save the block for content_for
+        end
+
+        def footer(&block)
+          @footer_block = block
+        end
+
+        # Alias for ViewComponent-style API compatibility
+        alias_method :with_slideover, :slideover
+        alias_method :with_footer, :footer
+
+        private
+
+        def section_classes
+          base = "flex-auto"
+          height = @full_height ? "h-[calc(100vh-9rem)]" : nil
+          [base, height].compact.join(" ")
         end
       end
     end

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

@@ -0,0 +1,157 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class FileGalleryComponent < Panda::Core::Base
+        prop :files, _Nilable(Object), default: -> { [] }
+        prop :selected_file, _Nilable(Object), default: nil
+
+        def view_template
+          if @files.any?
+            render_gallery
+          else
+            render_empty_state
+          end
+        end
+
+        private
+
+        def render_gallery
+          section do
+            h2(id: "gallery-heading", class: "sr-only") { "Files" }
+            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"
+            ) do
+              @files.each do |file|
+                render_file_item(file)
+              end
+            end
+          end
+        end
+
+        def render_file_item(file)
+          is_selected = @selected_file && @selected_file.id == file.id
+
+          li(class: "relative") do
+            div(
+              class: file_container_classes(is_selected),
+              style: "cursor: pointer;"
+            ) do
+              if file.image?
+                img(
+                  src: url_for(file),
+                  alt: file.filename.to_s,
+                  class: file_image_classes(is_selected)
+                )
+              else
+                render_file_icon(file)
+              end
+
+              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}" }
+              end
+            end
+
+            p(class: "pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900 dark:text-white") do
+              plain file.filename.to_s
+            end
+            p(class: "pointer-events-none block text-sm font-medium text-gray-500 dark:text-gray-400") do
+              plain number_to_human_size(file.byte_size)
+            end
+          end
+        end
+
+        def file_container_classes(selected)
+          base = "group overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
+          focus = if selected
+            "outline-2 outline-offset-2 outline-panda-dark dark:outline-panda-light outline"
+          else
+            "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500"
+          end
+          "#{base} #{focus}"
+        end
+
+        def file_image_classes(selected)
+          base = "pointer-events-none aspect-10/7 rounded-lg object-cover outline -outline-offset-1 outline-black/5 dark:outline-white/10"
+          hover = selected ? "" : "group-hover:opacity-75"
+          "#{base} #{hover}"
+        end
+
+        def render_file_icon(file)
+          div(class: "flex items-center justify-center h-full") do
+            div(class: "text-center") do
+              svg(
+                class: "mx-auto h-12 w-12 text-gray-400",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                aria: {hidden: "true"}
+              ) do
+                path(
+                  stroke_linecap: "round",
+                  stroke_linejoin: "round",
+                  d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                )
+              end
+              p(class: "mt-1 text-xs text-gray-500 uppercase") { file.content_type&.split("/")&.last || "file" }
+            end
+          end
+        end
+
+        def render_empty_state
+          div(class: "text-center py-12 border border-dashed rounded-lg") do
+            svg(
+              class: "mx-auto h-12 w-12 text-gray-400",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              aria: {hidden: "true"}
+            ) do
+              path(
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+              )
+            end
+            h3(class: "mt-2 text-sm font-semibold text-gray-900") { "No files" }
+            p(class: "mt-1 text-sm text-gray-500") { "Get started by uploading a file." }
+          end
+        end
+
+        # Helper method to generate URL for ActiveStorage attachment
+        def url_for(file)
+          if defined?(Rails) && Rails.application.routes.url_helpers.respond_to?(:rails_blob_path)
+            Rails.application.routes.url_helpers.rails_blob_path(file, only_path: true)
+          else
+            "#"
+          end
+        end
+
+        # Helper method for human-readable file sizes
+        def number_to_human_size(size)
+          return "0 Bytes" if size.zero?
+
+          units = ["Bytes", "KB", "MB", "GB", "TB"]
+          exp = (Math.log(size) / Math.log(1024)).to_i
+          exp = [exp, units.length - 1].min
+
+          "%.1f %s" % [size.to_f / (1024**exp), units[exp]]
+        end
+      end
+    end
+  end
+end

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

@@ -7,15 +7,23 @@ module Panda
         prop :message, String
         prop :kind, Symbol
         prop :temporary, _Boolean, default: true
+        prop :subtitle, _Nilable(String), default: -> {}
 
         def view_template
-          div(**container_attrs) do
-            div(class: "overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg") do
-              div(class: "p-4") do
-                div(class: "flex items-start") do
-                  render_icon
-                  render_content
-                  render_close_button
+          # Global notification container (fixed position)
+          div(
+            aria: {live: "assertive"},
+            class: "pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-50"
+          ) do
+            div(class: "flex w-full flex-col items-center space-y-4 sm:items-end") do
+              # Notification panel with Tailwind Plus styling
+              div(**notification_attrs) do
+                div(class: "p-4") do
+                  div(class: "flex items-start") do
+                    render_icon
+                    render_content
+                    render_close_button
+                  end
                 end
               end
             end
@@ -24,71 +32,81 @@ module Panda
 
         private
 
-        def container_attrs
-          attrs = {
-            class: "fixed top-2 right-2 z-[9999] p-2 space-y-4 w-full max-w-sm sm:items-end",
+        def notification_attrs
+          {
+            class: "pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg transition duration-300 ease-out sm:translate-x-0 dark:bg-gray-800 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0 #{border_color_css}",
             data: {
               controller: "alert",
-              transition_enter: "ease-in-out duration-500",
-              transition_enter_from: "translate-x-full opacity-0",
-              transition_enter_to: "translate-x-0 opacity-100",
-              transition_leave: "ease-in-out duration-500",
-              transition_leave_from: "translate-x-0 opacity-100",
-              transition_leave_to: "translate-x-full opacity-0"
-            }
+              alert_dismiss_after_value: (@temporary ? "5000" : nil)
+            }.compact
           }
-
-          attrs[:data][:alert_dismiss_after_value] = "3000" if @temporary
-          attrs
         end
 
         def render_icon
-          div(class: "flex-shrink-0") do
-            i(class: "fa-regular text-xl #{icon_css} #{text_colour_css}")
+          div(class: "shrink-0") do
+            i(class: "fa-solid size-6 #{icon_css} #{icon_colour_css}")
           end
         end
 
         def render_content
-          div(class: "flex-1 pt-0.5 ml-3 w-0") do
-            p(class: "mb-1 text-sm font-medium flash-message-title #{text_colour_css}") { @kind.to_s.titleize }
-            p(class: "mt-1 mb-0 text-sm text-gray-500 flash-message-text") { @message }
+          div(class: "ml-3 w-0 flex-1 pt-0.5") do
+            p(class: "text-sm font-medium text-gray-900 dark:text-white flash-message-title") { @message }
+            if @subtitle
+              p(class: "mt-1 text-sm text-gray-500 dark:text-gray-400 flash-message-subtitle") { @subtitle }
+            end
           end
         end
 
         def render_close_button
-          div(class: "flex flex-shrink-0 ml-4") do
+          div(class: "ml-4 flex shrink-0") do
             button(
               type: "button",
-              class: "inline-flex text-gray-400 bg-white rounded-md transition duration-150 ease-in-out hover:text-gray-500 focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-sky-500",
+              class: "inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-600 dark:hover:text-white dark:focus:outline-blue-500",
               data: {action: "alert#close"}
             ) do
               span(class: "sr-only") { "Close" }
               svg(
-                class: "w-5 h-5",
                 viewBox: "0 0 20 20",
                 fill: "currentColor",
-                aria: {hidden: "true"}
+                data: {slot: "icon"},
+                aria: {hidden: "true"},
+                class: "size-5"
               ) do |s|
                 s.path(
-                  d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+                  d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
                 )
               end
             end
           end
         end
 
-        def text_colour_css
+        def icon_colour_css
+          case @kind
+          when :success
+            "text-green-400 dark:text-green-500"
+          when :alert, :error
+            "text-red-400 dark:text-red-500"
+          when :warning
+            "text-yellow-400 dark:text-yellow-500"
+          when :info, :notice
+            "text-blue-400 dark:text-blue-500"
+          else
+            "text-gray-400 dark:text-gray-500"
+          end
+        end
+
+        def border_color_css
           case @kind
           when :success
-            "text-green-600"
+            "ring-2 ring-green-400/20 dark:ring-green-500/30"
           when :alert, :error
-            "text-red-600"
+            "ring-2 ring-red-400/20 dark:ring-red-500/30"
           when :warning
-            "text-yellow-600"
+            "ring-2 ring-yellow-400/20 dark:ring-yellow-500/30"
           when :info, :notice
-            "text-blue-600"
+            "ring-2 ring-blue-400/20 dark:ring-blue-500/30"
           else
-            "text-gray-600"
+            "ring-1 ring-gray-400/10 dark:ring-gray-500/20"
           end
         end
 

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

@@ -7,23 +7,30 @@ module Panda
         prop :text, String
         prop :level, _Nilable(_Union(Integer, Symbol)), default: -> { 2 }
         prop :icon, String, default: ""
+        prop :meta, _Nilable(String), default: -> {}
         prop :additional_styles, _Nilable(_Union(String, Array)), default: -> { "" }
 
         def view_template(&block)
           # Capture any buttons defined via block
           instance_eval(&block) if block_given?
 
-          case @level
-          when 1
-            h1(class: heading_classes) { render_content }
-          when 2
-            h2(class: heading_classes) { render_content }
-          when 3
-            h3(class: heading_classes) { render_content }
-          when :panel
-            h3(class: panel_heading_classes) { render_content }
-          else
-            h2(class: heading_classes) { render_content }
+          div(class: "heading-wrapper") do
+            case @level
+            when 1
+              h1(class: heading_classes(@meta.present?)) { render_content }
+            when 2
+              h2(class: heading_classes(@meta.present?)) { render_content }
+            when 3
+              h3(class: heading_classes(@meta.present?)) { render_content }
+            when :panel
+              h3(class: panel_heading_classes) { @text }
+            else
+              h2(class: heading_classes(@meta.present?)) { render_content }
+            end
+
+            if @meta
+              p(class: "text-sm text-black/60 -mt-1 mb-5") { raw(@meta) }
+            end
           end
         end
 
@@ -35,17 +42,19 @@ module Panda
         private
 
         def render_content
-          div(class: "grow") { @text }
+          div(class: "grow flex items-center gap-x-2") do
+            i(class: @icon) if @icon.present?
+            span { @text }
+          end
 
-          if @buttons&.any?
-            span(class: "actions flex gap-x-2 -mt-1") do
-              @buttons.each { |btn| render(btn) }
-            end
+          span(class: "actions flex gap-x-2 mt-1 min-h-[2.5rem]") do
+            @buttons&.each { |btn| render(btn) }
           end
         end
 
-        def heading_classes
-          base = "flex pt-1 text-black mb-5 -mt-1"
+        def heading_classes(has_meta = false)
+          margin_bottom = has_meta ? "mb-0.5" : "mb-5"
+          base = "flex text-black #{margin_bottom} -mt-2"
           styles = case @level
           when 1
             "text-2xl font-medium"
@@ -61,7 +70,7 @@ module Panda
         end
 
         def panel_heading_classes
-          "text-base font-medium p-4 text-white"
+          "text-base font-medium px-4 py-3 text-white"
         end
 
         def additional_styles_array

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

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Page header component with title, optional breadcrumbs, and action buttons.
+      #
+      # Follows Tailwind UI Plus pattern for page headers with responsive layout
+      # and support for multiple action buttons.
+      #
+      # @example Basic header with title only
+      #   render Panda::Core::Admin::PageHeaderComponent.new(
+      #     title: "Back End Developer"
+      #   )
+      #
+      # @example Header with breadcrumbs
+      #   render Panda::Core::Admin::PageHeaderComponent.new(
+      #     title: "Back End Developer",
+      #     breadcrumbs: [
+      #       { text: "Jobs", href: "/admin/jobs" },
+      #       { text: "Engineering", href: "/admin/jobs/engineering" },
+      #       { text: "Back End Developer", href: "/admin/jobs/engineering/1" }
+      #     ]
+      #   )
+      #
+      # @example Header with action buttons using block
+      #   render Panda::Core::Admin::PageHeaderComponent.new(
+      #     title: "Back End Developer",
+      #     breadcrumbs: breadcrumb_items
+      #   ) do |header|
+      #     header.button(text: "Edit", variant: :secondary, href: edit_path)
+      #     header.button(text: "Publish", variant: :primary, href: publish_path)
+      #   end
+      #
+      class PageHeaderComponent < Panda::Core::Base
+        prop :title, String
+        prop :breadcrumbs, _Nilable(Array), default: -> {}
+        prop :show_back, _Boolean, default: true
+
+        def initialize(**props)
+          super
+          @buttons = []
+        end
+
+        def view_template(&block)
+          # Allow buttons to be defined via block
+          instance_eval(&block) if block_given?
+
+          div do
+            # Breadcrumbs section
+            if @breadcrumbs
+              render Panda::Core::Admin::BreadcrumbComponent.new(
+                items: @breadcrumbs,
+                show_back: @show_back
+              )
+            end
+
+            # Title and actions section
+            div(class: "mt-2 md:flex md:items-center md:justify-between") do
+              # Title
+              div(class: "min-w-0 flex-1") do
+                h2(class: "text-2xl/7 font-bold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white") do
+                  @title
+                end
+              end
+
+              # Action buttons
+              if @buttons.any?
+                div(class: "mt-4 flex shrink-0 md:mt-0 md:ml-4") do
+                  @buttons.each_with_index do |button_data, index|
+                    render create_button(button_data, index)
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        # Define a button to be rendered in the header actions area
+        #
+        # @param text [String] Button text
+        # @param variant [Symbol] Button variant (:primary or :secondary)
+        # @param href [String] Link href
+        # @param props [Hash] Additional button properties
+        def button(text:, variant: :secondary, href: "#", **props)
+          @buttons << {text: text, variant: variant, href: href, **props}
+        end
+
+        private
+
+        def create_button(button_data, index)
+          Panda::Core::UI::Button.new(
+            text: button_data[:text],
+            variant: button_data[:variant],
+            href: button_data[:href],
+            class: button_margin_class(index),
+            **button_data.except(:text, :variant, :href)
+          )
+        end
+
+        def button_margin_class(index)
+          index.zero? ? "" : "ml-3"
+        end
+      end
+    end
+  end
+end

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

@@ -16,7 +16,7 @@ module Panda
             end
           end
 
-          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-gray-500 shadow-inherit/20") do
+          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-dark shadow-inherit/20") do
             @heading_content&.call
 
             div(class: "p-4 text-black bg-white rounded-b-lg") do