better_ui 0.1.0 → 0.4.0

data/app/components/better_ui/general/heading_component.rb

@@ -0,0 +1,142 @@
+module BetterUi
+  module General
+    class HeadingComponent < ViewComponent::Base
+      attr_reader :text, :level, :variant, :size, :align, :classes, :icon, :subtitle, :with_divider
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        default: {
+          heading: "text-gray-900",
+          subtitle: "text-gray-600",
+          divider: "border-gray-200"
+        },
+        primary: {
+          heading: "text-orange-700",
+          subtitle: "text-orange-500",
+          divider: "border-orange-300"
+        },
+        success: {
+          heading: "text-green-700",
+          subtitle: "text-green-500",
+          divider: "border-green-300"
+        },
+        warning: {
+          heading: "text-yellow-700",
+          subtitle: "text-yellow-500",
+          divider: "border-yellow-300"
+        },
+        danger: {
+          heading: "text-red-700",
+          subtitle: "text-red-500",
+          divider: "border-red-300"
+        },
+        info: {
+          heading: "text-blue-700",
+          subtitle: "text-blue-500",
+          divider: "border-blue-300"
+        },
+        light: {
+          heading: "text-gray-100",
+          subtitle: "text-gray-300",
+          divider: "border-gray-700"
+        }
+      }
+
+      # Dimensioni disponibili
+      SIZES = {
+        xs: {
+          heading: "text-lg", 
+          subtitle: "text-sm"
+        },
+        sm: {
+          heading: "text-xl", 
+          subtitle: "text-base"
+        },
+        md: {
+          heading: "text-2xl", 
+          subtitle: "text-lg"
+        },
+        lg: {
+          heading: "text-3xl", 
+          subtitle: "text-xl"
+        },
+        xl: {
+          heading: "text-4xl", 
+          subtitle: "text-2xl"
+        },
+        xxl: {
+          heading: "text-5xl", 
+          subtitle: "text-3xl"
+        }
+      }
+
+      # Allineamenti disponibili
+      ALIGNMENTS = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        text: nil,
+        level: 2,
+        variant: :default,
+        size: :md,
+        align: :left,
+        classes: nil,
+        icon: nil,
+        subtitle: nil,
+        with_divider: false
+      )
+        @text = text
+        @level = level.to_i.clamp(1, 6)
+        @variant = variant.to_sym
+        @size = size.to_sym
+        @align = align.to_sym
+        @classes = classes
+        @icon = icon
+        @subtitle = subtitle
+        @with_divider = with_divider
+      end
+
+      # Genera le classi per l'heading
+      def heading_classes
+        [
+          VARIANTS.fetch(@variant, VARIANTS[:default])[:heading],
+          SIZES.fetch(@size, SIZES[:md])[:heading],
+          ALIGNMENTS.fetch(@align, ALIGNMENTS[:left]),
+          "font-bold",
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il sottotitolo
+      def subtitle_classes
+        [
+          VARIANTS.fetch(@variant, VARIANTS[:default])[:subtitle],
+          SIZES.fetch(@size, SIZES[:md])[:subtitle],
+          ALIGNMENTS.fetch(@align, ALIGNMENTS[:left]),
+          "mt-1"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il divisore
+      def divider_classes
+        [
+          "border-t",
+          "mt-2",
+          VARIANTS.fetch(@variant, VARIANTS[:default])[:divider]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        [
+          "mb-4",
+          @with_divider ? "pb-2" : ""
+        ].compact.join(" ")
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/icon_component.html.erb

@@ -0,0 +1,2 @@
+<%# Template per l'icona %>
+<i class="<%= combined_classes %>" aria-hidden="true"></i> 

data/app/components/better_ui/general/icon_component.rb

@@ -0,0 +1,101 @@
+module BetterUi
+  module General
+    class IconComponent < ViewComponent::Base
+      # Dimensioni disponibili
+      SIZE_CLASSES = {
+        xs: "fa-xs",
+        sm: "fa-sm",
+        md: "", # Default di Font Awesome
+        lg: "fa-lg",
+        xl: "fa-xl",
+        "2xl": "fa-2xl"
+      }
+
+      # Stili disponibili
+      STYLE_CLASSES = {
+        solid: "fas",
+        regular: "far",
+        light: "fal",
+        brands: "fab",
+        duotone: "fad"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        name:,
+        size: :md,
+        style: :solid,
+        fixed_width: false,
+        spin: false,
+        pulse: false,
+        border: false,
+        flip: nil,
+        rotation: nil,
+        classes: nil
+      )
+        @name = name.to_s.gsub('_', '-') # Convertiamo da snake_case a kebab-case per Font Awesome
+        @size = size.to_sym
+        @style = style.to_sym
+        @fixed_width = fixed_width
+        @spin = spin
+        @pulse = pulse
+        @border = border
+        @flip = flip
+        @rotation = rotation
+        @classes = classes
+      end
+
+      # Classe CSS per lo stile dell'icona
+      def style_class
+        STYLE_CLASSES[@style] || STYLE_CLASSES[:solid]
+      end
+
+      # Classe CSS per la dimensione
+      def size_class
+        SIZE_CLASSES[@size] || SIZE_CLASSES[:md]
+      end
+
+      # Classe per rotazione
+      def rotation_class
+        return "" unless @rotation
+        "fa-rotate-#{@rotation}"
+      end
+
+      # Classe per rovesciamento
+      def flip_class
+        return "" unless @flip
+        "fa-flip-#{@flip}"
+      end
+
+      # Classi per animazioni
+      def animation_classes
+        classes = []
+        classes << "fa-spin" if @spin
+        classes << "fa-pulse" if @pulse
+        classes.join(" ")
+      end
+
+      # Classi per caratteristiche aggiuntive
+      def feature_classes
+        classes = []
+        classes << "fa-fw" if @fixed_width
+        classes << "fa-border" if @border
+        classes.join(" ")
+      end
+
+      # Combinazione di tutte le classi
+      def combined_classes
+        [
+          style_class,
+          "fa-#{@name}",
+          size_class,
+          rotation_class,
+          flip_class,
+          animation_classes,
+          feature_classes,
+          @classes
+        ].reject(&:blank?).join(" ")
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/panel_component.html.erb

@@ -0,0 +1,27 @@
+<div class="<%= panel_classes %>">
+  <% if @header.present? %>
+    <div class="<%= header_classes %>">
+      <%= raw @header %>
+    </div>
+  <% elsif @title.present? %>
+    <div class="<%= header_classes %>">
+      <div class="<%= title_classes %>"><%= @title %></div>
+    </div>
+  <% end %>
+  
+  <% if @body.present? %>
+    <div class="<%= body_classes %>">
+      <%= raw @body %>
+    </div>
+  <% elsif content.present? %>
+    <div class="<%= body_classes %>">
+      <%= content %>
+    </div>
+  <% end %>
+  
+  <% if @footer.present? %>
+    <div class="<%= footer_classes %>">
+      <%= raw @footer %>
+    </div>
+  <% end %>
+</div> 

data/app/components/better_ui/general/panel_component.rb

@@ -0,0 +1,97 @@
+module BetterUi
+  module General
+    class PanelComponent < ViewComponent::Base
+      attr_reader :header, :footer, :body, :title, :padding, :variant
+      
+      PADDING_OPTIONS = {
+        none: '',
+        small: 'p-2',
+        medium: 'p-4',
+        large: 'p-6'
+      }.freeze
+      
+      def initialize(title: nil, body: nil, header: nil, footer: nil, padding: :medium, variant: :default)
+        @title = title
+        @body = body
+        @header = header
+        @footer = footer
+        @padding = padding.to_sym
+        @variant = variant.to_sym
+      end
+
+      def panel_classes
+        ThemeHelper.generate_component_classes(:panel, @variant)
+      end
+
+      def header_classes
+        [
+          'panel-header',
+          ThemeHelper::LAYOUT_STYLES[:panel][:header],
+          header_color_classes,
+          PADDING_OPTIONS.fetch(@padding, PADDING_OPTIONS[:medium])
+        ].compact.join(' ')
+      end
+
+      def body_classes
+        [
+          'panel-body',
+          ThemeHelper::LAYOUT_STYLES[:panel][:body],
+          'overflow-x-auto break-words',
+          PADDING_OPTIONS.fetch(@padding, PADDING_OPTIONS[:medium])
+        ].compact.join(' ')
+      end
+
+      def footer_classes
+        [
+          'panel-footer',
+          ThemeHelper::LAYOUT_STYLES[:panel][:footer],
+          footer_color_classes,
+          'overflow-x-auto break-words',
+          PADDING_OPTIONS.fetch(@padding, PADDING_OPTIONS[:medium])
+        ].compact.join(' ')
+      end
+
+      def title_classes
+        'text-lg font-medium'
+      end
+      
+      def header_color_classes
+        case @variant
+        when :primary
+          'bg-orange-50 text-orange-700'
+        when :success
+          'bg-green-50 text-green-700'
+        when :warning
+          'bg-amber-50 text-amber-700'
+        when :danger
+          'bg-red-50 text-red-700'
+        when :info
+          'bg-blue-50 text-blue-700'
+        else
+          'bg-gray-50 text-gray-700'
+        end
+      end
+      
+      def footer_color_classes
+        case @variant
+        when :primary
+          'bg-orange-50 text-orange-600'
+        when :success
+          'bg-green-50 text-green-600'
+        when :warning
+          'bg-amber-50 text-amber-600'
+        when :danger
+          'bg-red-50 text-red-600'
+        when :info
+          'bg-blue-50 text-blue-600'
+        else
+          'bg-gray-50 text-gray-600'
+        end
+      end
+
+      def render?
+        @body.present? || @header.present? || @footer.present? || content.present?
+      end
+    end
+  end
+end 

data/app/components/better_ui/general/table_component.html.erb

@@ -0,0 +1,37 @@
+<div class="<%= table_container_classes %>">
+  <table class="<%= table_classes %>">
+    <% if caption.present? %>
+      <caption class="<%= caption_classes %>">
+        <%= caption %>
+      </caption>
+    <% end %>
+    
+    <thead class="<%= thead_classes %>">
+      <tr>
+        <% headers_for_display.each do |header| %>
+          <th scope="col" class="<%= th_classes %>">
+            <%= header.to_s.humanize %>
+          </th>
+        <% end %>
+      </tr>
+    </thead>
+    
+    <tbody class="<%= tbody_classes %>">
+      <% data.each_with_index do |row, index| %>
+        <tr class="<%= tr_classes(index) %>">
+          <% headers_for_display.each do |header| %>
+            <td class="<%= td_classes %>">
+              <% 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) %>
+              <% else %>
+                —
+              <% end %>
+            </td>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div> 

data/app/components/better_ui/general/table_component.rb

@@ -0,0 +1,141 @@
+module BetterUi
+  module General
+    class TableComponent < ViewComponent::Base
+      attr_reader :data, :headers, :caption, :striped, :hoverable, :bordered, :compact, :classes, :variant
+      
+      def initialize(data:, headers: nil, caption: nil, striped: false, hoverable: false, bordered: true, compact: false, classes: nil, variant: :default)
+        @data = data || []
+        @headers = headers
+        @caption = caption
+        @striped = striped
+        @hoverable = hoverable
+        @bordered = bordered
+        @compact = compact
+        @classes = classes
+        @variant = variant.to_sym
+      end
+
+      def table_classes
+        ThemeHelper.generate_component_classes(:table, @variant, { bordered: @bordered, classes: @classes })
+      end
+
+      def table_container_classes
+        [
+          ThemeHelper::LAYOUT_STYLES[:table][:container],
+          get_border_color
+        ].compact.join(' ')
+      end
+
+      def caption_classes
+        [
+          'px-4 py-2',
+          'text-sm font-medium text-left',
+          caption_color_classes,
+          @bordered ? "border-b #{get_border_color}" : nil
+        ].compact.join(' ')
+      end
+
+      def thead_classes
+        ThemeHelper::LAYOUT_STYLES[:table][:header]
+      end
+
+      def tbody_classes
+        @striped ? ThemeHelper::LAYOUT_STYLES[:table][:row][:striped] : nil
+      end
+
+      def tr_classes(index)
+        [
+          @hoverable ? ThemeHelper::LAYOUT_STYLES[:table][:row][:hover] : nil,
+          @striped ? nil : (index.odd? ? 'bg-gray-50' : nil)
+        ].compact.join(' ')
+      end
+
+      def th_classes
+        [
+          @compact ? 'px-2 py-1' : 'px-4 py-3',
+          'text-left text-xs font-medium uppercase tracking-wider',
+          th_color_classes,
+          @bordered ? "border #{get_border_color}" : nil
+        ].compact.join(' ')
+      end
+
+      def td_classes
+        [
+          @compact ? 'px-2 py-1' : 'px-4 py-3',
+          @bordered ? "border #{get_border_color}" : nil,
+          'text-sm'
+        ].compact.join(' ')
+      end
+      
+      def get_border_color
+        case @variant
+        when :primary
+          'border-orange-200'
+        when :success
+          'border-green-200'
+        when :warning
+          'border-amber-200'
+        when :danger
+          'border-red-200'
+        when :info
+          'border-blue-200'
+        else
+          'border-gray-200'
+        end
+      end
+      
+      def caption_color_classes
+        case @variant
+        when :primary
+          'bg-orange-50 text-orange-700'
+        when :success
+          'bg-green-50 text-green-700'
+        when :warning
+          'bg-amber-50 text-amber-700'
+        when :danger
+          'bg-red-50 text-red-700'
+        when :info
+          'bg-blue-50 text-blue-700'
+        else
+          'bg-gray-50 text-gray-700'
+        end
+      end
+      
+      def th_color_classes
+        case @variant
+        when :primary
+          'text-orange-700'
+        when :success
+          'text-green-700'
+        when :warning
+          'text-amber-700'
+        when :danger
+          'text-red-700'
+        when :info
+          'text-blue-700'
+        else
+          'text-gray-700'
+        end
+      end
+
+      def headers_for_display
+        return @headers if @headers.present?
+        return [] if @data.empty?
+        
+        # Se non sono stati forniti headers, li derivo dalle chiavi del primo elemento
+        first_item = @data.first
+        if first_item.is_a?(Hash)
+          first_item.keys
+        elsif first_item.respond_to?(:attributes)
+          first_item.attributes.keys - ['id', 'created_at', 'updated_at']
+        else
+          []
+        end
+      end
+
+      def render?
+        @data.present?
+      end
+    end
+  end
+end