better_ui 0.1.0 → 0.2.0

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>

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

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

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

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

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

@@ -0,0 +1,166 @@
+# 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/link/component.html.erb

@@ -0,0 +1,18 @@
+<%# Template per il link %>
+<% if link? %>
+  <%= link_to @href, **element_attributes do %>
+    <% if show_icon? %>
+      <span class="<%= icon_classes %>"><%= render_icon %></span>
+    <% end %>
+    <span class="<%= text_classes %>"><%= @label %></span>
+    <%= content %>
+  <% end %>
+<% else %>
+  <%= tag.span(**element_attributes) do %>
+    <% if show_icon? %>
+      <span class="<%= icon_classes %>"><%= render_icon %></span>
+    <% end %>
+    <span class="<%= text_classes %>"><%= @label %></span>
+    <%= content %>
+  <% end %>
+<% end %>