better_ui 0.6.0 → 0.7.1

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

@@ -1,187 +0,0 @@
-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 = {
-          extra_small: "text-[0.65rem]",
-          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

@@ -1,34 +0,0 @@
-<%# Template per il bottone %>
-<% if link? %>
-  <%= link_to @href, **link_attributes do %>
-    <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0<%= @text.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
-    <% end %>
-    
-    <% if @text %>
-      <span class="flex-grow"><%= @text %></span>
-    <% end %>
-    
-    <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @text.present? ? ' 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<%= @text.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
-    <% end %>
-    
-    <% if @text %>
-      <span class="flex-grow"><%= @text %></span>
-    <% end %>
-    
-    <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @text.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
-    <% end %>
-    
-    <%= content %>
-  <% end %>
-<% end %>

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

@@ -1,214 +0,0 @@
-module BetterUi
-  module General
-    module Button
-      class Component < ViewComponent::Base
-        attr_reader :text, :theme, :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(
-          text: nil,
-          theme: :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
-        )
-          @text = text
-          @theme = theme.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[@theme] || 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?
-          @text.present? || @icon.present? || content.present?
-        end
-
-        private
-
-        def validate_params
-          validate_theme
-          validate_size
-          validate_icon_position
-          validate_rounded
-        end
-
-        def validate_theme
-          unless BUTTON_THEME.keys.include?(@theme)
-            raise ArgumentError, "Il tema 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

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,28 +0,0 @@
-<div class="relative <%= @classes %> <%= fullwidth_classes %>" 
-     data-controller="bui-dropdown" 
-     data-bui-dropdown-open-value="false"
-     data-bui-dropdown-selectable-value="<%= @selectable.to_s %>"
-     <%= tag.attributes(@html_options.except(:class)) %>>
-  
-  <button type="button"
-          class="items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors <%= dynamic_trigger_classes %> <%= fullwidth_classes %>"
-          data-bui-dropdown-target="trigger"
-          data-action="click->bui-dropdown#toggle keydown->bui-dropdown#keydown"
-          aria-expanded="false"
-          aria-haspopup="true">
-    <%= @trigger %>
-    <% if @show_chevron %>
-      <%= bui_icon("chevron-down", size: :small, classes: "ml-2 -mr-1") %>
-    <% end %>
-  </button>
-
-  <div class="absolute z-[1000] my-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none <%= dynamic_menu_classes %> <%= fullwidth_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>