easy-admin-rails 0.1.0

data/app/assets/stylesheets/easy_admin/application.tailwind.css

@@ -0,0 +1,390 @@
+@import "jsoneditor/dist/jsoneditor.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom EasyAdmin component styles using Tailwind */
+@layer components {
+  /* Sidebar Collapsed State Styles */
+  .sidebar--collapsed .sidebar-logo-container {
+    @apply justify-center w-full;
+  }
+  
+  .sidebar--collapsed .sidebar-app-name {
+    @apply hidden;
+  }
+  
+  .sidebar--collapsed .sidebar-logo {
+    @apply w-10 h-10;
+  }
+  
+  /* Select Field Component Styles */
+  .select-dropdown {
+    @apply absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto opacity-0 invisible transform scale-95 transition-all duration-200 ease-out;
+  }
+
+  .select-dropdown.show {
+    @apply opacity-100 visible scale-100;
+  }
+
+  .select-option {
+    @apply px-3 py-2 text-sm text-gray-900 cursor-pointer hover:bg-gray-50 transition-colors duration-150;
+  }
+
+  .select-option:hover {
+    @apply bg-blue-50 text-blue-900;
+  }
+
+  .selected-item {
+    @apply inline-flex items-center px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded cursor-pointer hover:bg-blue-200 transition-colors duration-150;
+  }
+
+  .remove-item {
+    @apply ml-1 text-blue-600 hover:text-blue-800 font-medium;
+  }
+
+  .select-clear {
+    @apply absolute top-2 right-2 p-1 text-gray-400 hover:text-gray-600 bg-white rounded transition-colors duration-150 z-10;
+  }
+
+  .select-no-results {
+    @apply px-3 py-2 text-sm text-gray-500 text-center;
+  }
+
+  /* Toggle Switch Styles */
+  .toggle-switch {
+    @apply relative inline-block w-11 h-6;
+  }
+
+  .toggle-switch input {
+    @apply opacity-0 w-0 h-0;
+  }
+
+  .toggle-slider {
+    @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 rounded-full transition-all duration-300;
+  }
+
+  .toggle-slider:before {
+    @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5 bg-white rounded-full transition-all duration-300;
+  }
+
+  input:checked + .toggle-switch .toggle-slider {
+    @apply bg-blue-600;
+  }
+
+  input:focus + .toggle-switch .toggle-slider {
+    @apply ring-4 ring-blue-300 ring-opacity-50;
+  }
+
+  input:checked + .toggle-switch .toggle-slider:before {
+    @apply transform translate-x-5;
+  }
+
+  /* Animation utilities */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .animate-fadeIn {
+    animation: fadeIn 0.15s ease-out;
+  }
+
+  /* Sidebar Styles */
+  .sidebar-overlay--visible {
+    @apply opacity-100 pointer-events-auto;
+  }
+
+  .sidebar--open {
+    @apply translate-x-0;
+  }
+
+  .sidebar--collapsed {
+    @apply -translate-x-full lg:translate-x-0;
+  }
+
+  /* Table Styles */
+  .table-striped tbody tr:nth-child(even) {
+    @apply bg-gray-50;
+  }
+
+  .table-striped tbody tr:hover {
+    @apply bg-gray-100 transition-colors duration-150;
+  }
+
+  /* Mobile table responsive behavior */
+  @media (max-width: 640px) {
+    .mobile-table-wrapper {
+      @apply -mx-6;
+    }
+    
+    .mobile-table-wrapper table {
+      @apply min-w-full;
+    }
+    
+    .mobile-table-wrapper th,
+    .mobile-table-wrapper td {
+      @apply px-3 py-2;
+    }
+    
+    /* Hide less important columns on mobile */
+    .mobile-hide {
+      @apply hidden;
+    }
+    
+    /* Stack action buttons vertically on very small screens */
+    .mobile-actions {
+      @apply flex flex-col space-y-1 space-x-0;
+    }
+  }
+
+  /* Responsive sidebar behavior */
+  @media (min-width: 1024px) {
+    .sidebar--collapsed .sidebar {
+      @apply w-16;
+    }
+    
+    /* Hide all text content in collapsed sidebar */
+    .sidebar--collapsed .sidebar .truncate {
+      @apply hidden;
+    }
+    
+    .sidebar--collapsed .sidebar h2 {
+      @apply hidden;
+    }
+
+    /* Center the logo in collapsed state */
+    .sidebar--collapsed .sidebar header > div {
+      @apply justify-center;
+    }
+
+    /* Hide only the submenu containers, not the parent items */
+    .sidebar--collapsed .sidebar [data-sidebar-nav-target="submenu"] {
+      @apply hidden;
+    }
+
+    /* Adjust active item background to not show border-r */
+    .sidebar--collapsed .sidebar .bg-blue-50,
+    .sidebar--collapsed .sidebar .border-r-2 {
+      @apply border-r-0;
+    }
+
+    /* Center all navigation items in collapsed sidebar */
+    .sidebar--collapsed .sidebar nav a,
+    .sidebar--collapsed .sidebar nav button {
+      @apply justify-center px-0 w-full;
+    }
+
+    /* Ensure parent expandable buttons are also centered */
+    .sidebar--collapsed .sidebar nav button.group {
+      @apply justify-center;
+    }
+
+    /* Hide chevrons in collapsed sidebar */
+    .sidebar--collapsed .sidebar [data-sidebar-nav-target="chevron"] {
+      @apply hidden;
+    }
+    
+    /* Remove horizontal padding from nav in collapsed state */
+    .sidebar--collapsed .sidebar nav {
+      @apply px-2;
+    }
+
+    /* Center the icon containers and show only icons in collapsed state */
+    .sidebar--collapsed .sidebar .flex-shrink-0 {
+      @apply mr-0;
+    }
+    
+    /* Make icons centered and properly sized when sidebar is collapsed */
+    .sidebar--collapsed .sidebar nav a span.flex-shrink-0,
+    .sidebar--collapsed .sidebar nav button span.flex-shrink-0 {
+      @apply mr-0 text-xl w-8 h-8;
+    }
+
+    /* Adjust main content and navbar when sidebar is collapsed */
+    .sidebar--collapsed main {
+      @apply ml-16;
+    }
+    
+    .sidebar--collapsed header {
+      @apply ml-16;
+    }
+  }
+
+  /* iOS-style Card Components */
+  .card-base {
+    @apply bg-white rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden backdrop-blur-sm;
+  }
+
+  .card-primary {
+    @apply bg-blue-50/30;
+  }
+
+  .card-secondary {
+    @apply bg-gray-50;
+  }
+
+  .card-success {
+    @apply bg-green-50/30;
+  }
+
+  .card-danger {
+    @apply bg-red-50/30;
+  }
+
+  .card-warning {
+    @apply bg-yellow-50/30;
+  }
+
+  .card-info {
+    @apply bg-cyan-50/30;
+  }
+
+  .card-dark {
+    @apply bg-gray-100;
+  }
+
+  .card-light {
+    @apply bg-white;
+  }
+
+  /* Metric Card Styles */
+  .metric-card-base {
+    @apply rounded-2xl shadow-sm border border-gray-100 h-full mb-4 md:mb-0 overflow-hidden backdrop-blur-sm;
+  }
+
+  .metric-card-primary {
+    @apply bg-blue-500 text-white;
+  }
+
+  .metric-card-secondary {
+    @apply bg-gray-500 text-white;
+  }
+
+  .metric-card-success {
+    @apply bg-green-500 text-white;
+  }
+
+  .metric-card-danger {
+    @apply bg-red-500 text-white;
+  }
+
+  .metric-card-warning {
+    @apply bg-orange-500 text-white;
+  }
+
+  .metric-card-info {
+    @apply bg-blue-400 text-white;
+  }
+
+  .metric-card-dark {
+    @apply bg-gray-800 text-white;
+  }
+
+  .metric-card-light {
+    @apply bg-gray-100 text-gray-900;
+  }
+
+  /* Context Menu Styles */
+  .context-menu {
+    @apply bg-white rounded-lg shadow-lg border border-gray-200 py-1 min-w-48 opacity-0 scale-95 transition-all duration-200 ease-out;
+  }
+  
+  .context-menu.visible {
+    @apply opacity-100 scale-100;
+  }
+  
+  .context-menu.hiding {
+    @apply opacity-0 scale-95;
+  }
+  
+  .context-menu-item {
+    @apply px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer transition-colors duration-150;
+  }
+  
+  .context-menu-item:hover {
+    @apply bg-gray-100 text-gray-900;
+  }
+  
+  .context-menu-item.danger {
+    @apply text-red-600;
+  }
+  
+  .context-menu-item.danger:hover {
+    @apply bg-red-50 text-red-700;
+  }
+  
+  .context-menu-divider {
+    @apply border-t border-gray-200 my-1;
+  }
+  
+  /* Pagination Styles */
+  .pagination-container {
+    @apply bg-white border-t border-gray-200;
+  }
+
+  .pagination-mobile {
+    @apply flex flex-1 justify-between items-center px-4 py-3;
+  }
+
+  .pagination-desktop {
+    @apply hidden sm:flex sm:flex-1 sm:items-center sm:justify-between px-6 py-3;
+  }
+
+  .pagination-button {
+    @apply relative inline-flex items-center justify-center w-10 h-10 rounded-lg font-medium transition-all duration-200;
+  }
+
+  .pagination-button--active {
+    @apply bg-blue-600 text-white border border-blue-600 shadow-sm;
+  }
+
+  .pagination-button--inactive {
+    @apply bg-white text-gray-700 border border-gray-300 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-300;
+  }
+
+  .pagination-button--disabled {
+    @apply bg-gray-100 text-gray-400 border border-gray-300 cursor-not-allowed;
+  }
+
+  .pagination-nav-button {
+    @apply relative inline-flex items-center justify-center w-10 h-10 rounded-lg text-gray-500 border border-gray-300 transition-all duration-200;
+  }
+
+  .pagination-nav-button:hover:not(.pagination-nav-button--disabled) {
+    @apply bg-gray-50 text-gray-700;
+  }
+
+  .pagination-nav-button--disabled {
+    @apply bg-gray-100 text-gray-400 cursor-not-allowed;
+  }
+
+  .pagination-info {
+    @apply text-sm text-gray-700;
+  }
+
+  .pagination-stats {
+    @apply text-sm text-gray-700;
+  }
+
+  /* Mobile-specific pagination adjustments */
+  @media (max-width: 640px) {
+    .pagination-container {
+      @apply px-4 py-3;
+    }
+    
+    .pagination-gap {
+      @apply hidden;
+    }
+  }
+  .jsoneditor-menu > button, .jsoneditor-menu > button {
+    background-image: url('/assets/jsoneditor-icons.svg') !important;
+  }
+}

data/app/components/easy_admin/base_component.rb

@@ -0,0 +1,35 @@
+module EasyAdmin
+  class BaseComponent < Phlex::HTML
+    # Register Turbo custom elements
+    register_element :turbo_frame
+    register_element :turbo_stream
+    register_element :template
+    
+    # Include Rails helpers for form building, URL generation, and text manipulation
+    include ActionView::Helpers::DateHelper
+    include ActionView::Helpers::TextHelper
+    include ActionView::Helpers::UrlHelper
+    include ActionView::Helpers::NumberHelper
+    include EasyAdmin::DashboardsHelper
+    include EasyAdmin::FieldsHelper
+
+    # Add method to access all Rails helpers if needed
+    def helpers
+      @helpers ||= Class.new do
+        include ActionView::Helpers
+        include Rails.application.routes.url_helpers
+        include EasyAdmin::Engine.routes.url_helpers
+      end.new
+    end
+
+    # Direct access to EasyAdmin URL helpers
+    def easy_admin_url_helpers
+      @easy_admin_url_helpers ||= EasyAdmin::Engine.routes.url_helpers
+    end
+
+    # Direct access to Rails URL helpers
+    def rails_url_helpers
+      @rails_url_helpers ||= Rails.application.routes.url_helpers
+    end
+  end
+end

data/app/components/easy_admin/batch_action_bar_component.rb

@@ -0,0 +1,125 @@
+module EasyAdmin
+  class BatchActionBarComponent < BaseComponent
+    def initialize(resource_class:, current_user: nil)
+      @resource_class = resource_class
+      @current_user = current_user
+    end
+    
+    def view_template
+      # iOS-style floating action bar
+      div(
+        class: "fixed bottom-0 inset-x-0 pb-safe z-50 pointer-events-none",
+        data: { batch_selection_target: "actionBar" }
+      ) do
+        div(class: "px-4 pb-4 pointer-events-auto") do
+          div(
+            class: "bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-200/50 transform translate-y-full transition-all duration-300 ease-out opacity-0",
+            style: "transform: translateY(100%); opacity: 0;",
+            data: { batch_selection_target: "actionBarContent" }
+          ) do
+            # Top section with selection count and cancel
+            div(class: "flex items-center justify-between px-5 py-3 border-b border-gray-200/50") do
+              div(class: "flex items-center space-x-3") do
+                # Selection indicator with animated background
+                div(class: "relative") do
+                  div(class: "absolute inset-0 bg-blue-500 rounded-full animate-pulse opacity-20")
+                  div(class: "relative bg-blue-500 text-white text-sm font-semibold rounded-full px-3 py-1.5 min-w-[2rem] text-center") do
+                    span(data: { batch_selection_target: "counter" }) { "0" }
+                  end
+                end
+                
+                span(class: "text-sm font-medium text-gray-700") do
+                  "selected"
+                end
+              end
+              
+              # Cancel button
+              button(
+                type: "button",
+                class: "text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors",
+                data: { action: "click->batch-selection#clearSelection" }
+              ) do
+                "Cancel"
+              end
+            end
+            
+            # Actions section
+            div(class: "p-3") do
+              div(class: "flex flex-col sm:flex-row sm:flex-wrap gap-2") do
+                available_batch_actions.each do |action_class|
+                  render_ios_action_button(action_class)
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+    
+    private
+    
+    def available_batch_actions
+      context = OpenStruct.new(current_user: @current_user)
+      @resource_class.available_batch_actions(context)
+    end
+    
+    def render_ios_action_button(action_class)
+      button(
+        type: "button",
+        class: ios_button_classes(action_class.style),
+        data: {
+          action: "click->batch-selection#executeAction",
+          action_class: action_class.name,
+          execution_mode: action_class.execution_mode,
+          confirm: action_class.confirm_message
+        }
+      ) do
+        div(class: "flex items-center justify-center space-x-2") do
+          if action_class.icon
+            render_icon(action_class.icon)
+          end
+          span(class: "font-medium") { action_class.label }
+        end
+      end
+    end
+    
+    def ios_button_classes(style)
+      base = "w-full sm:flex-1 sm:min-w-[100px] px-4 py-2.5 rounded-xl font-medium text-sm transition-all duration-200 transform active:scale-95"
+      
+      case style
+      when :danger
+        "#{base} bg-red-500 hover:bg-red-600 text-white shadow-sm hover:shadow-md"
+      when :secondary
+        "#{base} bg-gray-100 hover:bg-gray-200 text-gray-700"
+      else # :primary
+        "#{base} bg-blue-500 hover:bg-blue-600 text-white shadow-sm hover:shadow-md"
+      end
+    end
+    
+    def render_icon(icon_name)
+      span(class: "mr-1.5") do
+        case icon_name
+        when "trash"
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+            </svg>
+          SVG
+        when "edit"
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+            </svg>
+          SVG
+        else
+          # Default icon
+          unsafe_raw <<~SVG
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+            </svg>
+          SVG
+        end
+      end
+    end
+  end
+end

data/app/components/easy_admin/batch_action_form_component.rb

@@ -0,0 +1,124 @@
+module EasyAdmin
+  class BatchActionFormComponent < BaseComponent
+    def initialize(resource_class:, action_class:, selected_records:, selected_ids:, submit_url:)
+      @resource_class = resource_class
+      @action_class = action_class
+      @selected_records = selected_records
+      @selected_ids = selected_ids
+      @submit_url = submit_url
+    end
+    
+    def view_template
+      div(
+        id: "modal",
+        class: "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50",
+        data: { 
+          controller: "batch-modal",
+          batch_modal_submit_url_value: @submit_url,
+          batch_modal_selected_ids_value: @selected_ids.join(','),
+          batch_modal_action_class_value: @action_class.name
+        }
+      ) do
+        div(class: "relative top-20 mx-auto p-5 border w-11/12 max-w-md shadow-lg rounded-md bg-white") do
+          # Header
+          div(class: "flex items-center justify-between pb-4 mb-4 border-b border-gray-200") do
+            h3(class: "text-lg font-semibold text-gray-900") do
+              @action_class.modal_title || @action_class.label || @action_class.name.humanize
+            end
+            button(
+              type: "button",
+              class: "text-gray-400 hover:text-gray-600 text-xl",
+              data: { action: "click->batch-modal#close" }
+            ) { "×" }
+          end
+          
+          # Description
+          if @action_class.modal_description.present?
+            p(class: "text-sm text-gray-600 mb-4") { @action_class.modal_description }
+          end
+          
+          # Records count
+          div(class: "mb-4 p-3 bg-gray-50 rounded") do
+            div(class: "text-sm text-gray-600") do
+              "#{@selected_records.count} record(s) selected"
+            end
+          end
+          
+          # Simple form fields
+          div(class: "space-y-4", data: { batch_modal_target: "form" }) do
+            render_simple_fields
+          end
+          
+          # Action buttons
+          div(class: "flex justify-end space-x-3 pt-4 border-t border-gray-200 mt-4") do
+            button(
+              type: "button",
+              class: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50",
+              data: { action: "click->batch-modal#close" }
+            ) { "Cancel" }
+            
+            button(
+              type: "button",
+              class: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700",
+              data: { action: "click->batch-modal#submit" }
+            ) { @action_class.label }
+          end
+        end
+      end
+    end
+    
+    private
+    
+    def render_simple_fields
+      @action_class.attribute_types.each do |attr_name, attr_type|
+        next if attr_name.in?(['selected_records', 'current_user'])
+        
+        field_config = {
+          name: attr_name,
+          type: determine_field_type(attr_type),
+          label: attr_name.humanize,
+          form_name: "batch_action"
+        }
+        
+        # Create a simple record-like object for the field component
+        field_record = OpenStruct.new(attr_name => nil)
+        
+        # Create a mock form object
+        mock_form = OpenStruct.new(
+          object: OpenStruct.new(class: OpenStruct.new(name: OpenStruct.new(underscore: 'batch_action')))
+        )
+        
+        component = field_component(
+          field_config,
+          action: :form,
+          value: nil,
+          record: field_record,
+          form: mock_form
+        )
+        
+        render component
+      end
+    end
+    
+    def determine_field_type(attr_type)
+      case attr_type.type
+      when :string
+        :text
+      when :text
+        :textarea
+      when :boolean
+        :boolean
+      when :integer, :float
+        :number
+      when :date
+        :date
+      when :datetime
+        :datetime
+      when :json
+        :json
+      else
+        :text
+      end
+    end
+  end
+end