panda-core 0.4.1 → 0.7.0

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

@@ -5,13 +5,101 @@ module Panda
     module Admin
       class SlideoverComponent < Panda::Core::Base
         prop :title, String, default: "Settings"
+        prop :open, _Nilable(_Boolean), default: -> { false }
 
         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)
+          # 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
+
+              # 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
+
+              # 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
+          end
+        end
+
+        def footer(&block)
+          if defined?(view_context) && view_context
+            @footer_html = view_context.capture(&block)
+          else
+            @footer_block = block
+          end
+        end
+
+        alias_method :with_footer, :footer
+
+        private
+
+        def default_attrs
+          {
+            id: "slideover",
+            class: slideover_classes
+          }
+        end
+
+        def slideover_classes
+          base = "ml-auto block size-full max-w-md transform absolute right-0 h-full z-50"
+          visibility = @open ? "" : "hidden"
+          [base, visibility].compact.join(" ")
         end
       end
     end

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

@@ -6,6 +6,7 @@ module Panda
       class TableComponent < Panda::Core::Base
         prop :term, String
         prop :rows, _Nilable(Object), default: -> { [] }
+        prop :icon, String, default: ""
 
         attr_reader :columns
 
@@ -25,25 +26,22 @@ module Panda
           end
         end
 
-        def column(label, &cell_block)
-          @columns << Column.new(label, &cell_block)
+        def column(label, width: nil, &cell_block)
+          @columns << Column.new(label, width, &cell_block)
         end
 
         private
 
         def render_table_with_rows
-          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark") do
+          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark", style: "table-layout: fixed;") 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
+          div(class: "text-center block border border-dashed py-12 rounded-lg") do
+            i(class: "#{@icon} text-4xl text-gray-400 mb-3") if @icon.present?
             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
@@ -57,7 +55,8 @@ module Panda
                 header_classes += " rounded-tl-md" if i.zero?
                 header_classes += " rounded-tr-md" if i == @columns.size - 1
 
-                div(class: header_classes) { column.label }
+                header_style = column.width ? "width: #{column.width};" : nil
+                div(class: header_classes, style: header_style) { column.label }
               end
             end
           end
@@ -106,10 +105,11 @@ module Panda
       end
 
       class Column
-        attr_reader :label, :cell
+        attr_reader :label, :cell, :width
 
-        def initialize(label, &block)
+        def initialize(label, width = nil, &block)
           @label = label
+          @width = width
           @cell = block
         end
       end

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

@@ -6,6 +6,7 @@ module Panda
       class TagComponent < Panda::Core::Base
         prop :status, Symbol, default: :active
         prop :text, _Nilable(String), default: -> {}
+        prop :page_type, _Nilable(Symbol), default: -> {}
 
         def view_template
           span(class: tag_classes) { computed_text }
@@ -14,12 +15,44 @@ module Panda
         private
 
         def computed_text
-          @text || @status.to_s.humanize
+          if @page_type
+            @text || type_display_text
+          else
+            @text || @status.to_s.humanize
+          end
+        end
+
+        def type_display_text
+          case @page_type
+          when :standard
+            "Active"
+          when :hidden_type
+            "Hidden"
+          else
+            @page_type.to_s.humanize
+          end
         end
 
         def tag_classes
           base = "inline-flex items-center py-1 px-2 text-xs font-medium rounded-md ring-1 ring-inset "
-          base + status_classes
+          base + (@page_type ? type_classes : status_classes)
+        end
+
+        def type_classes
+          case @page_type
+          when :system
+            "text-red-700 bg-red-100 ring-red-600/20 dark:bg-red-400/10 dark:text-red-400"
+          when :posts
+            "text-purple-700 bg-purple-100 ring-purple-600/20 dark:bg-purple-400/10 dark:text-purple-400"
+          when :code
+            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+          when :standard
+            "text-green-700 bg-green-100 ring-green-600/20 dark:bg-green-400/10 dark:text-green-400"
+          when :hidden_type
+            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+          else
+            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+          end
         end
 
         def status_classes
@@ -30,6 +63,10 @@ module Panda
             "text-black ring-black/30 bg-yellow-400"
           when :inactive, :hidden
             "text-black ring-black/30 bg-black/5 bg-white"
+          when :auto
+            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+          when :static
+            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
           else
             "text-black bg-white"
           end

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

@@ -30,15 +30,14 @@ module Panda
         end
 
         def render_avatar
-          has_image = resolved_user.respond_to?(:image_url) &&
-            resolved_user.image_url.present? &&
-            !resolved_user.image_url.empty?
+          has_image = resolved_user.respond_to?(:avatar_url) &&
+            resolved_user.avatar_url.present?
 
           if has_image
             div do
               img(
-                class: "inline-block w-10 h-10 rounded-full",
-                src: resolved_user.image_url,
+                class: "inline-block w-10 h-10 rounded-full object-cover",
+                src: resolved_user.avatar_url,
                 alt: ""
               )
             end

data/app/controllers/panda/core/admin/my_profile_controller.rb

@@ -4,7 +4,14 @@ module Panda
   module Core
     module Admin
       class MyProfileController < BaseController
-        before_action :set_initial_breadcrumb, only: %i[edit update]
+        before_action :set_initial_breadcrumb, only: %i[show edit update]
+
+        # Redirects to the edit form
+        # @type GET
+        # @return void
+        def show
+          redirect_to edit_admin_my_profile_path
+        end
 
         # Shows the edit form for the current user's profile
         # @type GET
@@ -21,7 +28,7 @@ module Panda
             flash[:success] = "Your profile has been updated successfully."
             redirect_to edit_admin_my_profile_path
           else
-            render :edit, locals: {user: current_user}, status: :unprocessable_entity
+            render :edit, locals: {user: current_user}, status: :unprocessable_content
           end
         end
 
@@ -36,7 +43,7 @@ module Panda
         # @return ActionController::StrongParameters
         def user_params
           # Base parameters that Core always allows
-          base_params = [:name, :email, :current_theme]
+          base_params = [:name, :email, :current_theme, :avatar]
 
           # Allow additional params from configuration
           additional_params = Core.config.additional_user_params || []

data/app/controllers/panda/core/admin/sessions_controller.rb

@@ -30,7 +30,9 @@ module Panda
           if user.persisted?
             # Check if user is admin before allowing access
             unless user.admin?
-              redirect_to admin_login_path, flash: {error: "You do not have permission to access the admin area"}
+              flash[:error] = "You do not have permission to access the admin area"
+              flash.keep(:error) if Rails.env.test?
+              redirect_to admin_login_path
               return
             end
 
@@ -58,7 +60,9 @@ module Panda
           strategy = params[:strategy] || "unknown"
 
           Rails.logger.error "OmniAuth failure: strategy=#{strategy}, message=#{message}"
-          redirect_to admin_login_path, flash: {error: "Authentication failed: #{message}"}
+          flash[:error] = "Authentication failed: #{message}"
+          flash.keep(:error) if Rails.env.test?
+          redirect_to admin_login_path
         end
 
         def destroy

data/app/controllers/panda/core/admin/test_sessions_controller.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Test-only controller for setting up authentication in system tests
+      # This bypasses OAuth to avoid cross-process issues with Capybara
+      # Security: This route is only defined in test environments, never in production
+      #
+      # Usage in tests:
+      #   post "/admin/test_sessions", params: { user_id: user.id }
+      #   post "/admin/test_sessions", params: { user_id: user.id, return_to: "/some/path" }
+      class TestSessionsController < ActionController::Base
+        # Enable CSRF protection for consistency, then skip for test-only endpoint
+        protect_from_forgery with: :exception
+        skip_before_action :verify_authenticity_token, raise: false
+
+        def create
+          user = Panda::Core::User.find(params[:user_id])
+
+          # Check if user is admin (mimics real OAuth behavior)
+          unless user.admin?
+            # Non-admin users are redirected to login with error (mimics real OAuth flow)
+            flash[:alert] = "You do not have permission to access the admin area."
+            # Keep flash for one more request to survive redirect in tests
+            flash.keep(:alert) if Rails.env.test?
+            # Use string path since route helpers aren't available in ActionController::Base
+            redirect_to "#{Panda::Core.config.admin_path || "/admin"}/login", allow_other_host: false, status: :found
+            return
+          end
+
+          # Set session (mimics real OAuth callback)
+          session[:user_id] = user.id
+          Panda::Core::Current.user = user
+
+          # Support custom redirect path for test flexibility
+          redirect_path = params[:return_to] || determine_default_redirect_path
+          redirect_to redirect_path, allow_other_host: false, status: :found
+        rescue ActiveRecord::RecordNotFound
+          render html: "User not found: #{params[:user_id]}", status: :not_found
+        rescue => e
+          render html: "Error: #{e.class} - #{e.message}<br>#{e.backtrace.first(5).join("<br>")}", status: :internal_server_error
+        end
+
+        private
+
+        def determine_default_redirect_path
+          # Use configured dashboard path if available, otherwise default to admin root
+          if Panda::Core.config.dashboard_redirect_path
+            path = Panda::Core.config.dashboard_redirect_path
+            path.respond_to?(:call) ? path.call : path
+          else
+            # Use string path since route helpers aren't available in ActionController::Base
+            Panda::Core.config.admin_path || "/admin"
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/panda/core/asset_helper.rb

@@ -10,13 +10,41 @@ module Panda
 
       # Include only Core JavaScript
       def panda_core_javascript
-        js_url = Panda::Core::AssetLoader.javascript_url
-        return "" unless js_url
+        # Use asset_tags for development mode (importmap) compatibility
+        # In development, this will use importmap; in production/test, compiled bundles
+        if Panda::Core::AssetLoader.use_github_assets?
+          js_url = Panda::Core::AssetLoader.javascript_url
+          return "" unless js_url
 
-        if js_url.start_with?("/panda-core-assets/")
-          javascript_include_tag(js_url)
+          if js_url.start_with?("/panda-core-assets/")
+            javascript_include_tag(js_url)
+          else
+            javascript_include_tag(js_url, type: "module")
+          end
         else
-          javascript_include_tag(js_url, type: "module")
+          # Development mode - Load JavaScript with import map
+          # Files are served by Rack::Static middleware from engine's app/javascript
+          importmap_html = <<~HTML
+            <script type="importmap">
+              {
+                "imports": {
+                  "@hotwired/stimulus": "/panda/core/vendor/@hotwired--stimulus.js",
+                  "@hotwired/turbo": "/panda/core/vendor/@hotwired--turbo.js",
+                  "@rails/actioncable/src": "/panda/core/vendor/@rails--actioncable--src.js",
+                  "tailwindcss-stimulus-components": "/panda/core/tailwindcss-stimulus-components.js",
+                  "@fortawesome/fontawesome-free": "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@7.1.0/js/all.js",
+                  "@tailwindplus/elements": "https://esm.sh/@tailwindplus/elements@1",
+                  "cropperjs": "https://esm.sh/cropperjs@1.6.2",
+                  "panda/core/application": "/panda/core/application.js",
+                  "panda/core/controllers/toggle_controller": "/panda/core/controllers/toggle_controller.js",
+                  "panda/core/controllers/theme_form_controller": "/panda/core/controllers/theme_form_controller.js"
+                }
+              }
+            </script>
+            <script type="module" src="/panda/core/application.js"></script>
+            <script type="module" src="/panda/core/controllers/index.js"></script>
+          HTML
+          importmap_html.html_safe
         end
       end
 

data/app/helpers/panda/core/sessions_helper.rb

@@ -10,11 +10,36 @@ module Panda
         github: "github"
       }.freeze
 
+      # Map of providers that don't use fa-brands (use fa-solid instead)
+      PROVIDER_NON_BRAND_ICONS = {
+        developer: "code"
+      }.freeze
+
+      # Map OAuth provider names to their display names
+      PROVIDER_NAME_MAP = {
+        google_oauth2: "Google",
+        microsoft_graph: "Microsoft",
+        github: "GitHub",
+        developer: "Developer"
+      }.freeze
+
       # Returns the FontAwesome icon name for a given provider
       # Checks provider config first, then falls back to the mapping, then uses the provider name as-is
       def oauth_provider_icon(provider)
         provider_config = Panda::Core.config.authentication_providers[provider]
-        provider_config&.dig(:icon) || PROVIDER_ICON_MAP[provider.to_sym] || provider.to_s
+        provider_config&.dig(:icon) || PROVIDER_ICON_MAP[provider.to_sym] || PROVIDER_NON_BRAND_ICONS[provider.to_sym] || provider.to_s
+      end
+
+      # Returns true if the provider uses a non-brand icon (fa-solid, fa-regular, etc.)
+      def oauth_provider_non_brand?(provider)
+        PROVIDER_NON_BRAND_ICONS.key?(provider.to_sym)
+      end
+
+      # Returns the display name for a given provider
+      # Checks provider config first, then falls back to the mapping, then humanizes the provider name
+      def oauth_provider_name(provider, provider_config = nil)
+        provider_config ||= Panda::Core.config.authentication_providers[provider]
+        provider_config&.dig(:name) || PROVIDER_NAME_MAP[provider.to_sym] || provider.to_s.humanize
       end
     end
   end

data/app/javascript/panda/core/application.js

@@ -7,4 +7,11 @@ const application = Application.start()
 application.debug = false
 window.Stimulus = application
 
-export { application }
+export { application }
+
+// Note: controllers/index.js must be loaded separately in the HTML to avoid circular dependency
+// It will import this application and register all controllers
+
+// Tailwind Plus Elements can be loaded by importing "panda/core/tailwindplus-elements"
+// or by adding the script tag directly to your HTML:
+// <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>

data/app/javascript/panda/core/controllers/alert_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    dismissAfter: Number
+  }
+
+  connect() {
+    // Auto-dismiss if dismissAfter value is set
+    if (this.hasDismissAfterValue && this.dismissAfterValue > 0) {
+      this.timeout = setTimeout(() => {
+        this.close()
+      }, this.dismissAfterValue)
+    }
+  }
+
+  disconnect() {
+    // Clean up timeout if controller is disconnected
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+  }
+
+  close() {
+    // Clear any pending timeout
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    // Remove the element with a fade-out animation
+    this.element.style.transition = "opacity 0.3s ease-out"
+    this.element.style.opacity = "0"
+
+    setTimeout(() => {
+      this.element.remove()
+    }, 300)
+  }
+}

data/app/javascript/panda/core/controllers/image_cropper_controller.js

@@ -0,0 +1,158 @@
+import { Controller } from "@hotwired/stimulus"
+import Cropper from "cropperjs"
+
+// Connects to data-controller="image-cropper"
+export default class extends Controller {
+  static targets = ["input", "preview", "cropperContainer", "croppedInput"]
+  static values = {
+    aspectRatio: Number,
+    minWidth: { type: Number, default: 0 },
+    minHeight: { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.cropper = null
+    this.originalFile = null
+  }
+
+  disconnect() {
+    if (this.cropper) {
+      this.cropper.destroy()
+      this.cropper = null
+    }
+  }
+
+  handleFileSelect(event) {
+    const file = event.target.files[0]
+    if (file && file.type.startsWith('image/')) {
+      this.originalFile = file
+      this.showCropper(file)
+    }
+  }
+
+  showCropper(file) {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      // Show the cropper container
+      this.cropperContainerTarget.classList.remove('hidden')
+
+      // Set the image source
+      this.previewTarget.src = e.target.result
+
+      // Initialize cropper after a short delay to ensure image is loaded
+      setTimeout(() => this.initializeCropper(), 100)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  initializeCropper() {
+    // Destroy existing cropper if any
+    if (this.cropper) {
+      this.cropper.destroy()
+    }
+
+    const options = {
+      viewMode: 1,
+      dragMode: 'move',
+      aspectRatio: this.aspectRatioValue || NaN,
+      autoCropArea: 1,
+      restore: false,
+      guides: true,
+      center: true,
+      highlight: true,
+      cropBoxMovable: true,
+      cropBoxResizable: true,
+      toggleDragModeOnDblclick: false,
+      responsive: true,
+      checkOrientation: true,
+      minContainerWidth: 200,
+      minContainerHeight: 200
+    }
+
+    this.cropper = new Cropper(this.previewTarget, options)
+  }
+
+  crop() {
+    if (!this.cropper) return
+
+    const canvas = this.cropper.getCroppedCanvas({
+      minWidth: this.minWidthValue,
+      minHeight: this.minHeightValue,
+      maxWidth: 4096,
+      maxHeight: 4096,
+      fillColor: '#fff',
+      imageSmoothingEnabled: true,
+      imageSmoothingQuality: 'high'
+    })
+
+    canvas.toBlob((blob) => {
+      // Create a new File object with the cropped image
+      const fileName = this.originalFile.name
+      const croppedFile = new File([blob], fileName, { type: this.originalFile.type })
+
+      // Create a DataTransfer to set the file input value
+      const dataTransfer = new DataTransfer()
+      dataTransfer.items.add(croppedFile)
+      this.inputTarget.files = dataTransfer.files
+
+      // Hide the cropper
+      this.cropperContainerTarget.classList.add('hidden')
+
+      // Destroy the cropper instance
+      if (this.cropper) {
+        this.cropper.destroy()
+        this.cropper = null
+      }
+
+      // Dispatch event to notify form of change
+      this.inputTarget.dispatchEvent(new Event('change', { bubbles: true }))
+    }, this.originalFile.type)
+  }
+
+  cancel() {
+    // Clear the file input
+    this.inputTarget.value = ''
+
+    // Hide the cropper
+    this.cropperContainerTarget.classList.add('hidden')
+
+    // Destroy the cropper instance
+    if (this.cropper) {
+      this.cropper.destroy()
+      this.cropper = null
+    }
+  }
+
+  reset() {
+    if (this.cropper) {
+      this.cropper.reset()
+    }
+  }
+
+  rotate(event) {
+    const degrees = parseInt(event.currentTarget.dataset.degrees) || 90
+    if (this.cropper) {
+      this.cropper.rotate(degrees)
+    }
+  }
+
+  flip(event) {
+    const direction = event.currentTarget.dataset.direction || 'horizontal'
+    if (this.cropper) {
+      if (direction === 'horizontal') {
+        const scaleX = this.cropper.getData().scaleX || 1
+        this.cropper.scaleX(-scaleX)
+      } else {
+        const scaleY = this.cropper.getData().scaleY || 1
+        this.cropper.scaleY(-scaleY)
+      }
+    }
+  }
+
+  zoom(event) {
+    const ratio = parseFloat(event.currentTarget.dataset.ratio) || 0.1
+    if (this.cropper) {
+      this.cropper.zoom(ratio)
+    }
+  }
+}