better_ui 0.1.0 → 0.1.1

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>

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

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Tag
+      class Component < ViewComponent::Base
+        def initialize(text:, theme: :white, size: :medium, style: :filled, **options)
+          @text = text
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @style = style.to_sym
+          @options = options
+        end
+
+        private
+
+        attr_reader :text, :theme, :size, :style, :options
+
+        def tag_classes
+          base_classes = %w[
+            inline-flex
+            items-center
+            justify-center
+            font-medium
+            transition-colors
+            duration-200
+            bui-tag
+          ]
+
+          base_classes.concat(size_classes)
+          base_classes.concat(theme_classes)
+          base_classes.concat(style_classes)
+          base_classes.join(" ")
+        end
+
+        def size_classes
+          case size
+          when :small
+            %w[text-xs px-2 py-1 rounded]
+          when :large
+            %w[text-base px-4 py-2 rounded-lg]
+          else # :medium
+            %w[text-sm px-3 py-1.5 rounded-md]
+          end
+        end
+
+        def theme_classes
+          case theme
+          when :default
+            %w[bg-gray-100 text-gray-800]
+          when :red
+            %w[bg-red-100 text-red-800]
+          when :rose
+            %w[bg-rose-100 text-rose-800]
+          when :orange
+            %w[bg-orange-100 text-orange-800]
+          when :green
+            %w[bg-green-100 text-green-800]
+          when :blue
+            %w[bg-blue-100 text-blue-800]
+          when :yellow
+            %w[bg-yellow-100 text-yellow-800]
+          when :violet
+            %w[bg-violet-100 text-violet-800]
+          else # :white
+            %w[bg-white text-gray-700 border border-gray-200]
+          end
+        end
+
+        def style_classes
+          case style
+          when :outline
+            outline_theme_classes
+          else # :filled
+            []
+          end
+        end
+
+        def outline_theme_classes
+          case theme
+          when :default
+            %w[bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50]
+          when :red
+            %w[bg-transparent border-red-300 text-red-700 hover:bg-red-50]
+          when :rose
+            %w[bg-transparent border-rose-300 text-rose-700 hover:bg-rose-50]
+          when :orange
+            %w[bg-transparent border-orange-300 text-orange-700 hover:bg-orange-50]
+          when :green
+            %w[bg-transparent border-green-300 text-green-700 hover:bg-green-50]
+          when :blue
+            %w[bg-transparent border-blue-300 text-blue-700 hover:bg-blue-50]
+          when :yellow
+            %w[bg-transparent border-yellow-300 text-yellow-700 hover:bg-yellow-50]
+          when :violet
+            %w[bg-transparent border-violet-300 text-violet-700 hover:bg-violet-50]
+          else # :white
+            %w[bg-transparent border-gray-300 text-gray-700 hover:bg-gray-50]
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<div <%= tag.attributes(tooltip_attributes) %>>
+  <%= content %>
+  <div class="<%= bubble_classes %>">
+    <%= @text %>
+    <div class="<%= arrow_classes %>"></div>
+  </div>
+</div>