better_ui 0.3.0 → 0.5.1

data/app/components/better_ui/application/toast_component.rb

@@ -0,0 +1,223 @@
+module BetterUi
+  module Application
+    class ToastComponent < ViewComponent::Base
+      attr_reader :title, :message, :variant, :icon, :dismissible, :classes, :data, :position, :duration, :auto_hide, :rounded
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        default: {
+          bg: "bg-black",
+          border: "border-gray-900",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-gray-800"
+        },
+        white: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-gray-100"
+        },
+        red: {
+          bg: "bg-red-500",
+          border: "border-red-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-red-600"
+        },
+        rose: {
+          bg: "bg-rose-500",
+          border: "border-rose-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-rose-600"
+        },
+        orange: {
+          bg: "bg-orange-500",
+          border: "border-orange-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-orange-600"
+        },
+        green: {
+          bg: "bg-green-500",
+          border: "border-green-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-green-600"
+        },
+        blue: {
+          bg: "bg-blue-500",
+          border: "border-blue-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-blue-600"
+        },
+        yellow: {
+          bg: "bg-yellow-500",
+          border: "border-yellow-600",
+          title: "text-black",
+          text: "text-black",
+          icon: "text-black",
+          close: "text-black hover:bg-yellow-600"
+        },
+        violet: {
+          bg: "bg-violet-500",
+          border: "border-violet-600",
+          title: "text-white",
+          text: "text-white",
+          icon: "text-white",
+          close: "text-white hover:bg-violet-600"
+        }
+      }
+
+      # Icone predefinite per ciascuna variante
+      DEFAULT_ICONS = {
+        default: "bell",
+        white: "info-circle",
+        red: "exclamation-circle",
+        rose: "exclamation-circle",
+        orange: "bell",
+        green: "check-circle",
+        blue: "info-circle",
+        yellow: "exclamation-triangle",
+        violet: "shield-exclamation"
+      }
+
+      # Posizioni possibili per i toast
+      POSITIONS = {
+        "top-right": "top-right",
+        "top-left": "top-left",
+        "bottom-right": "bottom-right",
+        "bottom-left": "bottom-left",
+        "top-center": "top-center",
+        "bottom-center": "bottom-center"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        title: nil,
+        message: nil,
+        variant: :default,
+        icon: nil, 
+        dismissible: true,
+        classes: nil,
+        data: {},
+        position: :"top-right",
+        duration: 5000,
+        auto_hide: true,
+        rounded: :sm
+      )
+        @title = title
+        @message = message
+        @variant = variant.to_sym
+        @icon = icon
+        @dismissible = dismissible
+        @classes = classes
+        @data = data || {}
+        @position = position.to_sym
+        @duration = duration
+        @auto_hide = auto_hide
+        @rounded = rounded.to_sym
+
+        # Aggiungiamo dati per il comportamento del toast
+        @data[:controller] = "toast" if @data[:controller].blank?
+        @data[:toast_duration_value] = @duration if @auto_hide
+        @data[:toast_auto_hide_value] = @auto_hide.to_s
+        @data[:toast_position_value] = @position.to_s
+      end
+
+      # Genera l'icona in base alla variante se non specificata
+      def effective_icon
+        return @icon if @icon.present?
+        DEFAULT_ICONS[@variant] || DEFAULT_ICONS[:default]
+      end
+
+      # Genera le classi per il container
+      def container_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        position_class = POSITIONS.fetch(@position, POSITIONS[:"top-right"])
+        
+        [
+          "fixed z-50 p-4 border shadow-lg",
+          get_border_radius_class,
+          "transform transition-transform duration-300",
+          "data-toast-enter-from-class='translate-y-2 opacity-0'",
+          "data-toast-enter-to-class='translate-y-0 opacity-100'",
+          "data-toast-leave-from-class='translate-y-0 opacity-100'",
+          "data-toast-leave-to-class='translate-y-2 opacity-0'",
+          styles[:bg],
+          styles[:border],
+          position_class,
+          "min-w-[20rem] max-w-sm",
+          "flex items-start",
+          @classes
+        ].compact.join(" ")
+      end
+
+      # Genera il border-radius
+      def get_border_radius_class
+        ThemeHelper::BORDER_RADIUS[@rounded] || ThemeHelper::BORDER_RADIUS[:sm]
+      end
+
+      # Genera le classi per il titolo
+      def title_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "font-medium",
+          styles[:title]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il messaggio
+      def message_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "mt-1",
+          styles[:text]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'icona
+      def icon_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "flex-shrink-0",
+          "mr-3 mt-0.5",
+          styles[:icon]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il pulsante di chiusura
+      def close_button_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:default])
+        
+        [
+          "ml-auto -mr-1.5 -mt-1.5 inline-flex h-8 w-8 rounded-lg p-1.5 focus:ring-2 focus:ring-gray-400",
+          styles[:close]
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per il contenuto
+      def content_classes
+        "flex-1"
+      end
+
+      # Verifica se il componente deve essere reso
+      def render?
+        @title.present? || @message.present? || content.present?
+      end
+    end
+  end
+end 

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

@@ -0,0 +1,19 @@
+<div <%= avatar_attributes.to_s.html_safe %>>
+  <% if show_image? %>
+    <img 
+      src="<%= @src %>" 
+      alt="<%= @name || 'Avatar' %>" 
+      class="bui-avatar__image"
+      width="<%= pixel_size %>"
+      height="<%= pixel_size %>"
+    >
+  <% else %>
+    <div class="bui-avatar__placeholder">
+      <%= initials %>
+    </div>
+  <% end %>
+  
+  <% if show_status? %>
+    <span class="<%= status_indicator_classes %>"></span>
+  <% end %>
+</div> 

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--xxsmall",
+        xsmall: "bui-avatar--xsmall",
+        small: "bui-avatar--small",
+        medium: "bui-avatar--medium",
+        large: "bui-avatar--large",
+        xlarge: "bui-avatar--xlarge",
+        xxlarge: "bui-avatar--xxlarge"
+      }
+      
+      # Forme disponibili
+      AVATAR_SHAPES = {
+        circle: "bui-avatar--circle",
+        square: "bui-avatar--square",
+        rounded: "bui-avatar--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--bottom-right",
+        bottom_left: "bui-avatar__status--bottom-left",
+        top_right: "bui-avatar__status--top-right",
+        top_left: "bui-avatar__status--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",
+          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 → badge_component.html.erb}

@@ -1,8 +1,4 @@
-<span <%= tag.attributes(badge_attributes) %>>
-  <% if @variant == :dot %>
-    <span class="<%= dot_classes %>"></span>
-  <% end %>
-  
+<span <%= badge_attributes.to_s.html_safe %>>
   <% if @icon && @icon_position == :left %>
     <span class="<%= icon_classes %>">
       <%= render_icon(@icon) %>
@@ -20,4 +16,4 @@
   <% end %>
   
   <%= content %>
-</span>
+</span> 

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

@@ -0,0 +1,135 @@
+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--small",
+        medium: "bui-badge--medium",
+        large: "bui-badge--large"
+      }
+      
+      # Border radius disponibili
+      BADGE_RADIUS = {
+        none: "bui-badge--square",
+        small: "bui-badge--square",
+        medium: "bui-badge--square",
+        large: "bui-badge--square",
+        full: "bui-badge--pill"
+      }
+      
+      # 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
+      
+      def icon_classes
+        if @icon_position == :left
+          "bui-badge__icon bui-badge__icon--left"
+        else
+          "bui-badge__icon bui-badge__icon--right"
+        end
+      end
+      
+      def text_classes
+        "bui-badge__text"
+      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",
+          separator: "bui-breadcrumb__separator--default"
+        },
+        white: {
+          container: "bui-breadcrumb--white",
+          separator: "bui-breadcrumb__separator--white"
+        },
+        red: {
+          container: "bui-breadcrumb--red",
+          separator: "bui-breadcrumb__separator--red"
+        },
+        rose: {
+          container: "bui-breadcrumb--rose",
+          separator: "bui-breadcrumb__separator--rose"
+        },
+        orange: {
+          container: "bui-breadcrumb--orange",
+          separator: "bui-breadcrumb__separator--orange"
+        },
+        green: {
+          container: "bui-breadcrumb--green",
+          separator: "bui-breadcrumb__separator--green"
+        },
+        blue: {
+          container: "bui-breadcrumb--blue", 
+          separator: "bui-breadcrumb__separator--blue"
+        },
+        yellow: {
+          container: "bui-breadcrumb--yellow",
+          separator: "bui-breadcrumb__separator--yellow"
+        },
+        violet: {
+          container: "bui-breadcrumb--violet",
+          separator: "bui-breadcrumb__separator--violet"
+        }
+      }
+
+      # 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",
+          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