better_ui 0.2.0 → 0.6.0

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

@@ -0,0 +1,301 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Grid
+      class Component < ViewComponent::Base
+        attr_reader :cols, :rows, :gap, :flow, :align_items, :justify_items, :classes, :id, :html_options
+
+        # Classi base grid
+        GRID_BASE_CLASSES = "grid"
+
+        # Valori supportati per validazione
+        VALID_GRID_COLS = (1..12).to_a + [:auto, :none].freeze
+        VALID_GRID_ROWS = (1..6).to_a + [:auto, :none].freeze
+        VALID_BREAKPOINTS = [:sm, :md, :lg, :xl].freeze
+
+        # Gap (spaziatura)
+        GRID_GAP = {
+          none: 'gap-0', small: 'gap-2', medium: 'gap-4', large: 'gap-6'
+        }.freeze
+
+        # Flow (direzione)
+        GRID_FLOW = {
+          row: 'grid-flow-row', col: 'grid-flow-col',
+          row_dense: 'grid-flow-row-dense', col_dense: 'grid-flow-col-dense'
+        }.freeze
+
+        # Align items
+        GRID_ALIGN_ITEMS = {
+          start: 'items-start', center: 'items-center',
+          end: 'items-end', stretch: 'items-stretch'
+        }.freeze
+
+        # Justify items  
+        GRID_JUSTIFY_ITEMS = {
+          start: 'justify-items-start', center: 'justify-items-center',
+          end: 'justify-items-end', stretch: 'justify-items-stretch'
+        }.freeze
+
+        def initialize(
+          cols: 1,
+          rows: nil,
+          gap: :medium,
+          flow: :row,
+          align_items: nil,
+          justify_items: nil,
+          classes: '',
+          id: nil,
+          **html_options
+        )
+          @cols = normalize_grid_cols_with_defaults(cols)
+          @rows = normalize_grid_rows_with_defaults(rows) if rows
+          @gap = normalize_grid_gap_with_defaults(gap)
+          @flow = flow.to_sym
+          @align_items = align_items&.to_sym
+          @justify_items = justify_items&.to_sym
+          @classes = classes
+          @id = id
+          @html_options = html_options
+
+          validate_grid_params
+        end
+
+        def combined_classes
+          [
+            GRID_BASE_CLASSES,
+            generate_cols_classes,
+            generate_rows_classes,
+            generate_gap_classes,
+            GRID_FLOW[@flow],
+            @align_items ? GRID_ALIGN_ITEMS[@align_items] : nil,
+            @justify_items ? GRID_JUSTIFY_ITEMS[@justify_items] : nil,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        def grid_attributes
+          attrs = {
+            class: combined_classes,
+            id: @id
+          }
+
+          @html_options.except(:class).each do |key, value|
+            attrs[key] = value
+          end
+
+          attrs
+        end
+
+        private
+
+        # Genera classi CSS dinamicamente invece di usare costanti massive
+        def generate_grid_cols_class(cols, breakpoint = nil)
+          prefix = breakpoint ? "#{breakpoint}:" : ""
+          "#{prefix}grid-cols-#{cols}"
+        end
+
+        def generate_grid_rows_class(rows, breakpoint = nil)
+          prefix = breakpoint ? "#{breakpoint}:" : ""
+          "#{prefix}grid-rows-#{rows}"
+        end
+
+        def generate_grid_gap_class(gap, breakpoint = nil)
+          prefix = breakpoint ? "#{breakpoint}:" : ""
+          gap_class = GRID_GAP[gap.to_sym]
+          return nil unless gap_class
+          
+          if breakpoint
+            "#{breakpoint}:#{gap_class.sub(/^gap-/, 'gap-')}"
+          else
+            gap_class
+          end
+        end
+
+        # Normalizza cols con default intelligenti per tutti i breakpoint
+        def normalize_grid_cols_with_defaults(cols)
+          # Se è un valore semplice, lo usiamo per tutti i breakpoint
+          return cols unless cols.is_a?(Hash)
+
+          # Se è un hash, riempiamo i breakpoint mancanti con fallback intelligente
+          normalized = {}
+          last_value = 1  # Default base
+
+          # Base (senza breakpoint)
+          normalized[:base] = 1
+
+          # Processa i breakpoint in ordine
+          VALID_BREAKPOINTS.each do |breakpoint|
+            if cols.key?(breakpoint)
+              last_value = cols[breakpoint]
+            end
+            normalized[breakpoint] = last_value
+          end
+
+          normalized
+        end
+
+        # Normalizza rows con default intelligenti (solo se specificato)
+        def normalize_grid_rows_with_defaults(rows)
+          return rows unless rows.is_a?(Hash)
+
+          normalized = {}
+          last_value = nil
+
+          VALID_BREAKPOINTS.each do |breakpoint|
+            if rows.key?(breakpoint)
+              last_value = rows[breakpoint]
+            end
+            normalized[breakpoint] = last_value if last_value
+          end
+
+          normalized
+        end
+
+        # Normalizza gap con default intelligenti
+        def normalize_grid_gap_with_defaults(gap)
+          return gap unless gap.is_a?(Hash)
+
+          normalized = {}
+          last_value = :medium  # Default base
+
+          VALID_BREAKPOINTS.each do |breakpoint|
+            if gap.key?(breakpoint)
+              last_value = gap[breakpoint]
+            end
+            normalized[breakpoint] = last_value
+          end
+
+          normalized
+        end
+
+        def generate_cols_classes
+          return nil unless @cols
+
+          if @cols.is_a?(Hash)
+            classes = []
+            
+            # Base class (senza breakpoint)
+            if @cols[:base]
+              classes << generate_grid_cols_class(@cols[:base])
+            end
+            
+            # Responsive classes
+            VALID_BREAKPOINTS.each do |breakpoint|
+              if @cols[breakpoint]
+                classes << generate_grid_cols_class(@cols[breakpoint], breakpoint)
+              end
+            end
+            
+            classes.join(" ")
+          else
+            generate_grid_cols_class(@cols)
+          end
+        end
+
+        def generate_rows_classes
+          return nil unless @rows
+
+          if @rows.is_a?(Hash)
+            @rows.map do |breakpoint, rows_value|
+              generate_grid_rows_class(rows_value, breakpoint)
+            end.compact.join(" ")
+          else
+            generate_grid_rows_class(@rows)
+          end
+        end
+
+        def generate_gap_classes
+          if @gap.is_a?(Hash)
+            @gap.map do |breakpoint, gap_value|
+              generate_grid_gap_class(gap_value, breakpoint)
+            end.compact.join(" ")
+          else
+            GRID_GAP[@gap.to_sym]
+          end
+        end
+
+        def validate_grid_params
+          validate_grid_cols
+          validate_grid_rows if @rows
+          validate_grid_gap
+          validate_grid_flow
+          validate_grid_align_items if @align_items
+          validate_grid_justify_items if @justify_items
+        end
+
+        def validate_grid_cols
+          if @cols.is_a?(Hash)
+            @cols.each do |breakpoint, cols_value|
+              next if breakpoint == :base  # Skip validation for base
+              
+              unless VALID_BREAKPOINTS.include?(breakpoint)
+                raise ArgumentError, "Breakpoint #{breakpoint} non supportato per cols"
+              end
+              unless VALID_GRID_COLS.include?(cols_value)
+                raise ArgumentError, "Valore cols #{cols_value} non supportato per breakpoint #{breakpoint}"
+              end
+            end
+          else
+            unless VALID_GRID_COLS.include?(@cols)
+              raise ArgumentError, "cols deve essere uno tra: #{VALID_GRID_COLS.join(', ')}"
+            end
+          end
+        end
+
+        def validate_grid_rows
+          if @rows.is_a?(Hash)
+            @rows.each do |breakpoint, rows_value|
+              unless VALID_BREAKPOINTS.include?(breakpoint)
+                raise ArgumentError, "Breakpoint #{breakpoint} non supportato per rows"
+              end
+              unless VALID_GRID_ROWS.include?(rows_value)
+                raise ArgumentError, "Valore rows #{rows_value} non supportato per breakpoint #{breakpoint}"
+              end
+            end
+          else
+            unless VALID_GRID_ROWS.include?(@rows)
+              raise ArgumentError, "rows deve essere uno tra: #{VALID_GRID_ROWS.join(', ')}"
+            end
+          end
+        end
+
+        def validate_grid_gap
+          if @gap.is_a?(Hash)
+            @gap.each do |breakpoint, gap_value|
+              unless VALID_BREAKPOINTS.include?(breakpoint)
+                raise ArgumentError, "Breakpoint #{breakpoint} non supportato per gap"
+              end
+              unless GRID_GAP.keys.include?(gap_value.to_sym)
+                raise ArgumentError, "Valore gap #{gap_value} non supportato per breakpoint #{breakpoint}"
+              end
+            end
+          else
+            unless GRID_GAP.keys.include?(@gap.to_sym)
+              raise ArgumentError, "gap deve essere uno tra: #{GRID_GAP.keys.join(', ')}"
+            end
+          end
+        end
+
+        def validate_grid_flow
+          unless GRID_FLOW.keys.include?(@flow)
+            raise ArgumentError, "flow deve essere uno tra: #{GRID_FLOW.keys.join(', ')}"
+          end
+        end
+
+        def validate_grid_align_items
+          unless GRID_ALIGN_ITEMS.keys.include?(@align_items)
+            raise ArgumentError, "align_items deve essere uno tra: #{GRID_ALIGN_ITEMS.keys.join(', ')}"
+          end
+        end
+
+        def validate_grid_justify_items
+          unless GRID_JUSTIFY_ITEMS.keys.include?(@justify_items)
+            raise ArgumentError, "justify_items deve essere uno tra: #{GRID_JUSTIFY_ITEMS.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/heading/component.html.erb

@@ -3,7 +3,7 @@
   <%= tag.public_send(heading_tag, **heading_attributes) do %>
     <% if show_icon? %>
       <span class="<%= icon_classes %>">
-        <%= render BetterUi::General::IconComponent.new(name: @icon) %>
+        <%= render BetterUi::General::Icon::Component.new(name: @icon) %>
       </span>
     <% end %>
     

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

@@ -9,7 +9,8 @@ module BetterUi
         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"
+          large: "bui-icon--large w-6 h-6 text-lg",
+          xlarge: "bui-icon--large w-7 h-7 text-xl"
         }.freeze
 
         # Temi dell'icona con colori coerenti

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

@@ -7,7 +7,7 @@ module BetterUi
         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',
+            default: 'border-gray-300 text-gray-800 focus:border-gray-600 focus:ring-gray-600 checked:bg-gray-800 checked:border-gray-800',
             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',
@@ -19,9 +19,9 @@ module BetterUi
           }.freeze
 
           CHECKBOX_SIZE = {
-            small: 'h-4 w-4',
-            medium: 'h-5 w-5',
-            large: 'h-6 w-6'
+            small: 'h-2.5 w-2.5',
+            medium: 'h-3 w-3',
+            large: 'h-4 w-4'
           }.freeze
 
           CHECKBOX_ROUNDED = {
@@ -35,15 +35,15 @@ module BetterUi
           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'
+            small: 'gap-1.5',
+            medium: 'gap-2',
+            large: 'gap-2.5'
           }.freeze
 
           CHECKBOX_LABEL_TEXT = {
-            small: 'text-sm',
-            medium: 'text-base',
-            large: 'text-lg'
+            small: 'text-xs',
+            medium: 'text-sm',
+            large: 'text-base'
           }.freeze
 
           attr_reader :name, :value, :checked, :required, :disabled, :indeterminate, 

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

@@ -0,0 +1 @@
+<%= render_pin_container %>

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

@@ -0,0 +1,201 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Input
+      module Pin
+        class Component < ViewComponent::Base
+          # Costanti con classi Tailwind dirette
+          PIN_THEME = {
+            default: 'border-gray-300 focus:border-blue-500 focus:ring-blue-500',
+            white: 'border-gray-300 bg-white focus:border-gray-900 focus:ring-gray-900',
+            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
+
+          PIN_SIZE = {
+            small: 'w-8 h-8 text-sm',
+            medium: 'w-12 h-12 text-base',
+            large: 'w-16 h-16 text-lg'
+          }.freeze
+
+          PIN_GAP = {
+            small: 'gap-2',
+            medium: 'gap-3',
+            large: 'gap-4'
+          }.freeze
+
+          PIN_BASE_CLASSES = 'rounded-md border text-center font-mono focus:outline-none focus:ring-2 focus:ring-offset-1 transition-colors'.freeze
+
+          attr_reader :name, :value, :length, :placeholder, :required, :disabled,
+                      :theme, :size, :form, :classes, :options
+
+          # @param name [String] Nome del campo pin (obbligatorio)
+          # @param value [String] Valore del pin preimpostato
+          # @param length [Integer] Numero di campi pin (4-8, default: 6)
+          # @param placeholder [String] Placeholder per campi vuoti (default: '•')
+          # @param required [Boolean] Se il campo è obbligatorio
+          # @param disabled [Boolean] Se il campo è disabilitato
+          # @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 form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+          # @param classes [String] Classi CSS aggiuntive
+          # @param options [Hash] Opzioni aggiuntive per attributi HTML
+          def initialize(name:, value: '', length: 6, placeholder: '•', required: false, disabled: false,
+                         theme: :default, size: :medium, form: nil, classes: '', **options)
+            @name = name
+            @value = value.to_s
+            @length = length.to_i
+            @placeholder = placeholder
+            @required = required
+            @disabled = disabled
+            @theme = theme.to_sym
+            @size = size.to_sym
+            @form = form
+            @classes = classes
+            @options = options
+
+            validate_params
+          end
+
+          private
+
+          def validate_params
+            validate_theme
+            validate_size
+            validate_length
+            validate_name
+          end
+
+          def validate_theme
+            return if PIN_THEME.key?(@theme)
+
+            raise ArgumentError, "Invalid theme: #{@theme}. Valid themes are: #{PIN_THEME.keys.join(', ')}"
+          end
+
+          def validate_size
+            return if PIN_SIZE.key?(@size)
+
+            raise ArgumentError, "Invalid size: #{@size}. Valid sizes are: #{PIN_SIZE.keys.join(', ')}"
+          end
+
+          def validate_length
+            return if @length >= 4 && @length <= 8
+
+            raise ArgumentError, "Length must be between 4 and 8, got: #{@length}"
+          end
+
+          def validate_name
+            return if @name.present?
+
+            raise ArgumentError, "Name is required for pin input components"
+          end
+
+          def container_classes
+            base_classes = ['flex', 'items-center']
+            base_classes << PIN_GAP[@size]
+            base_classes << @classes if @classes.present?
+            base_classes.join(' ')
+          end
+
+          def input_classes
+            [
+              PIN_BASE_CLASSES,
+              PIN_SIZE[@size],
+              PIN_THEME[@theme],
+              (@disabled ? 'opacity-50 cursor-not-allowed' : '')
+            ].compact.join(' ')
+          end
+
+          def controller_attributes
+            {
+              data: {
+                controller: 'bui-pin',
+                'bui-pin-length-value': @length,
+                'bui-pin-name-value': @name,
+                'bui-pin-placeholder-value': @placeholder
+              }
+            }
+          end
+
+          def input_attributes(index)
+            attrs = {
+              type: 'text',
+              class: input_classes,
+              maxlength: '1',
+              autocomplete: 'off',
+              inputmode: 'numeric',
+              pattern: '[0-9]*',
+              placeholder: @placeholder,
+              disabled: @disabled,
+              required: @required && index == 0, # Solo il primo campo è required per validazione
+              data: {
+                'bui-pin-target': 'input',
+                action: [
+                  'input->bui-pin#inputChange',
+                  'keydown->bui-pin#inputKeydown',
+                  'paste->bui-pin#inputPaste'
+                ].join(' ')
+              }
+            }
+
+            # Imposta valore se presente
+            if @value.present? && @value[index]
+              attrs[:value] = @value[index]
+            end
+
+            attrs.merge(@options.except(:id))
+          end
+
+          def hidden_input_attributes
+            attrs = {
+              type: 'hidden',
+              name: input_name,
+              value: @value,
+              data: { 'bui-pin-target': 'hiddenInput' }
+            }
+
+            # Aggiungi ID se specificato
+            if @options[:id]
+              attrs[:id] = @options[:id]
+            end
+
+            attrs
+          end
+
+          def input_name
+            if @form
+              @form.field_name(@name)
+            else
+              @name
+            end
+          end
+
+          def render_pin_inputs
+            @length.times.map do |index|
+              tag(:input, input_attributes(index))
+            end
+          end
+
+          def render_hidden_input
+            tag(:input, hidden_input_attributes)
+          end
+
+          def render_pin_container
+            content_tag(:div, class: container_classes, **controller_attributes) do
+              safe_join([
+                render_hidden_input,
+                *render_pin_inputs
+              ])
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -7,7 +7,7 @@ module BetterUi
         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',
+            default: 'border-gray-300 text-gray-800 focus:border-gray-600 focus:ring-gray-600 checked:bg-gray-800 checked:border-gray-800',
             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',
@@ -19,9 +19,9 @@ module BetterUi
           }.freeze
 
           RADIO_SIZE = {
-            small: 'h-4 w-4',
-            medium: 'h-5 w-5',
-            large: 'h-6 w-6'
+            small: 'h-2.5 w-2.5',
+            medium: 'h-3 w-3',
+            large: 'h-4 w-4'
           }.freeze
 
           RADIO_ROUNDED = {
@@ -35,15 +35,15 @@ module BetterUi
           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'
+            small: 'gap-1.5',
+            medium: 'gap-2',
+            large: 'gap-2.5'
           }.freeze
 
           RADIO_LABEL_TEXT = {
-            small: 'text-sm',
-            medium: 'text-base',
-            large: 'text-lg'
+            small: 'text-xs',
+            medium: 'text-sm',
+            large: 'text-base'
           }.freeze
 
           attr_reader :name, :value, :checked, :required, :disabled, 

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

@@ -0,0 +1,4 @@
+<div class="<%= container_classes %>">
+  <%= render_stars_container %>
+  <%= render_value_display %>
+</div>