better_ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,10 @@
+<%# 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

@@ -0,0 +1,226 @@
+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

@@ -0,0 +1,14 @@
+<div <%= tag.attributes(container_attributes) %>>
+  <button <%= tag.attributes(trigger_attributes) %>>
+    <%= @trigger %>
+    <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>
+  </button>
+
+  <div <%= tag.attributes(menu_attributes) %>>
+    <div class="py-1" role="none">
+      <%= content %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,219 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Dropdown
+      class Component < ViewComponent::Base
+        attr_reader :trigger, :position, :theme, :size, :rounded, :animation, :classes, :html_options
+
+        # Classi base per il contenitore dropdown
+        DROPDOWN_CONTAINER_CLASSES = "relative inline-block"
+
+        # Classi base per il pulsante trigger
+        DROPDOWN_TRIGGER_BASE_CLASSES = "inline-flex items-center justify-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
+
+        # Classi base per il menu dropdown  
+        DROPDOWN_MENU_BASE_CLASSES = "absolute z-50 mt-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none"
+
+        # 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
+
+        # Combina tutte le classi per il contenitore
+        def container_classes
+          [
+            DROPDOWN_CONTAINER_CLASSES,
+            @classes
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per il trigger
+        def trigger_classes
+          [
+            DROPDOWN_TRIGGER_BASE_CLASSES,
+            get_trigger_theme_classes,
+            get_trigger_size_classes,
+            get_trigger_rounded_classes
+          ].compact.join(" ")
+        end
+
+        # Combina tutte le classi per il menu
+        def menu_classes
+          [
+            DROPDOWN_MENU_BASE_CLASSES,
+            get_position_classes,
+            get_animation_classes,
+            get_menu_rounded_classes
+          ].compact.join(" ")
+        end
+
+        # Restituisce gli attributi per il contenitore
+        def container_attributes
+          attrs = {
+            class: container_classes,
+            "data-dropdown": true
+          }
+
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        # Restituisce gli attributi per il trigger
+        def trigger_attributes
+          {
+            type: "button",
+            class: trigger_classes,
+            "data-dropdown-trigger": true,
+            "aria-expanded": "false",
+            "aria-haspopup": "true"
+          }
+        end
+
+        # Restituisce gli attributi per il menu
+        def menu_attributes
+          {
+            class: menu_classes,
+            "data-dropdown-menu": true,
+            role: "menu",
+            "aria-orientation": "vertical",
+            style: "display: none;"
+          }
+        end
+
+        # 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

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

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

@@ -0,0 +1,41 @@
+# 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

@@ -0,0 +1,6 @@
+<<%= 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

@@ -0,0 +1,118 @@
+# 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"
+          }
+
+          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

@@ -0,0 +1,27 @@
+<%# 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>