better_ui 0.3.0 → 0.4.0

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

@@ -1,170 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Dropdown
-      class Component < ViewComponent::Base
-        include BetterUi::General::Components::Icon::IconHelper
-        
-        attr_reader :trigger, :position, :theme, :size, :rounded, :animation, :classes, :html_options
-
-        # Classi base spostate nel template HTML per migliore leggibilità
-
-        # Temi per il trigger del dropdown con classi Tailwind dirette
-        DROPDOWN_TRIGGER_THEME = {
-          default: "bg-white border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-blue-500",
-          white: "bg-white border-gray-300 text-gray-900 hover:bg-gray-50 focus:ring-gray-500",
-          red: "bg-red-600 border-red-600 text-white hover:bg-red-700 focus:ring-red-500",
-          rose: "bg-rose-600 border-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500",
-          orange: "bg-orange-600 border-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500",
-          green: "bg-green-600 border-green-600 text-white hover:bg-green-700 focus:ring-green-500",
-          blue: "bg-blue-600 border-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
-          yellow: "bg-yellow-500 border-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500",
-          violet: "bg-violet-600 border-violet-600 text-white hover:bg-violet-700 focus:ring-violet-500"
-        }.freeze
-
-        # Dimensioni del trigger con classi Tailwind dirette
-        DROPDOWN_TRIGGER_SIZE = {
-          small: "px-3 py-1.5 text-sm",
-          medium: "px-4 py-2 text-sm",
-          large: "px-6 py-3 text-base"
-        }.freeze
-
-        # Border radius con classi Tailwind dirette
-        DROPDOWN_ROUNDED = {
-          none: "rounded-none",
-          small: "rounded-md",
-          medium: "rounded-lg",
-          large: "rounded-xl",
-          full: "rounded-full"
-        }.freeze
-
-        # Posizioni del menu dropdown
-        DROPDOWN_POSITION = {
-          bottom: "top-full left-0",
-          top: "bottom-full left-0",
-          left: "top-0 right-full mr-2",
-          right: "top-0 left-full ml-2"
-        }.freeze
-
-        # Animazioni del dropdown
-        DROPDOWN_ANIMATION = {
-          fade: "transition-opacity duration-150",
-          slide: "transition-all duration-150 transform",
-          none: ""
-        }.freeze
-
-        def initialize(
-          trigger:,
-          position: :bottom,
-          theme: :default,
-          size: :medium,
-          rounded: :medium,
-          animation: :fade,
-          classes: nil,
-          **html_options
-        )
-          @trigger = trigger
-          @position = position.to_sym
-          @theme = theme.to_sym
-          @size = size.to_sym
-          @rounded = rounded.to_sym
-          @animation = animation.to_sym
-          @classes = classes
-          @html_options = html_options
-
-          validate_params
-        end
-
-        # Restituisce solo le classi dinamiche per il trigger
-        def dynamic_trigger_classes
-          [
-            get_trigger_theme_classes,
-            get_trigger_size_classes,
-            get_trigger_rounded_classes
-          ].compact.join(" ")
-        end
-
-        # Restituisce solo le classi dinamiche per il menu
-        def dynamic_menu_classes
-          [
-            get_position_classes,
-            get_animation_classes,
-            get_menu_rounded_classes
-          ].compact.join(" ")
-        end
-
-        # Metodi per attributi rimossi - ora gestiti direttamente nel template HTML
-
-        # Verifica se rendere il componente
-        def render?
-          @trigger.present?
-        end
-
-        private
-
-        def get_trigger_theme_classes
-          DROPDOWN_TRIGGER_THEME[@theme] || DROPDOWN_TRIGGER_THEME[:default]
-        end
-
-        def get_trigger_size_classes
-          DROPDOWN_TRIGGER_SIZE[@size] || DROPDOWN_TRIGGER_SIZE[:medium]
-        end
-
-        def get_trigger_rounded_classes
-          DROPDOWN_ROUNDED[@rounded] || DROPDOWN_ROUNDED[:medium]
-        end
-
-        def get_menu_rounded_classes
-          DROPDOWN_ROUNDED[@rounded] || DROPDOWN_ROUNDED[:medium]
-        end
-
-        def get_position_classes
-          DROPDOWN_POSITION[@position] || DROPDOWN_POSITION[:bottom]
-        end
-
-        def get_animation_classes
-          DROPDOWN_ANIMATION[@animation] || DROPDOWN_ANIMATION[:fade]
-        end
-
-        def validate_params
-          validate_theme
-          validate_size
-          validate_rounded
-          validate_position
-          validate_animation
-        end
-
-        def validate_theme
-          unless DROPDOWN_TRIGGER_THEME.keys.include?(@theme)
-            raise ArgumentError, "Il tema deve essere uno tra: #{DROPDOWN_TRIGGER_THEME.keys.join(', ')}"
-          end
-        end
-
-        def validate_size
-          unless DROPDOWN_TRIGGER_SIZE.keys.include?(@size)
-            raise ArgumentError, "La dimensione deve essere una tra: #{DROPDOWN_TRIGGER_SIZE.keys.join(', ')}"
-          end
-        end
-
-        def validate_rounded
-          unless DROPDOWN_ROUNDED.keys.include?(@rounded)
-            raise ArgumentError, "Il border radius deve essere uno tra: #{DROPDOWN_ROUNDED.keys.join(', ')}"
-          end
-        end
-
-        def validate_position
-          unless DROPDOWN_POSITION.keys.include?(@position)
-            raise ArgumentError, "La posizione deve essere una tra: #{DROPDOWN_POSITION.keys.join(', ')}"
-          end
-        end
-
-        def validate_animation
-          unless DROPDOWN_ANIMATION.keys.include?(@animation)
-            raise ArgumentError, "L'animazione deve essere una tra: #{DROPDOWN_ANIMATION.keys.join(', ')}"
-          end
-        end
-      end
-    end
-  end
-end

data/app/components/better_ui/general/dropdown/divider_component.html.erb

@@ -1 +0,0 @@
-<div <%= tag.attributes(divider_attributes) %>></div>

data/app/components/better_ui/general/dropdown/divider_component.rb

@@ -1,41 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Dropdown
-      class DividerComponent < ViewComponent::Base
-        attr_reader :classes, :html_options
-
-        # Classi base per il divisore del dropdown
-        DROPDOWN_DIVIDER_CLASSES = "border-t border-gray-100 my-1"
-
-        def initialize(classes: nil, **html_options)
-          @classes = classes
-          @html_options = html_options
-        end
-
-        # Combina tutte le classi per il divisore
-        def divider_classes
-          [
-            DROPDOWN_DIVIDER_CLASSES,
-            @classes
-          ].compact.join(" ")
-        end
-
-        # Restituisce gli attributi per il divisore
-        def divider_attributes
-          attrs = {
-            class: divider_classes,
-            role: "separator"
-          }
-
-          @html_options.except(:class).each do |key, value|
-            attrs[key] = value
-          end
-
-          attrs
-        end
-      end
-    end
-  end
-end

data/app/components/better_ui/general/dropdown/item_component.html.erb

@@ -1,6 +0,0 @@
-<<%= tag_name %> <%= tag.attributes(item_attributes) %>>
-  <% if @icon.present? %>
-    <span class="mr-3 flex-shrink-0"><%= bui_icon(@icon, classes: "h-5 w-5") %></span>
-  <% end %>
-  <%= @text %>
-</<%= tag_name %>>

data/app/components/better_ui/general/dropdown/item_component.rb

@@ -1,119 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Dropdown
-      class ItemComponent < ViewComponent::Base
-        include BetterUi::General::Components::Icon::IconHelper
-        
-        attr_reader :text, :icon, :href, :theme, :disabled, :active, :classes, :html_options
-
-        # Classi base per l'elemento del dropdown
-        DROPDOWN_ITEM_BASE_CLASSES = "flex items-center w-full px-4 py-2 text-sm transition-colors"
-
-        # Temi per gli elementi del dropdown con classi Tailwind dirette
-        DROPDOWN_ITEM_THEME = {
-          default: "text-gray-700 hover:bg-gray-100 hover:text-gray-900",
-          white: "text-gray-900 hover:bg-gray-50",
-          red: "text-red-700 hover:bg-red-50 hover:text-red-900",
-          rose: "text-rose-700 hover:bg-rose-50 hover:text-rose-900",
-          orange: "text-orange-700 hover:bg-orange-50 hover:text-orange-900",
-          green: "text-green-700 hover:bg-green-50 hover:text-green-900",
-          blue: "text-blue-700 hover:bg-blue-50 hover:text-blue-900",
-          yellow: "text-yellow-700 hover:bg-yellow-50 hover:text-yellow-900",
-          violet: "text-violet-700 hover:bg-violet-50 hover:text-violet-900"
-        }.freeze
-
-        # Stati per gli elementi del dropdown
-        DROPDOWN_ITEM_STATE_DISABLED = "opacity-50 cursor-not-allowed pointer-events-none"
-        DROPDOWN_ITEM_STATE_ACTIVE = "bg-gray-100 text-gray-900"
-
-        def initialize(
-          text:,
-          icon: nil,
-          href: nil,
-          theme: :default,
-          disabled: false,
-          active: false,
-          classes: nil,
-          **html_options
-        )
-          @text = text
-          @icon = icon
-          @href = href
-          @theme = theme.to_sym
-          @disabled = disabled
-          @active = active
-          @classes = classes
-          @html_options = html_options
-
-          validate_params
-        end
-
-        # Combina tutte le classi per l'elemento
-        def item_classes
-          classes = [
-            DROPDOWN_ITEM_BASE_CLASSES,
-            get_theme_classes,
-            @classes
-          ]
-
-          classes << DROPDOWN_ITEM_STATE_DISABLED if @disabled
-          classes << DROPDOWN_ITEM_STATE_ACTIVE if @active
-
-          classes.compact.join(" ")
-        end
-
-        # Restituisce gli attributi per l'elemento
-        def item_attributes
-          attrs = {
-            class: item_classes,
-            role: "menuitem",
-            "data-bui-dropdown-target": "item"
-          }
-
-          if @href.present? && !@disabled
-            attrs[:href] = @href
-          end
-
-          if @disabled
-            attrs["aria-disabled"] = "true"
-            attrs[:tabindex] = "-1"
-          end
-
-          @html_options.except(:class).each do |key, value|
-            attrs[key] = value
-          end
-
-          attrs
-        end
-
-        # Determina se usare un link o un button
-        def tag_name
-          @href.present? && !@disabled ? :a : :button
-        end
-
-        # Verifica se rendere il componente
-        def render?
-          @text.present?
-        end
-
-        private
-
-        def get_theme_classes
-          DROPDOWN_ITEM_THEME[@theme] || DROPDOWN_ITEM_THEME[:default]
-        end
-
-        def validate_params
-          validate_theme
-        end
-
-        def validate_theme
-          unless DROPDOWN_ITEM_THEME.keys.include?(@theme)
-            raise ArgumentError, "Il tema deve essere uno tra: #{DROPDOWN_ITEM_THEME.keys.join(', ')}"
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,27 +0,0 @@
-<%# Form field component template %>
-<div class="<%= BASE_CLASSES %>">
-  <% if label.present? %>
-    <label for="<%= id %>" class="<%= LABEL_CLASSES %>">
-      <%= label %>
-      <% if required %>
-        <span class="<%= REQUIRED_CLASSES %>">*</span>
-      <% end %>
-    </label>
-  <% end %>
-
-  <div class="mt-1">
-    <%= content %>
-  </div>
-
-  <% if error.present? %>
-    <div class="<%= ERROR_CLASSES %>">
-      <%= error %>
-    </div>
-  <% end %>
-
-  <% if help_text.present? %>
-    <div class="<%= HELP_TEXT_CLASSES %>">
-      <%= help_text %>
-    </div>
-  <% end %>
-</div> 

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

@@ -1,37 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Field
-      class Component < ViewComponent::Base
-        attr_reader :label, :name, :required, :error, :help_text, :id
-
-        renders_one :input
-
-        BASE_CLASSES = "flex flex-col space-y-2"
-        LABEL_CLASSES = "text-sm font-medium text-gray-700"
-        REQUIRED_CLASSES = "text-red-500 ml-1"
-        ERROR_CLASSES = "text-sm text-red-600 mt-1"
-        HELP_TEXT_CLASSES = "text-sm text-gray-500 mt-1"
-
-        def initialize(label:, name:, required: false, error: nil, help_text: nil, id: nil)
-          @label = label
-          @name = name
-          @required = required
-          @error = error
-          @help_text = help_text
-          @id = id
-          super()
-        end
-
-        private
-
-        def field_classes
-          classes = [BASE_CLASSES]
-          classes << ERROR_CLASSES if @error.present?
-          classes.join(" ")
-        end
-      end
-    end
-  end
-end

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

@@ -1,22 +0,0 @@
-<%# Template per il heading %>
-<div class="<%= container_classes %>">
-  <%= tag.public_send(heading_tag, **heading_attributes) do %>
-    <% if show_icon? %>
-      <span class="<%= icon_classes %>">
-        <%= render BetterUi::General::IconComponent.new(name: @icon) %>
-      </span>
-    <% end %>
-    
-    <span><%= content %></span>
-  <% end %>
-  
-  <% if show_subtitle? %>
-    <div class="<%= subtitle_classes %>">
-      <%= @subtitle %>
-    </div>
-  <% end %>
-  
-  <% if show_divider? %>
-    <div class="<%= divider_classes %>"></div>
-  <% end %>
-</div>

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

@@ -1,257 +0,0 @@
-module BetterUi
-  module General
-    module Heading
-      class Component < ViewComponent::Base
-        attr_reader :level, :theme, :align, :size, :style, :icon, :subtitle, :with_divider
-
-        # Classi base sempre presenti
-        HEADING_BASE_CLASSES = "font-bold leading-tight"
-
-        # Temi con classi Tailwind dirette - LOGICA CORRETTA
-        HEADING_THEME_CLASSES = {
-          default: "text-white",         # Testo bianco (per sfondi scuri)
-          white: "text-gray-900",        # Testo nero (per sfondi chiari)
-          red: "text-red-500",
-          rose: "text-rose-500",
-          orange: "text-orange-500",
-          green: "text-green-500",
-          blue: "text-blue-500",
-          yellow: "text-yellow-600",
-          violet: "text-violet-500",
-          purple: "text-purple-500"
-        }
-
-        # Allineamenti con classi Tailwind dirette
-        HEADING_ALIGN_CLASSES = {
-          left: "text-left",
-          center: "text-center",
-          right: "text-right"
-        }
-
-        # Dimensioni base (verranno combinate con level)
-        HEADING_SIZE_CLASSES = {
-          small: {
-            1 => "text-2xl sm:text-3xl",
-            2 => "text-xl sm:text-2xl",
-            3 => "text-lg sm:text-xl",
-            4 => "text-base sm:text-lg",
-            5 => "text-sm sm:text-base",
-            6 => "text-xs sm:text-sm"
-          },
-          medium: {
-            1 => "text-3xl sm:text-4xl",
-            2 => "text-2xl sm:text-3xl",
-            3 => "text-xl sm:text-2xl",
-            4 => "text-lg sm:text-xl",
-            5 => "text-base sm:text-lg",
-            6 => "text-sm sm:text-base"
-          },
-          large: {
-            1 => "text-4xl sm:text-5xl",
-            2 => "text-3xl sm:text-4xl",
-            3 => "text-2xl sm:text-3xl",
-            4 => "text-xl sm:text-2xl",
-            5 => "text-lg sm:text-xl",
-            6 => "text-base sm:text-lg"
-          }
-        }
-
-        # Stili con classi Tailwind dirette
-        HEADING_STYLE_CLASSES = {
-          normal: "",
-          bold: "font-extrabold",
-          italic: "italic",
-          underline: "underline"
-        }
-
-        # Temi per subtitle - LOGICA CORRETTA
-        HEADING_SUBTITLE_THEME_CLASSES = {
-          default: "text-gray-300",      # Testo grigio chiaro (per sfondi scuri)
-          white: "text-gray-600",        # Testo grigio scuro (per sfondi chiari)
-          red: "text-red-400",
-          rose: "text-rose-400",
-          orange: "text-orange-400",
-          green: "text-green-400",
-          blue: "text-blue-400",
-          yellow: "text-yellow-500",
-          violet: "text-violet-400"
-        }
-
-        # Temi per divider - LOGICA CORRETTA
-        HEADING_DIVIDER_THEME_CLASSES = {
-          default: "border-gray-700",      # Bordo grigio scuro (per sfondi scuri)
-          white: "border-gray-200",        # Bordo grigio chiaro (per sfondi chiari)
-          red: "border-red-200",
-          rose: "border-rose-200",
-          orange: "border-orange-200",
-          green: "border-green-200",
-          blue: "border-blue-200",
-          yellow: "border-yellow-200",
-          violet: "border-violet-200"
-        }
-
-        # @param level [Integer] livello del heading (1-6)
-        # @param theme [Symbol] tema del colore (:default, :white, etc.)
-        # @param align [Symbol] allineamento (:left, :center, :right)
-        # @param size [Symbol] dimensione (:small, :medium, :large)
-        # @param style [Symbol] stile (:normal, :bold, :italic, :underline)
-        # @param icon [String] icona opzionale
-        # @param subtitle [String] sottotitolo opzionale
-        # @param with_divider [Boolean] mostra linea divisoria
-        # @param html_options [Hash] opzioni HTML per il container
-        def initialize(
-          level: 2,
-          theme: :white,
-          align: :left,
-          size: :medium,
-          style: :normal,
-          icon: nil,
-          subtitle: nil,
-          with_divider: false,
-          **html_options
-        )
-          @level = level.to_i.clamp(1, 6)
-          @theme = theme.to_sym
-          @align = align.to_sym
-          @size = size.to_sym
-          @style = style.to_sym
-          @icon = icon
-          @subtitle = subtitle
-          @with_divider = with_divider
-          @html_options = html_options
-
-          validate_params
-        end
-
-        # Combina tutte le classi per il heading
-        def heading_classes
-          [
-            HEADING_BASE_CLASSES,
-            get_theme_class,
-            get_align_class,
-            get_size_class,
-            get_style_class,
-            @html_options[:class]
-          ].compact.join(" ")
-        end
-
-        # Classi per il container principale
-        def container_classes
-          "mb-4"
-        end
-
-        # Classi per il subtitle
-        def subtitle_classes
-          return "" unless @subtitle.present?
-
-          [
-            "mt-1 text-sm",
-            get_subtitle_theme_class,
-            get_align_class
-          ].compact.join(" ")
-        end
-
-        # Classi per il divider
-        def divider_classes
-          return "" unless @with_divider
-
-          [
-            "mt-2 border-t",
-            get_divider_theme_class
-          ].compact.join(" ")
-        end
-
-        # Classi per l'icona
-        def icon_classes
-          return "" unless @icon.present?
-          "mr-2 inline-block"
-        end
-
-        # Restituisce gli attributi HTML per il heading
-        def heading_attributes
-          attrs = @html_options.except(:class)
-          attrs[:class] = heading_classes
-          attrs
-        end
-
-        # Tag del heading basato sul level
-        def heading_tag
-          "h#{@level}"
-        end
-
-        # Determina se mostrare l'icona
-        def show_icon?
-          @icon.present?
-        end
-
-        # Determina se mostrare il subtitle
-        def show_subtitle?
-          @subtitle.present?
-        end
-
-        # Determina se mostrare il divider
-        def show_divider?
-          @with_divider
-        end
-
-        private
-
-        def get_theme_class
-          HEADING_THEME_CLASSES[@theme] || HEADING_THEME_CLASSES[:white]
-        end
-
-        def get_align_class
-          HEADING_ALIGN_CLASSES[@align] || HEADING_ALIGN_CLASSES[:left]
-        end
-
-        def get_size_class
-          size_map = HEADING_SIZE_CLASSES[@size] || HEADING_SIZE_CLASSES[:medium]
-          size_map[@level] || size_map[2]
-        end
-
-        def get_style_class
-          HEADING_STYLE_CLASSES[@style] || HEADING_STYLE_CLASSES[:normal]
-        end
-
-        def get_subtitle_theme_class
-          HEADING_SUBTITLE_THEME_CLASSES[@theme] || HEADING_SUBTITLE_THEME_CLASSES[:white]
-        end
-
-        def get_divider_theme_class
-          HEADING_DIVIDER_THEME_CLASSES[@theme] || HEADING_DIVIDER_THEME_CLASSES[:white]
-        end
-
-        def validate_params
-          validate_theme
-          validate_align
-          validate_size
-          validate_style
-        end
-
-        def validate_theme
-          unless HEADING_THEME_CLASSES.keys.include?(@theme)
-            raise ArgumentError, "Il tema deve essere uno tra: #{HEADING_THEME_CLASSES.keys.join(', ')}"
-          end
-        end
-
-        def validate_align
-          unless HEADING_ALIGN_CLASSES.keys.include?(@align)
-            raise ArgumentError, "L'allineamento deve essere uno tra: #{HEADING_ALIGN_CLASSES.keys.join(', ')}"
-          end
-        end
-
-        def validate_size
-          unless HEADING_SIZE_CLASSES.keys.include?(@size)
-            raise ArgumentError, "La dimensione deve essere una tra: #{HEADING_SIZE_CLASSES.keys.join(', ')}"
-          end
-        end
-
-        def validate_style
-          unless HEADING_STYLE_CLASSES.keys.include?(@style)
-            raise ArgumentError, "Lo stile deve essere uno tra: #{HEADING_STYLE_CLASSES.keys.join(', ')}"
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,7 +0,0 @@
-<% if href.present? %>
-  <%= tag.a(**icon_attributes) do %>
-    <i class="<%= fa_class_name %> <%= icon_classes %>"></i>
-  <% end %>
-<% else %>
-  <i class="<%= fa_class_name %> <%= icon_classes %>"></i>
-<% end %>