better_ui_tmp 0.5.1

data/app/components/better_ui/general/alert/component.rb

@@ -0,0 +1,242 @@
+module BetterUi
+  module General
+    module Alert
+      class Component < ViewComponent::Base
+        # Classi base sempre presenti
+        ALERT_BASE_CLASSES = "flex p-4 mb-4 border"
+
+        # Classi per elementi interni
+        ALERT_ICON_CLASSES = "flex-shrink-0 mr-3 w-5 h-5"
+        ALERT_ICON_RIGHT_CLASSES = "flex-shrink-0 ml-3 mr-0"
+        ALERT_CONTENT_CLASSES = "flex-1"
+        ALERT_TITLE_CLASSES = "font-medium mb-1"
+        ALERT_MESSAGE_CLASSES = "text-sm"
+        ALERT_CLOSE_CLASSES = "ml-auto -my-1.5 -mr-1.5 p-1.5 rounded-md focus:ring-2 focus:ring-offset-2 hover:bg-gray-100"
+
+        # Temi di alert con classi Tailwind dirette
+        ALERT_THEME_CLASSES = {
+          default: "bg-black text-white border-gray-900",
+          white: "bg-white text-black border-gray-200",
+          red: "bg-red-500 text-white border-red-600",
+          rose: "bg-rose-500 text-white border-rose-600",
+          orange: "bg-orange-500 text-white border-orange-600",
+          green: "bg-green-500 text-white border-green-600",
+          blue: "bg-blue-500 text-white border-blue-600",
+          yellow: "bg-yellow-500 text-black border-yellow-600",
+          violet: "bg-violet-500 text-white border-violet-600"
+        }
+
+        # Colori icone per ogni tema
+        ALERT_ICON_THEME_CLASSES = {
+          default: "text-white",
+          white: "text-black",
+          red: "text-white",
+          rose: "text-white",
+          orange: "text-white",
+          green: "text-white",
+          blue: "text-white",
+          yellow: "text-black",
+          violet: "text-white"
+        }
+
+        # Colori close button per ogni tema
+        ALERT_CLOSE_THEME_CLASSES = {
+          default: "text-white focus:ring-gray-600",
+          white: "text-black focus:ring-gray-400",
+          red: "text-white focus:ring-red-400",
+          rose: "text-white focus:ring-rose-400",
+          orange: "text-white focus:ring-orange-400",
+          green: "text-white focus:ring-green-400",
+          blue: "text-white focus:ring-blue-400",
+          yellow: "text-black focus:ring-yellow-400",
+          violet: "text-white focus:ring-violet-400"
+        }
+
+        # Border radius con classi Tailwind dirette
+        ALERT_RADIUS_CLASSES = {
+          none: "rounded-none",
+          small: "rounded-sm",
+          medium: "rounded-md",
+          large: "rounded-lg",
+          full: "rounded-full"
+        }
+
+        # Classi per layout quando icon è a destra
+        ALERT_ICON_RIGHT_LAYOUT_CLASSES = "flex-row-reverse"
+        ALERT_CONTENT_RIGHT_CLASSES = "text-right"
+
+        # Classi per alert dismissible
+        ALERT_DISMISSIBLE_CLASSES = "pr-12 relative"
+        ALERT_CLOSE_POSITION_CLASSES = "absolute right-4 top-4"
+
+        # Livelli di importanza con attributi ARIA
+        IMPORTANCE_LEVELS = {
+          high: { role: "alert", "aria-live": "assertive" },
+          medium: { role: "status", "aria-live": "polite" },
+          low: { role: "status", "aria-live": "polite" }
+        }
+
+        # @param title [String] titolo dell'alert (opzionale)
+        # @param message [String] contenuto dell'alert
+        # @param theme [Symbol] :default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet
+        # @param icon [String] nome dell'icona (opzionale)
+        # @param icon_position [Symbol] :left, :right posizione dell'icona
+        # @param dismissible [Boolean] se l'alert può essere chiuso
+        # @param rounded [Symbol] :none, :small, :medium, :large, :full arrotondamento degli angoli
+        # @param importance [Symbol] :high, :medium, :low livello di importanza per accessibilità
+        # @param html_content [Boolean] se il messaggio contiene HTML
+        # @param classes [String] classi CSS aggiuntive
+        # @param html_options [Hash] opzioni HTML per il container
+        def initialize(
+          title: nil,
+          message: nil,
+          theme: :white,
+          icon: nil,
+          icon_position: :left,
+          dismissible: false,
+          rounded: :medium,
+          importance: :medium,
+          html_content: false,
+          classes: nil,
+          **html_options
+        )
+          @title = title
+          @message = message
+          @theme = theme.to_sym
+          @icon = icon
+          @icon_position = icon_position.to_sym
+          @dismissible = dismissible
+          @rounded = rounded.to_sym
+          @importance = importance.to_sym
+          @html_content = html_content
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        def default_icon
+          case @theme
+          when :default then "bell"
+          when :white then "information-circle"
+          when :red, :rose then "exclamation-circle"
+          when :orange then "bell"
+          when :green then "check-circle"
+          when :blue then "information-circle"
+          when :yellow then "exclamation-triangle"
+          when :violet then "shield-exclamation"
+          else "information-circle"
+          end
+        end
+
+        # Combina tutte le classi
+        def combined_classes
+          [
+            ALERT_BASE_CLASSES,
+            get_theme_class,
+            get_border_radius_class,
+            get_icon_position_class,
+            @dismissible ? ALERT_DISMISSIBLE_CLASSES : nil,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi per l'alert
+        def alert_attributes
+          attrs = { 
+            class: combined_classes
+          }
+
+          # Aggiungi attributi ARIA in base al livello di importanza
+          importance_attrs = IMPORTANCE_LEVELS[@importance] || IMPORTANCE_LEVELS[:medium]
+          importance_attrs.each do |key, value|
+            attrs[key] = value
+          end
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Genera le classi del tema
+        def get_theme_class
+          ALERT_THEME_CLASSES[@theme] || ALERT_THEME_CLASSES[:white]
+        end
+
+        # Genera le classi per il border radius
+        def get_border_radius_class
+          ALERT_RADIUS_CLASSES[@rounded] || ALERT_RADIUS_CLASSES[:medium]
+        end
+
+        # Genera la classe per la posizione dell'icona (layout)
+        def get_icon_position_class
+          @icon_position == :right ? ALERT_ICON_RIGHT_LAYOUT_CLASSES : nil
+        end
+
+        # Genera le classi per l'icona
+        def get_icon_classes
+          if @icon_position == :right
+            ALERT_ICON_RIGHT_CLASSES
+          else
+            ALERT_ICON_CLASSES
+          end
+        end
+
+        # Genera le classi per il contenuto
+        def get_content_classes
+          if @icon_position == :right
+            [ALERT_CONTENT_CLASSES, ALERT_CONTENT_RIGHT_CLASSES].join(" ")
+          else
+            ALERT_CONTENT_CLASSES
+          end
+        end
+
+        # Genera le classi per l'icona del tema
+        def get_icon_theme_class
+          ALERT_ICON_THEME_CLASSES[@theme] || ALERT_ICON_THEME_CLASSES[:white]
+        end
+
+        # Genera le classi per il close button
+        def get_close_classes
+          base_classes = ALERT_CLOSE_CLASSES
+          theme_classes = ALERT_CLOSE_THEME_CLASSES[@theme] || ALERT_CLOSE_THEME_CLASSES[:white]
+          position_classes = @dismissible ? ALERT_CLOSE_POSITION_CLASSES : nil
+
+          [base_classes, theme_classes, position_classes].compact.join(" ")
+        end
+
+        private
+
+        def validate_params
+          # Validazione tema
+          valid_themes = ALERT_THEME_CLASSES.keys
+          unless valid_themes.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{valid_themes.join(', ')}"
+          end
+
+          # Validazione border radius
+          valid_radius = ALERT_RADIUS_CLASSES.keys
+          unless valid_radius.include?(@rounded)
+            raise ArgumentError, "Il border radius deve essere uno tra: #{valid_radius.join(', ')}"
+          end
+
+          # Validazione posizione icona
+          valid_positions = [:left, :right]
+          unless valid_positions.include?(@icon_position)
+            raise ArgumentError, "La posizione dell'icona deve essere una tra: #{valid_positions.join(', ')}"
+          end
+
+          # Validazione livello di importanza
+          valid_importance = IMPORTANCE_LEVELS.keys
+          unless valid_importance.include?(@importance)
+            raise ArgumentError, "Il livello di importanza deve essere uno tra: #{valid_importance.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/avatar/component.html.erb

@@ -0,0 +1,20 @@
+<%# Template per l'avatar %>
+<%= tag.div(**avatar_attributes) do %>
+  <% if show_image? %>
+    <%= tag.img(
+      src: @src,
+      alt: @name || 'Avatar',
+      class: img_classes,
+      width: pixel_size,
+      height: pixel_size
+    ) %>
+  <% else %>
+    <%= tag.div(class: placeholder_classes) do %>
+      <%= initials %>
+    <% end %>
+  <% end %>
+
+  <% if show_status? %>
+    <%= tag.span(class: status_indicator_classes) %>
+  <% end %>
+<% end %>

data/app/components/better_ui/general/avatar/component.rb

@@ -0,0 +1,301 @@
+module BetterUi
+  module General
+    module Avatar
+      class Component < ViewComponent::Base
+        attr_reader :name, :src, :size, :shape, :status, :status_position, :theme, :style, :classes, :id
+
+        # Classi base sempre presenti
+        AVATAR_BASE_CLASSES = "relative inline-flex items-center justify-center flex-shrink-0 overflow-hidden"
+
+        # Classi per elementi interni
+        AVATAR_IMG_CLASSES = "h-full w-full object-cover"
+        AVATAR_PLACEHOLDER_BASE_CLASSES = "flex items-center justify-center h-full w-full font-medium"
+        AVATAR_STATUS_BASE_CLASSES = "absolute rounded-full border-2 border-white"
+
+        # Dimensioni container con classi Tailwind dirette
+        AVATAR_SIZE_CLASSES = {
+          xxsmall: "h-5 w-5",
+          xsmall: "h-6 w-6",
+          small: "h-8 w-8",
+          medium: "h-10 w-10",
+          large: "h-12 w-12",
+          xlarge: "h-16 w-16",
+          xxlarge: "h-24 w-24"
+        }
+
+        # Dimensioni testo placeholder
+        AVATAR_PLACEHOLDER_SIZE_CLASSES = {
+          xxsmall: "text-xs",
+          xsmall: "text-xs",
+          small: "text-sm",
+          medium: "text-base",
+          large: "text-lg",
+          xlarge: "text-xl",
+          xxlarge: "text-2xl"
+        }
+
+        # Forme con classi Tailwind dirette
+        AVATAR_SHAPE_CLASSES = {
+          circle: "rounded-full",
+          square: "rounded-none",
+          rounded: "rounded-lg"
+        }
+
+        # Temi placeholder con classi Tailwind dirette
+        AVATAR_PLACEHOLDER_THEME_CLASSES = {
+          default: "bg-black text-white",
+          white: "bg-white text-black border border-gray-300",
+          red: "bg-red-500 text-white",
+          rose: "bg-rose-500 text-white",
+          orange: "bg-orange-500 text-white",
+          green: "bg-green-500 text-white",
+          blue: "bg-blue-500 text-white",
+          yellow: "bg-yellow-500 text-black",
+          violet: "bg-violet-500 text-white"
+        }
+
+        # Stati online con classi Tailwind dirette
+        AVATAR_STATUS_THEME_CLASSES = {
+          online: "bg-green-400",
+          offline: "bg-gray-400",
+          busy: "bg-red-400",
+          away: "bg-yellow-400"
+        }
+
+        # Dimensioni indicatore stato
+        AVATAR_STATUS_SIZE_CLASSES = {
+          xxsmall: "h-1 w-1",
+          xsmall: "h-1.5 w-1.5",
+          small: "h-2 w-2",
+          medium: "h-2.5 w-2.5",
+          large: "h-3 w-3",
+          xlarge: "h-3.5 w-3.5",
+          xxlarge: "h-4 w-4"
+        }
+
+        # Posizioni dell'indicatore di stato
+        AVATAR_STATUS_POSITION_CLASSES = {
+          bottom_right: "bottom-0 right-0",
+          bottom_left: "bottom-0 left-0",
+          top_right: "top-0 right-0",
+          top_left: "top-0 left-0"
+        }
+
+        # Stili disponibili (mantenuto per compatibilità)
+        AVATAR_STYLE_CLASSES = {
+          filled: "",
+          outline: "border-2 border-gray-300",
+          light: "opacity-75"
+        }
+
+        def initialize(
+          name: nil,
+          src: nil,
+          size: :medium,
+          shape: :circle,
+          status: nil,
+          status_position: :bottom_right,
+          theme: :white,
+          style: :filled,
+          classes: nil,
+          id: nil,
+          **html_options
+        )
+          @name = name
+          @src = src
+          @size = size.to_sym
+          @shape = shape.to_sym
+          @status = status.present? ? status.to_sym : nil
+          @status_position = status_position.to_sym
+          @theme = theme.to_sym
+          @style = style.to_sym
+          @classes = classes
+          @id = id
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi per il container
+        def combined_classes
+          [
+            AVATAR_BASE_CLASSES,
+            get_size_class,
+            get_shape_class,
+            get_style_class,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Classi per il placeholder
+        def placeholder_classes
+          [
+            AVATAR_PLACEHOLDER_BASE_CLASSES,
+            get_placeholder_theme_class,
+            get_placeholder_size_class,
+            get_shape_class
+          ].compact.join(" ")
+        end
+
+        # Classi per l'immagine
+        def img_classes
+          [
+            AVATAR_IMG_CLASSES,
+            get_shape_class
+          ].compact.join(" ")
+        end
+
+        # Classi per l'indicatore di stato
+        def status_indicator_classes
+          [
+            AVATAR_STATUS_BASE_CLASSES,
+            get_status_theme_class,
+            get_status_size_class,
+            get_status_position_class
+          ].compact.join(" ")
+        end
+
+        def get_size_class
+          AVATAR_SIZE_CLASSES[@size] || AVATAR_SIZE_CLASSES[:medium]
+        end
+
+        def get_shape_class
+          AVATAR_SHAPE_CLASSES[@shape] || AVATAR_SHAPE_CLASSES[:circle]
+        end
+
+        def get_style_class
+          AVATAR_STYLE_CLASSES[@style] || AVATAR_STYLE_CLASSES[:filled]
+        end
+
+        def get_placeholder_theme_class
+          AVATAR_PLACEHOLDER_THEME_CLASSES[@theme] || AVATAR_PLACEHOLDER_THEME_CLASSES[:white]
+        end
+
+        def get_placeholder_size_class
+          AVATAR_PLACEHOLDER_SIZE_CLASSES[@size] || AVATAR_PLACEHOLDER_SIZE_CLASSES[:medium]
+        end
+
+        def get_status_theme_class
+          AVATAR_STATUS_THEME_CLASSES[@status] || ""
+        end
+
+        def get_status_size_class
+          AVATAR_STATUS_SIZE_CLASSES[@size] || AVATAR_STATUS_SIZE_CLASSES[:medium]
+        end
+
+        def get_status_position_class
+          AVATAR_STATUS_POSITION_CLASSES[@status_position] || AVATAR_STATUS_POSITION_CLASSES[:bottom_right]
+        end
+
+        # Restituisce gli attributi per l'avatar
+        def avatar_attributes
+          attrs = {
+            class: combined_classes,
+            id: @id
+          }
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Determina se mostrare l'indicatore di stato
+        def show_status?
+          @status.present? && AVATAR_STATUS_THEME_CLASSES.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 (per attributi width/height img)
+        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
+
+        private
+
+        def validate_params
+          validate_size
+          validate_shape
+          validate_theme
+          validate_style
+          validate_status
+          validate_status_position
+        end
+
+        def validate_size
+          unless AVATAR_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{AVATAR_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_shape
+          unless AVATAR_SHAPE_CLASSES.keys.include?(@shape)
+            raise ArgumentError, "La forma deve essere una tra: #{AVATAR_SHAPE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_theme
+          unless AVATAR_PLACEHOLDER_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{AVATAR_PLACEHOLDER_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_style
+          unless AVATAR_STYLE_CLASSES.keys.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{AVATAR_STYLE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_status
+          return if @status.nil?
+
+          unless AVATAR_STATUS_THEME_CLASSES.keys.include?(@status)
+            raise ArgumentError, "Lo stato deve essere uno tra: #{AVATAR_STATUS_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_status_position
+          unless AVATAR_STATUS_POSITION_CLASSES.keys.include?(@status_position)
+            raise ArgumentError, "La posizione dello stato deve essere una tra: #{AVATAR_STATUS_POSITION_CLASSES.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/badge/component.html.erb

@@ -0,0 +1,23 @@
+<span <%= tag.attributes(badge_attributes) %>>
+  <% if @variant == :dot %>
+    <span class="<%= dot_classes %>"></span>
+  <% end %>
+  
+  <% if @icon && @icon_position == :left %>
+    <span class="<%= icon_classes %>">
+      <%= render_icon(@icon) %>
+    </span>
+  <% end %>
+  
+  <% if @label.present? %>
+    <span class="<%= text_classes %>"><%= @label %></span>
+  <% end %>
+  
+  <% if @icon && @icon_position == :right %>
+    <span class="<%= icon_classes %>">
+      <%= render_icon(@icon) %>
+    </span>
+  <% end %>
+  
+  <%= content %>
+</span>