panda-core 0.2.4 → 0.6.0

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

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Breadcrumb navigation component with responsive behavior.
+      #
+      # Shows a "Back" link on mobile and full breadcrumb trail on larger screens.
+      # Follows Tailwind UI Plus pattern for breadcrumb navigation.
+      #
+      # @example Basic breadcrumbs
+      #   render Panda::Core::Admin::BreadcrumbComponent.new(
+      #     items: [
+      #       { text: "Pages", href: "/admin/pages" },
+      #       { text: "Blog Posts", href: "/admin/pages/blog" },
+      #       { text: "Edit Post", href: "/admin/pages/blog/1/edit" }
+      #     ]
+      #   )
+      #
+      # @example Without back link (first page in section)
+      #   render Panda::Core::Admin::BreadcrumbComponent.new(
+      #     items: [
+      #       { text: "Dashboard", href: "/admin" }
+      #     ],
+      #     show_back: false
+      #   )
+      #
+      class BreadcrumbComponent < Panda::Core::Base
+        prop :items, Array, default: -> { [] }
+        prop :show_back, _Boolean, default: true
+
+        def view_template
+          div do
+            # Mobile back link
+            if @show_back && @items.any?
+              nav(
+                aria: {label: "Back"},
+                class: "sm:hidden"
+              ) do
+                a(
+                  href: back_link_href,
+                  class: "flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                ) do
+                  render_chevron_left_icon
+                  plain "Back"
+                end
+              end
+            end
+
+            # Desktop breadcrumb trail
+            nav(
+              aria: {label: "Breadcrumb"},
+              class: "hidden sm:flex"
+            ) do
+              ol(
+                role: "list",
+                class: "flex items-center space-x-4"
+              ) do
+                @items.each_with_index do |item, index|
+                  li do
+                    if index.zero?
+                      # First item (no separator)
+                      div(class: "flex") do
+                        a(
+                          href: item[:href],
+                          class: breadcrumb_link_classes(index)
+                        ) { item[:text] }
+                      end
+                    else
+                      # Subsequent items (with separator)
+                      div(class: "flex items-center") do
+                        render_chevron_right_icon
+                        a(
+                          href: item[:href],
+                          aria: ((index == @items.length - 1) ? {current: "page"} : nil),
+                          class: breadcrumb_link_classes(index)
+                        ) { item[:text] }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        private
+
+        def back_link_href
+          (@items.length > 1) ? @items[-2][:href] : @items.first[:href]
+        end
+
+        def breadcrumb_link_classes(index)
+          base = "text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+          base += " ml-4" unless index.zero?
+          base
+        end
+
+        def render_chevron_left_icon
+          svg(
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            data: {slot: "icon"},
+            aria: {hidden: "true"},
+            class: "mr-1 -ml-1 size-5 shrink-0 text-gray-400 dark:text-gray-500"
+          ) do |s|
+            s.path(
+              d: "M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z",
+              clip_rule: "evenodd",
+              fill_rule: "evenodd"
+            )
+          end
+        end
+
+        def render_chevron_right_icon
+          svg(
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            data: {slot: "icon"},
+            aria: {hidden: "true"},
+            class: "size-5 shrink-0 text-gray-400 dark:text-gray-500"
+          ) do |s|
+            s.path(
+              d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
+              clip_rule: "evenodd",
+              fill_rule: "evenodd"
+            )
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -3,56 +3,74 @@
 module Panda
   module Core
     module Admin
-      class ButtonComponent < ViewComponent::Base
-        attr_accessor :text, :action, :link, :icon, :size, :data
+      class ButtonComponent < Panda::Core::Base
+        prop :text, String, default: "Button"
+        prop :action, _Nilable(Symbol), default: -> {}
+        prop :href, String, default: "#"
+        prop :icon, _Nilable(String), default: -> {}
+        prop :size, Symbol, default: :regular
+        prop :id, _Nilable(String), default: -> {}
 
-        def initialize(text: "Button", action: nil, data: {}, link: "#", icon: nil, size: :regular, id: nil)
-          @text = text
-          @action = action
-          @data = data
-          @link = link
-          @icon = icon
-          @size = size
-          @id = id
+        def view_template
+          a(**@attrs) do
+            if computed_icon
+              i(class: "mr-2 fa-solid fa-#{computed_icon}")
+              plain " "
+            end
+            plain @text.titleize
+          end
+        end
+
+        def default_attrs
+          {
+            href: @href,
+            class: button_classes,
+            id: @id
+          }
         end
 
-        def call
-          @icon = set_icon_from_action(@action) if @action && @icon.nil?
-          icon = content_tag(:i, "", class: "mr-2 fa-regular fa-#{@icon}") if @icon
-          @text = "#{icon} #{@text.titleize}".html_safe
+        private
+
+        def computed_icon
+          @computed_icon ||= @icon || icon_from_action(@action)
+        end
 
-          classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
+        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 + size_classes + action_classes
+        end
 
+        def size_classes
           case @size
           when :small, :sm
-            classes += "gap-x-1.5 px-2.5 py-1.5 text-sm "
+            "gap-x-1.5 px-2.5 py-1.5 text-sm "
           when :medium, :regular, :md
-            classes += "gap-x-1.5 px-3 py-2 text-base "
+            "gap-x-1.5 px-3 py-2 text-base "
           when :large, :lg
-            classes += "gap-x-2 px-3.5 py-2.5 text-lg "
+            "gap-x-2 px-3.5 py-2.5 text-lg "
+          else
+            "gap-x-1.5 px-3 py-2 text-base "
           end
+        end
 
-          classes += case @action
+        def action_classes
+          case @action
           when :save, :create
             "text-white bg-green-600 hover:bg-green-700"
           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-700 bg-transparent hover:bg-gray-100 transition-all"
           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-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 "
-          end
-
-          content_tag :a, href: @link, class: classes, data: @data, id: @id do
-            @text
+            "text-gray-700 border-2 border-gray-700 bg-transparent hover:bg-gray-100 transition-all"
           end
         end
 
-        private
+        def icon_from_action(action)
+          return nil unless action
 
-        def set_icon_from_action(action)
           case action
           when :add, :new, :create
             "plus"

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

@@ -3,10 +3,81 @@
 module Panda
   module Core
     module Admin
-      class ContainerComponent < ViewComponent::Base
-        renders_one :heading, "Panda::Core::Admin::HeadingComponent"
-        renders_one :tab_bar, "Panda::Core::Admin::TabBarComponent"
-        renders_one :slideover, "Panda::Core::Admin::SlideoverComponent"
+      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)
+          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
+              @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
+
+        # Alias for ViewComponent-style API compatibility
+        alias_method :with_slideover, :slideover
+
+        private
+
+        def section_classes
+          base = "flex-auto"
+          height = @full_height ? "h-[calc(100vh-9rem)]" : nil
+          [base, height].compact.join(" ")
+        end
       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

@@ -3,35 +3,118 @@
 module Panda
   module Core
     module Admin
-      class FlashMessageComponent < ::ViewComponent::Base
-        attr_reader :kind, :message
+      class FlashMessageComponent < Panda::Core::Base
+        prop :message, String
+        prop :kind, Symbol
+        prop :temporary, _Boolean, default: true
+        prop :subtitle, _Nilable(String), default: -> {}
 
-        def initialize(message:, kind:, temporary: true)
-          @kind = kind.to_sym
-          @message = message
-          @temporary = temporary
+        def view_template
+          # 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
+          end
+        end
+
+        private
+
+        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",
+              alert_dismiss_after_value: (@temporary ? "5000" : nil)
+            }.compact
+          }
+        end
+
+        def render_icon
+          div(class: "shrink-0") do
+            i(class: "fa-solid size-6 #{icon_css} #{icon_colour_css}")
+          end
+        end
+
+        def render_content
+          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: "ml-4 flex shrink-0") do
+            button(
+              type: "button",
+              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(
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                data: {slot: "icon"},
+                aria: {hidden: "true"},
+                class: "size-5"
+              ) do |s|
+                s.path(
+                  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
-          case kind
+        def icon_colour_css
+          case @kind
           when :success
-            "text-green-600"
+            "text-green-400 dark:text-green-500"
           when :alert, :error
-            "text-red-600"
+            "text-red-400 dark:text-red-500"
           when :warning
-            "text-yellow-600"
+            "text-yellow-400 dark:text-yellow-500"
           when :info, :notice
-            "text-blue-600"
+            "text-blue-400 dark:text-blue-500"
           else
-            "text-gray-600"
+            "text-gray-400 dark:text-gray-500"
+          end
+        end
+
+        def border_color_css
+          case @kind
+          when :success
+            "ring-2 ring-green-400/20 dark:ring-green-500/30"
+          when :alert, :error
+            "ring-2 ring-red-400/20 dark:ring-red-500/30"
+          when :warning
+            "ring-2 ring-yellow-400/20 dark:ring-yellow-500/30"
+          when :info, :notice
+            "ring-2 ring-blue-400/20 dark:ring-blue-500/30"
+          else
+            "ring-1 ring-gray-400/10 dark:ring-gray-500/20"
           end
         end
 
         def icon_css
-          case kind
+          case @kind
           when :success
             "fa-circle-check"
-          when :alert
+          when :alert, :error
             "fa-circle-xmark"
           when :warning
             "fa-triangle-exclamation"

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class FormErrorComponent < Panda::Core::Base
+        prop :errors, _Nilable(_Union(ActiveModel::Errors, Array)), default: -> {}
+        prop :model, _Nilable(Object), default: -> {}
+
+        def view_template
+          return unless should_render?
+
+          div(**@attrs) do
+            div(class: "text-sm text-red-600") do
+              error_messages.each do |message|
+                p { message }
+              end
+            end
+          end
+        end
+
+        def default_attrs
+          {
+            class: "mb-4 p-4 bg-red-50 border border-red-200 rounded-md"
+          }
+        end
+
+        private
+
+        def should_render?
+          error_messages.any?
+        end
+
+        def error_messages
+          @error_messages ||= if @model&.respond_to?(:errors)
+            @model.errors.full_messages
+          elsif @errors.is_a?(ActiveModel::Errors)
+            @errors.full_messages
+          elsif @errors.is_a?(Array)
+            @errors
+          else
+            []
+          end
+        end
+      end
+    end
+  end
+end