panda-core 0.2.4 → 0.6.0

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+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)
+        end
+
+        def default_attrs
+          base_attrs = {
+            type: @type.to_s,
+            name: @name,
+            id: @name.to_s.gsub(/[\[\]]/, "_").gsub("__", "_").chomp("_"),
+            class: input_classes
+          }
+
+          base_attrs[:value] = @value if @value
+          base_attrs[:placeholder] = @placeholder if @placeholder
+          base_attrs[:required] = true if @required
+          base_attrs[:disabled] = true if @disabled
+          base_attrs[:autocomplete] = @autocomplete if @autocomplete
+
+          base_attrs
+        end
+
+        private
+
+        def input_classes
+          classes = "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset placeholder:text-gray-300 focus:ring-1 focus:ring-inset sm:leading-6"
+
+          if @disabled
+            classes + " ring-gray-300 focus:ring-gray-300 bg-gray-50 cursor-not-allowed"
+          else
+            classes + " ring-mid focus:ring-dark hover:cursor-pointer"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class FormSelectComponent < Panda::Core::Base
+        prop :name, String
+        prop :options, Array
+        prop :selected, _Nilable(_Union(String, Integer)), default: -> {}
+        prop :prompt, _Nilable(String), default: -> {}
+        prop :required, _Boolean, default: -> { false }
+        prop :disabled, _Boolean, default: -> { false }
+        prop :include_blank, _Boolean, default: -> { false }
+
+        def view_template
+          select(**@attrs) do
+            render_prompt if @prompt
+            render_blank if @include_blank && !@prompt
+            render_options
+          end
+        end
+
+        def default_attrs
+          base_attrs = {
+            name: @name,
+            id: @name.to_s.gsub(/[\[\]]/, "_").gsub("__", "_").chomp("_"),
+            class: select_classes
+          }
+
+          base_attrs[:required] = true if @required
+          base_attrs[:disabled] = true if @disabled
+
+          base_attrs
+        end
+
+        private
+
+        def select_classes
+          classes = "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset focus:ring-1 focus:ring-inset sm:leading-6"
+
+          if @disabled
+            classes + " ring-gray-300 focus:ring-gray-300 bg-gray-50 cursor-not-allowed"
+          else
+            classes + " ring-mid focus:ring-dark hover:cursor-pointer"
+          end
+        end
+
+        def render_prompt
+          option(value: "", disabled: true, selected: @selected.nil?) { @prompt }
+        end
+
+        def render_blank
+          option(value: "") { "" }
+        end
+
+        def render_options
+          @options.each do |option_data|
+            label, value = option_data
+            option_attrs = {value: value.to_s}
+            option_attrs[:selected] = true if value.to_s == @selected.to_s
+
+            option(**option_attrs) { label.to_s }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -3,42 +3,71 @@
 module Panda
   module Core
     module Admin
-      class HeadingComponent < ViewComponent::Base
-        renders_many :buttons, Panda::Core::Admin::ButtonComponent
+      class HeadingComponent < Panda::Core::Base
+        prop :text, String
+        prop :level, _Nilable(_Union(Integer, Symbol)), default: -> { 2 }
+        prop :icon, String, default: ""
+        prop :additional_styles, _Nilable(_Union(String, Array)), default: -> { "" }
 
-        attr_reader :text, :level, :icon, :additional_styles
+        def view_template(&block)
+          # Capture any buttons defined via block
+          instance_eval(&block) if block_given?
 
-        def initialize(text:, level: 2, icon: "", additional_styles: "")
-          @text = text
-          @level = level
-          @icon = icon
-          @additional_styles = additional_styles
-          @additional_styles = @additional_styles.split(" ") if @additional_styles.is_a?(String)
+          case @level
+          when 1
+            h1(class: heading_classes) { render_content }
+          when 2
+            h2(class: heading_classes) { render_content }
+          when 3
+            h3(class: heading_classes) { render_content }
+          when :panel
+            h3(class: panel_heading_classes) { @text }
+          else
+            h2(class: heading_classes) { render_content }
+          end
+        end
+
+        def button(**props)
+          @buttons ||= []
+          @buttons << Panda::Core::Admin::ButtonComponent.new(**props)
         end
 
-        def call
-          output = ""
-          output += content_tag(:div, @text, class: "grow")
+        private
 
-          if buttons?
-            output += content_tag(:span, class: "actions flex gap-x-2 -mt-1") do
-              safe_join(buttons, "")
-            end
+        def render_content
+          div(class: "grow flex items-center gap-x-2") do
+            i(class: @icon) if @icon.present?
+            span { @text }
           end
 
-          output = output.html_safe
-          base_heading_styles = "flex pt-1 text-black mb-5 -mt-1"
+          span(class: "actions flex gap-x-2 -mt-1 min-h-[2.5rem]") do
+            @buttons&.each { |btn| render(btn) }
+          end
+        end
 
-          case level
+        def heading_classes
+          base = "flex pt-1 text-black mb-5 -mt-1"
+          styles = case @level
           when 1
-            content_tag(:h1, output, class: [base_heading_styles, "text-2xl font-medium", @additional_styles])
+            "text-2xl font-medium"
           when 2
-            content_tag(:h2, output, class: [base_heading_styles, "text-xl font-medium", @additional_styles])
+            "text-xl font-medium"
           when 3
-            content_tag(:h3, output, class: [base_heading_styles, "text-xl", "font-light", @additional_styles])
-          when :panel
-            content_tag(:h3, output, class: ["text-base font-medium p-4 text-white"])
+            "text-xl font-light"
+          else
+            "text-xl font-medium"
           end
+
+          [base, styles, *additional_styles_array].compact.join(" ")
+        end
+
+        def panel_heading_classes
+          "text-base font-medium px-4 py-3 text-white"
+        end
+
+        def additional_styles_array
+          return [] if @additional_styles.blank?
+          @additional_styles.is_a?(String) ? @additional_styles.split(" ") : @additional_styles
         end
       end
     end

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

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

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

@@ -3,10 +3,39 @@
 module Panda
   module Core
     module Admin
-      class PanelComponent < ViewComponent::Base
-        renders_one :heading, lambda { |text:, icon: "", level: :panel, additional_styles: ""|
-          Panda::Core::Admin::HeadingComponent.new(text: text, icon: icon, level: level, additional_styles: additional_styles)
-        }
+      class PanelComponent < Panda::Core::Base
+        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
+
+          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-dark shadow-inherit/20") do
+            @heading_content&.call
+
+            div(class: "p-4 text-black bg-white rounded-b-lg") do
+              if @body_content
+                @body_content.call
+              elsif @body_html
+                raw(@body_html)
+              end
+            end
+          end
+        end
+
+        def heading(**props)
+          @heading_content = -> { render(Panda::Core::Admin::HeadingComponent.new(**props.merge(level: :panel))) }
+        end
+
+        def body(&block)
+          @body_content = block
+        end
       end
     end
   end

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

@@ -3,11 +3,73 @@
 module Panda
   module Core
     module Admin
-      class SlideoverComponent < ViewComponent::Base
-        attr_reader :title
+      class SlideoverComponent < Panda::Core::Base
+        prop :title, String, default: "Settings"
+        prop :open, _Nilable(_Boolean), default: -> { false }
 
-        def initialize(title: "Settings")
-          @title = title
+        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",
+              transition_enter_from: "translate-x-full",
+              transition_enter_to: "translate-x-0",
+              transition_leave: "transform transition ease-in-out duration-500",
+              transition_leave_from: "translate-x-0",
+              transition_leave_to: "translate-x-full"
+            }
+          ) do
+            # Header with title and close button
+            div(class: "py-3 px-4 mb-4 bg-black") do
+              div(class: "flex justify-between items-center") do
+                h2(class: "text-base font-semibold leading-6 text-white", id: "slideover-title") do
+                  i(class: "mr-2 fa-light fa-gear")
+                  plain " #{@title}"
+                end
+                button(
+                  type: "button",
+                  data: {action: "click->toggle#toggle touch->toggle#toggle"},
+                  class: "text-white hover:text-gray-300 transition"
+                ) do
+                  i(class: "font-bold fa-regular fa-xmark right")
+                end
+              end
+            end
+
+            # Content area
+            div(class: "overflow-y-auto px-4 pb-6 space-y-6") do
+              if @content_html
+                raw(@content_html)
+              elsif @content_block
+                instance_eval(&@content_block)
+              end
+            end
+          end
+        end
+
+        private
+
+        def default_attrs
+          {
+            id: "slideover",
+            class: slideover_classes
+          }
+        end
+
+        def slideover_classes
+          base = "flex absolute right-0 flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12 z-50"
+          visibility = @open ? "" : "hidden"
+          [base, visibility].compact.join(" ")
         end
       end
     end

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+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-light/20 to-light border-mid") do
+            dt(class: "text-base font-medium truncate text-dark") { @metric }
+            dd(class: "mt-1 text-3xl font-medium tracking-tight text-dark") { @value }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+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
+        end
+
+        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-mid focus:border-panda-dark focus:ring-panda-dark"
+            ) do
+              @tabs.each do |tab|
+                option { tab[:name] }
+              end
+            end
+          end
+        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
+        end
+
+        def render_tab(tab, is_current = false)
+          classes = "py-4 px-1 text-sm font-medium whitespace-nowrap border-b-2 "
+          classes += if is_current || tab[:current]
+            "border-panda-dark text-panda-dark"
+          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] }
+        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)
+          button_class = "p-1.5 text-gray-400 rounded-md focus:ring-2 focus:ring-inset focus:outline-none focus:ring-panda-dark"
+          button_class += if selected
+            " ml-0.5 bg-white shadow-sm"
+          else
+            " hover:bg-white hover:shadow-sm"
+          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
+          end
+        end
+      end
+    end
+  end
+end