better_ui_tmp 0.5.1

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

@@ -0,0 +1,248 @@
+module BetterUi
+  module General
+    module Badge
+      class Component < ViewComponent::Base
+        attr_reader :label, :theme, :size, :shape, :style, :variant, :icon, :icon_position, :classes, :id
+
+        # Classi base sempre presenti
+        BADGE_BASE_CLASSES = "inline-flex items-center justify-center font-medium"
+
+        # Classi per elementi interni
+        BADGE_ICON_LEFT_CLASSES = "flex-shrink-0 -ml-0.5 mr-1.5"
+        BADGE_ICON_RIGHT_CLASSES = "flex-shrink-0 -mr-0.5 ml-1.5"
+        BADGE_TEXT_CLASSES = "whitespace-nowrap"
+        BADGE_DOT_CLASSES = "h-2 w-2 rounded-full mr-1.5"
+
+        # Temi di badge con stile FILLED - classi Tailwind dirette
+        BADGE_THEME_FILLED_CLASSES = {
+          default: "bg-black text-white",
+          white: "bg-white text-black",
+          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",
+          gray: "bg-gray-500 text-white"
+        }
+
+        # Temi di badge con stile OUTLINE - classi Tailwind dirette
+        BADGE_THEME_OUTLINE_CLASSES = {
+          default: "border border-black text-black bg-transparent",
+          white: "border border-gray-300 text-gray-700 bg-transparent",
+          red: "border border-red-500 text-red-500 bg-transparent",
+          rose: "border border-rose-500 text-rose-500 bg-transparent",
+          orange: "border border-orange-500 text-orange-500 bg-transparent",
+          green: "border border-green-500 text-green-500 bg-transparent",
+          blue: "border border-blue-500 text-blue-500 bg-transparent",
+          yellow: "border border-yellow-500 text-yellow-500 bg-transparent",
+          violet: "border border-violet-500 text-violet-500 bg-transparent",
+          gray: "border border-gray-500 text-gray-500 bg-transparent"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        BADGE_SIZE_CLASSES = {
+          small: "text-xs px-2 py-0.5",
+          medium: "text-sm px-2.5 py-0.5",
+          large: "text-sm px-3 py-1"
+        }
+
+        # Forme con classi Tailwind dirette
+        BADGE_SHAPE_CLASSES = {
+          square: "rounded-md",
+          rounded: "rounded-full"
+        }
+
+        # Colori dot per ogni tema
+        BADGE_DOT_COLOR_CLASSES = {
+          default: "bg-gray-500",
+          white: "bg-gray-400",
+          red: "bg-red-700",
+          rose: "bg-rose-700",
+          orange: "bg-orange-700",
+          green: "bg-green-700",
+          blue: "bg-blue-700",
+          yellow: "bg-yellow-700",
+          violet: "bg-violet-700",
+          gray: "bg-gray-700"
+        }
+
+        # @param label [String] Testo del badge
+        # @param theme [Symbol] default, white, red, rose, orange, green, blue, yellow, violet, gray
+        # @param size [Symbol] small, medium, large
+        # @param shape [Symbol] square, rounded
+        # @param style [Symbol] filled, outline
+        # @param variant [Symbol] nil, notification, counter, dot
+        # @param icon [String] Nome icona (opzionale)
+        # @param icon_position [Symbol] left, right
+        # @param html_options [Hash] Opzioni HTML aggiuntive
+        def initialize(
+          label: nil,
+          theme: :white,
+          size: :medium,
+          shape: :rounded,
+          style: :filled,
+          variant: nil,
+          icon: nil,
+          icon_position: :left,
+          classes: nil,
+          id: nil,
+          **html_options
+        )
+          @label = label
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @shape = shape.to_sym
+          @style = style.to_sym
+          @variant = variant.present? ? variant.to_sym : nil
+          @icon = icon
+          @icon_position = icon_position.to_sym
+          @classes = classes
+          @id = id
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Combina tutte le classi
+        def combined_classes
+          [
+            BADGE_BASE_CLASSES,
+            get_theme_class,
+            get_size_class,
+            get_shape_class,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def get_theme_class
+          if @style == :outline
+            BADGE_THEME_OUTLINE_CLASSES[@theme] || BADGE_THEME_OUTLINE_CLASSES[:white]
+          else
+            BADGE_THEME_FILLED_CLASSES[@theme] || BADGE_THEME_FILLED_CLASSES[:white]
+          end
+        end
+
+        def get_size_class
+          BADGE_SIZE_CLASSES[@size] || BADGE_SIZE_CLASSES[:medium]
+        end
+
+        def get_shape_class
+          BADGE_SHAPE_CLASSES[@shape] || BADGE_SHAPE_CLASSES[:rounded]
+        end
+
+        # Restituisce gli attributi per il badge
+        def badge_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
+
+        def icon_classes
+          if @icon_position == :left
+            BADGE_ICON_LEFT_CLASSES
+          else
+            BADGE_ICON_RIGHT_CLASSES
+          end
+        end
+
+        def text_classes
+          BADGE_TEXT_CLASSES
+        end
+
+        def dot_classes
+          [
+            BADGE_DOT_CLASSES,
+            get_dot_color_class
+          ].compact.join(" ")
+        end
+
+        def get_dot_color_class
+          BADGE_DOT_COLOR_CLASSES[@theme] || BADGE_DOT_COLOR_CLASSES[:white]
+        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
+
+        private
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_shape
+          validate_style
+          validate_variant
+          validate_icon_position
+        end
+
+        def validate_theme
+          unless BADGE_THEME_FILLED_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{BADGE_THEME_FILLED_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless BADGE_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{BADGE_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_shape
+          unless BADGE_SHAPE_CLASSES.keys.include?(@shape)
+            raise ArgumentError, "La forma deve essere una tra: #{BADGE_SHAPE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_style
+          valid_styles = [:filled, :outline]
+          unless valid_styles.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{valid_styles.join(', ')}"
+          end
+        end
+
+        def validate_variant
+          return if @variant.nil?
+
+          valid_variants = [:notification, :counter, :dot]
+          unless valid_variants.include?(@variant)
+            raise ArgumentError, "La variante deve essere una tra: #{valid_variants.join(', ')}"
+          end
+        end
+
+        def validate_icon_position
+          valid_positions = [:left, :right]
+          unless valid_positions.include?(@icon_position)
+            raise ArgumentError, "La posizione dell'icona deve essere una tra: #{valid_positions.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+<nav <%= tag.attributes(breadcrumb_attributes) %>>
+  <ol class="<%= BREADCRUMB_LIST_CLASSES %>">
+    <% @items.each_with_index do |item, index| %>
+      <li class="<%= BREADCRUMB_ITEM_CLASSES %>">
+        <%= render link_for_item(item, active: last_item?(index)) %>
+        
+        <% unless last_item?(index) %>
+          <span class="<%= separator_classes %>" aria-hidden="true">
+            <%= separator_text %>
+          </span>
+        <% end %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

@@ -0,0 +1,186 @@
+module BetterUi
+  module General
+    module Breadcrumb
+      class Component < ViewComponent::Base
+        attr_reader :items, :separator, :size, :theme, :classes, :html_options
+
+        # Classi base sempre presenti
+        BREADCRUMB_BASE_CLASSES = "flex items-center flex-wrap"
+
+        # Classi per lista e items
+        BREADCRUMB_LIST_CLASSES = "flex flex-wrap items-center"
+        BREADCRUMB_ITEM_CLASSES = "flex items-center"
+
+        # Temi di breadcrumb con classi Tailwind dirette
+        BREADCRUMB_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",
+          gray: "text-gray-900"
+        }
+
+        # Classi per separatori con temi
+        BREADCRUMB_SEPARATOR_THEME_CLASSES = {
+          default: "text-gray-500",
+          white: "text-gray-400",
+          red: "text-red-300",
+          rose: "text-rose-300",
+          orange: "text-orange-300",
+          green: "text-green-300",
+          blue: "text-blue-300",
+          yellow: "text-yellow-600",
+          violet: "text-violet-300",
+          gray: "text-gray-500"
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        BREADCRUMB_SIZE_CLASSES = {
+          small: "text-xs",
+          medium: "text-sm",
+          large: "text-base"
+        }
+
+        # Separatori predefiniti
+        BREADCRUMB_SEPARATOR_TYPES = {
+          slash: "/",
+          chevron: "›",
+          arrow: "→",
+          dot: "•",
+          pipe: "|"
+        }
+
+        # Inizializzazione del componente
+        def initialize(
+          items: [],
+          separator: :chevron, 
+          theme: :white,
+          size: :medium,
+          classes: nil,
+          **html_options
+        )
+          @items = items || []
+          @separator = separator.to_sym
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Restituisce il separatore come stringa
+        def separator_text
+          if BREADCRUMB_SEPARATOR_TYPES.key?(@separator)
+            BREADCRUMB_SEPARATOR_TYPES[@separator]
+          else
+            @separator.to_s
+          end
+        end
+
+        # Genera le classi per il container
+        def container_classes
+          [
+            BREADCRUMB_BASE_CLASSES,
+            get_theme_class,
+            get_size_class,
+            @classes,
+            @html_options[:class]
+          ].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::Link::Component.new(
+            label: label,
+            href: href,
+            theme: @theme,
+            size: @size,
+            icon: icon,
+            active: active
+          )
+        end
+
+        # Restituisce gli attributi per il breadcrumb
+        def breadcrumb_attributes
+          attrs = { 
+            "aria-label": "Breadcrumb",
+            class: container_classes
+          }
+
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Restituisce le classi CSS per il separatore
+        def separator_classes
+          [
+            "mx-2",
+            get_separator_theme_class
+          ].compact.join(" ")
+        end
+
+        def get_separator_theme_class
+          BREADCRUMB_SEPARATOR_THEME_CLASSES[@theme] || BREADCRUMB_SEPARATOR_THEME_CLASSES[:white]
+        end
+
+        # Verifica se rendere il componente
+        def render?
+          @items.present? && @items.length > 0
+        end
+
+        private
+
+        def get_theme_class
+          BREADCRUMB_THEME_CLASSES[@theme] || BREADCRUMB_THEME_CLASSES[:white]
+        end
+
+        def get_size_class
+          BREADCRUMB_SIZE_CLASSES[@size] || BREADCRUMB_SIZE_CLASSES[:medium]
+        end
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_separator
+        end
+
+        def validate_theme
+          unless BREADCRUMB_THEME_CLASSES.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{BREADCRUMB_THEME_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless BREADCRUMB_SIZE_CLASSES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{BREADCRUMB_SIZE_CLASSES.keys.join(', ')}"
+          end
+        end
+
+        def validate_separator
+          return if !@separator.is_a?(Symbol) || BREADCRUMB_SEPARATOR_TYPES.keys.include?(@separator)
+
+          raise ArgumentError, "Il separatore predefinito deve essere uno tra: #{BREADCRUMB_SEPARATOR_TYPES.keys.join(', ')}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+<%# Template per il bottone %>
+<% if link? %>
+  <%= link_to @href, **link_attributes do %>
+    <% if @icon && @icon_position == :left %>
+      <span class="flex-shrink-0 mr-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <% if @label %>
+      <span class="flex-grow"><%= @label %></span>
+    <% end %>
+    
+    <% if @icon && @icon_position == :right %>
+      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <%= content %>
+  <% end %>
+<% else %>
+  <%= tag.button(**button_attributes) do %>
+    <% if @icon && @icon_position == :left %>
+      <span class="flex-shrink-0 mr-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <% if @label %>
+      <span class="flex-grow"><%= @label %></span>
+    <% end %>
+    
+    <% if @icon && @icon_position == :right %>
+      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+    <% end %>
+    
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,214 @@
+module BetterUi
+  module General
+    module Button
+      class Component < ViewComponent::Base
+        attr_reader :label, :type, :size, :full_width, :disabled, 
+                    :icon, :icon_position, :href, :method, :data, :classes, :id, :rounded, :button_type, :html_options
+
+        # Classi base sempre presenti
+        BUTTON_BASE_CLASSES = "inline-flex items-center justify-center font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2"
+
+        # Temi di bottoni con classi Tailwind dirette
+        BUTTON_THEME = {
+          default: "bg-black text-white hover:bg-gray-900 focus:ring-gray-900",
+          white: "bg-white text-black border border-gray-300 hover:bg-gray-50 focus:ring-gray-400",
+          red: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500",
+          rose: "bg-rose-500 text-white hover:bg-rose-600 focus:ring-rose-500",
+          orange: "bg-orange-500 text-white hover:bg-orange-600 focus:ring-orange-500",
+          green: "bg-green-500 text-white hover:bg-green-600 focus:ring-green-500",
+          blue: "bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500",
+          yellow: "bg-yellow-500 text-black hover:bg-yellow-600 focus:ring-yellow-500",
+          violet: "bg-violet-500 text-white hover:bg-violet-600 focus:ring-violet-500",
+          purple: "bg-purple-500 text-white hover:bg-purple-600 focus:ring-purple-500",
+        }
+
+        # Dimensioni con classi Tailwind dirette
+        BUTTON_SIZES = {
+          small: "px-2.5 py-1.5 text-xs",
+          medium: "px-4 py-2 text-sm",
+          large: "px-6 py-3 text-base"
+        }
+        
+        # Border radius con classi Tailwind dirette
+        BUTTON_RADIUS = {
+          none: "rounded-none",
+          small: "rounded-md",
+          medium: "rounded-lg",
+          large: "rounded-xl",
+          full: "rounded-full"
+        }
+
+        # Inizializzazione del componente
+        def initialize(
+          label: nil,
+          type: :white,
+          size: :medium,
+          full_width: false,
+          disabled: false,
+          icon: nil,
+          icon_position: :left,
+          href: nil,
+          method: nil,
+          data: {},
+          classes: nil,
+          id: nil,
+          rounded: :medium,
+          button_type: :button,
+          **html_options
+        )
+          @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
+          @button_type = button_type.to_sym
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Determina se il bottone è un link o un button
+        def link?
+          @href.present?
+        end
+
+        # Combina tutte le classi
+        def combined_classes
+          [
+            BUTTON_BASE_CLASSES,
+            get_button_type_classes,
+            get_button_size_classes,
+            get_border_radius_class,
+            @full_width ? "w-full" : nil,
+            @disabled ? "opacity-50 cursor-not-allowed" : nil,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+        
+        def get_button_type_classes
+          BUTTON_THEME[@type] || BUTTON_THEME[:white]
+        end
+        
+        def get_border_radius_class
+          BUTTON_RADIUS[@rounded] || BUTTON_RADIUS[:medium]
+        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_type,
+            id: @id
+          }
+          
+          attrs[:disabled] = true if @disabled
+          attrs[:data] = @data if @data.present?
+          
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+          
+          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
+          
+          # Aggiungi altri attributi HTML se presenti
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+          
+          attrs
+        end
+        
+        def button_type
+          @button_type || 'button'
+        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::Icon::Component.new(
+            name: icon_name,
+            size: icon_size,
+            fixed_width: true
+          )
+        end
+
+        # Verifica se rendere il componente
+        def render?
+          @label.present? || @icon.present? || content.present?
+        end
+
+        private
+
+        def validate_params
+          validate_type
+          validate_size
+          validate_icon_position
+          validate_rounded
+        end
+
+        def validate_type
+          unless BUTTON_THEME.keys.include?(@type)
+            raise ArgumentError, "Il tipo deve essere uno tra: #{BUTTON_THEME.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless BUTTON_SIZES.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{BUTTON_SIZES.keys.join(', ')}"
+          end
+        end
+
+        def validate_icon_position
+          unless [:left, :right].include?(@icon_position)
+            raise ArgumentError, "La posizione dell'icona deve essere :left o :right"
+          end
+        end
+
+        def validate_rounded
+          unless BUTTON_RADIUS.keys.include?(@rounded)
+            raise ArgumentError, "Il bordo deve essere uno tra: #{BUTTON_RADIUS.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end