better_ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,171 @@
+module BetterUi
+  module General
+    class AvatarComponent < ViewComponent::Base
+      attr_reader :name, :src, :size, :shape, :status, :status_position, :type, :classes, :id
+
+      # Temi di colore disponibili
+      AVATAR_THEME = {
+        default: "bui-avatar-default",
+        white: "bui-avatar-white",
+        red: "bui-avatar-red",
+        rose: "bui-avatar-rose",
+        orange: "bui-avatar-orange",
+        green: "bui-avatar-green",
+        blue: "bui-avatar-blue",
+        yellow: "bui-avatar-yellow",
+        violet: "bui-avatar-violet",
+        gray: "bui-avatar-gray"
+      }
+      
+      # Dimensioni disponibili
+      AVATAR_SIZES = {
+        xxsmall: "bui-avatar-size-xxsmall",
+        xsmall: "bui-avatar-size-xsmall",
+        small: "bui-avatar-size-small",
+        medium: "bui-avatar-size-medium",
+        large: "bui-avatar-size-large",
+        xlarge: "bui-avatar-size-xlarge",
+        xxlarge: "bui-avatar-size-xxlarge"
+      }
+      
+      # Forme disponibili
+      AVATAR_SHAPES = {
+        circle: "bui-avatar-shape-circle",
+        square: "bui-avatar-shape-square",
+        rounded: "bui-avatar-shape-rounded"
+      }
+      
+      # Stati online disponibili
+      AVATAR_STATUS = {
+        online: "bui-avatar-status-online",
+        offline: "bui-avatar-status-offline",
+        busy: "bui-avatar-status-busy",
+        away: "bui-avatar-status-away"
+      }
+      
+      # Posizioni dell'indicatore di stato
+      AVATAR_STATUS_POSITION = {
+        bottom_right: "bui-avatar-status-position-bottom-right",
+        bottom_left: "bui-avatar-status-position-bottom-left",
+        top_right: "bui-avatar-status-position-top-right",
+        top_left: "bui-avatar-status-position-top-left"
+      }
+
+      def initialize(
+        name: nil,
+        src: nil,
+        size: :medium,
+        shape: :circle,
+        status: nil,
+        status_position: :bottom_right,
+        type: :default,
+        classes: nil,
+        id: nil
+      )
+        @name = name
+        @src = src
+        @size = size.to_sym
+        @shape = shape.to_sym
+        @status = status&.to_sym
+        @status_position = status_position.to_sym
+        @type = type.to_sym
+        @classes = classes
+        @id = id
+      end
+
+      # Combina tutte le classi
+      def combined_classes
+        [
+          "bui-avatar", # Classe base per tutti gli avatar
+          get_avatar_theme_class,
+          get_avatar_size_class,
+          get_avatar_shape_class,
+          @classes
+        ].compact.join(" ")
+      end
+      
+      def get_avatar_theme_class
+        AVATAR_THEME[@type] || AVATAR_THEME[:default]
+      end
+      
+      def get_avatar_size_class
+        AVATAR_SIZES[@size] || AVATAR_SIZES[:medium]
+      end
+      
+      def get_avatar_shape_class
+        AVATAR_SHAPES[@shape] || AVATAR_SHAPES[:circle]
+      end
+      
+      def get_avatar_status_class
+        AVATAR_STATUS[@status] || ""
+      end
+      
+      def get_avatar_status_position_class
+        AVATAR_STATUS_POSITION[@status_position] || AVATAR_STATUS_POSITION[:bottom_right]
+      end
+      
+      # Restituisce gli attributi per l'avatar
+      def avatar_attributes
+        attrs = {
+          class: combined_classes,
+          id: @id
+        }
+        
+        attrs
+      end
+      
+      # Restituisce le classi per l'indicatore di stato
+      def status_indicator_classes
+        [
+          "bui-avatar-status-indicator",
+          get_avatar_status_class,
+          get_avatar_status_position_class
+        ].compact.join(" ")
+      end
+      
+      # Determina se mostrare l'indicatore di stato
+      def show_status?
+        @status.present? && AVATAR_STATUS.key?(@status)
+      end
+      
+      # Ottiene le iniziali dal nome
+      def initials
+        return "" unless @name.present?
+        
+        words = @name.strip.split(/\s+/)
+        if words.size >= 2
+          "#{words[0][0]}#{words[1][0]}".upcase
+        else
+          @name[0..1].upcase
+        end
+      end
+      
+      # Determina se mostrare l'immagine
+      def show_image?
+        @src.present?
+      end
+      
+      # Ottiene le dimensioni dell'avatar in pixel
+      def pixel_size
+        case @size
+        when :xxsmall
+          20
+        when :xsmall
+          24
+        when :small
+          32
+        when :medium
+          40
+        when :large
+          48
+        when :xlarge
+          64
+        when :xxlarge
+          96
+        else
+          40
+        end
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,19 @@
+<span <%= badge_attributes.to_s.html_safe %>>
+  <% if @icon && @icon_position == :left %>
+    <span class="bui-badge-icon-left">
+      <%= render_icon(@icon) %>
+    </span>
+  <% end %>
+  
+  <% if @label.present? %>
+    <span class="bui-badge-label"><%= @label %></span>
+  <% end %>
+  
+  <% if @icon && @icon_position == :right %>
+    <span class="bui-badge-icon-right">
+      <%= render_icon(@icon) %>
+    </span>
+  <% end %>
+  
+  <%= content %>
+</span> 

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

@@ -0,0 +1,123 @@
+module BetterUi
+  module General
+    class BadgeComponent < ViewComponent::Base
+      attr_reader :label, :type, :size, :icon, :icon_position, :rounded, :notification, :outline, :classes, :id
+
+      # Temi di colore disponibili
+      BADGE_THEME = {
+        default: "bui-badge-default",
+        white: "bui-badge-white",
+        red: "bui-badge-red",
+        rose: "bui-badge-rose",
+        orange: "bui-badge-orange",
+        green: "bui-badge-green",
+        blue: "bui-badge-blue",
+        yellow: "bui-badge-yellow",
+        violet: "bui-badge-violet",
+        gray: "bui-badge-gray"
+      }
+
+      # Dimensioni disponibili
+      BADGE_SIZES = {
+        small: "bui-badge-size-small",
+        medium: "bui-badge-size-medium",
+        large: "bui-badge-size-large"
+      }
+      
+      # Border radius disponibili
+      BADGE_RADIUS = {
+        none: "bui-badge-radius-none",
+        small: "bui-badge-radius-small",
+        medium: "bui-badge-radius-medium",
+        large: "bui-badge-radius-large",
+        full: "bui-badge-radius-full"
+      }
+      
+      # Stati e varianti
+      BADGE_VARIANTS = {
+        outline: "bui-badge-outline",
+        notification: "bui-badge-notification"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        label: nil,
+        type: :default,
+        size: :medium,
+        icon: nil,
+        icon_position: :left,
+        rounded: :medium,
+        notification: false,
+        outline: false,
+        classes: nil,
+        id: nil
+      )
+        @label = label
+        @type = type.to_sym
+        @size = size.to_sym
+        @icon = icon
+        @icon_position = icon_position.to_sym
+        @rounded = rounded.to_sym
+        @notification = notification
+        @outline = outline
+        @classes = classes
+        @id = id
+      end
+
+      # Combina tutte le classi
+      def combined_classes
+        [
+          "bui-badge", # Classe base per tutti i badge
+          get_badge_type_class,
+          get_badge_size_class,
+          get_border_radius_class,
+          @outline ? BADGE_VARIANTS[:outline] : "",
+          @notification ? BADGE_VARIANTS[:notification] : "",
+          @classes
+        ].compact.join(" ")
+      end
+      
+      def get_badge_type_class
+        BADGE_THEME[@type] || BADGE_THEME[:default]
+      end
+      
+      def get_badge_size_class
+        BADGE_SIZES[@size] || BADGE_SIZES[:medium]
+      end
+      
+      def get_border_radius_class
+        BADGE_RADIUS[@rounded] || BADGE_RADIUS[:medium]
+      end
+      
+      # Restituisce gli attributi per il badge
+      def badge_attributes
+        attrs = {
+          class: combined_classes,
+          id: @id
+        }
+        
+        attrs
+      end
+      
+      # Helper per renderizzare le icone
+      def render_icon(icon_name)
+        # Mappa le dimensioni del badge alle dimensioni dell'icona
+        icon_size = case @size
+                   when :large
+                     :small
+                   when :small
+                     :tiny
+                   else
+                     :tiny
+                   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/{breadcrumb/component.html.erb → breadcrumb_component.html.erb}

@@ -1,7 +1,7 @@
-<nav <%= tag.attributes(breadcrumb_attributes) %>>
-  <ol class="<%= BREADCRUMB_LIST_CLASSES %>">
+<nav aria-label="Breadcrumb" class="<%= container_classes %>">
+  <ol class="bui-breadcrumb-list">
     <% @items.each_with_index do |item, index| %>
-      <li class="<%= BREADCRUMB_ITEM_CLASSES %>">
+      <li class="bui-breadcrumb-item">
         <%= render link_for_item(item, active: last_item?(index)) %>
         
         <% unless last_item?(index) %>
@@ -12,4 +12,4 @@
       </li>
     <% end %>
   </ol>
-</nav>
+</nav> 

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

@@ -0,0 +1,130 @@
+module BetterUi
+  module General
+    class BreadcrumbComponent < ViewComponent::Base
+      attr_reader :items, :separator, :size, :theme, :classes
+
+      # Temi di colore disponibili
+      BREADCRUMB_THEME = {
+        default: {
+          container: "bui-breadcrumb-default-container",
+          separator: "bui-breadcrumb-default-separator"
+        },
+        white: {
+          container: "bui-breadcrumb-white-container",
+          separator: "bui-breadcrumb-white-separator"
+        },
+        red: {
+          container: "bui-breadcrumb-red-container",
+          separator: "bui-breadcrumb-red-separator"
+        },
+        rose: {
+          container: "bui-breadcrumb-rose-container",
+          separator: "bui-breadcrumb-rose-separator"
+        },
+        orange: {
+          container: "bui-breadcrumb-orange-container",
+          separator: "bui-breadcrumb-orange-separator"
+        },
+        green: {
+          container: "bui-breadcrumb-green-container",
+          separator: "bui-breadcrumb-green-separator"
+        },
+        blue: {
+          container: "bui-breadcrumb-blue-container", 
+          separator: "bui-breadcrumb-blue-separator"
+        },
+        yellow: {
+          container: "bui-breadcrumb-yellow-container",
+          separator: "bui-breadcrumb-yellow-separator"
+        },
+        violet: {
+          container: "bui-breadcrumb-violet-container",
+          separator: "bui-breadcrumb-violet-separator"
+        }
+      }
+
+      # Dimensioni disponibili
+      BREADCRUMB_SIZES = {
+        small: "bui-breadcrumb-small",
+        medium: "bui-breadcrumb-medium",
+        large: "bui-breadcrumb-large"
+      }
+
+      # Separatori predefiniti
+      BREADCRUMB_SEPARATORS = {
+        slash: "/",
+        chevron: "›",
+        arrow: "→",
+        dot: "•",
+        pipe: "|"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        items: [],
+        separator: :chevron, 
+        size: :medium,
+        theme: :default,
+        classes: nil
+      )
+        @items = items || []
+        @separator = separator.to_sym
+        @size = size.to_sym
+        @theme = theme.to_sym
+        @classes = classes
+      end
+
+      # Restituisce il separatore come stringa
+      def separator_text
+        if BREADCRUMB_SEPARATORS.key?(@separator)
+          BREADCRUMB_SEPARATORS[@separator]
+        else
+          @separator.to_s
+        end
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        [
+          "bui-breadcrumb-container",
+          BREADCRUMB_SIZES.fetch(@size, BREADCRUMB_SIZES[:medium]),
+          BREADCRUMB_THEME.fetch(@theme, BREADCRUMB_THEME[:default])[:container],
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il separatore
+      def separator_classes
+        [
+          "bui-breadcrumb-separator",
+          BREADCRUMB_THEME.fetch(@theme, BREADCRUMB_THEME[:default])[:separator]
+        ].compact.join(" ")
+      end
+
+      # Verifica se un item è l'ultimo (attivo)
+      def last_item?(index)
+        index == @items.length - 1
+      end
+
+      # Crea un componente link per l'item
+      def link_for_item(item, active: false)
+        label = item.is_a?(Hash) ? item[:label] : item.to_s
+        href = item.is_a?(Hash) ? item[:url] : nil
+        icon = item.is_a?(Hash) ? item[:icon] : nil
+        
+        BetterUi::General::LinkComponent.new(
+          label: label,
+          href: href,
+          theme: @theme,
+          icon: icon,
+          active: active
+        )
+      end
+      
+      # Verifica se rendere il componente
+      def render?
+        @items.present? && @items.length > 0
+      end
+    end
+  end
+end 

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-btn-icon-left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+      <span><%= @label %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="bui-btn-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-btn-icon-left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+      <span><%= @label %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="bui-btn-icon-right"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
   <% end %>
-<% end %>
+<% end %> 

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

@@ -0,0 +1,162 @@
+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-btn-default",
+        white: "bui-btn-white",
+        red: "bui-btn-red",
+        rose: "bui-btn-rose",
+        orange: "bui-btn-orange",
+        green: "bui-btn-green",
+        blue: "bui-btn-blue",
+        yellow: "bui-btn-yellow",
+        violet: "bui-btn-violet"
+      }
+
+      # Dimensioni disponibili con classi CSS personalizzate
+      BUTTON_SIZES = {
+        small: "bui-btn-size-small",
+        medium: "bui-btn-size-medium",
+        large: "bui-btn-size-large"
+      }
+      
+      # Border radius disponibili con classi CSS personalizzate
+      BUTTON_RADIUS = {
+        none: "bui-btn-radius-none",
+        small: "bui-btn-radius-small",
+        medium: "bui-btn-radius-medium",
+        large: "bui-btn-radius-large",
+        full: "bui-btn-radius-full"
+      }
+      
+      # Stati e comportamenti del bottone
+      BUTTON_STATES = {
+        disabled: "bui-btn-disabled",
+        full_width: "bui-btn-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-btn", # Classe base per tutti i bottoni
+          BUTTON_LAYOUT[:default],
+          BUTTON_LAYOUT[:focus],
+          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,25 @@
+<div class="<%= container_classes %>">
+  <%# Utilizzo di tag heading dinamico in base al livello specificato %>
+  <<%= "h#{@level}" %> class="<%= heading_classes %>">
+    <% if @icon.present? %>
+      <span class="bui-header-icon-container">
+        <span class="bui-header-icon-wrapper">
+          <%= render BetterUi::General::IconComponent.new(name: @icon, size: get_icon_size) %>
+        </span>
+        <%= @text || content %>
+      </span>
+    <% else %>
+      <%= @text || content %>
+    <% end %>
+  </<%= "h#{@level}" %>>
+  
+  <% if @subtitle.present? %>
+    <div class="<%= subtitle_classes %>">
+      <%= @subtitle %>
+    </div>
+  <% end %>
+  
+  <% if @with_divider %>
+    <div class="<%= divider_classes %>"></div>
+  <% end %>
+</div>