panda-core 0.12.5 → 1.1.0

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

@@ -4,75 +4,24 @@ 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
+        def initialize(selected_file: nil, files: [], blob_categories: {}, **attrs)
+          @files = files
+          @selected_file = selected_file
+          @blob_categories = blob_categories
+          super(**attrs)
         end
 
+        attr_reader :files, :selected_file, :blob_categories
+
         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
+          # Implemented in ERB template
         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
+          @selected_file && @selected_file.id == file.id
+          # Implemented in ERB template
         end
 
         def file_container_classes(selected)
@@ -80,56 +29,33 @@ module Panda
           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"
+            "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary-600 dark:focus-within:outline-primary-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"
+          base = "pointer-events-none aspect-square object-contain p-1 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
+          # Implemented in ERB template
         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
+          # Implemented in ERB template
+        end
+
+        # Build the metadata subtitle for a file in the gallery grid
+        def file_metadata(file)
+          parts = []
+          variant_count = file.variant_records.size
+          parts << "#{variant_count} #{"variant".pluralize(variant_count)}" if variant_count > 0
+          category = @blob_categories[file.id]
+          parts << category.name if category
+          parts.any? ? parts.join(" \u00B7 ") : number_to_human_size(file.byte_size)
         end
 
         # Helper method to generate URL for ActiveStorage attachment
@@ -139,6 +65,8 @@ module Panda
           else
             "#"
           end
+        rescue
+          "#"
         end
 
         # Helper method for human-readable file sizes

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

@@ -0,0 +1,6 @@
+<div class="flex flex-wrap gap-2 mb-4">
+  <%= link_to @all_label, @url_helper.call(nil), class: pill_classes(@active_value.blank?) %>
+  <% @items.each do |item| %>
+    <%= link_to item[:label], @url_helper.call(item[:value]), class: pill_classes(@active_value == item[:value]) %>
+  <% end %>
+</div>

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class FilterPillsComponent < Panda::Core::Base
+        def initialize(items:, url_helper:, param_name: :category, active_value: nil, all_label: "All", **attrs)
+          @items = items
+          @url_helper = url_helper
+          @param_name = param_name
+          @active_value = active_value
+          @all_label = all_label
+          super(**attrs)
+        end
+
+        attr_reader :items, :url_helper, :param_name, :active_value, :all_label
+
+        def pill_classes(active)
+          base = "inline-flex items-center rounded-full px-3 py-1.5 text-xs font-medium"
+          if active
+            "#{base} bg-primary-100 text-primary-700"
+          else
+            "#{base} bg-gray-100 text-gray-700 hover:bg-gray-200"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<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">
+  <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+    <%= content_tag :div, notification_attrs do %>
+      <div class="flex items-center">
+        <%= render_icon %>
+        <%= render_content %>
+        <%= render_close_button %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -4,37 +4,19 @@ module Panda
   module Core
     module Admin
       class FlashMessageComponent < Panda::Core::Base
-        prop :message, String
-        prop :kind, Symbol
-        prop :temporary, _Boolean, default: true
-        prop :subtitle, _Nilable(String), default: -> {}
-
-        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
+        def initialize(message: "", kind: :default, temporary: true, subtitle: nil, **attrs)
+          @message = message
+          @kind = kind
+          @temporary = temporary
+          @subtitle = subtitle
+          super(**attrs)
         end
 
-        private
+        attr_reader :message, :kind, :temporary, :subtitle
 
         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}",
+            class: "pointer-events-auto w-full max-w-md translate-y-0 transform rounded-2xl border px-4 py-3 shadow-lg transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0 #{tone_classes}",
             data: {
               controller: "alert",
               alert_dismiss_after_value: (@temporary ? "5000" : nil)
@@ -43,39 +25,30 @@ module Panda
         end
 
         def render_icon
-          div(class: "shrink-0") do
-            i(class: "fa-solid size-6 #{icon_css} #{icon_colour_css}")
+          content_tag(:div, class: "shrink-0") do
+            content_tag(:i, "", class: "fa-solid size-5 #{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 }
+          content_tag(:div, class: "ml-2 w-0 flex-1") do
+            message_html = content_tag(:p, @message, class: "text-sm font-medium flash-message-title")
+            subtitle_html = if @subtitle
+              content_tag(:p, @subtitle, class: "mt-1 text-xs opacity-80 flash-message-subtitle")
+            else
+              "".html_safe
             end
+            (message_html + subtitle_html).html_safe
           end
         end
 
         def render_close_button
-          div(class: "ml-4 flex shrink-0") do
-            button(
+          content_tag(:div, class: "ml-4 flex shrink-0") do
+            content_tag(: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
+              class: "inline-flex items-center cursor-pointer opacity-60 hover:opacity-100",
+              data: {action: "alert#close"}) do
+              content_tag(:i, "", class: "fa-solid fa-xmark")
             end
           end
         end
@@ -83,30 +56,30 @@ module Panda
         def icon_colour_css
           case @kind
           when :success
-            "text-green-400 dark:text-green-500"
+            "text-emerald-600"
           when :alert, :error
-            "text-red-400 dark:text-red-500"
+            "text-rose-600"
           when :warning
-            "text-yellow-400 dark:text-yellow-500"
+            "text-amber-600"
           when :info, :notice
-            "text-blue-400 dark:text-blue-500"
+            "text-sky-600"
           else
-            "text-gray-400 dark:text-gray-500"
+            "text-gray-500"
           end
         end
 
-        def border_color_css
+        def tone_classes
           case @kind
           when :success
-            "ring-2 ring-green-400/20 dark:ring-green-500/30"
+            "bg-emerald-50 text-emerald-700 border-emerald-200"
           when :alert, :error
-            "ring-2 ring-red-400/20 dark:ring-red-500/30"
+            "bg-rose-50 text-rose-700 border-rose-200"
           when :warning
-            "ring-2 ring-yellow-400/20 dark:ring-yellow-500/30"
+            "bg-amber-50 text-amber-700 border-amber-200"
           when :info, :notice
-            "ring-2 ring-blue-400/20 dark:ring-blue-500/30"
+            "bg-sky-50 text-sky-700 border-sky-200"
           else
-            "ring-1 ring-gray-400/10 dark:ring-gray-500/20"
+            "bg-white text-gray-700 border-gray-200"
           end
         end
 

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

@@ -0,0 +1,7 @@
+<%= content_tag :div, **attrs do %>
+  <%= content_tag :div, class: "text-sm text-red-600" do %>
+    <% error_messages.each do |message| %>
+      <p><%= message %></p>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -4,33 +4,25 @@ 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
+        def initialize(model:, **attrs)
+          @model = model
+          super(**attrs)
         end
 
+        attr_reader :model
+
         def default_attrs
           {
             class: "mb-4 p-4 bg-red-50 border border-red-200 rounded-md"
           }
         end
 
-        private
-
-        def should_render?
+        def render?
           error_messages.any?
         end
 
+        private
+
         def error_messages
           @error_messages ||= if @model&.respond_to?(:errors)
             @model.errors.full_messages

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

@@ -0,0 +1,16 @@
+<div <%= tag.attributes(**attrs) %>>
+  <% if content? %>
+    <%= content %>
+  <% end %>
+
+  <% if cancel_path %>
+    <%= link_to "Cancel", cancel_path, class: cancel_link_classes %>
+  <% end %>
+
+  <%= tag.button type: "submit", class: submit_button_classes, data: submit_data_attrs do %>
+    <% if computed_icon %>
+      <i class="fa-solid <%= computed_icon %>"></i>
+    <% end %>
+    <%= submit_text %>
+  <% end %>
+</div>

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Standardized form footer component with submit button(s) and optional secondary actions.
+      #
+      # @example Basic usage
+      #   <%= render Panda::Core::Admin::FormFooterComponent.new(submit_text: "Save") %>
+      #
+      # @example With icon
+      #   <%= render Panda::Core::Admin::FormFooterComponent.new(
+      #     submit_text: "Create Page",
+      #     icon: "fa-plus"
+      #   ) %>
+      #
+      # @example With cancel link
+      #   <%= render Panda::Core::Admin::FormFooterComponent.new(
+      #     submit_text: "Update",
+      #     cancel_path: admin_cms_pages_path
+      #   ) %>
+      #
+      # @example With block for custom secondary actions
+      #   <%= render Panda::Core::Admin::FormFooterComponent.new(submit_text: "Save") do %>
+      #     <%= link_to "Preview", preview_path, class: "text-sm text-gray-600" %>
+      #   <% end %>
+      #
+      class FormFooterComponent < Panda::Core::Base
+        def initialize(submit_text: "Save", icon: nil, cancel_path: nil, submit_action: nil, **attrs)
+          @submit_text = submit_text
+          @icon = icon
+          @cancel_path = cancel_path
+          @submit_action = submit_action
+          super(**attrs)
+        end
+
+        attr_reader :submit_text, :icon, :cancel_path, :submit_action
+
+        def default_attrs
+          {
+            class: "flex justify-end gap-x-3 mt-2"
+          }
+        end
+
+        def submit_button_classes
+          "inline-flex items-center gap-x-2 justify-center rounded-xl bg-primary-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"
+        end
+
+        def cancel_link_classes
+          "inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900"
+        end
+
+        def computed_icon
+          @icon
+        end
+
+        def submit_data_attrs
+          attrs = {disable_with: "Saving..."}
+          attrs[:action] = submit_action if submit_action
+          attrs
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= tag.input(**attrs) %>

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

@@ -4,18 +4,19 @@ module Panda
   module Core
     module Admin
       class FormInputComponent < Panda::Core::Base
-        prop :name, String
-        prop :value, _Nilable(String), default: -> {}
-        prop :type, Symbol, default: :text
-        prop :placeholder, _Nilable(String), default: -> {}
-        prop :required, _Boolean, default: -> { false }
-        prop :disabled, _Boolean, default: -> { false }
-        prop :autocomplete, _Nilable(String), default: -> {}
-
-        def view_template
-          input(**@attrs)
+        def initialize(name: "", value: nil, placeholder: nil, autocomplete: nil, type: :text, required: false, disabled: false, **attrs)
+          @name = name
+          @value = value
+          @type = type
+          @placeholder = placeholder
+          @required = required
+          @disabled = disabled
+          @autocomplete = autocomplete
+          super(**attrs)
         end
 
+        attr_reader :name, :value, :type, :placeholder, :required, :disabled, :autocomplete
+
         def default_attrs
           base_attrs = {
             type: @type.to_s,
@@ -36,12 +37,19 @@ module Panda
         private
 
         def input_classes
-          classes = "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:leading-6"
+          # Border/radius/focus-ring are themeable via the --panda-input-*
+          # tokens (see app/assets/tailwind/application.css). The var()
+          # fallbacks resolve to today's rounded-xl/border-gray-300/
+          # outline-primary-500 exactly, so this is a no-op unless a host
+          # app sets data-theme.
+          classes = "block w-full h-11 rounded-[var(--panda-input-radius,var(--radius-xl))] border border-[var(--panda-input-border,var(--color-gray-300))] bg-white px-3 py-2 text-gray-900 " \
+                    "placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-[var(--panda-input-focus-ring,var(--color-primary-500))] " \
+                    "dark:bg-white/5 dark:text-white dark:border-white/10 dark:placeholder:text-gray-500"
 
           if @disabled
-            classes + " ring-gray-300 focus:ring-gray-300 bg-gray-50 cursor-not-allowed"
+            classes + " border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed"
           else
-            classes + " ring-primary-400 focus:ring-primary-600 hover:cursor-pointer"
+            classes
           end
         end
       end

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

@@ -0,0 +1,16 @@
+<div <%= tag.attributes(**attrs) %>>
+  <h3 class="<%= heading_classes %>">
+    <% if icon %>
+      <i class="fa-solid <%= icon %>"></i>
+    <% end %>
+    <%= title %>
+  </h3>
+
+  <% if description %>
+    <p class="<%= description_classes %>"><%= description %></p>
+  <% end %>
+
+  <div class="<%= content_classes %>">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Standardized form section component for grouping related form fields.
+      # Provides a consistent heading style for form sections without the heavy
+      # visual weight of PanelComponent.
+      #
+      # @example Basic usage
+      #   <%= render Panda::Core::Admin::FormSectionComponent.new(title: "SEO Settings") do %>
+      #     <%= f.text_field :seo_title %>
+      #     <%= f.text_area :seo_description %>
+      #   <% end %>
+      #
+      # @example With description
+      #   <%= render Panda::Core::Admin::FormSectionComponent.new(
+      #     title: "Notification Settings",
+      #     description: "Configure how you receive notifications"
+      #   ) do %>
+      #     ...
+      #   <% end %>
+      #
+      # @example With icon
+      #   <%= render Panda::Core::Admin::FormSectionComponent.new(
+      #     title: "Menu Items",
+      #     icon: "fa-bars"
+      #   ) do %>
+      #     ...
+      #   <% end %>
+      #
+      class FormSectionComponent < Panda::Core::Base
+        def initialize(title:, description: nil, icon: nil, border_top: true, **attrs)
+          @title = title
+          @description = description
+          @icon = icon
+          @border_top = border_top
+          super(**attrs)
+        end
+
+        attr_reader :title, :description, :icon, :border_top
+
+        def default_attrs
+          base_classes = "mt-6 pt-4"
+          base_classes += " border-t border-gray-200" if border_top
+
+          {class: base_classes}
+        end
+
+        def heading_classes
+          "text-sm font-semibold text-gray-700 flex items-center gap-2"
+        end
+
+        def description_classes
+          "mt-1 text-xs text-gray-500"
+        end
+
+        def content_classes
+          "mt-4 space-y-4"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= content_tag :select, @attrs do %>
+  <%= render_prompt if @prompt %>
+  <%= render_blank if @include_blank && !@prompt %>
+  <%= render_options %>
+<% end %>