panda-core 0.2.4 → 0.4.1

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

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

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

@@ -3,24 +3,105 @@
 module Panda
   module Core
     module Admin
-      class TableComponent < ViewComponent::Base
+      class TableComponent < Panda::Core::Base
+        prop :term, String
+        prop :rows, _Nilable(Object), default: -> { [] }
+
         attr_reader :columns
 
-        def initialize(term:, rows:)
-          @term = term
-          @rows = rows
+        def initialize(**props)
+          super
           @columns = []
         end
 
-        def column(label, &)
-          @columns << Column.new(label, &)
+        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
+        end
+
+        def column(label, &cell_block)
+          @columns << Column.new(label, &cell_block)
         end
 
         private
 
-        # Ensures @columns gets populated [https://dev.to/rolandstuder/supercharged-table-component-built-with-viewcomponent-3j6i]
-        def before_render
-          content
+        def render_table_with_rows
+          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark") do
+            render_header
+            render_rows
+          end
+        end
+
+        def render_empty_table
+          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark") do
+            render_header
+          end
+
+          div(class: "text-center mx-12 block border border-dashed py-12 rounded-lg") do
+            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
+        end
+
+        def render_header
+          div(class: "table-header-group") do
+            div(class: "table-row text-base font-medium text-white bg-dark") 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
+
+                div(class: header_classes) { column.label }
+              end
+            end
+          end
+        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-dark/20") do
+                    # Capture the cell content by calling the block with the row
+                    render_cell_content(row, column.cell)
+                  end
+                end
+              end
+            end
+          end
+        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)
+
+            # 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
         end
       end