better_ui_tmp 0.5.1

data/app/components/better_ui/general/spinner/component.html.erb

@@ -0,0 +1,35 @@
+<div <%= tag.attributes(container_attributes) %>>
+  <div class="flex-shrink-0">
+    <svg class="<%= svg_classes %> animate-spin" viewBox="0 0 24 24" fill="none">
+      <circle 
+        cx="12" 
+        cy="12" 
+        r="10" 
+        stroke="currentColor" 
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-dasharray="32" 
+        stroke-dashoffset="32">
+        <animate 
+          attributeName="stroke-dasharray" 
+          dur="2s" 
+          values="0 32;16 16;0 32;0 32" 
+          repeatCount="indefinite" />
+        <animate 
+          attributeName="stroke-dashoffset" 
+          dur="2s" 
+          values="0;-16;-32;-32" 
+          repeatCount="indefinite" />
+        <animateTransform 
+          attributeName="transform" 
+          type="rotate" 
+          dur="2s" 
+          values="0 12 12;360 12 12" 
+          repeatCount="indefinite" />
+      </circle>
+    </svg>
+  </div>
+  <% if show_label? %>
+    <span class="text-sm font-medium"><%= label %></span>
+  <% end %>
+</div>

data/app/components/better_ui/general/spinner/component.rb

@@ -0,0 +1,93 @@
+module BetterUi
+  module General
+    module Spinner
+      class Component < ViewComponent::Base
+        THEMES = %i[default white red rose orange green blue yellow violet].freeze
+        SIZES = %i[small medium large].freeze
+        STYLES = %i[default outline].freeze
+
+        # Classi base sempre presenti
+        SPINNER_BASE_CLASSES = "inline-flex items-center gap-2"
+
+        # Dimensioni SVG con classi Tailwind dirette
+        SPINNER_SIZES = {
+          small: "w-4 h-4",    # 16px
+          medium: "w-6 h-6",   # 24px
+          large: "w-8 h-8"     # 32px
+        }
+
+        # Temi colore con classi Tailwind dirette
+        SPINNER_THEMES = {
+          default: "text-gray-900",
+          white: "text-white", 
+          red: "text-red-500",
+          rose: "text-rose-500",
+          orange: "text-orange-500",
+          green: "text-green-500",
+          blue: "text-blue-500",
+          yellow: "text-yellow-500",
+          violet: "text-violet-500"
+        }
+
+        # Stili con classi Tailwind dirette  
+        SPINNER_STYLES = {
+          default: "",
+          outline: "opacity-75"
+        }
+
+        def initialize(theme: :default, size: :medium, style: :default, label: nil, **html_options)
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @style = style.to_sym
+          @label = label
+          @html_options = html_options
+
+          validate_options!
+        end
+
+        private
+
+        attr_reader :theme, :size, :style, :label, :html_options
+
+        def validate_options!
+          raise ArgumentError, "Theme deve essere uno di: #{THEMES.join(', ')}" unless THEMES.include?(theme)
+          raise ArgumentError, "Size deve essere uno di: #{SIZES.join(', ')}" unless SIZES.include?(size)
+          raise ArgumentError, "Style deve essere uno di: #{STYLES.join(', ')}" unless STYLES.include?(style)
+        end
+
+        def combined_classes
+          [
+            SPINNER_BASE_CLASSES,
+            get_spinner_theme_classes,
+            get_spinner_style_classes,
+            html_options[:class]
+          ].compact.join(' ')
+        end
+
+        def get_spinner_theme_classes
+          SPINNER_THEMES[theme] || SPINNER_THEMES[:default]
+        end
+
+        def get_spinner_style_classes  
+          SPINNER_STYLES[style] || SPINNER_STYLES[:default]
+        end
+
+        def get_spinner_size_classes
+          SPINNER_SIZES[size] || SPINNER_SIZES[:medium]
+        end
+
+        def container_attributes
+          html_options.except(:class).merge(class: combined_classes)
+        end
+
+        def svg_classes
+          get_spinner_size_classes
+        end
+
+        def show_label?
+          label.present?
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/table/component.html.erb

@@ -0,0 +1,5 @@
+<div <%= tag.attributes(container_attributes) %>>
+  <table <%= tag.attributes(table_attributes) %>>
+    <%= content %>
+  </table>
+</div>

data/app/components/better_ui/general/table/component.rb

@@ -0,0 +1,217 @@
+module BetterUi
+  module General
+    module Table
+      class Component < ViewComponent::Base
+        attr_reader :data, :headers, :caption, :striped, :hoverable, :bordered, :compact, :minimal, :footer,
+                    :header_rows_partial, :body_row_partial, :footer_rows_partial, :thead_partial, :tfoot_partial
+        
+        # Classi base sempre presenti
+        TABLE_BASE_CLASSES = "w-full table-auto border-collapse"
+
+        # Temi di colore con classi Tailwind dirette
+        TABLE_THEME = {
+          default: "bg-gray-50 text-gray-900",
+          white: "bg-white text-gray-900", 
+          red: "bg-red-50 text-red-900",
+          rose: "bg-rose-50 text-rose-900",
+          orange: "bg-orange-50 text-orange-900",
+          green: "bg-green-50 text-green-900",
+          blue: "bg-blue-50 text-blue-900",
+          yellow: "bg-yellow-50 text-yellow-900",
+          violet: "bg-violet-50 text-violet-900"
+        }.freeze
+        
+        # Opzioni di bordi arrotondati con classi Tailwind dirette
+        TABLE_RADIUS = {
+          none: "rounded-none",
+          small: "rounded-md",
+          medium: "rounded-lg", 
+          large: "rounded-xl",
+          full: "rounded-full"
+        }.freeze
+        
+
+        # Classi per container
+        CONTAINER_BASE_CLASSES = "overflow-x-auto"
+
+        # Classi per elementi della tabella
+        THEAD_CLASSES = "bg-gray-100 border-b border-gray-200"
+        TBODY_CLASSES = ""
+        TFOOT_CLASSES = "bg-gray-50 border-t border-gray-200"
+        TR_CLASSES = "border-b border-gray-100 hover:bg-gray-50"
+        TH_CLASSES = "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+        TD_CLASSES = "px-4 py-3 text-sm text-gray-900"
+        TF_CLASSES = "px-4 py-3 text-sm font-medium text-gray-900"
+        CAPTION_CLASSES = "mb-2 text-sm text-gray-600 text-left"
+        
+        def initialize(
+          data: nil,
+          headers: nil, 
+          caption: nil, 
+          theme: :default, 
+          radius: :small, 
+          striped: false, 
+          hoverable: false, 
+          bordered: false, 
+          compact: false,
+          minimal: false,
+          footer: nil, 
+          header_rows_partial: nil, 
+          body_row_partial: nil, 
+          footer_rows_partial: nil,
+          thead_partial: nil,
+          tfoot_partial: nil,
+          **html_options
+        )
+          @data = data || []
+          @headers = headers
+          @caption = caption
+          @theme = theme.to_sym
+          @radius = radius.to_sym
+          # Flag boolean combinabili
+          @striped = !!striped
+          @hoverable = !!hoverable
+          @bordered = !!bordered
+          @compact = !!compact
+          @minimal = !!minimal
+          @footer = footer.is_a?(Array) ? footer : nil
+          @header_rows_partial = header_rows_partial
+          @body_row_partial = body_row_partial
+          @footer_rows_partial = footer_rows_partial
+          @thead_partial = thead_partial
+          @tfoot_partial = tfoot_partial
+          @html_options = html_options
+          
+          validate_params
+        end
+
+        # Combina tutte le classi per la tabella
+        def combined_classes
+          [
+            TABLE_BASE_CLASSES,
+            get_theme_class,
+            @bordered ? "border border-gray-200" : nil,
+            @striped ? "[&_tbody_tr:nth-child(odd)]:bg-gray-50" : nil,
+            @hoverable ? "[&_tbody_tr]:hover:bg-gray-50" : nil,
+            @compact ? "[&_td]:py-1 [&_th]:py-1" : nil,
+            @minimal ? "border-0" : nil,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi HTML per la tabella
+        def table_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = combined_classes
+          attrs
+        end
+
+        # Combina le classi per il container
+        def table_container_classes
+          [
+            CONTAINER_BASE_CLASSES,
+            get_radius_class
+          ].compact.join(" ")
+        end
+        
+        # Restituisce gli attributi HTML per il container
+        def container_attributes
+          {
+            class: table_container_classes
+          }
+        end
+
+        def get_radius_class
+          TABLE_RADIUS[@radius] || TABLE_RADIUS[:small]
+        end
+        
+        def get_theme_class
+          TABLE_THEME[@theme] || TABLE_THEME[:default]
+        end
+
+
+        def caption_classes
+          CAPTION_CLASSES
+        end
+
+        def thead_classes
+          THEAD_CLASSES
+        end
+
+        def tbody_classes
+          TBODY_CLASSES
+        end
+        
+        def tfoot_classes
+          TFOOT_CLASSES
+        end
+
+        def tr_classes(index)
+          TR_CLASSES
+        end
+
+        def th_classes
+          TH_CLASSES
+        end
+
+        def td_classes
+          TD_CLASSES
+        end
+        
+        def tf_classes
+          TF_CLASSES
+        end
+
+        def headers_for_display
+          return @headers if @headers.present?
+          return [] if @data.empty?
+          
+          case first_item = @data.first
+          when Hash
+            first_item.keys
+          when -> (item) { item.respond_to?(:attributes) }
+            first_item.attributes.keys - %w[id created_at updated_at]
+          else
+            []
+          end
+        end
+        
+        # Ottiene il valore di una cella in modo consistente
+        def get_cell_value(row, header)
+          if row.is_a?(Hash)
+            row[header.to_s] || row[header.to_sym] || "—"
+          elsif row.respond_to?(header.to_sym)
+            row.send(header.to_sym)
+          elsif row.is_a?(Array) && headers_for_display.index(header)
+            row[headers_for_display.index(header)] || "—"
+          else
+            "—"
+          end
+        end
+
+        def render?
+          true
+        end
+        
+        private
+        
+        def validate_params
+          validate_theme
+          validate_radius
+        end
+        
+        def validate_theme
+          unless TABLE_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{TABLE_THEME.keys.join(', ')}"
+          end
+        end
+        
+        def validate_radius
+          unless TABLE_RADIUS.keys.include?(@radius)
+            raise ArgumentError, "Il radius deve essere uno tra: #{TABLE_RADIUS.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/table/tbody_component.html.erb

@@ -0,0 +1,3 @@
+<tbody <%= tag.attributes(tbody_attributes) %>>
+  <%= content %>
+</tbody>

data/app/components/better_ui/general/table/tbody_component.rb

@@ -0,0 +1,30 @@
+module BetterUi
+  module General
+    module Table
+      class TbodyComponent < ViewComponent::Base
+        attr_reader :theme, :striped, :hoverable
+
+        def initialize(theme: :default, striped: false, hoverable: false, **html_options)
+          @theme = theme.to_sym
+          @striped = !!striped
+          @hoverable = !!hoverable
+          @html_options = html_options
+        end
+
+        def tbody_classes
+          [
+            @striped ? "[&_tr:nth-child(odd)]:bg-gray-50" : nil,
+            @hoverable ? "[&_tr]:hover:bg-gray-50" : nil,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def tbody_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = tbody_classes
+          attrs
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/table/td_component.html.erb

@@ -0,0 +1,3 @@
+<td <%= tag.attributes(td_attributes) %>>
+  <%= content %>
+</td>

data/app/components/better_ui/general/table/td_component.rb

@@ -0,0 +1,44 @@
+module BetterUi
+  module General
+    module Table
+      class TdComponent < ViewComponent::Base
+        attr_reader :theme, :align, :compact
+
+        def initialize(theme: :default, align: :left, compact: false, **html_options)
+          @theme = theme.to_sym
+          @align = align.to_sym
+          @compact = !!compact
+          @html_options = html_options
+        end
+
+        def td_classes
+          [
+            "px-4 py-3 text-sm text-gray-900",
+            alignment_class,
+            @compact ? "py-1" : nil,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def td_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = td_classes
+          attrs
+        end
+
+        private
+
+        def alignment_class
+          case @align
+          when :center
+            "text-center"
+          when :right
+            "text-right"
+          else
+            "text-left"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/table/tfoot_component.html.erb

@@ -0,0 +1,3 @@
+<tfoot <%= tag.attributes(tfoot_attributes) %>>
+  <%= content %>
+</tfoot>

data/app/components/better_ui/general/table/tfoot_component.rb

@@ -0,0 +1,28 @@
+module BetterUi
+  module General
+    module Table
+      class TfootComponent < ViewComponent::Base
+        attr_reader :theme, :bordered
+
+        def initialize(theme: :default, bordered: false, **html_options)
+          @theme = theme.to_sym
+          @bordered = !!bordered
+          @html_options = html_options
+        end
+
+        def tfoot_classes
+          [
+            "bg-gray-50 border-t border-gray-200",
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def tfoot_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = tfoot_classes
+          attrs
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/table/th_component.html.erb

@@ -0,0 +1,6 @@
+<th <%= tag.attributes(th_attributes) %>>
+  <%= content %>
+  <% if @sortable %>
+    <span class="ml-1 text-gray-400"><%= sort_icon %></span>
+  <% end %>
+</th>

data/app/components/better_ui/general/table/th_component.rb

@@ -0,0 +1,51 @@
+module BetterUi
+  module General
+    module Table
+      class ThComponent < ViewComponent::Base
+        attr_reader :theme, :sortable, :sorted, :sort_direction, :scope
+
+        def initialize(
+          theme: :default, 
+          sortable: false, 
+          sorted: false, 
+          sort_direction: :asc, 
+          scope: "col",
+          **html_options
+        )
+          @theme = theme.to_sym
+          @sortable = !!sortable
+          @sorted = !!sorted
+          @sort_direction = sort_direction.to_sym
+          @scope = scope
+          @html_options = html_options
+        end
+
+        def th_classes
+          [
+            "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider",
+            @sortable ? "cursor-pointer hover:bg-gray-200" : nil,
+            @sorted ? "bg-gray-200" : nil,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def th_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = th_classes
+          attrs[:scope] = @scope
+          attrs
+        end
+
+        def sort_icon
+          return unless @sortable
+          
+          if @sorted
+            @sort_direction == :asc ? "↑" : "↓"
+          else
+            "↕"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/table/thead_component.html.erb

@@ -0,0 +1,3 @@
+<thead <%= tag.attributes(thead_attributes) %>>
+  <%= content %>
+</thead>

data/app/components/better_ui/general/table/thead_component.rb

@@ -0,0 +1,28 @@
+module BetterUi
+  module General
+    module Table
+      class TheadComponent < ViewComponent::Base
+        attr_reader :theme, :bordered
+
+        def initialize(theme: :default, bordered: false, **html_options)
+          @theme = theme.to_sym
+          @bordered = !!bordered
+          @html_options = html_options
+        end
+
+        def thead_classes
+          [
+            "bg-gray-100 border-b border-gray-200",
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def thead_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = thead_classes
+          attrs
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/table/tr_component.html.erb

@@ -0,0 +1,3 @@
+<tr <%= tag.attributes(tr_attributes) %>>
+  <%= content %>
+</tr>

data/app/components/better_ui/general/table/tr_component.rb

@@ -0,0 +1,30 @@
+module BetterUi
+  module General
+    module Table
+      class TrComponent < ViewComponent::Base
+        attr_reader :theme, :highlighted, :striped_index
+
+        def initialize(theme: :default, highlighted: false, striped_index: nil, **html_options)
+          @theme = theme.to_sym
+          @highlighted = !!highlighted
+          @striped_index = striped_index
+          @html_options = html_options
+        end
+
+        def tr_classes
+          [
+            "border-b border-gray-100",
+            @highlighted ? "bg-blue-50" : nil,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def tr_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = tr_classes
+          attrs
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/tag/component.html.erb

@@ -0,0 +1,3 @@
+<span class="<%= tag_classes %>">
+  <%= text %>
+</span>