panda-core 0.2.3 → 0.4.1

data/app/components/panda/core/UI/card.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module UI
+      # Card component for containing related content.
+      #
+      # Cards are flexible containers that can hold any content,
+      # with optional padding, shadows, and border variations.
+      #
+      # @example Basic card
+      #   render Panda::Core::UI::Card.new do
+      #     "Card content here"
+      #   end
+      #
+      # @example Card with header and footer
+      #   render Panda::Core::UI::Card.new(padding: :large) do |card|
+      #     card.with_header { h3 { "Card Title" } }
+      #     card.with_body { p { "Main content" } }
+      #     card.with_footer { "Footer content" }
+      #   end
+      #
+      # @example Elevated card with no padding
+      #   render Panda::Core::UI::Card.new(
+      #     elevation: :high,
+      #     padding: :none
+      #   ) do
+      #     img(src: "/image.jpg", alt: "Card image")
+      #   end
+      #
+      class Card < Panda::Core::Base
+        prop :padding, Symbol, default: :medium
+        prop :elevation, Symbol, default: :low
+        prop :border, _Boolean, default: true
+
+        def view_template(&block)
+          div(**@attrs, &block)
+        end
+
+        def default_attrs
+          {
+            class: card_classes
+          }
+        end
+
+        private
+
+        def card_classes
+          base = "bg-white rounded-lg overflow-hidden"
+          base += " #{padding_classes}"
+          base += " #{elevation_classes}"
+          base += " #{border_classes}"
+          base
+        end
+
+        def padding_classes
+          case padding
+          when :none
+            ""
+          when :small, :sm
+            "p-4"
+          when :large, :lg
+            "p-8"
+          else # :medium, :md
+            "p-6"
+          end
+        end
+
+        def elevation_classes
+          case elevation
+          when :none
+            ""
+          when :medium, :md
+            "shadow-md"
+          when :high, :lg
+            "shadow-lg"
+          else # :low, :sm
+            "shadow-sm"
+          end
+        end
+
+        def border_classes
+          border ? "border border-gray-200" : ""
+        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-regular 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,58 @@
 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
+        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
+
+          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: "flex-auto") do
+                div(class: "flex-1 mt-4 w-full") do
+                  if @main_content
+                    @main_content.call
+                  elsif @body_html
+                    raw(@body_html)
+                  end
+                end
+                @slideover_content&.call
+              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_content = -> { render(Panda::Core::Admin::SlideoverComponent.new(**props), &block) }
+        end
       end
     end
   end

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

@@ -3,17 +3,82 @@
 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
 
-        def initialize(message:, kind:, temporary: true)
-          @kind = kind.to_sym
-          @message = message
-          @temporary = temporary
+        def view_template
+          div(**container_attrs) do
+            div(class: "overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg") do
+              div(class: "p-4") do
+                div(class: "flex items-start") do
+                  render_icon
+                  render_content
+                  render_close_button
+                end
+              end
+            end
+          end
+        end
+
+        private
+
+        def container_attrs
+          attrs = {
+            class: "fixed top-2 right-2 z-[9999] p-2 space-y-4 w-full max-w-sm sm:items-end",
+            data: {
+              controller: "alert",
+              transition_enter: "ease-in-out duration-500",
+              transition_enter_from: "translate-x-full opacity-0",
+              transition_enter_to: "translate-x-0 opacity-100",
+              transition_leave: "ease-in-out duration-500",
+              transition_leave_from: "translate-x-0 opacity-100",
+              transition_leave_to: "translate-x-full opacity-0"
+            }
+          }
+
+          attrs[:data][:alert_dismiss_after_value] = "3000" if @temporary
+          attrs
+        end
+
+        def render_icon
+          div(class: "flex-shrink-0") do
+            i(class: "fa-regular text-xl #{icon_css} #{text_colour_css}")
+          end
+        end
+
+        def render_content
+          div(class: "flex-1 pt-0.5 ml-3 w-0") do
+            p(class: "mb-1 text-sm font-medium flash-message-title #{text_colour_css}") { @kind.to_s.titleize }
+            p(class: "mt-1 mb-0 text-sm text-gray-500 flash-message-text") { @message }
+          end
+        end
+
+        def render_close_button
+          div(class: "flex flex-shrink-0 ml-4") do
+            button(
+              type: "button",
+              class: "inline-flex text-gray-400 bg-white rounded-md transition duration-150 ease-in-out hover:text-gray-500 focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-sky-500",
+              data: {action: "alert#close"}
+            ) do
+              span(class: "sr-only") { "Close" }
+              svg(
+                class: "w-5 h-5",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                aria: {hidden: "true"}
+              ) do |s|
+                s.path(
+                  d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+                )
+              end
+            end
+          end
         end
 
         def text_colour_css
-          case kind
+          case @kind
           when :success
             "text-green-600"
           when :alert, :error
@@ -28,10 +93,10 @@ module Panda
         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

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,70 @@
 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) { render_content }
+          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
+
+        def render_content
+          div(class: "grow") { @text }
 
-          if buttons?
-            output += content_tag(:span, class: "actions flex gap-x-2 -mt-1") do
-              safe_join(buttons, "")
+          if @buttons&.any?
+            span(class: "actions flex gap-x-2 -mt-1") do
+              @buttons.each { |btn| render(btn) }
             end
           end
+        end
 
-          output = output.html_safe
-          base_heading_styles = "flex pt-1 text-black mb-5 -mt-1"
-
-          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 p-4 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/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-gray-500 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,15 @@
 module Panda
   module Core
     module Admin
-      class SlideoverComponent < ViewComponent::Base
-        attr_reader :title
+      class SlideoverComponent < Panda::Core::Base
+        prop :title, String, default: "Settings"
 
-        def initialize(title: "Settings")
-          @title = title
+        def view_template(&block)
+          # Set content_for equivalents that can be accessed by the layout
+          helpers.content_for(:sidebar_title) { title }
+          helpers.content_for(:sidebar) do
+            aside(class: "hidden overflow-y-auto w-96 h-full bg-white lg:block", &block)
+          end
         end
       end
     end