better_ui 0.3.0 → 0.6.0

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

@@ -0,0 +1,194 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Text
+      class Component < ViewComponent::Base
+        attr_reader :text, :theme, :size, :align, :weight, :style, :classes, :html_options
+
+        # Classi base sempre presenti
+        TEXT_BASE_CLASSES = "block"
+
+        # Temi colore con classi Tailwind dirette
+        TEXT_THEME_CLASSES = {
+          default: "text-gray-900",      # Testo nero standard
+          white: "text-white",           # Testo bianco
+          red: "text-red-600",
+          rose: "text-rose-600",
+          orange: "text-orange-600",
+          green: "text-green-600",
+          blue: "text-blue-600",
+          yellow: "text-yellow-600",
+          violet: "text-violet-600",
+          purple: "text-purple-600",
+          gray: "text-gray-600",
+          muted: "text-gray-500"
+        }.freeze
+
+        # Dimensioni con classi Tailwind dirette
+        TEXT_SIZE_CLASSES = {
+          xs: "text-xs",
+          small: "text-sm",
+          medium: "text-base",
+          large: "text-lg",
+          xl: "text-xl",
+          "2xl": "text-2xl"
+        }.freeze
+
+        # Allineamenti con classi Tailwind dirette
+        TEXT_ALIGN_CLASSES = {
+          left: "text-left",
+          center: "text-center",
+          right: "text-right",
+          justify: "text-justify"
+        }.freeze
+
+        # Peso font con classi Tailwind dirette
+        TEXT_WEIGHT_CLASSES = {
+          thin: "font-thin",
+          light: "font-light",
+          normal: "font-normal",
+          medium: "font-medium",
+          semibold: "font-semibold",
+          bold: "font-bold",
+          extrabold: "font-extrabold"
+        }.freeze
+
+        # Stili con classi Tailwind dirette
+        TEXT_STYLE_CLASSES = {
+          normal: "",
+          italic: "italic",
+          underline: "underline",
+          line_through: "line-through"
+        }.freeze
+
+        # @param text [String] testo da mostrare (opzionale se si usa blocco)
+        # @param theme [Symbol] tema del colore (:default, :white, :red, :blue, etc.)
+        # @param size [Symbol] dimensione (:xs, :small, :medium, :large, :xl, :"2xl")
+        # @param align [Symbol] allineamento (:left, :center, :right, :justify)
+        # @param weight [Symbol] peso font (:thin, :light, :normal, :medium, :semibold, :bold, :extrabold)
+        # @param style [Symbol] stile (:normal, :italic, :underline, :line_through)
+        # @param classes [String] classi CSS aggiuntive
+        # @param html_options [Hash] opzioni HTML aggiuntive
+        def initialize(
+          text: nil,
+          theme: :default,
+          size: :medium,
+          align: :left,
+          weight: :normal,
+          style: :normal,
+          classes: '',
+          **html_options
+        )
+          @text = text
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @align = align.to_sym
+          @weight = weight.to_sym
+          @style = style.to_sym
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+          super()
+        end
+
+        # Combina tutte le classi CSS
+        def combined_classes
+          [
+            TEXT_BASE_CLASSES,
+            get_theme_classes,
+            get_size_classes,
+            get_align_classes,
+            get_weight_classes,
+            get_style_classes,
+            @classes,
+            @html_options[:class]
+          ].compact.join(" ")
+        end
+
+        # Attributi HTML per l'elemento
+        def text_attributes
+          attrs = @html_options.except(:class)
+          attrs[:class] = combined_classes
+          attrs
+        end
+
+        # Determina se il componente ha contenuto da renderizzare
+        def render?
+          @text.present? || content.present?
+        end
+
+        # Contenuto da mostrare (testo diretto o contenuto blocco)
+        def text_content
+          @text.present? ? @text : content
+        end
+
+        private
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_align
+          validate_weight
+          validate_style
+        end
+
+        def validate_theme
+          unless TEXT_THEME_CLASSES.key?(@theme)
+            valid_themes = TEXT_THEME_CLASSES.keys
+            raise ArgumentError, "Il tema deve essere uno tra: #{valid_themes.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless TEXT_SIZE_CLASSES.key?(@size)
+            valid_sizes = TEXT_SIZE_CLASSES.keys
+            raise ArgumentError, "La dimensione deve essere una tra: #{valid_sizes.join(', ')}"
+          end
+        end
+
+        def validate_align
+          unless TEXT_ALIGN_CLASSES.key?(@align)
+            valid_aligns = TEXT_ALIGN_CLASSES.keys
+            raise ArgumentError, "L'allineamento deve essere uno tra: #{valid_aligns.join(', ')}"
+          end
+        end
+
+        def validate_weight
+          unless TEXT_WEIGHT_CLASSES.key?(@weight)
+            valid_weights = TEXT_WEIGHT_CLASSES.keys
+            raise ArgumentError, "Il peso deve essere uno tra: #{valid_weights.join(', ')}"
+          end
+        end
+
+        def validate_style
+          unless TEXT_STYLE_CLASSES.key?(@style)
+            valid_styles = TEXT_STYLE_CLASSES.keys
+            raise ArgumentError, "Lo stile deve essere uno tra: #{valid_styles.join(', ')}"
+          end
+        end
+
+        def get_theme_classes
+          TEXT_THEME_CLASSES[@theme]
+        end
+
+        def get_size_classes
+          TEXT_SIZE_CLASSES[@size]
+        end
+
+        def get_align_classes
+          TEXT_ALIGN_CLASSES[@align]
+        end
+
+        def get_weight_classes
+          TEXT_WEIGHT_CLASSES[@weight]
+        end
+
+        def get_style_classes
+          TEXT_STYLE_CLASSES[@style]
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/application_helper.rb

@@ -24,6 +24,10 @@ module BetterUi
     include General::Components::Spinner::SpinnerHelper
     include General::Components::Tag::TagHelper
     include General::Components::Tooltip::TooltipHelper
+    include General::Components::Field::FieldHelper
+    include General::Components::Grid::GridHelper
+    include General::Components::Text::TextHelper
+    include General::Components::Dropdown::DropdownHelper
 
     include General::Components::Table::TableHelper
     include General::Components::Table::TbodyHelper
@@ -45,6 +49,9 @@ module BetterUi
     include General::Components::Input::Select::SelectHelper
     include General::Components::Input::Text::TextHelper
     include General::Components::Input::Textarea::TextareaHelper
+    include General::Components::Input::Toggle::ToggleHelper
+    include General::Components::Input::Rating::RatingHelper
+    include General::Components::Input::Pin::PinHelper
 
     # Application Components
     include Application::Components::Main::MainHelper

data/app/helpers/better_ui/general/components/button/button_helper.rb

@@ -5,8 +5,8 @@ module BetterUi
         module ButtonHelper
           # Helper per renderizzare un bottone
           #
-          # @param label [String] Testo del bottone
-          # @param type [Symbol] Tipo del bottone (:default, :white, :red, etc.)
+          # @param text [String] Testo del bottone (argomento posizionale)
+          # @param theme [Symbol] Tema del bottone (:default, :white, :red, etc.)
           # @param size [Symbol] Dimensione del bottone (:small, :medium, :large)
           # @param full_width [Boolean] Larghezza completa
           # @param disabled [Boolean] Stato disabilitato
@@ -23,8 +23,8 @@ module BetterUi
           #
           # @return [String] HTML del bottone
           def bui_button(
-            label: nil,
-            type: :white,
+            text = nil,
+            theme: :white,
             size: :medium,
             full_width: false,
             disabled: false,
@@ -41,8 +41,8 @@ module BetterUi
             &block
           )
             render BetterUi::General::Button::Component.new(
-              label: label,
-              type: type,
+              text: text,
+              theme: theme,
               size: size,
               full_width: full_width,
               disabled: disabled,

data/app/helpers/better_ui/general/components/dropdown/dropdown_helper.rb

@@ -14,6 +14,9 @@ module BetterUi
           # @param size [Symbol] La dimensione del trigger (:small, :medium, :large)
           # @param rounded [Symbol] Il border radius (:none, :small, :medium, :large, :full)
           # @param animation [Symbol] Il tipo di animazione (:fade, :slide, :none)
+          # @param fullwidth [Boolean] Se il trigger deve occupare tutta la larghezza disponibile
+          # @param show_chevron [Boolean] Se mostrare l'icona chevron automatica
+          # @param selectable [Boolean] Se il dropdown deve aggiornare il trigger con la selezione
           # @param classes [String] Classi CSS aggiuntive
           # @param options [Hash] Attributi HTML aggiuntivi
           # @param block [Proc] Il contenuto del menu dropdown
@@ -57,6 +60,9 @@ module BetterUi
             size: :medium,
             rounded: :medium,
             animation: :fade,
+            fullwidth: false,
+            show_chevron: true,
+            selectable: false,
             classes: '',
             **options,
             &block
@@ -68,6 +74,9 @@ module BetterUi
               size: size,
               rounded: rounded,
               animation: animation,
+              fullwidth: fullwidth,
+              show_chevron: show_chevron,
+              selectable: selectable,
               classes: classes,
               **options
             ), &block

data/app/helpers/better_ui/general/components/dropdown/item_helper.rb

@@ -20,22 +20,25 @@ module BetterUi
           # @return [String] Il markup HTML dell'elemento dropdown
           #
           # @example Uso base
-          #   <%= bui_dropdown_item(text: "Modifica") %>
+          #   <%= bui_dropdown_item("Modifica") %>
           #
           # @example Con icona
-          #   <%= bui_dropdown_item(text: "Elimina", icon: "trash") %>
+          #   <%= bui_dropdown_item("Elimina", icon: "trash") %>
           #
           # @example Come link
-          #   <%= bui_dropdown_item(text: "Profilo", href: "/profile", icon: "user") %>
+          #   <%= bui_dropdown_item("Profilo", href: "/profile", icon: "user") %>
           #
           # @example Con tema colorato
-          #   <%= bui_dropdown_item(text: "Azione pericolosa", theme: :red, icon: "trash") %>
+          #   <%= bui_dropdown_item("Azione pericolosa", theme: :red, icon: "trash") %>
           #
           # @example Disabilitato
-          #   <%= bui_dropdown_item(text: "Non disponibile", disabled: true) %>
+          #   <%= bui_dropdown_item("Non disponibile", disabled: true) %>
+          #
+          # @example Uso con sintassi keyword (backward compatible)
+          #   <%= bui_dropdown_item(text: "Modifica legacy") %>
           #
           def bui_dropdown_item(
-            text:,
+            text = nil,
             icon: nil,
             href: nil,
             theme: :default,
@@ -44,8 +47,11 @@ module BetterUi
             classes: '',
             **options
           )
+            # Supporta sia sintassi posizionale che keyword per backward compatibility
+            item_text = text || options.delete(:text)
+            
             render BetterUi::General::Dropdown::ItemComponent.new(
-              text: text,
+              text: item_text,
               icon: icon,
               href: href,
               theme: theme,

data/app/helpers/better_ui/general/components/field/field_helper.rb

@@ -3,15 +3,15 @@ module BetterUi
     module Components
       module Field
         module FieldHelper
-          # @param label [String] Label del campo
+          # @param text [String] Testo della label (argomento posizionale)
           # @param name [String] Nome del campo
           # @param required [Boolean] Se il campo è obbligatorio
           # @param error [String] Messaggio di errore
           # @param help_text [String] Testo di aiuto
           # @return [BetterUi::General::FieldComponent] Componente del campo
-          def bui_field(label:, name:, required: false, error: nil, help_text: nil, id: nil, &block)
+          def bui_field(text = nil, name:, required: false, error: nil, help_text: nil, id: nil, &block)
             render BetterUi::General::Field::Component.new(
-              label: label,
+              text: text,
               name: name,
               required: required,
               error: error,
@@ -23,4 +23,4 @@ module BetterUi
       end
     end
   end
-end
+end

data/app/helpers/better_ui/general/components/grid/grid_helper.rb

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Grid
+        module GridHelper
+          # Helper per creare un contenitore grid CSS
+          #
+          # @param cols [Integer, Hash] Numero colonne (1-12, :auto, :none) o hash responsive {sm: 1, md: 2, lg: 3, xl: 4}
+          # @param rows [Integer, Hash, nil] Numero righe (1-6, :auto, :none) o hash responsive
+          # @param gap [Symbol, Hash] Spaziatura (:none, :small, :medium, :large) o hash responsive
+          # @param flow [Symbol] Direzione flusso (:row, :col, :row_dense, :col_dense)
+          # @param align_items [Symbol, nil] Allineamento verticale (:start, :center, :end, :stretch)
+          # @param justify_items [Symbol, nil] Allineamento orizzontale (:start, :center, :end, :stretch)
+          # @param classes [String] Classi CSS aggiuntive
+          # @param id [String, nil] ID elemento
+          # @param options [Hash] Attributi HTML aggiuntivi
+          # @param block [Proc] Blocco contenente le celle grid
+          #
+          # @return [String] HTML del grid container
+          #
+          # @example Uso base
+          #   <%= bui_grid(cols: 3, gap: :medium) do %>
+          #     <%= content %>
+          #   <% end %>
+          #
+          # @example Con responsive
+          #   <%= bui_grid(cols: {sm: 1, md: 2, lg: 3, xl: 4}, gap: :large) do %>
+          #     <%= content %>
+          #   <% end %>
+          #
+          # @example Con righe e allineamento
+          #   <%= bui_grid(cols: 2, rows: 3, gap: :medium, align_items: :center) do %>
+          #     <%= content %>
+          #   <% end %>
+          #
+          # @example Con flow e justify
+          #   <%= bui_grid(cols: 4, flow: :col, justify_items: :center) do %>
+          #     <%= content %>
+          #   <% end %>
+          #
+          # @example Con attributi HTML aggiuntivi
+          #   <%= bui_grid(cols: 3, id: "main-grid", data: {testid: "grid"}) do %>
+          #     <%= content %>
+          #   <% end %>
+          def bui_grid(
+            cols: 1,
+            rows: nil,
+            gap: :medium,
+            flow: :row,
+            align_items: nil,
+            justify_items: nil,
+            classes: '',
+            id: nil,
+            **options,
+            &block
+          )
+            render BetterUi::General::Grid::Component.new(
+              cols: cols,
+              rows: rows,
+              gap: gap,
+              flow: flow,
+              align_items: align_items,
+              justify_items: justify_items,
+              classes: classes,
+              id: id,
+              **options
+            ), &block
+          end
+
+          # Helper per creare una cella grid con controllo posizionamento
+          #
+          # @param col [Integer, Hash, nil] Span colonne (1-12, :auto, :full) o hash responsive {sm: 1, md: 2, lg: 3}
+          # @param row [Integer, Hash, nil] Span righe (1-6, :auto, :full) o hash responsive
+          # @param col_start [Integer, Hash, nil] Posizione inizio colonna (1-13, :auto) o hash responsive
+          # @param col_end [Integer, Hash, nil] Posizione fine colonna (1-13, :auto) o hash responsive
+          # @param row_start [Integer, Hash, nil] Posizione inizio riga (1-7, :auto) o hash responsive
+          # @param row_end [Integer, Hash, nil] Posizione fine riga (1-7, :auto) o hash responsive
+          # @param justify_self [Symbol, nil] Allineamento orizzontale cella (:auto, :start, :center, :end, :stretch)
+          # @param align_self [Symbol, nil] Allineamento verticale cella (:auto, :start, :center, :end, :stretch)
+          # @param classes [String] Classi CSS aggiuntive
+          # @param id [String, nil] ID elemento
+          # @param options [Hash] Attributi HTML aggiuntivi
+          # @param block [Proc] Blocco contenente il contenuto della cella
+          #
+          # @return [String] HTML della grid cell
+          #
+          # @example Uso base
+          #   <%= bui_grid_cell do %>
+          #     <div>Contenuto cella</div>
+          #   <% end %>
+          #
+          # @example Con span colonne
+          #   <%= bui_grid_cell(col: 2) do %>
+          #     <div>Cella che occupa 2 colonne</div>
+          #   <% end %>
+          #
+          # @example Con responsive
+          #   <%= bui_grid_cell(col: {sm: 1, md: 2, lg: 3}) do %>
+          #     <div>Cella responsive</div>
+          #   <% end %>
+          #
+          # @example Con posizionamento specifico
+          #   <%= bui_grid_cell(col_start: 2, col_end: 4) do %>
+          #     <div>Cella dalla colonna 2 alla 4</div>
+          #   <% end %>
+          #
+          # @example Con allineamento
+          #   <%= bui_grid_cell(col: 2, justify_self: :center, align_self: :start) do %>
+          #     <div>Cella centrata orizzontalmente</div>
+          #   <% end %>
+          def bui_grid_cell(
+            col: nil,
+            row: nil,
+            col_start: nil,
+            col_end: nil,
+            row_start: nil,
+            row_end: nil,
+            justify_self: nil,
+            align_self: nil,
+            classes: '',
+            id: nil,
+            **options,
+            &block
+          )
+            render BetterUi::General::Grid::CellComponent.new(
+              col: col,
+              row: row,
+              col_start: col_start,
+              col_end: col_end,
+              row_start: row_start,
+              row_end: row_end,
+              justify_self: justify_self,
+              align_self: align_self,
+              classes: classes,
+              id: id,
+              **options
+            ), &block
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/input/pin/pin_helper.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Pin
+          module PinHelper
+            # Renderizza un componente Pin/OTP Input per inserimento codici di verifica numerici.
+            #
+            # @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
+            #
+            # @return [String] HTML del componente Pin renderizzato
+            #
+            # @example Uso base per codice OTP
+            #   <%= bui_input_pin(name: 'verification_code') %>
+            #
+            # @example Con lunghezza personalizzata e tema
+            #   <%= bui_input_pin(name: 'pin_code', length: 4, theme: :blue, size: :large) %>
+            #
+            # @example Con Rails form builder
+            #   <%= form_with model: @user do |form| %>
+            #     <%= bui_input_pin(name: :otp_code, form: form, value: @user.otp_code) %>
+            #   <% end %>
+            #
+            # @example Con validazione e attributi personalizzati
+            #   <%= bui_input_pin(
+            #         name: 'sms_code',
+            #         length: 6,
+            #         required: true,
+            #         placeholder: '_',
+            #         theme: :green,
+            #         classes: 'my-custom-class',
+            #         id: 'sms-verification'
+            #       ) %>
+            #
+            # @example Per codice bancario a 8 cifre
+            #   <%= bui_input_pin(
+            #         name: 'bank_code',
+            #         length: 8,
+            #         theme: :violet,
+            #         size: :small,
+            #         placeholder: '0'
+            #       ) %>
+            def bui_input_pin(name:, value: '', length: 6, placeholder: '•', required: false, disabled: false,
+                              theme: :default, size: :medium, form: nil, classes: '', **options)
+              render BetterUi::General::Input::Pin::Component.new(
+                name: name,
+                value: value,
+                length: length,
+                placeholder: placeholder,
+                required: required,
+                disabled: disabled,
+                theme: theme,
+                size: size,
+                form: form,
+                classes: classes,
+                **options
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/better_ui/general/components/input/rating/rating_helper.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Components
+      module Input
+        module Rating
+          module RatingHelper
+            # Renderizza un componente Rating (Input) interattivo con stelle per valutazioni e feedback.
+            #
+            # @param name [String] Nome del campo rating (obbligatorio se non readonly)
+            # @param value [Float, Integer] Valore del rating attuale (0.0 - max_stars)
+            # @param max_stars [Integer] Numero massimo di stelle (default: 5)
+            # @param readonly [Boolean] Se il rating è in sola lettura
+            # @param half_stars [Boolean] Se supportare mezze stelle
+            # @param theme [Symbol] Tema del componente (:default, :yellow, :orange, :red, :pink, :purple, :blue, :green, :gray)
+            # @param size [Symbol] Dimensione del componente (:small, :medium, :large)
+            # @param show_value [Boolean] Se mostrare il valore numerico accanto alle stelle
+            # @param form [ActionView::Helpers::FormBuilder, nil] Form builder Rails opzionale
+            # @param classes [String] Classi CSS aggiuntive
+            # @param options [Hash] Opzioni aggiuntive per attributi HTML
+            #
+            # @return [String] HTML del componente Rating renderizzato
+            #
+            # @example Uso base per inserimento rating
+            #   <%= bui_input_rating(name: 'review_rating') %>
+            #
+            # @example Rating read-only per visualizzazione
+            #   <%= bui_input_rating(value: 4.5, readonly: true, show_value: true) %>
+            #
+            # @example Con tema e dimensioni personalizzate
+            #   <%= bui_input_rating(name: 'quality', theme: :orange, size: :large, max_stars: 10) %>
+            #
+            # @example Con Rails form builder
+            #   <%= form_with model: @review do |form| %>
+            #     <%= bui_input_rating(name: :rating, form: form, value: @review.rating, show_value: true) %>
+            #   <% end %>
+            #
+            # @example Rating con mezze stelle e valore preimpostato
+            #   <%= bui_input_rating(
+            #         name: 'service_rating',
+            #         value: 3.5,
+            #         half_stars: true,
+            #         theme: :green,
+            #         size: :medium,
+            #         show_value: true
+            #       ) %>
+            def bui_input_rating(name: nil, value: 0, max_stars: 5, readonly: false, half_stars: true,
+                                 theme: :default, size: :medium, show_value: false, form: nil,
+                                 classes: '', **options)
+              render BetterUi::General::Input::Rating::Component.new(
+                name: name,
+                value: value,
+                max_stars: max_stars,
+                readonly: readonly,
+                half_stars: half_stars,
+                theme: theme,
+                size: size,
+                show_value: show_value,
+                form: form,
+                classes: classes,
+                **options
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end