better_ui 0.4.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

@@ -1,37 +1,13 @@
 <nav aria-label="Breadcrumb" class="<%= container_classes %>">
-  <ol class="flex flex-wrap items-center">
+  <ol class="bui-breadcrumb-list">
     <% @items.each_with_index do |item, index| %>
-      <li class="flex items-center">
-        <% if last_item?(index) %>
-          <span class="<%= item_classes(true) %> flex items-center" aria-current="page">
-            <% if item_icon(item) %>
-              <span class="mr-1.5"><%= item_icon(item) %></span>
-            <% end %>
-            <%= item_text(item) %>
+      <li class="bui-breadcrumb-item">
+        <%= render link_for_item(item, active: last_item?(index)) %>
+        
+        <% unless last_item?(index) %>
+          <span class="<%= separator_classes %>" aria-hidden="true">
+            <%= separator_text %>
           </span>
-        <% else %>
-          <% url = item_url(item) %>
-          <% if url.present? %>
-            <%= link_to url, class: "#{item_classes} flex items-center" do %>
-              <% if item_icon(item) %>
-                <span class="mr-1.5"><%= item_icon(item) %></span>
-              <% end %>
-              <%= item_text(item) %>
-            <% end %>
-          <% else %>
-            <span class="<%= item_classes %> flex items-center">
-              <% if item_icon(item) %>
-                <span class="mr-1.5"><%= item_icon(item) %></span>
-              <% end %>
-              <%= item_text(item) %>
-            </span>
-          <% end %>
-          
-          <% unless last_item?(index) %>
-            <span class="<%= separator_classes %>" aria-hidden="true">
-              <%= separator_text %>
-            </span>
-          <% end %>
         <% end %>
       </li>
     <% end %>

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

@@ -1,39 +1,57 @@
 module BetterUi
   module General
     class BreadcrumbComponent < ViewComponent::Base
-      attr_reader :items, :separator, :size, :variant, :classes, :inverse
+      attr_reader :items, :separator, :size, :theme, :classes
 
-      # Varianti di colore disponibili
-      VARIANTS = {
+      # Temi di colore disponibili
+      BREADCRUMB_THEME = {
         default: {
-          container: "text-gray-600",
-          item: "text-gray-500 hover:text-gray-700",
-          active: "text-gray-900 font-medium",
-          separator: "text-gray-400"
+          container: "bui-breadcrumb-default-container",
+          separator: "bui-breadcrumb-default-separator"
         },
-        primary: {
-          container: "text-orange-600",
-          item: "text-orange-500 hover:text-orange-700",
-          active: "text-orange-800 font-medium",
-          separator: "text-orange-300"
+        white: {
+          container: "bui-breadcrumb-white-container",
+          separator: "bui-breadcrumb-white-separator"
         },
-        light: {
-          container: "text-gray-100",
-          item: "text-gray-200 hover:text-white",
-          active: "text-white font-medium",
-          separator: "text-gray-300"
+        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
-      SIZES = {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base"
+      BREADCRUMB_SIZES = {
+        small: "bui-breadcrumb-small",
+        medium: "bui-breadcrumb-medium",
+        large: "bui-breadcrumb-large"
       }
 
       # Separatori predefiniti
-      SEPARATORS = {
+      BREADCRUMB_SEPARATORS = {
         slash: "/",
         chevron: "›",
         arrow: "→",
@@ -45,23 +63,21 @@ module BetterUi
       def initialize(
         items: [],
         separator: :chevron, 
-        size: :md,
-        variant: :default,
-        classes: nil,
-        inverse: false
+        size: :medium,
+        theme: :default,
+        classes: nil
       )
         @items = items || []
         @separator = separator.to_sym
         @size = size.to_sym
-        @variant = variant.to_sym
+        @theme = theme.to_sym
         @classes = classes
-        @inverse = inverse
       end
 
       # Restituisce il separatore come stringa
       def separator_text
-        if SEPARATORS.key?(@separator)
-          SEPARATORS[@separator]
+        if BREADCRUMB_SEPARATORS.key?(@separator)
+          BREADCRUMB_SEPARATORS[@separator]
         else
           @separator.to_s
         end
@@ -70,30 +86,18 @@ module BetterUi
       # Genera le classi per il container
       def container_classes
         [
-          "flex items-center flex-wrap",
-          SIZES.fetch(@size, SIZES[:md]),
-          VARIANTS.fetch(@variant, VARIANTS[:default])[:container],
-          @inverse ? "bg-gray-800 p-2 rounded" : "",
+          "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 un elemento
-      def item_classes(active = false)
-        variant_classes = VARIANTS.fetch(@variant, VARIANTS[:default])
-        
-        if active
-          variant_classes[:active]
-        else
-          variant_classes[:item]
-        end
-      end
-
       # Genera le classi per il separatore
       def separator_classes
         [
-          "mx-2",
-          VARIANTS.fetch(@variant, VARIANTS[:default])[:separator]
+          "bui-breadcrumb-separator",
+          BREADCRUMB_THEME.fetch(@theme, BREADCRUMB_THEME[:default])[:separator]
         ].compact.join(" ")
       end
 
@@ -102,27 +106,21 @@ module BetterUi
         index == @items.length - 1
       end
 
-      # Formatta il testo dell'item
-      def item_text(item)
-        item.is_a?(Hash) ? item[:label] : item.to_s
-      end
-
-      # Restituisce l'URL dell'item
-      def item_url(item)
-        item.is_a?(Hash) ? item[:url] : nil
-      end
-
-      # Restituisce l'icona dell'item se presente
-      def item_icon(item)
-        return nil unless item.is_a?(Hash) && item[:icon].present?
+      # 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
         
-        if item[:icon].is_a?(String)
-          render BetterUi::General::IconComponent.new(name: item[:icon])
-        else
-          item[:icon] # Assumiamo che sia già un componente renderizzato
-        end
+        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

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

@@ -2,7 +2,7 @@
 <% if link? %>
   <%= link_to @href, **link_attributes do %>
     <% if @icon && @icon_position == :left %>
-      <span class="mr-2"><%= render_icon(@icon) %></span>
+      <span class="bui-btn-icon-left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
@@ -10,7 +10,7 @@
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="ml-2"><%= render_icon(@icon) %></span>
+      <span class="bui-btn-icon-right"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
@@ -18,7 +18,7 @@
 <% else %>
   <%= tag.button(**button_attributes) do %>
     <% if @icon && @icon_position == :left %>
-      <span class="mr-2"><%= render_icon(@icon) %></span>
+      <span class="bui-btn-icon-left"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
@@ -26,7 +26,7 @@
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="ml-2"><%= render_icon(@icon) %></span>
+      <span class="bui-btn-icon-right"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>