better_ui 0.3.0 → 0.7.0

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

@@ -1,10 +0,0 @@
-<%# Template per il divider %>
-<% if show_label? %>
-  <%= tag.div(**divider_attributes) do %>
-    <div class="<%= label_line_classes %>"></div>
-    <span class="<%= label_classes %>"><%= @label %></span>
-    <div class="<%= label_line_classes %>"></div>
-  <% end %>
-<% else %>
-  <%= tag.div(**divider_attributes) %>
-<% end %>

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

@@ -1,226 +0,0 @@
-module BetterUi
-  module General
-    module Divider
-      class Component < ViewComponent::Base
-        attr_reader :theme, :orientation, :style, :size, :label, :height, :classes
-
-        # Classi base sempre presenti
-        DIVIDER_BASE_CLASSES = "my-4"
-
-        # Temi con classi Tailwind dirette - LOGICA CORRETTA
-        DIVIDER_THEME_CLASSES = {
-          default: "border-white",         # Bordo bianco (per sfondi scuri)
-          white: "border-gray-300",        # Bordo grigio (per sfondi chiari)
-          red: "border-red-500",
-          rose: "border-rose-500",
-          orange: "border-orange-500",
-          green: "border-green-500",
-          blue: "border-blue-500",
-          yellow: "border-yellow-500",
-          violet: "border-violet-500"
-        }
-
-        # Orientamento con classi Tailwind dirette
-        DIVIDER_ORIENTATION_CLASSES = {
-          horizontal: "w-full border-t",
-          vertical: "h-full border-l"
-        }
-
-        # Stili di linea con classi Tailwind dirette
-        DIVIDER_STYLE_CLASSES = {
-          solid: "border-solid",
-          dashed: "border-dashed",
-          dotted: "border-dotted",
-          double: "border-double"
-        }
-
-        # Dimensioni con classi Tailwind dirette
-        DIVIDER_SIZE_CLASSES = {
-          thin: {
-            horizontal: "border-t",
-            vertical: "border-l"
-          },
-          medium: {
-            horizontal: "border-t-2",
-            vertical: "border-l-2"
-          },
-          thick: {
-            horizontal: "border-t-4",
-            vertical: "border-l-4"
-          }
-        }
-
-        # Classi per label con classi Tailwind dirette - LOGICA CORRETTA
-        DIVIDER_LABEL_THEME_CLASSES = {
-          default: "text-white bg-transparent px-3",     # Testo bianco trasparente (per sfondi scuri)
-          white: "text-gray-900 bg-white px-3",          # Testo nero su bianco (per sfondi chiari)
-          red: "text-red-500 bg-white px-3",
-          rose: "text-rose-500 bg-white px-3",
-          orange: "text-orange-500 bg-white px-3",
-          green: "text-green-500 bg-white px-3",
-          blue: "text-blue-500 bg-white px-3",
-          yellow: "text-yellow-600 bg-white px-3",
-          violet: "text-violet-500 bg-white px-3"
-        }
-
-        # @param theme [Symbol] tema del divider (:default, :white, etc.)
-        # @param orientation [Symbol] orientamento del divider (:horizontal, :vertical)
-        # @param style [Symbol] stile della linea (:solid, :dashed, :dotted, :double)
-        # @param size [Symbol] dimensione della linea (:thin, :medium, :thick)
-        # @param label [String] testo opzionale da mostrare al centro del divider
-        # @param height [String] altezza per divider verticale (es. "100px", "100%")
-        # @param classes [String] classi CSS aggiuntive
-        # @param html_options [Hash] opzioni HTML per il container
-        def initialize(
-          theme: :white,
-          orientation: :horizontal,
-          style: :solid,
-          size: :medium,
-          label: nil,
-          height: nil,
-          classes: nil,
-          **html_options
-        )
-          @theme = theme.to_sym
-          @orientation = orientation.to_sym
-          @style = style.to_sym
-          @size = size.to_sym
-          @label = label
-          @height = height
-          @classes = classes
-          @html_options = html_options
-
-          validate_params
-        end
-
-        # Combina tutte le classi per il container
-        def combined_classes
-          base_classes = []
-
-          if @label.present? && @orientation == :horizontal
-            # Per divider con label orizzontale: flex layout
-            base_classes = [
-              "flex items-center text-center",
-              get_theme_class,
-              get_style_class
-            ]
-          else
-            # Per divider normale
-            base_classes = [
-              DIVIDER_BASE_CLASSES,
-              get_orientation_class,
-              get_theme_class,
-              get_style_class,
-              get_size_class
-            ]
-          end
-
-          [ *base_classes, @classes, @html_options[:class] ].compact.join(" ")
-        end
-
-        # Classi per il label
-        def label_classes
-          return "" unless @label.present?
-
-          [
-            "relative z-10 text-sm font-medium",
-            get_label_theme_class
-          ].compact.join(" ")
-        end
-
-        # Classi per le linee before/after quando c'è un label
-        def label_line_classes
-          return "" unless @label.present? && @orientation == :horizontal
-
-          [
-            "flex-1 h-px",
-            get_theme_class,
-            get_style_class
-          ].compact.join(" ")
-        end
-
-        # Genera gli attributi di stile inline necessari
-        def inline_styles
-          return nil unless @orientation == :vertical && @height.present?
-          "height: #{@height};"
-        end
-
-        # Restituisce gli attributi per il divider
-        def divider_attributes
-          attrs = {
-            class: combined_classes
-          }
-
-          # Aggiungi stile inline se presente
-          attrs[:style] = inline_styles if inline_styles.present?
-
-          # Aggiungi altri attributi HTML se presenti
-          @html_options.except(:class).each do |key, value|
-            attrs[key] = value
-          end
-
-          attrs
-        end
-
-        # Determina se mostrare il label
-        def show_label?
-          @label.present? && @orientation == :horizontal
-        end
-
-        private
-
-        def get_theme_class
-          DIVIDER_THEME_CLASSES[@theme] || DIVIDER_THEME_CLASSES[:white]
-        end
-
-        def get_orientation_class
-          DIVIDER_ORIENTATION_CLASSES[@orientation] || DIVIDER_ORIENTATION_CLASSES[:horizontal]
-        end
-
-        def get_style_class
-          DIVIDER_STYLE_CLASSES[@style] || DIVIDER_STYLE_CLASSES[:solid]
-        end
-
-        def get_size_class
-          size_map = DIVIDER_SIZE_CLASSES[@size] || DIVIDER_SIZE_CLASSES[:medium]
-          size_map[@orientation] || size_map[:horizontal]
-        end
-
-        def get_label_theme_class
-          DIVIDER_LABEL_THEME_CLASSES[@theme] || DIVIDER_LABEL_THEME_CLASSES[:white]
-        end
-
-        def validate_params
-          validate_theme
-          validate_orientation
-          validate_style
-          validate_size
-        end
-
-        def validate_theme
-          unless DIVIDER_THEME_CLASSES.keys.include?(@theme)
-            raise ArgumentError, "Il tema deve essere uno tra: #{DIVIDER_THEME_CLASSES.keys.join(', ')}"
-          end
-        end
-
-        def validate_orientation
-          unless DIVIDER_ORIENTATION_CLASSES.keys.include?(@orientation)
-            raise ArgumentError, "L'orientamento deve essere uno tra: #{DIVIDER_ORIENTATION_CLASSES.keys.join(', ')}"
-          end
-        end
-
-        def validate_style
-          unless DIVIDER_STYLE_CLASSES.keys.include?(@style)
-            raise ArgumentError, "Lo stile deve essere uno tra: #{DIVIDER_STYLE_CLASSES.keys.join(', ')}"
-          end
-        end
-
-        def validate_size
-          unless DIVIDER_SIZE_CLASSES.keys.include?(@size)
-            raise ArgumentError, "La dimensione deve essere una tra: #{DIVIDER_SIZE_CLASSES.keys.join(', ')}"
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,25 +0,0 @@
-<div class="relative inline-block <%= @classes %>" 
-     data-controller="bui-dropdown" 
-     data-bui-dropdown-open-value="false"
-     <%= tag.attributes(@html_options.except(:class)) %>>
-  
-  <button type="button"
-          class="inline-flex items-center justify-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors <%= dynamic_trigger_classes %>"
-          data-bui-dropdown-target="trigger"
-          data-action="click->bui-dropdown#toggle keydown->bui-dropdown#keydown"
-          aria-expanded="false"
-          aria-haspopup="true">
-    <%= @trigger %>
-    <%= bui_icon("chevron-down", size: :small, classes: "ml-2 -mr-1") %>
-  </button>
-
-  <div class="absolute z-50 mt-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none <%= dynamic_menu_classes %>"
-       data-bui-dropdown-target="menu"
-       role="menu"
-       aria-orientation="vertical"
-       style="display: none;">
-    <div class="py-1" role="none" data-action="click->bui-dropdown#itemClick">
-      <%= content %>
-    </div>
-  </div>
-</div>

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>