better_ui 0.1.0 → 0.5.0

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

@@ -0,0 +1,148 @@
+module BetterUi
+  module General
+    class HeadingComponent < ViewComponent::Base
+      attr_reader :text, :level, :variant, :size, :align, :classes, :icon, :subtitle, :with_divider
+
+      # Varianti di colore disponibili
+      HEADER_THEME = {
+        default: {
+          heading: "bui-header-default-heading",
+          subtitle: "bui-header-default-subtitle",
+          divider: "bui-header-default-divider"
+        },
+        white: {
+          heading: "bui-header-white-heading",
+          subtitle: "bui-header-white-subtitle",
+          divider: "bui-header-white-divider"
+        },
+        red: {
+          heading: "bui-header-red-heading",
+          subtitle: "bui-header-red-subtitle",
+          divider: "bui-header-red-divider"
+        },
+        rose: {
+          heading: "bui-header-rose-heading",
+          subtitle: "bui-header-rose-subtitle",
+          divider: "bui-header-rose-divider"
+        },
+        orange: {
+          heading: "bui-header-orange-heading",
+          subtitle: "bui-header-orange-subtitle",
+          divider: "bui-header-orange-divider"
+        },
+        green: {
+          heading: "bui-header-green-heading",
+          subtitle: "bui-header-green-subtitle",
+          divider: "bui-header-green-divider"
+        },
+        blue: {
+          heading: "bui-header-blue-heading",
+          subtitle: "bui-header-blue-subtitle",
+          divider: "bui-header-blue-divider"
+        },
+        yellow: {
+          heading: "bui-header-yellow-heading",
+          subtitle: "bui-header-yellow-subtitle",
+          divider: "bui-header-yellow-divider"
+        },
+        violet: {
+          heading: "bui-header-violet-heading",
+          subtitle: "bui-header-violet-subtitle",
+          divider: "bui-header-violet-divider"
+        }
+      }
+
+      # Dimensioni disponibili
+      HEADER_SIZES = {
+        small: {
+          heading: "bui-header-small-heading", 
+          subtitle: "bui-header-small-subtitle"
+        },
+        medium: {
+          heading: "bui-header-medium-heading", 
+          subtitle: "bui-header-medium-subtitle"
+        },
+        large: {
+          heading: "bui-header-large-heading", 
+          subtitle: "bui-header-large-subtitle"
+        }
+      }
+
+      # Allineamenti disponibili
+      HEADER_ALIGNMENTS = {
+        left: "bui-header-left",
+        center: "bui-header-center",
+        right: "bui-header-right"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        text: nil,
+        level: 2,
+        variant: :default,
+        size: :medium,
+        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
+        [
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:heading],
+          HEADER_SIZES.fetch(@size, HEADER_SIZES[:medium])[:heading],
+          HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
+          "bui-header-heading-base",
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il sottotitolo
+      def subtitle_classes
+        [
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:subtitle],
+          HEADER_SIZES.fetch(@size, HEADER_SIZES[:medium])[:subtitle],
+          HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
+          "bui-header-subtitle-base"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il divisore
+      def divider_classes
+        [
+          "bui-header-divider-base",
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default])[:divider]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        @with_divider ? "bui-header-container-with-divider" : "bui-header-container-base"
+      end
+      
+      # Helper per determinare la dimensione dell'icona in base alla dimensione dell'heading
+      def get_icon_size
+        case @size
+        when :large
+          :medium
+        when :small
+          :xsmall
+        else
+          :small
+        end
+      end
+    end
+  end
+end 

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

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

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

@@ -0,0 +1,100 @@
+module BetterUi
+  module General
+    class IconComponent < ViewComponent::Base
+      # Dimensioni disponibili
+      ICON_SIZES = {
+        xsmall: "bui-icon-xsmall",
+        small: "bui-icon-small",
+        medium: "bui-icon-medium",
+        large: "bui-icon-large",
+        xlarge: "bui-icon-xlarge"
+      }
+
+      # Stili disponibili
+      ICON_STYLES = {
+        solid: "bui-icon-solid",
+        regular: "bui-icon-regular",
+        light: "bui-icon-light",
+        brands: "bui-icon-brands",
+        duotone: "bui-icon-duotone"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        name:,
+        size: :medium,
+        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
+        ICON_STYLES[@style] || ICON_STYLES[:solid]
+      end
+
+      # Classe CSS per la dimensione
+      def size_class
+        ICON_SIZES[@size] || ICON_SIZES[:medium]
+      end
+
+      # Classe per rotazione
+      def rotation_class
+        return "" unless @rotation
+        "bui-icon-rotate-#{@rotation}"
+      end
+
+      # Classe per rovesciamento
+      def flip_class
+        return "" unless @flip
+        "bui-icon-flip-#{@flip}"
+      end
+
+      # Classi per animazioni
+      def animation_classes
+        classes = []
+        classes << "bui-icon-spin" if @spin
+        classes << "bui-icon-pulse" if @pulse
+        classes.join(" ")
+      end
+
+      # Classi per caratteristiche aggiuntive
+      def feature_classes
+        classes = []
+        classes << "bui-icon-fw" if @fixed_width
+        classes << "bui-icon-border" if @border
+        classes.join(" ")
+      end
+
+      # Combinazione di tutte le classi
+      def combined_classes
+        [
+          style_class,
+          "fa-#{@name}", # Questa classe deve rimanere specifica di Font Awesome
+          size_class,
+          rotation_class,
+          flip_class,
+          animation_classes,
+          feature_classes,
+          @classes
+        ].reject(&:blank?).join(" ")
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,17 @@
+<% if link? %>
+  <%= link_to href, **link_attributes do %>
+    <% if render_icon %>
+      <span class="bui-link-icon-wrapper"><%= render_icon %></span>
+    <% end %>
+    <span><%= label %></span>
+    <%= content if content.present? %>
+  <% end %>
+<% else %>
+  <span class="<%= component_classes %>" <%= "aria-current='page'" if active? %>>
+    <% if render_icon %>
+      <span class="bui-link-icon-wrapper"><%= render_icon %></span>
+    <% end %>
+    <span><%= label %></span>
+    <%= content if content.present? %>
+  </span>
+<% end %> 

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

@@ -0,0 +1,132 @@
+module BetterUi
+  module General
+    class LinkComponent < ViewComponent::Base
+      attr_reader :label, :href, :theme, :icon, :classes, :active, :data, :method, :target
+
+      # Temi di colore disponibili
+      LINK_THEME = {
+        default: {
+          link: "bui-link-default-link",
+          active: "bui-link-default-active",
+          text: "bui-link-default-text"
+        },
+        white: {
+          link: "bui-link-white-link",
+          active: "bui-link-white-active",
+          text: "bui-link-white-text"
+        },
+        red: {
+          link: "bui-link-red-link",
+          active: "bui-link-red-active",
+          text: "bui-link-red-text"
+        },
+        rose: {
+          link: "bui-link-rose-link",
+          active: "bui-link-rose-active",
+          text: "bui-link-rose-text"
+        },
+        orange: {
+          link: "bui-link-orange-link",
+          active: "bui-link-orange-active",
+          text: "bui-link-orange-text"
+        },
+        green: {
+          link: "bui-link-green-link",
+          active: "bui-link-green-active",
+          text: "bui-link-green-text"
+        },
+        blue: {
+          link: "bui-link-blue-link",
+          active: "bui-link-blue-active",
+          text: "bui-link-blue-text"
+        },
+        yellow: {
+          link: "bui-link-yellow-link",
+          active: "bui-link-yellow-active",
+          text: "bui-link-yellow-text"
+        },
+        violet: {
+          link: "bui-link-violet-link",
+          active: "bui-link-violet-active",
+          text: "bui-link-violet-text"
+        }
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        label:, 
+        href: nil,
+        theme: :default,
+        icon: nil,
+        classes: nil,
+        active: false,
+        data: {},
+        method: nil,
+        target: nil
+      )
+        @label = label
+        @href = href
+        @theme = theme.to_sym
+        @icon = icon
+        @classes = classes
+        @active = active
+        @data = data || {}
+        @method = method
+        @target = target
+      end
+
+      # Determina se è un link attivo/corrente
+      def active?
+        @active
+      end
+
+      # Determina se è un link o solo testo
+      def link?
+        @href.present?
+      end
+
+      # Genera le classi per il componente
+      def component_classes
+        theme_classes = LINK_THEME.fetch(@theme, LINK_THEME[:default])
+        
+        base_classes = ["bui-link-base"]
+        
+        if active?
+          base_classes << theme_classes[:active]
+        elsif link?
+          base_classes << theme_classes[:link]
+        else
+          base_classes << theme_classes[:text]
+        end
+        
+        base_classes << @classes if @classes.present?
+        
+        base_classes.compact.join(" ")
+      end
+
+      # Restituisce gli attributi per il link
+      def link_attributes
+        attrs = {
+          class: component_classes
+        }
+        
+        attrs[:data] = @data.merge(turbo_method: @method) if @method.present?
+        attrs[:data] = @data if @data.present? && !@method.present?
+        attrs[:target] = @target if @target.present?
+        
+        attrs
+      end
+
+      # Renderizza l'icona
+      def render_icon
+        return nil unless @icon.present?
+        
+        if @icon.is_a?(String)
+          render BetterUi::General::IconComponent.new(name: @icon)
+        else
+          @icon # Assumiamo che sia già un componente renderizzato
+        end
+      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,103 @@
+module BetterUi
+  module General
+    class PanelComponent < ViewComponent::Base
+      attr_reader :header, :footer, :body, :title, :padding, :variant, :rounded
+      
+      # Opzioni di padding disponibili
+      PANEL_PADDING = {
+        none: 'bui-panel-padding-none',
+        small: 'bui-panel-padding-small',
+        medium: 'bui-panel-padding-medium',
+        large: 'bui-panel-padding-large'
+      }.freeze
+      
+      # Temi di colore per l'header
+      PANEL_HEADER_THEME = {
+        default: 'bui-panel-default-header',
+        white: 'bui-panel-white-header',
+        red: 'bui-panel-red-header',
+        rose: 'bui-panel-rose-header',
+        orange: 'bui-panel-orange-header',
+        green: 'bui-panel-green-header',
+        blue: 'bui-panel-blue-header',
+        yellow: 'bui-panel-yellow-header',
+        violet: 'bui-panel-violet-header'
+      }.freeze
+      
+      # Temi di colore per il footer
+      PANEL_FOOTER_THEME = {
+        default: 'bui-panel-default-footer',
+        white: 'bui-panel-white-footer',
+        red: 'bui-panel-red-footer',
+        rose: 'bui-panel-rose-footer',
+        orange: 'bui-panel-orange-footer',
+        green: 'bui-panel-green-footer',
+        blue: 'bui-panel-blue-footer',
+        yellow: 'bui-panel-yellow-footer',
+        violet: 'bui-panel-violet-footer'
+      }.freeze
+      
+      # Opzioni di bordi arrotondati standardizzati
+      PANEL_RADIUS = {
+        none: 'bui-panel-radius-none',
+        small: 'bui-panel-radius-small',
+        medium: 'bui-panel-radius-medium',
+        large: 'bui-panel-radius-large',
+        full: 'bui-panel-radius-full'
+      }.freeze
+      
+      def initialize(title: nil, body: nil, header: nil, footer: nil, padding: :medium, variant: :default, rounded: :small)
+        @title = title
+        @body = body
+        @header = header
+        @footer = footer
+        @padding = padding.to_sym
+        @variant = variant.to_sym
+        @rounded = rounded.to_sym
+      end
+
+      def panel_classes
+        [
+          'bui-panel-base',
+          get_border_radius_class
+        ].compact.join(' ')
+      end
+
+      def get_border_radius_class
+        PANEL_RADIUS[@rounded] || PANEL_RADIUS[:small]
+      end
+
+      def header_classes
+        [
+          'bui-panel-header',
+          PANEL_HEADER_THEME[@variant] || PANEL_HEADER_THEME[:default],
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
+        ].compact.join(' ')
+      end
+
+      def body_classes
+        [
+          'bui-panel-body',
+          'bui-panel-body-content',
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
+        ].compact.join(' ')
+      end
+
+      def footer_classes
+        [
+          'bui-panel-footer',
+          PANEL_FOOTER_THEME[@variant] || PANEL_FOOTER_THEME[:default],
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
+        ].compact.join(' ')
+      end
+
+      def title_classes
+        'bui-panel-title'
+      end
+
+      def render?
+        @body.present? || @header.present? || @footer.present? || content.present?
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,15 @@
+<div <%= spinner_attributes.to_s.html_safe %>>
+  <div class="bui-spinner-animation"></div>
+  
+  <% if @label.present? %>
+    <div class="bui-spinner-label">
+      <%= @label %>
+    </div>
+  <% end %>
+  
+  <% if content.present? %>
+    <div class="bui-spinner-content">
+      <%= content %>
+    </div>
+  <% end %>
+</div> 

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

@@ -0,0 +1,79 @@
+module BetterUi
+  module General
+    class SpinnerComponent < ViewComponent::Base
+      attr_reader :size, :theme, :fullscreen, :label, :classes, :id
+
+      # Temi di colore disponibili
+      SPINNER_THEME = {
+        default: "bui-spinner-default",
+        white: "bui-spinner-white",
+        red: "bui-spinner-red",
+        rose: "bui-spinner-rose",
+        orange: "bui-spinner-orange",
+        green: "bui-spinner-green",
+        blue: "bui-spinner-blue",
+        yellow: "bui-spinner-yellow",
+        violet: "bui-spinner-violet"
+      }
+
+      # Dimensioni disponibili
+      SPINNER_SIZES = {
+        small: "bui-spinner-small",
+        medium: "bui-spinner-medium",
+        large: "bui-spinner-large"
+      }
+
+      # Stati e comportamenti dello spinner
+      SPINNER_STATES = {
+        fullscreen: "bui-spinner-fullscreen"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        size: :medium,
+        theme: :default,
+        fullscreen: false,
+        label: nil,
+        classes: nil,
+        id: nil
+      )
+        @size = size.to_sym
+        @theme = theme.to_sym
+        @fullscreen = fullscreen
+        @label = label
+        @classes = classes
+        @id = id
+      end
+
+      # Combina tutte le classi
+      def combined_classes
+        [
+          "bui-spinner", # Classe base per tutti gli spinner
+          get_spinner_theme_class,
+          get_spinner_size_class,
+          @fullscreen ? SPINNER_STATES[:fullscreen] : "",
+          @classes
+        ].compact.join(" ")
+      end
+      
+      def get_spinner_theme_class
+        SPINNER_THEME[@theme] || SPINNER_THEME[:default]
+      end
+      
+      def get_spinner_size_class
+        SPINNER_SIZES[@size] || SPINNER_SIZES[:medium]
+      end
+      
+      # Restituisce gli attributi per lo spinner
+      def spinner_attributes
+        attrs = {
+          class: combined_classes,
+          id: @id,
+          role: "status"
+        }
+        
+        attrs
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,73 @@
+<div class="<%= table_container_classes %>">
+  <table class="<%= table_classes %>">
+    <% if caption.present? %>
+      <caption class="<%= caption_classes %>">
+        <%= caption %>
+      </caption>
+    <% end %>
+    
+    <thead class="<%= thead_classes %>">
+      <% if header_rows_partial.present? %>
+        <%= render partial: header_rows_partial, locals: { 
+          component: self, 
+          headers: headers_for_display 
+        } %>
+      <% else %>
+        <tr>
+          <% headers_for_display.each do |header| %>
+            <th scope="col" class="<%= th_classes %>">
+              <%= header.to_s.humanize %>
+            </th>
+          <% end %>
+        </tr>
+      <% end %>
+    </thead>
+    
+    <tbody class="<%= tbody_classes %>">
+      <% data.each_with_index do |row, index| %>
+        <% if body_row_partial.present? %>
+          <%= render partial: body_row_partial, locals: { 
+            component: self, 
+            row: row,
+            index: index,
+            headers: headers_for_display 
+          } %>
+        <% else %>
+          <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 %>
+      <% end %>
+    </tbody>
+    
+    <% if footer.present? %>
+      <tfoot class="<%= tfoot_classes %>">
+        <% if footer_rows_partial.present? %>
+          <%= render partial: footer_rows_partial, locals: { 
+            component: self, 
+            footer: footer, 
+            headers: headers_for_display 
+          } %>
+        <% else %>
+          <tr>
+            <% footer.each_with_index do |value, index| %>
+              <td class="<%= tf_classes %>">
+                <%= value || "—" %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tfoot>
+    <% end %>
+  </table>
+</div>