better_ui 0.3.0 → 0.5.1

data/app/components/better_ui/general/{button/component.html.erb → button_component.html.erb}

@@ -2,15 +2,15 @@
 <% if link? %>
   <%= link_to @href, **link_attributes do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+      <span class="bui-button__text"><%= @label %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--right"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
@@ -18,17 +18,17 @@
 <% else %>
   <%= tag.button(**button_attributes) do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+      <span class="bui-button__text"><%= @label %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="bui-button__icon bui-button__icon--right"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
   <% end %>
-<% end %>
+<% end %> 

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

@@ -0,0 +1,160 @@
+module BetterUi
+  module General
+    class ButtonComponent < ViewComponent::Base
+      attr_reader :label, :type, :size, :full_width, :disabled, 
+                  :icon, :icon_position, :href, :method, :data, :classes, :id, :rounded
+
+      # Temi di bottoni disponibili con classi CSS personalizzate
+      BUTTON_THEME = {
+        default: "bui-button--default",
+        white: "bui-button--white",
+        red: "bui-button--red",
+        rose: "bui-button--rose",
+        orange: "bui-button--orange",
+        green: "bui-button--green",
+        blue: "bui-button--blue",
+        yellow: "bui-button--yellow",
+        violet: "bui-button--violet"
+      }
+
+      # Dimensioni disponibili con classi CSS personalizzate
+      BUTTON_SIZES = {
+        small: "bui-button--small",
+        medium: "bui-button--medium",
+        large: "bui-button--large"
+      }
+      
+      # Border radius disponibili con classi CSS personalizzate
+      BUTTON_RADIUS = {
+        none: "bui-button--radius-none",
+        small: "bui-button--radius-small",
+        medium: "bui-button--radius-medium",
+        large: "bui-button--radius-large",
+        full: "bui-button--radius-full"
+      }
+      
+      # Stati e comportamenti del bottone
+      BUTTON_STATES = {
+        disabled: "bui-button--disabled",
+        full_width: "bui-button--full-width"
+      }
+      
+      # Layout e stili comuni
+      BUTTON_LAYOUT = {
+        default: "bui-btn-layout-default",
+        focus: "bui-btn-focus"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        label: nil,
+        type: :default,
+        size: :medium,
+        full_width: false,
+        disabled: false,
+        icon: nil,
+        icon_position: :left,
+        href: nil,
+        method: nil,
+        data: {},
+        classes: nil,
+        id: nil,
+        rounded: :small
+      )
+        @label = label
+        @type = type.to_sym
+        @size = size.to_sym
+        @full_width = full_width
+        @disabled = disabled
+        @icon = icon
+        @icon_position = icon_position.to_sym
+        @href = href
+        @method = method
+        @data = data
+        @classes = classes
+        @id = id
+        @rounded = rounded.to_sym
+      end
+
+      # Determina se il bottone è un link o un button
+      def link?
+        @href.present?
+      end
+
+      # Combina tutte le classi
+      def combined_classes
+        [
+          "bui-button", # Classe base per tutti i bottoni
+          get_border_radius_class,
+          get_button_type_classes,
+          get_button_size_classes,
+          @full_width ? BUTTON_STATES[:full_width] : "",
+          @disabled ? BUTTON_STATES[:disabled] : "",
+          @classes
+        ].compact.join(" ")
+      end
+      
+      def get_button_type_classes
+        BUTTON_THEME[@type] || BUTTON_THEME[:default]
+      end
+      
+      def get_border_radius_class
+        BUTTON_RADIUS[@rounded] || BUTTON_RADIUS[:small]
+      end
+      
+      def get_button_size_classes
+        BUTTON_SIZES[@size] || BUTTON_SIZES[:medium]
+      end
+      
+      # Restituisce gli attributi per il bottone
+      def button_attributes
+        attrs = {
+          class: combined_classes,
+          type: "button",
+          id: @id
+        }
+        
+        attrs[:disabled] = true if @disabled
+        attrs[:data] = @data if @data.present?
+        attrs
+      end
+      
+      # Restituisce gli attributi per il link
+      def link_attributes
+        attrs = {
+          class: combined_classes,
+          id: @id
+        }
+        
+        attrs[:data] = @data.merge(turbo_method: @method) if @method.present?
+        attrs[:data] = @data if @data.present? && !@method.present?
+        attrs[:href] = @disabled ? nil : @href
+        attrs[:role] = "button"
+        attrs[:tabindex] = @disabled ? "-1" : "0"
+        attrs[:aria] = { disabled: @disabled } if @disabled
+        
+        attrs
+      end
+      
+      # Helper per renderizzare le icone
+      def render_icon(icon_name)
+        # Mappa le dimensioni del bottone alle dimensioni dell'icona
+        icon_size = case @size
+                   when :large
+                     :large
+                   when :small
+                     :small
+                   else
+                     :medium
+                   end
+        
+        # Utilizziamo il componente Icon
+        render BetterUi::General::IconComponent.new(
+          name: icon_name,
+          size: icon_size,
+          fixed_width: true
+        )
+      end
+    end
+  end
+end 

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

@@ -0,0 +1 @@
+<%= content_tag("h#{@level}", content, class: heading_classes) %>

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

@@ -0,0 +1,49 @@
+module BetterUi
+  module General
+    class HeadingComponent < ViewComponent::Base
+      attr_reader :level, :variant, :align, :classes
+
+      # Varianti di colore disponibili
+      HEADER_THEME = {
+        default: "bui-heading--default",
+        white: "bui-heading--white",
+        red: "bui-heading--red",
+        rose: "bui-heading--rose",
+        orange: "bui-heading--orange",
+        green: "bui-heading--green",
+        blue: "bui-heading--blue",
+        yellow: "bui-heading--yellow",
+        violet: "bui-heading--violet"
+      }
+
+      # Allineamenti disponibili
+      HEADER_ALIGNMENTS = {
+        left: "bui-heading--left",
+        center: "bui-heading--center",
+        right: "bui-heading--right"
+      }
+
+      def initialize(
+        level: 2,
+        variant: :default,
+        align: :left,
+        classes: nil
+      )
+        @level = level.to_i.clamp(1, 6)
+        @variant = variant.to_sym
+        @align = align.to_sym
+        @classes = classes
+      end
+
+      def heading_classes
+        [
+          "bui-heading",
+          "bui-heading--#{@level}",
+          HEADER_THEME.fetch(@variant, HEADER_THEME[:default]),
+          HEADER_ALIGNMENTS.fetch(@align, HEADER_ALIGNMENTS[:left]),
+          @classes
+        ].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,77 @@
+module BetterUi
+  module General
+    class IconComponent < ViewComponent::Base
+      # Dimensioni disponibili
+      ICON_SIZES = {
+        xsmall: "bui-icon--xs",
+        tiny: "bui-icon--xs",
+        small: "bui-icon--sm",
+        medium: "bui-icon--md",
+        large: "bui-icon--lg",
+        xlarge: "bui-icon--xl"
+      }
+
+      # Colori disponibili
+      ICON_THEMES = {
+        default: "bui-icon--default",
+        white: "bui-icon--white",
+        red: "bui-icon--red",
+        rose: "bui-icon--rose",
+        orange: "bui-icon--orange",
+        green: "bui-icon--green",
+        blue: "bui-icon--blue",
+        yellow: "bui-icon--yellow",
+        violet: "bui-icon--violet"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        name:,
+        size: :medium,
+        color: :default,
+        fixed_width: false,
+        spin: false,
+        pulse: false,
+        solid: false,
+        solid_color: false,
+        classes: nil
+      )
+        @name = name.to_s.gsub('_', '-') # Convertiamo da snake_case a kebab-case per Font Awesome
+        @size = size.to_sym
+        @color = color.to_sym
+        @fixed_width = fixed_width
+        @spin = spin
+        @pulse = pulse
+        @solid = solid
+        @solid_color = solid_color
+        @classes = classes
+      end
+
+      # Classe CSS per il colore
+      def color_class
+        ICON_THEMES[@color] || ICON_THEMES[:default]
+      end
+
+      # Classe CSS per la dimensione
+      def size_class
+        ICON_SIZES[@size] || ICON_SIZES[:medium]
+      end
+
+      # Combinazione di tutte le classi
+      def combined_classes
+        [
+          "bui-icon",
+          "fa-#{@name}", # Questa classe deve rimanere specifica di Font Awesome
+          size_class,
+          color_class,
+          @fixed_width ? "bui-icon--fixed-width" : nil,
+          @spin ? "bui-icon--spin" : nil,
+          @pulse ? "bui-icon--pulse" : nil,
+          @solid ? "bui-icon--solid" : nil,
+          @solid_color ? "bui-icon--solid-primary" : nil,
+          @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"><%= render_icon %></span>
+    <% end %>
+    <span class="bui-link__text"><%= 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"><%= render_icon %></span>
+    <% end %>
+    <span class="bui-link__text"><%= 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",
+          active: "bui-link--active bui-link--default",
+          text: "bui-link--text bui-link--default"
+        },
+        white: {
+          link: "bui-link--white",
+          active: "bui-link--active bui-link--white",
+          text: "bui-link--text bui-link--white"
+        },
+        red: {
+          link: "bui-link--red",
+          active: "bui-link--active bui-link--red",
+          text: "bui-link--text bui-link--red"
+        },
+        rose: {
+          link: "bui-link--rose",
+          active: "bui-link--active bui-link--rose",
+          text: "bui-link--text bui-link--rose"
+        },
+        orange: {
+          link: "bui-link--orange",
+          active: "bui-link--active bui-link--orange",
+          text: "bui-link--text bui-link--orange"
+        },
+        green: {
+          link: "bui-link--green",
+          active: "bui-link--active bui-link--green",
+          text: "bui-link--text bui-link--green"
+        },
+        blue: {
+          link: "bui-link--blue",
+          active: "bui-link--active bui-link--blue",
+          text: "bui-link--text bui-link--blue"
+        },
+        yellow: {
+          link: "bui-link--yellow",
+          active: "bui-link--active bui-link--yellow",
+          text: "bui-link--text bui-link--yellow"
+        },
+        violet: {
+          link: "bui-link--violet",
+          active: "bui-link--active bui-link--violet",
+          text: "bui-link--text bui-link--violet"
+        }
+      }
+
+      # 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"]
+        
+        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,92 @@
+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 il panel
+      PANEL_THEME = {
+        default: 'bui-panel--default',
+        white: 'bui-panel--white',
+        red: 'bui-panel--red',
+        rose: 'bui-panel--rose',
+        orange: 'bui-panel--orange',
+        green: 'bui-panel--green',
+        blue: 'bui-panel--blue',
+        yellow: 'bui-panel--yellow',
+        violet: 'bui-panel--violet'
+      }.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',
+          get_theme_class,
+          get_border_radius_class
+        ].compact.join(' ')
+      end
+
+      def get_border_radius_class
+        PANEL_RADIUS[@rounded] || PANEL_RADIUS[:small]
+      end
+      
+      def get_theme_class
+        PANEL_THEME[@variant] || PANEL_THEME[:default]
+      end
+
+      def header_classes
+        [
+          'bui-panel__header',
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
+        ].compact.join(' ')
+      end
+
+      def body_classes
+        [
+          'bui-panel__body',
+          PANEL_PADDING.fetch(@padding, PANEL_PADDING[:medium])
+        ].compact.join(' ')
+      end
+
+      def footer_classes
+        [
+          'bui-panel__footer',
+          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>