panda-core 0.2.4 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea69195a180331f2758bbae8cfc22ccae44cf8b8ac0133b0642c8e4fb7e11e41
-  data.tar.gz: 495cd12223dc77a2c3893568732ae8ae73374bc0bdaf940cf4498227eae082dc
+  metadata.gz: 1571548de89ff0ad16010f4500ed47a1c53dda70c730945fa439272a33567999
+  data.tar.gz: 02cc839e0831b886a37729b43a5d185d1bd7a13eb3ff59dd2e3afc0f7996e4cd
 SHA512:
-  metadata.gz: eb217e7a4b3f7ddfee0e9e13e252c5fe31a66535b1b239badf9b0b1bfcd71906effd222b0eb2457b6bd4cd309ba69ac8f7edca6db675f93661b7706969728267
-  data.tar.gz: 7b39637eb2c83328f84f349ff0006b550741d9c91afacdbdc5c9f11102dc25baf58ae24dd514b87891ec1a2c1d0bfa3fee7b623d919a0113ef4644ea2d3d2a62
+  metadata.gz: acaebae64c9e8b970edda07e35f0b3820e988d3c738c3cf0c4d9c647be828d98773992d6a1ab70a4dc74cc01edaa04582a43c0fa285222a2e2d8169afaba7ac0
+  data.tar.gz: 927db64e6429b4687667e8e47b185abea96e1f50668b5e6abe2d36050a1606aac880610f94d2f08205fb4a1280e3c95f05f8c45a8afc1d03ca10a38fad0abdd5

data/app/assets/tailwind/application.css

@@ -1,4 +1,12 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+@source "../../app/views/**/*.html.erb";
+@source "../../app/components/**/*.html.erb";
+@source "../../app/components/**/*.rb";
+@source "../../app/helpers/**/*.rb";
+@source "../../../cms/app/views/**/*.html.erb";
+@source "../../../cms/app/components/**/*.html.erb";
+@source "../../../cms/app/components/**/*.rb";
 
 @theme {
   --color-white: var(--color-white);
@@ -14,7 +22,7 @@
 }
 
 @layer base {
-  html[data-theme="default"] {
+  html[data-theme='default'] {
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
@@ -30,7 +38,7 @@
     --color-error: rgb(245, 129, 129); /* #F58181 */
   }
 
-  html[data-theme="sky"] {
+  html[data-theme='sky'] {
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
     --color-light: rgb(204, 238, 242); /* #CCEEF2 */
@@ -46,20 +54,109 @@
 
   a.block-link:after {
     position: absolute;
-    content: "";
+    content: '';
     inset: 0;
   }
 
   /* Admin gradient backgrounds */
-  html[data-theme="default"] .bg-gradient-admin {
+  html[data-theme='default'] .bg-gradient-admin {
     background: linear-gradient(to bottom right, rgb(33, 29, 73), rgb(141, 94, 183));
   }
 
-  html[data-theme="sky"] .bg-gradient-admin {
+  html[data-theme='sky'] .bg-gradient-admin {
     background: linear-gradient(to bottom right, rgb(20, 32, 74), rgb(42, 102, 159));
   }
 }
 
+/* Form input styles */
+@layer components {
+  /* Base form field styles - matches panda-cms admin pattern */
+  input[type='text'],
+  input[type='email'],
+  input[type='password'],
+  input[type='url'],
+  input[type='tel'],
+  input[type='number'],
+  input[type='date'],
+  input[type='datetime-local'],
+  input[type='month'],
+  input[type='week'],
+  input[type='time'],
+  input[type='search'],
+  textarea {
+    @apply block w-full rounded-md border-0 p-2 text-gray-900 bg-white;
+    @apply ring-1 ring-inset ring-mid placeholder:text-gray-300;
+    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
+    @apply hover:cursor-pointer sm:leading-6;
+    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+  }
+
+  /* Select specific styling - matches panda-cms admin pattern */
+  select {
+    @apply block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 bg-white;
+    @apply ring-1 ring-inset ring-mid;
+    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
+    @apply hover:cursor-pointer sm:leading-6;
+    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+    @apply appearance-none bg-right bg-no-repeat;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-size: 1.5em 1.5em;
+  }
+
+  /* Checkbox and radio styling */
+  input[type='checkbox'],
+  input[type='radio'] {
+    @apply w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded transition-colors duration-200;
+    @apply focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
+    @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
+  }
+
+  input[type='radio'] {
+    @apply rounded-full;
+  }
+
+  /* Label styling */
+  label {
+    @apply block text-sm font-medium text-gray-700 mb-1;
+  }
+
+  /* Field wrapper styling */
+  .field {
+    @apply mb-4;
+  }
+
+  /* Error state styling */
+  input.error,
+  textarea.error,
+  select.error {
+    @apply ring-red-500 focus:ring-red-500;
+  }
+
+  .field-error {
+    @apply text-sm text-red-600 mt-1;
+  }
+
+  /* Button styling */
+  .btn {
+    @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold rounded-md transition-colors duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply bg-mid text-white hover:opacity-90 focus:ring-mid;
+  }
+
+  .btn-secondary {
+    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
+  }
+
+  .btn-danger {
+    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+  }
+}
+
 /* EditorJS content styles */
 @layer components {
   .codex-editor__redactor .ce-block .ce-block__content {
@@ -103,7 +200,7 @@
       }
 
       .cdx-quote__text {
-        quotes: "\201C" "\201D" "\2018" "\2019";
+        quotes: '\201C' '\201D' '\2018' '\2019';
         @apply pl-6;
 
         &:before {

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

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module UI
+      # Badge component for status indicators, labels, and counts.
+      #
+      # Badges are small, inline elements that highlight an item's status
+      # or provide additional metadata at a glance.
+      #
+      # @example Basic badge
+      #   render Panda::Core::UI::Badge.new(text: "New")
+      #
+      # @example Status badges
+      #   render Panda::Core::UI::Badge.new(text: "Active", variant: :success)
+      #   render Panda::Core::UI::Badge.new(text: "Pending", variant: :warning)
+      #   render Panda::Core::UI::Badge.new(text: "Error", variant: :danger)
+      #
+      # @example With count
+      #   render Panda::Core::UI::Badge.new(text: "99+", variant: :primary, size: :small)
+      #
+      # @example Removable badge
+      #   render Panda::Core::UI::Badge.new(
+      #     text: "Tag",
+      #     removable: true,
+      #     data: { action: "click->tags#remove" }
+      #   )
+      #
+      class Badge < Panda::Core::Base
+        prop :text, String
+        prop :variant, Symbol, default: :default
+        prop :size, Symbol, default: :medium
+        prop :removable, _Boolean, default: false
+        prop :rounded, _Boolean, default: false
+
+        def view_template
+          span(**@attrs) do
+            plain text
+            if removable
+              whitespace
+              button(
+                type: "button",
+                class: "inline-flex items-center ml-1 hover:opacity-70",
+                aria: {label: "Remove"}
+              ) do
+                svg(
+                  class: "h-3 w-3",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor"
+                ) 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
+        end
+
+        def default_attrs
+          {
+            class: badge_classes
+          }
+        end
+
+        private
+
+        def badge_classes
+          base = "inline-flex items-center font-medium"
+          base += " #{size_classes}"
+          base += " #{variant_classes}"
+          base += rounded ? " rounded-full" : " rounded"
+          base
+        end
+
+        def size_classes
+          case size
+          when :small, :sm
+            "px-2 py-0.5 text-xs"
+          when :large, :lg
+            "px-3 py-1 text-base"
+          else # :medium, :md
+            "px-2.5 py-0.5 text-sm"
+          end
+        end
+
+        def variant_classes
+          case variant
+          when :primary
+            "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10"
+          when :success
+            "bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20"
+          when :warning
+            "bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20"
+          when :danger
+            "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10"
+          when :info
+            "bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-700/10"
+          else # :default
+            "bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-500/10"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module UI
+      # Modern Phlex-based button component with type-safe props.
+      #
+      # This component demonstrates the recommended pattern for building
+      # Phlex components in the Panda ecosystem using the shared base class.
+      #
+      # @example Basic usage
+      #   render Panda::Core::UI::Button.new(text: "Click me")
+      #
+      # @example With variant
+      #   render Panda::Core::UI::Button.new(
+      #     text: "Delete",
+      #     variant: :danger,
+      #     size: :large
+      #   )
+      #
+      # @example With custom attributes
+      #   render Panda::Core::UI::Button.new(
+      #     text: "Submit",
+      #     variant: :primary,
+      #     class: "mt-4",
+      #     data: { turbo_method: :post }
+      #   )
+      #
+      class Button < Panda::Core::Base
+        # Type-safe properties using Literal
+        prop :text, String
+        prop :variant, Symbol, default: :default
+        prop :size, Symbol, default: :medium
+        prop :disabled, _Boolean, default: false
+        prop :type, String, default: "button"
+
+        def view_template
+          button(**@attrs) { text }
+        end
+
+        def default_attrs
+          {
+            type: type,
+            disabled: disabled,
+            class: button_classes
+          }
+        end
+
+        private
+
+        def button_classes
+          base = "inline-flex items-center rounded-md font-medium shadow-sm transition-colors"
+          base += " #{size_classes}"
+          base += " #{variant_classes}"
+          base += " disabled:opacity-50 disabled:cursor-not-allowed" if disabled
+          base
+        end
+
+        def size_classes
+          case size
+          when :small, :sm
+            "gap-x-1.5 px-2.5 py-1.5 text-sm"
+          when :large, :lg
+            "gap-x-2 px-3.5 py-2.5 text-lg"
+          else # :medium, :md
+            "gap-x-1.5 px-3 py-2 text-base"
+          end
+        end
+
+        def variant_classes
+          case variant
+          when :primary
+            "bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          when :secondary
+            "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+          when :success
+            "bg-green-600 text-white hover:bg-green-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+          when :danger
+            "bg-red-600 text-white hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+          when :ghost
+            "bg-transparent text-gray-700 hover:bg-gray-100"
+          else # :default
+            "bg-gray-700 text-white hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700"
+          end
+        end
+      end
+    end
+  end
+end

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