better_ui 0.6.0 → 0.7.0

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

@@ -1,249 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Input
-      module Select
-        class Component < ViewComponent::Base
-          # Costanti con classi Tailwind dirette
-          SELECT_THEME = {
-            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
-
-          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
-
-          SELECT_ROUNDED = {
-            none: 'rounded-none',
-            small: 'rounded-sm',
-            medium: 'rounded',
-            large: 'rounded-lg',
-            full: 'rounded-full'
-          }.freeze
-
-          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] 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,
-            searchable: true,
-            theme: :default, 
-            size: :medium, 
-            rounded: :medium, 
-            placeholder: nil,
-            search_placeholder: nil,
-            max_height: "300px",
-            form: nil,
-            classes: '', 
-            **html_options
-          )
-            @name = name
-            @options = options
-            @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 || (multiple ? "Seleziona opzioni..." : "Seleziona...")
-            @search_placeholder = search_placeholder || "Cerca..."
-            @max_height = max_height
-            @form = form
-            @classes = classes
-            @html_options = html_options
-
-            validate_params
-          end
-
-          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],
-              'cursor-pointer flex items-center justify-between',
-              @disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'
-            ].compact.join(' ')
-          end
-
-          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
-
-          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
-
-          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 input_name
-            if @form.present?
-              @form.field_name(@name)
-            else
-              @multiple ? "#{@name}[]" : @name
-            end
-          end
-
-          def input_id
-            if @form.present?
-              @form.field_id(@name)
-            else
-              @name.to_s.gsub(/[\[\]]+/, '_').gsub(/_$/, '')
-            end
-          end
-
-          def hidden_input_value
-            if @multiple
-              @selected.to_json
-            else
-              @selected.first || ''
-            end
-          end
-
-          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 trigger_text_classes
-            @selected.empty? ? 'text-gray-500' : 'text-gray-900'
-          end
-
-          def selected_option_values
-            @selected.map(&:to_s)
-          end
-
-          def option_selected?(option)
-            selected_option_values.include?(option[:value].to_s)
-          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

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

@@ -1,5 +0,0 @@
-<select name="<%= name %>" class="<%= classes %>" <%= "required" if required %> <%= "disabled" if disabled %> <%= "multiple" if multiple %> <%= options_html.map { |key, value| "#{key}=\"#{value}\"" }.join(" ") %>>
-  <% options.each do |option| %>
-    <option value="<%= option[:value] %>" <%= "selected" if option[:value] == selected %>><%= option[:label] %></option>
-  <% end %>
-</select>

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

@@ -1,37 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Input
-      module Select
-        class SelectComponent < ViewComponent::Base
-          attr_reader :name, :options, :selected, :required, :disabled, :multiple, :options_html, :classes, :html_options
-
-          BASE_SELECT_CLASSES = "h-10 px-3 py-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed"
-          # @param name [String] Nome del campo
-          # @param options [Array] Opzioni del select ([{value => label}, {value => label}, ...])
-          # @param selected [String, Array] Valore selezionato
-          # @param required [Boolean] Se il campo è obbligatorio
-          # @param disabled [Boolean] Se il campo è disabilitato
-          # @param multiple [Boolean] Se il select è multiplo
-          # @param options_html [Hash] Opzioni HTML aggiuntive per le option
-          # @param classes [String] Classi del campo
-          # @param html_options [Hash] Opzioni HTML del campo
-          def initialize(name:, options:, selected: nil, required: false, disabled: false, multiple: false, options_html: {}, classes: '', **html_options)
-            @name = name
-            @type = :select
-            @required = required
-            @disabled = disabled
-            @options = options.map { |option| { value: option[:value], label: option[:label] } }
-            @selected = selected
-            @multiple = multiple
-            @options_html = options_html
-            @classes = BASE_SELECT_CLASSES + classes
-
-            puts "Optionssssssssssssssssssssssss: #{selected}" 
-          end
-        end
-      end
-    end
-  end
-end 

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

@@ -1,5 +0,0 @@
-<% if @form %>
-  <%= @form.text_field(@name, **form_input_attributes) %>
-<% else %>
-  <%= tag.input(**input_attributes) %>
-<% end %>

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

@@ -1,171 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Input
-      module Text
-        class Component < ViewComponent::Base
-          attr_reader :name, :value, :placeholder, :required, :disabled, :classes, :options,
-                      :theme, :size, :rounded, :form, :type
-
-          # Temi supportati per il Text Input
-          TEXT_INPUT_THEME = {
-            default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
-            white: 'border-white focus:border-gray-300 focus:ring-gray-300 bg-white',
-            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
-
-          # Dimensioni supportate per il Text Input
-          TEXT_INPUT_SIZES = {
-            small: 'h-8 px-2 py-1 text-xs',
-            medium: 'h-10 px-3 py-2 text-sm',
-            large: 'h-12 px-4 py-3 text-base'
-          }.freeze
-
-          # Border radius supportati per il Text Input
-          TEXT_INPUT_RADIUS = {
-            none: 'rounded-none',
-            small: 'rounded-sm',
-            medium: 'rounded-md',
-            large: 'rounded-lg',
-            full: 'rounded-full'
-          }.freeze
-
-          # Tipi supportati per il Text Input
-          TEXT_INPUT_TYPES = [
-            :text, :password, :email, :tel, :url, :number, :search,
-            :date, :time, :datetime_local, :month, :week, :color
-          ].freeze
-
-          # Classi base per il Text Input
-          TEXT_INPUT_BASE_CLASSES = 'block w-full border shadow-sm disabled:bg-gray-100 disabled:cursor-not-allowed focus:outline-none focus:ring-1'
-
-          # @param name [String] Nome del campo input
-          # @param value [String] Valore del campo
-          # @param placeholder [String] Placeholder del campo
-          # @param required [Boolean] Se il campo è obbligatorio
-          # @param disabled [Boolean] Se il campo è disabilitato
-          # @param type [Symbol] Tipo del campo input (:text, :password, :email, :tel, :url, :number, :search, :date, :time, :datetime_local, :month, :week, :color)
-          # @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] Form builder Rails opzionale
-          # @param options [Hash] Opzioni aggiuntive per l'input
-          def initialize(name:, value: nil, placeholder: nil, required: false, disabled: false, 
-                         type: :text, theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
-            @name = name
-            @value = value
-            @placeholder = placeholder
-            @required = required
-            @disabled = disabled
-            @type = type
-            @theme = theme
-            @size = size
-            @rounded = rounded
-            @classes = classes
-            @form = form
-            @options = options
-
-            validate_params
-            super()
-          end
-
-          # Attributi per l'elemento input standalone
-          def input_attributes
-            {
-              type: @type,
-              name: @name,
-              id: @name,
-              value: @value,
-              placeholder: @placeholder,
-              required: @required,
-              disabled: @disabled,
-              class: build_classes
-            }.merge(@options)
-          end
-
-          # Attributi per l'elemento input con form builder
-          def form_input_attributes
-            {
-              class: build_classes,
-              placeholder: @placeholder,
-              required: @required,
-              disabled: @disabled
-            }.merge(@options)
-          end
-
-          private
-
-          # Costruisce le classi CSS complete
-          def build_classes
-            [
-              TEXT_INPUT_BASE_CLASSES,
-              get_theme_classes,
-              get_size_classes,
-              get_rounded_classes,
-              @classes
-            ].compact.join(' ')
-          end
-
-          # Restituisce le classi del tema
-          def get_theme_classes
-            TEXT_INPUT_THEME[@theme]
-          end
-
-          # Restituisce le classi della dimensione
-          def get_size_classes
-            TEXT_INPUT_SIZES[@size]
-          end
-
-          # Restituisce le classi del border radius
-          def get_rounded_classes
-            TEXT_INPUT_RADIUS[@rounded]
-          end
-
-          # Valida i parametri del componente
-          def validate_params
-            validate_type
-            validate_theme
-            validate_size
-            validate_rounded
-          end
-
-          # Valida il tema
-          def validate_theme
-            return if TEXT_INPUT_THEME.key?(@theme)
-
-            raise ArgumentError, "Tema non valido: #{@theme}. Temi supportati: #{TEXT_INPUT_THEME.keys.join(', ')}"
-          end
-
-          # Valida la dimensione
-          def validate_size
-            return if TEXT_INPUT_SIZES.key?(@size)
-
-            raise ArgumentError, "Dimensione non valida: #{@size}. Dimensioni supportate: #{TEXT_INPUT_SIZES.keys.join(', ')}"
-          end
-
-          # Valida il border radius
-          def validate_rounded
-            return if TEXT_INPUT_RADIUS.key?(@rounded)
-
-            raise ArgumentError, "Border radius non valido: #{@rounded}. Valori supportati: #{TEXT_INPUT_RADIUS.keys.join(', ')}"
-          end
-
-          # Valida il tipo
-          def validate_type
-            return if TEXT_INPUT_TYPES.include?(@type)
-
-            raise ArgumentError, "Tipo non valido: #{@type}. Tipi supportati: #{TEXT_INPUT_TYPES.join(', ')}"
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,5 +0,0 @@
-<% if @form %>
-  <%= @form.text_area(@name, **form_textarea_attributes) %>
-<% else %>
-  <%= tag.textarea(**textarea_attributes) %>
-<% end %>

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

@@ -1,166 +0,0 @@
-# frozen_string_literal: true
-
-module BetterUi
-  module General
-    module Input
-      module Textarea
-        class Component < ViewComponent::Base
-          attr_reader :name, :value, :placeholder, :required, :disabled, :classes, :options,
-                      :theme, :size, :rounded, :form, :rows
-
-          # Temi supportati per il Textarea
-          TEXTAREA_THEME = {
-            default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
-            white: 'border-white focus:border-gray-300 focus:ring-gray-300 bg-white',
-            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
-
-          # Dimensioni supportate per il Textarea
-          TEXTAREA_SIZES = {
-            small: 'px-2 py-1 text-xs',
-            medium: 'px-3 py-2 text-sm',
-            large: 'px-4 py-3 text-base'
-          }.freeze
-
-          # Border radius supportati per il Textarea
-          TEXTAREA_RADIUS = {
-            none: 'rounded-none',
-            small: 'rounded-sm',
-            medium: 'rounded-md',
-            large: 'rounded-lg',
-            full: 'rounded-2xl'
-          }.freeze
-
-          # Classi base per il Textarea
-          TEXTAREA_BASE_CLASSES = 'block w-full border shadow-sm disabled:bg-gray-100 disabled:cursor-not-allowed focus:outline-none focus:ring-1 resize-y'
-
-          # @param name [String] Nome del campo textarea
-          # @param value [String] Valore del campo
-          # @param placeholder [String] Placeholder del campo
-          # @param required [Boolean] Se il campo è obbligatorio
-          # @param disabled [Boolean] Se il campo è disabilitato
-          # @param rows [Integer] Numero di righe per la textarea
-          # @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] Form builder Rails opzionale
-          # @param options [Hash] Opzioni aggiuntive per la textarea
-          def initialize(name:, value: nil, placeholder: nil, required: false, disabled: false, 
-                         rows: 3, theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
-            @name = name
-            @value = value
-            @placeholder = placeholder
-            @required = required
-            @disabled = disabled
-            @rows = rows
-            @theme = theme
-            @size = size
-            @rounded = rounded
-            @classes = classes
-            @form = form
-            @options = options
-
-            validate_params
-            super()
-          end
-
-          # Attributi per l'elemento textarea standalone
-          def textarea_attributes
-            {
-              name: @name,
-              id: @name,
-              value: @value,
-              placeholder: @placeholder,
-              required: @required,
-              disabled: @disabled,
-              rows: @rows,
-              class: build_classes
-            }.merge(@options)
-          end
-
-          # Attributi per l'elemento textarea con form builder
-          def form_textarea_attributes
-            {
-              class: build_classes,
-              placeholder: @placeholder,
-              required: @required,
-              disabled: @disabled,
-              rows: @rows
-            }.merge(@options)
-          end
-
-          private
-
-          # Costruisce le classi CSS complete
-          def build_classes
-            [
-              TEXTAREA_BASE_CLASSES,
-              get_theme_classes,
-              get_size_classes,
-              get_rounded_classes,
-              @classes
-            ].compact.join(' ')
-          end
-
-          # Restituisce le classi del tema
-          def get_theme_classes
-            TEXTAREA_THEME[@theme]
-          end
-
-          # Restituisce le classi della dimensione
-          def get_size_classes
-            TEXTAREA_SIZES[@size]
-          end
-
-          # Restituisce le classi del border radius
-          def get_rounded_classes
-            TEXTAREA_RADIUS[@rounded]
-          end
-
-          # Valida i parametri del componente
-          def validate_params
-            validate_theme
-            validate_size
-            validate_rounded
-            validate_rows
-          end
-
-          # Valida il tema
-          def validate_theme
-            return if TEXTAREA_THEME.key?(@theme)
-
-            raise ArgumentError, "Tema non valido: #{@theme}. Temi supportati: #{TEXTAREA_THEME.keys.join(', ')}"
-          end
-
-          # Valida la dimensione
-          def validate_size
-            return if TEXTAREA_SIZES.key?(@size)
-
-            raise ArgumentError, "Dimensione non valida: #{@size}. Dimensioni supportate: #{TEXTAREA_SIZES.keys.join(', ')}"
-          end
-
-          # Valida il border radius
-          def validate_rounded
-            return if TEXTAREA_RADIUS.key?(@rounded)
-
-            raise ArgumentError, "Border radius non valido: #{@rounded}. Valori supportati: #{TEXTAREA_RADIUS.keys.join(', ')}"
-          end
-
-          # Valida il numero di righe
-          def validate_rows
-            return if @rows.is_a?(Integer) && @rows.positive?
-
-            raise ArgumentError, "Il numero di righe deve essere un intero positivo: #{@rows}"
-          end
-        end
-      end
-    end
-  end
-end

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

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