better_ui 0.1.0 → 0.1.1

data/app/components/better_ui/general/icon/component.rb

@@ -0,0 +1,239 @@
+module BetterUi
+  module General
+    module Icon
+      class Component < ViewComponent::Base
+        # Classi base per l'icona con nomenclatura BEM
+        ICON_BASE_CLASSES = "bui-icon inline-flex items-center justify-center"
+
+        # Dimensioni dell'icona (standardizzate: small, medium, large)
+        ICON_SIZE_CLASSES = {
+          small: "bui-icon--small w-4 h-4 text-sm",
+          medium: "bui-icon--medium w-5 h-5 text-base",
+          large: "bui-icon--large w-6 h-6 text-lg"
+        }.freeze
+
+        # Temi dell'icona con colori coerenti
+        ICON_THEME_CLASSES = {
+          default: "bui-icon--default text-gray-600",
+          white: "bui-icon--white text-white",
+          red: "bui-icon--red text-red-600",
+          rose: "bui-icon--rose text-rose-600",
+          orange: "bui-icon--orange text-orange-600",
+          green: "bui-icon--green text-green-600",
+          blue: "bui-icon--blue text-blue-600",
+          yellow: "bui-icon--yellow text-yellow-600",
+          violet: "bui-icon--violet text-violet-600",
+          purple: "bui-icon--purple text-purple-600"
+        }.freeze
+
+        # Animazioni disponibili
+        ICON_ANIMATION_CLASSES = {
+          spin: "bui-icon--spin animate-spin",
+          pulse: "bui-icon--pulse animate-pulse"
+        }.freeze
+
+        # Trasformazioni disponibili
+        ICON_ROTATION_CLASSES = {
+          90 => "bui-icon--rotate-90 transform rotate-90",
+          180 => "bui-icon--rotate-180 transform rotate-180",
+          270 => "bui-icon--rotate-270 transform rotate-270"
+        }.freeze
+
+        ICON_FLIP_CLASSES = {
+          horizontal: "bui-icon--flip-h transform scale-x-[-1]",
+          vertical: "bui-icon--flip-v transform scale-y-[-1]",
+          both: "bui-icon--flip-both transform scale-[-1]"
+        }.freeze
+
+        # Bordo e larghezza fissa
+        ICON_BORDER_CLASSES = "bui-icon--border border border-current rounded-full p-1"
+        ICON_FIXED_WIDTH_CLASSES = "bui-icon--fixed-width w-5"
+
+        attr_reader :name, :style, :size, :theme, :spin, :pulse, :border, :fixed_width, 
+                    :rotation, :flip, :classes, :id, :href, :method, :target, :html_options
+
+        # @param name [String] Nome dell'icona (richiesto)
+        # @param style [Symbol] Stile dell'icona (:solid, :regular, :brands)
+        # @param size [Symbol] Dimensione (:small, :medium, :large)
+        # @param theme [Symbol] Tema colore (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)
+        # @param spin [Boolean] Rotazione continua
+        # @param pulse [Boolean] Animazione pulsazione
+        # @param border [Boolean] Mostra bordo attorno all'icona
+        # @param fixed_width [Boolean] Larghezza fissa per allineamento
+        # @param rotation [Integer] Rotazione in gradi (0, 90, 180, 270)
+        # @param flip [Symbol] Tipo di flip (:horizontal, :vertical, :both)
+        # @param classes [String] Classi CSS aggiuntive
+        # @param id [String] ID HTML
+        # @param href [String] URL per l'icona
+        # @param html_options [Hash] Attributi HTML aggiuntivi
+        def initialize(
+          name:,
+          style: :solid,
+          size: :medium,
+          theme: :default,
+          spin: false,
+          pulse: false,
+          border: false,
+          fixed_width: false,
+          rotation: nil,
+          flip: nil,
+          classes: nil,
+          id: nil,
+          href: nil,
+          method: nil,
+          target: nil,
+          **html_options
+        )
+          @name = name
+          @style = style.to_sym
+          @size = size.to_sym
+          @theme = theme.to_sym
+          @spin = spin
+          @pulse = pulse
+          @border = border
+          @fixed_width = fixed_width
+          @rotation = rotation&.to_i
+          @flip = flip&.to_sym
+          @classes = classes
+          @id = id
+          @href = href
+          @method = method
+          @target = target
+          @html_options = html_options
+
+          validate_params!
+        end
+
+        # Genera le classi CSS complete per l'icona
+        def icon_classes
+          classes = [
+            ICON_BASE_CLASSES,
+            size_classes,
+            theme_classes,
+            animation_classes,
+            transformation_classes,
+            border_classes,
+            fixed_width_classes,
+            @classes
+          ].compact.join(" ")
+        end
+
+        # Attributi HTML per l'elemento icona
+        def icon_attributes
+          attrs = {
+            class: icon_classes,
+            id: @id,
+            href: @href,
+            target: @target,
+            **@html_options
+          }.compact
+
+          # Handle method for Turbo
+          if @method.present?
+            attrs[:data] ||= {}
+            attrs[:data][:turbo_method] = @method
+          end
+
+          attrs
+        end
+
+        # Nome completo della classe FontAwesome basato su stile
+        def fa_class_name
+          prefix = case @style
+          when :solid then "fas"
+          when :regular then "far"
+          when :brands then "fab"
+          else "fas"
+          end
+
+          "#{prefix} fa-#{@name}"
+        end
+
+        # Verifica se il componente deve essere renderizzato
+        def render?
+          @name.present?
+        end
+
+        private
+
+        def validate_params!
+          validate_name!
+          validate_style!
+          validate_size!
+          validate_theme!
+          validate_rotation!
+          validate_flip!
+        end
+
+        def validate_name!
+          raise ArgumentError, "Il nome dell'icona è richiesto" if @name.blank?
+        end
+
+        def validate_style!
+          valid_styles = [ :solid, :regular, :brands ]
+          unless valid_styles.include?(@style)
+            raise ArgumentError, "Lo stile deve essere uno tra: #{valid_styles.join(', ')}"
+          end
+        end
+
+        def validate_size!
+          unless ICON_SIZE_CLASSES.key?(@size)
+            valid_sizes = ICON_SIZE_CLASSES.keys
+            raise ArgumentError, "La dimensione deve essere una tra: #{valid_sizes.join(', ')}"
+          end
+        end
+
+        def validate_theme!
+          unless ICON_THEME_CLASSES.key?(@theme)
+            valid_themes = ICON_THEME_CLASSES.keys
+            raise ArgumentError, "Il tema deve essere uno tra: #{valid_themes.join(', ')}"
+          end
+        end
+
+        def validate_rotation!
+          if @rotation && !ICON_ROTATION_CLASSES.key?(@rotation)
+            valid_rotations = ICON_ROTATION_CLASSES.keys
+            raise ArgumentError, "La rotazione deve essere una tra: #{valid_rotations.join(', ')}"
+          end
+        end
+
+        def validate_flip!
+          if @flip && !ICON_FLIP_CLASSES.key?(@flip)
+            valid_flips = ICON_FLIP_CLASSES.keys
+            raise ArgumentError, "Il flip deve essere uno tra: #{valid_flips.join(', ')}"
+          end
+        end
+
+        def size_classes
+          ICON_SIZE_CLASSES[@size]
+        end
+
+        def theme_classes
+          ICON_THEME_CLASSES[@theme]
+        end
+
+        def animation_classes
+          animations = []
+          animations << ICON_ANIMATION_CLASSES[:spin] if @spin
+          animations << ICON_ANIMATION_CLASSES[:pulse] if @pulse
+          animations.join(" ")
+        end
+
+        def transformation_classes
+          transformations = []
+          transformations << ICON_ROTATION_CLASSES[@rotation] if @rotation
+          transformations << ICON_FLIP_CLASSES[@flip] if @flip
+          transformations.join(" ")
+        end
+
+        def border_classes
+          @border ? ICON_BORDER_CLASSES : nil
+        end
+
+        def fixed_width_classes
+          @fixed_width ? ICON_FIXED_WIDTH_CLASSES : nil
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<% if @label.present? %>
+  <%= render_checkbox_with_label %>
+<% else %>
+  <%= input_tag %>
+<% end %>

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 %>