better_ui 0.1.0 → 0.1.1

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

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

@@ -0,0 +1,16 @@
+<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 %>
+    >
+      <%= option[:label] %>
+    </option>
+  <% end %>
+  <%= content %>
+</select>

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

@@ -0,0 +1,184 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Select
+        class Component < ViewComponent::Base
+          attr_reader :name, :options, :selected, :required, :disabled, :multiple, 
+                      :theme, :size, :rounded, :placeholder, :form, :options_html, 
+                      :classes, :html_options
+
+          # Classi base sempre presenti
+          SELECT_BASE_CLASSES = "block w-full border shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-0"
+
+          # Temi di select con classi Tailwind
+          SELECT_THEME = {
+            default: "bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500",
+            white: "bg-white border-gray-300 focus:border-blue-500 focus:ring-blue-500",
+            red: "bg-white border-red-300 focus:border-red-500 focus:ring-red-500",
+            rose: "bg-white border-rose-300 focus:border-rose-500 focus:ring-rose-500",
+            orange: "bg-white border-orange-300 focus:border-orange-500 focus:ring-orange-500",
+            green: "bg-white border-green-300 focus:border-green-500 focus:ring-green-500",
+            blue: "bg-white border-blue-300 focus:border-blue-500 focus:ring-blue-500",
+            yellow: "bg-white border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500",
+            violet: "bg-white border-violet-300 focus:border-violet-500 focus:ring-violet-500"
+          }.freeze
+
+          # Dimensioni con classi Tailwind
+          SELECT_SIZE = {
+            small: "px-2 py-1.5 text-xs",
+            medium: "px-3 py-2 text-sm",
+            large: "px-4 py-3 text-base"
+          }.freeze
+          
+          # Border radius con classi Tailwind
+          SELECT_ROUNDED = {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+          }.freeze
+
+          # Stati del select
+          SELECT_STATE = {
+            disabled: "bg-gray-100 cursor-not-allowed opacity-75"
+          }.freeze
+
+          # @param name [String] Name of the select field (required)
+          # @param options [Array<Hash>] Array of options for the select in format [{value: 'value', label: 'label'}, ...]
+          # @param selected [String, Array, nil] Selected value or values
+          # @param required [Boolean] Whether the field is required
+          # @param disabled [Boolean] Whether the field is disabled
+          # @param multiple [Boolean] Whether multiple options can be selected
+          # @param theme [Symbol] Component theme (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+          # @param size [Symbol] Component size (:small, :medium, :large)
+          # @param rounded [Symbol] Border radius (:none, :small, :medium, :large, :full)
+          # @param placeholder [String, nil] Placeholder text for the field (creates an initial disabled option)
+          # @param form [ActionView::Helpers::FormBuilder, nil] Optional Rails form builder
+          # @param options_html [Hash] Additional HTML attributes for option tags
+          # @param classes [String] Additional CSS classes
+          # @param html_options [Hash] Additional HTML attributes for the select tag
+          def initialize(
+            name:, 
+            options:, 
+            selected: nil, 
+            required: false, 
+            disabled: false, 
+            multiple: false, 
+            theme: :default, 
+            size: :medium, 
+            rounded: :medium, 
+            placeholder: nil,
+            form: nil,
+            options_html: {}, 
+            classes: '', 
+            **html_options
+          )
+            @name = name
+            @options = options
+            @selected = selected
+            @required = required
+            @disabled = disabled
+            @multiple = multiple
+            @theme = theme.to_sym
+            @size = size.to_sym
+            @rounded = rounded.to_sym
+            @placeholder = placeholder
+            @form = form
+            @options_html = options_html
+            @classes = classes
+            @html_options = html_options
+
+            validate_params
+          end
+
+          def combined_classes
+            [
+              SELECT_BASE_CLASSES,
+              SELECT_THEME[@theme],
+              SELECT_SIZE[@size],
+              SELECT_ROUNDED[@rounded],
+              @disabled ? SELECT_STATE[:disabled] : nil,
+              @classes
+            ].compact.join(' ')
+          end
+
+          def select_attributes
+            attrs = {
+              name: form_field_name,
+              id: @html_options[:id] || form_field_id,
+              class: combined_classes
+            }
+
+            # Aggiungi attributi booleani solo se true
+            attrs[:required] = @required if @required
+            attrs[:disabled] = @disabled if @disabled
+            attrs[:multiple] = @multiple if @multiple
+
+            # Aggiungi altri attributi HTML
+            @html_options.except(:id, :class).each do |key, value|
+              attrs[key] = value unless value.nil?
+            end
+            
+            # Rimuovi attributi con valori nil o false
+            attrs.compact
+          end
+
+          def form_field_name
+            if @form.present?
+              @form.field_name(@name)
+            else
+              @name
+            end
+          end
+
+          def form_field_id
+            if @form.present?
+              @form.field_id(@name)
+            else
+              @name.to_s.gsub(/[\[\]]+/, '_').gsub(/_$/, '')
+            end
+          end
+
+          def selected?(option)
+            return false if @selected.nil?
+            
+            if @selected.is_a?(Array)
+              @selected.include?(option[:value])
+            else
+              option[:value].to_s == @selected.to_s
+            end
+          end
+
+          private
+
+          def validate_params
+            validate_theme
+            validate_size
+            validate_rounded
+          end
+          
+          def validate_theme
+            unless SELECT_THEME.keys.include?(@theme)
+              raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{SELECT_THEME.keys.join(', ')}"
+            end
+          end
+          
+          def validate_size
+            unless SELECT_SIZE.keys.include?(@size)
+              raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{SELECT_SIZE.keys.join(', ')}"
+            end
+          end
+          
+          def validate_rounded
+            unless SELECT_ROUNDED.keys.include?(@rounded)
+              raise ArgumentError, "Invalid rounded: #{@rounded}. Valid rounded options are: #{SELECT_ROUNDED.keys.join(', ')}"
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<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>