better_ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,238 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Checkbox
+        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',
+            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
+
+          CHECKBOX_SIZE = {
+            small: 'h-4 w-4',
+            medium: 'h-5 w-5',
+            large: 'h-6 w-6'
+          }.freeze
+
+          CHECKBOX_ROUNDED = {
+            none: 'rounded-none',
+            small: 'rounded-sm',
+            medium: 'rounded',
+            large: 'rounded-lg',
+            full: 'rounded-full'
+          }.freeze
+
+          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'
+          }.freeze
+
+          CHECKBOX_LABEL_TEXT = {
+            small: 'text-sm',
+            medium: 'text-base',
+            large: 'text-lg'
+          }.freeze
+
+          attr_reader :name, :value, :checked, :required, :disabled, :indeterminate, 
+                      :label, :label_position, :theme, :size, :rounded, :classes, :form, :options
+
+          # @param name [String] Nome del campo checkbox (obbligatorio)
+          # @param value [String] Valore del checkbox (default: "1")
+          # @param checked [Boolean] Se il checkbox è selezionato
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @param indeterminate [Boolean] Se il checkbox è in stato indeterminate
+          # @param label [String, nil] Testo della label associata al checkbox
+          # @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: "1", checked: false, required: false, disabled: false, 
+                         indeterminate: false, label: nil, label_position: :right, theme: :default, 
+                         size: :medium, rounded: :medium, classes: '', form: nil, **options)
+            @name = name
+            @value = value
+            @checked = checked
+            @required = required
+            @disabled = disabled
+            @indeterminate = indeterminate
+            @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 CHECKBOX_THEME.key?(@theme)
+
+            raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{CHECKBOX_THEME.keys.join(', ')}"
+          end
+
+          def validate_size
+            return if CHECKBOX_SIZE.key?(@size)
+
+            raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{CHECKBOX_SIZE.keys.join(', ')}"
+          end
+
+          def validate_rounded
+            return if CHECKBOX_ROUNDED.key?(@rounded)
+
+            raise ArgumentError, "Invalid rounded: #{@rounded}. Valid rounded options are: #{CHECKBOX_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 checkbox_classes
+            [
+              CHECKBOX_BASE_CLASSES,
+              CHECKBOX_THEME[@theme],
+              CHECKBOX_SIZE[@size],
+              CHECKBOX_ROUNDED[@rounded],
+              @classes
+            ].compact.join(' ')
+          end
+
+          def input_attributes
+            attrs = {
+              type: 'checkbox',
+              name: input_name,
+              value: @value,
+              class: checkbox_classes,
+              checked: @checked,
+              required: @required,
+              disabled: @disabled,
+              id: input_id
+            }
+
+            # Aggiungi indeterminate via JavaScript se necessario
+            if @indeterminate
+              attrs['data-indeterminate'] = 'true'
+            end
+
+            # 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] || "checkbox_#{@name}"
+          end
+
+          def label_classes
+            [
+              'flex items-center cursor-pointer',
+              @disabled ? 'opacity-50 cursor-not-allowed' : '',
+              CHECKBOX_LABEL_GAP[@size]
+            ].compact.join(' ')
+          end
+
+          def label_text_classes
+            CHECKBOX_LABEL_TEXT[@size]
+          end
+
+          def input_tag
+            if @form
+              form_checkbox
+            else
+              manual_input
+            end
+          end
+
+          def form_checkbox
+            @form.check_box(@name, {
+              class: checkbox_classes,
+              id: input_id,
+              checked: @checked,
+              disabled: @disabled,
+              required: @required,
+              data: @indeterminate ? { indeterminate: 'true' } : {},
+              **@options
+            }, @value)
+          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_checkbox_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/datetime/component.html.erb

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

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

@@ -0,0 +1,223 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Datetime
+        class Component < ViewComponent::Base
+          attr_reader :name, :value, :required, :disabled, :classes, :options,
+                      :theme, :size, :rounded, :form, :min, :max, :type
+
+          # Temi supportati per il Datetime Input
+          DATETIME_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 Datetime Input
+          DATETIME_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 Datetime Input
+          DATETIME_INPUT_RADIUS = {
+            none: 'rounded-none',
+            small: 'rounded-sm',
+            medium: 'rounded-md',
+            large: 'rounded-lg',
+            full: 'rounded-full'
+          }.freeze
+
+          # Tipi supportati per il Datetime Input
+          DATETIME_INPUT_TYPES = [
+            :date, :month, :week, :time
+          ].freeze
+
+          # Formati di validazione per tipo
+          DATETIME_FORMAT_PATTERNS = {
+            date: /^\d{4}-\d{2}-\d{2}$/,
+            month: /^\d{4}-\d{2}$/,
+            week: /^\d{4}-W\d{2}$/,
+            time: /^\d{2}:\d{2}$/
+          }.freeze
+
+          # Classi base per il Datetime Input
+          DATETIME_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 type [Symbol] Tipo del campo datetime (:date, :month, :week, :time)
+          # @param value [String] Valore del campo nel formato appropriato per il tipo
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @param min [String] Valore minimo selezionabile nel formato appropriato
+          # @param max [String] Valore massimo selezionabile nel formato appropriato
+          # @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:, type: :date, value: nil, required: false, disabled: false, 
+                         min: nil, max: nil, theme: :default, size: :medium, rounded: :medium, classes: '', form: nil, **options)
+            @name = name
+            @type = type
+            @value = value
+            @required = required
+            @disabled = disabled
+            @min = min
+            @max = max
+            @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,
+              required: @required,
+              disabled: @disabled,
+              min: @min,
+              max: @max,
+              class: build_classes
+            }.compact.merge(@options)
+          end
+
+          # Attributi per l'elemento input con form builder
+          def form_input_attributes
+            {
+              class: build_classes,
+              required: @required,
+              disabled: @disabled,
+              min: @min,
+              max: @max
+            }.compact.merge(@options)
+          end
+
+          # Metodo helper per Rails form builder specifico per tipo
+          def form_field_method
+            case @type
+            when :date then :date_field
+            when :month then :month_field
+            when :week then :week_field
+            when :time then :time_field
+            else :date_field
+            end
+          end
+
+          private
+
+          # Costruisce le classi CSS complete
+          def build_classes
+            [
+              DATETIME_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
+            DATETIME_INPUT_THEME[@theme]
+          end
+
+          # Restituisce le classi della dimensione
+          def get_size_classes
+            DATETIME_INPUT_SIZES[@size]
+          end
+
+          # Restituisce le classi del border radius
+          def get_rounded_classes
+            DATETIME_INPUT_RADIUS[@rounded]
+          end
+
+          # Valida i parametri del componente
+          def validate_params
+            validate_type
+            validate_theme
+            validate_size
+            validate_rounded
+            validate_datetime_format
+          end
+
+          # Valida il tipo datetime
+          def validate_type
+            return if DATETIME_INPUT_TYPES.include?(@type)
+
+            raise ArgumentError, "Tipo non valido: #{@type}. Tipi supportati: #{DATETIME_INPUT_TYPES.join(', ')}"
+          end
+
+          # Valida il tema
+          def validate_theme
+            return if DATETIME_INPUT_THEME.key?(@theme)
+
+            raise ArgumentError, "Tema non valido: #{@theme}. Temi supportati: #{DATETIME_INPUT_THEME.keys.join(', ')}"
+          end
+
+          # Valida la dimensione
+          def validate_size
+            return if DATETIME_INPUT_SIZES.key?(@size)
+
+            raise ArgumentError, "Dimensione non valida: #{@size}. Dimensioni supportate: #{DATETIME_INPUT_SIZES.keys.join(', ')}"
+          end
+
+          # Valida il border radius
+          def validate_rounded
+            return if DATETIME_INPUT_RADIUS.key?(@rounded)
+
+            raise ArgumentError, "Border radius non valido: #{@rounded}. Valori supportati: #{DATETIME_INPUT_RADIUS.keys.join(', ')}"
+          end
+
+          # Valida il formato dei valori datetime
+          def validate_datetime_format
+            validate_single_datetime(@value, 'value') if @value
+            validate_single_datetime(@min, 'min') if @min
+            validate_single_datetime(@max, 'max') if @max
+          end
+
+          # Valida un singolo valore datetime
+          def validate_single_datetime(datetime_string, field_name)
+            return if datetime_string.nil? || datetime_string.to_s.strip.empty?
+
+            pattern = DATETIME_FORMAT_PATTERNS[@type]
+            return if pattern && datetime_string.match?(pattern)
+
+            expected_format = get_expected_format(@type)
+            raise ArgumentError, "Il campo #{field_name} deve essere nel formato #{expected_format} per il tipo #{@type}: #{datetime_string}"
+          end
+
+          # Restituisce il formato atteso per il tipo
+          def get_expected_format(type)
+            case type
+            when :date then 'YYYY-MM-DD'
+            when :month then 'YYYY-MM'
+            when :week then 'YYYY-WXX'
+            when :time then 'HH:MM'
+            else 'formato valido'
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<% if @label %>
+  <%= render_radio_with_label %>
+<% else %>
+  <%= input_tag %>
+<% end %>

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

@@ -0,0 +1,230 @@
+# 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-blue-600 focus:border-blue-500 focus:ring-blue-500 checked:bg-blue-600 checked:border-blue-600',
+            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-4 w-4',
+            medium: 'h-5 w-5',
+            large: 'h-6 w-6'
+          }.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-2',
+            medium: 'gap-2.5',
+            large: 'gap-3'
+          }.freeze
+
+          RADIO_LABEL_TEXT = {
+            small: 'text-sm',
+            medium: 'text-base',
+            large: 'text-lg'
+          }.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