panda-core 0.12.5 → 1.1.0

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

@@ -4,122 +4,89 @@ module Panda
   module Core
     module Admin
       class TableComponent < Panda::Core::Base
-        prop :term, String
-        prop :rows, _Nilable(Object), default: -> { [] }
-        prop :icon, String, default: ""
-
-        attr_reader :columns
-
-        def initialize(**props)
-          super
+        attr_reader :term, :rows, :icon, :sort, :sort_direction
+
+        def initialize(term: "", rows: [], icon: "", responsive: true, sort: nil, sort_direction: nil, **attrs, &block)
+          @term = term
+          @rows = rows
+          @icon = icon
+          @responsive = responsive
+          @sort = sort&.to_s
+          @sort_direction = (sort_direction&.to_s == "desc") ? "desc" : "asc"
           @columns = []
+          @setup_block = block
+          super(**attrs)
         end
 
-        def view_template(&block)
-          # Capture the block to populate columns
-          instance_eval(&block) if block_given?
-
-          if @rows.any?
-            render_table_with_rows
-          else
-            render_empty_table
-          end
+        def responsive?
+          @responsive
         end
 
-        def column(label, width: nil, &cell_block)
-          @columns << Column.new(label, width, &cell_block)
+        def column(label, width: nil, sortable: false, sort_key: nil, &cell_block)
+          @columns << Column.new(label, width, sortable: sortable, sort_key: sort_key, &cell_block)
+          self  # Allow chaining
         end
 
-        private
-
-        def render_table_with_rows
-          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-gray-700", style: "table-layout: fixed;") do
-            render_header
-            render_rows
-          end
+        def render_cell_content(row, cell_block)
+          # Use capture to properly handle ERB blocks that output to the template buffer.
+          # Directly calling cell_block.call(row) causes double-rendering because ERB blocks
+          # both output to the buffer AND return their last expression.
+          helpers.capture(row, &cell_block)
         end
 
-        def render_empty_table
-          div(class: "text-center block border border-dashed py-12 rounded-lg") do
-            i(class: "#{@icon} text-4xl text-gray-400 mb-3") if @icon.present?
-            h3(class: "py-1 text-xl font-semibold text-gray-900") { "No #{@term.pluralize}" }
-            p(class: "py-1 text-base text-gray-500") { "Get started by creating a new #{@term}." }
-          end
+        def sort_url_for(column)
+          return unless column.sortable?
+
+          new_direction = (sort == column.sort_key && sort_direction == "asc") ? "desc" : "asc"
+          request = helpers.request
+          query_params = request.query_parameters.merge("sort" => column.sort_key, "direction" => new_direction)
+          "#{request.path}?#{query_params.to_query}"
         end
 
-        def render_header
-          div(class: "table-header-group") do
-            div(class: "table-row text-base font-medium text-white bg-gray-800") do
-              @columns.each_with_index do |column, i|
-                header_classes = "table-cell sticky top-0 z-10 p-4"
-                header_classes += " rounded-tl-md" if i.zero?
-                header_classes += " rounded-tr-md" if i == @columns.size - 1
+        def sort_indicator_for(column)
+          return unless sort == column.sort_key
 
-                header_style = column.width ? "width: #{column.width};" : nil
-                div(class: header_classes, style: header_style) { column.label }
-              end
-            end
-          end
+          (sort_direction == "asc") ? "↑" : "↓"
         end
 
-        def render_rows
-          div(class: "table-row-group") do
-            @rows.each do |row|
-              div(
-                class: "table-row relative bg-gray-500/5 hover:bg-gray-500/20",
-                data: {post_id: row.id}
-              ) do
-                @columns.each do |column|
-                  div(class: "table-cell py-5 px-3 h-20 text-sm align-middle whitespace-nowrap border-b border-gray-700/20") do
-                    # Capture the cell content by calling the block with the row
-                    render_cell_content(row, column.cell)
-                  end
-                end
-              end
+        # Lazy accessor that ensures columns are registered before returning them.
+        # Supports two patterns:
+        # 1. Block passed to new() - executed here (for tests)
+        # 2. Block passed to render() - executed via content (for ERB templates)
+        def columns
+          unless @columns_registered
+            if @setup_block
+              # Block was passed to new() - execute it
+              @setup_block.call(self)
+            else
+              # Block was passed to render() - execute via content
+              content
             end
+            @columns_registered = true
           end
+          @columns
         end
 
-        def render_cell_content(row, cell_block)
-          # When called from ERB, we need to capture the block's output buffer
-          # When called from Phlex, evaluate directly
-          if defined?(view_context) && view_context
-            # Use capture to get ERB output buffer content
-            captured_html = view_context.capture(row, &cell_block)
-            # Render the captured HTML (already html_safe from capture)
-            raw(captured_html)
-          else
-            # Pure Phlex context - execute block directly
-            result = cell_block.call(row)
+        private
 
-            # Handle different return types
-            if result.is_a?(String)
-              plain(result)
-            elsif result.respond_to?(:render_in)
-              render(result)
-            else
-              plain(result.to_s)
-            end
-          end
+        def pluralized_term
+          @pluralized_term ||= ActiveSupport::Inflector.pluralize(term)
         end
       end
 
       class Column
-        attr_reader :label, :cell, :width
+        attr_reader :label, :cell, :width, :sort_key
 
-        def initialize(label, width = nil, &block)
+        def initialize(label, width = nil, sortable: false, sort_key: nil, &block)
           @label = label
           @width = width
+          @sortable = sortable
+          @sort_key = sort_key || ActiveSupport::Inflector.parameterize(label.to_s, separator: "_")
           @cell = block
         end
-      end
 
-      class TagColumn < Column
-        attr_reader :label, :cell
-
-        def initialize(label, &block)
-          @label = label
-          @cell = Panda::Core::Admin::TagComponent.new(status: block)
+        def sortable?
+          @sortable
         end
       end
     end

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

@@ -0,0 +1,7 @@
+<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium"
+      style="background-color: <%= colour %>1a; color: <%= colour %>; border: 1px solid <%= colour %>33;">
+  <%= tag.name %>
+  <% if removable %>
+    <button type="button" class="ml-0.5 hover:opacity-70" data-action="tag-input#removeTag" data-tag-id="<%= tag.id %>">&times;</button>
+  <% end %>
+</span>

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class TagBadgeComponent < Panda::Core::Base
+        attr_reader :tag, :removable
+
+        def initialize(tag:, removable: false, **attrs)
+          @tag = tag
+          @removable = removable
+          super(**attrs)
+        end
+
+        def colour
+          tag.display_colour
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<%= content_tag :span, computed_text, class: tag_classes %>

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

@@ -4,15 +4,14 @@ module Panda
   module Core
     module Admin
       class TagComponent < Panda::Core::Base
-        prop :status, Symbol, default: :active
-        prop :text, _Nilable(String), default: -> {}
-        prop :page_type, _Nilable(Symbol), default: -> {}
-
-        def view_template
-          span(class: tag_classes) { computed_text }
+        def initialize(text: nil, page_type: nil, status: :active, **attrs)
+          @status = status
+          @text = text
+          @page_type = page_type
+          super(**attrs)
         end
 
-        private
+        attr_reader :status, :text, :page_type
 
         def computed_text
           if @page_type
@@ -33,44 +32,76 @@ module Panda
           end
         end
 
+        # Badge colours are themeable via the --panda-badge-{success,error,
+        # warning,info,neutral}-{bg,fg} tokens (see
+        # app/assets/tailwind/application.css). Each helper below returns an
+        # arbitrary-value Tailwind utility pair whose var() fallback resolves
+        # to exactly today's literal emerald/amber/sky/rose/gray-100
+        # utility classes, so this is a no-op unless a host app sets
+        # data-theme.
         def tag_classes
-          base = "inline-flex items-center py-1 px-2 text-xs font-medium rounded-md ring-1 ring-inset "
+          base = "inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full "
           base + (@page_type ? type_classes : status_classes)
         end
 
         def type_classes
           case @page_type
           when :system
-            "text-red-700 bg-red-100 ring-red-600/20 dark:bg-red-400/10 dark:text-red-400"
+            badge_classes(:error)
           when :posts
-            "text-purple-700 bg-purple-100 ring-purple-600/20 dark:bg-purple-400/10 dark:text-purple-400"
+            badge_classes(:info)
           when :code
-            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+            badge_classes(:info)
           when :standard
-            "text-green-700 bg-green-100 ring-green-600/20 dark:bg-green-400/10 dark:text-green-400"
+            badge_classes(:success)
           when :hidden_type
-            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+            badge_classes(:neutral)
           else
-            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+            badge_classes(:neutral)
           end
         end
 
         def status_classes
           case @status
           when :active
-            "text-white ring-black/30 bg-green-600 border-0"
+            badge_classes(:success)
+          when :live
+            badge_classes(:success)
           when :draft
-            "text-black ring-black/30 bg-yellow-400"
+            badge_classes(:warning)
           when :inactive, :hidden
-            "text-black ring-black/30 bg-black/5 bg-white"
+            badge_classes(:neutral)
           when :auto
-            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+            badge_classes(:info)
+          when :warning
+            badge_classes(:error)
           when :static
-            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+            badge_classes(:neutral)
           else
-            "text-black bg-white"
+            badge_classes(:neutral)
           end
         end
+
+        private
+
+        # Tailwind's content scanner extracts candidate class names by
+        # scanning raw source text — it does not evaluate Ruby, so every
+        # arbitrary-value class must appear as a complete literal string
+        # somewhere in this file (interpolating the tone into the class name
+        # would produce unscannable text like "bg-[var(--panda-badge-#{tone}
+        # -bg...)]" and silently generate no CSS).
+        BADGE_CLASSES = {
+          success: "text-[var(--panda-badge-success-fg,var(--color-emerald-600))] bg-[var(--panda-badge-success-bg,var(--color-emerald-50))]",
+          warning: "text-[var(--panda-badge-warning-fg,var(--color-amber-600))] bg-[var(--panda-badge-warning-bg,var(--color-amber-50))]",
+          info: "text-[var(--panda-badge-info-fg,var(--color-sky-600))] bg-[var(--panda-badge-info-bg,var(--color-sky-50))]",
+          error: "text-[var(--panda-badge-error-fg,var(--color-rose-600))] bg-[var(--panda-badge-error-bg,var(--color-rose-50))]",
+          neutral: "text-[var(--panda-badge-neutral-fg,var(--color-gray-600))] bg-[var(--panda-badge-neutral-bg,var(--color-gray-100))]"
+        }.freeze
+        private_constant :BADGE_CLASSES
+
+        def badge_classes(tone)
+          BADGE_CLASSES.fetch(tone)
+        end
       end
     end
   end

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

@@ -0,0 +1,37 @@
+<div data-controller="tag-input"
+     data-tag-input-url-value="<%= tags_url %>"
+     data-tag-input-selected-value="<%= selected_tags_json %>"
+     class="relative">
+
+  <%# Selected tags as pills + hidden inputs %>
+  <div data-tag-input-target="selected" class="flex flex-wrap gap-1.5 mb-2">
+    <% selected_tags.each do |tag| %>
+      <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium"
+            style="background-color: <%= tag.display_colour %>1a; color: <%= tag.display_colour %>; border: 1px solid <%= tag.display_colour %>33;"
+            data-tag-id="<%= tag.id %>">
+        <%= tag.name %>
+        <button type="button" class="ml-0.5 hover:opacity-70" data-action="tag-input#removeTag" data-tag-id="<%= tag.id %>">&times;</button>
+      </span>
+    <% end %>
+  </div>
+
+  <%# Hidden inputs for form submission %>
+  <div data-tag-input-target="hiddenInputs">
+    <% selected_tags.each do |tag| %>
+      <input type="hidden" name="<%= field_name %>" value="<%= tag.id %>" data-tag-id="<%= tag.id %>">
+    <% end %>
+  </div>
+
+  <%# Search input %>
+  <input type="text"
+         data-tag-input-target="input"
+         data-action="focus->tag-input#showAll input->tag-input#search keydown->tag-input#keydown"
+         placeholder="Search or add tags..."
+         autocomplete="off"
+         class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
+
+  <%# Results dropdown %>
+  <div data-tag-input-target="results"
+       class="absolute z-10 mt-1 hidden w-full rounded-lg border border-gray-200 bg-white shadow-lg max-h-48 overflow-y-auto">
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class TagInputComponent < Panda::Core::Base
+        attr_reader :field_name, :tags_url, :selected_tags
+
+        def initialize(tags_url:, field_name: "tag_ids[]", selected_tags: [], **attrs)
+          @field_name = field_name
+          @tags_url = tags_url
+          @selected_tags = selected_tags
+          super(**attrs)
+        end
+
+        def selected_tags_json
+          selected_tags.map { |t| {id: t.id, name: t.name, colour: t.display_colour} }.to_json
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+  <% panel.with_heading_slot { heading } %>
+  <div class="flex flex-wrap gap-2">
+    <% tags.each do |tag| %>
+      <%= render Panda::Core::Admin::TagBadgeComponent.new(tag: tag) %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Renders a PanelComponent containing TagBadgeComponents for a collection of tags.
+      # Self-hides via `render?` when the tags collection is empty.
+      #
+      # Lives in panda-core because tags are a core Panda concept (Panda::Core::Tag)
+      # and this component composes two existing panda-core components (PanelComponent
+      # and TagBadgeComponent) into a pattern used on most admin show pages.
+      #
+      # @example Basic usage
+      #   render Panda::Core::Admin::TagsPanelComponent.new(tags: @person.tags)
+      #
+      # @example Custom heading
+      #   render Panda::Core::Admin::TagsPanelComponent.new(tags: @item.tags, heading: "Categories")
+      class TagsPanelComponent < Panda::Core::Base
+        attr_reader :tags, :heading
+
+        def initialize(tags:, heading: "Tags", **attrs)
+          @tags = tags
+          @heading = heading
+          super(**attrs)
+        end
+
+        def render?
+          tags.present? && tags.any?
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+<% if should_render? %>
+  <% if @user.present? && time %>
+    <%= render Panda::Core::Admin::UserDisplayComponent.new(
+      user: @user,
+      metadata: "#{time_ago_in_words(time)} ago"
+    ) %>
+  <% elsif @user.present? %>
+    <%= render Panda::Core::Admin::UserDisplayComponent.new(
+      user: @user,
+      metadata: "Not published"
+    ) %>
+  <% elsif time %>
+    <div class="text-black/60"><%= "#{time_ago_in_words(time)} ago" %></div>
+  <% end %>
+<% end %>

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

@@ -4,29 +4,16 @@ module Panda
   module Core
     module Admin
       class UserActivityComponent < Panda::Core::Base
-        include ActionView::Helpers::DateHelper
-
-        prop :model, _Nilable(Object), default: -> {}
-        prop :at, _Nilable(Object), default: -> {}
-        prop :user, _Nilable(Object), default: -> {}
+        def initialize(model: nil, at: nil, user: nil, **attrs)
+          @model = model
+          @at = at
+          @user = user
+          super(**attrs)
+        end
 
-        def view_template
-          return unless should_render?
+        attr_reader :model, :at, :user
 
-          if @user.is_a?(Panda::Core::User) && time
-            render Panda::Core::Admin::UserDisplayComponent.new(
-              user: @user,
-              metadata: "#{time_ago_in_words(time)} ago"
-            )
-          elsif @user.is_a?(Panda::Core::User)
-            render Panda::Core::Admin::UserDisplayComponent.new(
-              user: @user,
-              metadata: "Not published"
-            )
-          elsif time
-            div(class: "text-black/60") { "#{time_ago_in_words(time)} ago" }
-          end
-        end
+        include ActionView::Helpers::DateHelper
 
         private
 
@@ -35,7 +22,7 @@ module Panda
         end
 
         def should_render?
-          @user.is_a?(Panda::Core::User) || time
+          @user.present? || time
         end
       end
     end

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

@@ -0,0 +1,8 @@
+<% if resolved_user %>
+  <div class="block flex-shrink-0 group">
+    <div class="flex items-center">
+      <%= render_avatar %>
+      <%= render_user_info %>
+    </div>
+  </div>
+<% end %>

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

@@ -4,21 +4,15 @@ module Panda
   module Core
     module Admin
       class UserDisplayComponent < Panda::Core::Base
-        prop :user_id, _Nilable(String), default: -> {}
-        prop :user, _Nilable(Object), default: -> {}
-        prop :metadata, String, default: ""
-
-        def view_template
-          return unless resolved_user
-
-          div(class: "block flex-shrink-0 group") do
-            div(class: "flex items-center") do
-              render_avatar
-              render_user_info
-            end
-          end
+        def initialize(user_id: nil, user: nil, metadata: "", **attrs)
+          @user_id = user_id
+          @user = user
+          @metadata = metadata
+          super(**attrs)
         end
 
+        attr_reader :user_id, :user, :metadata
+
         private
 
         def resolved_user
@@ -34,8 +28,8 @@ module Panda
             resolved_user.avatar_url(size: :small).present?
 
           if has_image
-            div do
-              img(
+            content_tag(:div) do
+              tag.img(
                 class: "inline-block w-10 h-10 rounded-full object-cover",
                 src: resolved_user.avatar_url(size: :small),
                 alt: "",
@@ -43,8 +37,8 @@ module Panda
               )
             end
           else
-            div(class: "inline-block w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center") do
-              span(class: "text-sm font-medium text-gray-600") { user_initials }
+            content_tag(:div, class: "inline-block w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center") do
+              content_tag(:span, user_initials, class: "text-sm font-medium text-gray-600")
             end
           end
         end
@@ -63,13 +57,16 @@ module Panda
         end
 
         def render_user_info
-          div(class: "ml-3") do
-            p(class: "text-sm text-black") { resolved_user.name }
-            if @metadata.present?
-              p(class: "text-sm text-black/60") { @metadata }
+          content_tag(:div, class: "ml-3") do
+            name_html = content_tag(:p, resolved_user.name, class: "text-sm text-black")
+            meta_html = if @metadata.present?
+              content_tag(:p, @metadata, class: "text-sm text-black/60")
             elsif resolved_user.respond_to?(:email) && resolved_user.email.present?
-              p(class: "text-sm text-gray-500") { resolved_user.email }
+              content_tag(:p, resolved_user.email, class: "text-sm text-gray-500")
+            else
+              "".html_safe
             end
+            (name_html + meta_html).html_safe
           end
         end
       end