better_ui 0.2.0 → 0.6.0

data/app/components/better_ui/general/input/select/component.rb

@@ -5,136 +5,188 @@ module BetterUi
     module Input
       module Select
         class Component < ViewComponent::Base
-          attr_reader :name, :options, :selected, :required, :disabled, :multiple, 
-                      :theme, :size, :rounded, :placeholder, :form, :options_html, 
-                      :classes, :html_options
-
-          # Classi base sempre presenti
-          SELECT_BASE_CLASSES = "block w-full border shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-0"
-
-          # Temi di select con classi Tailwind
+          # Costanti con classi Tailwind dirette
           SELECT_THEME = {
-            default: "bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500",
-            white: "bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500",
-            red: "bg-white border-red-300 focus:border-red-500 focus:ring-red-500",
-            rose: "bg-white border-rose-300 focus:border-rose-500 focus:ring-rose-500",
-            orange: "bg-white border-orange-300 focus:border-orange-500 focus:ring-orange-500",
-            green: "bg-white border-green-300 focus:border-green-500 focus:ring-green-500",
-            blue: "bg-white border-blue-300 focus:border-blue-500 focus:ring-blue-500",
-            yellow: "bg-white border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500",
-            violet: "bg-white border-violet-300 focus:border-violet-500 focus:ring-violet-500"
+            default: 'border-gray-300 text-gray-800 focus:border-gray-600 focus:ring-gray-600',
+            white: 'border-gray-300 text-gray-900 focus:border-gray-500 focus:ring-gray-500',
+            red: 'border-gray-300 text-red-600 focus:border-red-500 focus:ring-red-500',
+            rose: 'border-gray-300 text-rose-600 focus:border-rose-500 focus:ring-rose-500',
+            orange: 'border-gray-300 text-orange-600 focus:border-orange-500 focus:ring-orange-500',
+            green: 'border-gray-300 text-green-600 focus:border-green-500 focus:ring-green-500',
+            blue: 'border-gray-300 text-blue-600 focus:border-blue-500 focus:ring-blue-500',
+            yellow: 'border-gray-300 text-yellow-600 focus:border-yellow-500 focus:ring-yellow-500',
+            violet: 'border-gray-300 text-violet-600 focus:border-violet-500 focus:ring-violet-500'
           }.freeze
 
-          # Dimensioni con classi Tailwind
           SELECT_SIZE = {
-            small: "px-2 py-1.5 text-xs",
-            medium: "px-3 py-2 text-sm",
-            large: "px-4 py-3 text-base"
-          }.freeze
-          
-          # Border radius con classi Tailwind
-          SELECT_ROUNDED = {
-            none: "rounded-none",
-            small: "rounded-sm",
-            medium: "rounded-md",
-            large: "rounded-lg",
-            full: "rounded-full"
+            small: 'px-2 py-1.5 text-xs',
+            medium: 'px-3 py-2 text-sm',
+            large: 'px-4 py-3 text-base'
           }.freeze
 
-          # Stati del select
-          SELECT_STATE = {
-            disabled: "bg-gray-100 cursor-not-allowed opacity-75"
+          SELECT_ROUNDED = {
+            none: 'rounded-none',
+            small: 'rounded-sm',
+            medium: 'rounded',
+            large: 'rounded-lg',
+            full: 'rounded-full'
           }.freeze
 
-          # @param name [String] Name of the select field (required)
-          # @param options [Array<Hash>] Array of options for the select in format [{value: 'value', label: 'label'}, ...]
-          # @param selected [String, Array, nil] Selected value or values
-          # @param required [Boolean] Whether the field is required
-          # @param disabled [Boolean] Whether the field is disabled
-          # @param multiple [Boolean] Whether multiple options can be selected
-          # @param theme [Symbol] Component theme (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
-          # @param size [Symbol] Component size (:small, :medium, :large)
+          SELECT_BASE_CLASSES = 'block w-full bg-white border-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200'.freeze
+
+          attr_reader :name, :options, :selected, :required, :disabled, :multiple, :searchable,
+                      :theme, :size, :rounded, :placeholder, :search_placeholder, :max_height,
+                      :form, :classes, :html_options
+
+          # @param name [String] Nome del campo select (obbligatorio)
+          # @param options [Array<Hash>] Array di opzioni nel formato [{value: 'value', label: 'label'}, ...]
+          # @param selected [String, Array, nil] Valore/i selezionato/i
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @param multiple [Boolean] Se multiple opzioni possono essere selezionate
+          # @param searchable [Boolean] Se abilitare la ricerca
+          # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
           # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
-          # @param placeholder [String, nil] Placeholder text for the field (creates an initial disabled option)
-          # @param form [ActionView::Helpers::FormBuilder, nil] Optional Rails form builder
-          # @param options_html [Hash] Additional HTML attributes for option tags
-          # @param classes [String] Additional CSS classes
-          # @param html_options [Hash] Additional HTML attributes for the select tag
+          # @param placeholder [String] Testo placeholder per il trigger
+          # @param search_placeholder [String] Testo placeholder per il campo search
+          # @param max_height [String] Altezza massima del dropdown (default: "300px")
+          # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+          # @param classes [String] Classi CSS aggiuntive
+          # @param html_options [Hash] Attributi HTML aggiuntivi
           def initialize(
             name:, 
             options:, 
             selected: nil, 
             required: false, 
             disabled: false, 
-            multiple: false, 
+            multiple: false,
+            searchable: true,
             theme: :default, 
             size: :medium, 
             rounded: :medium, 
             placeholder: nil,
+            search_placeholder: nil,
+            max_height: "300px",
             form: nil,
-            options_html: {}, 
             classes: '', 
             **html_options
           )
             @name = name
             @options = options
-            @selected = selected
+            @selected = normalize_selected(selected)
             @required = required
             @disabled = disabled
             @multiple = multiple
+            @searchable = searchable
             @theme = theme.to_sym
             @size = size.to_sym
             @rounded = rounded.to_sym
-            @placeholder = placeholder
+            @placeholder = placeholder || (multiple ? "Seleziona opzioni..." : "Seleziona...")
+            @search_placeholder = search_placeholder || "Cerca..."
+            @max_height = max_height
             @form = form
-            @options_html = options_html
             @classes = classes
             @html_options = html_options
 
             validate_params
           end
 
-          def combined_classes
+          private
+
+          def validate_params
+            validate_theme
+            validate_size
+            validate_rounded
+          end
+
+          def validate_theme
+            return if SELECT_THEME.key?(@theme)
+
+            raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{SELECT_THEME.keys.join(', ')}"
+          end
+
+          def validate_size
+            return if SELECT_SIZE.key?(@size)
+
+            raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{SELECT_SIZE.keys.join(', ')}"
+          end
+
+          def validate_rounded
+            return if SELECT_ROUNDED.key?(@rounded)
+
+            raise ArgumentError, "Invalid rounded: #{@rounded}. Valid rounded options are: #{SELECT_ROUNDED.keys.join(', ')}"
+          end
+
+          def normalize_selected(selected)
+            return [] if selected.nil?
+            return selected if selected.is_a?(Array)
+            [selected]
+          end
+
+          def container_attributes
+            {
+              'data-controller': 'select',
+              'data-select-multiple-value': @multiple,
+              'data-select-searchable-value': @searchable,
+              'data-select-selected-value': @selected.to_json,
+              'data-select-placeholder-value': @placeholder,
+              'data-select-search-placeholder-value': @search_placeholder,
+              'data-action': 'keydown->select#keydown',
+              class: "relative #{@classes}"
+            }.merge(@html_options)
+          end
+
+          def trigger_classes
             [
               SELECT_BASE_CLASSES,
               SELECT_THEME[@theme],
               SELECT_SIZE[@size],
               SELECT_ROUNDED[@rounded],
-              @disabled ? SELECT_STATE[:disabled] : nil,
-              @classes
+              'cursor-pointer flex items-center justify-between',
+              @disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'
             ].compact.join(' ')
           end
 
-          def select_attributes
-            attrs = {
-              name: form_field_name,
-              id: @html_options[:id] || form_field_id,
-              class: combined_classes
-            }
+          def dropdown_classes
+            [
+              'absolute z-50 w-full mt-1 bg-white border border-gray-300 shadow-lg',
+              @rounded == :none ? 'rounded-none' : 'rounded-md',
+              'hidden opacity-0 scale-95 translate-y-1',
+              'transition-all duration-150 ease-out'
+            ].join(' ')
+          end
 
-            # Aggiungi attributi booleani solo se true
-            attrs[:required] = @required if @required
-            attrs[:disabled] = @disabled if @disabled
-            attrs[:multiple] = @multiple if @multiple
+          def search_input_classes
+            [
+              'w-full px-3 py-2 text-sm border-0 border-b border-gray-200',
+              'focus:outline-none focus:border-gray-400 bg-gray-50'
+            ].join(' ')
+          end
 
-            # Aggiungi altri attributi HTML
-            @html_options.except(:id, :class).each do |key, value|
-              attrs[key] = value unless value.nil?
-            end
-            
-            # Rimuovi attributi con valori nil o false
-            attrs.compact
+          def options_container_classes
+            [
+              'overflow-y-auto',
+              "max-h-[#{@max_height}]"
+            ].join(' ')
+          end
+
+          def option_classes
+            [
+              'px-3 py-2 cursor-pointer hover:bg-gray-50 flex items-center justify-between',
+              'transition-colors duration-150'
+            ].join(' ')
           end
 
-          def form_field_name
+          def input_name
             if @form.present?
               @form.field_name(@name)
             else
-              @name
+              @multiple ? "#{@name}[]" : @name
             end
           end
 
-          def form_field_id
+          def input_id
             if @form.present?
               @form.field_id(@name)
             else
@@ -142,43 +194,56 @@ module BetterUi
             end
           end
 
-          def selected?(option)
-            return false if @selected.nil?
-            
-            if @selected.is_a?(Array)
-              @selected.include?(option[:value])
+          def hidden_input_value
+            if @multiple
+              @selected.to_json
             else
-              option[:value].to_s == @selected.to_s
+              @selected.first || ''
             end
           end
 
-          private
+          def trigger_text
+            if @selected.empty?
+              @placeholder
+            elsif @multiple
+              case @selected.length
+              when 1
+                selected_option = @options.find { |opt| opt[:value].to_s == @selected.first.to_s }
+                selected_option ? selected_option[:label] : @selected.first
+              else
+                "#{@selected.length} selezionati"
+              end
+            else
+              selected_option = @options.find { |opt| opt[:value].to_s == @selected.first.to_s }
+              selected_option ? selected_option[:label] : @selected.first
+            end
+          end
 
-          def validate_params
-            validate_theme
-            validate_size
-            validate_rounded
+          def trigger_text_classes
+            @selected.empty? ? 'text-gray-500' : 'text-gray-900'
           end
-          
-          def validate_theme
-            unless SELECT_THEME.keys.include?(@theme)
-              raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{SELECT_THEME.keys.join(', ')}"
-            end
+
+          def selected_option_values
+            @selected.map(&:to_s)
           end
-          
-          def validate_size
-            unless SELECT_SIZE.keys.include?(@size)
-              raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{SELECT_SIZE.keys.join(', ')}"
-            end
+
+          def option_selected?(option)
+            selected_option_values.include?(option[:value].to_s)
           end
-          
-          def validate_rounded
-            unless SELECT_ROUNDED.keys.include?(@rounded)
-              raise ArgumentError, "Invalid rounded: #{@rounded}. Valid rounded options are: #{SELECT_ROUNDED.keys.join(', ')}"
-            end
+
+          def badge_container_classes
+            'flex flex-wrap gap-1 mt-2'
+          end
+
+          def chevron_icon
+            '
+            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+            '.html_safe
           end
         end
       end
     end
   end
-end
+end

data/app/components/better_ui/general/input/toggle/component.html.erb

@@ -0,0 +1,5 @@
+<% if @label %>
+  <%= render_toggle_with_label %>
+<% else %>
+  <%= render_toggle_switch %>
+<% end %>

data/app/components/better_ui/general/input/toggle/component.rb

@@ -0,0 +1,242 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Toggle
+        class Component < ViewComponent::Base
+          # Costanti con classi Tailwind dirette
+          TOGGLE_THEME = {
+            default: 'peer-checked:bg-gray-800',
+            white: 'peer-checked:bg-white border peer-checked:border-gray-900',
+            red: 'peer-checked:bg-red-600',
+            rose: 'peer-checked:bg-rose-600',
+            orange: 'peer-checked:bg-orange-600',
+            green: 'peer-checked:bg-green-600',
+            blue: 'peer-checked:bg-blue-600',
+            yellow: 'peer-checked:bg-yellow-600',
+            violet: 'peer-checked:bg-violet-600'
+          }.freeze
+
+          TOGGLE_TRACK_SIZE = {
+            small: 'w-9 h-5',
+            medium: 'w-11 h-6',
+            large: 'w-14 h-7'
+          }.freeze
+
+          TOGGLE_THUMB_SIZE = {
+            small: 'w-4 h-4',
+            medium: 'w-5 h-5',
+            large: 'w-6 h-6'
+          }.freeze
+
+          TOGGLE_THUMB_POSITION = {
+            small: 'peer-checked:translate-x-4',
+            medium: 'peer-checked:translate-x-5',
+            large: 'peer-checked:translate-x-7'
+          }.freeze
+
+          TOGGLE_BASE_TRACK = 'relative bg-gray-300 rounded-full transition-colors duration-200 ease-in-out'.freeze
+          TOGGLE_BASE_THUMB = 'bg-white rounded-full shadow-sm transform transition-transform duration-200 ease-in-out absolute top-0.5 left-0.5'.freeze
+
+          TOGGLE_LABEL_GAP = {
+            small: 'gap-2',
+            medium: 'gap-2.5',
+            large: 'gap-3'
+          }.freeze
+
+          TOGGLE_LABEL_TEXT = {
+            small: 'text-sm',
+            medium: 'text-base',
+            large: 'text-lg'
+          }.freeze
+
+          attr_reader :name, :value, :checked, :required, :disabled, 
+                      :label, :label_position, :theme, :size,
+                      :form, :classes, :options
+
+          # @param name [String] Nome del campo toggle (obbligatorio)
+          # @param value [String] Valore del toggle quando è attivo (default: "1")
+          # @param checked [Boolean] Se il toggle è attivo
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @param label [String, nil] Testo della label associata al toggle
+          # @param label_position [Symbol] Posizione della label (:left, :right)
+          # @param theme [Symbol] Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+          # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Opzioni aggiuntive per l'input (es. data attributes)
+          def initialize(name:, value: '1', checked: false, required: false, disabled: false, 
+                         label: nil, label_position: :right, theme: :default, 
+                         size: :medium, form: nil, classes: '', **options)
+            @name = name
+            @value = value
+            @checked = checked
+            @required = required
+            @disabled = disabled
+            @label = label
+            @label_position = label_position.to_sym
+            @theme = theme.to_sym
+            @size = size.to_sym
+            @form = form
+            @classes = classes
+            @options = options
+
+            validate_params
+          end
+
+          private
+
+          def validate_params
+            validate_theme
+            validate_size
+            validate_label_position
+          end
+
+          def validate_theme
+            return if TOGGLE_THEME.key?(@theme)
+
+            raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{TOGGLE_THEME.keys.join(', ')}"
+          end
+
+          def validate_size
+            return if TOGGLE_TRACK_SIZE.key?(@size)
+
+            raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{TOGGLE_TRACK_SIZE.keys.join(', ')}"
+          end
+
+          def validate_label_position
+            return if [:left, :right].include?(@label_position)
+
+            raise ArgumentError, "Invalid label_position: #{@label_position}. Valid positions are: left, right"
+          end
+
+          def container_classes
+            base_classes = ['inline-flex', 'items-center']
+            base_classes << TOGGLE_LABEL_GAP[@size]
+            base_classes << (@disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
+            base_classes << @classes if @classes.present?
+            base_classes.join(' ')
+          end
+
+          def track_classes
+            [
+              TOGGLE_BASE_TRACK,
+              TOGGLE_THEME[@theme],
+              TOGGLE_TRACK_SIZE[@size]
+            ].join(' ')
+          end
+
+          def thumb_classes
+            [
+              TOGGLE_BASE_THUMB,
+              TOGGLE_THUMB_SIZE[@size],
+              TOGGLE_THUMB_POSITION[@size]
+            ].join(' ')
+          end
+
+          def input_attributes
+            attrs = {
+              type: 'checkbox',
+              name: input_name,
+              value: @value,
+              class: 'sr-only peer',
+              checked: @checked,
+              required: @required,
+              disabled: @disabled,
+              id: input_id
+            }
+
+            attrs.merge(@options)
+          end
+
+          def input_name
+            if @form
+              @form.field_name(@name)
+            else
+              @name
+            end
+          end
+
+          def input_id
+            @options[:id] || "toggle_#{@name}"
+          end
+
+          def label_classes
+            TOGGLE_LABEL_TEXT[@size]
+          end
+
+          def input_tag
+            if @form
+              form_checkbox
+            else
+              manual_input
+            end
+          end
+
+          def form_checkbox
+            @form.check_box(@name, {
+              class: 'sr-only peer',
+              id: input_id,
+              checked: @checked,
+              disabled: @disabled,
+              required: @required,
+              **@options
+            }, @value, '0')
+          end
+
+          def manual_input
+            attrs = input_attributes.map do |key, value|
+              if value == true
+                key.to_s
+              elsif value == false || value.nil?
+                nil
+              else
+                "#{key}=\"#{value}\""
+              end
+            end.compact.join(' ')
+            
+            "<input #{attrs} />".html_safe
+          end
+
+          def render_toggle_with_label
+            if @label_position == :left
+              label_left_content
+            else
+              label_right_content
+            end
+          end
+
+          def label_left_content
+            content_tag(:label, class: container_classes, for: input_id) do
+              safe_join([
+                content_tag(:span, @label, class: label_classes),
+                render_toggle_switch
+              ])
+            end
+          end
+
+          def label_right_content
+            content_tag(:label, class: container_classes, for: input_id) do
+              safe_join([
+                render_toggle_switch,
+                content_tag(:span, @label, class: label_classes)
+              ])
+            end
+          end
+
+          def render_toggle_switch
+            content_tag(:div, class: 'relative') do
+              safe_join([
+                input_tag,
+                content_tag(:div, '', class: track_classes),
+                content_tag(:div, '', class: thumb_classes)
+              ])
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -36,7 +36,7 @@ module BetterUi
 
         # Dimensioni con classi Tailwind dirette
         LINK_SIZE_CLASSES = {
-          extra_small: "text-[0.65rem]",
+          extra_small: "text-xs",
           small: "text-sm",
           medium: "text-base",
           large: "text-lg"

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

@@ -1,42 +1,5 @@
-<%# Template per il modal %>
-<% if @backdrop %>
-  <%= tag.div **backdrop_attributes do %>
-    <%= tag.div **container_attributes do %>
-      <%# Header del modal %>
-      <%= tag.div **header_attributes do %>
-        <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
-        <% if @closable %>
-          <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
-            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        <% end %>
-      <% end %>
-      
-      <%# Body del modal %>
-      <div class="p-6">
-        <%= content %>
-      </div>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= tag.div **container_attributes do %>
-    <%# Header del modal %>
-    <%= tag.div **header_attributes do %>
-      <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
-      <% if @closable %>
-        <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
-          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      <% end %>
-    <% end %>
-    
-    <%# Body del modal %>
-    <div class="p-6">
-      <%= content %>
-    </div>
-  <% end %>
-<% end %>
+<%# Wrapper component con controller Stimulus e slots %>
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <%= trigger %>
+  <%= modal %>
+</div>