better_ui 0.6.0 → 0.7.1

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

@@ -1,230 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Input
-      module Radio
-        class Component < ViewComponent::Base
-          # Costanti con classi Tailwind dirette
-          RADIO_THEME = {
-            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',
-            orange: 'border-gray-300 text-orange-600 focus:border-orange-500 focus:ring-orange-500 checked:bg-orange-600 checked:border-orange-600',
-            green: 'border-gray-300 text-green-600 focus:border-green-500 focus:ring-green-500 checked:bg-green-600 checked:border-green-600',
-            blue: 'border-gray-300 text-blue-600 focus:border-blue-500 focus:ring-blue-500 checked:bg-blue-600 checked:border-blue-600',
-            yellow: 'border-gray-300 text-yellow-600 focus:border-yellow-500 focus:ring-yellow-500 checked:bg-yellow-600 checked:border-yellow-600',
-            violet: 'border-gray-300 text-violet-600 focus:border-violet-500 focus:ring-violet-500 checked:bg-violet-600 checked:border-violet-600'
-          }.freeze
-
-          RADIO_SIZE = {
-            small: 'h-2.5 w-2.5',
-            medium: 'h-3 w-3',
-            large: 'h-4 w-4'
-          }.freeze
-
-          RADIO_ROUNDED = {
-            none: 'rounded-none',
-            small: 'rounded-sm',
-            medium: 'rounded',
-            large: 'rounded-lg',
-            full: 'rounded-full'
-          }.freeze
-
-          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-1.5',
-            medium: 'gap-2',
-            large: 'gap-2.5'
-          }.freeze
-
-          RADIO_LABEL_TEXT = {
-            small: 'text-xs',
-            medium: 'text-sm',
-            large: 'text-base'
-          }.freeze
-
-          attr_reader :name, :value, :checked, :required, :disabled, 
-                      :label, :label_position, :theme, :size, :rounded, :classes, :form, :options
-
-          # @param name [String] Nome del campo radio (obbligatorio)
-          # @param value [String] Valore del radio button (obbligatorio)
-          # @param checked [Boolean] Se il radio è selezionato
-          # @param required [Boolean] Se il campo è obbligatorio
-          # @param disabled [Boolean] Se il campo è disabilitato
-          # @param label [String, nil] Testo della label associata al radio
-          # @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 rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
-          # @param classes [String] Classi CSS aggiuntive
-          # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
-          # @param options [Hash] Opzioni aggiuntive per l'input (es. data attributes, aria attributes)
-          def initialize(name:, value:, checked: false, required: false, disabled: false, 
-                         label: nil, label_position: :right, theme: :default, 
-                         size: :medium, rounded: :full, classes: '', form: nil, **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
-            @rounded = rounded.to_sym
-            @classes = classes
-            @form = form
-            @options = options
-
-            validate_params
-          end
-
-          private
-
-          def validate_params
-            validate_theme
-            validate_size
-            validate_rounded
-            validate_label_position
-          end
-
-          def validate_theme
-            return if RADIO_THEME.key?(@theme)
-
-            raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{RADIO_THEME.keys.join(', ')}"
-          end
-
-          def validate_size
-            return if RADIO_SIZE.key?(@size)
-
-            raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{RADIO_SIZE.keys.join(', ')}"
-          end
-
-          def validate_rounded
-            return if RADIO_ROUNDED.key?(@rounded)
-
-            raise ArgumentError, "Invalid rounded: #{@rounded}. Valid rounded options are: #{RADIO_ROUNDED.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 radio_classes
-            [
-              RADIO_BASE_CLASSES,
-              RADIO_THEME[@theme],
-              RADIO_SIZE[@size],
-              RADIO_ROUNDED[@rounded],
-              @classes
-            ].compact.join(' ')
-          end
-
-          def input_attributes
-            attrs = {
-              type: 'radio',
-              name: input_name,
-              value: @value,
-              class: radio_classes,
-              checked: @checked,
-              required: @required,
-              disabled: @disabled,
-              id: input_id
-            }
-
-            # Unisci le opzioni personalizzate
-            attrs.merge(@options)
-          end
-
-          def input_name
-            if @form
-              @form.field_name(@name)
-            else
-              @name
-            end
-          end
-
-          def input_id
-            @options[:id] || "radio_#{@name}_#{@value}"
-          end
-
-          def label_classes
-            [
-              'flex items-center cursor-pointer',
-              @disabled ? 'opacity-50 cursor-not-allowed' : '',
-              RADIO_LABEL_GAP[@size]
-            ].compact.join(' ')
-          end
-
-          def label_text_classes
-            RADIO_LABEL_TEXT[@size]
-          end
-
-          def input_tag
-            if @form
-              form_radio
-            else
-              manual_input
-            end
-          end
-
-          def form_radio
-            @form.radio_button(@name, @value, {
-              class: radio_classes,
-              id: input_id,
-              checked: @checked,
-              disabled: @disabled,
-              required: @required,
-              **@options
-            })
-          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_radio_with_label
-            if @label_position == :left
-              label_left_content
-            else
-              label_right_content
-            end
-          end
-
-          def label_left_content
-            content_tag(:label, class: label_classes, for: input_id) do
-              safe_join([
-                content_tag(:span, @label, class: label_text_classes),
-                input_tag
-              ])
-            end
-          end
-
-          def label_right_content
-            content_tag(:label, class: label_classes, for: input_id) do
-              safe_join([
-                input_tag,
-                content_tag(:span, @label, class: label_text_classes)
-              ])
-            end
-          end
-        end
-      end
-    end
-  end
-end

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

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

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

@@ -1,272 +0,0 @@
-# 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,78 +0,0 @@
-<%= 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;' : '' %>"
-    >
-      <!-- Badges will be populated by Stimulus -->
-    </div>
-  <% end %>
-
-  <!-- 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 %>