better_ui 0.3.0 → 0.6.0

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

@@ -9,7 +9,8 @@ module BetterUi
         ICON_SIZE_CLASSES = {
           small: "bui-icon--small w-4 h-4 text-sm",
           medium: "bui-icon--medium w-5 h-5 text-base",
-          large: "bui-icon--large w-6 h-6 text-lg"
+          large: "bui-icon--large w-6 h-6 text-lg",
+          xlarge: "bui-icon--large w-7 h-7 text-xl"
         }.freeze
 
         # Temi dell'icona con colori coerenti

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

@@ -7,7 +7,7 @@ module BetterUi
         class Component < ViewComponent::Base
           # Costanti con classi Tailwind dirette
           CHECKBOX_THEME = {
-            default: 'border-gray-300 text-blue-600 focus:border-blue-500 focus:ring-blue-500 checked:bg-blue-600 checked:border-blue-600',
+            default: 'border-gray-300 text-gray-800 focus:border-gray-600 focus:ring-gray-600 checked:bg-gray-800 checked:border-gray-800',
             white: 'border-gray-300 text-gray-900 focus:border-gray-500 focus:ring-gray-500 checked:bg-white checked:border-gray-900 checked:text-gray-900',
             red: 'border-gray-300 text-red-600 focus:border-red-500 focus:ring-red-500 checked:bg-red-600 checked:border-red-600',
             rose: 'border-gray-300 text-rose-600 focus:border-rose-500 focus:ring-rose-500 checked:bg-rose-600 checked:border-rose-600',
@@ -19,9 +19,9 @@ module BetterUi
           }.freeze
 
           CHECKBOX_SIZE = {
-            small: 'h-4 w-4',
-            medium: 'h-5 w-5',
-            large: 'h-6 w-6'
+            small: 'h-2.5 w-2.5',
+            medium: 'h-3 w-3',
+            large: 'h-4 w-4'
           }.freeze
 
           CHECKBOX_ROUNDED = {
@@ -35,15 +35,15 @@ module BetterUi
           CHECKBOX_BASE_CLASSES = 'appearance-none border-2 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50'.freeze
 
           CHECKBOX_LABEL_GAP = {
-            small: 'gap-2',
-            medium: 'gap-2.5',
-            large: 'gap-3'
+            small: 'gap-1.5',
+            medium: 'gap-2',
+            large: 'gap-2.5'
           }.freeze
 
           CHECKBOX_LABEL_TEXT = {
-            small: 'text-sm',
-            medium: 'text-base',
-            large: 'text-lg'
+            small: 'text-xs',
+            medium: 'text-sm',
+            large: 'text-base'
           }.freeze
 
           attr_reader :name, :value, :checked, :required, :disabled, :indeterminate, 

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

@@ -0,0 +1 @@
+<%= render_pin_container %>

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

@@ -0,0 +1,201 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Pin
+        class Component < ViewComponent::Base
+          # Costanti con classi Tailwind dirette
+          PIN_THEME = {
+            default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
+            white: 'border-gray-300 bg-white focus:border-gray-900 focus:ring-gray-900',
+            red: 'border-red-300 focus:border-red-500 focus:ring-red-500',
+            rose: 'border-rose-300 focus:border-rose-500 focus:ring-rose-500',
+            orange: 'border-orange-300 focus:border-orange-500 focus:ring-orange-500',
+            green: 'border-green-300 focus:border-green-500 focus:ring-green-500',
+            blue: 'border-blue-300 focus:border-blue-500 focus:ring-blue-500',
+            yellow: 'border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500',
+            violet: 'border-violet-300 focus:border-violet-500 focus:ring-violet-500'
+          }.freeze
+
+          PIN_SIZE = {
+            small: 'w-8 h-8 text-sm',
+            medium: 'w-12 h-12 text-base',
+            large: 'w-16 h-16 text-lg'
+          }.freeze
+
+          PIN_GAP = {
+            small: 'gap-2',
+            medium: 'gap-3',
+            large: 'gap-4'
+          }.freeze
+
+          PIN_BASE_CLASSES = 'rounded-md border text-center font-mono focus:outline-none focus:ring-2 focus:ring-offset-1 transition-colors'.freeze
+
+          attr_reader :name, :value, :length, :placeholder, :required, :disabled,
+                      :theme, :size, :form, :classes, :options
+
+          # @param name [String] Nome del campo pin (obbligatorio)
+          # @param value [String] Valore del pin preimpostato
+          # @param length [Integer] Numero di campi pin (4-8, default: 6)
+          # @param placeholder [String] Placeholder per campi vuoti (default: '•')
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @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 attributi HTML
+          def initialize(name:, value: '', length: 6, placeholder: '•', required: false, disabled: false,
+                         theme: :default, size: :medium, form: nil, classes: '', **options)
+            @name = name
+            @value = value.to_s
+            @length = length.to_i
+            @placeholder = placeholder
+            @required = required
+            @disabled = disabled
+            @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_length
+            validate_name
+          end
+
+          def validate_theme
+            return if PIN_THEME.key?(@theme)
+
+            raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{PIN_THEME.keys.join(', ')}"
+          end
+
+          def validate_size
+            return if PIN_SIZE.key?(@size)
+
+            raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{PIN_SIZE.keys.join(', ')}"
+          end
+
+          def validate_length
+            return if @length >= 4 && @length <= 8
+
+            raise ArgumentError, "Length must be between 4 and 8, got: #{@length}"
+          end
+
+          def validate_name
+            return if @name.present?
+
+            raise ArgumentError, "Name is required for pin input components"
+          end
+
+          def container_classes
+            base_classes = ['flex', 'items-center']
+            base_classes << PIN_GAP[@size]
+            base_classes << @classes if @classes.present?
+            base_classes.join(' ')
+          end
+
+          def input_classes
+            [
+              PIN_BASE_CLASSES,
+              PIN_SIZE[@size],
+              PIN_THEME[@theme],
+              (@disabled ? 'opacity-50 cursor-not-allowed' : '')
+            ].compact.join(' ')
+          end
+
+          def controller_attributes
+            {
+              data: {
+                controller: 'bui-pin',
+                'bui-pin-length-value': @length,
+                'bui-pin-name-value': @name,
+                'bui-pin-placeholder-value': @placeholder
+              }
+            }
+          end
+
+          def input_attributes(index)
+            attrs = {
+              type: 'text',
+              class: input_classes,
+              maxlength: '1',
+              autocomplete: 'off',
+              inputmode: 'numeric',
+              pattern: '[0-9]*',
+              placeholder: @placeholder,
+              disabled: @disabled,
+              required: @required && index == 0, # Solo il primo campo è required per validazione
+              data: {
+                'bui-pin-target': 'input',
+                action: [
+                  'input->bui-pin#inputChange',
+                  'keydown->bui-pin#inputKeydown',
+                  'paste->bui-pin#inputPaste'
+                ].join(' ')
+              }
+            }
+
+            # Imposta valore se presente
+            if @value.present? && @value[index]
+              attrs[:value] = @value[index]
+            end
+
+            attrs.merge(@options.except(:id))
+          end
+
+          def hidden_input_attributes
+            attrs = {
+              type: 'hidden',
+              name: input_name,
+              value: @value,
+              data: { 'bui-pin-target': 'hiddenInput' }
+            }
+
+            # Aggiungi ID se specificato
+            if @options[:id]
+              attrs[:id] = @options[:id]
+            end
+
+            attrs
+          end
+
+          def input_name
+            if @form
+              @form.field_name(@name)
+            else
+              @name
+            end
+          end
+
+          def render_pin_inputs
+            @length.times.map do |index|
+              tag(:input, input_attributes(index))
+            end
+          end
+
+          def render_hidden_input
+            tag(:input, hidden_input_attributes)
+          end
+
+          def render_pin_container
+            content_tag(:div, class: container_classes, **controller_attributes) do
+              safe_join([
+                render_hidden_input,
+                *render_pin_inputs
+              ])
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -7,7 +7,7 @@ module BetterUi
         class Component < ViewComponent::Base
           # Costanti con classi Tailwind dirette
           RADIO_THEME = {
-            default: 'border-gray-300 text-blue-600 focus:border-blue-500 focus:ring-blue-500 checked:bg-blue-600 checked:border-blue-600',
+            default: 'border-gray-300 text-gray-800 focus:border-gray-600 focus:ring-gray-600 checked:bg-gray-800 checked:border-gray-800',
             white: 'border-gray-300 text-gray-900 focus:border-gray-500 focus:ring-gray-500 checked:bg-white checked:border-gray-900 checked:text-gray-900',
             red: 'border-gray-300 text-red-600 focus:border-red-500 focus:ring-red-500 checked:bg-red-600 checked:border-red-600',
             rose: 'border-gray-300 text-rose-600 focus:border-rose-500 focus:ring-rose-500 checked:bg-rose-600 checked:border-rose-600',
@@ -19,9 +19,9 @@ module BetterUi
           }.freeze
 
           RADIO_SIZE = {
-            small: 'h-4 w-4',
-            medium: 'h-5 w-5',
-            large: 'h-6 w-6'
+            small: 'h-2.5 w-2.5',
+            medium: 'h-3 w-3',
+            large: 'h-4 w-4'
           }.freeze
 
           RADIO_ROUNDED = {
@@ -35,15 +35,15 @@ module BetterUi
           RADIO_BASE_CLASSES = 'appearance-none border-2 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50'.freeze
 
           RADIO_LABEL_GAP = {
-            small: 'gap-2',
-            medium: 'gap-2.5',
-            large: 'gap-3'
+            small: 'gap-1.5',
+            medium: 'gap-2',
+            large: 'gap-2.5'
           }.freeze
 
           RADIO_LABEL_TEXT = {
-            small: 'text-sm',
-            medium: 'text-base',
-            large: 'text-lg'
+            small: 'text-xs',
+            medium: 'text-sm',
+            large: 'text-base'
           }.freeze
 
           attr_reader :name, :value, :checked, :required, :disabled, 

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

@@ -0,0 +1,4 @@
+<div class="<%= container_classes %>">
+  <%= render_stars_container %>
+  <%= render_value_display %>
+</div>

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

@@ -0,0 +1,272 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Rating
+        class Component < ViewComponent::Base
+          # Costanti con classi Tailwind dirette
+          RATING_THEME = {
+            default: 'text-yellow-400',
+            yellow: 'text-yellow-400',
+            orange: 'text-orange-400',
+            red: 'text-red-400',
+            pink: 'text-pink-400',
+            purple: 'text-purple-400',
+            blue: 'text-blue-400',
+            green: 'text-green-400',
+            gray: 'text-gray-400'
+          }.freeze
+
+          RATING_SIZE = {
+            small: 'text-sm',
+            medium: 'text-xl',
+            large: 'text-3xl'
+          }.freeze
+
+          RATING_EMPTY_COLOR = 'text-gray-300'.freeze
+          RATING_HALF_COLOR = 'text-yellow-300'.freeze
+
+          attr_reader :name, :value, :max_stars, :readonly, :half_stars,
+                      :theme, :size, :show_value, :form, :classes, :options
+
+          # @param name [String] Nome del campo rating (obbligatorio se non readonly)
+          # @param value [Float, Integer] Valore del rating attuale (0.0 - max_stars)
+          # @param max_stars [Integer] Numero massimo di stelle (default: 5)
+          # @param readonly [Boolean] Se il rating è in sola lettura
+          # @param half_stars [Boolean] Se supportare mezze stelle
+          # @param theme [Symbol] Tema del componente (:default, :yellow, :orange, :red, :pink, :purple, :blue, :green, :gray)
+          # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+          # @param show_value [Boolean] Se mostrare il valore numerico accanto alle stelle
+          # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Opzioni aggiuntive per attributi HTML
+          def initialize(name: nil, value: 0, max_stars: 5, readonly: false, half_stars: true,
+                         theme: :default, size: :medium, show_value: false, form: nil,
+                         classes: '', **options)
+            @name = name
+            @value = value.to_f
+            @max_stars = max_stars.to_i
+            @readonly = readonly
+            @half_stars = half_stars
+            @theme = theme.to_sym
+            @size = size.to_sym
+            @show_value = show_value
+            @form = form
+            @classes = classes
+            @options = options
+
+            validate_params
+          end
+
+          private
+
+          def validate_params
+            validate_theme
+            validate_size
+            validate_value
+            validate_max_stars
+            validate_name if interactive?
+          end
+
+          def validate_theme
+            return if RATING_THEME.key?(@theme)
+
+            raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{RATING_THEME.keys.join(', ')}"
+          end
+
+          def validate_size
+            return if RATING_SIZE.key?(@size)
+
+            raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{RATING_SIZE.keys.join(', ')}"
+          end
+
+          def validate_value
+            return if @value >= 0 && @value <= @max_stars
+
+            raise ArgumentError, "Value must be between 0 and #{@max_stars}, got: #{@value}"
+          end
+
+          def validate_max_stars
+            return if @max_stars > 0
+
+            raise ArgumentError, "Max stars must be greater than 0, got: #{@max_stars}"
+          end
+
+          def validate_name
+            return if @name.present?
+
+            raise ArgumentError, "Name is required for interactive rating components"
+          end
+
+          def interactive?
+            !@readonly
+          end
+
+          def container_classes
+            base_classes = ['inline-flex', 'items-center', 'gap-1']
+            base_classes << @classes if @classes.present?
+            base_classes.join(' ')
+          end
+
+          def rating_container_classes
+            base_classes = ['flex', 'items-center']
+            base_classes << (interactive? ? 'cursor-pointer' : 'cursor-default')
+            base_classes.join(' ')
+          end
+
+          def star_classes(index)
+            base_classes = [RATING_SIZE[@size], 'transition-colors', 'duration-150']
+            base_classes << (interactive? ? 'hover:scale-110 transform transition-transform' : '')
+            base_classes.compact.join(' ')
+          end
+
+          def controller_attributes
+            return {} unless interactive?
+
+            {
+              data: {
+                controller: 'bui-rating',
+                'bui-rating-rating-value': @value,
+                'bui-rating-max-value': @max_stars,
+                'bui-rating-readonly-value': @readonly,
+                'bui-rating-half-stars-value': @half_stars,
+                'bui-rating-name-value': @name,
+                action: 'keydown->bui-rating#keydown'
+              },
+              tabindex: '0'
+            }
+          end
+
+          def star_attributes(index)
+            attrs = {
+              data: {
+                'bui-rating-target': 'star',
+                index: index
+              }
+            }
+
+            if interactive?
+              attrs[:data][:action] = [
+                'click->bui-rating#starClick',
+                'mouseover->bui-rating#starHover',
+                'mouseleave->bui-rating#starLeave'
+              ].join(' ')
+            end
+
+            attrs
+          end
+
+          def hidden_input_attributes
+            return {} unless interactive?
+
+            {
+              type: 'hidden',
+              name: input_name,
+              value: @value,
+              data: { 'bui-rating-target': 'hiddenInput' }
+            }
+          end
+
+          def input_name
+            if @form
+              @form.field_name(@name)
+            else
+              @name
+            end
+          end
+
+          def input_id
+            @options[:id] || "rating_#{@name}"
+          end
+
+          def display_value
+            if @value % 1 == 0
+              @value.to_i.to_s
+            else
+              @value.to_s
+            end
+          end
+
+          def star_display_state(index)
+            star_number = index + 1
+            
+            if @value >= star_number
+              :full
+            elsif @half_stars && @value >= star_number - 0.5
+              :half
+            else
+              :empty
+            end
+          end
+
+          def star_color(state)
+            case state
+            when :full
+              RATING_THEME[@theme]
+            when :half
+              RATING_HALF_COLOR
+            when :empty
+              RATING_EMPTY_COLOR
+            end
+          end
+
+          def star_symbol(state)
+            case state
+            when :full, :half
+              '★'
+            when :empty
+              '☆'
+            end
+          end
+
+          def render_star(index)
+            state = star_display_state(index)
+            
+            content_tag(:span, star_attributes(index).merge(class: "#{star_classes(index)} #{star_color(state)}")) do
+              if state == :half
+                render_half_star
+              else
+                star_symbol(state)
+              end
+            end
+          end
+
+          def render_half_star
+            content_tag(:span, class: 'relative inline-block') do
+              safe_join([
+                content_tag(:span, '☆', class: RATING_EMPTY_COLOR),
+                content_tag(:span, class: 'absolute inset-0 overflow-hidden w-1/2') do
+                  content_tag(:span, '★', class: RATING_THEME[@theme])
+                end
+              ])
+            end
+          end
+
+          def render_hidden_input
+            return unless interactive?
+            
+            tag(:input, hidden_input_attributes)
+          end
+
+          def render_value_display
+            return unless @show_value
+            
+            content_tag(:span, class: "ml-2 text-sm text-gray-600", data: { 'bui-rating-target': 'display' }) do
+              "(#{display_value})"
+            end
+          end
+
+          def render_stars_container
+            content_tag(:div, class: rating_container_classes, **controller_attributes) do
+              safe_join([
+                render_hidden_input,
+                *@max_stars.times.map { |i| render_star(i) }
+              ].compact)
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -1,16 +1,78 @@
-<select <%= tag.attributes(select_attributes).html_safe %>>
-  <% if @placeholder.present? && !@multiple %>
-    <option value="" disabled <%= "selected" if @selected.nil? %>><%= @placeholder %></option>
-  <% end %>
-  <% @options.each do |option| %>
-    <option 
-      value="<%= option[:value] %>" 
-      <%= "selected" if selected?(option) %> 
-      <%= "disabled" if option[:disabled] %>
-      <%= option[:html]&.map { |k, v| "#{k}=\"#{v}\"" }&.join(' ').to_s.html_safe %>
+<%= tag.div(**container_attributes) do %>
+  <!-- Hidden input for form compatibility -->
+  <input 
+    type="hidden" 
+    name="<%= input_name %>" 
+    id="<%= input_id %>"
+    value="<%= hidden_input_value %>"
+    data-select-target="hiddenInput"
+    <%= "required" if @required %>
+    <%= "disabled" if @disabled %>
+  />
+
+  <!-- Trigger button -->
+  <button 
+    type="button"
+    class="<%= trigger_classes %>"
+    data-select-target="trigger"
+    data-action="click->select#toggle"
+    <%= "disabled" if @disabled %>
+  >
+    <span data-select-text class="<%= trigger_text_classes %>">
+      <%= trigger_text %>
+    </span>
+    <%= chevron_icon %>
+  </button>
+
+  <!-- Badge container for multi-select -->
+  <% if @multiple %>
+    <div 
+      class="<%= badge_container_classes %>"
+      data-select-target="badgeContainer"
+      style="<%= @selected.empty? ? 'display: none;' : '' %>"
     >
-      <%= option[:label] %>
-    </option>
+      <!-- Badges will be populated by Stimulus -->
+    </div>
   <% end %>
-  <%= content %>
-</select>
+
+  <!-- Dropdown panel -->
+  <div class="<%= dropdown_classes %>" data-select-target="dropdown">
+    <!-- Search input -->
+    <% if @searchable %>
+      <div class="p-1">
+        <input 
+          type="text"
+          placeholder="<%= @search_placeholder %>"
+          class="<%= search_input_classes %>"
+          data-select-target="search"
+          data-action="input->select#search"
+        />
+      </div>
+    <% end %>
+
+    <!-- Options container -->
+    <div class="<%= options_container_classes %>">
+      <% @options.each do |option| %>
+        <div 
+          class="<%= option_classes %> <%= 'bg-gray-100' if option_selected?(option) %>"
+          data-select-target="option"
+          data-value="<%= option[:value] %>"
+          data-action="click->select#selectOption"
+          <%= "data-disabled" if option[:disabled] %>
+        >
+          <span><%= option[:label] %></span>
+          <% if option_selected?(option) %>
+            <span class="checkmark text-gray-600">✓</span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+    <!-- Empty state -->
+    <% if @options.empty? %>
+      <div class="px-3 py-6 text-center text-gray-500 text-sm">
+        Nessuna opzione disponibile
+      </div>
+    <% end %>
+  </div>
+<% end %>