panda-core 0.12.5 → 1.1.0

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

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Sidebar navigation component for admin pages
+      # Displays hierarchical navigation with toggle for nested items.
+      # Supports optional section grouping via the :section key on nav items.
+      class SidebarComponent < Panda::Core::Base
+        def initialize(user:, **attrs)
+          @user = user
+          super(**attrs)
+        end
+
+        attr_reader :user
+
+        def admin_logo
+          Panda::Core.config.admin_logo
+        end
+
+        def admin_settings_path
+          Panda::Core.config.admin_settings_path
+        end
+
+        def compact_navigation?
+          Panda::Core.config.compact_navigation
+        end
+
+        def admin_logo_actions
+          Panda::Core.config.admin_logo_actions || []
+        end
+
+        def sectioned?(items)
+          items.any? { |item| item[:section].present? }
+        end
+
+        def safe_html(value)
+          raw = value.respond_to?(:call) ? value.call : value
+          helpers.sanitize(raw, tags: %w[svg path ellipse circle rect line polyline polygon g defs use
+            span a i div img br strong em b], attributes: %w[
+              viewBox fill stroke stroke-width stroke-linecap stroke-linejoin opacity cx cy rx ry r
+              x y x1 y1 x2 y2 width height d points transform xmlns class href style id
+              data-turbo-track rel
+            ])
+        end
+
+        private
+
+        def default_attrs
+          {class: "flex flex-col flex-1"}
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,67 @@
+<%# Backdrop overlay - clicks close the slideover %>
+<div class="hidden fixed inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out dark:bg-gray-900/50 z-40"
+     data-toggle-target="toggleable"
+     data-action="click->toggle#toggle"
+     data-transition-enter="transition-opacity duration-500 ease-in-out"
+     data-transition-enter-from="opacity-0"
+     data-transition-enter-to="opacity-100"
+     data-transition-leave="transition-opacity duration-500 ease-in-out"
+     data-transition-leave-from="opacity-100"
+     data-transition-leave-to="opacity-0"></div>
+
+<%# Slideover panel %>
+<div id="slideover"
+     class="<%= slideover_classes %>"
+     data-toggle-target="toggleable"
+     data-transition-enter="transform transition ease-in-out duration-500 sm:duration-700"
+     data-transition-enter-from="translate-x-full"
+     data-transition-enter-to="translate-x-0"
+     data-transition-leave="transform transition ease-in-out duration-500 sm:duration-700"
+     data-transition-leave-from="translate-x-0"
+     data-transition-leave-to="translate-x-full">
+
+  <%# Main container %>
+  <div class="relative flex h-full flex-col bg-white shadow-xl dark:bg-gray-800">
+    <%# Header with title and close button %>
+    <div class="bg-gradient-admin px-4 py-6 sm:px-6">
+      <div class="flex items-center justify-between">
+        <h2 class="text-base font-semibold text-white" id="slideover-title">
+          <%= @title %>
+        </h2>
+        <div class="ml-3 flex items-center">
+          <%= content_tag :button,
+              type: "button",
+              data: {
+                action: "click->toggle#toggle touch->toggle#toggle"
+              },
+              class: "inline-flex items-center gap-1 rounded-full bg-white/10 px-2 py-1 text-xs text-white/80 hover:text-white cursor-pointer" do %>
+            <span>Close</span>
+            <i class="fa-solid fa-xmark"></i>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <%# Scrollable content area %>
+    <div class="flex-1 overflow-y-auto">
+      <% if @content_html %>
+        <%= raw(@content_html) %>
+      <% elsif @content_block %>
+        <%= @content_block.call %>
+      <% end %>
+    </div>
+
+    <%# Sticky footer (if footer content exists) %>
+    <% if footer_slot? || @footer_html || @footer_block %>
+      <div class="flex shrink-0 justify-end gap-x-3 border-t border-gray-200 px-4 py-4 dark:border-white/10">
+        <% if footer_slot? %>
+          <%= footer_slot %>
+        <% elsif @footer_html %>
+          <%= raw(@footer_html) %>
+        <% elsif @footer_block %>
+          <%= @footer_block.call %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -4,79 +4,25 @@ module Panda
   module Core
     module Admin
       class SlideoverComponent < Panda::Core::Base
-        prop :title, String, default: "Settings"
-        prop :open, _Nilable(_Boolean), default: -> { false }
+        renders_one :footer_slot
 
-        def view_template(&block)
-          # Capture block content
-          if block_given?
-            if defined?(view_context) && view_context
-              @content_html = view_context.capture(&block)
-            else
-              @content_block = block
-            end
-          end
-
-          div(
-            **default_attrs,
-            data: {
-              toggle_target: "toggleable",
-              transition_enter: "transform transition ease-in-out duration-500 sm:duration-700",
-              transition_enter_from: "translate-x-full",
-              transition_enter_to: "translate-x-0",
-              transition_leave: "transform transition ease-in-out duration-500 sm:duration-700",
-              transition_leave_from: "translate-x-0",
-              transition_leave_to: "translate-x-full"
-            }
-          ) do
-            # Main container
-            div(class: "relative flex h-full flex-col bg-white shadow-xl dark:bg-gray-800") do
-              # Header with title and close button
-              div(class: "bg-gradient-admin px-4 py-6 sm:px-6") do
-                div(class: "flex items-center justify-between") do
-                  h2(class: "text-base font-semibold text-white", id: "slideover-title") do
-                    plain @title
-                  end
-                  div(class: "ml-3 flex h-7 items-center") do
-                    button(
-                      type: "button",
-                      data: {action: "click->toggle#toggle touch->toggle#toggle"},
-                      class: "relative rounded-md text-white/80 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                    ) do
-                      span(class: "absolute -inset-2.5")
-                      span(class: "sr-only") { "Close panel" }
-                      # SVG close icon
-                      svg(viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "1.5", aria_hidden: "true", class: "size-6") do
-                        path(d: "M6 18 18 6M6 6l12 12", stroke_linecap: "round", stroke_linejoin: "round")
-                      end
-                    end
-                  end
-                end
-              end
+        def initialize(title: "Settings", open: false, **attrs)
+          @title = title
+          @open = open
+          super(**attrs)
+        end
 
-              # Scrollable content area
-              div(class: "flex-1 overflow-y-auto") do
-                if @content_html
-                  raw(@content_html)
-                elsif @content_block
-                  instance_eval(@content_block)
-                end
-              end
+        attr_reader :title, :open
 
-              # Sticky footer (if footer content exists)
-              if @footer_html || @footer_block
-                div(class: "flex shrink-0 justify-end gap-x-3 border-t border-gray-200 px-4 py-4 dark:border-white/10") do
-                  if @footer_html
-                    raw(@footer_html)
-                  elsif @footer_block
-                    instance_eval(&@footer_block)
-                  end
-                end
-              end
-            end
+        def before_render
+          # Store main content if provided
+          # In ViewComponent, content is already rendered HTML (SafeBuffer), not a block
+          if content.present?
+            @content_html = content
           end
         end
 
+        # Legacy method for backwards compatibility
         def footer(&block)
           if defined?(view_context) && view_context
             @footer_html = view_context.capture(&block)
@@ -85,8 +31,6 @@ module Panda
           end
         end
 
-        alias_method :with_footer, :footer
-
         private
 
         def default_attrs
@@ -97,10 +41,27 @@ module Panda
         end
 
         def slideover_classes
-          base = "ml-auto block size-full max-w-md transform absolute right-0 h-full z-50"
+          # Use fixed positioning to escape parent overflow clipping
+          base = "ml-auto block size-full max-w-md transform fixed right-0 top-0 h-full z-50"
           visibility = @open ? "" : "hidden"
           [base, visibility].compact.join(" ")
         end
+
+        def close_icon
+          content_tag(:svg,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "1.5",
+            aria: {hidden: "true"},
+            class: "size-6") do
+            tag.path(
+              d: "M6 18 18 6M6 6l12 12",
+              stroke_linecap: "round",
+              stroke_linejoin: "round"
+            )
+          end
+        end
       end
     end
   end

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

@@ -0,0 +1,4 @@
+<div class="overflow-hidden p-4 bg-white rounded-2xl border border-gray-200">
+  <dt class="text-sm font-medium text-gray-500 truncate"><%= @metric %></dt>
+  <dd class="mt-1 text-2xl font-semibold tracking-tight text-gray-900"><%= @value %></dd>
+</div>

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

@@ -4,15 +4,13 @@ module Panda
   module Core
     module Admin
       class StatisticsComponent < Panda::Core::Base
-        prop :metric, String
-        prop :value, _Nilable(_Union(String, Integer, Float))
-
-        def view_template
-          div(class: "overflow-hidden p-4 bg-gradient-to-br rounded-lg border-2 from-primary-50/20 to-primary-50 border-primary-400") do
-            dt(class: "text-base font-medium truncate text-primary-900") { @metric }
-            dd(class: "mt-1 text-3xl font-medium tracking-tight text-primary-900") { @value }
-          end
+        def initialize(metric: "", value: nil, **attrs)
+          @metric = metric
+          @value = value
+          super(**attrs)
         end
+
+        attr_reader :metric, :value
       end
     end
   end

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

@@ -0,0 +1,48 @@
+<div class="mt-3">
+  <%# Mobile select dropdown %>
+  <div class="sm:hidden">
+    <%= tag.label "Select a tab", for: "tabs", class: "sr-only" %>
+    <%= tag.select id: "tabs",
+        name: "tabs",
+        onchange: "window.location.href=this.value",
+        class: "block py-1.5 pr-10 pl-3 w-full text-gray-900 rounded-md border-0 ring-1 ring-inset focus:ring-2 focus:ring-inset ring-primary-400 focus:border-primary-600 focus:ring-primary-600" do %>
+      <% @tabs.each_with_index do |tab, index| %>
+        <%= tag.option tab[:name], value: tab[:url] || "#", selected: tab_current?(tab, index) %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%# Desktop tab navigation %>
+  <div class="hidden sm:block">
+    <div class="flex items-center border-b border-gray-200">
+      <nav class="flex flex-1 -mb-px space-x-6 xl:space-x-8" aria-label="Tabs">
+        <% @tabs.each_with_index do |tab, index| %>
+          <%= content_tag :a,
+              tab[:name],
+              href: tab[:url] || "#",
+              class: tab_classes(tab, index),
+              aria: {current: tab_current?(tab, index) ? "page" : nil} %>
+        <% end %>
+      </nav>
+
+      <%# View toggle buttons %>
+      <div class="hidden items-center p-0.5 ml-6 bg-gray-100 rounded-lg sm:flex">
+        <%# List view button %>
+        <%= content_tag :button,
+            type: "button",
+            class: view_button_classes(false) do %>
+          <%= list_view_icon %>
+          <span class="sr-only">Use list view</span>
+        <% end %>
+
+        <%# Grid view button %>
+        <%= content_tag :button,
+            type: "button",
+            class: view_button_classes(true) do %>
+          <%= grid_view_icon %>
+          <span class="sr-only">Use grid view</span>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -4,95 +4,60 @@ module Panda
   module Core
     module Admin
       class TabBarComponent < Panda::Core::Base
-        prop :tabs, Array, default: -> { [].freeze }
-
-        def view_template
-          div(class: "mt-3 sm:mt-2") do
-            render_mobile_select
-            render_desktop_tabs
-          end
+        def initialize(tabs: [].freeze, **attrs)
+          @tabs = tabs
+          super(**attrs)
         end
 
+        attr_reader :tabs
+
         private
 
-        def render_mobile_select
-          div(class: "sm:hidden") do
-            label(for: "tabs", class: "sr-only") { "Select a tab" }
-            select(
-              id: "tabs",
-              name: "tabs",
-              class: "block py-1.5 pr-10 pl-3 w-full text-gray-900 rounded-md border-0 ring-1 ring-inset focus:ring-2 focus:ring-inset ring-primary-400 focus:border-primary-600 focus:ring-primary-600"
-            ) do
-              @tabs.each do |tab|
-                option { tab[:name] }
-              end
-            end
-          end
+        def any_tab_current?
+          @any_tab_current ||= @tabs.any? { |tab| tab[:current] }
         end
 
-        def render_desktop_tabs
-          div(class: "hidden sm:block") do
-            div(class: "flex items-center border-b border-gray-200") do
-              nav(class: "flex flex-1 -mb-px space-x-6 xl:space-x-8", aria: {label: "Tabs"}) do
-                @tabs.each_with_index do |tab, index|
-                  render_tab(tab, index.zero?)
-                end
-              end
-              render_view_toggle
-            end
-          end
+        def tab_current?(tab, index)
+          tab[:current] || (!any_tab_current? && index.zero?)
         end
 
-        def render_tab(tab, is_current = false)
+        def tab_classes(tab, index)
           classes = "py-4 px-1 text-sm font-medium whitespace-nowrap border-b-2 "
-          classes += if is_current || tab[:current]
+          classes += if tab_current?(tab, index)
             "border-primary-600 text-primary-600"
           else
             "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
           end
-
-          a(
-            href: tab[:url] || "#",
-            class: classes,
-            aria: {current: (is_current || tab[:current]) ? "page" : nil}
-          ) { tab[:name] }
+          classes
         end
 
-        def render_view_toggle
-          div(class: "hidden items-center p-0.5 ml-6 bg-gray-100 rounded-lg sm:flex") do
-            render_view_button(:list)
-            render_view_button(:grid, selected: true)
-          end
-        end
-
-        def render_view_button(type, selected: false)
+        def view_button_classes(selected)
           button_class = "p-1.5 text-gray-400 rounded-md focus:ring-2 focus:ring-inset focus:outline-none focus:ring-primary-600"
           button_class += if selected
             " ml-0.5 bg-white shadow-sm"
           else
             " hover:bg-white hover:shadow-sm"
           end
+          button_class
+        end
+
+        def list_view_icon
+          content_tag(:svg, class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do
+            tag.path(
+              fill_rule: "evenodd",
+              d: "M2 3.75A.75.75 0 012.75 3h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.166a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z",
+              clip_rule: "evenodd"
+            )
+          end
+        end
 
-          button(type: "button", class: button_class) do
-            if type == :list
-              svg(class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d: "M2 3.75A.75.75 0 012.75 3h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.166a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z",
-                  clip_rule: "evenodd"
-                )
-              end
-              span(class: "sr-only") { "Use list view" }
-            else
-              svg(class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d: "M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z",
-                  clip_rule: "evenodd"
-                )
-              end
-              span(class: "sr-only") { "Use grid view" }
-            end
+        def grid_view_icon
+          content_tag(:svg, class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do
+            tag.path(
+              fill_rule: "evenodd",
+              d: "M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z",
+              clip_rule: "evenodd"
+            )
           end
         end
       end

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

@@ -0,0 +1,82 @@
+<%# Chrome (bg/border/radius, header/row borders, cell text colour) is
+    themeable via the --panda-panel-* / --panda-table-* tokens — see
+    app/assets/tailwind/application.css. Fallbacks resolve to today's
+    literal utilities exactly, so this is a no-op unless a host app sets
+    data-theme. %>
+<% if rows.any? %>
+  <% if responsive? %>
+    <%# Mobile card view - hidden on lg screens %>
+    <div class="mb-12 space-y-3 lg:hidden">
+      <% rows.each do |row| %>
+        <div class="rounded-[var(--panda-panel-radius,var(--radius-2xl))] border border-[var(--panda-panel-border,var(--color-gray-200))] bg-[var(--panda-panel-bg,var(--color-white))] p-4 hover:bg-gray-50 transition-colors" data-controller="row-link" data-action="click->row-link#click">
+          <% columns.each_with_index do |column, i| %>
+            <% cell_content = render_cell_content(row, column.cell) %>
+            <% if i == 0 %>
+              <div class="font-medium text-gray-900 text-sm mb-2"><%= cell_content %></div>
+            <% else %>
+              <% if cell_content.present? && cell_content.to_s.strip.present? %>
+                <div class="flex justify-between items-baseline py-1">
+                  <span class="text-xs text-gray-400"><%= column.label %></span>
+                  <span class="text-sm text-gray-600"><%= cell_content %></span>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%# Desktop table view %>
+  <div class="mb-12 w-full overflow-x-auto rounded-[var(--panda-panel-radius,var(--radius-2xl))] border border-[var(--panda-panel-border,var(--color-gray-200))] bg-[var(--panda-panel-bg,var(--color-white))] <%= 'hidden lg:block' if responsive? %>" data-controller="row-link" data-action="click->row-link#click">
+    <%# Header %>
+    <div class="table w-full" style="table-layout: fixed;">
+      <div class="table-header-group">
+        <div class="table-row text-sm font-medium text-gray-500 truncate bg-[var(--panda-table-header-bg,var(--color-gray-50))] border-b border-[var(--panda-table-border,var(--color-gray-200))]">
+        <% columns.each do |column| %>
+          <% header_style = column.width ? "width: #{column.width};" : nil %>
+          <% aria_sort = if column.sortable? && sort == column.sort_key
+                          sort_direction == "asc" ? "ascending" : "descending"
+                        elsif column.sortable?
+                          "none"
+                        end %>
+          <div class="table-cell sticky top-0 z-10 px-4 py-3 align-middle" style="<%= header_style %>"<% if aria_sort %> aria-sort="<%= aria_sort %>"<% end %>>
+            <% if column.sortable? %>
+              <a href="<%= sort_url_for(column) %>" class="inline-flex items-center gap-1 hover:text-gray-900 transition-colors group" aria-label="Sort by <%= column.label %>">
+                <%= column.label %>
+                <% if (indicator = sort_indicator_for(column)) %>
+                  <span class="text-gray-700 text-xs" aria-hidden="true"><%= indicator %></span>
+                <% else %>
+                  <span class="text-gray-300 text-xs opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">↕</span>
+                <% end %>
+              </a>
+            <% else %>
+              <%= column.label %>
+            <% end %>
+          </div>
+        <% end %>
+        </div>
+      </div>
+
+      <%# Rows %>
+       <div class="table-row-group">
+         <% rows.each do |row| %>
+           <div class="table-row odd:bg-white even:bg-gray-50/60 hover:bg-gray-100 cursor-pointer" data-<%= term %>-id="<%= row.id %>">
+             <% columns.each do |column| %>
+              <div class="table-cell px-4 py-3 text-sm align-middle break-words border-b border-[var(--panda-table-row-border,color-mix(in_srgb,var(--color-gray-200)_70%,transparent))] text-[var(--panda-table-cell-color,var(--color-gray-600))]">
+                <%= render_cell_content(row, column.cell) %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <%# Empty state %>
+  <%= render Panda::Core::Admin::EmptyStateComponent.new(
+    title: "No #{term.pluralize}",
+    description: "Get started by creating a new #{term}.",
+    icon: icon
+  ) %>
+<% end %>